amis-ui 6.11.0 → 6.12.0-ab.2

package/lib/components/Shape.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 

package/lib/components/Signature.d.ts

@@ -5,8 +5,7 @@
  */
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
-import { ThemeProps } from 'amis-core';
-import { LocaleProps } from 'amis-core';
+import { ThemeProps, LocaleProps } from 'amis-core';
 export interface ISignatureProps extends LocaleProps, ThemeProps {
     value?: string;
     width?: number;
@@ -26,7 +25,7 @@ export interface ISignatureProps extends LocaleProps, ThemeProps {
     ebmedCancelIcon?: string;
     embedBtnIcon?: string;
     embedBtnLabel?: string;
-    onChange?: (value?: string) => void;
+    onChange?: (value?: string) => Promise<void>;
 }
 declare const _default: {
     new (props: Omit<Omit<ISignatureProps, keyof LocaleProps> & {

package/lib/components/Signature.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-ab.2
  * Copyright 2018-2025 fex
  */
 
@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var amisCore = require('amis-core');
-var smoothSignature = require('../utils/smoothSignature.js');
+var SmoothSignature = require('smooth-signature');
 var Button = require('./Button.js');
 require('./404.js');
 require('./Alert.js');
@@ -36,7 +36,7 @@ require('./Range.js');
 require('./Rating.js');
 require('./Select.js');
 require('./SparkLine.js');
-require('./Spinner.js');
+var Spinner = require('./Spinner.js');
 require('./Switch.js');
 require('./Textarea.js');
 require('./TitleBar.js');
@@ -112,9 +112,12 @@ require('./InputBoxWithSuggestion.js');
 require('./CodeMirror.js');
 require('./OverflowTpl.js');
 require('./VerificationCode.js');
+require('./Slider.js');
 require('./Shape.js');
 require('./MobileDevTool.js');
 require('./DropdownContextMenus.js');
+require('./HorizontalScroll.js');
+require('./AlphabetIndexer.js');
 require('lodash/isFunction');
 require('lodash/pick');
 require('../locale/zh-CN.js');
@@ -129,17 +132,20 @@ require('./schema-editor/Common.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var SmoothSignature__default = /*#__PURE__*/_interopDefaultLegacy(SmoothSignature);
 
 var __react_jsx__ = require('react');
 var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
 (__react_jsx__["default"] || __react_jsx__).Fragment;
 var Signature = function (props) {
     var __ = props.translate, cx = props.classnames, className = props.className, width = props.width, height = props.height;
+    var embedMobile = props.embed && amisCore.isMobileDevice() && window.innerWidth < 768;
     var _a = tslib.__read(React__default["default"].useState(null), 2), sign = _a[0], setSign = _a[1];
     var _b = tslib.__read(React__default["default"].useState(false), 2), open = _b[0], setOpen = _b[1];
-    var _c = tslib.__read(React__default["default"].useState(false), 2), fullScreen = _c[0], setFullScreen = _c[1];
-    var _d = tslib.__read(React__default["default"].useState(props.embed || false), 2), embed = _d[0], setEmbed = _d[1];
-    var _e = tslib.__read(React__default["default"].useState(props.value), 2), data = _e[0], setData = _e[1];
+    var _c = tslib.__read(React__default["default"].useState(false), 2), uploading = _c[0], setUploading = _c[1];
+    var _d = tslib.__read(React__default["default"].useState(!!embedMobile), 2), fullScreen = _d[0], setFullScreen = _d[1];
+    var _e = tslib.__read(React__default["default"].useState(props.embed || false), 2), embed = _e[0], setEmbed = _e[1];
+    var _f = tslib.__read(React__default["default"].useState(props.value), 2), data = _f[0], setData = _f[1];
     var wrapper = React__default["default"].useRef(null);
     React__default["default"].useEffect(function () {
         if (!wrapper.current) {
@@ -167,11 +173,17 @@ var Signature = function (props) {
     }, [sign]);
     var confirm = React__default["default"].useCallback(function () {
         var _a;
-        if (sign) {
-            var base64 = sign.toDataURL();
-            setData(base64);
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, base64);
+        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["default"].useCallback(function () {
         setSign(null);
@@ -186,7 +198,7 @@ var Signature = function (props) {
     }, []);
     var handleCloseModal = React__default["default"].useCallback(function () {
         setOpen(false);
-        setFullScreen(false);
+        setFullScreen(!!embedMobile);
         setSign(null);
     }, []);
     var handleConfirmModal = React__default["default"].useCallback(function () {
@@ -201,7 +213,7 @@ var Signature = function (props) {
         var defaultHeight = fullScreen
             ? clientHeight
             : Math.min(height || clientWidth / 2 - 40, clientHeight - 40);
-        var signature = new smoothSignature["default"](element, {
+        var signature = new SmoothSignature__default["default"](element, {
             width: Math.max(defaultWidth, 200),
             height: Math.max(defaultHeight, 160),
             color: props.color || '#000',
@@ -209,11 +221,6 @@ var Signature = function (props) {
         });
         setSign(signature);
     }, [width, height, fullScreen]);
-    React__default["default"].useEffect(function () {
-        if (data && sign) {
-            sign.loadFromBase64(data);
-        }
-    }, [data, sign]);
     function embedCanvasRef(ref) {
         if (open && ref && !sign) {
             initCanvas(ref);
@@ -236,7 +243,7 @@ var Signature = function (props) {
                     _J$X_(Button["default"], { onClick: undo, tooltip: undoBtnLabel || __('Signature.undo') },
                         undoBtnLabel,
                         _J$X_(icons.Icon, { icon: undoBtnIcon || 'undo-normal', className: cx('icon', { 'ml-1': undoBtnLabel }) })),
-                    fullScreen ? (_J$X_(Button["default"], { onClick: handleUnFullScreen },
+                    embedMobile ? null : fullScreen ? (_J$X_(Button["default"], { onClick: handleUnFullScreen },
                         _J$X_(icons.Icon, { icon: "un-fullscreen", className: "icon" }))) : (_J$X_(Button["default"], { onClick: handleFullScreen },
                         _J$X_(icons.Icon, { icon: "full-screen", className: "icon" })))),
                 right ? (_J$X_("div", { className: "right-actions" }, embed ? (_J$X_(React__default["default"].Fragment, null,
@@ -254,10 +261,13 @@ var Signature = function (props) {
         return (_J$X_("div", { className: cx('Signature-Embed') },
             _J$X_(Button["default"], { onClick: function () { return setOpen(true); } },
                 _J$X_(icons.Icon, { className: "icon mr-1", icon: icon || 'fas fa-pen' }),
-                embedBtnLabel || __('Signature.embedLabel')),
-            data ? (_J$X_("div", { className: cx('Signature-Embed-Preview') },
+                embedBtnLabel || data
+                    ? __('Signature.embedUpdateLabel')
+                    : __('Signature.embedLabel')),
+            data ? (_J$X_("div", { className: cx('Signature-Embed-Preview') }, uploading ? (_J$X_(Spinner["default"], { show: uploading })) : (_J$X_(React__default["default"].Fragment, null,
                 _J$X_("img", { src: data }),
-                _J$X_(icons.Icon, { className: "preview-close", icon: "fas fa-close", onClick: clear }))) : null,
+                _J$X_(icons.Icon, { className: "preview-close icon", icon: "close", onClick: clear }))))) : uploading ? (_J$X_("div", { className: cx('Signature-Embed-Preview') },
+                _J$X_(Spinner["default"], { show: uploading }))) : null,
             _J$X_(Modal["default"], { show: open, onHide: handleCloseModal, size: "full" },
                 _J$X_(Modal["default"].Body, null,
                     _J$X_("div", { className: cx('Signature-Embed-Body', {

package/lib/components/Slider.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @file Slider 滑动条
+ * @author qhy
+ * @date 2025/01/21
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+interface SliderProps extends ThemeProps {
+    body: React.ReactElement;
+    left?: React.ReactElement;
+    right?: React.ReactElement;
+    bodyWidth?: string;
+    showLeft?: boolean;
+    showRight?: boolean;
+    canSwitch?: boolean;
+    onLeftShow?: () => void;
+    onRightShow?: () => void;
+    onLeftHide?: () => void;
+    onRightHide?: () => void;
+}
+declare function Slider(props: SliderProps): React.JSX.Element;
+declare const _default: {
+    new (props: Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<SliderProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Slider>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Slider, {}> & {
+    ComposedComponent: typeof Slider;
+};
+export default _default;

package/lib/components/Slider.js

@@ -0,0 +1,146 @@
+/**
+ * amis-ui v6.12.0-ab.2
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var amisCore = require('amis-core');
+var useClickAway = require('../hooks/use-click-away.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+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["default"].useRef(null);
+    var leftRef = React__default["default"].useRef(null);
+    var rightRef = React__default["default"].useRef(null);
+    var leftShow = React__default["default"].useRef(false);
+    var rightShow = React__default["default"].useRef(false);
+    var isMouseDown = React__default["default"].useRef(false);
+    var direction = React__default["default"].useRef(null);
+    var startX = React__default["default"].useRef(0);
+    var doc = React__default["default"].useRef(document);
+    var leftRightDefaultWidth = React.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 = React.useCallback(function (e) {
+        if (!sliderRef.current) {
+            return;
+        }
+        if (!sliderRef.current.contains(e.target) &&
+            (leftShow.current || rightShow.current)) {
+            setWidth(0, 0);
+        }
+    }, []);
+    // 点击外部时，重置滑动条
+    useClickAway["default"](sliderRef, reset, doc.current, ['mouseup', 'touchend']);
+    return (_J$X_("div", { className: cx('Slider'), ref: sliderRef }, mobileUI ? (_J$X_(React__default["default"].Fragment, null,
+        props.left && (_J$X_("div", { className: cx('Slider-LeftContainer'), ref: leftRef, style: {
+                width: showLeft ? leftRightDefaultWidth + '%' : '0%'
+            } }, props.left)),
+        _J$X_("div", { className: cx('Slider-BodyContainer'), onMouseDown: handleStart, onMouseMove: handleMove, onTouchStart: handleStart, onTouchMove: handleMove }, props.body),
+        props.right && (_J$X_("div", { className: cx('Slider-RightContainer'), ref: rightRef, style: {
+                width: showRight ? leftRightDefaultWidth + '%' : '0%'
+            } }, props.right)))) : (_J$X_(React__default["default"].Fragment, null,
+        _J$X_("div", { className: cx('Slider-BodyContainer'), style: {
+                width: bodyWidth ? bodyWidth : '60%'
+            } }, props.body),
+        props.left && (_J$X_("div", { className: cx('Slider-LeftContainer') }, props.left)),
+        props.right && (_J$X_("div", { className: cx('Slider-RightContainer') }, props.right))))));
+}
+var Slider$1 = amisCore.themeable(Slider);
+
+exports["default"] = Slider$1;