update clip

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

+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

 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.md

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