use full words instead of abbr & use offset instead of client

Author: zombieJ

README.md

@@ -237,7 +237,7 @@ ReactDOM.render((
           <td>stretch</td>
           <td>string</td>
           <td></td>
-          <td>Let popup div stretch with trigger element. enums of 'w', 'h'</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

@@ -161,8 +161,10 @@ class Test extends React.Component {
           Stretch:
           <select value={state.stretch} onChange={this.onStretch}>
             <option value="">--NONE--</option>
-            <option value="w">by width</option>
-            <option value="h">by height</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;

src/Popup.js

@@ -74,8 +74,8 @@ class Popup extends Component {
     const $ele = getRootDomNode();
     if (!$ele) return;
 
-    const height = $ele.clientHeight;
-    const width = $ele.clientWidth;
+    const height = $ele.offsetHeight;
+    const width = $ele.offsetWidth;
 
     if (targetHeight !== height || targetWidth !== width || !stretchChecked) {
       this.setState({
@@ -138,10 +138,14 @@ class Popup extends Component {
     if (stretch) {
       if (stretchChecked) {
         // Stretch with target
-        if (stretch.indexOf('h') !== -1) {
+        if (stretch.indexOf('height') !== -1) {
+          sizeStyle.height = targetHeight;
+        } else if (stretch.indexOf('minHeight') !== -1) {
           sizeStyle.minHeight = targetHeight;
         }
-        if (stretch.indexOf('w') !== -1) {
+        if (stretch.indexOf('width') !== -1) {
+          sizeStyle.width = targetWidth;
+        } else if (stretch.indexOf('minWidth') !== -1) {
           sizeStyle.minWidth = targetWidth;
         }
       } else {

tests/index.js

@@ -745,7 +745,7 @@ describe('rc-trigger', function main() {
     ), div);
 
     it('width', (done) => {
-      const trigger = createTrigger('w');
+      const trigger = createTrigger('width');
       const domNode = ReactDOM.findDOMNode(trigger);
       Simulate.click(domNode);
 
@@ -757,7 +757,7 @@ describe('rc-trigger', function main() {
     });
 
     it('height', (done) => {
-      const trigger = createTrigger('h');
+      const trigger = createTrigger('height');
       const domNode = ReactDOM.findDOMNode(trigger);
       Simulate.click(domNode);