amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/PopOver.js

@@ -0,0 +1,166 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign } from 'tslib';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import hoistNonReactStatic from 'hoist-non-react-statics';
+import { RootClose, Overlay, PopOver } from 'amis-core';
+import { Icon } from 'amis-ui';
+
+/**
+ * @file scoped.jsx.
+ * @author fex
+ */
+var HocPopOver = function (config) {
+    if (config === void 0) { config = {}; }
+    return function (Component) {
+        var lastOpenedInstance = null;
+        var PopOverComponent = /** @class */ (function (_super) {
+            __extends(PopOverComponent, _super);
+            function PopOverComponent(props) {
+                var _this = _super.call(this, props) || this;
+                _this.openPopOver = _this.openPopOver.bind(_this);
+                _this.closePopOver = _this.closePopOver.bind(_this);
+                _this.closePopOverLater = _this.closePopOverLater.bind(_this);
+                _this.clearCloseTimer = _this.clearCloseTimer.bind(_this);
+                _this.targetRef = _this.targetRef.bind(_this);
+                // this.handleClickOutside = this.handleClickOutside.bind(this);
+                _this.state = {
+                    isOpened: false
+                };
+                return _this;
+            }
+            PopOverComponent.prototype.targetRef = function (ref) {
+                this.target = ref;
+            };
+            PopOverComponent.prototype.openPopOver = function () {
+                var _this = this;
+                var onPopOverOpened = this.props.onPopOverOpened;
+                lastOpenedInstance === null || lastOpenedInstance === void 0 ? void 0 : lastOpenedInstance.closePopOver();
+                lastOpenedInstance = this;
+                this.setState({
+                    isOpened: true
+                }, function () { return onPopOverOpened && onPopOverOpened(_this.props.popOver); });
+            };
+            PopOverComponent.prototype.closePopOver = function () {
+                var _this = this;
+                clearTimeout(this.timer);
+                if (!this.state.isOpened) {
+                    return;
+                }
+                lastOpenedInstance = null;
+                var onPopOverClosed = this.props.onPopOverClosed;
+                this.setState({
+                    isOpened: false
+                }, function () { return onPopOverClosed && onPopOverClosed(_this.props.popOver); });
+            };
+            PopOverComponent.prototype.closePopOverLater = function () {
+                // 5s 后自动关闭。
+                this.timer = setTimeout(this.closePopOver, 2000);
+            };
+            PopOverComponent.prototype.clearCloseTimer = function () {
+                clearTimeout(this.timer);
+            };
+            PopOverComponent.prototype.buildSchema = function () {
+                var _a = this.props, popOver = _a.popOver, name = _a.name; _a.label; var __ = _a.translate;
+                var schema;
+                if (popOver === true) {
+                    schema = {
+                        type: 'panel',
+                        body: "${".concat(name, "}")
+                    };
+                }
+                else if (popOver &&
+                    (popOver.mode === 'dialog' || popOver.mode === 'drawer')) {
+                    schema = __assign(__assign({ actions: [
+                            {
+                                label: __('Dialog.close'),
+                                type: 'button',
+                                actionType: 'cancel'
+                            }
+                        ] }, popOver), { type: popOver.mode });
+                }
+                else if (typeof popOver === 'string') {
+                    schema = {
+                        type: 'panel',
+                        body: popOver
+                    };
+                }
+                else if (popOver) {
+                    schema = __assign({ type: 'panel' }, popOver);
+                }
+                return schema || 'error';
+            };
+            PopOverComponent.prototype.renderPopOver = function () {
+                var _this = this;
+                var _a = this.props, popOver = _a.popOver, render = _a.render, popOverContainer = _a.popOverContainer, cx = _a.classnames, ns = _a.classPrefix;
+                if (popOver &&
+                    (popOver.mode === 'dialog' ||
+                        popOver.mode === 'drawer')) {
+                    return render('popover-detail', this.buildSchema(), {
+                        show: true,
+                        onClose: this.closePopOver,
+                        onConfirm: this.closePopOver
+                    });
+                }
+                var content = render('popover-detail', this.buildSchema(), {
+                    className: cx(popOver.className)
+                });
+                if (!popOverContainer) {
+                    popOverContainer = function () { return findDOMNode(_this); };
+                }
+                var position = (popOver && popOver.position) || '';
+                var isFixed = /^fixed\-/.test(position);
+                return isFixed ? (React.createElement(RootClose, { disabled: !this.state.isOpened, onRootClose: this.closePopOver }, function (ref) {
+                    return (React.createElement("div", { className: cx("PopOverAble--fixed PopOverAble--".concat(position)), onMouseLeave: (popOver === null || popOver === void 0 ? void 0 : popOver.trigger) === 'hover'
+                            ? _this.closePopOver
+                            : undefined, onMouseEnter: (popOver === null || popOver === void 0 ? void 0 : popOver.trigger) === 'hover'
+                            ? _this.clearCloseTimer
+                            : undefined, ref: ref }, content));
+                })) : (React.createElement(Overlay, { container: popOverContainer, placement: position || config.position || 'center', target: function () { return _this.target; }, onHide: this.closePopOver, rootClose: true, show: true },
+                    React.createElement(PopOver, { classPrefix: ns, className: cx('PopOverAble-popover', popOver.popOverClassName), offset: popOver.offset, onMouseLeave: (popOver === null || popOver === void 0 ? void 0 : popOver.trigger) === 'hover'
+                            ? this.closePopOver
+                            : undefined, onMouseEnter: (popOver === null || popOver === void 0 ? void 0 : popOver.trigger) === 'hover'
+                            ? this.clearCloseTimer
+                            : undefined }, content)));
+            };
+            PopOverComponent.prototype.render = function () {
+                var _a = this.props, popOver = _a.popOver, popOverEnabled = _a.popOverEnabled, popOverEnable = _a.popOverEnable, className = _a.className, noHoc = _a.noHoc, cx = _a.classnames; _a.showIcon;
+                if (!popOver ||
+                    popOverEnabled === false ||
+                    noHoc ||
+                    popOverEnable === false) {
+                    return React.createElement(Component, __assign({}, this.props));
+                }
+                var triggerProps = {};
+                var trigger = popOver === null || popOver === void 0 ? void 0 : popOver.trigger;
+                if (trigger === 'hover') {
+                    triggerProps.onMouseEnter = this.openPopOver;
+                    triggerProps.onMouseLeave = this.closePopOverLater;
+                }
+                else {
+                    triggerProps.onClick = this.openPopOver;
+                }
+                return (React.createElement(Component, __assign({}, this.props, { className: cx("Field--popOverAble", className, {
+                        in: this.state.isOpened
+                    }), ref: config.targetOutter ? this.targetRef : undefined }), (popOver === null || popOver === void 0 ? void 0 : popOver.showIcon) !== false ? (React.createElement(React.Fragment, null,
+                    React.createElement(Component, __assign({}, this.props, { wrapperComponent: '', noHoc: true })),
+                    React.createElement("span", __assign({ key: "popover-btn", className: cx('Field-popOverBtn') }, triggerProps, { ref: config.targetOutter ? undefined : this.targetRef }),
+                        React.createElement(Icon, { icon: "zoom-in", className: "icon" })),
+                    this.state.isOpened ? this.renderPopOver() : null)) : (React.createElement(React.Fragment, null,
+                    React.createElement("div", __assign({ className: cx('Field-popOverWrap') }, triggerProps, { ref: config.targetOutter ? undefined : this.targetRef }),
+                        React.createElement(Component, __assign({}, this.props, { wrapperComponent: '', noHoc: true }))),
+                    this.state.isOpened ? this.renderPopOver() : null))));
+            };
+            PopOverComponent.ComposedComponent = Component;
+            return PopOverComponent;
+        }(React.Component));
+        hoistNonReactStatic(PopOverComponent, Component);
+        return PopOverComponent;
+    };
+};
+
+export { HocPopOver, HocPopOver as default };

package/esm/renderers/Portlet.d.ts

@@ -0,0 +1,125 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { SchemaTpl, SchemaClassName, BaseSchema, SchemaCollection, SchemaIcon } from '../Schema';
+import { ActionSchema } from './Action';
+/**
+ * 栏目容器渲染器。
+ * 文档：https://baidu.gitee.io/amis/docs/components/portlet
+ */
+export interface PortletTabSchema extends Omit<BaseSchema, 'type'> {
+    /**
+     * Tab 标题
+     */
+    title?: string;
+    /**
+     * 内容
+     * @deprecated 用 body 属性
+     */
+    tab?: SchemaCollection;
+    /**
+     * 可以在右侧配置点其他功能按钮，随着tab切换而切换
+     */
+    toolbar?: Array<ActionSchema>;
+    /**
+     * 内容
+     */
+    body?: SchemaCollection;
+    /**
+     * 按钮图标
+     */
+    icon?: SchemaIcon;
+    iconPosition?: 'left' | 'right';
+    /**
+     * 设置以后内容每次都会重新渲染
+     */
+    reload?: boolean;
+    /**
+     * 点开时才加载卡片内容
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 卡片隐藏就销毁卡片节点。
+     */
+    unmountOnExit?: boolean;
+}
+export interface PortletSchema extends Omit<BaseSchema, 'type'> {
+    /**
+     * 指定为 portlet 类型
+     */
+    type: 'portlet';
+    tabs: Array<PortletTabSchema>;
+    /**
+     * 关联已有数据，选项卡直接根据目标数据重复。
+     */
+    source?: string;
+    /**
+     * 类名
+     */
+    tabsClassName?: SchemaClassName;
+    /**
+     * 展示形式
+     */
+    tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical' | 'tiled';
+    /**
+     * 内容类名
+     */
+    contentClassName?: SchemaClassName;
+    /**
+     * 链接外层类名
+     */
+    linksClassName?: SchemaClassName;
+    /**
+     * 卡片是否只有在点开的时候加载？
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 卡片隐藏的时候是否销毁卡片内容
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 可以在右侧配置点其他功能按钮。不会随着tab切换
+     */
+    toolbar?: Array<ActionSchema>;
+    /**
+     * 是否支持溢出滚动
+     */
+    scrollable?: boolean;
+    /**
+     * header和内容是否展示分割线
+     */
+    divider?: boolean;
+    /**
+     * 标题右侧的描述
+     */
+    description?: SchemaTpl;
+    /**
+     * 隐藏头部
+     */
+    hideHeader?: boolean;
+    /**
+     * 自定义样式
+     */
+    style?: string | {
+        [propName: string]: any;
+    };
+}
+export interface PortletProps extends RendererProps, Omit<PortletSchema, 'className' | 'contentClassName'> {
+    activeKey?: number;
+    tabRender?: (tab: PortletTabSchema, props: PortletProps, index: number) => JSX.Element;
+}
+export interface PortletState {
+    activeKey?: number;
+}
+export declare class Portlet extends React.Component<PortletProps, PortletState> {
+    static defaultProps: Partial<PortletProps>;
+    renderTab?: (tab: PortletTabSchema, props: PortletProps, index: number) => JSX.Element;
+    constructor(props: PortletProps);
+    handleSelect(key: number): void;
+    renderToolbarItem(toolbar: Array<ActionSchema>): JSX.Element[];
+    renderToolbar(): JSX.Element | null;
+    renderDesc(): JSX.Element | null;
+    renderTabs(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class PortletRenderer extends Portlet {
+}

package/esm/renderers/Portlet.js

@@ -0,0 +1,152 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import mapValues from 'lodash/mapValues';
+import { Tab, Tabs } from 'amis-ui';
+import { str2AsyncFunction, filter, resolveVariable, createObject, isObject, isVisible, isDisabled, autobind, Renderer } from 'amis-core';
+
+var Portlet = /** @class */ (function (_super) {
+    __extends(Portlet, _super);
+    function Portlet(props) {
+        var _this = _super.call(this, props) || this;
+        var activeKey = props.activeKey || 0;
+        _this.state = {
+            activeKey: activeKey
+        };
+        return _this;
+    }
+    Portlet.prototype.handleSelect = function (key) {
+        var _a = this.props, onSelect = _a.onSelect, tabs = _a.tabs;
+        if (typeof key === 'number' && key < tabs.length) {
+            this.setState({
+                activeKey: key
+            });
+        }
+        if (typeof onSelect === 'string') {
+            var selectFunc = str2AsyncFunction(onSelect, 'key', 'props');
+            selectFunc && selectFunc(key, this.props);
+        }
+        else if (typeof onSelect === 'function') {
+            onSelect(key, this.props);
+        }
+    };
+    Portlet.prototype.renderToolbarItem = function (toolbar) {
+        var render = this.props.render;
+        var actions = [];
+        if (Array.isArray(toolbar)) {
+            toolbar.forEach(function (action, index) {
+                return actions.push(render("toolbar/".concat(index), __assign({ type: 'button', level: 'link', size: 'sm' }, action), {
+                    key: index
+                }));
+            });
+        }
+        return actions;
+    };
+    Portlet.prototype.renderToolbar = function () {
+        var _a = this.props, toolbar = _a.toolbar, cx = _a.classnames, ns = _a.classPrefix, tabs = _a.tabs;
+        var activeKey = this.state.activeKey;
+        var tabToolbar = null;
+        var tabToolbarTpl = null;
+        // tabs里的toolbar
+        var toolbarTpl = toolbar ? (React.createElement("div", { className: cx("".concat(ns, "toolbar")) }, this.renderToolbarItem(toolbar))) : null;
+        // tab里的toolbar
+        if (typeof activeKey !== 'undefined') {
+            tabToolbar = tabs[activeKey].toolbar;
+            tabToolbarTpl = tabToolbar ? (React.createElement("div", { className: cx("".concat(ns, "tab-toolbar")) }, this.renderToolbarItem(tabToolbar))) : null;
+        }
+        return toolbarTpl || tabToolbarTpl ? (React.createElement("div", { className: cx("".concat(ns, "Portlet-toolbar")) },
+            toolbarTpl,
+            tabToolbarTpl)) : null;
+    };
+    Portlet.prototype.renderDesc = function () {
+        var _a = this.props, descTpl = _a.description; _a.render; var cx = _a.classnames, ns = _a.classPrefix, data = _a.data;
+        var desc = filter(descTpl, data);
+        return desc ? (React.createElement("span", { className: cx("".concat(ns, "Portlet-header-desc")) }, desc)) : null;
+    };
+    Portlet.prototype.renderTabs = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, cx = _b.classnames, ns = _b.classPrefix, tabsClassName = _b.tabsClassName, contentClassName = _b.contentClassName, linksClassName = _b.linksClassName, tabRender = _b.tabRender, render = _b.render, data = _b.data, dMode = _b.mode, tabsMode = _b.tabsMode, unmountOnExit = _b.unmountOnExit, source = _b.source, mountOnEnter = _b.mountOnEnter, scrollable = _b.scrollable, __ = _b.translate, addBtnText = _b.addBtnText, divider = _b.divider;
+        var mode = tabsMode || dMode;
+        var arr = resolveVariable(source, data);
+        var tabs = this.props.tabs;
+        if (!tabs) {
+            return null;
+        }
+        tabs = Array.isArray(tabs) ? tabs : [tabs];
+        var children = [];
+        var tabClassname = cx("".concat(ns, "Portlet-tab"), tabsClassName, (_a = {},
+            _a['unactive-select'] = tabs.length <= 1,
+            _a['no-divider'] = !divider,
+            _a));
+        if (Array.isArray(arr)) {
+            arr.forEach(function (value, index) {
+                var ctx = createObject(data, isObject(value) ? __assign({ index: index }, value) : { item: value, index: index });
+                children.push.apply(children, tabs.map(function (tab, tabIndex) {
+                    return isVisible(tab, ctx) ? (React.createElement(Tab, __assign({}, tab, { title: filter(tab.title, ctx), disabled: isDisabled(tab, ctx), key: "".concat(index * 1000 + tabIndex), eventKey: index * 1000 + tabIndex, mountOnEnter: mountOnEnter, unmountOnExit: typeof tab.reload === 'boolean'
+                            ? tab.reload
+                            : typeof tab.unmountOnExit === 'boolean'
+                                ? tab.unmountOnExit
+                                : unmountOnExit }), render("item/".concat(index, "/").concat(tabIndex), (tab === null || tab === void 0 ? void 0 : tab.type) ? tab : tab.tab || tab.body, {
+                        data: ctx
+                    }))) : null;
+                }));
+            });
+        }
+        else {
+            children = tabs.map(function (tab, index) {
+                return isVisible(tab, data) ? (React.createElement(Tab, __assign({}, tab, { title: filter(tab.title, data), disabled: isDisabled(tab, data), key: index, eventKey: index, mountOnEnter: mountOnEnter, unmountOnExit: typeof tab.reload === 'boolean'
+                        ? tab.reload
+                        : typeof tab.unmountOnExit === 'boolean'
+                            ? tab.unmountOnExit
+                            : unmountOnExit }), _this.renderTab
+                    ? _this.renderTab(tab, _this.props, index)
+                    : tabRender
+                        ? tabRender(tab, _this.props, index)
+                        : render("tab/".concat(index), (tab === null || tab === void 0 ? void 0 : tab.type) ? tab : tab.tab || tab.body))) : null;
+            });
+        }
+        return (React.createElement(Tabs, { addBtnText: __(addBtnText || 'add'), classPrefix: ns, classnames: cx, mode: mode, className: tabClassname, contentClassName: contentClassName, linksClassName: linksClassName, activeKey: this.state.activeKey, onSelect: this.handleSelect, toolbar: this.renderToolbar(), additionBtns: this.renderDesc(), scrollable: scrollable }, children));
+    };
+    Portlet.prototype.render = function () {
+        var _a;
+        var _b = this.props, className = _b.className, data = _b.data, cx = _b.classnames, ns = _b.classPrefix, style = _b.style, hideHeader = _b.hideHeader;
+        var portletClassname = cx("".concat(ns, "Portlet"), className, (_a = {},
+            _a['no-header'] = hideHeader,
+            _a));
+        var styleVar = typeof style === 'string'
+            ? resolveVariable(style, data) || {}
+            : mapValues(style, function (s) { return resolveVariable(s, data) || s; });
+        return (React.createElement("div", { className: portletClassname, style: styleVar }, this.renderTabs()));
+    };
+    Portlet.defaultProps = {
+        className: '',
+        mode: 'line',
+        divider: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Portlet.prototype, "handleSelect", null);
+    return Portlet;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(PortletRenderer, _super);
+    function PortletRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PortletRenderer = __decorate([
+        Renderer({
+            type: 'portlet'
+        })
+    ], PortletRenderer);
+    return PortletRenderer;
+})(Portlet));
+
+export { Portlet };

package/esm/renderers/Progress.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaClassName } from '../Schema';
+import type { ColorMapType } from 'amis-ui/lib/components/Progress';
+/**
+ * 进度展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/progress
+ */
+export interface ProgressSchema extends BaseSchema {
+    type: 'progress';
+    /**
+     * 关联字段名
+     */
+    name?: string;
+    /**
+     * 进度值
+     */
+    value: number;
+    /**
+     * 进度条类型
+     */
+    mode: 'line' | 'circle' | 'dashboard';
+    /**
+     * 进度条 CSS 类名
+     */
+    progressClassName?: SchemaClassName;
+    /**
+     * 配置不同的值段，用不同的样式提示用户
+     */
+    map?: ColorMapType;
+    /**
+     * 是否显示值
+     */
+    showLabel?: boolean;
+    /**
+     * 占位符
+     */
+    placeholder?: string;
+    /**
+     * 是否显示背景间隔
+     */
+    stripe?: boolean;
+    /**
+     * 是否显示动画（只有在开启的时候才能看出来）
+     */
+    animate?: boolean;
+    /**
+     * 进度条线的宽度
+     */
+    strokeWidth?: number;
+    /**
+     * 仪表盘进度条缺口角度，可取值 0 ~ 295
+     */
+    gapDegree?: number;
+    /**
+     * 仪表盘进度条缺口位置
+     */
+    gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * 内容的模板函数
+     */
+    valueTpl?: string;
+}
+export interface ProgressProps extends RendererProps, Omit<ProgressSchema, 'type' | 'className'> {
+}
+export declare class ProgressField extends React.Component<ProgressProps, object> {
+    static defaultProps: {
+        placeholder: string;
+        progressClassName: string;
+        progressBarClassName: string;
+        map: string[];
+        valueTpl: string;
+        showLabel: boolean;
+        stripe: boolean;
+        animate: boolean;
+    };
+    format(value: number): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class ProgressFieldRenderer extends ProgressField {
+}

package/esm/renderers/Progress.js

@@ -0,0 +1,61 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { createObject, getPropValue, autobind, Renderer } from 'amis-core';
+import { Progress } from 'amis-ui';
+
+var ProgressField = /** @class */ (function (_super) {
+    __extends(ProgressField, _super);
+    function ProgressField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ProgressField.prototype.format = function (value) {
+        var _a = this.props, valueTpl = _a.valueTpl, render = _a.render, data = _a.data;
+        return render("progress-value", valueTpl || '${value}%', {
+            data: createObject(data, { value: value })
+        });
+    };
+    ProgressField.prototype.render = function () {
+        var _a = this.props, mode = _a.mode, className = _a.className, placeholder = _a.placeholder, progressClassName = _a.progressClassName, map = _a.map, stripe = _a.stripe, animate = _a.animate, showLabel = _a.showLabel, strokeWidth = _a.strokeWidth, gapDegree = _a.gapDegree, gapPosition = _a.gapPosition; _a.classnames;
+        var value = getPropValue(this.props);
+        if (/^\d*\.?\d+$/.test(value)) {
+            value = parseFloat(value);
+        }
+        return (React.createElement(Progress, { value: value, type: mode, map: map, stripe: stripe, animate: animate, showLabel: showLabel, placeholder: placeholder, format: this.format, strokeWidth: strokeWidth, gapDegree: gapDegree, gapPosition: gapPosition, className: className, progressClassName: progressClassName }));
+    };
+    ProgressField.defaultProps = {
+        placeholder: '-',
+        progressClassName: '',
+        progressBarClassName: '',
+        map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
+        valueTpl: '${value}%',
+        showLabel: true,
+        stripe: false,
+        animate: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], ProgressField.prototype, "format", null);
+    return ProgressField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ProgressFieldRenderer, _super);
+    function ProgressFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ProgressFieldRenderer = __decorate([
+        Renderer({
+            type: 'progress'
+        })
+    ], ProgressFieldRenderer);
+    return ProgressFieldRenderer;
+})(ProgressField));
+
+export { ProgressField };

package/esm/renderers/Property.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @file 表格的方式显示只读信息，比如产品详情
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaExpression, SchemaObject, SchemaTpl } from '../Schema';
+export declare type PropertyItemProps = {
+    /**
+     * 属性名
+     */
+    label?: SchemaTpl;
+    /**
+     * 属性值
+     */
+    content?: SchemaTpl;
+    /**
+     * 配置是否显示，如果不显示，后续的节点会补上来
+     */
+    visibleOn?: SchemaExpression;
+    /**
+     * 配置是否显示，如果不显示，后续的节点会补上来
+     */
+    hiddenOn?: SchemaExpression;
+    /**
+     * 跨几列
+     */
+    span?: number;
+};
+export declare type PropertyItem = PropertyItemProps & SchemaObject;
+/**
+ * Property 属性列表
+ * 文档：https://baidu.gitee.io/amis/docs/components/property
+ */
+export interface PropertySchema extends BaseSchema {
+    /**
+     * 指定为 property 展示类型
+     */
+    type: 'property';
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 一共几列
+     */
+    column?: number;
+    /**
+     * 显示模式
+     */
+    mode?: 'table' | 'simple';
+    /**
+     * 每个 property 的设置
+     */
+    items: Array<PropertyItem>;
+    /**
+     * 自定义样式
+     */
+    style?: {
+        [propName: string]: any;
+    };
+    /**
+     * 标题样式
+     */
+    titleStyle?: {
+        [propName: string]: any;
+    };
+    /**
+     * 自定义样式
+     */
+    labelStyle?: {
+        [propName: string]: any;
+    };
+    separator?: string;
+    /**
+     * 自定义样式
+     */
+    contentStyle?: {
+        [propName: string]: any;
+    };
+}
+export interface PropertyProps extends RendererProps, Omit<PropertySchema, 'type' | 'className'> {
+}
+interface PropertyContent {
+    label: any;
+    content: any;
+    span: number;
+}
+export default class Property extends React.Component<PropertyProps, object> {
+    constructor(props: PropertyProps);
+    /**
+     * 算好每行的分布情况，方便后续渲染
+     */
+    prepareRows(): PropertyContent[][];
+    renderRow(rows: PropertyContent[][]): JSX.Element[];
+    render(): JSX.Element;
+}
+export declare class PropertyRenderer extends Property {
+}
+export {};