change example

cedcn · Sep 1, 2016 · c29f7a4 · c29f7a4
1 parent a5e1125
commit c29f7a4
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 13 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -21,6 +21,7 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "camelcase": 0,
     "no-mixed-operators": 0,
+    "no-script-url": 0
   },
   "globals": {
     "db": true,

diff --git a/example/index.html b/example/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Document</title>
+  <title>Dragresize Example</title>
 </head>
 <body>
   <div id="dragresize"></div>

diff --git a/example/index.js b/example/index.js
@@ -2,15 +2,20 @@ import React, { Component } from 'react';
 import { render } from 'react-dom';
 import Dragresize from '../src/Dragresize';
 
+import './index.less';
+
 class Example extends Component {
   constructor(props) {
     super(props);
     this.state = {
       elmX: 150,
-      elmY: 10,
+      elmY: 50,
       elmW: 150,
       elmH: 100,
-      isChecked: false,
+      isChecked: true,
+      isRatio: false,
+      isDrag: true,
+      isResize: true,
     };
 
     this.change = (e) => {
@@ -21,22 +26,35 @@ class Example extends Component {
   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>
+        <label htmlFor="x">修改X坐标:</label>
+        <input id="x" type="text" onChange={this.change} value={this.state.elmX} />
+        <div>X轴: { this.state.elmX }</div>
+        <div>Y轴: { this.state.elmY }</div>
+        <div>宽: { this.state.elmW }</div>
+        <div>高: { this.state.elmH }</div>
         <a href="javascript:;" onClick={() => this.setState({ isChecked: !this.state.isChecked })}>
-          {!this.state.isChecked ? '选中' : '取消'}
+          {!this.state.isChecked ? 'Checked' : 'No Checked'}
+        </a>
+        <a href="javascript:;" onClick={() => this.setState({ isRatio: !this.state.isRatio })}>
+          {!this.state.isRatio ? '按比例缩放' : '取消比例缩放'}
+        </a>
+        <a href="javascript:;" onClick={() => this.setState({ isDrag: !this.state.isDrag })}>
+          {!this.state.isDrag ? '可拖拽' : '禁止拖拽'}
+        </a>
+        <a href="javascript:;" onClick={() => this.setState({ isResize: !this.state.isResize })}>
+          {!this.state.isResize ? '可缩放' : '禁止缩放'}
         </a>
         <Dragresize
           elmX={this.state.elmX}
           elmY={this.state.elmY}
           elmW={this.state.elmW}
           elmH={this.state.elmH}
           isChecked={this.state.isChecked}
-          isRatio={false}
+          isRatio={this.state.isRatio}
+          isDrag={this.state.isDrag}
+          isResize={this.state.isResize}
           minLeft={150}
+          minTop={50}
           onMouseMove={({ elmX, elmY }) => { this.setState({ elmX, elmY }); }}
           onResize={({ elmX, elmY, elmW, elmH }) => { this.setState({ elmX, elmY, elmW, elmH }); }}
         />

diff --git a/example/index.less b/example/index.less
@@ -0,0 +1,10 @@
+:global{
+  a {
+    display: block;
+    line-height: 2;
+  }
+
+  input {
+    margin-bottom: 20px;
+  }
+}
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^15.0.x",
-    "react-dom": "^15.0.x"
+    "react": "^15.x",
+    "react-dom": "^15.x"
   },
   "dependencies": {
     "react": "^15.3.1",

diff --git a/webpack.dll.js b/webpack.dll.js
@@ -22,7 +22,7 @@ module.exports = {
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
-        warnings: false,
+        warnings: true,
       },
     }),
   ],