amis-ui 3.1.1 → 3.3.0

package/esm/components/calendar/QuartersView.js

@@ -1,17 +1,22 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
-import { __extends, __assign } from 'tslib';
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
 import moment from 'moment';
 import React__default from 'react';
-import { localeable } from 'amis-core';
+import { getRange, isMobile, autobind, localeable } from 'amis-core';
+import Picker from '../Picker.js';
 
 var QuarterView = /** @class */ (function (_super) {
     __extends(QuarterView, _super);
     function QuarterView() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            columns: [],
+            pickerValue: [_this.props.viewDate.year(), _this.props.viewDate.quarter()]
+        };
         _this.renderQuarter = function (props, quartar, year, date) {
             return (React__default.createElement("td", __assign({}, props),
                 React__default.createElement("span", null,
@@ -21,6 +26,12 @@ var QuarterView = /** @class */ (function (_super) {
         _this.updateSelectedQuarter = function (event) {
             _this.props.updateSelectedDate(event);
         };
+        _this.onPickerConfirm = function (value) {
+            _this.props.onConfirm && _this.props.onConfirm(value, ['year', 'quarter']);
+        };
+        _this.onPickerChange = function (value, index) {
+            _this.setState({ pickerValue: value });
+        };
         return _this;
     }
     QuarterView.prototype.renderYear = function () {
@@ -69,13 +80,44 @@ var QuarterView = /** @class */ (function (_super) {
     QuarterView.prototype.alwaysValidDate = function () {
         return true;
     };
+    QuarterView.prototype.cancel = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    QuarterView.prototype.renderPicker = function () {
+        var __ = this.props.translate;
+        var title = __('Date.titleQuarter');
+        var minYear = new Date().getFullYear() - 100;
+        var maxYear = new Date().getFullYear() + 100;
+        var columns = [
+            {
+                options: getRange(minYear, maxYear, 1)
+            },
+            {
+                options: getRange(1, 4).map(function (item) {
+                    return {
+                        text: 'Q' + item,
+                        value: item
+                    };
+                })
+            }
+        ];
+        return (React__default.createElement(Picker, { translate: this.props.translate, locale: this.props.locale, title: title, columns: columns, value: this.state.pickerValue, onChange: this.onPickerChange, onConfirm: this.onPickerConfirm, onClose: this.cancel }));
+    };
     QuarterView.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, hideHeader = _a.hideHeader;
-        return (React__default.createElement("div", { className: cx('ClalendarQuarter') },
+        var _a = this.props, cx = _a.classnames, hideHeader = _a.hideHeader, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && isMobile();
+        return mobileUI ? (this.renderPicker()) : (React__default.createElement("div", { className: cx('ClalendarQuarter') },
             hideHeader ? null : this.renderYear(),
             React__default.createElement("table", null,
                 React__default.createElement("tbody", null, this.renderQuarters()))));
     };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], QuarterView.prototype, "cancel", null);
     return QuarterView;
 }(React__default.Component));
 var QuartersView = localeable(QuarterView);

package/esm/components/calendar/TimeView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -427,9 +427,11 @@ var CustomTimeView = /** @class */ (function (_super) {
                                 : 'CalendarInput-sugsTimes'), id: "".concat(_this.state.uniqueTag, "-").concat(i, "-input") }, options_1.map(function (option) {
                             var _a;
                             return (React__default.createElement("div", { key: option.value, className: cx('CalendarInput-sugsItem', {
+                                    'is-mobile': 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) &&
+                                            !isMobile()
                                 }), onClick: function () {
                                     _this.setTime(type, parseInt(option.value, 10));
                                     _this.scrollToTop(type, parseInt(option.value, 10), i);

package/esm/components/calendar/YearsView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/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/esm/components/condition-builder/Expression.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/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/esm/components/condition-builder/Field.js

@@ -1,87 +1,29 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends } from 'tslib';
 import React__default from 'react';
-import { findDOMNode } from 'react-dom';
-import { PopOverContainer } from '../PopOverContainer.js';
-import GroupedSelection from '../GroupedSelection.js';
-import ResultBox from '../ResultBox.js';
-import { findTree, noop, themeable, localeable } from 'amis-core';
-import { Icon } from '../icons.js';
-import SearchBox from '../SearchBox.js';
-import TreeSelection from '../TreeSelection.js';
+import { themeable, localeable } from 'amis-core';
+import DropDownSelection from '../DropDownSelection.js';
+import ChainedDropdownSelection from '../ChainedDropdownSelection.js';
 
 var option2value = function (item) { return item.name; };
 var ConditionField = /** @class */ (function (_super) {
     __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.createElement(PopOverContainer, { popOverContainer: popOverContainer || (function () { return findDOMNode(_this); }), popOverRender: function (_a) {
-                var onClose = _a.onClose;
-                return (React__default.createElement(React__default.Fragment, null,
-                    searchable ? (React__default.createElement(SearchBox, { mini: false, onSearch: _this.onSearch })) : null,
-                    selectMode === 'tree' ? (React__default.createElement(TreeSelection, { 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.createElement(GroupedSelection, { 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.createElement("div", { className: cx('CBGroup-field') },
-                React__default.createElement(ResultBox, { className: cx('CBGroup-fieldInput', fieldClassName, isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: value ? findTree(options, function (item) { return item.name === value; }) : '', onResultChange: noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled },
-                    React__default.createElement("span", { className: cx('CBGroup-fieldCaret') },
-                        React__default.createElement(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' ? (React__default.createElement(ChainedDropdownSelection, { 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' ? (React__default.createElement(DropDownSelection, { 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);
+            } })) : (React__default.createElement(DropDownSelection, { 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.Component));

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

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -16,7 +16,7 @@ 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.createElement("div", { className: cx('CBFormula') },
-            React__default.createElement(InputBox, { disabled: disabled, value: value, onChange: onChange, placeholder: __('Condition.formula_placeholder'), prefix: React__default.createElement("span", { className: cx('CBFormula-label') }, __('Condition.expression')) })));
+            React__default.createElement(InputBox, { disabled: disabled, value: value, onChange: onChange, placeholder: __('Condition.formula_placeholder'), prefix: React__default.createElement("span", { className: cx('CBFormula-label') }, __('Condition.expression')), useMobileUI: true })));
     };
     return Formula;
 }(React__default.Component));

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

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -52,7 +52,7 @@ var ConditionFunc = /** @class */ (function (_super) {
                 return (React__default.createElement("div", { className: cx('CBFunc-select') },
                     React__default.createElement(ResultBox, { className: cx('CBGroup-fieldInput', fieldClassName, isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: func, onResultChange: noop, onResultClick: onClick, placeholder: __('Condition.field_placeholder'), disabled: disabled },
                         React__default.createElement("span", { className: cx('CBGroup-fieldCaret') },
-                            React__default.createElement(Icon, { icon: "caret", className: "icon" })))));
+                            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })))));
             }),
             func ? (this.renderFunc(func)) : (React__default.createElement("span", { className: cx('CBFunc-error') }, __('Condition.fun_error')))));
     };

package/esm/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/esm/components/condition-builder/Group.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -99,13 +99,17 @@ 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;
+        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 (React__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.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.createElement("div", { className: cx('CBGroup-toolbarCondition-arrow', {
@@ -125,7 +129,7 @@ var ConditionGroup = /** @class */ (function (_super) {
                     ], value: (value === null || value === void 0 ? void 0 : value.conjunction) || 'and', disabled: disabled, onChange: this.handleConjunctionChange, clearable: false }))),
             React__default.createElement("div", { className: cx('CBGroup-body-wrapper') },
                 React__default.createElement("div", { className: cx('CBGroup-body') },
-                    body ? (body.map(function (item, index) { return (React__default.createElement(GroupOrItem, { 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.createElement("div", { className: cx("CBGroup-placeholder ".concat(builderMode === 'simple' ? 'simple' : '')) }, __('Condition.blank'))),
+                    body ? (body.map(function (item, index) { return (React__default.createElement(GroupOrItem, { 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 })); })) : (React__default.createElement("div", { className: cx("CBGroup-placeholder ".concat(builderMode === 'simple' ? 'simple' : '')) }, __('Condition.blank'))),
                     isCollapsed ? (React__default.createElement("div", { className: cx('CBGroup-body-collapse') },
                         React__default.createElement("span", { onClick: this.toggleCollapse },
                             __('Condition.collapse'),
@@ -134,8 +138,8 @@ var ConditionGroup = /** @class */ (function (_super) {
                 isCollapsed ? null : (React__default.createElement("div", { className: cx('CBGroup-toolbar'), draggable: draggable, onDragStart: onDragStart },
                     React__default.createElement("div", { className: cx("CBGroup-toolbarConditionAdd".concat(builderMode === 'simple' ? '-simple' : '')) },
                         React__default.createElement("div", { className: cx('ButtonGroup') },
-                            React__default.createElement(Button, { level: "link", onClick: this.handleAdd, size: "xs", disabled: disabled }, __('Condition.add_cond')),
-                            builderMode === 'simple' ? null : (React__default.createElement(Button, { onClick: this.handleAddGroup, size: "xs", disabled: disabled, level: "link" }, __('Condition.add_cond_group'))),
+                            addConditionVisibleBool ? (React__default.createElement(Button, { level: "link", onClick: this.handleAdd, size: "xs", disabled: disabled }, __('Condition.add_cond'))) : null,
+                            addConditionGroupVisibleBool && builderMode !== 'simple' ? (React__default.createElement(Button, { onClick: this.handleAddGroup, size: "xs", disabled: disabled, level: "link" }, __('Condition.add_cond_group'))) : null,
                             removeable ? (React__default.createElement(Button, { onClick: onRemove, size: "xs", disabled: disabled, level: "link" }, __('Condition.delete_cond_group'))) : null)))))));
     };
     __decorate([

package/esm/components/condition-builder/GroupOrItem.d.ts

@@ -24,8 +24,17 @@ export interface CBGroupOrItemProps extends ThemeProps {
     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 CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
     state: {

package/esm/components/condition-builder/GroupOrItem.js

@@ -1,10 +1,10 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __decorate, __metadata } from 'tslib';
-import { autobind, themeable } from 'amis-core';
+import { isMobile, autobind, themeable } from 'amis-core';
 import React__default from 'react';
 import { Icon } from '../icons.js';
 import ConditionGroup from './Group.js';
@@ -28,6 +28,9 @@ var CBGroupOrItem = /** @class */ (function (_super) {
         (_b = (_a = this.props).onRemove) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.index);
     };
     CBGroupOrItem.prototype.handlerHoverIn = function (e) {
+        if (isMobile()) {
+            return;
+        }
         e.stopPropagation();
         this.setState({
             hover: true
@@ -39,14 +42,14 @@ var CBGroupOrItem = /** @class */ (function (_super) {
         });
     };
     CBGroupOrItem.prototype.render = function () {
-        var _a = this.props, builderMode = _a.builderMode, cx = _a.classnames, fieldClassName = _a.fieldClassName, value = _a.value, config = _a.config, fields = _a.fields, funcs = _a.funcs, draggable = _a.draggable, data = _a.data, disabled = _a.disabled, searchable = _a.searchable, onDragStart = _a.onDragStart, formula = _a.formula, popOverContainer = _a.popOverContainer, selectMode = _a.selectMode, renderEtrValue = _a.renderEtrValue, isCollapsed = _a.isCollapsed;
-        return (React__default.createElement("div", { className: cx("CBGroupOrItem".concat(builderMode === 'simple' ? '-simple' : '')), "data-id": value === null || value === void 0 ? void 0 : value.id },
+        var _a = this.props, builderMode = _a.builderMode, cx = _a.classnames, fieldClassName = _a.fieldClassName, value = _a.value, config = _a.config, fields = _a.fields, funcs = _a.funcs, draggable = _a.draggable, data = _a.data, disabled = _a.disabled, searchable = _a.searchable, onDragStart = _a.onDragStart, formula = _a.formula, popOverContainer = _a.popOverContainer, selectMode = _a.selectMode, renderEtrValue = _a.renderEtrValue, isCollapsed = _a.isCollapsed, depth = _a.depth, isAddBtnVisibleOn = _a.isAddBtnVisibleOn, isAddGroupBtnVisibleOn = _a.isAddGroupBtnVisibleOn;
+        return (React__default.createElement("div", { className: cx("CBGroupOrItem".concat(builderMode === 'simple' ? '-simple' : ''), { 'is-mobile': isMobile() }), "data-id": value === null || value === void 0 ? void 0 : value.id },
             React__default.createElement("div", { className: cx('CBGroupOrItem-body') }, (value === null || value === void 0 ? void 0 : value.conjunction) ? (React__default.createElement("div", { className: cx('CBGroupOrItem-body-group', {
-                    'is-hover': this.state.hover
+                    'is-hover': this.state.hover || isMobile()
                 }), onMouseOver: this.handlerHoverIn, onMouseOut: this.handlerHoverOut },
                 draggable && !disabled ? (React__default.createElement("a", { draggable: true, onDragStart: onDragStart, className: cx('CBGroupOrItem-dragbar') },
                     React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
-                React__default.createElement(ConditionGroup, { isCollapsed: isCollapsed, draggable: draggable, disabled: disabled, searchable: searchable, onDragStart: onDragStart, config: config, fields: fields, value: value, onChange: this.handleItemChange, fieldClassName: fieldClassName, funcs: funcs, removeable: true, onRemove: this.handleItemRemove, data: data, renderEtrValue: renderEtrValue }))) : (React__default.createElement("div", { className: cx('CBGroupOrItem-body-item') },
+                React__default.createElement(ConditionGroup, { isCollapsed: isCollapsed, draggable: draggable, disabled: disabled, searchable: searchable, selectMode: selectMode, onDragStart: onDragStart, config: config, fields: fields, formula: formula, value: value, onChange: this.handleItemChange, fieldClassName: fieldClassName, funcs: funcs, removeable: true, onRemove: this.handleItemRemove, data: data, renderEtrValue: renderEtrValue, depth: depth + 1, isAddBtnVisibleOn: isAddBtnVisibleOn, isAddGroupBtnVisibleOn: isAddGroupBtnVisibleOn }))) : (React__default.createElement("div", { className: cx('CBGroupOrItem-body-item') },
                 draggable && !disabled ? (React__default.createElement("a", { draggable: true, onDragStart: onDragStart, className: cx('CBGroupOrItem-dragbar') },
                     React__default.createElement(Icon, { icon: "drag-bar", className: "icon" }))) : null,
                 React__default.createElement(ConditionItem, { disabled: disabled, searchable: searchable, config: config, fields: fields, value: value, onChange: this.handleItemChange, fieldClassName: fieldClassName, funcs: funcs, data: data, formula: formula, popOverContainer: popOverContainer, renderEtrValue: renderEtrValue, selectMode: selectMode }),

package/esm/components/condition-builder/InputSwitch.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/condition-builder/Item.d.ts

@@ -19,7 +19,7 @@ export interface ConditionItemProps extends ThemeProps, LocaleProps {
     formula?: FormulaPickerProps;
     popOverContainer?: any;
     renderEtrValue?: any;
-    selectMode?: 'list' | 'tree';
+    selectMode?: 'list' | 'tree' | 'chained';
 }
 export declare class ConditionItem extends React.Component<ConditionItemProps> {
     handleLeftFieldSelect(field: any): void;

package/esm/components/condition-builder/Item.js

@@ -1,12 +1,12 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import { findDOMNode } from 'react-dom';
-import { findTree, noop, getVariable, autobind, themeable, localeable } from 'amis-core';
+import { findTree, noop, isMobile, getVariable, autobind, themeable, localeable } from 'amis-core';
 import { Icon } from '../icons.js';
 import Expression from './Expression.js';
 import { OperationMap } from './config.js';
@@ -106,7 +106,7 @@ var ConditionItem = /** @class */ (function (_super) {
                     return operator;
                 }
             });
-            return (React__default.createElement(PopOverContainer, { popOverContainer: popOverContainer || (function () { return findDOMNode(_this); }), popOverRender: function (_a) {
+            return (React__default.createElement(PopOverContainer, { useMobileUI: true, popOverContainer: popOverContainer || (function () { return findDOMNode(_this); }), popOverRender: function (_a) {
                     var onClose = _a.onClose;
                     return (React__default.createElement(GroupedSelection, { onClick: onClose, option2value: option2value, onChange: _this.handleOperatorChange, options: options_1, value: value.op, multiple: false }));
                 } }, function (_a) {
@@ -114,9 +114,8 @@ var ConditionItem = /** @class */ (function (_super) {
                 var onClick = _a.onClick, isOpened = _a.isOpened, ref = _a.ref;
                 return (React__default.createElement("div", { className: cx('CBGroup-operator') },
                     React__default.createElement(ResultBox, { className: cx('CBGroup-operatorInput', isOpened ? 'is-active' : ''), ref: ref, allowInput: false, result: __1(OperationMap[value === null || value === void 0 ? void 0 : value.op]) ||
-                            ((_b = options_1.find(function (option) { return option.value === value.op; })) === null || _b === void 0 ? void 0 : _b.label), onResultChange: noop, onResultClick: onClick, disabled: disabled, placeholder: __1('Condition.cond_placeholder') },
-                        React__default.createElement("span", { className: cx('CBGroup-operatorCaret') },
-                            React__default.createElement(Icon, { icon: "caret", className: "icon" })))));
+                            ((_b = options_1.find(function (option) { return option.value === value.op; })) === null || _b === void 0 ? void 0 : _b.label), onResultChange: noop, onResultClick: onClick, disabled: disabled, placeholder: __1('Condition.cond_placeholder'), useMobileUI: true }, !isMobile() ? (React__default.createElement("span", { className: cx('CBGroup-operatorCaret') },
+                        React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null)));
             }));
         }
         return null;

package/esm/components/condition-builder/Value.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -32,26 +32,31 @@ var Value = /** @class */ (function (_super) {
                 onChange: onChange,
                 disabled: disabled
             });
-            input = React__default.createElement(FormulaPicker, __assign({}, formula));
+            var inputSettings = field.type !== 'custom' && (formula === null || formula === void 0 ? void 0 : formula.inputSettings)
+                ? __assign(__assign(__assign({}, formula === null || formula === void 0 ? void 0 : formula.inputSettings), field), { multiple: field.type === 'select' &&
+                        op &&
+                        typeof op === 'string' &&
+                        ['select_any_in', 'select_not_any_in'].includes(op) }) : undefined;
+            input = React__default.createElement(FormulaPicker, __assign({}, formula, { inputSettings: inputSettings }));
         }
         else if (field.type === 'text') {
-            input = (React__default.createElement(InputBox, { value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, placeholder: __(field.placeholder), disabled: disabled }));
+            input = (React__default.createElement(InputBox, { value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, placeholder: __(field.placeholder), disabled: disabled, useMobileUI: true }));
         }
         else if (field.type === 'number') {
-            input = (React__default.createElement(NumberInput, { placeholder: __(field.placeholder) || __('NumberInput.placeholder'), step: field.step, min: field.minimum, max: field.maximum, precision: field.precision, value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, disabled: disabled }));
+            input = (React__default.createElement(NumberInput, { placeholder: __(field.placeholder) || __('NumberInput.placeholder'), step: field.step, min: field.minimum, max: field.maximum, precision: field.precision, value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, disabled: disabled, useMobileUI: true }));
         }
         else if (field.type === 'date') {
-            input = (React__default.createElement(DatePicker, { placeholder: __(field.placeholder) || __('Date.placeholder'), format: field.format || 'YYYY-MM-DD', inputFormat: field.inputFormat || 'YYYY-MM-DD', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, timeFormat: "", disabled: disabled, popOverContainer: popOverContainer }));
+            input = (React__default.createElement(DatePicker, { placeholder: __(field.placeholder) || __('Date.placeholder'), format: field.format || 'YYYY-MM-DD', inputFormat: field.inputFormat || 'YYYY-MM-DD', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, timeFormat: "", disabled: disabled, popOverContainer: popOverContainer, useMobileUI: true }));
         }
         else if (field.type === 'time') {
-            input = (React__default.createElement(DatePicker, { viewMode: "time", placeholder: __(field.placeholder) || __('Time.placeholder'), format: field.format || 'HH:mm', inputFormat: field.inputFormat || 'HH:mm', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, dateFormat: "", timeFormat: field.format || 'HH:mm', disabled: disabled, popOverContainer: popOverContainer }));
+            input = (React__default.createElement(DatePicker, { viewMode: "time", placeholder: __(field.placeholder) || __('Time.placeholder'), format: field.format || 'HH:mm', inputFormat: field.inputFormat || 'HH:mm', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, dateFormat: "", timeFormat: field.format || 'HH:mm', disabled: disabled, popOverContainer: popOverContainer, useMobileUI: true }));
         }
         else if (field.type === 'datetime') {
-            input = (React__default.createElement(DatePicker, { placeholder: __(field.placeholder) || 'Time.placeholder', format: field.format || '', inputFormat: field.inputFormat || 'YYYY-MM-DD HH:mm', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, timeFormat: field.timeFormat || 'HH:mm', disabled: disabled, popOverContainer: popOverContainer }));
+            input = (React__default.createElement(DatePicker, { placeholder: __(field.placeholder) || __('Time.placeholder'), format: field.format || '', inputFormat: field.inputFormat || 'YYYY-MM-DD HH:mm', value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, timeFormat: field.timeFormat || 'HH:mm', disabled: disabled, popOverContainer: popOverContainer, useMobileUI: true }));
         }
         else if (field.type === 'select') {
             var autoComplete = field.autoComplete;
-            input = (React__default.createElement(SelectWithRemoteOptions, { simpleValue: true, options: field.options, placeholder: __(field.placeholder) || 'Select.placeholder', source: field.source, autoComplete: autoComplete, searchable: field.searchable, value: (_a = value !== null && value !== void 0 ? value : field.defaultValue) !== null && _a !== void 0 ? _a : '', data: data, onChange: onChange, multiple: op === 'select_any_in' || op === 'select_not_any_in', disabled: disabled, popOverContainer: popOverContainer }));
+            input = (React__default.createElement(SelectWithRemoteOptions, { simpleValue: true, options: field.options, placeholder: __(field.placeholder) || 'Select.placeholder', source: field.source, autoComplete: autoComplete, searchable: field.searchable, value: (_a = value !== null && value !== void 0 ? value : field.defaultValue) !== null && _a !== void 0 ? _a : '', data: data, onChange: onChange, multiple: op === 'select_any_in' || op === 'select_not_any_in', disabled: disabled, popOverContainer: popOverContainer, useMobileUI: true }));
         }
         else if (field.type === 'boolean') {
             input = (React__default.createElement(Switch, { value: value !== null && value !== void 0 ? value : field.defaultValue, onChange: onChange, disabled: disabled }));

package/esm/components/condition-builder/config.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/condition-builder/index.d.ts

@@ -20,12 +20,21 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
     onChange: (value?: ConditionGroupValue) => void;
     config?: ConditionBuilderConfig;
     disabled?: boolean;
+    draggable?: boolean;
     searchable?: boolean;
     fieldClassName?: string;
     formula?: FormulaPickerProps;
     popOverContainer?: any;
     renderEtrValue?: any;
-    selectMode?: 'list' | 'tree';
+    selectMode?: 'list' | 'tree' | 'chained';
+    isAddBtnVisibleOn?: (param: {
+        depth: number;
+        breadth: number;
+    }) => boolean;
+    isAddGroupBtnVisibleOn?: (param: {
+        depth: number;
+        breadth: number;
+    }) => boolean;
 }
 export interface ConditionBuilderState {
     tmpValue: ConditionGroupValue;

package/esm/components/condition-builder/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,6 +20,10 @@ var QueryBuilder = /** @class */ (function (_super) {
         return _this;
     }
     QueryBuilder.prototype.handleDragStart = function (e) {
+        var _a = this.props.draggable, draggable = _a === void 0 ? true : _a;
+        // draggable为false时不可拖拽
+        if (!draggable)
+            return;
         var target = e.currentTarget;
         var item = target.closest('[data-id]');
         this.dragTarget = item;
@@ -149,7 +153,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         return (React__default.createElement("div", { className: cx('CPGroup-result'), dangerouslySetInnerHTML: html }));
     };
     QueryBuilder.prototype.renderBody = function (onChange, value, popOverContainer) {
-        var _a = this.props, cx = _a.classnames, fieldClassName = _a.fieldClassName, fields = _a.fields, funcs = _a.funcs, showNot = _a.showNot, showANDOR = _a.showANDOR, data = _a.data, disabled = _a.disabled, searchable = _a.searchable, builderMode = _a.builderMode, formula = _a.formula, renderEtrValue = _a.renderEtrValue, selectMode = _a.selectMode;
+        var _a = this.props, cx = _a.classnames, fieldClassName = _a.fieldClassName, fields = _a.fields, funcs = _a.funcs, showNot = _a.showNot, showANDOR = _a.showANDOR, data = _a.data, disabled = _a.disabled, _b = _a.draggable, draggable = _b === void 0 ? true : _b, searchable = _a.searchable, builderMode = _a.builderMode, formula = _a.formula, renderEtrValue = _a.renderEtrValue, selectMode = _a.selectMode, isAddBtnVisibleOn = _a.isAddBtnVisibleOn, isAddGroupBtnVisibleOn = _a.isAddGroupBtnVisibleOn;
         var normalizedValue = Array.isArray(value === null || value === void 0 ? void 0 : value.children)
             ? __assign(__assign({}, value), { children: mapTree(value.children, function (value) {
                     if (value.id) {
@@ -157,7 +161,7 @@ var QueryBuilder = /** @class */ (function (_super) {
                     }
                     return __assign(__assign({}, value), { id: guid() });
                 }) }) : value;
-        return (React__default.createElement(ConditionGroup, { builderMode: builderMode, config: this.config, funcs: funcs || this.config.funcs, fields: fields || this.config.fields, value: normalizedValue, onChange: onChange, classnames: cx, fieldClassName: fieldClassName, removeable: false, onDragStart: this.handleDragStart, showANDOR: showANDOR, showNot: showNot, data: data, disabled: disabled, searchable: searchable, formula: formula, renderEtrValue: renderEtrValue, popOverContainer: popOverContainer, selectMode: selectMode }));
+        return (React__default.createElement(ConditionGroup, { builderMode: builderMode, config: this.config, funcs: funcs || this.config.funcs, fields: fields || this.config.fields, value: normalizedValue, onChange: onChange, classnames: cx, fieldClassName: fieldClassName, removeable: false, onDragStart: this.handleDragStart, showANDOR: showANDOR, showNot: showNot, data: data, disabled: disabled, draggable: draggable, searchable: searchable, formula: formula, renderEtrValue: renderEtrValue, popOverContainer: popOverContainer, selectMode: selectMode, depth: 1, isAddBtnVisibleOn: isAddBtnVisibleOn, isAddGroupBtnVisibleOn: isAddGroupBtnVisibleOn }));
     };
     QueryBuilder.prototype.render = function () {
         var _this = this;
@@ -167,7 +171,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         }
         return (React__default.createElement(PickerContainer, { classnames: cx, classPrefix: classPrefix, translate: translate, locale: locale, onConfirm: onFinalChange, value: value, size: 'md', popOverContainer: popOverContainer, bodyRender: function (params) { return _this.renderBody(params.onChange, params.value); }, title: title }, function (_a) {
             var onClick = _a.onClick, isOpened = _a.isOpened;
-            return (React__default.createElement(ResultBox, { classnames: cx, classPrefix: classPrefix, translate: translate, locale: locale, className: cx('CBGroup-result', { 'is-active': isOpened }), allowInput: false, clearable: true, result: value, itemRender: _this.highlightValue, onResultChange: noop, onClear: _this.handleClear, disabled: disabled, borderMode: 'full', placeholder: placeholder, actions: pickerIcon && (React__default.createElement("span", { className: cx('CBPicker-trigger'), onClick: onClick }, pickerIcon)), onResultClick: onClick }));
+            return (React__default.createElement(ResultBox, { classnames: cx, classPrefix: classPrefix, translate: translate, locale: locale, className: cx('CBGroup-result', { 'is-active': isOpened }), allowInput: false, clearable: true, result: value, itemRender: _this.highlightValue, onResultChange: noop, onClear: _this.handleClear, disabled: disabled, borderMode: 'full', placeholder: placeholder, actions: pickerIcon && (React__default.createElement("span", { className: cx('CBPicker-trigger'), onClick: onClick }, pickerIcon)), useMobileUI: true, onResultClick: onClick }));
         }));
     };
     __decorate([