Merge pull request ant-design#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/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$/,