@limetech/lime-elements
Version:
68 lines (67 loc) • 2.15 kB
JavaScript
import React from 'react';
const LIMEL_ICON_BUTTON = 'limel-icon-button';
export class SimpleItemTemplate extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.handleRemove = (event) => {
const { item, index } = this.props;
item.onDropIndexClick(index)(event);
};
this.handleMoveUp = (event) => {
const { item, index } = this.props;
item.onReorderClick(index, index - 1)(event);
};
this.handleMoveDown = (event) => {
const { item, index } = this.props;
item.onReorderClick(index, index + 1)(event);
};
}
componentDidMount() {
this.removeButton.addEventListener('click', this.handleRemove);
this.moveUpButton.addEventListener('click', this.handleMoveUp);
this.moveDownButton.addEventListener('click', this.handleMoveDown);
}
componentWillUnmount() {
this.removeButton.removeEventListener('click', this.handleRemove);
this.moveUpButton.removeEventListener('click', this.handleMoveUp);
this.moveDownButton.removeEventListener('click', this.handleMoveDown);
}
render() {
const { item } = this.props;
return React.createElement('div', {
className: 'limel-form-array-item--simple',
}, this.props.item.children, this.renderRemoveButton(item), this.renderMoveUpButton(item), this.renderMoveDownButton(item));
}
renderRemoveButton(item) {
const props = {
icon: 'trash',
disabled: !item.hasRemove,
ref: (button) => {
this.removeButton = button;
},
};
return React.createElement(LIMEL_ICON_BUTTON, props);
}
renderMoveUpButton(item) {
const props = {
icon: 'up_arrow',
disabled: !item.hasMoveUp,
ref: (button) => {
this.moveUpButton = button;
},
};
return React.createElement(LIMEL_ICON_BUTTON, props);
}
renderMoveDownButton(item) {
const props = {
icon: 'down_arrow',
disabled: !item.hasMoveDown,
ref: (button) => {
this.moveDownButton = button;
},
};
return React.createElement(LIMEL_ICON_BUTTON, props);
}
}
//# sourceMappingURL=array-field-simple-item.js.map