amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/GridNav.js

@@ -0,0 +1,80 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { validations, handleAction, getPropValue, isPureVariable, resolveVariableAndFilter, autobind, Renderer } from 'amis-core';
+import { GridNav, GridNavItem } from 'amis-ui';
+
+/** @class */ ((function (_super) {
+    __extends(List, _super);
+    function List() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    List.prototype.handleClick = function (item) {
+        var _this = this;
+        return function (e) {
+            var action;
+            if (item.link) {
+                action = validations.isUrl({}, item.link)
+                    ? {
+                        type: 'button',
+                        actionType: 'url',
+                        url: item.link,
+                        blank: item.blank
+                    }
+                    : {
+                        type: 'button',
+                        actionType: 'link',
+                        link: item.link
+                    };
+            }
+            else {
+                action = item.clickAction;
+            }
+            handleAction(e, action, _this.props);
+        };
+    };
+    List.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, itemClassName = _a.itemClassName, source = _a.source, data = _a.data, options = _a.options, classnames = _a.classnames;
+        var value = getPropValue(this.props);
+        var list = [];
+        if (typeof source === 'string' && isPureVariable(source)) {
+            list = resolveVariableAndFilter(source, data, '| raw') || undefined;
+        }
+        else if (Array.isArray(value)) {
+            list = value;
+        }
+        else if (Array.isArray(options)) {
+            list = options;
+        }
+        if (list && !Array.isArray(list)) {
+            list = [list];
+        }
+        if (!(list === null || list === void 0 ? void 0 : list.length)) {
+            return null;
+        }
+        return (React.createElement(GridNav, __assign({}, this.props), list.map(function (item, index) { return (React.createElement(GridNavItem, { key: index, onClick: item.clickAction || item.link ? _this.handleClick(item) : undefined, className: itemClassName, text: item.text, icon: item.icon, classnames: classnames, badge: item.badge
+                ? {
+                    badge: item.badge,
+                    data: data,
+                    classnames: classnames
+                }
+                : undefined })); })));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], List.prototype, "handleClick", null);
+    List = __decorate([
+        Renderer({
+            type: 'grid-nav'
+        })
+    ], List);
+    return List;
+})(React.Component));

package/esm/renderers/HBox.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { Schema } from 'amis-core';
+import { BaseSchema, SchemaCollection, SchemaExpression } from '../Schema';
+import { FormHorizontal } from 'amis-core';
+export declare type HBoxColumnObject = {
+    /**
+     * 列上 CSS 类名
+     */
+    columnClassName?: string;
+    /**
+     * 垂直对齐方式
+     */
+    valign?: 'top' | 'middle' | 'bottom' | 'between';
+    /**
+     * 宽度
+     */
+    width?: number | string;
+    /**
+     * 高度
+     */
+    height?: number | string;
+    /**
+     * 其他样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    mode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    horizontal?: FormHorizontal;
+    /**
+     * 内容区
+     */
+    body?: SchemaCollection;
+    /**
+     * 是否显示
+     */
+    visible?: boolean;
+    /**
+     * 是否显示表达式
+     */
+    visibleOn?: SchemaExpression;
+};
+export declare type HBoxColumn = HBoxColumnObject;
+/**
+ * Hbox 水平布局渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/hbox
+ */
+export interface HBoxSchema extends BaseSchema {
+    /**
+     * 指定为each展示类型
+     */
+    type: 'hbox';
+    columns: Array<HBoxColumn>;
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    subFormMode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    subFormHorizontal?: FormHorizontal;
+    /**
+     * 水平间距
+     */
+    gap?: 'xs' | 'sm' | 'base' | 'none' | 'md' | 'lg';
+    /**
+     * 垂直对齐方式
+     */
+    valign?: 'top' | 'middle' | 'bottom' | 'between';
+    /**
+     * 水平对齐方式
+     */
+    align?: 'left' | 'right' | 'between' | 'center';
+}
+export interface HBoxProps extends RendererProps, HBoxSchema {
+    className: string;
+    itemRender?: (item: any, key: number, length: number, props: any) => JSX.Element;
+}
+export default class HBox extends React.Component<HBoxProps, object> {
+    static propsList: Array<string>;
+    static defaultProps: Partial<HBoxProps>;
+    renderChild(region: string, node: Schema, props?: any): JSX.Element;
+    renderColumn(column: HBoxColumn, key: number, length: number): JSX.Element | null;
+    renderColumns(): (JSX.Element | null)[];
+    render(): JSX.Element;
+}
+export declare class HBoxRenderer extends HBox {
+}

package/esm/renderers/HBox.js

@@ -0,0 +1,75 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { isVisible, ucFirst, Renderer } from 'amis-core';
+
+var HBox = /** @class */ (function (_super) {
+    __extends(HBox, _super);
+    function HBox() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HBox.prototype.renderChild = function (region, node, props) {
+        if (props === void 0) { props = {}; }
+        var render = this.props.render;
+        return render(region, node, props);
+    };
+    HBox.prototype.renderColumn = function (column, key, length) {
+        var _a;
+        var _b = this.props, itemRender = _b.itemRender, data = _b.data, cx = _b.classnames, subFormMode = _b.subFormMode, subFormHorizontal = _b.subFormHorizontal, formMode = _b.formMode, formHorizontal = _b.formHorizontal;
+        if (!isVisible(column, data) || !column) {
+            return null;
+        }
+        var style = __assign({ width: column.width, height: column.height }, column.style);
+        return (React.createElement("div", { key: key, className: cx("Hbox-col", style.width === 'auto'
+                ? 'Hbox-col--auto'
+                : style.width
+                    ? 'Hbox-col--customWidth'
+                    : '', (_a = {},
+                _a["Hbox-col--v".concat(ucFirst(column.valign))] = column.valign,
+                _a), column.columnClassName), style: style }, itemRender
+            ? itemRender(column, key, length, this.props)
+            : this.renderChild("column/".concat(key), column.body, {
+                formMode: column.mode || subFormMode || formMode,
+                formHorizontal: column.horizontal || subFormHorizontal || formHorizontal
+            })));
+    };
+    HBox.prototype.renderColumns = function () {
+        var _this = this;
+        var columns = this.props.columns;
+        return columns.map(function (column, key) {
+            return _this.renderColumn(column, key, columns.length);
+        });
+    };
+    HBox.prototype.render = function () {
+        var _a;
+        var _b = this.props, className = _b.className, cx = _b.classnames, gap = _b.gap, vAlign = _b.valign, hAlign = _b.align;
+        return (React.createElement("div", { className: cx("Hbox", className, (_a = {},
+                _a["Hbox--".concat(gap)] = gap,
+                _a["Hbox--v".concat(ucFirst(vAlign))] = vAlign,
+                _a["Hbox--h".concat(ucFirst(hAlign))] = hAlign,
+                _a)) }, this.renderColumns()));
+    };
+    HBox.propsList = ['columns'];
+    HBox.defaultProps = {
+        gap: 'xs'
+    };
+    return HBox;
+}(React.Component));
+var HBoxRenderer = /** @class */ (function (_super) {
+    __extends(HBoxRenderer, _super);
+    function HBoxRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HBoxRenderer = __decorate([
+        Renderer({
+            type: 'hbox'
+        })
+    ], HBoxRenderer);
+    return HBoxRenderer;
+}(HBox));
+
+export { HBoxRenderer, HBox as default };

package/esm/renderers/IFrame.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { IScopedContext } from 'amis-core';
+import { BaseSchema, SchemaUrlPath } from '../Schema';
+import { ActionSchema } from './Action';
+/**
+ * IFrame 渲染器
+ * 文档：https://baidu.gitee.io/amis/docs/components/iframe
+ */
+export interface IFrameSchema extends BaseSchema {
+    type: 'iframe';
+    /**
+     * 页面地址
+     */
+    src: SchemaUrlPath;
+    /**
+     * 事件相应，配置后当 iframe 通过 postMessage 发送事件时，可以触发 AMIS 内部的动作。
+     */
+    events?: {
+        [eventName: string]: ActionSchema;
+    };
+    width?: number | string;
+    height?: number | string;
+}
+export interface IFrameProps extends RendererProps, Omit<IFrameSchema, 'type' | 'className'> {
+}
+export default class IFrame extends React.Component<IFrameProps, object> {
+    IFrameRef: React.RefObject<HTMLIFrameElement>;
+    static propsList: Array<string>;
+    static defaultProps: Partial<IFrameProps>;
+    state: {
+        width: string | number;
+        height: string | number;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IFrameProps): void;
+    componentWillUnmount(): void;
+    onMessage(e: MessageEvent): void;
+    onLoad(): void;
+    reload(subpath?: any, query?: any): void;
+    receive(values: object): void;
+    postMessage(type: string, data: any): void;
+    render(): JSX.Element;
+}
+export declare class IFrameRenderer extends IFrame {
+    static contextType: React.Context<IScopedContext>;
+    constructor(props: IFrameProps, context: IScopedContext);
+    componentWillUnmount(): void;
+}

package/esm/renderers/IFrame.js

@@ -0,0 +1,169 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { createObject, resolveVariableAndFilter, isApiOutdated, autobind, ScopedContext, Renderer } from 'amis-core';
+
+var IFrame = /** @class */ (function (_super) {
+    __extends(IFrame, _super);
+    function IFrame() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.IFrameRef = React.createRef();
+        _this.state = {
+            width: _this.props.width || '100%',
+            height: _this.props.height || '100%'
+        };
+        return _this;
+    }
+    IFrame.prototype.componentDidMount = function () {
+        window.addEventListener('message', this.onMessage);
+    };
+    IFrame.prototype.componentDidUpdate = function (prevProps) {
+        var data = this.props.data;
+        if (data !== prevProps.data) {
+            this.postMessage('update', data);
+        }
+        else if (this.props.width !== prevProps.width ||
+            this.props.height !== prevProps.height) {
+            this.setState({
+                width: this.props.width || '100%',
+                height: this.props.height || '100%'
+            });
+        }
+    };
+    IFrame.prototype.componentWillUnmount = function () {
+        window.removeEventListener('message', this.onMessage);
+    };
+    IFrame.prototype.onMessage = function (e) {
+        var _a;
+        var _b = this.props, events = _b.events, onAction = _b.onAction, data = _b.data;
+        if (typeof ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.type) !== 'string' || !events) {
+            return;
+        }
+        var _c = e.data.type.split(':'), prefix = _c[0], type = _c[1];
+        if (prefix !== 'amis' || !type) {
+            return;
+        }
+        if (type === 'resize' && e.data.data) {
+            this.setState({
+                width: e.data.data.width || '100%',
+                height: e.data.data.height || '100%'
+            });
+        }
+        else {
+            var action = events[type];
+            action && onAction(e, action, createObject(data, e.data.data));
+        }
+    };
+    IFrame.prototype.onLoad = function () {
+        var _a = this.props, src = _a.src, data = _a.data;
+        src && this.postMessage('init', data);
+    };
+    // 当别的组件通知 iframe reload 的时候执行。
+    IFrame.prototype.reload = function (subpath, query) {
+        if (query) {
+            return this.receive(query);
+        }
+        var _a = this.props, src = _a.src, data = _a.data;
+        if (src) {
+            this.IFrameRef.current.src =
+                resolveVariableAndFilter(src, data, '| raw');
+        }
+    };
+    // 当别的组件把数据发给 iframe 里面的时候执行。
+    IFrame.prototype.receive = function (values) {
+        var _a = this.props, src = _a.src, data = _a.data;
+        var newData = createObject(data, values);
+        this.postMessage('receive', newData);
+        if (isApiOutdated(src, src, data, newData)) {
+            this.IFrameRef.current.src =
+                resolveVariableAndFilter(src, newData, '| raw');
+        }
+    };
+    IFrame.prototype.postMessage = function (type, data) {
+        var _a, _b;
+        (_b = (_a = this.IFrameRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
+            type: "amis:".concat(type),
+            data: JSON.parse(JSON.stringify(data))
+        }, '*');
+    };
+    IFrame.prototype.render = function () {
+        var _a = this.state, width = _a.width, height = _a.height;
+        var _b = this.props, className = _b.className, src = _b.src, name = _b.name, frameBorder = _b.frameBorder, data = _b.data, style = _b.style;
+        var tempStyle = {};
+        width !== void 0 && (tempStyle.width = width);
+        height !== void 0 && (tempStyle.height = height);
+        style = __assign(__assign({}, tempStyle), style);
+        var finalSrc = src
+            ? resolveVariableAndFilter(src, data, '| raw')
+            : undefined;
+        if (typeof finalSrc === 'string' &&
+            finalSrc &&
+            !/^(\.\/|\.\.\/|\/|https?\:\/\/|\/\/)/.test(finalSrc)) {
+            return React.createElement("p", null, "\u8BF7\u586B\u5199\u5408\u6CD5\u7684 iframe \u5730\u5740");
+        }
+        return (React.createElement("iframe", { name: name, className: className, frameBorder: frameBorder, style: style, ref: this.IFrameRef, onLoad: this.onLoad, src: finalSrc }));
+    };
+    IFrame.propsList = ['src', 'className'];
+    IFrame.defaultProps = {
+        className: '',
+        frameBorder: 0
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MessageEvent]),
+        __metadata("design:returntype", void 0)
+    ], IFrame.prototype, "onMessage", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], IFrame.prototype, "onLoad", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], IFrame.prototype, "reload", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], IFrame.prototype, "receive", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], IFrame.prototype, "postMessage", null);
+    return IFrame;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(IFrameRenderer, _super);
+    function IFrameRenderer(props, context) {
+        var _this = _super.call(this, props) || this;
+        var scoped = context;
+        scoped.registerComponent(_this);
+        return _this;
+    }
+    IFrameRenderer.prototype.componentWillUnmount = function () {
+        var scoped = this.context;
+        scoped.unRegisterComponent(this);
+    };
+    IFrameRenderer.contextType = ScopedContext;
+    IFrameRenderer = __decorate([
+        Renderer({
+            type: 'iframe'
+        }),
+        __metadata("design:paramtypes", [Object, Object])
+    ], IFrameRenderer);
+    return IFrameRenderer;
+})(IFrame));
+
+export { IFrame as default };

package/esm/renderers/Icon.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+import { BadgeObject } from 'amis-ui';
+/**
+ * Icon 图表渲染器
+ * 文档：https://baidu.gitee.io/amis/docs/components/icon
+ */
+export interface IconSchema extends BaseSchema {
+    type: 'icon';
+    /**
+     * 按钮类型
+     */
+    icon: string;
+    vendor?: 'iconfont' | 'fa' | '';
+    /**
+     * 角标
+     */
+    badge?: BadgeObject;
+}
+export interface IconProps extends RendererProps, Omit<IconSchema, 'type' | 'className'> {
+}
+export declare class Icon extends React.Component<IconProps, object> {
+    static defaultProps: Partial<IconProps>;
+    render(): JSX.Element;
+}
+export declare class IconRenderer extends Icon {
+}

package/esm/renderers/Icon.js

@@ -0,0 +1,60 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+import { withBadge } from 'amis-ui';
+import { getIcon } from 'amis-ui/lib/components/icons';
+
+var Icon = /** @class */ (function (_super) {
+    __extends(Icon, _super);
+    function Icon() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Icon.prototype.render = function () {
+        var _a = this.props, icon = _a.icon, vendor = _a.vendor, cx = _a.classnames, className = _a.className;
+        var CustomIcon = getIcon(icon);
+        if (CustomIcon) {
+            return React.createElement(CustomIcon, { className: cx(className, "icon-".concat(icon)) });
+        }
+        var isURLIcon = (icon === null || icon === void 0 ? void 0 : icon.indexOf('.')) !== -1;
+        var iconPrefix = '';
+        if (vendor === 'iconfont') {
+            iconPrefix = "iconfont icon-".concat(icon);
+        }
+        else if (vendor === 'fa') {
+            //默认是fontawesome v4，兼容之前配置
+            iconPrefix = "".concat(vendor, " ").concat(vendor, "-").concat(icon);
+        }
+        else {
+            // 如果vendor为空，则不设置前缀,这样可以支持fontawesome v5、fontawesome v6或者其他框架
+            iconPrefix = "".concat(icon);
+        }
+        return isURLIcon ? (React.createElement("img", { className: cx('Icon'), src: icon })) : (React.createElement("i", { className: cx(iconPrefix, className) }));
+    };
+    Icon.defaultProps = {
+        icon: '',
+        vendor: 'fa'
+    };
+    return Icon;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(IconRenderer, _super);
+    function IconRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    IconRenderer = __decorate([
+        Renderer({
+            type: 'icon'
+        })
+        // @ts-ignore 类型没搞定
+        ,
+        withBadge
+    ], IconRenderer);
+    return IconRenderer;
+})(Icon));
+
+export { Icon };