#206 - Added hideButton property to Placeholder

Author: estruyf

CHANGELOG.JSON

@@ -11,6 +11,7 @@
           "`PeoplePicker`: Allow the people picker to search on site level and on tenant level [#97](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/97)",
           "`ListView`: Added support for filtering [#99](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/99)",
           "`PeoplePicker`: Make the titleText property not required [#184](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/184)",
+          "`Placeholder`: Added the ability to specify if the button can be hidden [#206](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/206)",
           "Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0"
         ],
         "fixes": [

CHANGELOG.md

@@ -12,6 +12,7 @@
 - `PeoplePicker`: Allow the people picker to search on site level and on tenant level [#97](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/97)
 - `ListView`: Added support for filtering [#99](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/99)
 - `PeoplePicker`: Make the titleText property not required [#184](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/184)
+- `Placeholder`: Added the ability to specify if the button can be hidden [#206](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/206)
 - Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0
 
 ### Fixes

docs/documentation/docs/about/release-notes.md

@@ -12,6 +12,7 @@
 - `PeoplePicker`: Allow the people picker to search on site level and on tenant level [#97](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/97)
 - `ListView`: Added support for filtering [#99](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/99)
 - `PeoplePicker`: Make the titleText property not required [#184](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/184)
+- `Placeholder`: Added the ability to specify if the button can be hidden [#206](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/206)
 - Updated the `office-ui-fabric-react` to the same version as in SPFx 1.7.0
 
 ### Fixes

docs/documentation/docs/controls/Placeholder.md

@@ -44,6 +44,7 @@ The placeholder control can be configured with the following properties:
 | description | string | yes | Text description for the placeholder. This appears bellow the Icon and IconText. |
 | iconName | string | yes | The name of the icon that will be used in the placeholder. This is the same name as you can find on the Office UI Fabric icons page: [Office UI Fabric icons](https://dev.office.com/fabric#/styles/icons). For example: `Page` or `Add`. |
 | iconText | string | yes | Heading text which is displayed next to the icon. |
+| hideButton | boolean | no | Specify if you want to hide the button. Default is `false`. |
 | onConfigure | function | no | onConfigure handler for the button. The button is optional. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Placeholder)

src/controls/placeholder/IPlaceholderComponent.ts

@@ -21,16 +21,20 @@ export interface IPlaceholderProps {
    * Optional: As the button is optional.
    */
   buttonLabel?: string;
-  /**
-   * onConfigure handler for the button.
-   * Optional: As the button is optional.
-   */
-  onConfigure?: () => void;
   /**
    * This className is applied to the root element of content. Use this to
    * apply custom styles to the placeholder.
    */
   contentClassName?: string;
+  /**
+   * Specify if you want to hide the config button
+   */
+  hideButton?: boolean;
+  /**
+   * onConfigure handler for the button.
+   * Optional: As the button is optional.
+   */
+  onConfigure?: () => void;
 }
 
 export interface IPlaceholderState {

src/controls/placeholder/PlaceholderComponent.tsx

@@ -54,7 +54,7 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
    * @param nextState
    */
   public shouldComponentUpdate(nextProps: IPlaceholderProps, nextState: IPlaceholderState): boolean {
-    return this.state.width !== nextState.width;
+    return this.state.width !== nextState.width || this.props.hideButton !== nextProps.hideButton;
   }
 
   /**
@@ -101,7 +101,7 @@ export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholder
           {this.props.children}
           <div className={styles.placeholderDescription}>
             {
-              this.props.buttonLabel &&
+              (this.props.buttonLabel && !this.props.hideButton) &&
               <PrimaryButton
                 text={this.props.buttonLabel}
                 ariaLabel={this.props.buttonLabel}

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -14,7 +14,7 @@ import { WebPartTitle } from '../../../WebPartTitle';
 import { TaxonomyPicker, IPickerTerms } from '../../../TaxonomyPicker';
 import { ListPicker } from '../../../ListPicker';
 import { IFrameDialog } from '../../../IFrameDialog';
-import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
+import { Environment, EnvironmentType, DisplayMode } from '@microsoft/sp-core-library';
 import { SecurityTrimmedControl, PermissionLevel } from '../../../SecurityTrimmedControl';
 import { SPPermission } from '@microsoft/sp-page-context';
 import { PeoplePicker, PrincipalType } from '../../../PeoplePicker';
@@ -235,6 +235,13 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           title={this.props.title}
           updateProperty={this.props.updateProperty} />
 
+        <Placeholder iconName='Edit'
+                     iconText='Configure your web part'
+                     description='Please configure the web part.'
+                     buttonLabel='Configure'
+                     hideButton={this.props.displayMode === DisplayMode.Read}
+                     onConfigure={this._onConfigure} />
+
         <PeoplePicker context={this.props.context}
                       titleText="People Picker (Group not found)"
                       webAbsoluteUrl={this.props.context.pageContext.site.absoluteUrl}
@@ -487,13 +494,6 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           <SiteBreadcrumb context={this.props.context} />
         </div>
 
-        <Placeholder
-          iconName='Edit'
-          iconText='Configure your web part'
-          description='Please configure the web part.'
-          buttonLabel='Configure'
-          onConfigure={this._onConfigure} />
-
         <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>
       </div>
     );