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"); + }); });