diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 6c5764f..3772397
--- a/README.md
+++ b/README.md
@@ -104,6 +104,10 @@ class Example extends Component {
| `searchValueChanged` | `function` | | Function to handle the change of search field. Accepts value as a single argument.
|`responsiveHeight` | `string` | 400px | Responsive height of the wrapping component, can send percent for example: `70%`
|`withGrouping` | `boolean` | false | Your items will be grouped by the group prop values - see "item grouping" section below
+|`enabelCopyLabel` | `boolean` | false | This option includes the ability to copy selected items. Uses `getCopyLabel` to get text for copy buffer.
+|`getCopyLabel` | `function` | (item) => item.label | It is used to get text for copy buffer.
+
+
## Customization
@@ -210,6 +214,15 @@ Use the `noItemsRenderer` to replace the default component.
Does not receive any props.
+
+
+**Copy Labels**
+
+Use the `enableCopyText` to enable copy option.
+
+Use the `getCopyLabel` function property. Return specify string for copy to buffer.
+
+
#### Search Function
diff --git a/src/components/multi_select_state.js b/src/components/multi_select_state.js
old mode 100644
new mode 100755
index 559c88a..f015ade
--- a/src/components/multi_select_state.js
+++ b/src/components/multi_select_state.js
@@ -8,7 +8,8 @@ const withMultiSelectState = WrappedComponent =>
.toLowerCase()
.includes(value.toLowerCase()),
items: [],
- selectedItems: []
+ selectedItems: [],
+ getCopyLabel: item => item.label
};
constructor(props) {
@@ -22,6 +23,7 @@ const withMultiSelectState = WrappedComponent =>
this.handleChange = this.handleChange.bind(this);
this.getList = this.getList.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
+ this.handleCopy = this.handleCopy.bind(this);
const { items, selectedItems } = props;
this.state = {
@@ -86,10 +88,12 @@ const withMultiSelectState = WrappedComponent =>
componentDidMount() {
window.addEventListener("keyup", this.onKeyUp);
+ window.addEventListener("copy", this.handleCopy);
}
componentWillUnmount() {
window.removeEventListener("keyup", this.onKeyUp, false);
+ window.removeEventListener("copy", this.handleCopy);
}
onKeyUp(event) {
@@ -97,7 +101,18 @@ const withMultiSelectState = WrappedComponent =>
this.setState({ firstItemShiftSelected: undefined });
}
}
+ handleCopy(event) {
+ const { enableCopyText } = this.props;
+ if (!enableCopyText) {
+ return;
+ }
+ const { getCopyLabel } = this.props;
+ const { selectedItems } = this.state;
+ const result = selectedItems.map(getCopyLabel).join("\n");
+ event.preventDefault();
+ event.clipboardData.setData("text/plain", result);
+ }
selectItem(event, id) {
const { items } = this.props;
const { selectedItems, firstItemShiftSelected } = this.state;
@@ -193,7 +208,6 @@ const withMultiSelectState = WrappedComponent =>
getList(ref) {
this.list = ref;
}
-
render() {
return (
<_class
filterFunction={[Function]}
+ getCopyLabel={[Function]}
height={400}
items={Array []}
selectedItems={Array []}
@@ -4492,6 +4493,7 @@ exports[`MultiSelect without responsiveHeight 1`] = `
>
<_class
filterFunction={[Function]}
+ getCopyLabel={[Function]}
height={400}
items={Array []}
selectedItems={Array []}
diff --git a/tests/components/multi_select_state.spec.js b/tests/components/multi_select_state.spec.js
old mode 100644
new mode 100755
index 572da2c..b1fad28
--- a/tests/components/multi_select_state.spec.js
+++ b/tests/components/multi_select_state.spec.js
@@ -435,4 +435,63 @@ describe("withMultiSelectState", () => {
wrapper.update();
expect(wrapper.state("filteredItems")).toEqual([ITEM_1]);
});
+
+ test("case enableCopyText is true", () => {
+ const setData = jest.fn();
+ const event = {
+ preventDefault: jest.fn(),
+ clipboardData: { setData }
+ };
+
+ const ConditionalComponent = withMultiSelectState(CustomComponent);
+ const wrapper = shallow(
+
+ );
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_1.id);
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_2.id);
+ wrapper.update();
+ wrapper.instance().handleCopy(event);
+ expect(setData).toBeCalledWith("text/plain", "item 0\nitem 1");
+ });
+
+ test("case enableCopyText is false", () => {
+ const setData = jest.fn();
+ const event = {
+ preventDefault: jest.fn(),
+ clipboardData: { setData }
+ };
+
+ const ConditionalComponent = withMultiSelectState(CustomComponent);
+ const wrapper = shallow(
+
+ );
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_1.id);
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_2.id);
+ wrapper.update();
+ wrapper.instance().handleCopy(event);
+ expect(setData).not.toBeCalledWith("text/plain", "item 0\nitem 1");
+ });
+
+ test("case getCopyLabel", () => {
+ const getCopyLabel = item => item.id;
+ const setData = jest.fn();
+ const event = {
+ preventDefault: jest.fn(),
+ clipboardData: { setData }
+ };
+
+ const ConditionalComponent = withMultiSelectState(CustomComponent);
+ const wrapper = shallow(
+
+ );
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_1.id);
+ wrapper.props().selectItem(EVENT_WITH_SHIFT, ITEM_2.id);
+ wrapper.update();
+ wrapper.instance().handleCopy(event);
+ expect(setData).toBeCalledWith("text/plain", "0\n1");
+ });
});