copy on system buffer selected item name

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.
 
+<br/>
+
+**Copy Labels**
+
+Use the `enableCopyText` to enable copy option. 
+
+Use the `getCopyLabel` function property. Return specify string for copy to buffer.
+
+
 <br/>
 
 #### Search Function

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,18 +88,31 @@ 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) {
  if (event.keyCode === 16) {
  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 (
  <WrappedComponent

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 []}

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(
+ <ConditionalComponent items={items} enableCopyText={true} />
+ );
+ 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(
+ <ConditionalComponent items={items} enableCopyText={false} />
+ );
+ 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(
+ <ConditionalComponent
+ items={items}
+ enableCopyText={true}
+ getCopyLabel={getCopyLabel}
+ />
+ );
+ 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");
+ });
 });