@wix/design-system/dist/esm/EditableSelector/docs/examples.js

@wix/design-system

export var cardWithEditableSelector = "\nclass CardWithEditableSelector extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      options: [{ title: 'Pumpkin Seeds' }, { title: 'Sunflower Seeds' }],\n      selectedIndex: null,\n    };\n  }\n\n  onOptionAdded = ({ newTitle }) => {\n    this.setState({\n      options: [...this.state.options, { title: newTitle }],\n    });\n  };\n\n  onOptionEdit = ({ newTitle, index }) => {\n    this.setState({\n      options: this.state.options.map((option, i) =>\n        index === i ? { title: newTitle } : option,\n      ),\n    });\n  };\n\n  onOptionToggle = index => {\n    const selectedIndex = this.state.selectedIndex;\n    if (index === selectedIndex) {\n      return;\n    }\n    const newOptions = this.state.options.map(opt => Object.assign({}, opt));\n    if (selectedIndex !== null) {\n      newOptions[selectedIndex].isSelected = false;\n    }\n    newOptions[index].isSelected = true;\n    this.setState({\n      options: newOptions,\n      selectedIndex: index,\n    });\n  };\n\n  onOptionDelete = ({ index }) => {\n    let newSelectedIndex = this.state.selectedIndex;\n    if (index === this.state.selectedIndex) {\n      newSelectedIndex = null;\n    } else if (index < this.state.selectedIndex) {\n      newSelectedIndex = 1;\n    }\n    this.setState({\n      options: this.state.options.filter((option, i) => index !== i),\n      selectedIndex: newSelectedIndex,\n    });\n  };\n\n  render() {\n    return (\n      <Layout>\n        <Cell span={6}>\n          <Card>\n            <Card.Header title=\"Editable Selector Inside Card\" />\n            <Card.Divider />\n            <Card.Content>\n              <EditableSelector\n                onOptionAdded={params => this.onOptionAdded(params)}\n                onOptionEdit={params => this.onOptionEdit(params)}\n                onOptionDelete={params => this.onOptionDelete(params)}\n                onOptionToggle={params => this.onOptionToggle(params)}\n                toggleType={'radio'}\n                title=\"Type of Seeds\"\n                options={this.state.options}\n              />\n            </Card.Content>\n          </Card>\n        </Cell>\n      </Layout>\n    );\n  }\n}\n";
export var popoverWithEditableSelector = "\nclass PopoverWithEditableSelector extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      options: [\n        { title: 'Marc Banks' },\n        { title: 'Bernard Park' },\n        { title: 'Carlos Dunn' },\n        { title: 'Norman Reeves' },\n        { title: 'Richard Medina' },\n      ],\n      shown: false,\n    };\n  }\n\n  onOptionAdded = ({ newTitle }) => {\n    this.setState({\n      options: [...this.state.options, { title: newTitle, isSelected: true }],\n    });\n  };\n\n  onOptionEdit = ({ newTitle, index }) => {\n    this.setState({\n      options: this.state.options.map((option, i) =>\n        index === i ? { title: newTitle } : option,\n      ),\n    });\n  };\n\n  onOptionToggle = index => {\n    this.setState({\n      options: this.state.options.map((option, i) => {\n        if (index === i) {\n          option.isSelected = !option.isSelected;\n          return option;\n        } else {\n          return option;\n        }\n      }),\n    });\n  };\n\n  onOptionDelete = ({ index }) => {\n    this.setState({\n      options: this.state.options.filter((option, i) => index !== i),\n    });\n  };\n\n  onTogglePopover = () => {\n    this.setState(({ shown }) => ({ shown: !shown }));\n  };\n\n  render() {\n    const { shown } = this.state;\n\n    const content = (\n      <EditableSelector\n        onOptionAdded={params => this.onOptionAdded(params)}\n        onOptionEdit={params => this.onOptionEdit(params)}\n        onOptionDelete={params => this.onOptionDelete(params)}\n        onOptionToggle={params => this.onOptionToggle(params)}\n        options={this.state.options}\n      />\n    );\n\n    return (\n      <Box minHeight={300}>\n        <Popover\n          placement=\"right-start\"\n          content={content}\n          shown={shown}\n          showArrow\n        >\n          <Popover.Element>\n            <Button onClick={() => this.onTogglePopover()}>Click me</Button>\n          </Popover.Element>\n          <Popover.Content>\n            <Card>\n              <Card.Content>{content}</Card.Content>\n            </Card>\n          </Popover.Content>\n        </Popover>\n      </Box>\n    );\n  }\n}\n";