amis-ui 3.1.0 → 3.2.0

package/esm/components/calendar/Calendar.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -8,7 +8,7 @@ import React__default from 'react';
 import CustomCalendarContainer from './CalendarContainer.js';
 import cx from 'classnames';
 import moment from 'moment';
-import { utils, convertArrayValueToMoment, themeable } from 'amis-core';
+import { utils, convertArrayValueToMoment, isMobile, themeable } from 'amis-core';
 import 'moment/locale/zh-cn';
 import 'moment/locale/de';
 
@@ -236,6 +236,9 @@ var BaseDatePicker = /** @class */ (function (_super) {
                 _this.state.viewDate ||
                 moment()).clone();
             var date = convertArrayValueToMoment(value, types, currentDate);
+            if ((types === null || types === void 0 ? void 0 : types[1]) === 'quarter') {
+                date = date.startOf('quarter').date(currentDate.date());
+            }
             if (!_this.props.value) {
                 _this.setState({
                     selectedDate: date,
@@ -437,7 +440,8 @@ var BaseDatePicker = /** @class */ (function (_super) {
             'updateOn',
             'useMobileUI',
             'showToolbar',
-            'embed'
+            'embed',
+            'env'
         ].forEach(function (key) { return (props[key] = _this.props[key]); });
         return props;
     };
@@ -476,7 +480,7 @@ var BaseDatePicker = /** @class */ (function (_super) {
                     : timeFormat
                         ? 'rdtTime'
                         : '') },
-            React__default.createElement("div", { key: "dt", className: cx('rdtPicker', timeFormat && !dateFormat
+            React__default.createElement("div", { key: "dt", className: cx('rdtPicker', { 'is-mobile-year': isMobile() && viewMode === 'years' }, { 'is-mobile-embed': isMobile() && viewProps.embed }, timeFormat && !dateFormat
                     ? 'rdtPickerTimeWithoutD'
                     : timeFormat && dateFormat
                         ? 'rdtPickerTime'

package/esm/components/calendar/CalendarContainer.js

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

package/esm/components/calendar/DaysView.d.ts

@@ -2,6 +2,7 @@
 import moment from 'moment';
 import React from 'react';
 import { LocaleProps, ClassNamesFn } from 'amis-core';
+import type { RendererEnv } from 'amis-core';
 import { PickerOption } from '../PickerColumn';
 import { DateType } from './Calendar';
 import type { TimeScale } from './TimeView';
@@ -39,6 +40,7 @@ interface CustomDaysViewProps extends LocaleProps {
         content: any;
         className?: string;
     }>;
+    env?: RendererEnv;
     largeMode?: boolean;
     todayActiveStyle?: React.CSSProperties;
     onScheduleClick?: (scheduleData: any) => void;
@@ -89,6 +91,7 @@ export declare class CustomDaysView extends React.Component<CustomDaysViewProps>
     scrollToTop: (type: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number, i: number, label?: string) => void;
     confirm: () => void;
     cancel: () => void;
+    curfilterHtml: (content: any) => any;
     renderDay: (props: any, currentDate: moment.Moment) => React.JSX.Element;
     /** 时间选择器数据源 */
     computedTimeOptions(timeScale: TimeScale): {

package/esm/components/calendar/DaysView.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -114,9 +114,16 @@ var CustomDaysView = /** @class */ (function (_super) {
         _this.cancel = function () {
             _this.props.onClose && _this.props.onClose();
         };
+        _this.curfilterHtml = function (content) {
+            var env = _this.props.env;
+            if (env === null || env === void 0 ? void 0 : env.filterHtml) {
+                return env.filterHtml(content);
+            }
+            return content;
+        };
         _this.renderDay = function (props, currentDate) {
             var todayActiveStyle = props.todayActiveStyle; /** 只有today才会传入这个属性 */
-            var _a = _this.props, cx = _a.classnames, __ = _a.translate;
+            var _a = _this.props, cx = _a.classnames, __ = _a.translate; _a.env;
             var injectedProps = omit(props, ['todayActiveStyle']);
             /** 某些情况下需要用inline style覆盖动态class，需要hack important的样式 */
             var todayDomRef = function (node) {
@@ -196,6 +203,9 @@ var CustomDaysView = /** @class */ (function (_super) {
                         });
                         // 最多展示3个
                         showSchedule_1 = showSchedule_1.slice(0, 3);
+                        var locale = _this.props.viewDate.localeData();
+                        // 以周几作为一周的开始，0表示周日，1表示周一
+                        var firstDayOfWeek_1 = locale.firstDayOfWeek();
                         var scheduleDiv = showSchedule_1.map(function (item, index) {
                             var diffDays = moment(item.endTime).diff(moment(item.startTime), 'days');
                             /* 存在天数跨度小于1，但是横跨2天的case */
@@ -206,13 +216,15 @@ var CustomDaysView = /** @class */ (function (_super) {
                             }
                             /* 前面的计算结果是闭区间，所以最终结果要补足1 */
                             diffDays += 1;
-                            var width = item.width ||
-                                Math.min(diffDays, 7 - moment(item.startTime).weekday());
+                            var endWidth = 7 - (moment(item.startTime).weekday() - firstDayOfWeek_1 + 1);
+                            var width = item.width || Math.min(diffDays, endWidth) || 1;
                             return (React__default.createElement("div", { key: injectedProps.key + 'content' + index, className: cx('ScheduleCalendar-large-schedule-content', item.className), style: { width: width + '00%' }, onClick: function () {
                                     return _this.props.onScheduleClick &&
                                         _this.props.onScheduleClick(scheduleData_1);
                                 } },
-                                React__default.createElement("div", { className: cx('ScheduleCalendar-text-overflow') }, item.content)));
+                                React__default.createElement("div", { className: cx('ScheduleCalendar-text-overflow'), dangerouslySetInnerHTML: {
+                                        __html: _this.curfilterHtml(item.content)
+                                    } })));
                         });
                         return (React__default.createElement("td", __assign({}, injectedProps),
                             React__default.createElement("div", { className: cx('ScheduleCalendar-large-day-wrap') },

package/esm/components/calendar/MonthsView.js

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

package/esm/components/calendar/QuartersView.d.ts

@@ -15,13 +15,24 @@ export interface QuarterViewProps extends LocaleProps, ThemeProps {
     renderQuarter: any;
     isValidDate: (date: moment.Moment) => boolean;
     hideHeader?: boolean;
+    useMobileUI?: boolean;
+    onConfirm?: (value: number[], types?: string[]) => void;
+    onClose?: () => void;
 }
 export declare class QuarterView extends React.Component<QuarterViewProps> {
+    state: {
+        columns: never[];
+        pickerValue: number[];
+    };
     renderYear(): React.JSX.Element | null;
     renderQuarters(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>[];
     renderQuarter: (props: any, quartar: number, year: number, date: moment.Moment) => React.JSX.Element;
     updateSelectedQuarter: (event: any) => void;
     alwaysValidDate(): boolean;
+    onPickerConfirm: (value: number[]) => void;
+    onPickerChange: (value: number[], index: number) => void;
+    cancel(): void;
+    renderPicker(): React.JSX.Element;
     render(): React.JSX.Element;
 }
 declare const _default: {

package/esm/components/calendar/QuartersView.js

@@ -1,17 +1,22 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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.0
+ * amis-ui v3.2.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, 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.0
+ * amis-ui v3.2.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;