From f74ed4efd034fe4a067237262ac8d26c7347060e Mon Sep 17 00:00:00 2001 From: Maksim Date: Fri, 22 Feb 2019 14:18:17 +0200 Subject: [PATCH 1/6] it is changes, added opportunity copy on system buffer selected item name --- src/components/multi_select_state.js | 10 +++++++++- tests/components/multi_select_state.spec.js | 15 +++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) mode change 100644 => 100755 src/components/multi_select_state.js mode change 100644 => 100755 tests/components/multi_select_state.spec.js diff --git a/src/components/multi_select_state.js b/src/components/multi_select_state.js old mode 100644 new mode 100755 index 559c88a..99a66e3 --- a/src/components/multi_select_state.js +++ b/src/components/multi_select_state.js @@ -22,6 +22,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 +87,12 @@ const withMultiSelectState = WrappedComponent => componentDidMount() { window.addEventListener("keyup", this.onKeyUp); + window.addEventListener("copy", this.handlyCopy); } componentWillUnmount() { window.removeEventListener("keyup", this.onKeyUp, false); + window.removeEventListener("copy", this.handlyCopy); } onKeyUp(event) { @@ -97,7 +100,13 @@ const withMultiSelectState = WrappedComponent => this.setState({ firstItemShiftSelected: undefined }); } } + handleCopy(event) { + const { selectedItems } = this.state; + const result = selectedItems.map(item => item.label).join("\n"); + event.preventDefault(); + event.clipboardData.setData("text/plain", result); + } selectItem(event, id) { const { items } = this.props; const { selectedItems, firstItemShiftSelected } = this.state; @@ -193,7 +202,6 @@ const withMultiSelectState = WrappedComponent => getList(ref) { this.list = ref; } - render() { return ( { wrapper.update(); expect(wrapper.state("filteredItems")).toEqual([ITEM_1]); }); + + test("simulate copy", () => { + 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"); + }); }); From c2c59c3d4e4c86930b4aace7982ceb92da1227d5 Mon Sep 17 00:00:00 2001 From: Maksim Date: Fri, 22 Feb 2019 14:34:02 +0200 Subject: [PATCH 2/6] it is changes, added opportunity copy on system buffer selected item name --- src/components/multi_select_state.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/multi_select_state.js b/src/components/multi_select_state.js index 99a66e3..9f09c6a 100755 --- a/src/components/multi_select_state.js +++ b/src/components/multi_select_state.js @@ -30,6 +30,8 @@ const withMultiSelectState = WrappedComponent => items, filteredItems: items }; + + this.refCmponent = React.createRef(); } componentWillReceiveProps(nextProps) { @@ -87,12 +89,12 @@ const withMultiSelectState = WrappedComponent => componentDidMount() { window.addEventListener("keyup", this.onKeyUp); - window.addEventListener("copy", this.handlyCopy); + window.addEventListener("copy", this.handleCopy); } componentWillUnmount() { window.removeEventListener("keyup", this.onKeyUp, false); - window.removeEventListener("copy", this.handlyCopy); + window.removeEventListener("copy", this.handleCopy); } onKeyUp(event) { From 80f8672c83c6221dcc9cf2dd142a178ea7c559e7 Mon Sep 17 00:00:00 2001 From: Maksim Date: Fri, 22 Feb 2019 16:47:01 +0200 Subject: [PATCH 3/6] it is changes, added opportunity copy on system buffer selected item name --- src/components/multi_select_state.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/multi_select_state.js b/src/components/multi_select_state.js index 9f09c6a..b19c650 100755 --- a/src/components/multi_select_state.js +++ b/src/components/multi_select_state.js @@ -30,8 +30,6 @@ const withMultiSelectState = WrappedComponent => items, filteredItems: items }; - - this.refCmponent = React.createRef(); } componentWillReceiveProps(nextProps) { From cba378ceafe32dd041fb8690b7c0186c962f3587 Mon Sep 17 00:00:00 2001 From: Maksim Date: Tue, 26 Feb 2019 13:13:39 +0200 Subject: [PATCH 4/6] copy on system buffer selected item name --- README.md | 13 ++++++ src/components/multi_select_state.js | 12 ++++-- tests/components/multi_select_state.spec.js | 48 ++++++++++++++++++++- 3 files changed, 68 insertions(+), 5 deletions(-) mode change 100644 => 100755 README.md 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 index b19c650..f015ade 100755 --- 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) { @@ -101,9 +102,14 @@ const withMultiSelectState = WrappedComponent => } } handleCopy(event) { - const { selectedItems } = this.state; - const result = selectedItems.map(item => item.label).join("\n"); + 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); } diff --git a/tests/components/multi_select_state.spec.js b/tests/components/multi_select_state.spec.js index 24ff2ae..b1fad28 100755 --- a/tests/components/multi_select_state.spec.js +++ b/tests/components/multi_select_state.spec.js @@ -436,18 +436,62 @@ describe("withMultiSelectState", () => { expect(wrapper.state("filteredItems")).toEqual([ITEM_1]); }); - test("simulate copy", () => { + test("case enableCopyText is true", () => { const setData = jest.fn(); const event = { preventDefault: jest.fn(), clipboardData: { setData } }; + const ConditionalComponent = withMultiSelectState(CustomComponent); - const wrapper = shallow(); + 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"); + }); }); From 650a83e7f7aee1c514109a3547c3afedea32eacb Mon Sep 17 00:00:00 2001 From: Maksim Date: Tue, 26 Feb 2019 13:27:23 +0200 Subject: [PATCH 5/6] copy on system buffer selected item name --- tests/components/__snapshots__/multi_select.spec.js.snap | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 tests/components/__snapshots__/multi_select.spec.js.snap diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap old mode 100644 new mode 100755 From b3b874bc39a3048ed117cd1041f5154e7c9e8a1a Mon Sep 17 00:00:00 2001 From: Maksim Date: Tue, 26 Feb 2019 13:35:25 +0200 Subject: [PATCH 6/6] copy on system buffer selected item name --- tests/components/__snapshots__/multi_select.spec.js.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap index 19500b1..1c7791d 100755 --- a/tests/components/__snapshots__/multi_select.spec.js.snap +++ b/tests/components/__snapshots__/multi_select.spec.js.snap @@ -4471,6 +4471,7 @@ exports[`MultiSelect with responsiveHeight 1`] = ` > <_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 []}