amis-rev-ui 6.13.0

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

@@ -0,0 +1,242 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { animation, findTreeIndex, getTree, spliceTree, mapTree, guid, findTree, noop, autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import ConditionGroup from './Group.js';
+import defaultConfig from './config.js';
+import PickerContainer from '../PickerContainer.js';
+import ResultBox from '../ResultBox.js';
+
+var QueryBuilder = /** @class */ (function (_super) {
+    __extends(QueryBuilder, _super);
+    function QueryBuilder() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.config = __assign(__assign({}, defaultConfig), _this.props.config);
+        _this.lastMoveAt = 0;
+        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;
+        // this.dragNextSibling = item.nextElementSibling;
+        this.host = item.closest('[data-group-id]');
+        var ghost = item.cloneNode(true);
+        ghost.classList.add('is-ghost');
+        this.ghost = ghost;
+        e.dataTransfer.setDragImage(item.firstChild, 0, 0);
+        target.addEventListener('dragend', this.handleDragEnd);
+        document.body.addEventListener('dragover', this.handleDragOver);
+        document.body.addEventListener('drop', this.handleDragDrop);
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+        // 应该是 chrome 的一个bug，如果你马上修改，会马上执行 dragend
+        setTimeout(function () {
+            item.classList.add('is-dragging');
+            // item.parentElement!.insertBefore(
+            //   item,
+            //   item.parentElement!.firstElementChild
+            // ); // 挪到第一个，主要是因为样式问题。
+        }, 5);
+    };
+    QueryBuilder.prototype.handleDragOver = function (e) {
+        e.preventDefault();
+        var item = e.target.closest('[data-id]');
+        var dx = e.clientX - this.lastX;
+        var dy = e.clientY - this.lastY;
+        var d = Math.max(Math.abs(dx), Math.abs(dy));
+        var now = Date.now();
+        // 没移动还是不要处理，免得晃动个不停。
+        if (d < 5) {
+            if (this.lastMoveAt === 0) ;
+            else if (now - this.lastMoveAt > 500) {
+                var host = e.target.closest('[data-group-id]');
+                if (host) {
+                    this.host = host;
+                    this.lastMoveAt = now;
+                    this.lastX = 0;
+                    this.lastY = 0;
+                    this.handleDragOver(e);
+                    return;
+                }
+            }
+            return;
+        }
+        this.lastMoveAt = now;
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+        if (!item ||
+            item.classList.contains('is-ghost') ||
+            item.closest('[data-group-id]') !== this.host) {
+            return;
+        }
+        var container = item.parentElement;
+        var children = [].slice.apply(container.children);
+        var idx = children.indexOf(item);
+        if (this.ghost.parentElement !== container) {
+            container.appendChild(this.ghost);
+        }
+        var rect = item.getBoundingClientRect();
+        var isAfter = dy > 0 && e.clientY > rect.top + rect.height / 2;
+        var gIdx = isAfter ? idx : idx - 1;
+        var cgIdx = children.indexOf(this.ghost);
+        if (gIdx !== cgIdx) {
+            animation.capture(container);
+            if (gIdx === children.length - 1) {
+                container.appendChild(this.ghost);
+            }
+            else {
+                container.insertBefore(this.ghost, children[gIdx + 1]);
+            }
+            animation.animateAll();
+        }
+    };
+    QueryBuilder.prototype.handleDragDrop = function () {
+        var _a, _b;
+        var onChange = this.props.onChange;
+        var fromId = this.dragTarget.getAttribute('data-id');
+        var toId = this.host.getAttribute('data-group-id');
+        var children = [].slice.call(this.ghost.parentElement.children);
+        var idx = children.indexOf(this.dragTarget);
+        if (~idx) {
+            children.splice(idx, 1);
+        }
+        var toIndex = children.indexOf(this.ghost);
+        var value = this.props.value;
+        var indexes = findTreeIndex([value], function (item) { return item.id === fromId; });
+        if (indexes) {
+            var origin_1 = getTree([value], indexes.concat());
+            _a = __read(spliceTree([value], indexes, 1), 1), value = _a[0];
+            var indexes2 = findTreeIndex([value], function (item) { return item.id === toId; });
+            if (indexes2) {
+                _b = __read(spliceTree([value], indexes2.concat(toIndex), 0, origin_1), 1), value = _b[0];
+                onChange(value);
+            }
+        }
+    };
+    QueryBuilder.prototype.handleDragEnd = function (e) {
+        var _a;
+        var target = e.target;
+        target.removeEventListener('dragend', this.handleDragEnd);
+        document.body.removeEventListener('dragover', this.handleDragOver);
+        document.body.removeEventListener('drop', this.handleDragDrop);
+        this.dragTarget.classList.remove('is-dragging');
+        // if (this.dragNextSibling) {
+        //   this.dragTarget.parentElement!.insertBefore(
+        //     this.dragTarget,
+        //     this.dragNextSibling
+        //   );
+        // } else {
+        //   this.dragTarget.parentElement!.appendChild(this.dragTarget);
+        // }
+        delete this.dragTarget;
+        // delete this.dragNextSibling;
+        (_a = this.ghost.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.ghost);
+        delete this.ghost;
+    };
+    QueryBuilder.prototype.handleClear = function () {
+        this.props.onChange();
+    };
+    QueryBuilder.prototype.highlightValue = function (value) {
+        var _a = this.props, cx = _a.classnames, __ = _a.translate;
+        var html = {
+            __html: "<span class=\"label label-info\">".concat(__('Condition.configured'), "</span>")
+        };
+        return (React__default.createElement("div", { className: cx('CPGroup-result'), dangerouslySetInnerHTML: html }));
+    };
+    QueryBuilder.prototype.renderBody = function (onChange, value, popOverContainer) {
+        var _a;
+        var _b = this.props, cx = _b.classnames, fieldClassName = _b.fieldClassName, fields = _b.fields, funcs = _b.funcs, showNot = _b.showNot, showANDOR = _b.showANDOR, data = _b.data, _c = _b.draggable, draggable = _c === void 0 ? true : _c, searchable = _b.searchable, builderMode = _b.builderMode, formula = _b.formula, renderEtrValue = _b.renderEtrValue, selectMode = _b.selectMode, isAddBtnVisibleOn = _b.isAddBtnVisibleOn, isAddGroupBtnVisibleOn = _b.isAddGroupBtnVisibleOn, showIf = _b.showIf, uniqueFields = _b.uniqueFields, formulaForIf = _b.formulaForIf, testIdBuilder = _b.testIdBuilder;
+        var disabled = (_a = value === null || value === void 0 ? void 0 : value.disabled) !== null && _a !== void 0 ? _a : this.props.disabled;
+        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) {
+                        return value;
+                    }
+                    return __assign(__assign({}, value), { id: guid() });
+                }) }) : value;
+        var finalFields = fields || this.config.fields;
+        if (uniqueFields && Array.isArray(value === null || value === void 0 ? void 0 : value.children)) {
+            finalFields = mapTree(finalFields, function (field) {
+                var selected = findTree(value === null || value === void 0 ? void 0 : value.children, function (rule) { var _a, _b; return ((_a = rule.left) === null || _a === void 0 ? void 0 : _a.type) === 'field' && ((_b = rule.left) === null || _b === void 0 ? void 0 : _b.field) === field.name; });
+                if (selected) {
+                    return __assign(__assign({}, field), { disabled: true });
+                }
+                return field;
+            });
+        }
+        return (React__default.createElement(ConditionGroup, { builderMode: builderMode, config: this.config, funcs: funcs || this.config.funcs, fields: finalFields, 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, showIf: showIf, formulaForIf: formulaForIf, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('group') }));
+    };
+    QueryBuilder.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, cx = _b.classnames, placeholder = _b.placeholder, _c = _b.embed, embed = _c === void 0 ? true : _c, pickerIcon = _b.pickerIcon, locale = _b.locale, translate = _b.translate, classPrefix = _b.classPrefix, onFinalChange = _b.onChange, value = _b.value, title = _b.title, popOverContainer = _b.popOverContainer, testIdBuilder = _b.testIdBuilder, mobileUI = _b.mobileUI;
+        var disabled = (_a = value === null || value === void 0 ? void 0 : value.disabled) !== null && _a !== void 0 ? _a : this.props.disabled;
+        if (embed) {
+            return this.renderBody(onFinalChange, value, popOverContainer);
+        }
+        /** 因为 ConditionBuilder特殊的数据结构，提供给 ResultBox 的需要处理一下 */
+        var resultBoxValue = embed === false
+            ? !value ||
+                !(value === null || value === void 0 ? void 0 : value.hasOwnProperty('children')) ||
+                !Array.isArray(value.children) ||
+                value.children.length < 1
+                ? undefined
+                : value
+            : value;
+        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: resultBoxValue, 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)), mobileUI: mobileUI, onResultClick: onClick, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('result-box') }));
+        }));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "handleDragStart", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [DragEvent]),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "handleDragOver", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "handleDragDrop", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event]),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "handleDragEnd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "handleClear", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], QueryBuilder.prototype, "highlightValue", null);
+    return QueryBuilder;
+}(React__default.Component));
+var ConditionBuilder = themeable(localeable(uncontrollable(QueryBuilder, {
+    value: 'onChange'
+})));
+
+export { QueryBuilder, ConditionBuilder as default };

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

@@ -0,0 +1,116 @@
+import type { BaseApiObject, AMISOperatorType } from 'amis-rev-core';
+export type FieldTypes = 'text' | 'number' | 'boolean' | 'date' | 'time' | 'datetime' | 'select' | 'custom';
+export type FieldItem = {
+    type: 'text';
+    operators: Array<AMISOperatorType>;
+};
+interface customOperator {
+    lable: string;
+    value: string;
+    values?: any[];
+}
+interface BaseField {
+    type: FieldTypes;
+    label: string;
+    valueTypes?: Array<'value' | 'field' | 'func'>;
+    operators?: Array<string | customOperator>;
+    funcs?: Array<string>;
+    defaultValue?: any;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export type FieldGroup = {
+    label: string;
+    children: Array<FieldSimple>;
+};
+interface TextField extends BaseField {
+    name: string;
+    type: 'text';
+    minLength?: number;
+    maxLength?: number;
+}
+interface NumberField extends BaseField {
+    name: string;
+    type: 'number';
+    maximum?: number;
+    minimum?: number;
+    step?: number;
+    precision?: number;
+}
+interface DateField extends BaseField {
+    name: string;
+    type: 'date';
+    format?: string;
+    inputFormat?: string;
+    minDate?: any;
+    maxDate?: any;
+}
+interface TimeField extends BaseField {
+    name: string;
+    type: 'time';
+    minTime?: any;
+    maxTime?: any;
+    format?: string;
+    inputFormat?: string;
+}
+interface DatetimeField extends BaseField {
+    type: 'datetime';
+    name: string;
+    format?: string;
+    inputFormat?: string;
+    timeFormat?: string;
+}
+interface SelectField extends BaseField {
+    type: 'select';
+    name: string;
+    multiple?: boolean;
+    options?: Array<any>;
+    source?: string | BaseApiObject;
+    searchable?: boolean;
+    maxTagCount?: number;
+    overflowTagPopover?: any;
+    /**
+     * 自动完成 API，当输入部分文字的时候，会将这些文字通过 ${term} 可以取到，发送给接口。
+     * 接口可以返回匹配到的选项，帮助用户输入。
+     */
+    autoComplete?: string | BaseApiObject;
+}
+interface BooleanField extends BaseField {
+    type: 'boolean';
+    name: string;
+}
+export interface CustomField extends BaseField {
+    type: 'custom';
+    name: string;
+    value: any;
+}
+interface GroupField {
+    type: 'group';
+    label: string;
+    name: string;
+    children: Array<FieldSimple>;
+}
+export type FieldSimple = TextField | NumberField | DateField | TimeField | DatetimeField | SelectField | BooleanField | CustomField;
+export type ConditionBuilderField = FieldSimple | FieldGroup | GroupField;
+interface FuncGroup {
+    label: string;
+    children: Array<ConditionFieldFunc>;
+}
+export interface ConditionFieldFunc {
+    type: string;
+    returnType: FieldTypes;
+    args: Array<ConditionBuilderFuncArg>;
+    label: string;
+}
+export interface ConditionBuilderFuncArg extends BaseField {
+    isOptional?: boolean;
+}
+export type ConditionBuilderFuncs = Array<ConditionFieldFunc | FuncGroup>;
+export type ConditionBuilderFields = Array<ConditionBuilderField>;
+export type ConditionBuilderType = {
+    defaultOp?: AMISOperatorType;
+    operators: Array<AMISOperatorType>;
+    placeholder?: string;
+    valueTypes?: Array<'value' | 'field' | 'func'>;
+};
+export {};

package/esm/components/formula/CodeEditor.js

@@ -0,0 +1,99 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __assign, __read } from 'tslib';
+import { themeable } from 'amis-rev-core';
+import React__default from 'react';
+import { CodeMirrorEditor } from '../CodeMirror.js';
+import { editorFactory, FormulaPlugin } from './plugin.js';
+
+function CodeEditor(props, ref) {
+    var cx = props.classnames, className = props.className, value = props.value, onChange = props.onChange, editorDidMount = props.editorDidMount, onFocus = props.onFocus, onBlur = props.onBlur, functions = props.functions, variables = props.variables, evalMode = props.evalMode, singleLine = props.singleLine, autoFocus = props.autoFocus, editorTheme = props.editorTheme, defaultTheme = props.theme, editorOptions = props.editorOptions, placeholder = props.placeholder, highlightMode = props.highlightMode;
+    var pluginRef = React__default.useRef();
+    var editorFactory$1 = React__default.useCallback(function (dom, cm) {
+        var theme = (editorTheme !== null && editorTheme !== void 0 ? editorTheme : ((defaultTheme || '').includes('dark') ? 'dark' : 'light')) === 'dark'
+            ? 'base16-dark'
+            : 'idea';
+        var options = __assign({ autoFocus: autoFocus, indentUnit: 2, lineNumbers: true, lineWrapping: true, // 自动换行
+            theme: theme, placeholder: placeholder }, editorOptions);
+        if (singleLine) {
+            options = __assign({ lineNumbers: false, indentWithTabs: false, indentUnit: 4, lineWrapping: false, scrollbarStyle: null, theme: theme, placeholder: placeholder }, editorOptions);
+        }
+        return editorFactory(dom, cm, props, options);
+    }, []);
+    var _a = __read(React__default.useState(props.readOnly), 2), readOnly = _a[0], setReadOnly = _a[1];
+    React__default.useEffect(function () { return setReadOnly(props.readOnly); }, [props.readOnly]);
+    React__default.useEffect(function () { var _a, _b; return (_b = (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.setOption('placeholder', placeholder); }, [placeholder]);
+    // singleLine 模式下，禁止输入换行符
+    var onEditorBeforeChange = React__default.useCallback(function (cm, event) {
+        // Identify typing events that add a newline to the buffer.
+        var hasTypedNewline = event.origin === '+input' &&
+            typeof event.text === 'object' &&
+            event.text.join('') === '';
+        // Prevent newline characters from being added to the buffer.
+        if (hasTypedNewline) {
+            return event.cancel();
+        }
+        // Identify paste events.
+        var hasPastedNewline = event.origin === 'paste' &&
+            typeof event.text === 'object' &&
+            event.text.length > 1;
+        // Format pasted text to replace newlines with spaces.
+        if (hasPastedNewline) {
+            var newText = event.text.join(' ');
+            return event.update(null, null, [newText]);
+        }
+        return null;
+    }, []);
+    var onEditorMount = React__default.useCallback(function (cm, editor) {
+        var plugin = (pluginRef.current = new FormulaPlugin(editor, cm));
+        plugin.setEvalMode(!!evalMode);
+        plugin.setFunctions(functions || []);
+        plugin.setVariables(variables || []);
+        plugin.setHighlightMode(highlightMode || 'formula');
+        editorDidMount === null || editorDidMount === void 0 ? void 0 : editorDidMount(cm, editor, plugin);
+        plugin.autoMarkText();
+        // 单行模式，不允许输入换行，同时原来的换行符也要去掉
+        if (singleLine) {
+            editor.on('beforeChange', onEditorBeforeChange);
+            var value_1 = editor.getValue();
+            if (value_1 && /[\n\r]/.test(value_1)) {
+                // 初始数据有换行，不允许直接编辑
+                // 只能弹窗弹出非单行模式编辑
+                setReadOnly(true);
+                editor.setValue(value_1.replace(/[\n\r]+/g, ''));
+            }
+        }
+    }, [evalMode, functions, variables]);
+    React__default.useEffect(function () {
+        return function () {
+            var _a, _b;
+            (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.editor.off('beforeChange', onEditorBeforeChange);
+            (_b = pluginRef.current) === null || _b === void 0 ? void 0 : _b.dispose();
+        };
+    }, []);
+    React__default.useImperativeHandle(ref, function () {
+        return {
+            insertContent: function (value, type) { var _a; return (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.insertContent(value, type); },
+            setValue: function (value) { var _a; return (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value); },
+            getValue: function () { var _a; return (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.getValue(); },
+            setDisableAutoMark: function (value) { var _a; return (_a = pluginRef.current) === null || _a === void 0 ? void 0 : _a.setDisableAutoMark(value); }
+        };
+    });
+    React__default.useEffect(function () {
+        var plugin = pluginRef.current;
+        if (!plugin) {
+            return;
+        }
+        plugin.setEvalMode(!!evalMode);
+        plugin.setFunctions(functions || []);
+        plugin.setVariables(variables || []);
+        plugin.autoMarkText();
+    }, [evalMode, functions, variables, value]);
+    return (React__default.createElement(CodeMirrorEditor, { className: cx('FormulaCodeEditor', className, singleLine ? 'FormulaCodeEditor--singleLine' : ''), value: value, onChange: onChange, editorFactory: editorFactory$1, editorDidMount: onEditorMount, onFocus: onFocus, onBlur: onBlur, readOnly: readOnly }));
+}
+var CodeEditor$1 = themeable(React__default.forwardRef(CodeEditor));
+
+export { CodeEditor$1 as default };