Updates

package.json

@@ -77,6 +77,7 @@
     "babel-loader": "^5.3.2",
     "busboy": "^0.2.9",
     "chalk": "^1.1.0",
+    "clipboard": "~1.5.3",
     "css-loader": "^0.14.1",
     "eslint": "^1.1.0",
     "eslint-config-airbnb": "^0.1.0",
@@ -87,13 +88,11 @@
     "jest-cli": "~0.6.1",
     "json-loader": "^0.5.1",
     "less-loader": "^2.2.0",
-    "lesslint": "^0.1.7",
     "lodash": "^3.10.0",
     "nico-jsx": "~0.6.0",
     "precommit-hook": "^1.0.7",
     "react": "~0.14.1",
     "react-addons-test-utils": "~0.14.1",
-    "react-clip": "^0.1.4",
     "react-dom": "~0.14.1",
     "react-router": "1.0.0-rc3",
     "webpack": "^1.10.1",
@@ -107,7 +106,6 @@
     "deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy",
     "just-deploy": "npm run clean && webpack --config webpack.deploy.config.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js",
     "lint": "eslint components index.js --ext '.js,.jsx'",
-    "lesslint": "lesslint style",
     "test": "npm run lint && webpack && npm run jest",
     "jest": "jest",
     "pub": "sh ./scripts/publish.sh",

scripts/clip.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import Clipboard from 'clipboard';
+
+let counter = 0;
+
+class Clip extends React.Component {
+  static propTypes: {
+     options: React.PropTypes.object,
+  }
+
+  /* Returns a object with all props that fulfill a certain naming pattern
+   *
+   * @param {RegExp} regexp - Regular expression representing which pattern
+   *                          you'll be searching for.
+   * @param {Boolean} remove - Determines if the regular expression should be
+   *                           removed when transmitting the key from the props
+   *                           to the new object.
+   *
+   * e.g:
+   *
+   * // Considering:
+   * // this.props = {option-foo: 1, onBar: 2, data-foobar: 3 data-baz: 4};
+   *
+   * // *RegExps not using // so that this comment doesn't break up
+   * this.propsWith(option-*, true); // returns {foo: 1}
+   * this.propsWith(on*, true); // returns {Bar: 2}
+   * this.propsWith(data-*); // returns {data-foobar: 1, data-baz: 4}
+   */
+  propsWith(regexp, remove=false) {
+    let object = {};
+
+    Object.keys(this.props).forEach(function(key) {
+      if (key.search(regexp) !== -1) {
+        let objectKey = remove ? key.replace(regexp, '') : key;
+        object[objectKey] = this.props[key];
+      }
+    }, this);
+
+    return object;
+  }
+
+  constructor(props) {
+    super(props);
+    this.id = `__react_clipboard_${counter++}__`;
+  }
+
+  componentDidMount() {
+    // Support old API by trying to assign this.props.options first;
+    let options = this.props.options || this.propsWith(/^option-/, true);
+    this.clipboard = new Clipboard(`#${this.id}`, options);
+
+    let callbacks = this.propsWith(/^on/, true);
+    Object.keys(callbacks).forEach(function(callback) {
+      this.clipboard.on(callback.toLowerCase(), this.props['on' + callback]);
+    }, this);
+  }
+
+  render() {
+    let dataAttributes = this.propsWith(/^data-/);
+    let attributes = this.propsWith(/^span-/, true);
+    return (
+      <span
+        id={this.id}
+        className={this.props.className || ''}
+        style={this.props.style || {}}
+        {...dataAttributes}
+        {...attributes}
+      >
+        {this.props.children}
+      </span>
+    );
+  }
+}
+
+export default Clip;

scripts/demo.js

@@ -1,6 +1,7 @@
 window['css-animation'] = require('css-animation');
 window['react-router'] = require('react-router');
-window.Clip = require('react-clip');
+window.Clipboard = require('clipboard');
+window.Clip = require('./clip');
 var antd = require('../index');
 var React = require('react');
 var ReactDOM = require('react-dom');

spec/colors.html

@@ -528,17 +528,17 @@ var TintShadeTool = React.createClass({
         null,
         React.createElement(
           Clip,
-          { onSuccess: this.copySuccess, 'data-clipboard-text': this.state.result, style: { border: 0, background: '#fff' } },
-          React.createElement('div', { style: { width: 60, borderRadius: 6, height: 28, backgroundColor: this.state.result, display: 'inline-block', verticalAlign: 'middle', marginRight: 8 } })
+          { onSuccess: this.copySuccess, 'data-clipboard-text': this.state.result, style: { border: 0, background: '#fff', cursor: 'pointer' } },
+          React.createElement(
+            Tooltip,
+            { title: '点击色块复制色值' },
+            React.createElement('div', { style: { width: 60, borderRadius: 6, height: 28, backgroundColor: this.state.result, display: 'inline-block', verticalAlign: 'middle', marginRight: 8 } })
+          )
         ),
         React.createElement(
-          Tooltip,
-          { title: '点击左边色块复制色值' },
-          React.createElement(
-            'span',
-            { style: { marginRight: 140, fontFamily: 'Consolas' } },
-            this.state.result
-          )
+          'span',
+          { style: { marginRight: 140, fontFamily: 'Consolas' } },
+          this.state.result
         ),
         React.createElement('input', { className: 'ant-input', style: { width: 80, color: this.state.color, marginRight: 8 }, value: this.state.color, onChange: this.handleChangeColor }),
         React.createElement(InputNumber, { style: { width: 70 }, value: this.state.value, onChange: this.handleChangeValue, min: -100, max: 100, step: 5 }),