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