@limetech/lime-elements
Version:
52 lines (51 loc) • 1.75 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.setRemoveButton = (button) => {
if (this.removeButton) {
this.removeButton.removeEventListener('click', this.handleRemove);
}
this.removeButton = button || undefined;
if (this.removeButton) {
this.removeButton.addEventListener('click', this.handleRemove);
}
};
}
componentWillUnmount() {
this.setRemoveButton(undefined);
}
render() {
const { item, allowItemReorder } = this.props;
return React.createElement('div', {
className: 'array-item limel-form-array-item--simple',
'data-reorder-id': String(this.props.dataIndex),
'data-reorderable': allowItemReorder ? 'true' : 'false',
}, this.props.item.children, this.renderRemoveButton(item), this.renderDragHandle());
}
renderDragHandle() {
if (!this.props.allowItemReorder) {
return;
}
return React.createElement('limel-drag-handle', {
class: 'drag-handle',
});
}
renderRemoveButton(item) {
if (!this.props.allowItemRemoval) {
return;
}
const props = {
icon: 'trash',
disabled: !item.hasRemove,
ref: this.setRemoveButton,
};
return React.createElement(LIMEL_ICON_BUTTON, props);
}
}