amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/CollapseGroup.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaCollection, SchemaObject } from '../Schema';
+/**
+ * CollapseGroup 折叠渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/collapse
+ */
+export interface CollapseGroupSchema extends BaseSchema {
+    /**
+     * 指定为折叠器类型
+     */
+    type: 'collapse-group';
+    /**
+     * 激活面板
+     */
+    activeKey?: Array<string | number | never> | string | number;
+    /**
+     * 手风琴模式
+     */
+    accordion?: boolean;
+    /**
+     * 自定义切换图标
+     */
+    expandIcon?: SchemaObject;
+    /**
+     * 设置图标位置
+     */
+    expandIconPosition?: 'left' | 'right';
+    /**
+     * 内容区域
+     */
+    body?: SchemaCollection;
+}
+export interface CollapseGroupProps extends RendererProps, Omit<CollapseGroupSchema, 'type' | 'className'> {
+    children?: JSX.Element | ((props?: any) => JSX.Element);
+}
+export declare class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+    constructor(props: CollapseGroupProps);
+    render(): JSX.Element;
+}
+export declare class CollapseGroupRenderer extends CollapseGroupRender {
+}

package/esm/renderers/CollapseGroup.js

@@ -0,0 +1,35 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+import { CollapseGroup } from 'amis-ui';
+
+var CollapseGroupRender = /** @class */ (function (_super) {
+    __extends(CollapseGroupRender, _super);
+    function CollapseGroupRender(props) {
+        return _super.call(this, props) || this;
+    }
+    CollapseGroupRender.prototype.render = function () {
+        var _a = this.props, defaultActiveKey = _a.defaultActiveKey, accordion = _a.accordion, expandIcon = _a.expandIcon, expandIconPosition = _a.expandIconPosition, body = _a.body, className = _a.className, render = _a.render;
+        return (React.createElement(CollapseGroup, { defaultActiveKey: defaultActiveKey, accordion: accordion, expandIcon: expandIcon, expandIconPosition: expandIconPosition, className: className }, render('body', body || '')));
+    };
+    return CollapseGroupRender;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CollapseGroupRenderer, _super);
+    function CollapseGroupRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CollapseGroupRenderer = __decorate([
+        Renderer({
+            type: 'collapse-group'
+        })
+    ], CollapseGroupRenderer);
+    return CollapseGroupRenderer;
+})(CollapseGroupRender));
+
+export { CollapseGroupRender };

package/esm/renderers/Color.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file 用来展示颜色块。
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+/**
+ * Color 显示渲染器，格式说明。
+ * 文档：https://baidu.gitee.io/amis/docs/components/color
+ */
+export interface ColorSchema extends BaseSchema {
+    /**
+     *  指定为颜色显示控件
+     */
+    type: 'color';
+    /**
+     * 默认颜色
+     */
+    defaultColor?: string;
+    /**
+     * 是否用文字显示值。
+     */
+    showValue?: boolean;
+}
+export interface ColorProps extends RendererProps, Omit<ColorSchema, 'type' | 'className'> {
+}
+export declare class ColorField extends React.Component<ColorProps, object> {
+    static defaultProps: {
+        className: string;
+        defaultColor: string;
+        showValue: boolean;
+    };
+    render(): JSX.Element;
+}
+export declare class ColorFieldRenderer extends ColorField {
+}

package/esm/renderers/Color.js

@@ -0,0 +1,42 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { getPropValue, Renderer } from 'amis-core';
+
+var ColorField = /** @class */ (function (_super) {
+    __extends(ColorField, _super);
+    function ColorField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ColorField.prototype.render = function () {
+        var _a = this.props, className = _a.className, cx = _a.classnames, defaultColor = _a.defaultColor, showValue = _a.showValue;
+        var color = getPropValue(this.props);
+        return (React.createElement("div", { className: cx('ColorField', className) },
+            React.createElement("i", { className: cx('ColorField-previewIcon'), style: { backgroundColor: color || defaultColor } }),
+            showValue ? (React.createElement("span", { className: cx('ColorField-value') }, color)) : null));
+    };
+    ColorField.defaultProps = {
+        className: '',
+        defaultColor: '#ccc',
+        showValue: true
+    };
+    return ColorField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ColorFieldRenderer, _super);
+    function ColorFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ColorFieldRenderer = __decorate([
+        Renderer({
+            type: 'color'
+        })
+    ], ColorFieldRenderer);
+    return ColorFieldRenderer;
+})(ColorField));
+
+export { ColorField };

package/esm/renderers/Container.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaClassName, SchemaCollection } from '../Schema';
+/**
+ * Container 容器渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/container
+ */
+export interface ContainerSchema extends BaseSchema {
+    /**
+     * 指定为 container 类型
+     */
+    type: 'container';
+    /**
+     * 内容
+     */
+    body: SchemaCollection;
+    /**
+     * body 类名
+     */
+    bodyClassName?: SchemaClassName;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 使用的标签
+     */
+    wrapperComponent?: string;
+}
+export interface ContainerProps extends RendererProps, Omit<ContainerSchema, 'type' | 'className'> {
+    children?: (props: any) => React.ReactNode;
+}
+export default class Container<T> extends React.Component<ContainerProps & T, object> {
+    static propsList: Array<string>;
+    static defaultProps: {
+        className: string;
+    };
+    renderBody(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class ContainerRenderer extends Container<{}> {
+}

package/esm/renderers/Container.js

@@ -0,0 +1,49 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { buildStyle, Renderer } from 'amis-core';
+
+var Container = /** @class */ (function (_super) {
+    __extends(Container, _super);
+    function Container() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Container.prototype.renderBody = function () {
+        var _a = this.props, children = _a.children, body = _a.body, render = _a.render, cx = _a.classnames, bodyClassName = _a.bodyClassName, disabled = _a.disabled;
+        return (React.createElement("div", { className: cx('Container-body', bodyClassName) }, children
+            ? typeof children === 'function'
+                ? children(this.props)
+                : children
+            : body
+                ? render('body', body, { disabled: disabled })
+                : null));
+    };
+    Container.prototype.render = function () {
+        var _a = this.props, className = _a.className, wrapperComponent = _a.wrapperComponent; _a.size; var cx = _a.classnames, style = _a.style, data = _a.data;
+        var Component = wrapperComponent || 'div';
+        return (React.createElement(Component, { className: cx('Container', className), style: buildStyle(style, data) }, this.renderBody()));
+    };
+    Container.propsList = ['body', 'className'];
+    Container.defaultProps = {
+        className: ''
+    };
+    return Container;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ContainerRenderer, _super);
+    function ContainerRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ContainerRenderer = __decorate([
+        Renderer({
+            type: 'container'
+        })
+    ], ContainerRenderer);
+    return ContainerRenderer;
+})(Container));
+
+export { Container as default };

package/esm/renderers/Copyable.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file scoped.jsx.
+ * @author fex
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { SchemaIcon, SchemaTpl } from '../Schema';
+export interface SchemaCopyableObject {
+    /**
+     * 可以配置图标
+     */
+    icon?: SchemaIcon;
+    /**
+     * 配置复制时的内容模板。
+     */
+    content?: SchemaTpl;
+}
+export declare type SchemaCopyable = boolean | SchemaCopyableObject;
+export interface CopyableProps extends RendererProps {
+    name?: string;
+    label?: string;
+    copyable: SchemaCopyable;
+}
+export declare const HocCopyable: () => (Component: React.ComponentType<any>) => any;
+export default HocCopyable;

package/esm/renderers/Copyable.js

@@ -0,0 +1,49 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign } from 'tslib';
+import React from 'react';
+import hoistNonReactStatic from 'hoist-non-react-statics';
+import { filter } from 'amis-core';
+import { Icon } from 'amis-ui';
+
+/**
+ * @file scoped.jsx.
+ * @author fex
+ */
+var HocCopyable = function () {
+    return function (Component) {
+        var QuickEditComponent = /** @class */ (function (_super) {
+            __extends(QuickEditComponent, _super);
+            function QuickEditComponent() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            QuickEditComponent.prototype.handleClick = function (content) {
+                var _a = this.props, env = _a.env, copyFormat = _a.copyFormat;
+                env.copy && env.copy(content, { format: copyFormat });
+            };
+            QuickEditComponent.prototype.render = function () {
+                var _a = this.props, copyable = _a.copyable, name = _a.name, className = _a.className, data = _a.data, noHoc = _a.noHoc, cx = _a.classnames, __ = _a.translate;
+                if (copyable && !noHoc) {
+                    var content = filter(copyable.content ||
+                        '${' + name + ' | raw }', data);
+                    if (content) {
+                        return (React.createElement(Component, __assign({}, this.props, { className: cx("Field--copyable", className) }),
+                            React.createElement(Component, __assign({}, this.props, { wrapperComponent: '', noHoc: true })),
+                            React.createElement("a", { key: "edit-btn", "data-tooltip": __('Copyable.tip'), className: cx('Field-copyBtn'), onClick: this.handleClick.bind(this, content) },
+                                React.createElement(Icon, { icon: "copy", className: "icon" }))));
+                    }
+                }
+                return React.createElement(Component, __assign({}, this.props));
+            };
+            QuickEditComponent.ComposedComponent = Component;
+            return QuickEditComponent;
+        }(React.PureComponent));
+        hoistNonReactStatic(QuickEditComponent, Component);
+        return QuickEditComponent;
+    };
+};
+
+export { HocCopyable, HocCopyable as default };

package/esm/renderers/Custom.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { BaseSchema } from '../Schema';
+import { FormControlProps } from 'amis-core';
+/**
+ * 自定义组件
+ */
+export interface CustomSchema extends BaseSchema {
+    /**
+     * 实现自定义功能的渲染器，主要给 JS SDK 和可视化编辑器里使用。
+     *
+     * 文档：https://baidu.gitee.io/amis/components/custom
+     */
+    type: 'custom';
+    onMount?: Function | string;
+    onUpdate?: Function | string;
+    onUnmount?: Function | string;
+    inline?: boolean;
+    id?: string;
+    html?: string;
+}
+export interface CustomProps extends FormControlProps, CustomSchema {
+    className?: string;
+    value?: any;
+    wrapperComponent?: any;
+    inline?: boolean;
+}
+export declare class Custom extends React.Component<CustomProps, object> {
+    static defaultProps: Partial<CustomProps>;
+    dom: any;
+    onUpdate: Function;
+    onMount: Function;
+    onUnmount: Function;
+    childElemArr: HTMLElement[];
+    constructor(props: CustomProps);
+    initOnMount(props: CustomProps): void;
+    initOnUpdate(props: CustomProps): void;
+    initOnUnmount(props: CustomProps): void;
+    componentDidUpdate(prevProps: CustomProps): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    recordChildElem(insertElem: HTMLElement): void;
+    unmountChildElem(): void;
+    /**
+     * 渲染子元素
+     * 备注：现有custom组件通过props.render生成的子元素是react虚拟dom对象，需要使用ReactDOM.render渲染，不能直接插入到当前dom中。
+     **/
+    renderChild(schemaPosition: string, childSchema: any, insertElemDom: HTMLElement | string): void | null;
+    render(): JSX.Element;
+}
+export declare class CustomRenderer extends Custom {
+}

package/esm/renderers/Custom.js

@@ -0,0 +1,163 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __spreadArray, __extends, __decorate } from 'tslib';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import memoize from 'lodash/memoize';
+import isString from 'lodash/isString';
+import { Renderer } from 'amis-core';
+import isEqual from 'lodash/isEqual';
+
+// 添加resolver，指定所有参数的联合字符串为key。因为最后一个参数为函数体
+// 缓存一下，避免在 crud 中的自定义组件被大量执行
+var getFunction = memoize(function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return new (Function.bind.apply(Function, __spreadArray([void 0], args, false)))();
+}, function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return JSON.stringify(args);
+});
+var Custom = /** @class */ (function (_super) {
+    __extends(Custom, _super);
+    function Custom(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onUpdate = function () { };
+        _this.onMount = function () { };
+        _this.onUnmount = function () { };
+        _this.childElemArr = []; // 用于记录子元素的Dom节点，以便销毁
+        _this.dom = React.createRef();
+        _this.initOnMount(props);
+        _this.initOnUpdate(props);
+        _this.initOnUnmount(props);
+        _this.renderChild = _this.renderChild.bind(_this);
+        _this.recordChildElem = _this.recordChildElem.bind(_this);
+        _this.unmountChildElem = _this.unmountChildElem.bind(_this);
+        return _this;
+    }
+    Custom.prototype.initOnMount = function (props) {
+        if (props.onMount) {
+            if (typeof props.onMount === 'string') {
+                this.onMount = getFunction('dom', 'value', 'onChange', 'props', props.onMount);
+            }
+            else {
+                this.onMount = props.onMount;
+            }
+        }
+    };
+    Custom.prototype.initOnUpdate = function (props) {
+        if (props.onUpdate) {
+            if (typeof props.onUpdate === 'string') {
+                this.onUpdate = getFunction('dom', 'data', 'prevData', 'props', props.onUpdate);
+            }
+            else {
+                this.onUpdate = props.onUpdate;
+            }
+        }
+    };
+    Custom.prototype.initOnUnmount = function (props) {
+        if (props.onUnmount) {
+            if (typeof props.onUnmount === 'string') {
+                this.onUnmount = getFunction('props', props.onUnmount);
+            }
+            else {
+                this.onUnmount = props.onUnmount;
+            }
+        }
+    };
+    Custom.prototype.componentDidUpdate = function (prevProps) {
+        if (!isEqual(this.props.onUpdate, prevProps.onUpdate)) {
+            this.initOnUpdate(this.props);
+        }
+        if (!isEqual(this.props.onUpdate, prevProps.onUpdate) ||
+            !isEqual(this.props.data, prevProps.data)) {
+            this.onUpdate(this.dom, this.props.data, prevProps.data, this.props);
+        }
+        if (!isEqual(this.props.onMount, prevProps.onMount)) {
+            this.initOnMount(this.props);
+        }
+        if (!isEqual(this.props.onUnmount, prevProps.onUnmount)) {
+            this.initOnUnmount(this.props);
+        }
+    };
+    Custom.prototype.componentDidMount = function () {
+        var _a = this.props, value = _a.value, onChange = _a.onChange;
+        this.onMount(this.dom.current, value, onChange, this.props);
+    };
+    Custom.prototype.componentWillUnmount = function () {
+        this.onUnmount(this.props);
+        // 自动销毁所有子节点
+        this.unmountChildElem();
+    };
+    // 记录子元素的dom节点
+    Custom.prototype.recordChildElem = function (insertElem) {
+        if (insertElem && !this.childElemArr.some(function (item) { return item === insertElem; })) {
+            this.childElemArr.push(insertElem);
+        }
+    };
+    // 销毁所有子元素的dom节点
+    Custom.prototype.unmountChildElem = function () {
+        if (this.childElemArr && this.childElemArr.length > 0) {
+            this.childElemArr.forEach(function (childElemItem) {
+                return ReactDOM.unmountComponentAtNode(childElemItem);
+            });
+        }
+    };
+    /**
+     * 渲染子元素
+     * 备注：现有custom组件通过props.render生成的子元素是react虚拟dom对象，需要使用ReactDOM.render渲染，不能直接插入到当前dom中。
+     **/
+    Custom.prototype.renderChild = function (schemaPosition, childSchema, insertElemDom) {
+        var _this = this;
+        var render = this.props.render;
+        var childEleCont = null;
+        var curInsertElemDom = null;
+        if (isString(insertElemDom)) {
+            var _curInsertElem = document.getElementById(insertElemDom);
+            if (_curInsertElem) {
+                curInsertElemDom = _curInsertElem;
+            }
+        }
+        else {
+            curInsertElemDom = insertElemDom;
+        }
+        if (childSchema && curInsertElemDom) {
+            var childHTMLElem = render(schemaPosition, childSchema);
+            childEleCont = ReactDOM.render(childHTMLElem, curInsertElemDom, function () {
+                _this.recordChildElem(curInsertElemDom);
+            });
+        }
+        return childEleCont;
+    };
+    Custom.prototype.render = function () {
+        var _a = this.props, className = _a.className, html = _a.html, id = _a.id, wrapperComponent = _a.wrapperComponent, inline = _a.inline; _a.translate; var cx = _a.classnames;
+        var Component = wrapperComponent || inline ? 'span' : 'div';
+        return (React.createElement(Component, { ref: this.dom, className: cx(className), id: id, dangerouslySetInnerHTML: { __html: html ? html : '' } }));
+    };
+    Custom.defaultProps = {
+        inline: false
+    };
+    return Custom;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CustomRenderer, _super);
+    function CustomRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CustomRenderer = __decorate([
+        Renderer({
+            type: 'custom'
+        })
+    ], CustomRenderer);
+    return CustomRenderer;
+})(Custom));
+
+export { Custom };

package/esm/renderers/Date.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+/**
+ * Date 展示渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/date
+ */
+export interface DateSchema extends BaseSchema {
+    /**
+     * 指定为日期展示类型
+     */
+    type: 'date' | 'datetime' | 'time' | 'static-date' | 'static-datetime' | 'static-time';
+    /**
+     * 展示的时间格式，参考 moment 中的格式说明。
+     */
+    format?: string;
+    /**
+     * 占位符
+     */
+    placeholder?: string;
+    /**
+     * 值的时间格式，参考 moment 中的格式说明。
+     */
+    valueFormat?: string;
+    /**
+     * 显示成相对时间，比如1分钟前
+     */
+    fromNow?: boolean;
+    /**
+     * 更新频率， 默认为1分钟
+     */
+    updateFrequency?: number;
+}
+export interface DateProps extends RendererProps, Omit<DateSchema, 'type' | 'className'> {
+}
+export interface DateState {
+    random?: number;
+}
+export declare class DateField extends React.Component<DateProps, DateState> {
+    refreshInterval: ReturnType<typeof setTimeout>;
+    static defaultProps: Pick<DateProps, 'placeholder' | 'format' | 'valueFormat' | 'fromNow' | 'updateFrequency'>;
+    state: DateState;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export declare class DateFieldRenderer extends DateField {
+    static defaultProps: Partial<DateProps>;
+}
+export declare class DateTimeFieldRenderer extends DateField {
+    static defaultProps: Partial<DateProps>;
+}
+export declare class TimeFieldRenderer extends DateField {
+    static defaultProps: Partial<DateProps>;
+}
+export declare class MonthFieldRenderer extends DateField {
+    static defaultProps: Partial<DateProps>;
+}