amis 2.3.2-beta.1 → 2.4.0

package/lib/renderers/CRUD.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -248,7 +248,7 @@ var CRUD = /** @class */ (function (_super) {
         })
             .filter(function (item) { return item; })
             .join(',');
-        var ctx = amisCore.createObject(store.mergedData, tslib.__assign(tslib.__assign({}, selectedItems[0]), { rows: selectedItems, items: selectedItems, selectedItems: selectedItems, unSelectedItems: unSelectedItems, ids: ids }));
+        var ctx = amisCore.createObject(store.mergedData, tslib.__assign(tslib.__assign({}, selectedItems[0]), { currentPageData: store.mergedData.items.concat(), rows: selectedItems, items: selectedItems, selectedItems: selectedItems, unSelectedItems: unSelectedItems, ids: ids }));
         var fn = function () {
             if (action.actionType === 'dialog') {
                 return _this.handleAction(e, tslib.__assign(tslib.__assign({}, action), { __from: 'bulkAction' }), ctx);
@@ -732,7 +732,7 @@ var CRUD = /** @class */ (function (_super) {
         }
         store.setSelectedItems(newItems);
         store.setUnSelectedItems(newUnSelectedItems);
-        onSelect && onSelect(newItems);
+        onSelect && onSelect(newItems, newUnSelectedItems);
     };
     CRUD.prototype.handleChildPopOverOpen = function (popOver) {
         if (this.props.interval &&
@@ -751,25 +751,26 @@ var CRUD = /** @class */ (function (_super) {
             }
         }
     };
-    CRUD.prototype.handleQuery = function (values, forceReload, replace) {
+    CRUD.prototype.handleQuery = function (values, forceReload, replace, resetPage) {
         var _a;
         if (forceReload === void 0) { forceReload = false; }
         var _b = this.props, store = _b.store, syncLocation = _b.syncLocation, env = _b.env, pageField = _b.pageField, perPageField = _b.perPageField;
-        store.updateQuery(tslib.__assign(tslib.__assign({}, values), (_a = {}, _a[pageField || 'page'] = 1, _a)), syncLocation && env && env.updateLocation
+        store.updateQuery(resetPage
+            ? tslib.__assign((_a = {}, _a[pageField || 'page'] = 1, _a), values) : values, syncLocation && env && env.updateLocation
             ? env.updateLocation
             : undefined, pageField, perPageField, replace);
         this.search(undefined, undefined, undefined, forceReload);
     };
-    CRUD.prototype.reload = function (subpath, query, replace) {
+    CRUD.prototype.reload = function (subpath, query, replace, resetPage) {
         if (query) {
-            return this.receive(query, undefined, replace);
+            return this.receive(query, undefined, replace, resetPage);
         }
         else {
             this.search(undefined, undefined, true, true);
         }
     };
-    CRUD.prototype.receive = function (values, subPath, replace) {
-        this.handleQuery(values, true, replace);
+    CRUD.prototype.receive = function (values, subPath, replace, resetPage) {
+        this.handleQuery(values, true, replace, resetPage);
     };
     CRUD.prototype.reloadTarget = function (target, data) {
         // implement this.
@@ -830,6 +831,7 @@ var CRUD = /** @class */ (function (_super) {
         var bulkBtns = [];
         var itemBtns = [];
         var ctx = amisCore.createObject(store.mergedData, {
+            currentPageData: store.mergedData.items.concat(),
             selectedItems: selectedItems.concat(),
             unSelectedItems: unSelectedItems.concat()
         });
@@ -942,13 +944,13 @@ var CRUD = /** @class */ (function (_super) {
             __('CRUD.filter')));
     };
     CRUD.prototype.renderExportCSV = function (toolbar) {
-        var _a = this.props, store = _a.store, ns = _a.classPrefix; _a.classnames; var __ = _a.translate, loadDataOnce = _a.loadDataOnce, data = _a.data;
+        var _a = this.props, store = _a.store, ns = _a.classPrefix, __ = _a.translate, loadDataOnce = _a.loadDataOnce;
         var api = toolbar.api;
         return (React__default["default"].createElement(amisUi.Button, { classPrefix: ns, onClick: function () {
                 return store.exportAsCSV({
                     loadDataOnce: loadDataOnce,
                     api: api,
-                    data: data
+                    data: store.filterData /* 因为filter区域可能设置了过滤字段值，所以query信息也要写入数据域 */
                 });
             } }, toolbar.label || __('CRUD.exportCSV')));
     };
@@ -1253,19 +1255,20 @@ var CRUD = /** @class */ (function (_super) {
         var scoped = this.context;
         scoped.unRegisterComponent(this);
     };
-    CRUDRenderer.prototype.reload = function (subpath, query, ctx, silent, replace) {
+    CRUDRenderer.prototype.reload = function (subpath, query, ctx, silent, replace, args) {
+        var _a;
         var scoped = this.context;
         if (subpath) {
             return scoped.reload(query ? "".concat(subpath, "?").concat(amisCore.qsstringify(query)) : subpath, ctx);
         }
-        return _super.prototype.reload.call(this, subpath, query, replace);
+        return _super.prototype.reload.call(this, subpath, query, replace, (_a = args === null || args === void 0 ? void 0 : args.resetPage) !== null && _a !== void 0 ? _a : true);
     };
-    CRUDRenderer.prototype.receive = function (values, subPath, replace) {
+    CRUDRenderer.prototype.receive = function (values, subPath, replace, resetPage) {
         var scoped = this.context;
         if (subPath) {
             return scoped.send(subPath, values);
         }
-        return _super.prototype.receive.call(this, values, undefined, replace);
+        return _super.prototype.receive.call(this, values, undefined, replace, resetPage);
     };
     CRUDRenderer.prototype.reloadTarget = function (target, data) {
         var scoped = this.context;

package/lib/renderers/CRUD2.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Calendar.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Card.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Card2.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Cards.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Carousel.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Chart.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Code.d.ts

@@ -4,6 +4,13 @@
 import React from 'react';
 import { BaseSchema } from '../Schema';
 import { RendererProps } from 'amis-core';
+import type { editor as EditorNamespace } from 'monaco-editor';
+export declare type MonacoEditor = typeof EditorNamespace;
+export declare type CodeBuiltinTheme = EditorNamespace.BuiltinTheme;
+export declare type IMonaco = {
+    editor: MonacoEditor;
+    [propName: string]: any;
+};
 export interface Token {
     /**
      * token 的正则
@@ -39,6 +46,10 @@ export interface CustomLang {
      * token
      */
     tokens: Token[];
+    /**
+     * 编辑器颜色相关配置，不传使用内置默认值
+     */
+    colors?: EditorNamespace.IColors;
 }
 /**
  * 代码高亮组件
@@ -50,7 +61,7 @@ export interface CodeSchema extends BaseSchema {
      * 语言类型
      */
     language?: 'bat' | 'c' | 'coffeescript' | 'cpp' | 'csharp' | 'css' | 'dockerfile' | 'fsharp' | 'go' | 'handlebars' | 'html' | 'ini' | 'java' | 'javascript' | 'json' | 'less' | 'lua' | 'markdown' | 'msdax' | 'objective-c' | 'php' | 'plaintext' | 'postiats' | 'powershell' | 'pug' | 'python' | 'r' | 'razor' | 'ruby' | 'sb' | 'scss' | 'shell' | 'sol' | 'sql' | 'swift' | 'typescript' | 'vb' | 'xml' | 'yaml' | string;
-    editorTheme?: string;
+    editorTheme?: CodeBuiltinTheme;
     /**
      * tab 大小
      */
@@ -63,21 +74,30 @@ export interface CodeSchema extends BaseSchema {
      * 自定义语言
      */
     customLang?: CustomLang;
+    /**
+     * 使用的标签，默认多行使用pre，单行使用code
+     */
+    wrapperComponent?: string;
 }
-export interface CodeProps extends RendererProps, Omit<CodeSchema, 'type' | 'className'> {
+export interface CodeProps extends RendererProps, Omit<CodeSchema, 'type' | 'className' | 'wrapperComponent'> {
+    wrapperComponent?: any;
 }
 export default class Code extends React.Component<CodeProps> {
+    static propsList: string[];
     static defaultProps: Partial<CodeProps>;
-    monaco: any;
+    monaco: IMonaco;
     toDispose: Array<Function>;
     codeRef: React.RefObject<HTMLElement>;
     customLang: CustomLang;
     sourceCode: string;
     constructor(props: CodeProps);
+    shouldComponentUpdate(nextProps: CodeProps): boolean;
     componentDidMount(): void;
-    componentDidUpdate(preProps: CodeProps): void;
-    handleMonaco(monaco: any): void;
-    registTheme(): string | null;
+    componentDidUpdate(preProps: CodeProps): Promise<void>;
+    handleMonaco(monaco: any): Promise<void>;
+    resolveLanguage(props?: CodeProps): string;
+    /** 注册并返回当前主题名称，如果未自定义主题，则范围editorTheme值，默认为'vs' */
+    registerAndGetTheme(): string;
     render(): JSX.Element;
 }
 export declare class CodeRenderer extends Code {

package/lib/renderers/Code.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -9,13 +9,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var isEqual = require('lodash/isEqual');
+var isPlainObject = require('lodash/isPlainObject');
 var amisCore = require('amis-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 
 var Code = /** @class */ (function (_super) {
     tslib.__extends(Code, _super);
@@ -25,58 +25,113 @@ var Code = /** @class */ (function (_super) {
         _this.codeRef = React__default["default"].createRef();
         return _this;
     }
+    Code.prototype.shouldComponentUpdate = function (nextProps) {
+        return (amisCore.anyChanged(Code.propsList, this.props, nextProps) ||
+            this.resolveLanguage(this.props) !== this.resolveLanguage(nextProps) ||
+            amisCore.getPropValue(this.props) !== amisCore.getPropValue(nextProps));
+    };
     Code.prototype.componentDidMount = function () {
         var _this = this;
         Promise.resolve().then(function() {return new Promise(function(fullfill) {require(['monaco-editor'], function(mod) {fullfill(tslib.__importStar(mod))})})}).then(function (monaco) { return _this.handleMonaco(monaco); });
     };
     Code.prototype.componentDidUpdate = function (preProps) {
-        var _this = this;
-        var props = this.props;
-        var sourceCode = amisCore.getPropValue(this.props);
-        var preSourceCode = amisCore.getPropValue(this.props);
-        if (sourceCode !== preSourceCode ||
-            (props.customLang && !isEqual__default["default"](props.customLang, preProps.customLang))) {
-            var dom_1 = this.codeRef.current;
-            dom_1.innerHTML = sourceCode;
-            var theme_1 = this.registTheme() || this.props.editorTheme || 'vs';
-            setTimeout(function () {
-                _this.monaco.editor.colorizeElement(dom_1, {
-                    tabSize: _this.props.tabSize,
-                    theme: theme_1
-                });
-            }, 16);
-        }
+        var _a;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var props, dom, tabSize, sourceCode, language, theme, colorizedHtml;
+            return tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        props = this.props;
+                        dom = this.codeRef.current;
+                        if (!(((_a = this === null || this === void 0 ? void 0 : this.monaco) === null || _a === void 0 ? void 0 : _a.editor) && dom)) return [3 /*break*/, 2];
+                        tabSize = props.tabSize;
+                        sourceCode = amisCore.getPropValue(this.props);
+                        language = this.resolveLanguage();
+                        theme = this.registerAndGetTheme();
+                        /**
+                         * FIXME: https://github.com/microsoft/monaco-editor/issues/338
+                         * 已知问题：变量的样式存储在顶层，所以同页面中存在多个editor时，切换主题对所有editor生效
+                         * 每个组件单独实例化一个editor可以处理，但是成本较高，目前官方的处理方式是iframe嵌套隔离
+                         */
+                        this.monaco.editor.setTheme(theme);
+                        return [4 /*yield*/, this.monaco.editor.colorize(sourceCode, language, {
+                                tabSize: tabSize
+                            })];
+                    case 1:
+                        colorizedHtml = _b.sent();
+                        dom.innerHTML = colorizedHtml;
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
     };
     Code.prototype.handleMonaco = function (monaco) {
-        var _this = this;
-        this.monaco = monaco;
-        if (this.codeRef.current) {
-            var dom_2 = this.codeRef.current;
-            var theme_2 = this.registTheme() || this.props.editorTheme || 'vs';
-            // 这里必须是异步才能准确，可能是因为 monaco 里注册主题是异步的
-            setTimeout(function () {
-                monaco.editor.colorizeElement(dom_2, {
-                    tabSize: _this.props.tabSize,
-                    theme: theme_2
-                });
-            }, 16);
+        var _a;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var tabSize, sourceCode, language, dom, theme, colorizedHtml;
+            return tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!monaco) {
+                            return [2 /*return*/];
+                        }
+                        this.monaco = monaco;
+                        tabSize = this.props.tabSize;
+                        sourceCode = amisCore.getPropValue(this.props);
+                        language = this.resolveLanguage();
+                        dom = this.codeRef.current;
+                        if (!(dom && ((_a = this.monaco) === null || _a === void 0 ? void 0 : _a.editor))) return [3 /*break*/, 2];
+                        theme = this.registerAndGetTheme();
+                        // 这里必须是异步才能准确，可能是因为 monaco 里注册主题是异步的
+                        this.monaco.editor.setTheme(theme);
+                        return [4 /*yield*/, this.monaco.editor.colorize(sourceCode, language, {
+                                tabSize: tabSize
+                            })];
+                    case 1:
+                        colorizedHtml = _b.sent();
+                        dom.innerHTML = colorizedHtml;
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Code.prototype.resolveLanguage = function (props) {
+        var currentProps = props !== null && props !== void 0 ? props : this.props;
+        var customLang = currentProps.customLang, data = currentProps.data;
+        var _a = currentProps.language, language = _a === void 0 ? 'plaintext' : _a;
+        if (amisCore.isPureVariable(language)) {
+            language = amisCore.resolveVariableAndFilter(language, data);
+        }
+        if (customLang) {
+            if (customLang.name) {
+                language = customLang.name;
+            }
         }
+        return language;
     };
-    Code.prototype.registTheme = function () {
+    /** 注册并返回当前主题名称，如果未自定义主题，则范围editorTheme值，默认为'vs' */
+    Code.prototype.registerAndGetTheme = function () {
+        var _a, _b;
         var monaco = this.monaco;
+        var _c = this.props.editorTheme, editorTheme = _c === void 0 ? 'vs' : _c;
         if (!monaco) {
-            return null;
+            return editorTheme;
         }
         if (this.customLang &&
             this.customLang.name &&
-            this.customLang.tokens &&
+            Array.isArray(this.customLang.tokens) &&
             this.customLang.tokens.length) {
             var langName = this.customLang.name;
+            var colors = ((_a = this.customLang) === null || _a === void 0 ? void 0 : _a.colors) && isPlainObject__default["default"]((_b = this.customLang) === null || _b === void 0 ? void 0 : _b.colors)
+                ? this.customLang.colors
+                : {};
             monaco.languages.register({ id: langName });
             var tokenizers = [];
             var rules = [];
-            for (var _i = 0, _a = this.customLang.tokens; _i < _a.length; _i++) {
-                var token = _a[_i];
+            for (var _i = 0, _d = this.customLang.tokens; _i < _d.length; _i++) {
+                var token = _d[_i];
                 var regex = new RegExp(token.regex, token.regexFlags || undefined);
                 tokenizers.push([regex, token.name]);
                 rules.push({
@@ -94,27 +149,36 @@ var Code = /** @class */ (function (_super) {
             monaco.editor.defineTheme(langName, {
                 base: 'vs',
                 inherit: false,
-                rules: rules
+                rules: rules,
+                colors: colors
             });
             return langName;
         }
-        return null;
+        return editorTheme;
     };
     Code.prototype.render = function () {
-        var _a = this.props, className = _a.className, cx = _a.classnames, data = _a.data, customLang = _a.customLang, wordWrap = _a.wordWrap;
-        var language = this.props.language;
         var sourceCode = amisCore.getPropValue(this.props);
-        if (amisCore.isPureVariable(language)) {
-            language = amisCore.resolveVariableAndFilter(language, data);
-        }
+        var _a = this.props, className = _a.className, cx = _a.classnames, editorTheme = _a.editorTheme, customLang = _a.customLang, wordWrap = _a.wordWrap, wrapperComponent = _a.wrapperComponent;
+        var language = this.resolveLanguage();
+        var isMultiLine = typeof sourceCode === 'string' && sourceCode.split(/\r?\n/).length > 1;
+        var Component = wrapperComponent || (isMultiLine ? 'pre' : 'code');
         if (customLang) {
-            if (customLang.name) {
-                language = customLang.name;
-            }
             this.customLang = customLang;
         }
-        return (React__default["default"].createElement("code", { ref: this.codeRef, className: cx("Code", { 'word-break': wordWrap }, className), "data-lang": language }, sourceCode));
+        return (React__default["default"].createElement(Component, { ref: this.codeRef, className: cx('Code', {
+                // 使用内置暗色主题时设置一下背景，避免看不清
+                'Code--dark': editorTheme && ['vs-dark', 'hc-black'].includes(editorTheme),
+                'Code-pre-wrap': Component === 'pre',
+                'word-break': wordWrap
+            }, className), "data-lang": language }, sourceCode));
     };
+    Code.propsList = [
+        'language',
+        'editorTheme',
+        'tabSize',
+        'wordWrap',
+        'customLang'
+    ];
     Code.defaultProps = {
         language: 'plaintext',
         editorTheme: 'vs',

package/lib/renderers/Collapse.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -24,9 +24,11 @@ var Collapse = /** @class */ (function (_super) {
     Collapse.prototype.render = function () {
         var _a = this.props, id = _a.id, ns = _a.classPrefix, cx = _a.classnames, size = _a.size, wrapperComponent = _a.wrapperComponent, headingComponent = _a.headingComponent, className = _a.className, headingClassName = _a.headingClassName, children = _a.children, titlePosition = _a.titlePosition, headerPosition = _a.headerPosition, title = _a.title, collapseTitle = _a.collapseTitle, collapseHeader = _a.collapseHeader, header = _a.header, body = _a.body, bodyClassName = _a.bodyClassName, render = _a.render, collapsable = _a.collapsable; _a.translate; var mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit, showArrow = _a.showArrow, expandIcon = _a.expandIcon, disabled = _a.disabled, collapsed = _a.collapsed, propsUpdate = _a.propsUpdate, onCollapse = _a.onCollapse;
         return (React__default["default"].createElement(amisUi.Collapse, { id: id, classnames: cx, classPrefix: ns, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, size: size, wrapperComponent: wrapperComponent, headingComponent: headingComponent, className: className, headingClassName: headingClassName, bodyClassName: bodyClassName, headerPosition: titlePosition || headerPosition, collapsable: collapsable, collapsed: collapsed, showArrow: showArrow, disabled: disabled, propsUpdate: propsUpdate, expandIcon: expandIcon
-                ? render('arrow-icon', expandIcon || '', {
-                    className: cx('Collapse-icon-tranform')
-                })
+                ? typeof expandIcon.icon === 'object'
+                    ? amisCore.generateIcon(cx, expandIcon.icon)
+                    : render('arrow-icon', expandIcon || '', {
+                        className: cx('Collapse-icon-tranform')
+                    })
                 : null, collapseHeader: collapseTitle || collapseHeader
                 ? render('heading', collapseTitle || collapseHeader)
                 : null, header: render('heading', title || header || ''), body: children

package/lib/renderers/CollapseGroup.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Color.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 
@@ -25,7 +25,7 @@ var ColorField = /** @class */ (function (_super) {
         var color = amisCore.getPropValue(this.props);
         return (React__default["default"].createElement("div", { className: cx('ColorField', className) },
             React__default["default"].createElement("i", { className: cx('ColorField-previewIcon'), style: { backgroundColor: color || defaultColor } }),
-            showValue ? (React__default["default"].createElement("span", { className: cx('ColorField-value') }, color)) : null));
+            showValue ? (React__default["default"].createElement("span", { className: cx('ColorField-value') }, color || defaultColor)) : null));
     };
     ColorField.defaultProps = {
         className: '',

package/lib/renderers/Container.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Copyable.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Custom.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Date.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.3.2-beta.1
+ * amis v2.4.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/DateRange.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema } from '../Schema';
+/**
+ * DateRange 展示渲染器。
+ */
+export interface DateRangeSchema extends BaseSchema {
+    /**
+     * 指定为日期展示类型
+     */
+    type: 'date-range';
+    /**
+     * 值的时间格式，参考 moment 中的格式说明。
+     */
+    valueFormat?: string;
+    /**
+     * 展示的时间格式，参考 moment 中的格式说明。
+     */
+    format?: string;
+    /**
+     * 分割符
+     */
+    delimiter?: string;
+    /**
+     * 连接符
+     */
+    connector?: string;
+}
+export interface DateRangeProps extends RendererProps, Omit<DateRangeSchema, 'type' | 'className'> {
+}
+export declare class DateRangeField extends React.Component<DateRangeProps, Object> {
+    refreshInterval: ReturnType<typeof setTimeout>;
+    static defaultProps: Pick<DateRangeProps, 'valueFormat' | 'format' | 'connector'>;
+    render(): JSX.Element | null;
+}
+export declare class DateRangeFieldRenderer extends DateRangeField {
+}

package/lib/renderers/DateRange.js

@@ -0,0 +1,66 @@
+/**
+ * amis v2.4.0
+ * Copyright 2018-2022 baidu
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amisCore = require('amis-core');
+var moment = require('moment');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+var DateRangeField = /** @class */ (function (_super) {
+    tslib.__extends(DateRangeField, _super);
+    function DateRangeField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateRangeField.prototype.render = function () {
+        var _a = this.props, _b = _a.delimiter, delimiter = _b === void 0 ? ',' : _b, _c = _a.connector, connector = _c === void 0 ? '~' : _c, value = _a.value, valueFormat = _a.valueFormat, _d = _a.format, format = _d === void 0 ? 'YYYY-MM-DD' : _d, cx = _a.classnames, className = _a.className;
+        if (!value) {
+            return null;
+        }
+        if (typeof value === 'string') {
+            value = value.split(delimiter);
+        }
+        var _e = value[0], startTime = _e === void 0 ? '' : _e, _f = value[1], endTime = _f === void 0 ? '' : _f;
+        if (valueFormat) {
+            startTime = moment__default["default"](startTime, valueFormat);
+            endTime = moment__default["default"](endTime, valueFormat);
+        }
+        else {
+            startTime = moment__default["default"](startTime * 1000);
+            endTime = moment__default["default"](endTime * 1000);
+        }
+        startTime = startTime.isValid() ? startTime.format(format) : '';
+        endTime = endTime.isValid() ? endTime.format(format) : '';
+        return (React__default["default"].createElement("span", { className: cx('DateRangeField', className) }, [startTime, endTime].join(" ".concat(connector, " "))));
+    };
+    DateRangeField.defaultProps = {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'X',
+        connector: '~'
+    };
+    return DateRangeField;
+}(React__default["default"].Component));
+/** @class */ ((function (_super) {
+    tslib.__extends(DateRangeFieldRenderer, _super);
+    function DateRangeFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DateRangeFieldRenderer = tslib.__decorate([
+        amisCore.Renderer({
+            type: 'date-range'
+        })
+    ], DateRangeFieldRenderer);
+    return DateRangeFieldRenderer;
+})(DateRangeField));
+
+exports.DateRangeField = DateRangeField;