lucid-ui/lib/components/Dialog/examples/4.complex.js

A UI component library from AppNexus.

import _includes from "lodash/includes";
import _partial from "lodash/partial";
import _without from "lodash/without";
import _concat from "lodash/concat";
import React from 'react';
import createClass from 'create-react-class';
import { Button, Dialog, CheckboxLabeled, SearchField, SearchableMultiSelect, SingleSelect } from '../../../index';
var style = {
  marginBottom: '3px'
};
var Option = SearchableMultiSelect.Option;
var Placeholder = SingleSelect.Placeholder,
    SingleOption = SingleSelect.Option;
export default createClass({
  getInitialState: function getInitialState() {
    return {
      isShown: false,
      flavors: ['chocolate']
    };
  },
  handleShow: function handleShow(isShown) {
    this.setState({
      isShown: isShown
    });
  },
  handleSelectedChocolate: function handleSelectedChocolate(isSelected) {
    this.setState({
      flavors: isSelected ? _concat(this.state.flavors, 'chocolate') : _without(this.state.flavors, 'chocolate')
    });
  },
  handleSelectedStrawberry: function handleSelectedStrawberry(isSelected) {
    this.setState({
      flavors: isSelected ? _concat(this.state.flavors, 'strawberry') : _without(this.state.flavors, 'strawberry')
    });
  },
  render: function render() {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
      onClick: _partial(this.handleShow, !this.state.isShown)
    }, "Toggle"), /*#__PURE__*/React.createElement(Dialog, {
      isComplex: true,
      isShown: this.state.isShown,
      handleClose: _partial(this.handleShow, !this.state.isShown),
      Header: "Advanced Filters",
      size: "medium"
    }, /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '16px'
      }
    }, "Flavor"), /*#__PURE__*/React.createElement(CheckboxLabeled, {
      isSelected: _includes(this.state.flavors, 'chocolate'),
      name: "interactive-checkboxes",
      onSelect: this.handleSelectedChocolate,
      style: style
    }, /*#__PURE__*/React.createElement(CheckboxLabeled.Label, null, "Chocolate")), /*#__PURE__*/React.createElement(CheckboxLabeled, {
      isSelected: _includes(this.state.flavors, 'strawberry'),
      name: "interactive-checkboxes",
      onSelect: this.handleSelectedStrawberry,
      style: style
    }, /*#__PURE__*/React.createElement(CheckboxLabeled.Label, null, "Strawberry")), /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '16px',
        marginTop: '25px'
      }
    }, "Flavor Combination Research"), /*#__PURE__*/React.createElement(SearchField, {
      placeholder: "Sundae school..."
    }), /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '16px',
        marginTop: '25px'
      }
    }, "Toppings"), /*#__PURE__*/React.createElement(SearchableMultiSelect, {
      responsiveMode: "large"
    }, /*#__PURE__*/React.createElement(Option, null, "cookie dough"), /*#__PURE__*/React.createElement(Option, null, "more ice cream"), /*#__PURE__*/React.createElement(Option, null, "mochi"), /*#__PURE__*/React.createElement(Option, null, "peanut butter cups")), /*#__PURE__*/React.createElement("p", {
      style: {
        fontSize: '16px',
        marginTop: '25px'
      }
    }, "Ice Cream Breaks"), /*#__PURE__*/React.createElement(SingleSelect, {
      onSelect: this.handleSelect
    }, /*#__PURE__*/React.createElement(Placeholder, null, "You must select a break..."), /*#__PURE__*/React.createElement(SingleOption, null, "10am"), /*#__PURE__*/React.createElement(SingleOption, null, "11am"), /*#__PURE__*/React.createElement(SingleOption, null, "1pm"), /*#__PURE__*/React.createElement(SingleOption, null, "2pm")), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Button, {
      kind: "invisible",
      onClick: _partial(this.handleShow, false),
      style: {
        marginRight: '9px'
      }
    }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
      kind: "primary"
    }, "Save"))));
  }
});