lucid-ui
Version:
A UI component library from AppNexus.
55 lines (54 loc) • 1.97 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { IconSelect, ClockIcon, SwitchLabeled } from '../../../index';
export default createClass({
getInitialState() {
return {
selectedIcons: ['item2'],
isDisabled: true,
};
},
isSelected(id) {
return this.state.selectedIcons.includes(id);
},
handleSelect(selectedId) {
const selectedIcons = this.state.selectedIcons;
// if selected, then remove from list
if (this.isSelected(selectedId)) {
this.setState({
selectedIcons: selectedIcons.filter((id) => id !== selectedId),
});
}
else {
// add it to list
this.setState({
selectedIcons: [...selectedIcons, selectedId],
});
}
},
handleToggleDisabled() {
this.setState({
isDisabled: !this.state.isDisabled,
});
},
render() {
const { isDisabled } = this.state;
return (React.createElement("section", null,
React.createElement(SwitchLabeled, { Label: `IconSelect ${isDisabled ? 'Disabled' : 'Enabled'}`, isSelected: !isDisabled, onSelect: this.handleToggleDisabled }),
React.createElement(IconSelect, { isDisabled: isDisabled, onSelect: this.handleSelect, items: [
{
id: 'item1',
icon: React.createElement(ClockIcon, null),
isSelected: this.isSelected('item1'),
label: 'Always Disabled',
isDisabled: true,
},
{
id: 'item2',
icon: React.createElement(ClockIcon, null),
isSelected: this.isSelected('item2'),
label: 'Bax Tar',
},
] })));
},
});