amis 2.0.0-rc.9 → 2.0.0

package/esm/renderers/Images.js

@@ -0,0 +1,89 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { filter, isPureVariable, resolveVariableAndFilter, getPropValue, autobind, Renderer } from 'amis-core';
+import ThemedImageThumb, { imagePlaceholder } from './Image.js';
+
+var ImagesField = /** @class */ (function (_super) {
+    __extends(ImagesField, _super);
+    function ImagesField() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.list = [];
+        return _this;
+    }
+    ImagesField.prototype.handleEnlarge = function (info) {
+        var _a = this.props, onImageEnlarge = _a.onImageEnlarge, src = _a.src, originalSrc = _a.originalSrc;
+        onImageEnlarge &&
+            onImageEnlarge(__assign(__assign({}, info), { originalSrc: info.originalSrc || info.src, list: this.list.map(function (item) { return ({
+                    src: src
+                        ? filter(src, item, '| raw')
+                        : (item && item.image) || item,
+                    originalSrc: originalSrc
+                        ? filter(originalSrc, item, '| raw')
+                        : (item === null || item === void 0 ? void 0 : item.src) || filter(src, item, '| raw') || (item === null || item === void 0 ? void 0 : item.image) || item,
+                    title: item && (item.enlargeTitle || item.title),
+                    caption: item && (item.enlargeCaption || item.description || item.caption)
+                }); }) }), this.props);
+    };
+    ImagesField.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, className = _a.className, defaultImage = _a.defaultImage, thumbMode = _a.thumbMode, thumbRatio = _a.thumbRatio, data = _a.data; _a.name; var placeholder = _a.placeholder, cx = _a.classnames, source = _a.source, delimiter = _a.delimiter, enlargeAble = _a.enlargeAble, src = _a.src, originalSrc = _a.originalSrc, listClassName = _a.listClassName, options = _a.options;
+        var value;
+        var list;
+        if (typeof source === 'string' && isPureVariable(source)) {
+            list = resolveVariableAndFilter(source, data, '| raw') || undefined;
+        }
+        else if (Array.isArray((value = getPropValue(this.props))) ||
+            typeof value === 'string') {
+            list = value;
+        }
+        else if (Array.isArray(options)) {
+            list = options;
+        }
+        if (typeof list === 'string') {
+            list = list.split(delimiter);
+        }
+        else if (list && !Array.isArray(list)) {
+            list = [list];
+        }
+        this.list = list;
+        return (React.createElement("div", { className: cx('ImagesField', className) }, Array.isArray(list) ? (React.createElement("div", { className: cx('Images', listClassName) }, list.map(function (item, index) { return (React.createElement(ThemedImageThumb, { index: index, className: cx('Images-item'), key: index, src: (src ? filter(src, item, '| raw') : item && item.image) ||
+                item, originalSrc: (originalSrc
+                ? filter(originalSrc, item, '| raw')
+                : item && item.src) || item, title: item && item.title, caption: item && (item.description || item.caption), thumbMode: thumbMode, thumbRatio: thumbRatio, enlargeAble: enlargeAble, onEnlarge: _this.handleEnlarge })); }))) : defaultImage ? (React.createElement("div", { className: cx('Images', listClassName) },
+            React.createElement(ThemedImageThumb, { className: cx('Images-item'), src: defaultImage, thumbMode: thumbMode, thumbRatio: thumbRatio }))) : (placeholder)));
+    };
+    ImagesField.defaultProps = {
+        className: '',
+        delimiter: ',',
+        defaultImage: imagePlaceholder,
+        placehoder: '-',
+        thumbMode: 'contain',
+        thumbRatio: '1:1'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ImagesField.prototype, "handleEnlarge", null);
+    return ImagesField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(ImagesFieldRenderer, _super);
+    function ImagesFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ImagesFieldRenderer = __decorate([
+        Renderer({
+            type: 'images'
+        })
+    ], ImagesFieldRenderer);
+    return ImagesFieldRenderer;
+})(ImagesField));
+
+export { ImagesField };

package/esm/renderers/Json.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { InteractionProps } from 'react-json-view';
+import { BaseSchema } from '../Schema';
+/**
+ * JSON 数据展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/json
+ */
+export interface JsonSchema extends BaseSchema {
+    /**
+     * 指定为Json展示类型
+     */
+    type: 'json' | 'static-json';
+    /**
+     * 默认展开的级别
+     */
+    levelExpand?: number;
+    /**
+     * 支持从数据链取值
+     */
+    source?: string;
+    /**
+     * 是否可修改
+     */
+    mutable?: boolean;
+    /**
+     * 是否显示数据类型
+     */
+    displayDataTypes?: boolean;
+    /**
+     * 是否可复制
+     */
+    enableClipboard?: boolean;
+    /**
+     * 图标风格
+     */
+    iconStyle?: 'square' | 'circle' | 'triangle';
+    /**
+     * 是否显示键的引号
+     */
+    quotesOnKeys?: boolean;
+    /**
+     * 是否为键排序
+     */
+    sortKeys?: boolean;
+    /**
+     * 设置字符串的最大展示长度，超出长度阈值的字符串将被截断，点击value可切换字符串展示方式，默认为false
+     */
+    ellipsisThreshold?: number | false;
+}
+export interface JSONProps extends RendererProps, JsonSchema {
+    levelExpand: number;
+    className?: string;
+    placeholder?: string;
+    jsonTheme: string;
+    hideRoot?: boolean;
+    source?: string;
+}
+export declare class JSONField extends React.Component<JSONProps, object> {
+    static defaultProps: Partial<JSONProps>;
+    emitChange(e: InteractionProps): boolean;
+    shouldExpandNode({ namespace }: {
+        namespace: Array<string | null>;
+    }): boolean;
+    render(): JSX.Element;
+}
+export declare class JSONFieldRenderer extends JSONField {
+}

package/esm/renderers/Json.js

@@ -0,0 +1,98 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { getPropValue, isPureVariable, resolveVariableAndFilter, autobind, Renderer } from 'amis-core';
+import JsonView from 'react-json-view';
+
+var JSONField = /** @class */ (function (_super) {
+    __extends(JSONField, _super);
+    function JSONField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    JSONField.prototype.emitChange = function (e) {
+        var _a = this.props, onChange = _a.onChange, name = _a.name;
+        if (!name || !onChange) {
+            return false;
+        }
+        onChange(e.updated_src, name);
+        return true;
+    };
+    JSONField.prototype.shouldExpandNode = function (_a) {
+        var namespace = _a.namespace;
+        var levelExpand = this.props.levelExpand;
+        if (typeof levelExpand !== 'number') {
+            return false;
+        }
+        return namespace.length > levelExpand;
+    };
+    JSONField.prototype.render = function () {
+        var _a;
+        var _b;
+        var _c = this.props, className = _c.className, jsonTheme = _c.jsonTheme, cx = _c.classnames, placeholder = _c.placeholder, source = _c.source; _c.levelExpand; var mutable = _c.mutable, displayDataTypes = _c.displayDataTypes, enableClipboard = _c.enableClipboard, iconStyle = _c.iconStyle, quotesOnKeys = _c.quotesOnKeys, sortKeys = _c.sortKeys, name = _c.name, ellipsisThreshold = _c.ellipsisThreshold;
+        var value = getPropValue(this.props);
+        var data = value;
+        if (source !== undefined && isPureVariable(source)) {
+            data = resolveVariableAndFilter(source, this.props.data, '| raw');
+        }
+        else if (typeof value === 'string') {
+            // 尝试解析 json
+            try {
+                data = JSON.parse(value);
+            }
+            catch (e) { }
+        }
+        var jsonThemeValue = jsonTheme;
+        if (isPureVariable(jsonTheme)) {
+            jsonThemeValue = resolveVariableAndFilter(jsonTheme, this.props.data, '| raw');
+        }
+        // JsonView 只支持对象，所以不是对象格式需要转成对象格式。
+        if (data && ~['string', 'number'].indexOf(typeof data)) {
+            data = (_a = {},
+                _a[typeof data] = data,
+                _a);
+        }
+        return (React.createElement("div", { className: cx('JsonField', className) }, typeof data === 'undefined' || data === null ? (placeholder) : (React.createElement(JsonView, { name: false, src: data, theme: (_b = jsonThemeValue) !== null && _b !== void 0 ? _b : 'rjv-default', shouldCollapse: this.shouldExpandNode, enableClipboard: enableClipboard, displayDataTypes: displayDataTypes, collapseStringsAfterLength: ellipsisThreshold, iconStyle: iconStyle, quotesOnKeys: quotesOnKeys, sortKeys: sortKeys, onEdit: name && mutable ? this.emitChange : false, onDelete: name && mutable ? this.emitChange : false, onAdd: name && mutable ? this.emitChange : false }))));
+    };
+    JSONField.defaultProps = {
+        placeholder: '-',
+        levelExpand: 1,
+        source: '',
+        displayDataTypes: false,
+        enableClipboard: false,
+        iconStyle: 'square',
+        quotesOnKeys: true,
+        sortKeys: false,
+        ellipsisThreshold: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], JSONField.prototype, "emitChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], JSONField.prototype, "shouldExpandNode", null);
+    return JSONField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(JSONFieldRenderer, _super);
+    function JSONFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    JSONFieldRenderer = __decorate([
+        Renderer({
+            type: 'json'
+        })
+    ], JSONFieldRenderer);
+    return JSONFieldRenderer;
+})(JSONField));
+
+export { JSONField };

package/esm/renderers/Link.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaTpl } from '../Schema';
+import { BadgeObject } from 'amis-ui';
+/**
+ * Link 链接展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/link
+ */
+export interface LinkSchema extends BaseSchema {
+    /**
+     * 指定为 link 链接展示控件
+     */
+    type: 'link';
+    /**
+     * 是否新窗口打开。
+     */
+    blank?: boolean;
+    /**
+     * 链接地址
+     */
+    href?: string;
+    /**
+     * 链接内容，如果不配置将显示链接地址。
+     */
+    body?: SchemaTpl;
+    /**
+     * 角标
+     */
+    badge?: BadgeObject;
+    /**
+     * a标签原生target属性
+     */
+    htmlTarget?: string;
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 右侧图标
+     */
+    rightIcon?: string;
+}
+export interface LinkProps extends RendererProps, Omit<LinkSchema, 'type' | 'className'> {
+}
+export declare class LinkCmpt extends React.Component<LinkProps, object> {
+    static defaultProps: {
+        blank: boolean;
+        disabled: boolean;
+        htmlTarget: string;
+    };
+    handleClick(e: React.MouseEvent<any>): void;
+    getHref(): void;
+    render(): JSX.Element;
+}
+export declare class LinkFieldRenderer extends LinkCmpt {
+}

package/esm/renderers/Link.js

@@ -0,0 +1,61 @@
+/**
+ * amis v2.0.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import { filter, getPropValue, autobind, Renderer } from 'amis-core';
+import { Link, withBadge } from 'amis-ui';
+
+var LinkCmpt = /** @class */ (function (_super) {
+    __extends(LinkCmpt, _super);
+    function LinkCmpt() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LinkCmpt.prototype.handleClick = function (e) {
+        var _a = this.props, env = _a.env, href = _a.href, blank = _a.blank, body = _a.body;
+        env === null || env === void 0 ? void 0 : env.tracker({
+            eventType: 'url',
+            // 需要和 action 里命名一致方便后续分析
+            eventData: { url: href, blank: blank, label: body }
+        }, this.props);
+    };
+    LinkCmpt.prototype.getHref = function () { };
+    LinkCmpt.prototype.render = function () {
+        var _a = this.props, className = _a.className, body = _a.body, href = _a.href; _a.classnames; var blank = _a.blank, disabled = _a.disabled, htmlTarget = _a.htmlTarget, data = _a.data, render = _a.render, __ = _a.translate, title = _a.title, icon = _a.icon, rightIcon = _a.rightIcon;
+        var value = (typeof href === 'string' && href
+            ? filter(href, data, '| raw')
+            : undefined) || getPropValue(this.props);
+        return (React.createElement(Link, { className: className, href: value, disabled: disabled, title: title, htmlTarget: htmlTarget || (blank ? '_blank' : '_self'), icon: icon, rightIcon: rightIcon, onClick: this.handleClick }, body ? render('body', body) : value || __('link')));
+    };
+    LinkCmpt.defaultProps = {
+        blank: true,
+        disabled: false,
+        htmlTarget: ''
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], LinkCmpt.prototype, "handleClick", null);
+    return LinkCmpt;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(LinkFieldRenderer, _super);
+    function LinkFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LinkFieldRenderer = __decorate([
+        Renderer({
+            type: 'link'
+        })
+        // @ts-ignore 类型没搞定
+        ,
+        withBadge
+    ], LinkFieldRenderer);
+    return LinkFieldRenderer;
+})(LinkCmpt));
+
+export { LinkCmpt };

package/esm/renderers/List.d.ts

@@ -0,0 +1,260 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { SchemaNode, ActionObject } from 'amis-core';
+import { IListStore } from 'amis-core';
+import { SchemaQuickEdit } from './QuickEdit';
+import { SchemaPopOver } from './PopOver';
+import Sortable from 'sortablejs';
+import { TableCell } from './Table';
+import { SchemaCopyable } from './Copyable';
+import { BaseSchema, SchemaClassName, SchemaCollection, SchemaExpression, SchemaObject, SchemaTokenizeableString, SchemaTpl, SchemaUrlPath } from '../Schema';
+import { ActionSchema } from './Action';
+import { SchemaRemark } from './Remark';
+import type { IItem } from 'amis-core/lib/store/list';
+/**
+ * 不指定类型默认就是文本
+ */
+export declare type ListBodyFieldObject = {
+    /**
+     * 列标题
+     */
+    label?: string;
+    /**
+     * label 类名
+     */
+    labelClassName?: SchemaClassName;
+    /**
+     * 绑定字段名
+     */
+    name?: string;
+    /**
+     * 配置查看详情功能
+     */
+    popOver?: SchemaPopOver;
+    /**
+     * 配置快速编辑功能
+     */
+    quickEdit?: SchemaQuickEdit;
+    /**
+     * 配置点击复制功能
+     */
+    copyable?: SchemaCopyable;
+};
+export declare type ListBodyField = SchemaObject & ListBodyFieldObject;
+export interface ListItemSchema extends Omit<BaseSchema, 'type'> {
+    actions?: Array<ActionSchema>;
+    /**
+     * 操作位置，默认在右侧，可以设置成左侧。
+     */
+    actionsPosition?: 'left' | 'right';
+    /**
+     * 图片地址
+     */
+    avatar?: SchemaUrlPath;
+    /**
+     * 内容区域
+     */
+    body?: Array<ListBodyField | ListBodyFieldObject>;
+    /**
+     * 描述
+     */
+    desc?: SchemaTpl;
+    /**
+     * tooltip 说明
+     */
+    remark?: SchemaRemark;
+    /**
+     * 标题
+     */
+    title?: SchemaTpl;
+    /**
+     * 副标题
+     */
+    subTitle?: SchemaTpl;
+}
+/**
+ * List 列表展示控件。
+ * 文档：https://baidu.gitee.io/amis/docs/components/card
+ */
+export interface ListSchema extends BaseSchema {
+    /**
+     * 指定为 List 列表展示控件。
+     */
+    type: 'list' | 'static-list';
+    /**
+     * 标题
+     */
+    title?: SchemaTpl;
+    /**
+     * 底部区域
+     */
+    footer?: SchemaCollection;
+    /**
+     * 底部区域类名
+     */
+    footerClassName?: SchemaClassName;
+    /**
+     * 顶部区域
+     */
+    header?: SchemaCollection;
+    /**
+     * 顶部区域类名
+     */
+    headerClassName?: SchemaClassName;
+    /**
+     * 单条数据展示内容配置
+     */
+    listItem?: ListItemSchema;
+    /**
+     * 数据源: 绑定当前环境变量
+     *
+     * @default ${items}
+     */
+    source?: SchemaTokenizeableString;
+    /**
+     * 是否显示底部
+     */
+    showFooter?: boolean;
+    /**
+     * 是否显示头部
+     */
+    showHeader?: boolean;
+    /**
+     * 无数据提示
+     *
+     * @default 暂无数据
+     */
+    placeholder?: SchemaTpl;
+    /**
+     * 是否隐藏勾选框
+     */
+    hideCheckToggler?: boolean;
+    /**
+     * 是否固顶
+     */
+    affixHeader?: boolean;
+    /**
+     * 配置某项是否可以点选
+     */
+    itemCheckableOn?: SchemaExpression;
+    /**
+     * 配置某项是否可拖拽排序，前提是要开启拖拽功能
+     */
+    itemDraggableOn?: SchemaExpression;
+    /**
+     * 点击卡片的时候是否勾选卡片。
+     */
+    checkOnItemClick?: boolean;
+    /**
+     * 可以用来作为值的字段
+     */
+    valueField?: string;
+    /**
+     * 大小
+     */
+    size?: 'sm' | 'base';
+    /**
+     * 点击列表项的行为
+     */
+    itemAction?: ActionSchema;
+}
+export interface Column {
+    type: string;
+    [propName: string]: any;
+}
+export interface ListProps extends RendererProps, Omit<ListSchema, 'type' | 'className'> {
+    store: IListStore;
+    selectable?: boolean;
+    selected?: Array<any>;
+    draggable?: boolean;
+    onSelect: (selectedItems: Array<object>, unSelectedItems: Array<object>) => void;
+    onSave?: (items: Array<object> | object, diff: Array<object> | object, rowIndexes: Array<number> | number, unModifiedItems?: Array<object>, rowOrigins?: Array<object> | object, resetOnFailed?: boolean) => void;
+    onSaveOrder?: (moved: Array<object>, items: Array<object>) => void;
+    onQuery: (values: object) => void;
+}
+export default class List extends React.Component<ListProps, object> {
+    static propsList: Array<keyof ListProps>;
+    static defaultProps: Partial<ListProps>;
+    dragTip?: HTMLElement;
+    sortable?: Sortable;
+    parentNode?: any;
+    body?: any;
+    renderedToolbars: Array<string>;
+    constructor(props: ListProps);
+    static syncItems(store: IListStore, props: ListProps, prevProps?: ListProps): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ListProps): void;
+    componentWillUnmount(): void;
+    bodyRef(ref: HTMLDivElement): void;
+    affixDetect(): void;
+    getPopOverContainer(): Element | Text | null;
+    handleAction(e: React.UIEvent<any>, action: ActionObject, ctx: object): void;
+    handleCheck(item: IItem): void;
+    handleCheckAll(): void;
+    syncSelected(): void;
+    handleQuickChange(item: IItem, values: object, saveImmediately?: boolean | any, savePristine?: boolean, resetOnFailed?: boolean): void;
+    handleSave(): void;
+    handleSaveOrder(): void;
+    reset(): void;
+    bulkUpdate(value: object, items: Array<object>): void;
+    getSelected(): any[];
+    dragTipRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    renderActions(region: string): JSX.Element | null;
+    renderHeading(): JSX.Element | null;
+    renderHeader(): JSX.Element | JSX.Element[] | null;
+    renderFooter(): JSX.Element | JSX.Element[] | null;
+    renderCheckAll(): JSX.Element | null;
+    renderDragToggler(): JSX.Element | null;
+    renderToolbar(toolbar: SchemaNode, index: number): JSX.Element | null | undefined;
+    renderListItem(index: number, template: ListItemSchema | undefined, item: IItem, itemClassName: string): JSX.Element;
+    render(): JSX.Element;
+}
+export declare class ListRenderer extends List {
+    dragging: boolean;
+    selectable: boolean;
+    selected: boolean;
+    title?: string;
+    subTitle?: string;
+    desc?: string;
+    avatar?: string;
+    avatarClassName?: string;
+    body?: SchemaNode;
+    actions?: Array<ActionObject>;
+    onCheck: (item: IItem) => void;
+}
+export interface ListItemProps extends RendererProps, Omit<ListItemSchema, 'type' | 'className'> {
+    hideCheckToggler?: boolean;
+    item: IItem;
+    itemIndex?: number;
+    checkable?: boolean;
+    checkOnItemClick?: boolean;
+    itemAction?: ActionSchema;
+}
+export declare class ListItem extends React.Component<ListItemProps> {
+    static defaultProps: Partial<ListItemProps>;
+    static propsList: Array<string>;
+    constructor(props: ListItemProps);
+    handleClick(e: React.MouseEvent<HTMLDivElement>): void;
+    handleCheck(): void;
+    handleAction(e: React.UIEvent<any>, action: ActionObject, ctx: object): void;
+    handleQuickChange(values: object, saveImmediately?: boolean, savePristine?: boolean, resetOnFailed?: boolean): void;
+    renderLeft(): JSX.Element | null;
+    renderRight(): JSX.Element | null;
+    renderChild(node: SchemaNode, region?: string, key?: any): React.ReactNode;
+    itemRender(field: any, index: number, props: any): JSX.Element | null;
+    renderFeild(region: string, field: any, key: any, props: any): JSX.Element | null;
+    renderBody(): React.ReactNode;
+    render(): JSX.Element;
+}
+export declare class ListItemRenderer extends ListItem {
+    static propsList: string[];
+}
+export declare class ListItemFieldRenderer extends TableCell {
+    static defaultProps: {
+        wrapperComponent: string;
+    };
+    static propsList: string[];
+    render(): JSX.Element;
+}