@tomino/dynamic-form-semantic-ui/dist/cjs/vanilla/repeater_view.js

Semantic UI form renderer based on dynamic form generation

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const mobx_react_1 = require("mobx-react");
const dynamic_form_1 = require("@tomino/dynamic-form");
const error_view_1 = require("../semantic/error_view");
const common_1 = require("../common");
const mobx_1 = require("mobx");
const helpers_1 = require("../helpers");
const context_1 = require("../context");
const noItems = common_1.css `
  margin: 6px 0px 12px 0px;
`;
exports.repeaterAddButton = common_1.css `
  margin-top: 12px !important;
`;
class RepeaterRow extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.handlers = {
            ...this.props.handlers,
            deleteRow: () => {
                if (common_1.handlerValue(this.props.formElement.props.value)) {
                    helpers_1.handle(this.props.handlers, this.props.formElement.props.onDelete, this.props.owner, this.props, this.context, this.props.data);
                }
                else {
                    this.props.owner.removeRowData(common_1.sourceValue(this.props.formElement.props.value), this.props.data);
                }
            },
            editRow: () => {
                this.props.select(this.props.index);
            }
        };
    }
    render() {
        let template = this.props.index === this.props.selectedIndex
            ? this.props.editorTemplate
            : this.props.viewTemplate;
        return this.props.catalogue.createComponent({
            ...this.props,
            handlers: this.handlers,
            owner: this.props.data
        }, template, this.context);
    }
}
RepeaterRow.contextType = context_1.Context;
const AddRow = mobx_react_1.observer(({ addTemplate, props }) => {
    const context = React.useContext(context_1.Context);
    const boundSource = common_1.valueSource(props.formElement);
    const addDataset = React.useMemo(() => {
        let schema = props.owner.getSchema(boundSource).originalSchema.items;
        if (!schema.properties) {
            schema = { type: 'object', properties: { value: { type: schema.type } } };
        }
        return dynamic_form_1.buildDataSet(schema, {});
    }, [boundSource, props.owner]);
    const handlers = React.useMemo(() => ({
        ...props.handlers,
        addRow: () => {
            const { formElement, owner } = props;
            if (formElement.props.onAdd) {
                helpers_1.simpleHandle(props, props.formElement.props.onAdd, context);
            }
            if (common_1.prop(formElement)) {
                owner.addRow(common_1.valueSource(formElement), mobx_1.toJS(addDataset));
            }
        }
    }), [addDataset, context, props]);
    return (React.createElement("div", { className: exports.repeaterAddButton }, addTemplate &&
        props.catalogue.createComponent({ ...props, owner: addDataset, handlers }, addTemplate, context)));
});
class RepeaterComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.state = { selectedIndex: -1 };
        this.handleToggleChange = (_e, control) => {
            this.props.owner.parseValue(common_1.prop(this.props.formElement), control.checked);
        };
    }
    render() {
        const { formElement, owner } = this.props;
        const { allowAdd } = formElement.props;
        const boundSource = common_1.valueSource(formElement);
        const list = owner.getValue(boundSource);
        let viewTemplate = formElement.elements.length > 0 && formElement.elements[0];
        let editorTemplate = formElement.elements.length > 1 && formElement.elements[1];
        let addTemplate = formElement.elements.length > 2 && formElement.elements[2];
        if (!boundSource) {
            return React.createElement("div", null, "Please bind the repeater to an array source");
        }
        return (React.createElement(React.Fragment, null,
            list == null || list.length === 0 ? (React.createElement("div", { className: noItems }, `This collection contains no items ...`)) : (list.map((listItemDataSet, i) => (React.createElement(RepeaterRow, { index: i, key: i + Date.now(), owner: owner, formElement: formElement, data: listItemDataSet, extra: this.props.extra, handlers: this.props.handlers, readOnly: this.props.readOnly, catalogue: this.props.catalogue, editorTemplate: editorTemplate, viewTemplate: viewTemplate || editorTemplate, selectedIndex: this.state.selectedIndex, select: index => this.setState({ selectedIndex: index }) })))),
            allowAdd && !this.props.readOnly && (React.createElement(AddRow, { addTemplate: addTemplate, addDataset: this.addDataset, props: this.props })),
            React.createElement(error_view_1.ErrorView, { owner: owner, source: boundSource, pointing: "left" })));
    }
}
exports.RepeaterView = {
    Component: mobx_react_1.observer(RepeaterComponent),
    toString: (_owner, props, context, catalogue) => {
        const repeaterList = helpers_1.getValue(props, context);
        return repeaterList
            .map((l, i) => `[${i + 1}] ${props.formElement.elements
            .map(el => catalogue.components[el.control].toString(l, { ...props, formElement: el }, context, catalogue))
            .join('\n    ')}`)
            .join('\n\n');
    }
};
//# sourceMappingURL=repeater_view.js.map