edit example

Author: cedcn

example/index.js

@@ -1,8 +1,50 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { render } from 'react-dom';
 import Dragresize from '../src/Dragresize';
 
+class Example extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      elmX: 10,
+      elmY: 10,
+      elmW: 150,
+      elmH: 100,
+      isChecked: false,
+    };
+
+    this.change = (e) => {
+      this.setState({ elmX: Number(e.target.value) });
+    };
+  }
+
+  render() {
+    return (
+      <div className="example">
+        <input type="text" onChange={this.change} value={this.state.elmX} />
+        <div>X: { this.state.elmX }</div>
+        <div>Y: { this.state.elmY }</div>
+        <div>W: { this.state.elmW }</div>
+        <div>H: { this.state.elmH }</div>
+        <a href="javascript:;" onClick={() => this.setState({ isChecked: !this.state.isChecked })}>
+          {!this.state.isChecked ? '选中' : '取消'}
+        </a>
+        <Dragresize
+          elmX={this.state.elmX}
+          elmY={this.state.elmY}
+          elmW={this.state.elmW}
+          elmH={this.state.elmH}
+          isChecked={this.state.isChecked}
+          isRatio={false}
+          onMouseMove={({ elmX, elmY }) => { this.setState({ elmX, elmY }); }}
+          onResize={({ elmX, elmY, elmW, elmH }) => { this.setState({ elmX, elmY, elmW, elmH }); }}
+        />
+      </div>
+    );
+  }
+}
+
 render(
-  <Dragresize />,
+  <Example />,
   document.getElementById('dragresize')
 );

src/Dragresize.jsx

@@ -170,6 +170,11 @@ class Dragresize extends Component {
     document.addEventListener('mouseup', this.mouseUp);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { elmX, elmY, elmW, elmH } = nextProps;
+    this.setState({ elmX, elmY, elmW, elmH });
+  }
+
   componentWillUnmount() {
     document.removeEventListener('mouseup', this.mouseUp);
   }
@@ -296,14 +301,14 @@ Dragresize.defaultProps = {
   isRatio: true,
   isChecked: true,
   dragScope: {
-    minLeft: 10,
-    minTop: 10,
+    minLeft: null,
+    minTop: null,
     maxLeft: 1000,
     maxTop: 600,
   },
   sizeScope: {
-    minWidth: 30,
-    minHeight: 30,
+    minWidth: 10,
+    minHeight: 10,
     maxWidth: null,
     maxHeight: null,
   },