Hiding title on small zones

Author: estruyf

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## 1.2.4
 
+**Enhancements**
+- Hiding placeholder web part on small zones
+
 **Fixes**
 - iFrame dialog reference fix [#52 - Need some more implementation documentation on IFrameDialog](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/52)
 

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

@@ -2,6 +2,9 @@
 
 ## 1.2.4
 
+**Enhancements**
+- Hiding placeholder web part on small zones
+
 **Fixes**
 - iFrame dialog reference fix [#52 - Need some more implementation documentation on IFrameDialog](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/52)
 

src/controls/placeholder/IPlaceholderComponent.ts

@@ -32,3 +32,7 @@ export interface IPlaceholderProps {
    */
   contentClassName?: string;
 }
+
+export interface IPlaceholderState {
+  width: number;
+}

src/controls/placeholder/PlaceholderComponent.module.scss

@@ -29,9 +29,13 @@
             }
 
             .placeholderText {
-                display: inline-block;
+                display: inline;
                 vertical-align: middle;
-                white-space: normal
+                white-space: normal;
+
+                &.hide {
+                  display: none;
+                }
             }
         }
 

src/controls/placeholder/PlaceholderComponent.tsx

@@ -3,17 +3,24 @@ import { IPlaceholderProps } from './IPlaceholderComponent';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import styles from './PlaceholderComponent.module.scss';
 import * as appInsights from '../../common/appInsights';
+import { IPlaceholderState } from '.';
 
 /**
  * Placeholder component
  */
-export class Placeholder extends React.Component<IPlaceholderProps, {}> {
+export class Placeholder extends React.Component<IPlaceholderProps, IPlaceholderState> {
+  private _crntElm: HTMLDivElement = null;
+
   /**
    * Constructor
    */
   constructor(props: IPlaceholderProps) {
     super(props);
 
+    this.state = {
+      width: null
+    };
+
     appInsights.track('ReactPlaceholder', {
       description: !!props.description,
       iconName: !!props.iconName,
@@ -22,32 +29,72 @@ export class Placeholder extends React.Component<IPlaceholderProps, {}> {
       onConfigure: !!props.onConfigure,
       contentClassName: !!props.contentClassName
     });
+  }
+
+  /**
+   * componentDidMount lifecycle hook
+   */
+  public componentDidMount(): void {
+    this._setZoneWidth();
+  }
+
+  /**
+   * componentDidUpdate lifecycle hook
+   * @param prevProps
+   * @param prevState
+   */
+  public componentDidUpdate(prevProps: IPlaceholderProps, prevState: IPlaceholderState): void {
+    this._setZoneWidth();
+  }
 
-    this._handleBtnClick = this._handleBtnClick.bind(this);
+  /**
+   * shouldComponentUpdate lifecycle hook
+   * @param nextProps
+   * @param nextState
+   */
+  public shouldComponentUpdate(nextProps: IPlaceholderProps, nextState: IPlaceholderState): boolean {
+    return this.state.width !== nextState.width;
   }
 
   /**
    * Execute the onConfigure function
    */
-  private _handleBtnClick(event?: React.MouseEvent<HTMLButtonElement>) {
+  private _handleBtnClick = (event?: React.MouseEvent<HTMLButtonElement>): void => {
     this.props.onConfigure();
   }
 
+  /**
+   * Set the current zone width
+   */
+  private _setZoneWidth = () => {
+    this.setState({
+      width: this._crntElm.clientWidth
+    });
+    console.log(this._crntElm.offsetWidth, this._crntElm.clientWidth);
+  }
+
+  /**
+   * Stores the current element
+   */
+  private _linkElm = (e: HTMLDivElement) => {
+    this._crntElm = e;
+  }
+
   /**
    * Default React component render method
    */
   public render(): React.ReactElement<IPlaceholderProps> {
     const iconName = typeof this.props.iconName !== 'undefined' && this.props.iconName !== null ? `ms-Icon--${this.props.iconName}` : '';
 
     return (
-      <div className={`${styles.placeholder} ${this.props.contentClassName ? this.props.contentClassName : ''}`}>
+      <div className={`${styles.placeholder} ${this.props.contentClassName ? this.props.contentClassName : ''}`} ref={this._linkElm}>
         <div className={styles.placeholderContainer}>
           <div className={styles.placeholderHead}>
             <div className={styles.placeholderHeadContainer}>
               {
                 iconName ? <i className={`${styles.placeholderIcon} ms-fontSize-su ms-Icon ${iconName}`}></i> : ''
               }
-              <span className={`${styles.placeholderText} ms-fontWeight-light ms-fontSize-xxl`}>{this.props.iconText}</span>
+              <span className={`${styles.placeholderText} ms-fontWeight-light ms-fontSize-xxl ${(this.state.width && this.state.width <= 380) ? styles.hide : "" }`}>{this.props.iconText}</span>
             </div>
           </div>
           <div className={styles.placeholderDescription}>