Merge pull request #705 from ant-design/fix-clipboard-error-in-ie8

Fix clipboard error in ie8

components/icon/index.md

@@ -120,16 +120,15 @@ const CopyableIcon = React.createClass({
       }, 1000);
     });
   },
-  getCopyCode(type) {
-    return '<Icon type="' + type + '" />';
-  },
   render() {
+    const text = '&lt;Icon type="' + this.props.type + '" /&gt;';
     return (
-      <Clip component="li" data-clipboard-text={this.getCopyCode(this.props.type)}
-        onSuccess={this.onCopied} className={this.state.justCopied ? 'copied' : ''}>
-        <Icon type={this.props.type} />
-        <span className="anticon-class">{this.props.type}</span>
-      </Clip>
+      <CopyToClipboard text={text} onCopy={this.onCopied}>
+        <li className={this.state.justCopied ? 'copied' : ''}>
+          <Icon type={this.props.type} />
+          <span className="anticon-class">{this.props.type}</span>
+        </li>
+      </CopyToClipboard>
     );
   }
 });

index.js

@@ -46,12 +46,13 @@ const antd = {
 
 antd.version = require('./package.json').version;
 
+const ReactVersion = React.version;
 if (process.env.NODE_ENV !== 'production') {
   const warning = require('warning');
   const semver = require('semver');
   const reactVersionInDeps = require('./package.json').devDependencies.react;
-  warning(semver.satisfies(React.version, reactVersionInDeps) || semver.gtr(React.version, reactVersionInDeps),
-    `antd@${antd.version} need react@${reactVersionInDeps} or higher, which is react@${React.version} now.`);
+  warning(semver.satisfies(ReactVersion, reactVersionInDeps) || semver.gtr(ReactVersion, reactVersionInDeps),
+    `antd@${antd.version} need react@${reactVersionInDeps} or higher, which is react@${ReactVersion} now.`);
 }
 
 module.exports = antd;

package.json

@@ -82,8 +82,8 @@
     "babel-preset-stage-0": "^6.1.18",
     "busboy": "^0.2.9",
     "chalk": "^1.1.0",
-    "clipboard": "^1.5.5",
     "css-loader": "^0.23.0",
+    "es3ify-loader": "^0.1.0",
     "eslint": "^1.1.0",
     "eslint-config-airbnb": "^1.0.0",
     "eslint-plugin-babel": "^3.0.0",
@@ -102,6 +102,7 @@
     "pre-commit": "1.x",
     "react": "~0.14.2",
     "react-addons-test-utils": "~0.14.2",
+    "react-copy-to-clipboard": "^3.0.4",
     "react-dom": "~0.14.2",
     "react-router": "~1.0.0",
     "react-stateless-wrapper": "~1.0.2",

scripts/clip.js

@@ -1,70 +0,0 @@
-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 component = this.props.component || 'span';
-    return React.createElement(component, {
-      id: this.id,
-      className: this.props.className || '',
-      style: this.props.style || {},
-      ...dataAttributes
-    }, this.props.children);
-  }
-}
-
-export default Clip;

scripts/demo.js

@@ -24,7 +24,7 @@ window.require = function (path) {
 
 window['css-animation'] = require('css-animation');
 window['react-router'] = require('react-router');
-window.Clip = require('./clip');
+window.CopyToClipboard = require('react-copy-to-clipboard');
 var antd = require('../index');
 var React = require('react');
 var ReactDOM = require('react-dom');

spec/colors.md

@@ -261,11 +261,11 @@ let TintShadeTool = React.createClass({
     };
     return <div style={{margin: '40px 0'}}>
       <div>
-        <Clip onSuccess={this.copySuccess} data-clipboard-text={this.state.result} style={{border: 0, background: '#fff', cursor: 'pointer'}}>
-          <Tooltip title="点击色块复制色值">
+        <Tooltip title="点击色块复制色值">
+          <CopyToClipboard onCopy={this.copySuccess} text={this.state.result}>
             <div style={{backgroundColor: this.state.result}} className={'color-block ' + (this.state.justCopied ? 'copied' : '') + (this.state.darkBackground ? ' dark' : '')}></div>
-          </Tooltip>
-        </Clip>
+          </CopyToClipboard>
+        </Tooltip>
         <span style={{width: 188, display: 'inline-block', 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} />
@@ -290,6 +290,7 @@ ReactDOM.render(<TintShadeTool />, document.getElementById('color-tint-shade-too
   display: inline-block;
   vertical-align: middle;
   margin-right: 8px;
+  cursor: pointer;
 }
 .color-block:after {
   position: absolute;

webpack.config.js

@@ -21,12 +21,16 @@ module.exports = {
 
   module: {
     loaders: [{
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'es3ify',
+    }, {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       loader: 'babel',
       query: {
         presets: ['es2015', 'react', 'stage-0'],
-        plugins: ['add-module-exports'],
+        plugins: ['add-module-exports']
       }
     }, {
       test: /\.json$/,