@limetech/lime-elements
Version:
90 lines (89 loc) • 2.37 kB
JavaScript
import React from 'react';
import { findTitle } from './common';
import { isEmpty } from 'lodash-es';
export class CollapsibleItemTemplate extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
isOpen: false,
};
this.handleOpen = () => {
this.setState({
isOpen: true,
});
};
this.handleAction = this.handleAction.bind(this);
this.isDeepEmpty = this.isDeepEmpty.bind(this);
this.state = {
isOpen: this.isDeepEmpty(props.data),
};
}
componentDidMount() {
const section = this.section;
section.addEventListener('action', this.handleAction);
section.addEventListener('open', this.handleOpen);
this.setActions(section);
}
componentDidUpdate() {
this.setActions(this.section);
}
componentWillUnmount() {
const section = this.section;
section.removeEventListener('action', this.handleAction);
section.removeEventListener('open', this.handleOpen);
}
render() {
const { data, schema, formSchema } = this.props;
let children;
if (this.state.isOpen) {
children = this.props.item.children;
}
return React.createElement('limel-collapsible-section', {
header: findTitle(data, schema, formSchema) || 'New item',
class: 'limel-form-array-item--object',
ref: (section) => {
this.section = section;
},
'is-open': this.state.isOpen,
}, children);
}
setActions(element) {
const { item, index } = this.props;
const actions = [
{
id: 'down',
icon: 'down_arrow',
disabled: !item.hasMoveDown,
run: item.onReorderClick(index, index + 1),
},
{
id: 'up',
icon: 'up_arrow',
disabled: !item.hasMoveUp,
run: item.onReorderClick(index, index - 1),
},
{
id: 'remove',
icon: 'trash',
disabled: !item.hasRemove,
run: item.onDropIndexClick(index),
},
];
element.actions = actions;
}
handleAction(event) {
event.stopPropagation();
event.detail.run(event);
}
isDeepEmpty(data) {
if (typeof data !== 'object') {
return false;
}
if (isEmpty(data)) {
return true;
}
return Object.values(data).every(this.isDeepEmpty);
}
}
//# sourceMappingURL=array-field-collapsible-item.js.map