amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/Form/InputSubForm.js

@@ -0,0 +1,269 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { guid, createObject, FormItem } from 'amis-core';
+import cx from 'classnames';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import { Icon } from 'amis-ui';
+import Sortable from 'sortablejs';
+import { findDOMNode } from 'react-dom';
+
+var dom;
+var stripTag = function (value) {
+    if (!value) {
+        return value;
+    }
+    dom = dom || document.createElement('div');
+    dom.innerHTML = value;
+    return dom.innerText;
+};
+var SubFormControl = /** @class */ (function (_super) {
+    __extends(SubFormControl, _super);
+    function SubFormControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        _this.id = guid();
+        _this.addItem = _this.addItem.bind(_this);
+        _this.removeItem = _this.removeItem.bind(_this);
+        _this.editSingle = _this.editSingle.bind(_this);
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.dragTipRef = _this.dragTipRef.bind(_this);
+        _this.handleDialogConfirm = _this.handleDialogConfirm.bind(_this);
+        return _this;
+    }
+    SubFormControl.prototype.addItem = function () {
+        this.setState({
+            dialogData: createObject(this.props.data, this.props.scaffold || {}),
+            dialogCtx: {
+                mode: 'add'
+            }
+        });
+    };
+    SubFormControl.prototype.removeItem = function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var index = parseInt(e.currentTarget.getAttribute('data-index'), 10);
+        var value = this.props.value;
+        if (!Array.isArray(value)) {
+            return;
+        }
+        value = value.concat();
+        value.splice(index, 1);
+        this.props.onChange(value);
+    };
+    SubFormControl.prototype.editSingle = function () {
+        var value = this.props.value;
+        if (value) {
+            this.setState({
+                dialogData: createObject(this.props.data, this.props.value),
+                dialogCtx: {
+                    mode: 'edit'
+                }
+            });
+        }
+        else {
+            this.addItem();
+        }
+    };
+    SubFormControl.prototype.open = function (e) {
+        var index = parseInt(e.currentTarget.getAttribute('data-index'), 10);
+        var value = this.props.value;
+        if (!Array.isArray(value) || !value[index]) {
+            return;
+        }
+        this.setState({
+            dialogData: createObject(this.props.data, value[index]),
+            dialogCtx: {
+                mode: 'edit',
+                index: index
+            }
+        });
+    };
+    SubFormControl.prototype.close = function () {
+        this.setState({
+            dialogData: undefined,
+            dialogCtx: undefined
+        });
+    };
+    SubFormControl.prototype.handleDialogConfirm = function (values) {
+        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, value = _a.value;
+        var ctx = this.state.dialogCtx;
+        if (multiple) {
+            var newValue = Array.isArray(value) ? value.concat() : [];
+            if ((ctx === null || ctx === void 0 ? void 0 : ctx.mode) === 'add') {
+                newValue.push(__assign({}, values[0]));
+            }
+            else {
+                newValue[ctx.index] = __assign(__assign({}, newValue[ctx.index]), values[0]);
+            }
+            onChange(newValue);
+        }
+        else {
+            onChange(__assign(__assign({}, value), values[0]));
+        }
+        this.close();
+    };
+    SubFormControl.prototype.dragTipRef = function (ref) {
+        if (!this.dragTip && ref) {
+            this.initDragging();
+        }
+        else if (this.dragTip && !ref) {
+            this.destroyDragging();
+        }
+        this.dragTip = ref;
+    };
+    SubFormControl.prototype.initDragging = function () {
+        var _this = this;
+        var ns = this.props.classPrefix;
+        var submitOnChange = this.props.submitOnChange;
+        var dom = findDOMNode(this);
+        this.sortable = new Sortable(dom.querySelector(".".concat(ns, "SubForm-values")), {
+            group: "SubForm-".concat(this.id),
+            animation: 150,
+            handle: ".".concat(ns, "SubForm-valueDragBar"),
+            ghostClass: "".concat(ns, "SubForm-value--dragging"),
+            onEnd: function (e) {
+                // 没有移动
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                // 换回来
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                var value = _this.props.value;
+                if (!Array.isArray(value)) {
+                    return;
+                }
+                var newValue = value.concat();
+                newValue.splice(e.newIndex, 0, newValue.splice(e.oldIndex, 1)[0]);
+                _this.props.onChange(newValue, submitOnChange, true);
+            }
+        });
+    };
+    SubFormControl.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    SubFormControl.prototype.buildDialogSchema = function () {
+        var form = this.props.form;
+        var dialogProps = [
+            'title',
+            'actions',
+            'name',
+            'size',
+            'closeOnEsc',
+            'closeOnOutside',
+            'showErrorMsg',
+            'showCloseButton',
+            'bodyClassName',
+            'type'
+        ];
+        return __assign(__assign({}, pick(form, dialogProps)), { type: 'dialog', body: __assign({ type: 'form' }, omit(form, dialogProps)) });
+    };
+    SubFormControl.prototype.renderMultipe = function () {
+        var _this = this;
+        var _a = this.props, addButtonClassName = _a.addButtonClassName, itemClassName = _a.itemClassName, itemsClassName = _a.itemsClassName, disabled = _a.disabled, maxLength = _a.maxLength, labelField = _a.labelField, value = _a.value, btnLabel = _a.btnLabel, render = _a.render, data = _a.data, __ = _a.translate, cx = _a.classnames, placeholder = _a.placeholder, draggable = _a.draggable, draggableTip = _a.draggableTip, addable = _a.addable, removable = _a.removable, minLength = _a.minLength, addButtonText = _a.addButtonText;
+        return (React.createElement(React.Fragment, null,
+            Array.isArray(value) && value.length ? (React.createElement("div", { className: cx('SubForm-values', itemsClassName), key: "values" }, value.map(function (item, key) { return (React.createElement("div", { className: cx("SubForm-value", {
+                    'is-disabled': disabled
+                }, itemClassName), key: key },
+                draggable && value.length > 1 ? (React.createElement("a", { className: cx('SubForm-valueDragBar') },
+                    React.createElement(Icon, { icon: "drag-bar", className: cx('icon') }))) : null,
+                React.createElement("span", { className: cx('SubForm-valueLabel') }, (item &&
+                    labelField &&
+                    item[labelField] &&
+                    stripTag(item[labelField])) ||
+                    render('label', {
+                        type: 'tpl',
+                        tpl: __(btnLabel)
+                    }, {
+                        data: createObject(data, item)
+                    })),
+                React.createElement("a", { "data-index": key, onClick: _this.open, className: cx('SubForm-valueEdit') },
+                    React.createElement(Icon, { icon: "pencil", className: "icon" })),
+                !disabled &&
+                    removable !== false &&
+                    (!minLength || value.length > minLength) ? (React.createElement("a", { "data-index": key, className: cx('SubForm-valueDel'), onClick: _this.removeItem },
+                    React.createElement(Icon, { icon: "close", className: "icon" }))) : null)); }))) : (React.createElement("div", { className: cx('SubForm-placeholder'), key: "placeholder" }, __(placeholder || 'placeholder.empty'))),
+            React.createElement("div", { key: "toolbar", className: cx('SubForm-toolbar') },
+                addable !== false ? (React.createElement("button", { type: "button", onClick: this.addItem, className: cx("Button SubForm-addBtn", addButtonClassName), disabled: disabled ||
+                        !!(maxLength &&
+                            Array.isArray(value) &&
+                            value.length >= maxLength) },
+                    React.createElement(Icon, { icon: "plus", className: "icon" }),
+                    React.createElement("span", null, __(addButtonText || 'SubForm.add')))) : null,
+                draggable && Array.isArray(value) && value.length > 1 ? (React.createElement("span", { className: cx("Combo-dragableTip"), ref: this.dragTipRef }, Array.isArray(value) && value.length > 1 ? __(draggableTip) : '')) : null)));
+    };
+    SubFormControl.prototype.renderSingle = function () {
+        var _a = this.props, cx = _a.classnames, itemsClassName = _a.itemsClassName, itemClassName = _a.itemClassName, disabled = _a.disabled, value = _a.value, labelField = _a.labelField, btnLabel = _a.btnLabel, render = _a.render, data = _a.data, __ = _a.translate;
+        return (React.createElement("div", { className: cx('SubForm-values', itemsClassName), key: "values" },
+            React.createElement("div", { className: cx("SubForm-value", {
+                    'is-disabled': disabled
+                }, itemClassName), onClick: this.editSingle, "data-tooltip": __('SubForm.editDetail'), "data-position": "bottom" },
+                React.createElement("span", { className: cx('SubForm-valueLabel') }, (value &&
+                    labelField &&
+                    value[labelField] &&
+                    stripTag(value[labelField])) ||
+                    render('label', {
+                        type: 'tpl',
+                        tpl: __(btnLabel)
+                    }, {
+                        data: createObject(data, value)
+                    })),
+                React.createElement("a", { className: cx('SubForm-valueEdit') },
+                    React.createElement(Icon, { icon: "pencil", className: "icon" })))));
+    };
+    SubFormControl.prototype.render = function () {
+        var _a = this.props, multiple = _a.multiple, ns = _a.classPrefix, className = _a.className, render = _a.render;
+        var dialogData = this.state.dialogData;
+        var dialogCtx = this.state.dialogCtx;
+        return (React.createElement("div", { className: cx("".concat(ns, "SubFormControl"), className) },
+            multiple ? this.renderMultipe() : this.renderSingle(),
+            render("modal", this.buildDialogSchema(), {
+                show: !!dialogCtx,
+                onClose: this.close,
+                onConfirm: this.handleDialogConfirm,
+                data: dialogData,
+                formStore: undefined
+            })));
+    };
+    SubFormControl.defaultProps = {
+        minLength: 0,
+        maxLength: 0,
+        multiple: false,
+        btnClassName: '',
+        addButtonClassName: '',
+        itemClassName: '',
+        labelField: 'label',
+        btnLabel: 'SubForm.button',
+        placeholder: 'placeholder.empty'
+    };
+    SubFormControl.propsList = ['form', 'formStore'];
+    return SubFormControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(SubFormControlRenderer, _super);
+    function SubFormControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SubFormControlRenderer = __decorate([
+        FormItem({
+            type: 'input-sub-form',
+            sizeMutable: false,
+            strictMode: false
+        })
+    ], SubFormControlRenderer);
+    return SubFormControlRenderer;
+})(SubFormControl));
+
+export { SubFormControl as default };

package/esm/renderers/Form/InputTable.d.ts

@@ -0,0 +1,180 @@
+import React from 'react';
+import { FormControlProps, FormBaseControl } from 'amis-core';
+import { RendererData, ActionObject } from 'amis-core';
+import { SimpleMap } from 'amis-core';
+import { TableSchema } from '../Table';
+import { SchemaApi } from '../../Schema';
+export interface TableControlSchema extends FormBaseControl, Omit<TableSchema, 'type'> {
+    type: 'input-table';
+    /**
+     * 可新增
+     */
+    addable?: boolean;
+    /**
+     * 可复制新增
+     */
+    copyable?: boolean;
+    /**
+     * 复制按钮文字
+     */
+    copyBtnLabel?: string;
+    /**
+     * 复制按钮图标
+     */
+    copyBtnIcon?: string;
+    /**
+     * 是否显示复制按钮
+     */
+    copyAddBtn?: boolean;
+    /**
+     * 是否可以拖拽排序
+     */
+    draggable?: boolean;
+    /**
+     * 新增 API
+     */
+    addApi?: SchemaApi;
+    /**
+     * 新增按钮文字
+     */
+    addBtnLabel?: string;
+    /**
+     * 新增按钮图标
+     */
+    addBtnIcon?: string;
+    /**
+     * 显示新增按钮
+     */
+    showAddBtn?: boolean;
+    /**
+     * 可否删除
+     */
+    removable?: boolean;
+    /**
+     * 删除的 API
+     */
+    deleteApi?: SchemaApi;
+    /**
+     * 可否编辑
+     */
+    editable?: boolean;
+    /**
+     * 更新按钮名称
+     */
+    editBtnLabel?: string;
+    /**
+     * 更新按钮图标
+     */
+    editBtnIcon?: string;
+    /**
+     * 确认按钮文字
+     */
+    confirmBtnLabel?: string;
+    /**
+     * 确认按钮图标
+     */
+    confirmBtnIcon?: string;
+    /**
+     * 取消按钮文字
+     */
+    cancelBtnLabel?: string;
+    /**
+     * 取消按钮图标
+     */
+    cancelBtnIcon?: string;
+    /**
+     * 删除按钮文字
+     */
+    deleteBtnLabel?: string;
+    /**
+     * 删除按钮图标
+     */
+    deleteBtnIcon?: string;
+    /**
+     * 更新 API
+     */
+    updateApi?: SchemaApi;
+    /**
+     * 初始值，新增的时候
+     */
+    scaffold?: any;
+    /**
+     * 删除确认文字
+     */
+    deleteConfirmText?: string;
+    /**
+     * 值字段
+     */
+    valueField?: string;
+    /**
+     * 是否为确认的编辑模式。
+     */
+    needConfirm?: boolean;
+    /**
+     * 是否可以访问父级数据，正常 combo 已经关联到数组成员，是不能访问父级数据的。
+     */
+    canAccessSuperData?: boolean;
+    /**
+     * 是否显示序号
+     */
+    showIndex?: boolean;
+    /**
+     * 分页个数，默认不分页
+     */
+    perPage?: number;
+}
+export interface TableProps extends FormControlProps, Omit<TableControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+}
+export interface TableState {
+    items: Array<any>;
+    raw?: any;
+    columns: Array<any>;
+    editIndex: number;
+    isCreateMode?: boolean;
+    page?: number;
+}
+export default class FormTable extends React.Component<TableProps, TableState> {
+    static defaultProps: {
+        placeholder: string;
+        scaffold: {};
+        addBtnIcon: string;
+        copyBtnIcon: string;
+        editBtnIcon: string;
+        deleteBtnIcon: string;
+        confirmBtnIcon: string;
+        cancelBtnIcon: string;
+        valueField: string;
+    };
+    static propsList: Array<string>;
+    entries: SimpleMap<any, number>;
+    entityId: number;
+    subForms: any;
+    rowPrinstine: Array<any>;
+    editting: any;
+    constructor(props: TableProps);
+    componentDidUpdate(nextProps: TableProps): void;
+    componentWillUnmount(): void;
+    subFormRef(form: any, x: number, y: number): void;
+    validate(): Promise<string | void>;
+    emitValue(): void;
+    doAction(action: ActionObject, ctx: RendererData, ...rest: Array<any>): Promise<any>;
+    copyItem(index: number): void;
+    addItem(index: number): void;
+    startEdit(index: number, isCreate?: boolean): void;
+    confirmEdit(): Promise<void>;
+    cancelEdit(): void;
+    removeItem(index: number): Promise<void>;
+    buildItemProps(item: any, index: number): {
+        quickEditEnabled: boolean;
+    } | null;
+    buildColumns(props: TableProps, isCreateMode?: boolean): Array<any>;
+    columnToQuickEdit(column: any): any;
+    handleTableSave(rows: Array<object> | object, diff: Array<object> | object, rowIndexes: Array<string> | string): void;
+    handleSaveTableOrder(moved: Array<object>, rows: Array<object>): void;
+    handlePageChange(page: number): void;
+    removeEntry(entry: any): void;
+    getEntryId(entry: any): string;
+    render(): JSX.Element | null;
+}
+export declare class TableControlRenderer extends FormTable {
+}