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