Merge pull request #82 from zombieJ/stretch

Support stretch porp

Author: zombieJ

README.md

@@ -233,6 +233,12 @@ ReactDOM.render((
           <td></td>
           <td>builtin placement align map. used by placement prop</td>
         </tr>
+        <tr>
+          <td>stretch</td>
+          <td>string</td>
+          <td></td>
+          <td>Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth')</td>
+        </tr>
     </tbody>
 </table>
 

examples/simple.js

@@ -60,6 +60,7 @@ class Test extends React.Component {
     },
     offsetX: undefined,
     offsetY: undefined,
+    stretch: '',
   };
 
   onPlacementChange = (e) => {
@@ -68,6 +69,12 @@ class Test extends React.Component {
     });
   }
 
+  onStretch = (e) => {
+    this.setState({
+      stretch: e.target.value,
+    });
+  }
+
   onTransitionChange = (e) => {
     this.setState({
       transitionName: e.target.checked ? e.target.value : '',
@@ -150,6 +157,17 @@ class Test extends React.Component {
           </select>
         </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
+        <label>
+          Stretch:
+          <select value={state.stretch} onChange={this.onStretch}>
+            <option value="">--NONE--</option>
+            <option value="width">width</option>
+            <option value="minWidth">minWidth</option>
+            <option value="height">height</option>
+            <option value="minHeight">minHeight</option>
+          </select>
+        </label>
+        &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
           <input
             value="rc-trigger-popup-zoom"
@@ -251,7 +269,7 @@ class Test extends React.Component {
         &nbsp;&nbsp;&nbsp;&nbsp;
         <button onClick={this.destroy}>destroy</button>
       </div>
-      <div style={{ margin: 100, position: 'relative' }}>
+      <div style={{ margin: 120, position: 'relative' }}>
         <Trigger
           getPopupContainer={undefined && getPopupContainer}
           popupAlign={getPopupAlign(state)}
@@ -260,19 +278,34 @@ class Test extends React.Component {
           // zIndex={40}
           mask={this.state.mask}
           maskClosable={this.state.maskClosable}
+          stretch={this.state.stretch}
           // maskAnimation="fade"
           // mouseEnterDelay={0.1}
           // mouseLeaveDelay={0.1}
           action={Object.keys(state.trigger)}
           builtinPlacements={builtinPlacements}
+          popupStyle={{
+            border: '1px solid red',
+            padding: 10,
+            background: 'white',
+            boxSizing: 'border-box',
+          }}
           popup={
-            <div style={{ border: '1px solid red', padding: 10, background: 'white' }}>
+            <div>
               i am a popup
             </div>
           }
           popupTransitionName={state.transitionName}
         >
-          <a href="#" style={{ margin: 20 }} onClick={preventDefault}>trigger</a>
+          <a
+            style={{ margin: 20, display: 'inline-block', background: `rgba(255, 0, 0, 0.05)` }}
+            href="#"
+            onClick={preventDefault}
+          >
+            <p>This is a example of trigger usage.</p>
+            <p>You can adjust the value above</p>
+            <p>which will also change the behaviour of popup.</p>
+          </a>
         </Trigger>
       </div>
     </div>);

src/Popup.js

@@ -20,17 +20,31 @@ class Popup extends Component {
     className: PropTypes.string,
     prefixCls: PropTypes.string,
     onMouseLeave: PropTypes.func,
+    stretch: PropTypes.string,
+    children: PropTypes.node,
   };
 
   constructor(props) {
     super(props);
 
+    this.state = {
+      // Used for stretch
+      stretchChecked: false,
+      targetWidth: undefined,
+      targetHeight: undefined,
+    };
+
     this.savePopupRef = saveRef.bind(this, 'popupInstance');
     this.saveAlignRef = saveRef.bind(this, 'alignInstance');
   }
 
   componentDidMount() {
     this.rootNode = this.getPopupDomNode();
+    this.setStretchSize();
+  }
+
+  componentDidUpdate() {
+    this.setStretchSize();
   }
 
   onAlign = (popupDomNode, align) => {
@@ -45,6 +59,33 @@ class Popup extends Component {
     props.onAlign(popupDomNode, align);
   }
 
+  // Record size if stretch needed
+  setStretchSize = () => {
+    const { stretch, getRootDomNode, visible } = this.props;
+    const { stretchChecked, targetHeight, targetWidth } = this.state;
+
+    if (!stretch || !visible) {
+      if (stretchChecked) {
+        this.setState({ stretchChecked: false });
+      }
+      return;
+    }
+
+    const $ele = getRootDomNode();
+    if (!$ele) return;
+
+    const height = $ele.offsetHeight;
+    const width = $ele.offsetWidth;
+
+    if (targetHeight !== height || targetWidth !== width || !stretchChecked) {
+      this.setState({
+        stretchChecked: true,
+        targetHeight: height,
+        targetWidth: width,
+      });
+    }
+  };
+
   getPopupDomNode() {
     return ReactDOM.findDOMNode(this.popupInstance);
   }
@@ -77,24 +118,54 @@ class Popup extends Component {
   }
 
   getPopupElement() {
-    const { savePopupRef, props } = this;
-    const { align, style, visible, prefixCls, destroyPopupOnHide } = props;
+    const { savePopupRef } = this;
+    const { stretchChecked, targetHeight, targetWidth } = this.state;
+    const {
+      align, visible,
+      prefixCls, style, getClassNameFromAlign,
+      destroyPopupOnHide, stretch, children,
+      onMouseEnter, onMouseLeave,
+    } = this.props;
     const className = this.getClassName(this.currentAlignClassName ||
-      props.getClassNameFromAlign(align));
+      getClassNameFromAlign(align));
     const hiddenClassName = `${prefixCls}-hidden`;
+
     if (!visible) {
       this.currentAlignClassName = null;
     }
+
+    const sizeStyle = {};
+    if (stretch) {
+      if (stretchChecked) {
+        // Stretch with target
+        if (stretch.indexOf('height') !== -1) {
+          sizeStyle.height = targetHeight;
+        } else if (stretch.indexOf('minHeight') !== -1) {
+          sizeStyle.minHeight = targetHeight;
+        }
+        if (stretch.indexOf('width') !== -1) {
+          sizeStyle.width = targetWidth;
+        } else if (stretch.indexOf('minWidth') !== -1) {
+          sizeStyle.minWidth = targetWidth;
+        }
+      } else {
+        // Do nothing when stretch not ready
+        return null;
+      }
+    }
+
     const newStyle = {
+      ...sizeStyle,
       ...style,
       ...this.getZIndexStyle(),
     };
+
     const popupInnerProps = {
       className,
       prefixCls,
       ref: savePopupRef,
-      onMouseEnter: props.onMouseEnter,
-      onMouseLeave: props.onMouseLeave,
+      onMouseEnter,
+      onMouseLeave,
       style: newStyle,
     };
     if (destroyPopupOnHide) {
@@ -118,7 +189,7 @@ class Popup extends Component {
                 visible
                 {...popupInnerProps}
               >
-                {props.children}
+                {children}
               </PopupInner>
             </Align>
           ) : null}
@@ -148,7 +219,7 @@ class Popup extends Component {
             hiddenClassName={hiddenClassName}
             {...popupInnerProps}
           >
-            {props.children}
+            {children}
           </PopupInner>
         </Align>
       </Animate>

src/index.js

@@ -67,6 +67,7 @@ export default class Trigger extends React.Component {
       PropTypes.object,
     ]),
     maskAnimation: PropTypes.string,
+    stretch: PropTypes.string,
   };
 
   static defaultProps = {
@@ -323,36 +324,46 @@ export default class Trigger extends React.Component {
   }
 
   getComponent = () => {
-    const { props, state } = this;
+    const {
+      prefixCls, destroyPopupOnHide, popupClassName, action,
+      onPopupAlign, popupAnimation, popupTransitionName, popupStyle,
+      mask, maskAnimation, maskTransitionName, zIndex, popup, stretch,
+    } = this.props;
+    const { state } = this;
+
+    const align = this.getPopupAlign();
+
     const mouseProps = {};
     if (this.isMouseEnterToShow()) {
       mouseProps.onMouseEnter = this.onPopupMouseEnter;
     }
     if (this.isMouseLeaveToHide()) {
       mouseProps.onMouseLeave = this.onPopupMouseLeave;
     }
+
     return (
       <Popup
-        prefixCls={props.prefixCls}
-        destroyPopupOnHide={props.destroyPopupOnHide}
+        prefixCls={prefixCls}
+        destroyPopupOnHide={destroyPopupOnHide}
         visible={state.popupVisible}
-        className={props.popupClassName}
-        action={props.action}
-        align={this.getPopupAlign()}
-        onAlign={props.onPopupAlign}
-        animation={props.popupAnimation}
+        className={popupClassName}
+        action={action}
+        align={align}
+        onAlign={onPopupAlign}
+        animation={popupAnimation}
         getClassNameFromAlign={this.getPopupClassNameFromAlign}
         {...mouseProps}
+        stretch={stretch}
         getRootDomNode={this.getRootDomNode}
-        style={props.popupStyle}
-        mask={props.mask}
-        zIndex={props.zIndex}
-        transitionName={props.popupTransitionName}
-        maskAnimation={props.maskAnimation}
-        maskTransitionName={props.maskTransitionName}
+        style={popupStyle}
+        mask={mask}
+        zIndex={zIndex}
+        transitionName={popupTransitionName}
+        maskAnimation={maskAnimation}
+        maskTransitionName={maskTransitionName}
         ref={this.savePopup}
       >
-        {typeof props.popup === 'function' ? props.popup() : props.popup}
+        {typeof popup === 'function' ? popup() : popup}
       </Popup>
     );
   }

tests/index.js

@@ -727,4 +727,45 @@ describe('rc-trigger', function main() {
       expect(mock.testInstance).to.be('bar');
     });
   });
+
+  describe.only('stretch', () => {
+    const createTrigger = (stretch) => ReactDOM.render((
+        <Trigger
+          action={['click']}
+          popupAlign={placementAlignMap.left}
+          popup={<strong className="x-content">tooltip2</strong>}
+          stretch={stretch}
+        >
+          <div className="target">
+            click me to show trigger
+            <br />
+            react component trigger
+          </div>
+        </Trigger>
+    ), div);
+
+    it('width', (done) => {
+      const trigger = createTrigger('width');
+      const domNode = ReactDOM.findDOMNode(trigger);
+      Simulate.click(domNode);
+
+      async.series([timeout(20), (next) => {
+        const popupDomNode = trigger.getPopupDomNode();
+        expect($(popupDomNode).width()).to.be($(domNode).width());
+        next();
+      }], done);
+    });
+
+    it('height', (done) => {
+      const trigger = createTrigger('height');
+      const domNode = ReactDOM.findDOMNode(trigger);
+      Simulate.click(domNode);
+
+      async.series([timeout(20), (next) => {
+        const popupDomNode = trigger.getPopupDomNode();
+        expect($(popupDomNode).height()).to.be($(domNode).height());
+        next();
+      }], done);
+    });
+  });
 });