update component switch

soniaxu7 · Nov 22, 2015 · 150bef9 · 150bef9
1 parent ed3653e
commit 150bef9
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 30 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -140,8 +140,8 @@ module.exports = function(grunt) {
 
     watch: {
       less: {
-        files: 'less/**/*.less',
-        tasks: ['clean', 'lesslint', 'less', 'postcss', 'csscomb', 'cssmin', 'copy']
+        files: ['less/**/*.less', 'js/**'],
+        tasks: ['clean', 'css', 'webpack:dev', 'usebanner', 'copy']
       }
     }
   });
@@ -164,7 +164,7 @@ module.exports = function(grunt) {
 
 
   // Default task.
-  grunt.registerTask('release', ['clean', 'css', 'js', 'usebanner', 'copy']);
+  grunt.registerTask('build', ['clean', 'css', 'js', 'usebanner', 'copy']);
 
   // Generate web font
   grunt.registerTask('font', ['webfont']);

diff --git a/Makefile b/Makefile
@@ -1,6 +1,6 @@
-release:
+build:
 # Make Sure grunt has been installed locally
-	grunt release
+	grunt build
 
 clean:
 # Clean generated css files
@@ -18,4 +18,4 @@ test:
 # Run tests
 	grunt test
 
-.PHONY: release clean watch generate_font test
+.PHONY: build clean watch generate_font test
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ Three steps to go:
 When Grunt is installed, go ahead and compile all the files:
 
 ```
-grunt release or make release
+grunt build or make build
 ```
 Run the script below to clean the generated files:
 ```

diff --git a/dist/js/uskin.js b/dist/js/uskin.js
diff --git a/dist/js/uskin.js.map b/dist/js/uskin.js.map
diff --git a/dist/js/uskin.min.js b/dist/js/uskin.min.js
diff --git a/dist/js/uskin.min.js.map b/dist/js/uskin.min.js.map
diff --git a/docs/react_demo/switch.html b/docs/react_demo/switch.html
@@ -9,15 +9,22 @@
     <script src="../../node_modules/react-dom/dist/react-dom.min.js"></script>
     <script src="../../node_modules/babel/dist/browser.min.js"></script>
     <script src="../../dist/js/uskin.js"></script>
+    <style type="text/css">
+      #example {margin: 40px;}
+    </style>
   </head>
   <body>
     <div id="example"></div>
     <script type="text/babel">
       var Switch = uskin.Switch;
       ReactDOM.render(
-        <Switch />,
+        <Switch onClick={listener} />,
         document.getElementById('example')
       );
+      function listener(e) {
+        console.debug(e);
+        alert('click triggered!');
+      }
     </script>
   </body>
 </html>
diff --git a/js/components/switch.jsx b/js/components/switch.jsx
@@ -1,12 +1,25 @@
 import React from 'react';
 
-var Switch = React.createClass({
-  render: function() {
-    return <div className="switch">
-      <input id="uskin-1" type="checkbox" />
-      <label htmlFor="uskin-1" className="switch-inner"></label>
-    </div>
+class Switch extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.clickHandler = this.clickHandler.bind(this);
+  }
+
+  clickHandler(e) {
+    this.props.onClick && this.props.onClick.call(this, e);
+  }
+
+  render() {
+    return (
+      <div className="switch">
+        <input id="uskin-1" type="checkbox" />
+        <label htmlFor="uskin-1" className="switch-inner" onClick={this.clickHandler}></label>
+      </div>
+    )
   }
-});
+}
 
 export default Switch;
diff --git a/js/mixins/advice.js b/js/mixins/advice.js
diff --git a/js/mixins/hash.js b/js/mixins/hash.js
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "homepage": "https://github.com/icecreamliker/uskin",
   "author": "Lee Yao <yaoli111144@gmail.com>",
   "scripts": {
-    "release": "grunt release",
+    "build": "grunt build",
     "test": "jest"
   },
   "repository": {