amis 2.0.0-rc.10 → 2.0.0-rc.16

package/esm/renderers/Form/Editor.js

@@ -0,0 +1,247 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { isPureVariable, resolveVariableAndFilter, LazyComponent, bindRendererEvent, autobind, FormItem } from 'amis-core';
+import { Editor } from 'amis-ui';
+
+var EditorControl = /** @class */ (function (_super) {
+    __extends(EditorControl, _super);
+    function EditorControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            focused: false
+        };
+        _this.toDispose = [];
+        _this.divRef = React.createRef();
+        _this.prevHeight = 0;
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleEditorMounted = _this.handleEditorMounted.bind(_this);
+        return _this;
+    }
+    EditorControl.prototype.componentWillUnmount = function () {
+        this.toDispose.forEach(function (fn) { return fn(); });
+    };
+    EditorControl.prototype.doAction = function (action, args) {
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        if (actionType === 'clear') {
+            onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+        else if (actionType === 'focus') {
+            this.focus();
+        }
+    };
+    EditorControl.prototype.focus = function () {
+        var _a, _b;
+        this.editor.focus();
+        this.setState({ focused: true });
+        // 最近一次光标位置
+        var position = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getPosition();
+        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setPosition(position);
+    };
+    EditorControl.prototype.handleFocus = function () {
+        this.setState({
+            focused: true
+        });
+    };
+    EditorControl.prototype.handleBlur = function () {
+        this.setState({
+            focused: false
+        });
+    };
+    EditorControl.prototype.handleEditorMounted = function (editor, monaco) {
+        var _this = this;
+        this.editor = editor;
+        this.toDispose.push(editor.onDidChangeModelDecorations(function () {
+            _this.updateContainerSize(editor, monaco); // typing
+            requestAnimationFrame(_this.updateContainerSize.bind(_this, editor, monaco)); // folding
+        }).dispose);
+        if (this.props.editorDidMount) {
+            var editorDidMount = this.props.editorDidMount;
+            if (typeof editorDidMount === 'string') {
+                editorDidMount = new Function('editor', 'monaco');
+            }
+            var dispose = editorDidMount(editor, monaco);
+            if (typeof dispose === 'function') {
+                this.toDispose.push(dispose);
+            }
+        }
+    };
+    EditorControl.prototype.updateContainerSize = function (editor, monaco) {
+        var _a;
+        if (!this.divRef.current) {
+            return;
+        }
+        var lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+        var lineCount = ((_a = editor.getModel()) === null || _a === void 0 ? void 0 : _a.getLineCount()) || 1;
+        var height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+        if (this.prevHeight !== height) {
+            this.prevHeight = height;
+            this.divRef.current.style.height = "".concat(height, "px");
+            editor.layout();
+        }
+    };
+    EditorControl.prototype.render = function () {
+        var _a;
+        var _b = this.props, className = _b.className, ns = _b.classPrefix, cx = _b.classnames, value = _b.value, onChange = _b.onChange, disabled = _b.disabled, options = _b.options, editorTheme = _b.editorTheme, size = _b.size, data = _b.data, allowFullscreen = _b.allowFullscreen;
+        var language = this.props.language;
+        var finnalValue = value;
+        if (finnalValue && typeof finnalValue !== 'string') {
+            finnalValue = JSON.stringify(finnalValue, null, 2);
+        }
+        if (isPureVariable(language)) {
+            language = resolveVariableAndFilter(language, data);
+        }
+        return (React.createElement("div", { ref: this.divRef, className: cx("EditorControl", (_a = {
+                    'is-focused': this.state.focused
+                },
+                _a["EditorControl--".concat(size)] = size,
+                _a), className) },
+            React.createElement(LazyComponent, { classPrefix: ns, component: Editor, allowFullscreen: allowFullscreen, value: finnalValue, onChange: onChange, disabled: disabled, onFocus: this.handleFocus, onBlur: this.handleBlur, language: language, editorTheme: editorTheme, editorDidMount: this.handleEditorMounted, options: __assign(__assign({}, options), { readOnly: disabled }) })));
+    };
+    EditorControl.defaultProps = {
+        language: 'javascript',
+        editorTheme: 'vs',
+        allowFullscreen: true,
+        options: {
+            automaticLayout: true,
+            selectOnLineNumbers: true,
+            scrollBeyondLastLine: false,
+            folding: true,
+            minimap: {
+                enabled: false
+            }
+        }
+    };
+    __decorate([
+        bindRendererEvent('focus'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], EditorControl.prototype, "handleFocus", null);
+    __decorate([
+        bindRendererEvent('blur'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], EditorControl.prototype, "handleBlur", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], EditorControl.prototype, "updateContainerSize", null);
+    return EditorControl;
+}(React.Component));
+var availableLanguages = [
+    'bat',
+    'c',
+    'coffeescript',
+    'cpp',
+    'csharp',
+    'css',
+    'dockerfile',
+    'fsharp',
+    'go',
+    'handlebars',
+    'html',
+    'ini',
+    'java',
+    'javascript',
+    'json',
+    'less',
+    'lua',
+    'markdown',
+    'msdax',
+    'objective-c',
+    'php',
+    'plaintext',
+    'postiats',
+    'powershell',
+    'pug',
+    'python',
+    'r',
+    'razor',
+    'ruby',
+    'sb',
+    'scss',
+    'sol',
+    'shell',
+    'sql',
+    'swift',
+    'typescript',
+    'vb',
+    'xml',
+    'yaml'
+];
+availableLanguages.map(function (lang) {
+    var EditorControlRenderer = /** @class */ (function (_super) {
+        __extends(EditorControlRenderer, _super);
+        function EditorControlRenderer() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        EditorControlRenderer.lang = lang;
+        EditorControlRenderer.displayName = "".concat(lang[0].toUpperCase()).concat(lang.substring(1), "EditorControlRenderer");
+        EditorControlRenderer.defaultProps = __assign(__assign({}, EditorControl.defaultProps), { language: lang });
+        EditorControlRenderer = __decorate([
+            FormItem({
+                type: "".concat(lang, "-editor"),
+                sizeMutable: false
+            })
+        ], EditorControlRenderer);
+        return EditorControlRenderer;
+    }(EditorControl));
+    return EditorControlRenderer;
+});
+/** @class */ ((function (_super) {
+    __extends(JavascriptEditorControlRenderer, _super);
+    function JavascriptEditorControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    JavascriptEditorControlRenderer.defaultProps = __assign(__assign({}, EditorControl.defaultProps), { language: 'javascript' });
+    JavascriptEditorControlRenderer = __decorate([
+        FormItem({
+            type: 'js-editor',
+            sizeMutable: false
+        })
+    ], JavascriptEditorControlRenderer);
+    return JavascriptEditorControlRenderer;
+})(EditorControl));
+/** @class */ ((function (_super) {
+    __extends(TypescriptEditorControlRenderer, _super);
+    function TypescriptEditorControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TypescriptEditorControlRenderer.defaultProps = __assign(__assign({}, EditorControl.defaultProps), { language: 'typescript' });
+    TypescriptEditorControlRenderer = __decorate([
+        FormItem({
+            type: 'ts-editor',
+            sizeMutable: false
+        })
+    ], TypescriptEditorControlRenderer);
+    return TypescriptEditorControlRenderer;
+})(EditorControl));
+/** @class */ ((function (_super) {
+    __extends(EditorControlRenderer, _super);
+    function EditorControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    EditorControlRenderer.defaultProps = __assign(__assign({}, EditorControl.defaultProps), { language: 'javascript' });
+    EditorControlRenderer = __decorate([
+        FormItem({
+            type: "editor",
+            sizeMutable: false
+        })
+    ], EditorControlRenderer);
+    return EditorControlRenderer;
+})(EditorControl));
+
+export { availableLanguages, EditorControl as default };

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { SchemaCollection, SchemaTpl } from '../../Schema';
+import { CollapseSchema } from '../Collapse';
+import { FormBaseControl } from 'amis-core';
+import type { FormHorizontal } from 'amis-core';
+/**
+ * FieldSet 表单项集合
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/fieldset
+ */
+export interface FieldSetControlSchema extends Omit<FormBaseControl, 'size'>, Omit<CollapseSchema, 'type' | 'body'> {
+    /**
+     * 指定为表单项集合
+     */
+    type: 'fieldset' | 'fieldSet';
+    /**
+     * 标题展示位置
+     */
+    titlePosition: 'top' | 'bottom';
+    /**
+     * 是否可折叠
+     */
+    collapsable?: boolean;
+    /**
+     * 默认是否折叠
+     */
+    collapsed?: boolean;
+    /**
+     * 内容区域
+     */
+    body?: SchemaCollection;
+    /**
+     * 标题
+     */
+    title?: SchemaTpl;
+    /**
+     * 收起的标题
+     */
+    collapseTitle?: SchemaTpl;
+    /**
+     * 点开时才加载内容
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 卡片隐藏就销毁内容。
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    subFormMode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    subFormHorizontal?: FormHorizontal;
+}
+export interface FieldSetProps extends RendererProps, Omit<FieldSetControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+}
+export default class FieldSetControl extends React.Component<FieldSetProps, any> {
+    constructor(props: FieldSetProps);
+    static defaultProps: {
+        titlePosition: string;
+        headingClassName: string;
+        collapsable: boolean;
+    };
+    renderBody(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class FieldSetRenderer extends FieldSetControl {
+}

package/esm/renderers/Form/FieldSet.js

@@ -0,0 +1,59 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+import Collapse from '../Collapse.js';
+
+var FieldSetControl = /** @class */ (function (_super) {
+    __extends(FieldSetControl, _super);
+    function FieldSetControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.renderBody = _this.renderBody.bind(_this);
+        return _this;
+    }
+    FieldSetControl.prototype.renderBody = function () {
+        var _a = this.props, body = _a.body, collapsable = _a.collapsable, horizontal = _a.horizontal, render = _a.render, mode = _a.mode, formMode = _a.formMode, cx = _a.classnames, store = _a.store, formClassName = _a.formClassName, disabled = _a.disabled, formHorizontal = _a.formHorizontal, subFormMode = _a.subFormMode, subFormHorizontal = _a.subFormHorizontal;
+        var props = {
+            store: store,
+            data: store.data,
+            render: render,
+            disabled: disabled,
+            formMode: subFormMode || formMode,
+            formHorizontal: subFormHorizontal || formHorizontal
+        };
+        mode && (props.mode = mode);
+        typeof collapsable !== 'undefined' && (props.collapsable = collapsable);
+        horizontal && (props.horizontal = horizontal);
+        return (React.createElement("div", { className: cx("Form--".concat(props.mode || formMode || 'normal'), formClassName) }, body ? render('body', body, props) : null));
+    };
+    FieldSetControl.prototype.render = function () {
+        var _a = this.props; _a.controls; var className = _a.className; _a.mode; var body = _a.body, rest = __rest(_a, ["controls", "className", "mode", "body"]);
+        return (React.createElement(Collapse, __assign({}, rest, { body: body, className: className, children: this.renderBody, wrapperComponent: "fieldset", headingComponent: rest.titlePosition === 'bottom' ? 'div' : 'legend' })));
+    };
+    FieldSetControl.defaultProps = {
+        titlePosition: 'top',
+        headingClassName: '',
+        collapsable: false
+    };
+    return FieldSetControl;
+}(React.Component));
+var FieldSetRenderer = /** @class */ (function (_super) {
+    __extends(FieldSetRenderer, _super);
+    function FieldSetRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FieldSetRenderer = __decorate([
+        Renderer({
+            type: 'fieldset',
+            weight: -100,
+            name: 'fieldset'
+        })
+    ], FieldSetRenderer);
+    return FieldSetRenderer;
+}(FieldSetControl));
+
+export { FieldSetRenderer, FieldSetControl as default };

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema } from '../../Schema';
+/**
+ * 公式功能控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/formula
+ */
+export interface FormulaControlSchema extends FormBaseControlSchema {
+    /**
+     * 指定为公式功能控件。
+     */
+    type: 'formula';
+    /**
+     * 当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 autoSet 为 false 时用来手动触发
+     */
+    id?: string;
+    /**
+     * 触发公式的作用条件，如 data.xxx == \"a\" 或者 ${xx}
+     */
+    condition?: string;
+    /**
+     * 是否自动应用
+     */
+    autoSet?: boolean;
+    /**
+     * 公式
+     */
+    formula?: string;
+    /**
+     * 是否初始应用
+     */
+    initSet?: boolean;
+    /**
+     * 字段名，公式结果将作用到此处指定的变量中去
+     */
+    name?: string;
+}
+export interface FormulaProps extends FormControlProps, Omit<FormulaControlSchema, 'type' | 'className' | 'descriptionClassName' | 'inputClassName'> {
+}
+export default class FormulaControl extends React.Component<FormControlProps, any> {
+    inited: boolean;
+    unHook?: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: FormControlProps): void;
+    componentWillUnmount(): void;
+    handleFormInit(data: any): void;
+    initSet(): any;
+    autoSet(prevProps: FormControlProps): void;
+    doAction(): void;
+    render(): null;
+}
+export declare class FormulaControlRenderer extends FormulaControl {
+}

package/esm/renderers/Form/Formula.js

@@ -0,0 +1,128 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { setVariable, evalJS, isObjectShallowModified, filter, autobind, FormItem } from 'amis-core';
+
+var FormulaControl = /** @class */ (function (_super) {
+    __extends(FormulaControl, _super);
+    function FormulaControl() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.inited = false;
+        return _this;
+    }
+    FormulaControl.prototype.componentDidMount = function () {
+        var _a = this.props, formInited = _a.formInited, initSet = _a.initSet, addHook = _a.addHook;
+        this.unHook = addHook ? addHook(this.handleFormInit, 'init') : undefined;
+        // 如果在表单中，还是等初始化数据过来才算
+        if (formInited === false) {
+            return;
+        }
+        this.inited = true;
+        initSet === false || this.initSet();
+    };
+    FormulaControl.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, formInited = _a.formInited, initSet = _a.initSet, autoSet = _a.autoSet;
+        if (this.inited) {
+            autoSet === false || this.autoSet(prevProps);
+        }
+        else if (typeof formInited === 'undefined') {
+            this.inited = true;
+            initSet === false || this.initSet();
+        }
+    };
+    FormulaControl.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = this.unHook) === null || _a === void 0 ? void 0 : _a.call(this);
+    };
+    FormulaControl.prototype.handleFormInit = function (data) {
+        this.inited = true;
+        var _a = this.props, name = _a.name, initSet = _a.initSet;
+        if (initSet === false) {
+            return;
+        }
+        var result = this.initSet();
+        if (typeof name === 'string' && typeof result !== 'undefined') {
+            setVariable(data, name, result);
+        }
+    };
+    FormulaControl.prototype.initSet = function () {
+        var _a = this.props, formula = _a.formula, data = _a.data, setPrinstineValue = _a.setPrinstineValue; _a.initSet; var condition = _a.condition;
+        if (!formula) {
+            return;
+        }
+        else if (condition &&
+            !~condition.indexOf('$') &&
+            !~condition.indexOf('<%') &&
+            !evalJS(condition, data)) {
+            return;
+        }
+        var result = evalJS(formula, data);
+        result !== null && (setPrinstineValue === null || setPrinstineValue === void 0 ? void 0 : setPrinstineValue(result));
+        return result;
+    };
+    FormulaControl.prototype.autoSet = function (prevProps) {
+        var props = this.props;
+        var formula = prevProps.formula, data = prevProps.data, onChange = prevProps.onChange, value = prevProps.value, condition = prevProps.condition;
+        if (formula &&
+            props.formula &&
+            isObjectShallowModified(data, props.data, false) &&
+            value === props.value) {
+            var nextResult = evalJS(props.formula, props.data);
+            if (condition && props.condition) {
+                if (!!~condition.indexOf('$') || !!~condition.indexOf('<%')) {
+                    // 使用${xxx}，来监听某个变量的变化
+                    if (filter(condition, data) !== filter(props.condition, props.data)) {
+                        onChange(nextResult);
+                    }
+                }
+                else if (evalJS(props.condition, props.data)) {
+                    // 使用 data.xxx == 'a' 表达式形式来判断
+                    onChange(nextResult);
+                }
+            }
+            else {
+                var prevResult = evalJS(formula, data);
+                if (JSON.stringify(prevResult) !== JSON.stringify(nextResult)) {
+                    onChange(nextResult !== null && nextResult !== void 0 ? nextResult : '');
+                }
+            }
+        }
+    };
+    FormulaControl.prototype.doAction = function () {
+        // 不细化具体是啥动作了，先重新计算，并把值运用上。
+        var _a = this.props, formula = _a.formula, data = _a.data, onChange = _a.onChange; _a.autoSet; _a.value;
+        var result = evalJS(formula, data);
+        onChange(result);
+    };
+    FormulaControl.prototype.render = function () {
+        return null;
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], FormulaControl.prototype, "handleFormInit", null);
+    return FormulaControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(FormulaControlRenderer, _super);
+    function FormulaControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FormulaControlRenderer = __decorate([
+        FormItem({
+            type: 'formula',
+            wrap: false,
+            strictMode: false,
+            sizeMutable: false
+        })
+    ], FormulaControlRenderer);
+    return FormulaControlRenderer;
+})(FormulaControl));
+
+export { FormulaControl as default };

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { FormBaseControlSchema, SchemaClassName, SchemaObject } from '../../Schema';
+import { FormHorizontal } from 'amis-core';
+export declare type GroupSubControl = SchemaObject & {
+    /**
+     * 列类名
+     */
+    columnClassName?: SchemaClassName;
+    /**
+     * 宽度占用比率。在某些容器里面有用比如 group
+     */
+    columnRatio?: number | 'auto';
+};
+/**
+ * Group 表单集合渲染器，能让多个表单在一行显示
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/group
+ */
+export interface GroupControlSchema extends FormBaseControlSchema {
+    type: 'group';
+    /**
+     * FormItem 集合
+     */
+    body: Array<GroupSubControl>;
+    /**
+     * 间隔
+     */
+    gap?: 'xs' | 'sm' | 'normal';
+    /**
+     * 配置时垂直摆放还是左右摆放。
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    subFormMode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    subFormHorizontal?: FormHorizontal;
+}
+export interface InputGroupProps extends RendererProps, Omit<GroupControlSchema, 'type' | 'className'> {
+}
+export declare class ControlGroupRenderer extends React.Component<InputGroupProps> {
+    constructor(props: InputGroupProps);
+    renderControl(control: any, index: any, otherProps?: any): JSX.Element | null;
+    renderVertical(props?: Readonly<InputGroupProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): JSX.Element | null;
+    renderHorizontal(props?: Readonly<InputGroupProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): JSX.Element | null;
+    renderInput(props?: Readonly<InputGroupProps> & Readonly<{
+        children?: React.ReactNode;
+    }>): JSX.Element | null;
+    render(): JSX.Element | null;
+}