lucid-ui
Version:
A UI component library from AppNexus.
23 lines (22 loc) • 1.01 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { CheckboxLabeled, DraggableList } from '../../../index';
export default createClass({
getInitialState() {
return {
items: ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five'],
};
},
handleDrop({ oldIndex, newIndex }) {
const { items } = this.state;
const updatedItems = items.filter((column, index) => index !== oldIndex);
updatedItems.splice(newIndex, 0, items[oldIndex]);
this.setState({ items: updatedItems });
},
render() {
const { items } = this.state;
return (React.createElement(DraggableList, { onDrop: this.handleDrop, style: { width: 500 } }, items.map((text) => (React.createElement(DraggableList.Item, { key: text },
React.createElement("div", { style: { display: 'flex', alignItems: 'center', height: 50 } },
React.createElement(CheckboxLabeled, { Label: text })))))));
},
});