lucid-ui
Version:
A UI component library from AppNexus.
68 lines (67 loc) • 2.38 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { Selection, Resizer } from '../../../index';
const groups = [
['Last Man on Earth', ['Phil']],
['Last Woman on Earth', ['Carol']],
[
'Star Wars',
[
'Ask Aak',
'Admiral Gial Ackbar',
'Acros-Krik',
'Ak-Rev',
'Stass Allie',
'Almec',
'Mas Amedda',
],
],
[
'Lord of the Rings',
['Adrahil', 'Adrahil II', 'Araglas', 'Aragorn I', 'Aragorn II Elessar'],
],
[
'Star Trek',
[
'Jonathan Archer',
'Ayala',
'Azan',
'Bareil Antos',
'Julian Bashir',
'Season 6 (TNG)',
'Lieutenant, JG (S1-3)',
],
],
];
export default createClass({
getInitialState() {
return {
removedItems: {},
};
},
handleRemove({ props: { callbackId } }) {
this.setState({
removedItems: _.set(this.state.removedItems, callbackId, true),
});
},
render() {
const { removedItems } = this.state;
return (React.createElement(Resizer, null, width => {
const responsiveMode = width >= 400 ? 'large' : 'small';
return (React.createElement("div", null, _.map(groups, ([group, names], groupIndex) => {
const groupCallbackId = `${groupIndex}`;
if (_.get(removedItems, groupCallbackId) === true) {
return null;
}
return (React.createElement(Selection, { responsiveMode: responsiveMode, key: groupCallbackId, isRemovable: true, isBold: true, hasBackground: true, kind: 'container', onRemove: this.handleRemove, callbackId: groupCallbackId, Label: group }, _.map(names, (name, nameIndex) => {
const nameCallbackId = `${groupIndex}.${nameIndex}`;
if (_.get(removedItems, nameCallbackId) === true) {
return null;
}
return (React.createElement(Selection, { responsiveMode: responsiveMode, key: nameCallbackId, isRemovable: true, onRemove: this.handleRemove, callbackId: nameCallbackId, Label: name }));
})));
})));
}));
},
});