lucid-ui
Version:
A UI component library from AppNexus.
75 lines (74 loc) • 3.44 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { CheckboxLabeled } from '../../../index';
const style = {
marginBottom: '3px',
};
export default createClass({
getInitialState() {
return {
flavors: [],
};
},
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'),
});
},
handleSelectedVanilla(isSelected) {
this.setState({
flavors: isSelected
? _.concat(this.state.flavors, 'vanilla')
: _.without(this.state.flavors, 'vanilla'),
});
},
handleSelectedHipsum(isSelected) {
this.setState({
flavors: isSelected
? _.concat(this.state.flavors, 'hipsum')
: _.without(this.state.flavors, 'hipsum'),
});
},
handleSelectedHipsum2(isSelected) {
this.setState({
flavors: isSelected
? _.concat(this.state.flavors, 'hipsum2')
: _.without(this.state.flavors, 'hipsum2'),
});
},
handleSelectedHipsum3(isSelected) {
this.setState({
flavors: isSelected
? _.concat(this.state.flavors, 'hipsum3')
: _.without(this.state.flavors, 'hipsum3'),
});
},
render() {
return (React.createElement("section", null,
React.createElement("span", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(CheckboxLabeled, { isSelected: _.includes(this.state.flavors, 'vanilla'), name: 'interactive-checkboxes', onSelect: this.handleSelectedVanilla, style: style },
React.createElement(CheckboxLabeled.Label, null, "Vanilla")),
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(CheckboxLabeled, { isSelected: _.includes(this.state.flavors, 'hipsum'), name: 'interactive-checkboxes', onSelect: this.handleSelectedHipsum, style: style },
React.createElement(CheckboxLabeled.Label, null, "Salted Caramel")),
React.createElement(CheckboxLabeled, { isSelected: _.includes(this.state.flavors, 'hipsum2'), name: 'interactive-checkboxes', onSelect: this.handleSelectedHipsum2, style: style },
React.createElement(CheckboxLabeled.Label, null, "Mint chocolate chip (the best)")))));
},
});