react-antd-admin-panel/dist/components/builder/Multiple.js

Easy prototyping admin panel using React and Antd

import React, { useEffect, useState } from "react";
import { Action, Button, List as ListModel, Section as SectionModel, ListItem, Space, } from '../../typescript';
import Section from "../Section";
import { ArrowDownOutlined, ArrowUpOutlined, CloseOutlined, PlusOutlined } from "@ant-design/icons/lib";
const Multiple = (props) => {
    var _a;
    let model = props.model;
    let buildSection = (data) => {
        let section = new SectionModel();
        let defaultItem = {};
        let defaultWidth = {};
        let defaultEditable = {};
        model._headers.forEach((r) => { var _a; return defaultItem[r._key] = (_a = r._default) !== null && _a !== void 0 ? _a : ''; });
        model._headers.forEach((r) => { var _a; return r._width = (_a = r._width) !== null && _a !== void 0 ? _a : Math.floor(100 / (model._headers.length - model._headerHide.length)) + '%'; });
        defaultEditable = model._headers.filter((r) => r._editable).map((r) => r._key);
        let list = new ListModel()
            .default(data !== null && data !== void 0 ? data : model._default)
            .addDummyColumn(true)
            .emptyIcon(PlusOutlined)
            .emptyText('Press \'Add empty row\' to add an item to the table.')
            .footer(false)
            .headerCreate(false)
            .headerHide(model._headerHide)
            .headerWidth(defaultWidth)
            .editable(defaultEditable)
            .onChange((v) => {
            let data = [];
            v.forEach((d) => {
                let obj = {};
                model._headers.forEach((k) => {
                    var _a, _b;
                    obj[k._key] = (_b = (_a = d._objects[k._key]) === null || _a === void 0 ? void 0 : _a._object) !== null && _b !== void 0 ? _b : d[k._key];
                });
                data.push(obj);
            });
            onChange(data, v);
        });
        model._headers.forEach((r) => list.headerPrepend(r));
        if (model._orderable) {
            list.actions(new Action().icon(ArrowUpOutlined).callback(({ record }) => list.moveRecord(record, -1)));
            list.actions(new Action().icon(ArrowDownOutlined).callback(({ record }) => list.moveRecord(record, 1)));
        }
        list.actions(new Action().icon(CloseOutlined).callback(({ record }) => list.removeRecord(record)));
        section.add(list);
        section.add(new Space().top(12));
        section.add(new SectionModel().row().end()
            .add(new Button()
            .link()
            .ignoreClear()
            .loadable(false)
            .action(new Action()
            .label('Add empty row')
            .callback(() => list.setRecord(new ListItem(defaultItem, list))))));
        return section;
    };
    const [section, setSection] = useState({
        key: 0,
        section: buildSection()
    });
    /** === FORMULA SPECIFIC === */
    const onChange = (value, object, rebuild = false) => {
        var _a;
        model._defaultObject = {
            value: value,
            object: object,
        };
        if (model._formula)
            model.value(value);
        (_a = model._onChange) === null || _a === void 0 ? void 0 : _a.call(model, model._defaultObject);
        /** Debug purposes */
        if (model._key) {
            if (value) {
                window.localStorage.setItem(`multiple:${model._key}`, JSON.stringify(model._defaultObject));
            }
            else {
                window.localStorage.removeItem(`multiple:${model._key}`);
            }
        }
    };
    const onClear = () => {
        model._data = undefined;
        if (model._formula)
            model.value(undefined);
    };
    model._onError = () => onClear();
    model._onComplete = () => onClear();
    // Register the defaultValue to the formula.
    if (model._default && model._formula) {
        model.value(model._default);
    }
    useEffect(() => {
        /** Debug purposes */
        try {
            let store = window.localStorage.getItem(`multiple:${model._key}`);
            if (store) {
                let data = JSON.parse(store);
                setTimeout(() => {
                    // onChange(data.value, data.object, true);
                }, 250);
            }
        }
        catch (e) {
            console.log(e);
        }
    }, []);
    return (React.createElement("div", { style: (_a = model._style) !== null && _a !== void 0 ? _a : {} },
        React.createElement(Section, { key: section.key, main: props.main, section: section.section, parent: model }),
        model._required && model._data === undefined && React.createElement("div", { style: { color: '#ff4d4f', fontSize: 14, fontWeight: 300, paddingTop: 6, paddingBottom: 12 } }, "Required field")
            || React.createElement("div", { style: { paddingTop: 12 } })));
};
export default Multiple;
//# sourceMappingURL=Multiple.js.map