You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.1 KiB
76 lines
2.1 KiB
9 years ago
|
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;
|