amis-ui 3.1.1 → 3.3.0

package/lib/components/calendar/TimeView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -23,6 +23,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var CustomTimeView = /** @class */ (function (_super) {
     tslib.__extends(CustomTimeView, _super);
     function CustomTimeView(props) {
@@ -85,12 +88,12 @@ var CustomTimeView = /** @class */ (function (_super) {
         };
         _this.renderDayPart = function () {
             var _a = _this.props, __ = _a.translate, cx = _a.classnames;
-            return (React__default["default"].createElement("div", { key: "dayPart", className: cx('CalendarCounter CalendarCounter--daypart') },
-                React__default["default"].createElement("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
-                    React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold" })),
-                React__default["default"].createElement("div", { className: cx('CalendarCounter-value'), key: _this.state.daypart }, __(_this.state.daypart)),
-                React__default["default"].createElement("span", { key: "down", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
-                    React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold" }))));
+            return (_J$X_("div", { key: "dayPart", className: cx('CalendarCounter CalendarCounter--daypart') },
+                _J$X_("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
+                    _J$X_(icons.Icon, { icon: "right-arrow-bold" })),
+                _J$X_("div", { className: cx('CalendarCounter-value'), key: _this.state.daypart }, __(_this.state.daypart)),
+                _J$X_("span", { key: "down", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onClick: _this.onStartClicking('toggleDayPart', 'hours'), onContextMenu: _this.disableContextMenu },
+                    _J$X_(icons.Icon, { icon: "right-arrow-bold" }))));
         };
         _this.getCounterValue = function (type) {
             if (type !== 'daypart') {
@@ -111,16 +114,16 @@ var CustomTimeView = /** @class */ (function (_super) {
             if (type !== 'daypart') {
                 var value = _this.getCounterValue(type);
                 var _a = _this.timeConstraints[type], min_1 = _a.min, max_1 = _a.max, step = _a.step;
-                return (React__default["default"].createElement("div", { key: type, className: cx('CalendarCounter') },
-                    React__default["default"].createElement("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onMouseDown: _this.onStartClicking('increase', type), onContextMenu: _this.disableContextMenu },
-                        React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold" })),
-                    React__default["default"].createElement("div", { key: "c", className: cx('CalendarCounter-value') },
-                        React__default["default"].createElement("input", { type: "text", value: _this.pad(type, value), className: cx('CalendarInput'), min: min_1, max: max_1, step: step, onChange: function (e) {
+                return (_J$X_("div", { key: type, className: cx('CalendarCounter') },
+                    _J$X_("span", { key: "up", className: cx('CalendarCounter-btn CalendarCounter-btn--up'), onMouseDown: _this.onStartClicking('increase', type), onContextMenu: _this.disableContextMenu },
+                        _J$X_(icons.Icon, { icon: "right-arrow-bold" })),
+                    _J$X_("div", { key: "c", className: cx('CalendarCounter-value') },
+                        _J$X_("input", { type: "text", value: _this.pad(type, value), className: cx('CalendarInput'), min: min_1, max: max_1, step: step, onChange: function (e) {
                                 return _this.props.setTime(type, Math.max(min_1, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) ||
                                     0, max_1)));
                             } })),
-                    React__default["default"].createElement("span", { key: "do", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onMouseDown: _this.onStartClicking('decrease', type), onContextMenu: _this.disableContextMenu },
-                        React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold" }))));
+                    _J$X_("span", { key: "do", className: cx('CalendarCounter-btn CalendarCounter-btn--down'), onMouseDown: _this.onStartClicking('decrease', type), onContextMenu: _this.disableContextMenu },
+                        _J$X_(icons.Icon, { icon: "right-arrow-bold" }))));
             }
             return null;
         };
@@ -194,7 +197,7 @@ var CustomTimeView = /** @class */ (function (_super) {
                 });
                 values.push(_this.state.daypart);
             }
-            return (React__default["default"].createElement(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: columns, value: values, onConfirm: _this.onConfirm, onClose: _this.props.onClose, showToolbar: _this.props.showToolbar, onChange: _this.onPickerChange }));
+            return (_J$X_(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: columns, value: values, onConfirm: _this.onConfirm, onClose: _this.props.onClose, showToolbar: _this.props.showToolbar, onChange: _this.onPickerChange }));
         };
         _this.setTime = function (type, value) {
             var date = (_this.props.selectedDate || _this.props.viewDate).clone();
@@ -311,7 +314,7 @@ var CustomTimeView = /** @class */ (function (_super) {
         if (!this.props.dateFormat)
             return null;
         var date = this.props.selectedDate || this.props.viewDate;
-        return React__default["default"].createElement('thead', { key: 'h' }, React__default["default"].createElement('tr', {}, React__default["default"].createElement('th', {
+        return _J$X_('thead', { key: 'h' }, _J$X_('tr', {}, _J$X_('th', {
             className: 'rdtSwitch',
             colSpan: 4,
             onClick: this.props.showView('days')
@@ -405,7 +408,7 @@ var CustomTimeView = /** @class */ (function (_super) {
         var inputs = [];
         var timeConstraints = this.timeConstraints;
         if (amisCore.isMobile() && this.props.useMobileUI) {
-            return (React__default["default"].createElement("div", { className: cx('CalendarTime') }, this.renderTimeViewPicker()));
+            return (_J$X_("div", { className: cx('CalendarTime') }, this.renderTimeViewPicker()));
         }
         timeFormat.split(':').forEach(function (format, i) {
             var type = /h/i.test(format)
@@ -424,7 +427,7 @@ var CustomTimeView = /** @class */ (function (_super) {
                     minutes: 'mm',
                     seconds: 'ss'
                 };
-                inputs.push(React__default["default"].createElement(Downshift__default["default"], { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
+                inputs.push(_J$X_(Downshift__default["default"], { key: i + 'input', inputValue: date.format(formatMap_1[type]) }, function (_a) {
                     var getInputProps = _a.getInputProps, openMenu = _a.openMenu, closeMenu = _a.closeMenu;
                     getInputProps({
                         onFocus: function () { return openMenu(); },
@@ -432,15 +435,17 @@ var CustomTimeView = /** @class */ (function (_super) {
                             return _this.setTime(type, Math.max(min_2, Math.min(parseInt(e.currentTarget.value.replace(/\D/g, ''), 10) || 0, max_2)));
                         }
                     });
-                    return (React__default["default"].createElement("div", { className: cx('CalendarInputWrapper') },
-                        React__default["default"].createElement("div", { className: cx('CalendarInput-sugs', type === 'hours'
+                    return (_J$X_("div", { className: cx('CalendarInputWrapper') },
+                        _J$X_("div", { className: cx('CalendarInput-sugs', type === 'hours'
                                 ? 'CalendarInput-sugsHours'
                                 : 'CalendarInput-sugsTimes'), id: "".concat(_this.state.uniqueTag, "-").concat(i, "-input") }, options_1.map(function (option) {
                             var _a;
-                            return (React__default["default"].createElement("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
+                            return (_J$X_("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
+                                    'is-mobile': amisCore.isMobile(),
                                     'is-highlight': selectedDate
                                         ? option.value === date.format(formatMap_1[type])
-                                        : option.value === ((_a = options_1 === null || options_1 === void 0 ? void 0 : options_1[0]) === null || _a === void 0 ? void 0 : _a.value)
+                                        : option.value === ((_a = options_1 === null || options_1 === void 0 ? void 0 : options_1[0]) === null || _a === void 0 ? void 0 : _a.value) &&
+                                            !amisCore.isMobile()
                                 }), onClick: function () {
                                     _this.setTime(type, parseInt(option.value, 10));
                                     _this.scrollToTop(type, parseInt(option.value, 10), i);
@@ -448,19 +453,19 @@ var CustomTimeView = /** @class */ (function (_super) {
                                 } }, option.value));
                         }))));
                 }));
-                inputs.push(React__default["default"].createElement("span", { key: i + 'divider' }));
+                inputs.push(_J$X_("span", { key: i + 'divider' }));
             }
         });
         inputs.length && inputs.pop();
         var quickLists = [
-            React__default["default"].createElement("a", { key: "select-now", onClick: this.selectNowTime }, __('TimeNow'))
+            _J$X_("a", { key: "select-now", onClick: this.selectNowTime }, __('TimeNow'))
         ];
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: cx(timeRangeHeader ? 'TimeRangeHeaderWrapper' : null) }, timeRangeHeader),
-            React__default["default"].createElement("div", { className: cx('TimeContentWrapper') }, inputs),
-            this.props.requiredConfirm && (React__default["default"].createElement("div", { className: cx('TimeFooterWrapper') },
-                React__default["default"].createElement("div", { className: cx('QuickWrapper') }, quickLists),
-                React__default["default"].createElement("a", { className: cx('Button', 'Button--primary', 'Button--size-sm'), onClick: this.confirm }, __('confirm'))))));
+        return (_J$X_(React__default["default"].Fragment, null,
+            _J$X_("div", { className: cx(timeRangeHeader ? 'TimeRangeHeaderWrapper' : null) }, timeRangeHeader),
+            _J$X_("div", { className: cx('TimeContentWrapper') }, inputs),
+            this.props.requiredConfirm && (_J$X_("div", { className: cx('TimeFooterWrapper') },
+                _J$X_("div", { className: cx('QuickWrapper') }, quickLists),
+                _J$X_("a", { className: cx('Button', 'Button--primary', 'Button--size-sm'), onClick: this.confirm }, __('confirm'))))));
     };
     CustomTimeView.defaultProps = {
         showToolbar: true

package/lib/components/calendar/YearsView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -18,13 +18,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var CustomYearsView = /** @class */ (function (_super) {
     tslib.__extends(CustomYearsView, _super);
     function CustomYearsView(props) {
         var _this = _super.call(this, props) || this;
         _this.renderYear = function (props, year, date) {
-            return (React__default["default"].createElement("td", tslib.__assign({}, props),
-                React__default["default"].createElement("span", null, year)));
+            return (_J$X_("td", tslib.__assign({}, props),
+                _J$X_("span", null, year)));
         };
         _this.onConfirm = function (value) {
             _this.props.onConfirm && _this.props.onConfirm(value, ['year']);
@@ -43,7 +46,7 @@ var CustomYearsView = /** @class */ (function (_super) {
                     options: amisCore.getRange(minYear, maxYear, 1)
                 }
             ];
-            return (React__default["default"].createElement(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: columns, value: _this.state.pickerValue, onConfirm: _this.onConfirm, onChange: _this.onPickerChange, onClose: _this.props.onClose }));
+            return (_J$X_(Picker["default"], { translate: _this.props.translate, locale: _this.props.locale, title: title, columns: columns, value: _this.state.pickerValue, onConfirm: _this.onConfirm, onChange: _this.onPickerChange, onClose: _this.props.onClose }));
         };
         var selectedDate = props.selectedDate, viewDate = props.viewDate;
         var currentDate = selectedDate || viewDate || moment__default["default"]();
@@ -92,7 +95,7 @@ var CustomYearsView = /** @class */ (function (_super) {
                         : this.props.setDate && this.props.setDate('year');
             years.push(renderer(props, year, selectedDate && selectedDate.clone()));
             if (years.length === 3) {
-                rows.push(React__default["default"].createElement('tr', { key: i }, years));
+                rows.push(_J$X_('tr', { key: i }, years));
                 years = [];
             }
             year++;
@@ -111,17 +114,17 @@ var CustomYearsView = /** @class */ (function (_super) {
         year = year - (year % 10);
         var __ = this.props.translate;
         if (amisCore.isMobile() && this.props.useMobileUI) {
-            return React__default["default"].createElement("div", { className: "rdtYears" }, this.renderYearPicker());
+            return _J$X_("div", { className: "rdtYears" }, this.renderYearPicker());
         }
-        return (React__default["default"].createElement("div", { className: "rdtYears" },
-            React__default["default"].createElement("table", { className: "headerTable" },
-                React__default["default"].createElement("thead", null,
-                    React__default["default"].createElement("tr", null,
-                        React__default["default"].createElement("th", { className: "rdtPrev", onClick: this.props.subtractTime(10, 'years') }, "\u00AB"),
-                        React__default["default"].createElement("th", { className: "rdtSwitch" }, __('year-to-year', { from: year, to: year + 9 })),
-                        React__default["default"].createElement("th", { className: "rdtNext", onClick: this.props.addTime(10, 'years') }, "\u00BB")))),
-            React__default["default"].createElement("table", null,
-                React__default["default"].createElement("tbody", null, this.renderYears(year)))));
+        return (_J$X_("div", { className: "rdtYears" },
+            _J$X_("table", { className: "headerTable" },
+                _J$X_("thead", null,
+                    _J$X_("tr", null,
+                        _J$X_("th", { className: "rdtPrev", onClick: this.props.subtractTime(10, 'years') }, "\u00AB"),
+                        _J$X_("th", { className: "rdtSwitch" }, __('year-to-year', { from: year, to: year + 9 })),
+                        _J$X_("th", { className: "rdtNext", onClick: this.props.addTime(10, 'years') }, "\u00BB")))),
+            _J$X_("table", null,
+                _J$X_("tbody", null, this.renderYears(year)))));
     };
     return CustomYearsView;
 }(React__default["default"].Component));

package/lib/components/condition-builder/Expression.d.ts

@@ -30,7 +30,7 @@ export interface ExpressionProps extends ThemeProps, LocaleProps {
     formula?: FormulaPickerProps;
     popOverContainer?: any;
     renderEtrValue?: any;
-    selectMode?: 'list' | 'tree';
+    selectMode?: 'list' | 'tree' | 'chained';
 }
 export declare class Expression extends React.Component<ExpressionProps> {
     handleInputTypeChange(type: 'value' | 'field' | 'func' | 'formula'): void;

package/lib/components/condition-builder/Expression.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,6 +20,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var fieldMap = {
     value: '值',
     field: '字段',
@@ -103,17 +106,17 @@ var Expression = /** @class */ (function (_super) {
         if ((!Array.isArray(funcs) || !funcs.length) && ~types.indexOf('func')) {
             types.splice(types.indexOf('func'), 1);
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            inputType === 'value' ? (React__default["default"].createElement(Value["default"], { field: valueField, value: value, onChange: this.handleValueChange, op: op, data: data, disabled: disabled, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue })) : null,
-            inputType === 'field' ? (React__default["default"].createElement(Field["default"], { value: value === null || value === void 0 ? void 0 : value.field, onChange: this.handleFieldChange, fieldClassName: fieldClassName, disabled: disabled, searchable: searchable, popOverContainer: popOverContainer, selectMode: selectMode, options: valueField
+        return (_J$X_(React__default["default"].Fragment, null,
+            inputType === 'value' ? (_J$X_(Value["default"], { field: valueField, value: value, onChange: this.handleValueChange, op: op, data: data, disabled: disabled, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue })) : null,
+            inputType === 'field' ? (_J$X_(Field["default"], { value: value === null || value === void 0 ? void 0 : value.field, onChange: this.handleFieldChange, fieldClassName: fieldClassName, disabled: disabled, searchable: searchable, popOverContainer: popOverContainer, selectMode: selectMode, options: valueField
                     ? amisCore.filterTree(fields, function (item) {
                         return item.children ||
                             item.type === valueField.type;
                     })
                     : fields })) : null,
-            inputType === 'func' ? (React__default["default"].createElement(Func["default"], { config: config, value: value, onChange: this.handleFuncChange, fieldClassName: fieldClassName, funcs: funcs, fields: fields, allowedTypes: allowedTypes, disabled: disabled })) : null,
-            inputType === 'formula' ? (React__default["default"].createElement(Formula["default"], { value: value === null || value === void 0 ? void 0 : value.value, onChange: this.handleFormulaChange, disabled: disabled })) : null,
-            types.length > 1 ? (React__default["default"].createElement(InputSwitch["default"], { disabled: disabled, value: inputType, popOverContainer: popOverContainer, onChange: this.handleInputTypeChange, options: types.map(function (item) { return ({
+            inputType === 'func' ? (_J$X_(Func["default"], { config: config, value: value, onChange: this.handleFuncChange, fieldClassName: fieldClassName, funcs: funcs, fields: fields, allowedTypes: allowedTypes, disabled: disabled })) : null,
+            inputType === 'formula' ? (_J$X_(Formula["default"], { value: value === null || value === void 0 ? void 0 : value.value, onChange: this.handleFormulaChange, disabled: disabled })) : null,
+            types.length > 1 ? (_J$X_(InputSwitch["default"], { disabled: disabled, value: inputType, popOverContainer: popOverContainer, onChange: this.handleInputTypeChange, options: types.map(function (item) { return ({
                     label: fieldMap[item],
                     value: item
                 }); }) })) : null));

package/lib/components/condition-builder/Field.d.ts

@@ -10,16 +10,12 @@ export interface ConditionFieldProps extends ThemeProps, LocaleProps, SpinnerExt
     fieldClassName?: string;
     searchable?: boolean;
     popOverContainer?: any;
-    selectMode?: 'list' | 'tree';
+    selectMode?: 'list' | 'tree' | 'chained';
 }
-export interface ConditionFieldState {
+export interface FieldState {
     searchText: string;
 }
-export declare class ConditionField extends React.Component<ConditionFieldProps, ConditionFieldState> {
-    constructor(props: ConditionFieldProps);
-    onSearch(text: string): void;
-    filterOptions(options: any[]): any[];
-    onPopClose(onClose: () => void): void;
+export declare class ConditionField extends React.Component<ConditionFieldProps, FieldState> {
     render(): React.JSX.Element;
 }
 declare const _default: {

package/lib/components/condition-builder/Field.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -9,87 +9,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var ReactDOM = require('react-dom');
-var PopOverContainer = require('../PopOverContainer.js');
-var GroupedSelection = require('../GroupedSelection.js');
-var ResultBox = require('../ResultBox.js');
 var amisCore = require('amis-core');
-var icons = require('../icons.js');
-var SearchBox = require('../SearchBox.js');
-var TreeSelection = require('../TreeSelection.js');
+var DropDownSelection = require('../DropDownSelection.js');
+var ChainedDropdownSelection = require('../ChainedDropdownSelection.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var option2value = function (item) { return item.name; };
 var ConditionField = /** @class */ (function (_super) {
     tslib.__extends(ConditionField, _super);
-    function ConditionField(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            searchText: ''
-        };
-        _this.onSearch = _this.onSearch.bind(_this);
-        _this.filterOptions = _this.filterOptions.bind(_this);
-        return _this;
+    function ConditionField() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    ConditionField.prototype.onSearch = function (text) {
-        var txt = text.toLowerCase();
-        this.setState({ searchText: txt });
-    };
-    ConditionField.prototype.filterOptions = function (options) {
-        var txt = this.state.searchText;
-        if (!txt) {
-            return this.props.options;
-        }
-        return options
-            .map(function (item) {
-            if (item.children) {
-                var children = item.children.filter(function (child) {
-                    return (child.name.toLowerCase().includes(txt) ||
-                        child.label.toLowerCase().includes(txt));
-                });
-                return children.length > 0
-                    ? Object.assign({}, item, { children: children }) // 需要copy一份，防止覆盖原始数据
-                    : false;
-            }
-            else {
-                return item.name.toLowerCase().includes(txt) ||
-                    item.label.toLowerCase().includes(txt)
-                    ? item
-                    : false;
-            }
-        })
-            .filter(function (item) {
-            return !!item;
-        });
-    };
-    // 选了值，还原options
-    ConditionField.prototype.onPopClose = function (onClose) {
-        this.setState({ searchText: '' });
-        onClose();
-    };
     ConditionField.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, options = _a.options, onChange = _a.onChange, value = _a.value, cx = _a.classnames, fieldClassName = _a.fieldClassName, disabled = _a.disabled, __ = _a.translate, searchable = _a.searchable, popOverContainer = _a.popOverContainer, _b = _a.selectMode, selectMode = _b === void 0 ? 'list' : _b, loadingConfig = _a.loadingConfig;
-        return (React__default["default"].createElement(PopOverContainer.PopOverContainer, { popOverContainer: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), popOverRender: function (_a) {
-                var onClose = _a.onClose;
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    searchable ? (React__default["default"].createElement(SearchBox["default"], { mini: false, onSearch: _this.onSearch })) : null,
-                    selectMode === 'tree' ? (React__default["default"].createElement(TreeSelection["default"], { className: 'is-scrollable', multiple: false, options: _this.filterOptions(_this.props.options), value: value, loadingConfig: loadingConfig, onChange: function (value) {
-                            _this.onPopClose(onClose);
-                            onChange(value.name);
-                        } })) : (React__default["default"].createElement(GroupedSelection["default"], { multiple: false, onClick: function () { return _this.onPopClose(onClose); }, options: _this.filterOptions(_this.props.options), value: [value], option2value: option2value, onChange: function (value) {
-                            return onChange(Array.isArray(value) ? value[0] : value);
-                        } }))));
-            } }, function (_a) {
-            var onClick = _a.onClick, ref = _a.ref, isOpened = _a.isOpened;
-            return (React__default["default"].createElement("div", { className: cx('CBGroup-field') },
-                React__default["default"].createElement(ResultBox["default"], { className: cx('CBGroup-fieldInput', fieldClassName, isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: value ? amisCore.findTree(options, function (item) { return item.name === value; }) : '', onResultChange: amisCore.noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled },
-                    React__default["default"].createElement("span", { className: cx('CBGroup-fieldCaret') },
-                        React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon" })))));
-        }));
+        var _a = this.props, onChange = _a.onChange, value = _a.value, cx = _a.classnames, disabled = _a.disabled, translate = _a.translate, searchable = _a.searchable, _b = _a.selectMode, selectMode = _b === void 0 ? 'list' : _b, options = _a.options, loadingConfig = _a.loadingConfig;
+        return selectMode === 'chained' ? (_J$X_(ChainedDropdownSelection["default"], { multiple: false, classnames: cx, translate: translate, options: options, value: value, valueField: "name", option2value: option2value, searchable: searchable, disabled: disabled, onChange: function (value) {
+                onChange(Array.isArray(value) ? value[0] : value);
+            } })) : selectMode === 'tree' ? (_J$X_(DropDownSelection["default"], { className: 'is-scrollable', classnames: cx, translate: translate, multiple: false, option2value: option2value, searchable: searchable, disabled: disabled, valueField: 'name', mode: 'tree', options: options, value: value, loadingConfig: loadingConfig, onChange: function (value) {
+                onChange(value);
+            } })) : (_J$X_(DropDownSelection["default"], { classnames: cx, translate: translate, options: options, value: value, valueField: 'name', option2value: option2value, searchable: searchable, disabled: disabled, onChange: function (value) {
+                return onChange(Array.isArray(value) ? value[0] : value);
+            } }));
     };
     return ConditionField;
 }(React__default["default"].Component));

package/lib/components/condition-builder/Formula.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -16,6 +16,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var Formula = /** @class */ (function (_super) {
     tslib.__extends(Formula, _super);
     function Formula() {
@@ -23,8 +26,8 @@ var Formula = /** @class */ (function (_super) {
     }
     Formula.prototype.render = function () {
         var _a = this.props, cx = _a.classnames, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, __ = _a.translate;
-        return (React__default["default"].createElement("div", { className: cx('CBFormula') },
-            React__default["default"].createElement(InputBox["default"], { disabled: disabled, value: value, onChange: onChange, placeholder: __('Condition.formula_placeholder'), prefix: React__default["default"].createElement("span", { className: cx('CBFormula-label') }, __('Condition.expression')) })));
+        return (_J$X_("div", { className: cx('CBFormula') },
+            _J$X_(InputBox["default"], { disabled: disabled, value: value, onChange: onChange, placeholder: __('Condition.formula_placeholder'), prefix: _J$X_("span", { className: cx('CBFormula-label') }, __('Condition.expression')), useMobileUI: true })));
     };
     return Formula;
 }(React__default["default"].Component));

package/lib/components/condition-builder/Func.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,6 +20,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var option2value = function (item) { return item.type; };
 var ConditionFunc = /** @class */ (function (_super) {
     tslib.__extends(ConditionFunc, _super);
@@ -40,10 +43,10 @@ var ConditionFunc = /** @class */ (function (_super) {
     ConditionFunc.prototype.renderFunc = function (func) {
         var _this = this;
         var _a = this.props, cx = _a.classnames, fields = _a.fields, value = _a.value, funcs = _a.funcs, config = _a.config, disabled = _a.disabled;
-        return (React__default["default"].createElement("div", { className: cx('CBFunc-args') },
-            React__default["default"].createElement("span", null, "("),
-            Array.isArray(func.args) && func.args.length ? (React__default["default"].createElement("div", null, func.args.map(function (item, index) { return (React__default["default"].createElement(Expression["default"], { config: config, key: index, index: index, fields: fields, value: value === null || value === void 0 ? void 0 : value.args[index], valueField: { type: item.type }, onChange: _this.handleArgChange, funcs: funcs, disabled: disabled })); }))) : null,
-            React__default["default"].createElement("span", null, ")")));
+        return (_J$X_("div", { className: cx('CBFunc-args') },
+            _J$X_("span", null, "("),
+            Array.isArray(func.args) && func.args.length ? (_J$X_("div", null, func.args.map(function (item, index) { return (_J$X_(Expression["default"], { config: config, key: index, index: index, fields: fields, value: value === null || value === void 0 ? void 0 : value.args[index], valueField: { type: item.type }, onChange: _this.handleArgChange, funcs: funcs, disabled: disabled })); }))) : null,
+            _J$X_("span", null, ")")));
     };
     ConditionFunc.prototype.render = function () {
         var _this = this;
@@ -51,18 +54,18 @@ var ConditionFunc = /** @class */ (function (_super) {
         var func = value
             ? amisCore.findTree(funcs, function (item) { return item.type === value.func; })
             : null;
-        return (React__default["default"].createElement("div", { className: cx('CBFunc') },
-            React__default["default"].createElement(PopOverContainer.PopOverContainer, { popOverRender: function (_a) {
+        return (_J$X_("div", { className: cx('CBFunc') },
+            _J$X_(PopOverContainer.PopOverContainer, { popOverRender: function (_a) {
                     var onClose = _a.onClose;
-                    return (React__default["default"].createElement(GroupedSelection["default"], { onClick: onClose, options: funcs, value: func === null || func === void 0 ? void 0 : func.type, option2value: option2value, onChange: _this.handleFuncChange, multiple: false }));
+                    return (_J$X_(GroupedSelection["default"], { onClick: onClose, options: funcs, value: func === null || func === void 0 ? void 0 : func.type, option2value: option2value, onChange: _this.handleFuncChange, multiple: false }));
                 } }, function (_a) {
                 var onClick = _a.onClick, ref = _a.ref, isOpened = _a.isOpened;
-                return (React__default["default"].createElement("div", { className: cx('CBFunc-select') },
-                    React__default["default"].createElement(ResultBox["default"], { className: cx('CBGroup-fieldInput', fieldClassName, isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: func, onResultChange: amisCore.noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled },
-                        React__default["default"].createElement("span", { className: cx('CBGroup-fieldCaret') },
-                            React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon" })))));
+                return (_J$X_("div", { className: cx('CBFunc-select') },
+                    _J$X_(ResultBox["default"], { className: cx('CBGroup-fieldInput', fieldClassName, isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: func, onResultChange: amisCore.noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled },
+                        _J$X_("span", { className: cx('CBGroup-fieldCaret') },
+                            _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" })))));
             }),
-            func ? (this.renderFunc(func)) : (React__default["default"].createElement("span", { className: cx('CBFunc-error') }, __('Condition.fun_error')))));
+            func ? (this.renderFunc(func)) : (_J$X_("span", { className: cx('CBFunc-error') }, __('Condition.fun_error')))));
     };
     tslib.__decorate([
         amisCore.autobind,

package/lib/components/condition-builder/Group.d.ts

@@ -27,8 +27,17 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
     formula?: FormulaPickerProps;
     popOverContainer?: any;
     renderEtrValue?: any;
-    selectMode?: 'list' | 'tree';
+    selectMode?: 'list' | 'tree' | 'chained';
     isCollapsed?: boolean;
+    depth: number;
+    isAddBtnVisibleOn?: (param: {
+        depth: number;
+        breadth: number;
+    }) => boolean;
+    isAddGroupBtnVisibleOn?: (param: {
+        depth: number;
+        breadth: number;
+    }) => boolean;
 }
 export declare class ConditionGroup extends React.Component<ConditionGroupProps, ConditionGroupState> {
     constructor(props: ConditionGroupProps);

package/lib/components/condition-builder/Group.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,6 +20,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var ConditionGroup = /** @class */ (function (_super) {
     tslib.__extends(ConditionGroup, _super);
     function ConditionGroup(props) {
@@ -107,21 +110,25 @@ var ConditionGroup = /** @class */ (function (_super) {
     };
     ConditionGroup.prototype.render = function () {
         var _this = this;
-        var _a = this.props, builderMode = _a.builderMode, cx = _a.classnames, fieldClassName = _a.fieldClassName, value = _a.value, data = _a.data, fields = _a.fields, funcs = _a.funcs, config = _a.config, removeable = _a.removeable, onRemove = _a.onRemove, onDragStart = _a.onDragStart, showNot = _a.showNot, _b = _a.showANDOR, showANDOR = _b === void 0 ? false : _b, disabled = _a.disabled, searchable = _a.searchable, __ = _a.translate, formula = _a.formula, popOverContainer = _a.popOverContainer, selectMode = _a.selectMode, renderEtrValue = _a.renderEtrValue, draggable = _a.draggable;
+        var _a, _b, _c;
+        var _d = this.props, builderMode = _d.builderMode, cx = _d.classnames, fieldClassName = _d.fieldClassName, value = _d.value, data = _d.data, fields = _d.fields, funcs = _d.funcs, config = _d.config, removeable = _d.removeable, onRemove = _d.onRemove, onDragStart = _d.onDragStart, showNot = _d.showNot, _e = _d.showANDOR, showANDOR = _e === void 0 ? false : _e, disabled = _d.disabled, searchable = _d.searchable, __ = _d.translate, formula = _d.formula, popOverContainer = _d.popOverContainer, selectMode = _d.selectMode, renderEtrValue = _d.renderEtrValue, draggable = _d.draggable, depth = _d.depth, isAddBtnVisibleOn = _d.isAddBtnVisibleOn, isAddGroupBtnVisibleOn = _d.isAddGroupBtnVisibleOn;
         var isCollapsed = this.state.isCollapsed;
         var body = Array.isArray(value === null || value === void 0 ? void 0 : value.children) && value.children.length
             ? isCollapsed
                 ? value.children.slice(0, 1)
                 : value.children
             : null;
-        return (React__default["default"].createElement("div", { className: cx('CBGroup'), "data-group-id": value === null || value === void 0 ? void 0 : value.id },
-            builderMode === 'simple' && showANDOR === false ? null : (React__default["default"].createElement("div", { className: cx('CBGroup-toolbarCondition'), draggable: draggable, onDragStart: onDragStart },
-                Array.isArray(value === null || value === void 0 ? void 0 : value.children) && value.children.length > 1 ? (React__default["default"].createElement("div", { className: cx('CBGroup-toolbarCondition-arrow', {
+        var param = { depth: depth, breadth: (_a = body === null || body === void 0 ? void 0 : body.length) !== null && _a !== void 0 ? _a : 0 };
+        var addConditionVisibleBool = (_b = isAddBtnVisibleOn === null || isAddBtnVisibleOn === void 0 ? void 0 : isAddBtnVisibleOn(param)) !== null && _b !== void 0 ? _b : true;
+        var addConditionGroupVisibleBool = (_c = isAddGroupBtnVisibleOn === null || isAddGroupBtnVisibleOn === void 0 ? void 0 : isAddGroupBtnVisibleOn(param)) !== null && _c !== void 0 ? _c : true;
+        return (_J$X_("div", { className: cx('CBGroup'), "data-group-id": value === null || value === void 0 ? void 0 : value.id },
+            builderMode === 'simple' && showANDOR === false ? null : (_J$X_("div", { className: cx('CBGroup-toolbarCondition'), draggable: draggable, onDragStart: onDragStart },
+                Array.isArray(value === null || value === void 0 ? void 0 : value.children) && value.children.length > 1 ? (_J$X_("div", { className: cx('CBGroup-toolbarCondition-arrow', {
                         'is-collapse': isCollapsed
                     }), onClick: this.toggleCollapse },
-                    React__default["default"].createElement(downArrowBold["default"], null))) : null,
-                showNot ? (React__default["default"].createElement(Button["default"], { onClick: this.handleNotClick, className: "m-b-sm z-10", size: "xs", active: value === null || value === void 0 ? void 0 : value.not, disabled: disabled }, __('Condition.not'))) : null,
-                React__default["default"].createElement(Select["default"], { options: [
+                    _J$X_(downArrowBold["default"], null))) : null,
+                showNot ? (_J$X_(Button["default"], { onClick: this.handleNotClick, className: "m-b-sm z-10", size: "xs", active: value === null || value === void 0 ? void 0 : value.not, disabled: disabled }, __('Condition.not'))) : null,
+                _J$X_(Select["default"], { options: [
                         {
                             label: __('Condition.and'),
                             value: 'and'
@@ -131,20 +138,20 @@ var ConditionGroup = /** @class */ (function (_super) {
                             value: 'or'
                         }
                     ], value: (value === null || value === void 0 ? void 0 : value.conjunction) || 'and', disabled: disabled, onChange: this.handleConjunctionChange, clearable: false }))),
-            React__default["default"].createElement("div", { className: cx('CBGroup-body-wrapper') },
-                React__default["default"].createElement("div", { className: cx('CBGroup-body') },
-                    body ? (body.map(function (item, index) { return (React__default["default"].createElement(GroupOrItem["default"], { draggable: value.children.length > 1, onDragStart: onDragStart, config: config, key: item.id, fields: fields, fieldClassName: fieldClassName, value: item, index: index, onChange: _this.handleItemChange, funcs: funcs, onRemove: _this.handleItemRemove, data: data, disabled: disabled, searchable: searchable, builderMode: builderMode, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue, selectMode: selectMode, isCollapsed: isCollapsed })); })) : (React__default["default"].createElement("div", { className: cx("CBGroup-placeholder ".concat(builderMode === 'simple' ? 'simple' : '')) }, __('Condition.blank'))),
-                    isCollapsed ? (React__default["default"].createElement("div", { className: cx('CBGroup-body-collapse') },
-                        React__default["default"].createElement("span", { onClick: this.toggleCollapse },
+            _J$X_("div", { className: cx('CBGroup-body-wrapper') },
+                _J$X_("div", { className: cx('CBGroup-body') },
+                    body ? (body.map(function (item, index) { return (_J$X_(GroupOrItem["default"], { draggable: draggable && value.children.length > 1, onDragStart: onDragStart, config: config, key: item.id, fields: fields, fieldClassName: fieldClassName, value: item, index: index, onChange: _this.handleItemChange, funcs: funcs, onRemove: _this.handleItemRemove, data: data, disabled: disabled, searchable: searchable, builderMode: builderMode, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue, selectMode: selectMode, isCollapsed: isCollapsed, depth: depth, isAddBtnVisibleOn: isAddBtnVisibleOn, isAddGroupBtnVisibleOn: isAddGroupBtnVisibleOn })); })) : (_J$X_("div", { className: cx("CBGroup-placeholder ".concat(builderMode === 'simple' ? 'simple' : '')) }, __('Condition.blank'))),
+                    isCollapsed ? (_J$X_("div", { className: cx('CBGroup-body-collapse') },
+                        _J$X_("span", { onClick: this.toggleCollapse },
                             __('Condition.collapse'),
                             " ",
-                            React__default["default"].createElement(downArrowBold["default"], null)))) : null),
-                isCollapsed ? null : (React__default["default"].createElement("div", { className: cx('CBGroup-toolbar'), draggable: draggable, onDragStart: onDragStart },
-                    React__default["default"].createElement("div", { className: cx("CBGroup-toolbarConditionAdd".concat(builderMode === 'simple' ? '-simple' : '')) },
-                        React__default["default"].createElement("div", { className: cx('ButtonGroup') },
-                            React__default["default"].createElement(Button["default"], { level: "link", onClick: this.handleAdd, size: "xs", disabled: disabled }, __('Condition.add_cond')),
-                            builderMode === 'simple' ? null : (React__default["default"].createElement(Button["default"], { onClick: this.handleAddGroup, size: "xs", disabled: disabled, level: "link" }, __('Condition.add_cond_group'))),
-                            removeable ? (React__default["default"].createElement(Button["default"], { onClick: onRemove, size: "xs", disabled: disabled, level: "link" }, __('Condition.delete_cond_group'))) : null)))))));
+                            _J$X_(downArrowBold["default"], null)))) : null),
+                isCollapsed ? null : (_J$X_("div", { className: cx('CBGroup-toolbar'), draggable: draggable, onDragStart: onDragStart },
+                    _J$X_("div", { className: cx("CBGroup-toolbarConditionAdd".concat(builderMode === 'simple' ? '-simple' : '')) },
+                        _J$X_("div", { className: cx('ButtonGroup') },
+                            addConditionVisibleBool ? (_J$X_(Button["default"], { level: "link", onClick: this.handleAdd, size: "xs", disabled: disabled }, __('Condition.add_cond'))) : null,
+                            addConditionGroupVisibleBool && builderMode !== 'simple' ? (_J$X_(Button["default"], { onClick: this.handleAddGroup, size: "xs", disabled: disabled, level: "link" }, __('Condition.add_cond_group'))) : null,
+                            removeable ? (_J$X_(Button["default"], { onClick: onRemove, size: "xs", disabled: disabled, level: "link" }, __('Condition.delete_cond_group'))) : null)))))));
     };
     tslib.__decorate([
         amisCore.autobind,