update clip

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');