amis 2.0.0-rc.14 → 2.0.0-rc.15

package/esm/renderers/TableView.d.ts

@@ -0,0 +1,136 @@
+/**
+ * @file 用于表格类型的展现效果，界面可定制化能力更强
+ */
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaObject } from '../Schema';
+export declare type TdObject = {
+    /**
+     * 单元格背景色
+     */
+    background?: string;
+    /**
+     * 单元格文字颜色
+     */
+    color?: string;
+    /**
+     * 单元格文字是否加粗
+     */
+    bold?: boolean;
+    /**
+     * 单元格的内边距
+     */
+    padding?: number;
+    /**
+     * 单元格宽度
+     */
+    width?: number;
+    /**
+     * 单元格内的组件
+     */
+    body?: SchemaObject;
+    /**
+     * 水平对齐
+     */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /**
+     * 垂直对齐
+     */
+    valign?: 'top' | 'middle' | 'bottom' | 'baseline';
+    /**
+     * 跨几行
+     */
+    colspan?: number;
+    /**
+     * 跨几列
+     */
+    rowspan?: number;
+    /**
+     * 自定义样式
+     */
+    style?: object;
+};
+/**
+ * 行设置
+ */
+export declare type TrObject = {
+    /**
+     * 行背景色
+     */
+    background?: string;
+    /**
+     * 行高度
+     */
+    height?: number;
+    /**
+     * 单元格配置
+     */
+    tds: TdObject[];
+    style?: object;
+};
+/**
+ * 列设置
+ */
+export declare type ColObject = {
+    span?: number;
+    style?: Object;
+};
+/**
+ * 表格展现渲染器
+ * 文档：https://baidu.gitee.io/amis/docs/components/table-view
+ */
+export interface TableViewSchema extends BaseSchema {
+    /**
+     * 指定为 table-view 展示类型
+     */
+    type: 'table-view';
+    /**
+     * table 容器宽度，默认是 auto
+     */
+    width?: number | string;
+    /**
+     *  默认单元格内边距
+     */
+    padding?: number | string;
+    /**
+     * 是否显示边框
+     */
+    border?: boolean;
+    /**
+     * 边框颜色
+     */
+    borderColor?: string;
+    /**
+     * 标题设置
+     */
+    caption?: string;
+    /**
+     * 标题位置
+     */
+    captionSide?: 'top' | 'bottom';
+    /**
+     * 行设置
+     */
+    trs: TrObject[];
+    /**
+     * 列设置
+     */
+    cols: ColObject[];
+}
+export interface TableViewProps extends RendererProps, Omit<TableViewSchema, 'type' | 'className'> {
+    itemRender?: (item: any, key: number, length: number, props: any) => JSX.Element;
+}
+export default class TableView extends React.Component<TableViewProps, object> {
+    static defaultProps: Partial<TableViewProps>;
+    constructor(props: TableViewProps);
+    renderTd(td: TdObject, colIndex: number, rowIndex: number): JSX.Element;
+    renderTdBody(body?: SchemaObject): JSX.Element;
+    renderTds(tds: TdObject[], rowIndex: number): JSX.Element[];
+    renderTr(tr: TrObject, rowIndex: number): JSX.Element;
+    renderTrs(trs: TrObject[]): JSX.Element[];
+    renderCols(): JSX.Element | null;
+    renderCaption(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare class TableViewRenderer extends TableView {
+}

package/esm/renderers/TableView.js

@@ -0,0 +1,95 @@
+/**
+ * amis v2.0.0-rc.15
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer } from 'amis-core';
+
+/**
+ * @file 用于表格类型的展现效果，界面可定制化能力更强
+ */
+var defaultPadding = 'var(--TableCell-paddingY) var(--TableCell-paddingX)';
+var TableView = /** @class */ (function (_super) {
+    __extends(TableView, _super);
+    function TableView(props) {
+        return _super.call(this, props) || this;
+    }
+    TableView.prototype.renderTd = function (td, colIndex, rowIndex) {
+        var _a = this.props, border = _a.border, borderColor = _a.borderColor; _a.render; var style = _a.style, padding = _a.padding;
+        var key = "td-".concat(colIndex);
+        var styleBorder;
+        if (border) {
+            styleBorder = "1px solid ".concat(borderColor);
+        }
+        return (React.createElement("td", { style: __assign({ border: styleBorder, color: td.color, fontWeight: td.bold ? 'bold' : 'normal', background: td.background, padding: td.padding || padding, width: td.width || 'auto', textAlign: td.align || 'left', verticalAlign: td.valign || 'center' }, style), align: td.align, valign: td.valign, rowSpan: td.rowspan, colSpan: td.colspan, key: key }, this.renderTdBody(td.body)));
+    };
+    TableView.prototype.renderTdBody = function (body) {
+        var render = this.props.render;
+        return render('td', body || '');
+    };
+    TableView.prototype.renderTds = function (tds, rowIndex) {
+        var _this = this;
+        return tds.map(function (td, colIndex) { return _this.renderTd(td, colIndex, rowIndex); });
+    };
+    TableView.prototype.renderTr = function (tr, rowIndex) {
+        var key = "tr-".concat(rowIndex);
+        return (React.createElement("tr", { style: __assign({ height: tr.height, background: tr.background }, tr.style), key: key }, this.renderTds(tr.tds || [], rowIndex)));
+    };
+    TableView.prototype.renderTrs = function (trs) {
+        var _this = this;
+        var tr = trs.map(function (tr, rowIndex) { return _this.renderTr(tr, rowIndex); });
+        return tr;
+    };
+    TableView.prototype.renderCols = function () {
+        var cols = this.props.cols;
+        if (cols) {
+            var colsElement = cols.map(function (col) {
+                return React.createElement("col", { span: col.span, style: col.style });
+            });
+            return React.createElement("colgroup", null, colsElement);
+        }
+        return null;
+    };
+    TableView.prototype.renderCaption = function () {
+        if (this.props.caption) {
+            return (React.createElement("caption", { style: {
+                    captionSide: this.props.captionSide === 'bottom' ? 'bottom' : 'top'
+                } }, this.props.caption));
+        }
+        return null;
+    };
+    TableView.prototype.render = function () {
+        var _a = this.props, width = _a.width, border = _a.border, borderColor = _a.borderColor, trs = _a.trs, cx = _a.classnames, className = _a.className;
+        var styleBorder;
+        if (border) {
+            styleBorder = "1px solid ".concat(borderColor);
+        }
+        return (React.createElement("table", { className: cx('TableView', className), style: { width: width, border: styleBorder, borderCollapse: 'collapse' } },
+            this.renderCaption(),
+            this.renderCols(),
+            React.createElement("tbody", null, this.renderTrs(trs))));
+    };
+    TableView.defaultProps = {
+        padding: defaultPadding,
+        width: '100%',
+        border: true,
+        borderColor: 'var(--borderColor)'
+    };
+    return TableView;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(TableViewRenderer, _super);
+    function TableViewRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TableViewRenderer = __decorate([
+        Renderer({
+            type: 'table-view'
+        })
+    ], TableViewRenderer);
+    return TableViewRenderer;
+})(TableView));
+
+export { TableView as default };

package/esm/renderers/Tabs.d.ts

@@ -0,0 +1,204 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { ActionObject } from 'amis-core';
+import { BaseSchema, SchemaClassName, SchemaCollection, SchemaIcon, SchemaExpression } from '../Schema';
+import { ActionSchema } from './Action';
+import { FormHorizontal } from 'amis-core';
+import { IScopedContext } from 'amis-core';
+import type { TabsMode } from 'amis-ui/lib/components/Tabs';
+export interface TabSchema extends Omit<BaseSchema, 'type'> {
+    /**
+     * Tab 标题
+     */
+    title?: string;
+    /**
+     * 内容
+     * @deprecated 用 body 属性
+     */
+    tab?: SchemaCollection;
+    /**
+     * 内容
+     */
+    body?: SchemaCollection;
+    /**
+     * 徽标
+     */
+    badge?: number;
+    /**
+     * 设置以后将跟url的hash对应
+     */
+    hash?: string;
+    /**
+     * 按钮图标
+     */
+    icon?: SchemaIcon;
+    iconPosition?: 'left' | 'right';
+    /**
+     * 设置以后内容每次都会重新渲染
+     */
+    reload?: boolean;
+    /**
+     * 点开时才加载卡片内容
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 卡片隐藏就销毁卡片节点。
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    mode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    horizontal?: FormHorizontal;
+    /**
+     * 是否可关闭，优先级高于 tabs 的 closable
+     */
+    closable?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+}
+/**
+ * 选项卡控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/tabs
+ */
+export interface TabsSchema extends BaseSchema {
+    type: 'tabs';
+    /**
+     * 选项卡成员。当配置了 source 时，选项卡成员，将会根据目标数据进行重复。
+     */
+    tabs: Array<TabSchema>;
+    /**
+     * 关联已有数据，选项卡直接根据目标数据重复。
+     */
+    source?: string;
+    /**
+     * 类名
+     */
+    tabsClassName?: SchemaClassName;
+    /**
+     * 展示形式
+     */
+    tabsMode?: TabsMode;
+    /**
+     * 内容类名
+     */
+    contentClassName?: SchemaClassName;
+    /**
+     * 链接外层类名
+     */
+    linksClassName?: SchemaClassName;
+    /**
+     * 卡片是否只有在点开的时候加载？
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 卡片隐藏的时候是否销毁卡片内容
+     */
+    unmountOnExit?: boolean;
+    /**
+     * 可以在右侧配置点其他功能按钮。
+     */
+    toolbar?: ActionSchema;
+    /**
+     * 配置子表单项默认的展示方式。
+     */
+    subFormMode?: 'normal' | 'inline' | 'horizontal';
+    /**
+     * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。
+     */
+    subFormHorizontal?: FormHorizontal;
+    /**
+     * 是否支持新增
+     */
+    addable?: boolean;
+    /**
+     * 是否支持删除
+     */
+    closable?: boolean;
+    /**
+     * 是否支持拖拽
+     */
+    draggable?: boolean;
+    /**
+     * 是否显示提示
+     */
+    showTip?: boolean;
+    /**
+     * tooltip 提示的类名
+     */
+    showTipClassName?: string;
+    /**
+     * 是否可编辑标签名
+     */
+    editable?: boolean;
+    /**
+     * 是否导航支持内容溢出滚动。属性废弃，为了兼容暂且保留
+     */
+    scrollable?: boolean;
+    /**
+     * 编辑器模式，侧边的位置
+     */
+    sidePosition?: 'left' | 'right';
+    /**
+     * 自定义增加按钮文案
+     */
+    addBtnText?: string;
+    /**
+     * 默认激活的选项卡，hash值或索引值，支持使用表达式
+     */
+    activeKey?: SchemaExpression;
+}
+export interface TabsProps extends RendererProps, Omit<TabsSchema, 'className' | 'contentClassName' | 'activeKey'> {
+    activeKey?: string | number;
+    location?: any;
+    tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
+}
+interface TabSource extends TabSchema {
+    ctx?: any;
+}
+export interface TabsState {
+    activeKey: any;
+    prevKey: any;
+    localTabs: Array<TabSource>;
+    isFromSource: boolean;
+}
+export declare type TabsRendererEvent = 'change';
+export declare type TabsRendererAction = 'changeActiveKey';
+export default class Tabs extends React.Component<TabsProps, TabsState> {
+    static defaultProps: Partial<TabsProps>;
+    renderTab?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
+    activeKey: any;
+    newTabDefaultId: number;
+    constructor(props: TabsProps);
+    initTabArray(tabs: Array<TabSource>, source?: string, data?: any): [Array<TabSource>, boolean];
+    componentDidMount(): void;
+    componentDidUpdate(preProps: TabsProps, prevState: any): void;
+    resolveTabByKey(key: any): TabSource | undefined;
+    resolveKeyByValue(value: any): string | number | undefined;
+    autoJumpToNeighbour(key: any): void;
+    handleAdd(): void;
+    handleClose(index: number, key: string | number): void;
+    handleEdit(index: number, text: string): void;
+    handleDragChange(e: any): Promise<void>;
+    handleSelect(key: any): Promise<void>;
+    /**
+     * 动作处理
+     */
+    doAction(action: ActionObject, args: any): void;
+    switchTo(index: number): void;
+    currentIndex(): number;
+    renderToolbar(): JSX.Element | null;
+    renderTabs(): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class TabsRenderer extends Tabs {
+    static contextType: React.Context<IScopedContext>;
+    constructor(props: TabsProps, context: IScopedContext);
+    componentWillUnmount(): void;
+}
+export {};