amis-rev-ui 6.13.0

package/esm/components/Signature.js

@@ -0,0 +1,294 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read } from 'tslib';
+import React__default from 'react';
+import { themeable, localeable, isMobileDevice, resizeSensor } from 'amis-rev-core';
+import SmoothSignature from 'smooth-signature';
+import Button from './Button.js';
+import './404.js';
+import './Alert.js';
+import './ContextMenu.js';
+import './AsideNav.js';
+import './Avatar.js';
+import './Breadcrumb.js';
+import './Checkbox.js';
+import './Collapse.js';
+import './CollapseGroup.js';
+import './DatePicker.js';
+import './DateRangePicker.js';
+import './Drawer.js';
+import './Tabs.js';
+import './Editor.js';
+import './DiffEditor.js';
+import './Html.js';
+import { Icon } from './icons.js';
+import './Layout.js';
+import FinalModal from './Modal.js';
+import './Radios.js';
+import './Range.js';
+import './Rating.js';
+import './Select.js';
+import './SparkLine.js';
+import Spinner from './Spinner.js';
+import './Switch.js';
+import './Textarea.js';
+import './TitleBar.js';
+import './Toast.js';
+import './Tooltip.js';
+import './TooltipWrapper.js';
+import './Tree.js';
+import './Alert2.js';
+import './Transfer.js';
+import './TabsTransfer.js';
+import './ResultBox.js';
+import './InputBox.js';
+import './ListGroup.js';
+import './NumberInput.js';
+import './ArrayInput.js';
+import './SearchBox.js';
+import './AnchorNav.js';
+import './Selection.js';
+import './GroupedSelection.js';
+import './ChainedSelection.js';
+import './TableSelection.js';
+import './TreeSelection.js';
+import './AssociatedSelection.js';
+import './PullRefresh.js';
+import './table/index.js';
+import './schema-editor/SchemaVariableListPicker.js';
+import './schema-editor/SchemaVariableList.js';
+import './formula/VariableList.js';
+import './formula/Picker.js';
+import './formula/Editor.js';
+import './formula/CodeEditor.js';
+import './PickerContainer.js';
+import './json-schema/index.js';
+import './Badge.js';
+import './WithRemoteConfig.js';
+import './condition-builder/index.js';
+import './CityArea.js';
+import './ListMenu.js';
+import './Input.js';
+import './schema-editor/index.js';
+import './LocationPicker.js';
+import './PopUp.js';
+import './Cascader.js';
+import './TransferDropDown.js';
+import './TabsTransferPicker.js';
+import './ResultList.js';
+import './TransferPicker.js';
+import './UserSelect.js';
+import './UserTabSelect.js';
+import './table/HeadCellDropDown.js';
+import './Card.js';
+import './GridNav.js';
+import './Link.js';
+import './virtual-list/index.js';
+import 'hoist-non-react-statics';
+import 'mobx-state-tree';
+import 'mobx-react';
+import './PopOverContainer.js';
+import './Pagination.js';
+import './Progress.js';
+import './Steps.js';
+import './Tag.js';
+import './Timeline.js';
+import './ImageGallery.js';
+import './BaiduMapPicker.js';
+import './MultilineText.js';
+import './Form.js';
+import './FormField.js';
+import './Combo.js';
+import './InputTable.js';
+import './ConfirmBox.js';
+import './DndContainer.js';
+import './menu/index.js';
+import './InputBoxWithSuggestion.js';
+import './CodeMirror.js';
+import './OverflowTpl.js';
+import './VerificationCode.js';
+import './Slider.js';
+import './Shape.js';
+import 'amis-rev-ui';
+import 'lodash/debounce';
+import 'react-overlays';
+import './DropdownContextMenus.js';
+import './HorizontalScroll.js';
+import './AutoFoldedList.js';
+import './MixedInput.js';
+import 'lodash/isFunction';
+import 'lodash/pick';
+import '../locale/zh-CN.js';
+import '../locale/en-US.js';
+import '../locale/de-DE.js';
+import '../themes/cxd.js';
+import '../themes/ang.js';
+import '../themes/antd.js';
+import '../themes/dark.js';
+import './schema-editor/Common.js';
+import '../HTMLFilterContext.js';
+
+/**
+ * @file Signature.tsx 签名组件
+ *
+ * @created: 2024/03/04
+ */
+var Signature = function (props) {
+    var __ = props.translate, cx = props.classnames, className = props.className, width = props.width, height = props.height;
+    var embedMobile = props.embed && isMobileDevice() && window.innerWidth < 768;
+    var _a = __read(React__default.useState(null), 2), sign = _a[0], setSign = _a[1];
+    var _b = __read(React__default.useState(false), 2), open = _b[0], setOpen = _b[1];
+    var _c = __read(React__default.useState(false), 2), uploading = _c[0], setUploading = _c[1];
+    var _d = __read(React__default.useState(!!embedMobile), 2), fullScreen = _d[0], setFullScreen = _d[1];
+    var _e = __read(React__default.useState(props.embed || false), 2), embed = _e[0], setEmbed = _e[1];
+    var _f = __read(React__default.useState(props.value), 2), data = _f[0], setData = _f[1];
+    var wrapper = React__default.useRef(null);
+    React__default.useEffect(function () {
+        if (!wrapper.current) {
+            return;
+        }
+        var unSensor = resizeSensor(wrapper.current, resize);
+        return function () {
+            setSign(null);
+            unSensor();
+        };
+    }, []);
+    React__default.useEffect(function () { return setData(props.value); }, [props.value]);
+    React__default.useEffect(function () { return setEmbed(props.embed || false); }, [props.embed]);
+    var clear = React__default.useCallback(function () {
+        var _a;
+        if (sign) {
+            sign.clear();
+        }
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
+    }, [sign]);
+    var undo = React__default.useCallback(function () {
+        if (sign) {
+            sign.undo();
+        }
+    }, [sign]);
+    var confirm = React__default.useCallback(function () {
+        var _a;
+        if (!sign) {
+            return;
+        }
+        var base64 = fullScreen
+            ? sign.getRotateCanvas(-90).toDataURL()
+            : sign.toDataURL();
+        setData(base64);
+        setUploading(true);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, base64).then(function () {
+            setUploading(false);
+        });
+    }, [sign]);
+    var resize = React__default.useCallback(function () {
+        setSign(null);
+    }, []);
+    var handleFullScreen = React__default.useCallback(function () {
+        setFullScreen(true);
+        setSign(null);
+    }, []);
+    var handleUnFullScreen = React__default.useCallback(function () {
+        setFullScreen(false);
+        setSign(null);
+    }, []);
+    var handleCloseModal = React__default.useCallback(function () {
+        setOpen(false);
+        setFullScreen(!!embedMobile);
+        setSign(null);
+    }, []);
+    var handleConfirmModal = React__default.useCallback(function () {
+        confirm();
+        handleCloseModal();
+    }, [sign]);
+    var initCanvas = React__default.useCallback(function (element) {
+        var width = props.width, height = props.height;
+        var clientWidth = element.parentElement.clientWidth;
+        var clientHeight = element.parentElement.clientHeight;
+        var defaultWidth = width || clientWidth - (fullScreen ? 40 : 0);
+        var defaultHeight = fullScreen
+            ? clientHeight
+            : Math.min(height || clientWidth / 2 - 40, clientHeight - 40);
+        var signature = new SmoothSignature(element, {
+            width: Math.max(defaultWidth, 200),
+            height: Math.max(defaultHeight, 160),
+            color: props.color || '#000',
+            bgColor: props.bgColor || '#efefef'
+        });
+        setSign(signature);
+    }, [width, height, fullScreen]);
+    function embedCanvasRef(ref) {
+        if (open && ref && !sign) {
+            initCanvas(ref);
+        }
+    }
+    function canvasRef(ref) {
+        if (ref && !sign) {
+            initCanvas(ref);
+        }
+    }
+    function renderTool(right) {
+        if (right === void 0) { right = true; }
+        var clearBtnLabel = props.clearBtnLabel, clearBtnIcon = props.clearBtnIcon, undoBtnLabel = props.undoBtnLabel, undoBtnIcon = props.undoBtnIcon, confirmBtnLabel = props.confirmBtnLabel, confirmBtnIcon = props.confirmBtnIcon, embedConfirmLabel = props.embedConfirmLabel, embedConfirmIcon = props.embedConfirmIcon, ebmedCancelLabel = props.ebmedCancelLabel, ebmedCancelIcon = props.ebmedCancelIcon;
+        return (React__default.createElement("div", { className: cx('Signature-Tool') },
+            React__default.createElement("div", { className: "actions" },
+                React__default.createElement("div", { className: "left-actions" },
+                    React__default.createElement(Button, { onClick: clear, tooltip: clearBtnLabel || __('Signature.clear') },
+                        clearBtnLabel,
+                        React__default.createElement(Icon, { icon: clearBtnIcon || 'close', className: cx('icon', { 'ml-1': clearBtnLabel }) })),
+                    React__default.createElement(Button, { onClick: undo, tooltip: undoBtnLabel || __('Signature.undo') },
+                        undoBtnLabel,
+                        React__default.createElement(Icon, { icon: undoBtnIcon || 'undo-normal', className: cx('icon', { 'ml-1': undoBtnLabel }) })),
+                    embedMobile ? null : fullScreen ? (React__default.createElement(Button, { onClick: handleUnFullScreen },
+                        React__default.createElement(Icon, { icon: "un-fullscreen", className: "icon" }))) : (React__default.createElement(Button, { onClick: handleFullScreen },
+                        React__default.createElement(Icon, { icon: "full-screen", className: "icon" })))),
+                right ? (React__default.createElement("div", { className: "right-actions" }, embed ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Button, { onClick: handleCloseModal },
+                        ebmedCancelLabel || __('Signature.cancel'),
+                        React__default.createElement(Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
+                    React__default.createElement(Button, { onClick: handleConfirmModal, level: "primary" },
+                        embedConfirmLabel || __('Signature.confirm'),
+                        React__default.createElement(Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))) : (React__default.createElement(Button, { onClick: confirm, level: "primary" },
+                    confirmBtnLabel || __('Signature.confirm'),
+                    React__default.createElement(Icon, { icon: confirmBtnIcon, className: "icon ml-1" }))))) : null)));
+    }
+    function renderEmbedSignature() {
+        var embedConfirmLabel = props.embedConfirmLabel, ebmedCancelLabel = props.ebmedCancelLabel, icon = props.embedBtnIcon, embedBtnLabel = props.embedBtnLabel, embedConfirmIcon = props.embedConfirmIcon, ebmedCancelIcon = props.ebmedCancelIcon;
+        return (React__default.createElement("div", { className: cx('Signature-Embed') },
+            React__default.createElement(Button, { onClick: function () { return setOpen(true); } },
+                React__default.createElement(Icon, { className: "icon mr-1", icon: icon || 'fas fa-pen' }),
+                embedBtnLabel || data
+                    ? __('Signature.embedUpdateLabel')
+                    : __('Signature.embedLabel')),
+            data ? (React__default.createElement("div", { className: cx('Signature-Embed-Preview') }, uploading ? (React__default.createElement(Spinner, { show: uploading })) : (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("img", { src: data }),
+                React__default.createElement(Icon, { className: "preview-close icon", icon: "close", onClick: clear }))))) : uploading ? (React__default.createElement("div", { className: cx('Signature-Embed-Preview') },
+                React__default.createElement(Spinner, { show: uploading }))) : null,
+            React__default.createElement(FinalModal, { show: open, onHide: handleCloseModal, size: "full" },
+                React__default.createElement(FinalModal.Body, null,
+                    React__default.createElement("div", { className: cx('Signature-Embed-Body', {
+                            'is-fullScreen': fullScreen
+                        }) },
+                        React__default.createElement("canvas", { className: cx('Signature-canvas'), ref: embedCanvasRef }),
+                        renderTool(fullScreen))),
+                fullScreen ? null : (React__default.createElement(FinalModal.Footer, null,
+                    React__default.createElement(Button, { onClick: handleCloseModal },
+                        ebmedCancelLabel || __('Signature.cancel'),
+                        React__default.createElement(Icon, { icon: ebmedCancelIcon, className: "icon ml-1" })),
+                    React__default.createElement(Button, { onClick: handleConfirmModal, level: "primary" },
+                        embedConfirmLabel || __('Signature.confirm'),
+                        React__default.createElement(Icon, { icon: embedConfirmIcon, className: "icon ml-1" })))))));
+    }
+    return (React__default.createElement("div", { className: cx(className) },
+        React__default.createElement("div", { className: cx('Signature', {
+                'is-fullScreen': fullScreen
+            }), ref: wrapper }, embed ? (renderEmbedSignature()) : (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("canvas", { className: cx('Signature-canvas'), ref: canvasRef }),
+            renderTool())))));
+};
+var Signature$1 = themeable(localeable(Signature));
+
+export { Signature$1 as default };

package/esm/components/Slider.js

@@ -0,0 +1,140 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import React__default, { useMemo, useCallback } from 'react';
+import { themeable } from 'amis-rev-core';
+import useClickAway from '../hooks/use-click-away.js';
+
+/**
+ * @file Slider 滑动条
+ * @author qhy
+ * @date 2025/01/21
+ */
+function Slider(props) {
+    var cx = props.classnames, mobileUI = props.mobileUI, bodyWidth = props.bodyWidth, showLeft = props.showLeft, showRight = props.showRight, _a = props.canSwitch, canSwitch = _a === void 0 ? true : _a, onLeftShow = props.onLeftShow, onRightShow = props.onRightShow, onLeftHide = props.onLeftHide, onRightHide = props.onRightHide;
+    var sliderRef = React__default.useRef(null);
+    var leftRef = React__default.useRef(null);
+    var rightRef = React__default.useRef(null);
+    var leftShow = React__default.useRef(false);
+    var rightShow = React__default.useRef(false);
+    var isMouseDown = React__default.useRef(false);
+    var direction = React__default.useRef(null);
+    var startX = React__default.useRef(0);
+    var doc = React__default.useRef(document);
+    var leftRightDefaultWidth = useMemo(function () { return (100 - parseInt(bodyWidth || '60')) / 2; }, [bodyWidth]);
+    function handleStart(e) {
+        var _a;
+        if (mobileUI && canSwitch && !showLeft && !showRight) {
+            isMouseDown.current = true;
+            if ((_a = e.touches) === null || _a === void 0 ? void 0 : _a[0]) {
+                startX.current = e.touches[0].clientX;
+                doc.current.addEventListener('touchend', handleUp);
+            }
+            else {
+                startX.current = e.clientX;
+                doc.current.addEventListener('mouseup', handleUp);
+            }
+        }
+    }
+    function handleMove(e) {
+        var _a, _b, _c, _d, _e;
+        if (!isMouseDown.current) {
+            return;
+        }
+        var currentX = 0;
+        if ((_a = e.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) {
+            currentX = e.changedTouches[0].clientX;
+        }
+        else {
+            currentX = e.clientX;
+        }
+        var currentDirection = currentX < startX.current ? 'left' : 'right';
+        var leftWidth = Number(((_b = leftRef.current) === null || _b === void 0 ? void 0 : _b.style.width.replace('%', '')) || 0);
+        var rightWidth = Number(((_c = rightRef.current) === null || _c === void 0 ? void 0 : _c.style.width.replace('%', '')) || 0);
+        if (currentDirection === 'right') {
+            leftWidth = Math.min(leftWidth + 1, leftRightDefaultWidth);
+            if (rightWidth > 0) {
+                rightWidth = Math.max(rightWidth - 1, 0);
+            }
+        }
+        else {
+            rightWidth = Math.min(rightWidth + 1, leftRightDefaultWidth);
+            if (leftWidth > 0) {
+                leftWidth = Math.max(leftWidth - 1, 0);
+            }
+        }
+        direction.current = currentDirection;
+        (_d = leftRef.current) === null || _d === void 0 ? void 0 : _d.style.setProperty('width', leftWidth + '%');
+        (_e = rightRef.current) === null || _e === void 0 ? void 0 : _e.style.setProperty('width', rightWidth + '%');
+    }
+    function handleUp(e) {
+        var _a;
+        if (!mobileUI || !isMouseDown.current) {
+            return;
+        }
+        isMouseDown.current = false;
+        var currentX = 0;
+        if ((_a = e.changedTouches) === null || _a === void 0 ? void 0 : _a[0]) {
+            currentX = e.changedTouches[0].clientX;
+            doc.current.removeEventListener('touchend', handleUp);
+        }
+        else {
+            currentX = e.clientX;
+            doc.current.removeEventListener('mouseup', handleUp);
+        }
+        var isMove = Math.abs(currentX - startX.current) > 10;
+        var leftWidth = isMove && direction.current === 'right' ? leftRightDefaultWidth : 0;
+        var rightWidth = isMove && direction.current === 'left' ? leftRightDefaultWidth : 0;
+        setWidth(leftWidth, rightWidth);
+    }
+    function setWidth(left, right) {
+        var _a, _b;
+        if (left === 0 && leftShow.current) {
+            leftShow.current = false;
+            onLeftHide && onLeftHide();
+        }
+        if (right === 0 && rightShow.current) {
+            rightShow.current = false;
+            onRightHide && onRightHide();
+        }
+        if (left === leftRightDefaultWidth) {
+            leftShow.current = true;
+            onLeftShow && onLeftShow();
+        }
+        if (right === leftRightDefaultWidth) {
+            rightShow.current = true;
+            onRightShow && onRightShow();
+        }
+        (_a = leftRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('width', left + '%');
+        (_b = rightRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('width', right + '%');
+    }
+    var reset = useCallback(function (e) {
+        if (!sliderRef.current) {
+            return;
+        }
+        if (!sliderRef.current.contains(e.target) &&
+            (leftShow.current || rightShow.current)) {
+            setWidth(0, 0);
+        }
+    }, []);
+    // 点击外部时，重置滑动条
+    useClickAway(sliderRef, reset, doc.current, ['mouseup', 'touchend']);
+    return (React__default.createElement("div", { className: cx('Slider'), ref: sliderRef }, mobileUI ? (React__default.createElement(React__default.Fragment, null,
+        props.left && (React__default.createElement("div", { className: cx('Slider-LeftContainer'), ref: leftRef, style: {
+                width: showLeft ? leftRightDefaultWidth + '%' : '0%'
+            } }, props.left)),
+        React__default.createElement("div", { className: cx('Slider-BodyContainer'), onMouseDown: handleStart, onMouseMove: handleMove, onTouchStart: handleStart, onTouchMove: handleMove }, props.body),
+        props.right && (React__default.createElement("div", { className: cx('Slider-RightContainer'), ref: rightRef, style: {
+                width: showRight ? leftRightDefaultWidth + '%' : '0%'
+            } }, props.right)))) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: cx('Slider-BodyContainer'), style: {
+                width: bodyWidth ? bodyWidth : '60%'
+            } }, props.body),
+        props.left && (React__default.createElement("div", { className: cx('Slider-LeftContainer') }, props.left)),
+        props.right && (React__default.createElement("div", { className: cx('Slider-RightContainer') }, props.right))))));
+}
+var Slider$1 = themeable(Slider);
+
+export { Slider$1 as default };

package/esm/components/SparkLine.js

@@ -0,0 +1,62 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign } from 'tslib';
+import React__default from 'react';
+import { setThemeClassName, themeable, localeable } from 'amis-rev-core';
+
+var SparkLine = /** @class */ (function (_super) {
+    __extends(SparkLine, _super);
+    function SparkLine() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SparkLine.prototype.normalizeValue = function (item) {
+        if (typeof item === 'number') {
+            return item;
+        }
+        else if (item && typeof item.value === 'number') {
+            return item.value;
+        }
+        else {
+            return Number(item) || 0;
+        }
+    };
+    SparkLine.prototype.renderLines = function () {
+        var _this = this;
+        var _a = this.props, width = _a.width, height = _a.height, value = _a.value, cx = _a.classnames;
+        var values = value.map(function (item) { return _this.normalizeValue(item); });
+        var max = Math.max.apply(Math, __spreadArray([], __read(values), false));
+        var min = Math.min.apply(Math, __spreadArray([], __read(values), false));
+        var duration = max - min || 1;
+        var gap = width / (values.length - 1);
+        var points = [];
+        values.forEach(function (value, index) {
+            points.push({
+                x: index * gap,
+                y: height - ((value - min) * height) / duration
+            });
+        });
+        var lineD = points
+            .map(function (value, index) { return "".concat(index === 0 ? 'M' : 'L', " ").concat(value.x, " ").concat(value.y); })
+            .join(' ');
+        var areaD = "".concat(lineD, " V ").concat(height, " L 0 ").concat(height, " Z");
+        // todo 支持鼠标 hover 显示对应数据。
+        return (React__default.createElement("g", null,
+            React__default.createElement("path", { className: cx("Sparkline-area"), d: areaD, stroke: "none" }),
+            React__default.createElement("path", { className: cx("Sparkline-line"), d: lineD, fill: "none" })));
+    };
+    SparkLine.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, className = _a.className, style = _a.style, value = _a.value, width = _a.width, height = _a.height, placeholder = _a.placeholder, __ = _a.translate, onClick = _a.onClick, id = _a.id, wrapperCustomStyle = _a.wrapperCustomStyle, themeCss = _a.themeCss;
+        return (React__default.createElement("div", { className: cx('Sparkline', className, onClick ? 'Sparkline--clickable' : '', setThemeClassName(__assign(__assign({}, this.props), { name: 'baseControlClassName', id: id, themeCss: themeCss })), setThemeClassName(__assign(__assign({}, this.props), { name: 'wrapperCustomStyle', id: id, themeCss: wrapperCustomStyle }))), style: style, onClick: onClick }, Array.isArray(value) && value.length > 1 ? (React__default.createElement("svg", { className: cx('Sparkline-svg'), width: width, height: height, viewBox: "0 0 ".concat(width, " ").concat(height) }, this.renderLines())) : (placeholder !== null && placeholder !== void 0 ? placeholder : __('placeholder.empty'))));
+    };
+    SparkLine.defaultProps = {
+        width: 100,
+        height: 50
+    };
+    return SparkLine;
+}(React__default.Component));
+var SparkLine$1 = themeable(localeable(SparkLine));
+
+export { SparkLine, SparkLine$1 as default };