Merge branch 'PlaceHolderRender' of https://github.com/jason-appliedi…

…s/sp-dev-fx-controls-react into jason-appliedis-PlaceHolderRender

src/controls/listView/IListView.ts

@@ -47,6 +47,10 @@ export interface IListViewProps {
    * Specify the placeholder for the filter text box. Default 'Search'
    */
   filterPlaceHolder?: string;
+  /**
+   * Specify if the filter width in % 0 - 100.
+   */
+  filterWidth?: number;
   /**
    * Specify if the filter text box should be rendered.
    */

src/controls/listView/ListView.tsx

@@ -500,7 +500,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
 
-    let { showFilter, filterPlaceHolder } = this.props;
+    let { showFilter, filterPlaceHolder, filterWidth } = this.props;
     let { filterValue, items } = this.state;
 
     // Check if selection mode is single selection,
@@ -517,7 +517,11 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
     return (
       <div>
         {
-          showFilter && <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          showFilter && 
+          // Add div to control the width of the filter for the list view dynamically allowing users to enter a number 0-100 % to alter the field width
+          <div style={{width:`${filterWidth}%`}}>
+            <TextField placeholder={filterPlaceHolder || strings.ListViewFilterLabel} onChanged={this._updateFilterValue} value={filterValue}/>
+          </div>
         }
         <DetailsList
           key="ListViewControl"

src/controls/placeholder/PlaceholderComponent.tsx

@@ -54,6 +54,17 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
    * @param nextState
    */
   public shouldComponentUpdate(nextProps: IPlaceholderProps, nextState: IPlaceholderState): boolean {
+    /*
+    * compare the props object for changes in primative values
+    * Return/re-render, bexeting the function, if the props change
+    */
+    for (const property in nextProps) {
+      if (property != '_onConfigure'){
+          if (nextProps[property] != this.props[property]) {
+              return true;
+          }
+      }
+    } 
     return this.state.width !== nextState.width || this.props.hideButton !== nextProps.hideButton;
   }