@apdesign/web-react 1.1.3 → 1.3.0

package/es/Menu/context.d.ts

@@ -6,7 +6,7 @@ export declare type HotkeyInfo = {
     type: 'sibling' | 'generation' | 'enter';
 };
 export declare type ResetHotkeyInfo = (activeKey?: string) => void;
-declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "inDropdown" | "theme" | "mode" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "triggerProps" | "tooltipProps"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "mode" | "icons" | "triggerProps" | "inDropdown" | "theme" | "levelIndent" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "tooltipProps"> & {
     id?: string;
     prefixCls?: string;
     onClickMenuItem?: (key: string, event: any) => void;

package/es/Modal/interface.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { DraggableCoreProps } from 'react-draggable';
 import { ButtonProps } from '../Button';
 import { ConfirmProps } from './confirm';
 /**
@@ -171,6 +172,17 @@ export interface ModalProps {
      */
     modalRender?: (modalNode: ReactNode) => ReactNode;
     prefixCls?: string;
+    /**
+     * @zh 是否可以拖动弹窗
+     * @en Whether the Modal can be dragged
+     * @defaultValue true
+     */
+    draggable?: boolean;
+    /**
+     * @zh 拖动弹窗额外参数
+     * @en The extra parameters of the Modal
+     */
+    draggableProps?: Partial<DraggableCoreProps>;
 }
 export declare type ModalReturnProps = {
     update: Function;

package/es/Modal/modal.js

@@ -37,6 +37,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import React, { useState, forwardRef, useContext, useRef, useEffect, useCallback, } from 'react';
+import Draggable from 'react-draggable';
 import FocusLock from 'react-focus-lock';
 import IconClose from '../../icon/react-icon/IconClose';
 import cs from '../_util/classNames';
@@ -77,13 +78,14 @@ var defaultProps = {
     escToExit: true,
     getPopupContainer: function () { return document.body; },
     alignCenter: true,
+    draggable: true,
 };
 function Modal(baseProps, ref) {
     var _a, _b;
     var _c;
     var context = useContext(ConfigContext);
     var props = useMergeProps(baseProps, defaultProps, (_c = context.componentConfig) === null || _c === void 0 ? void 0 : _c.Modal);
-    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon"]);
+    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, draggable = props.draggable, draggableProps = props.draggableProps, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon", "draggable", "draggableProps"]);
     var modalWrapperRef = useRef(null);
     var contentWrapper = useRef(null);
     var modalRef = useRef(null);
@@ -200,7 +202,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (React.createElement("div", { className: prefixCls + "-header" },
+        title && (React.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
             React.createElement("div", { className: prefixCls + "-title", id: "arco-dialog-" + dialogIndex.current }, title))),
         React.createElement("div", { ref: contentWrapper, className: prefixCls + "-content" }, children),
         renderFooter(),
@@ -211,10 +213,21 @@ function Modal(baseProps, ref) {
     var modalDom = (React.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: cs(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: style, ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: __assign({ display: draggable ? 'block' : null }, style), ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (React.createElement(React.Fragment, null, element))));
+    var modalWithMouseEventsDom = React.cloneElement(modalDom, {
+        onMouseDown: function () {
+            maskClickRef.current = false;
+        },
+        onMouseUp: function () {
+            maskClickRef.current = false;
+        },
+    });
+    // 包装在Draggable中的modal
+    var wrappedModalDom = draggable && title ? (React.createElement(Draggable, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
+        React.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block' } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;
@@ -252,6 +265,8 @@ function Modal(baseProps, ref) {
                 'onConfirm',
                 'closable',
                 'prefixCls',
+                'draggable',
+                'draggableProps',
             ]), { tabIndex: !innerFocusLock || !innerAutoFocus ? -1 : null, ref: function (node) {
                     modalWrapperRef.current = node;
                     initPopupZIndex();
@@ -292,14 +307,7 @@ function Modal(baseProps, ref) {
                         if (unmountOnExit) {
                             modalRef.current = null;
                         }
-                    } }, React.cloneElement((isFunction(modalRender) ? modalRender(modalDom) : modalDom), {
-                    onMouseDown: function () {
-                        maskClickRef.current = false;
-                    },
-                    onMouseUp: function () {
-                        maskClickRef.current = false;
-                    },
-                })))))) : null;
+                    } }, isFunction(modalRender) ? modalRender(wrappedModalDom) : wrappedModalDom))))) : null;
 }
 var ExportedModalComponent = forwardRef(Modal);
 ExportedModalComponent.displayName = 'Modal';

package/es/Select/interface.d.ts

@@ -55,6 +55,12 @@ export interface SelectProps extends SelectViewCommonProps {
      * @en Whether to embed label in value, turn the format of value from string to `{ value: string, label: ReactNode }`
      */
     labelInValue?: boolean;
+    /**
+     * @zh 是否开启快速单选模式。开启后，由于需要最后点击确定或者取消来选择，单个选项变化的事件 onSelect 和 onDeselect 将无效
+     * @en Whether to enable quick single selection mode. When enabled, the onSelect and onDeselect events will be invalid because the selection needs to be confirmed or canceled at the end.
+     * @defaultValue true
+     */
+    isQuickSingleSelectMode?: boolean;
     /**
      * @zh 是否根据输入的值筛选数据。如果传入函数的话，接收 `inputValue` 和 `option` 两个参数，当option符合筛选条件时，返回 `true`，反之返回 `false`。
      * @en If it's true, filter options by input value. If it's a function, filter options base on the function.
@@ -245,6 +251,8 @@ export interface OptionProps extends Omit<HTMLAttributes<HTMLLIElement>, 'classN
     extra?: any;
     isSelectOption?: boolean;
     _isMultipleMode?: boolean;
+    _isMultipleQuickSelectMode?: boolean;
+    _onSingleQuickSelect?: (value: OptionProps['value']) => void;
     _isUserCreatedOption?: boolean;
     _isUserCreatingOption?: boolean;
     _valueActive?: OptionProps['value'];

package/es/Select/option.js

@@ -20,13 +20,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useState } from 'react';
 import cs from '../_util/classNames';
 import Checkbox from '../Checkbox';
 import omit from '../_util/omit';
 function Option(props, ref) {
     var _a, _b;
-    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var style = props.style, className = props.className, wrapperClassName = props.wrapperClassName, disabled = props.disabled, prefixCls = props.prefixCls, rtl = props.rtl, propValue = props.value, propChildren = props.children, _isMultipleMode = props._isMultipleMode, _isMultipleQuickSelectMode = props._isMultipleQuickSelectMode, _onSingleQuickSelect = props._onSingleQuickSelect, _isUserCreatedOption = props._isUserCreatedOption, _isUserCreatingOption = props._isUserCreatingOption, _valueActive = props._valueActive, _valueSelect = props._valueSelect, _onMouseEnter = props._onMouseEnter, _onMouseLeave = props._onMouseLeave, _onClick = props._onClick, rest = __rest(props, ["style", "className", "wrapperClassName", "disabled", "prefixCls", "rtl", "value", "children", "_isMultipleMode", "_isMultipleQuickSelectMode", "_onSingleQuickSelect", "_isUserCreatedOption", "_isUserCreatingOption", "_valueActive", "_valueSelect", "_onMouseEnter", "_onMouseLeave", "_onClick"]);
+    var _c = __read(useState(false), 2), isHovering = _c[0], setIsHovering = _c[1];
     var value = 'value' in props ? propValue : "" + propChildren;
     var childNode = 'children' in props ? propChildren : "" + propValue;
     var isChecked = _isMultipleMode
@@ -61,9 +78,34 @@ function Option(props, ref) {
         return (React.createElement("li", __assign({}, wrapperProps, { className: cs(prefixCls + "-option-wrapper", (_b = {},
                 _b[prefixCls + "-option-wrapper-selected"] = isChecked,
                 _b[prefixCls + "-option-wrapper-disabled"] = disabled,
-                _b), wrapperClassName) }),
+                _b), wrapperClassName) }, (_isMultipleQuickSelectMode && {
+            // TODO: 这个等主题处理好了要改成 css ，包括以下内联样式
+            onMouseEnter: function () { return setIsHovering(true); },
+            onMouseLeave: function () { return setIsHovering(false); },
+            style: {
+                position: 'relative',
+            },
+        })),
             React.createElement(Checkbox, { "aria-hidden": "true", className: prefixCls + "-checkbox", checked: isChecked, disabled: disabled, onChange: optionLabelProps.onClick }),
-            React.createElement("span", __assign({}, optionLabelProps), childNode)));
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flex: 1,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                } },
+                React.createElement("span", __assign({}, optionLabelProps), childNode),
+                _isMultipleQuickSelectMode && !disabled && (React.createElement("span", { style: {
+                        display: isHovering ? 'inline' : 'none',
+                        flex: 0,
+                        backgroundColor: 'rgb(var(--primary-6))',
+                        cursor: 'pointer',
+                        color: 'white',
+                        padding: '7px',
+                        paddingLeft: '20px',
+                        marginLeft: '-20px',
+                        clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        whiteSpace: 'nowrap',
+                    }, onClick: function () { return _onSingleQuickSelect === null || _onSingleQuickSelect === void 0 ? void 0 : _onSingleQuickSelect(value); } }, "\u4EC5\u7B5B\u9009\u6B64\u9879")))));
     }
     return (React.createElement("li", __assign({}, wrapperProps, optionLabelProps), childNode));
 }

package/es/Select/select.js

@@ -62,6 +62,7 @@ import { ConfigContext } from '../ConfigProvider';
 import useMergeValue from '../_util/hooks/useMergeValue';
 import omit from '../_util/omit';
 import useMergeProps from '../_util/hooks/useMergeProps';
+import { Button } from '../index';
 import useId from '../_util/hooks/useId';
 // 用户创建中的option的origin标识
 var USER_CREATING_OPTION_ORIGIN = 'userCreatingOption';
@@ -70,13 +71,14 @@ var defaultProps = {
     bordered: true,
     filterOption: true,
     unmountOnExit: true,
+    isQuickSingleSelectMode: true,
     defaultActiveFirstOption: true,
 };
 var triggerPopupAlign = { bottom: 4 };
 function Select(baseProps, ref) {
     var _a = useContext(ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
     var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Select);
-    var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
+    var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, isQuickSingleSelectMode = props.isQuickSingleSelectMode, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
     // events
     onChange = props.onChange, onSelect = props.onSelect, onDeselect = props.onDeselect, onClear = props.onClear, onSearch = props.onSearch, onFocus = props.onFocus, onBlur = props.onBlur, onPopupScroll = props.onPopupScroll, onVisibleChange = props.onVisibleChange, onInputValueChange = props.onInputValueChange, onPaste = props.onPaste, onKeyDown = props.onKeyDown;
     // TODO 兼容逻辑，3.0 移除 tags 模式
@@ -88,35 +90,42 @@ function Select(baseProps, ref) {
     }
     var prefixCls = getPrefixCls('select');
     var isMultipleMode = mode === 'multiple';
+    var isMultipleQuickSelectMode = isMultipleMode && isQuickSingleSelectMode;
     // TODO: 统一 useMergeValue 函数的表现
     var _b = __read(useState(getValidValue(props.defaultValue, isMultipleMode, labelInValue)), 2), stateValue = _b[0], setValue = _b[1];
-    var value = 'value' in props ? getValidValue(props.value, isMultipleMode, labelInValue) : stateValue;
-    var _c = __read(useMergeValue('', {
+    var _c = __read(useState(getValidValue(props.defaultValue, isMultipleMode, labelInValue)), 2), stateProxyValue = _c[0], setProxyValue = _c[1];
+    var value = 'value' in props
+        ? getValidValue(props.value, isMultipleMode, labelInValue)
+        : isMultipleQuickSelectMode
+            ? stateProxyValue
+            : stateValue;
+    var valueForInputShow = 'value' in props ? getValidValue(props.value, isMultipleMode, labelInValue) : stateValue;
+    var _d = __read(useMergeValue('', {
         value: 'inputValue' in props ? props.inputValue || '' : undefined,
-    }), 3), inputValue = _c[0], setInputValue = _c[1], stateInputValue = _c[2];
-    var _d = __read(useMergeValue(false, {
+    }), 3), inputValue = _d[0], setInputValue = _d[1], stateInputValue = _d[2];
+    var _e = __read(useMergeValue(false, {
         defaultValue: props.defaultPopupVisible,
         value: 'popupVisible' in props
             ? props.popupVisible
             : triggerProps && 'popupVisible' in triggerProps
                 ? triggerProps.popupVisible
                 : undefined,
-    }), 2), popupVisible = _d[0], setPopupVisible = _d[1];
+    }), 2), popupVisible = _e[0], setPopupVisible = _e[1];
     // allowCreate 时，用户正在创建的选项值
-    var _e = __read(useState(null), 2), userCreatingOption = _e[0], setUserCreatingOption = _e[1];
+    var _f = __read(useState(null), 2), userCreatingOption = _f[0], setUserCreatingOption = _f[1];
     // allowCreate 时，由用户输入而扩展到选项中的值
-    var _f = __read(useState([]), 2), userCreatedOptions = _f[0], setUserCreatedOptions = _f[1];
+    var _g = __read(useState([]), 2), userCreatedOptions = _g[0], setUserCreatedOptions = _g[1];
     // 具有选中态或者 hover 态的 option 的 value
-    var _g = __read(useState(isArray(value) ? value[0] : value), 2), valueActive = _g[0], setValueActive = _g[1];
+    var _h = __read(useState(isArray(value) ? value[0] : value), 2), valueActive = _h[0], setValueActive = _h[1];
     // 缓存较为耗时的 flatChildren 的结果
-    var _h = useMemo(function () {
+    var _j = useMemo(function () {
         return flatChildren({ children: children, options: options, filterOption: filterOption }, {
             prefixCls: prefixCls,
             inputValue: inputValue,
             userCreatedOptions: userCreatedOptions,
             userCreatingOption: userCreatingOption,
         });
-    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _h.childrenList, optionInfoMap = _h.optionInfoMap, optionValueList = _h.optionValueList, optionIndexListForArrowKey = _h.optionIndexListForArrowKey, hasOptGroup = _h.hasOptGroup, hasComplexLabelInOptions = _h.hasComplexLabelInOptions;
+    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _j.childrenList, optionInfoMap = _j.optionInfoMap, optionValueList = _j.optionValueList, optionIndexListForArrowKey = _j.optionIndexListForArrowKey, hasOptGroup = _j.hasOptGroup, hasComplexLabelInOptions = _j.hasComplexLabelInOptions;
     // ref
     var refWrapper = useRef(null);
     var refTrigger = useRef(null);
@@ -194,10 +203,12 @@ function Select(baseProps, ref) {
         if (isMultipleMode) {
             if (!Array.isArray(value)) {
                 setValue(value === undefined ? [] : [value]);
+                setProxyValue(value === undefined ? [] : [value]);
             }
         }
         else if (Array.isArray(value)) {
             setValue(value.length === 0 ? undefined : value[0]);
+            setProxyValue(value.length === 0 ? undefined : value[0]);
         }
     }, [isMultipleMode, value]);
     // 选项下拉框显示/隐藏时的一些自动行为
@@ -371,21 +382,50 @@ function Select(baseProps, ref) {
             onChange(paramsForCallback.value, paramsForCallback.option);
         }
     };
-    // 多选时，选择/取消选择一个选项
-    var checkOption = function (optionValue, operation) {
+    var tryUpdateProxySelectValue = function (value) {
+        setProxyValue(value);
+    };
+    // 多选时，选择/取消选择一个选项。 fromTag 为 true 时，表示从input tag标签触发取消选择
+    var checkOption = function (optionValue, operation, fromTag) {
+        if (fromTag === void 0) { fromTag = false; }
         // 取消选中时不需要检查option是否存在，因为可能已被外部剔除了此选项
         if (operation === 'remove' || (operation === 'add' && optionInfoMap.get(optionValue))) {
             var newValue = operation === 'add'
                 ? value.concat(optionValue)
                 : value.filter(function (v) { return v !== optionValue; });
             var callbackToTrigger = operation === 'add' ? onSelect : onDeselect;
-            tryUpdateSelectValue(newValue);
             if (typeof callbackToTrigger === 'function') {
                 var paramsForCallback = getValueAndOptionForCallback(optionValue, false);
                 callbackToTrigger(paramsForCallback.value, paramsForCallback.option);
             }
+            // 如果是快速单选模式，更新代理值
+            if (isMultipleQuickSelectMode) {
+                tryUpdateProxySelectValue(newValue);
+                if (fromTag) {
+                    tryUpdateSelectValue(newValue);
+                }
+            }
+            else {
+                tryUpdateSelectValue(newValue);
+            }
         }
     };
+    // 多选时，确定
+    var confirmCheck = function () {
+        tryUpdateSelectValue(stateProxyValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时，取消
+    var cancelCheck = function () {
+        tryUpdateProxySelectValue(stateValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时候快速只选一个
+    var handleSingleQuickSelect = function (optionValue) {
+        tryUpdatePopupVisible(false);
+        tryUpdateProxySelectValue([optionValue]);
+        tryUpdateSelectValue([optionValue]);
+    };
     var handleOptionClick = function (optionValue, disabled) {
         if (disabled) {
             return;
@@ -457,41 +497,53 @@ function Select(baseProps, ref) {
         var needForbidVirtual = needMeasureLongestItem && hasComplexLabelInOptions;
         var mergedNotFoundContent = 'notFoundContent' in props ? notFoundContent : renderEmpty('Select');
         // 选项列表元素
-        var eleOptionList = childrenList.length ? (React.createElement(VirtualList, __assign({ id: instancePopupID, role: "listbox", style: dropdownMenuStyle, className: cs(prefixCls + "-popup-inner", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function (child) { return child.props._key; }, onMouseDown: preventDefaultEvent, onMouseMove: function () {
-                refKeyboardArrowDirection.current = null;
-            }, onScroll: function (e) { return onPopupScroll && onPopupScroll(e.target); } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function (child) {
-            var _a;
-            if (isSelectOptGroup(child)) {
-                return React.createElement(child.type, __assign({}, child.props, { prefixCls: prefixCls }));
-            }
-            if (isSelectOption(child)) {
-                var optionValue = (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
-                var userCreatingOptionValue = isObject(userCreatingOption)
-                    ? userCreatingOption.value
-                    : userCreatingOption;
-                var userCreatedOptionValues = userCreatedOptions.map(function (op) {
-                    return isObject(op) ? op.value : op;
-                });
-                var optionProps = {
-                    prefixCls: prefixCls,
-                    rtl: rtl,
-                    _valueActive: valueActive,
-                    _valueSelect: value,
-                    _isMultipleMode: isMultipleMode,
-                    _isUserCreatingOption: allowCreate && userCreatingOptionValue === optionValue,
-                    _isUserCreatedOption: allowCreate && userCreatedOptionValues.indexOf(optionValue) > -1,
-                    _onClick: handleOptionClick,
-                    _onMouseEnter: function (value) {
-                        refKeyboardArrowDirection.current === null && setValueActive(value);
-                    },
-                    _onMouseLeave: function () {
-                        refKeyboardArrowDirection.current === null && setValueActive(undefined);
-                    },
-                };
-                return child && React.createElement(child.type, __assign({}, child.props, optionProps));
-            }
-            return child;
-        })) : null;
+        var eleOptionList = childrenList.length ? (React.createElement(React.Fragment, null,
+            React.createElement(VirtualList, __assign({ id: instancePopupID, role: "listbox", style: dropdownMenuStyle, className: cs(prefixCls + "-popup-inner", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function (child) { return child.props._key; }, onMouseDown: preventDefaultEvent, onMouseMove: function () {
+                    refKeyboardArrowDirection.current = null;
+                }, onScroll: function (e) { return onPopupScroll && onPopupScroll(e.target); } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function (child) {
+                var _a;
+                if (isSelectOptGroup(child)) {
+                    return React.createElement(child.type, __assign({}, child.props, { prefixCls: prefixCls }));
+                }
+                if (isSelectOption(child)) {
+                    var optionValue = (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
+                    var userCreatingOptionValue = isObject(userCreatingOption)
+                        ? userCreatingOption.value
+                        : userCreatingOption;
+                    var userCreatedOptionValues = userCreatedOptions.map(function (op) {
+                        return isObject(op) ? op.value : op;
+                    });
+                    var optionProps = {
+                        prefixCls: prefixCls,
+                        rtl: rtl,
+                        _valueActive: valueActive,
+                        _valueSelect: value,
+                        _isMultipleMode: isMultipleMode,
+                        _isMultipleQuickSelectMode: isMultipleQuickSelectMode,
+                        _onSingleQuickSelect: handleSingleQuickSelect,
+                        _isUserCreatingOption: allowCreate && userCreatingOptionValue === optionValue,
+                        _isUserCreatedOption: allowCreate && userCreatedOptionValues.indexOf(optionValue) > -1,
+                        _onClick: handleOptionClick,
+                        _onMouseEnter: function (value) {
+                            refKeyboardArrowDirection.current === null && setValueActive(value);
+                        },
+                        _onMouseLeave: function () {
+                            refKeyboardArrowDirection.current === null && setValueActive(undefined);
+                        },
+                    };
+                    return child && React.createElement(child.type, __assign({}, child.props, optionProps));
+                }
+                return child;
+            }),
+            isMultipleQuickSelectMode && (React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 12,
+                    padding: '8px 16px 4px',
+                    borderTop: '1px solid var(--color-fill-3)',
+                } },
+                React.createElement(Button, { size: "mini", onClick: cancelCheck }, "\u53D6\u6D88"),
+                React.createElement(Button, { type: "primary", size: "mini", onClick: confirmCheck }, "\u786E\u5B9A"))))) : null;
         // Avoid drop-down box jitter when user is creating a selection
         var isUserCreating = allowCreate && inputValue;
         // Dropdown-placeholder when there is no options
@@ -579,7 +631,7 @@ function Select(baseProps, ref) {
         // Option Items
         onRemoveCheckedItem: function (_, index, event) {
             event.stopPropagation();
-            checkOption(value[index], 'remove');
+            checkOption(value[index], 'remove', true);
         },
         onClear: function (event) {
             event.stopPropagation();
@@ -617,7 +669,12 @@ function Select(baseProps, ref) {
         });
     }, [hotkeyHandler, optionInfoMap, valueActive, getOptionInfoByValue, scrollIntoView]);
     var renderView = function (eleView) {
-        return (React.createElement(Trigger, __assign({ ref: function (ref) { return (refTrigger.current = ref); }, popup: renderPopup, trigger: trigger, disabled: disabled, getPopupContainer: getPopupContainer, classNames: "slideDynamicOrigin", autoAlignPopupWidth: true, popupAlign: triggerPopupAlign, popupVisible: popupVisible, unmountOnExit: unmountOnExit, onVisibleChange: tryUpdatePopupVisible, __onExit: function () {
+        return (React.createElement(Trigger, __assign({ ref: function (ref) { return (refTrigger.current = ref); }, popup: renderPopup, trigger: trigger, disabled: disabled, getPopupContainer: getPopupContainer, classNames: "slideDynamicOrigin", autoAlignPopupWidth: true, popupAlign: triggerPopupAlign, popupVisible: popupVisible, unmountOnExit: unmountOnExit, onVisibleChange: function (visible) {
+                if (visible === false && isMultipleQuickSelectMode) {
+                    setProxyValue(stateValue);
+                }
+                tryUpdatePopupVisible(visible);
+            }, __onExit: function () {
                 refPopupExiting.current = true;
             }, __onExited: function () {
                 refPopupExiting.current = false;
@@ -629,7 +686,7 @@ function Select(baseProps, ref) {
         : triggerElement;
     return (React.createElement(ResizeObserver, { onResize: function () { return refTrigger.current.updatePopupPosition(); } }, usedTriggerElement !== undefined && usedTriggerElement !== null ? (renderView(usedTriggerElement)) : (React.createElement(SelectView, __assign({}, props, selectViewEventHandlers, { ref: refSelectView, 
         // state
-        value: value, inputValue: inputValue, popupVisible: popupVisible, 
+        value: valueForInputShow, inputValue: inputValue, popupVisible: popupVisible, 
         // other
         rtl: rtl, prefixCls: prefixCls, allowCreate: !!allowCreate, ariaControls: instancePopupID, isEmptyValue: isNoOptionSelected, isMultiple: isMultipleMode, onSort: tryUpdateSelectValue, renderText: function (value) {
             var option = getOptionInfoByValue(value);

package/es/index.d.ts

@@ -139,4 +139,4 @@ export type { WatermarkProps } from './Watermark/interface';
 export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
-export declare const version = "1.1.3";
+export declare const version = "1.3.0";

package/es/index.js

@@ -69,4 +69,4 @@ export { default as Upload } from './Upload';
 export { default as Mentions } from './Mentions';
 export { default as Watermark } from './Watermark';
 export { default as Image } from './Image';
-export var version = '1.1.3';
+export var version = '1.3.0';

package/lib/Modal/interface.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { DraggableCoreProps } from 'react-draggable';
 import { ButtonProps } from '../Button';
 import { ConfirmProps } from './confirm';
 /**
@@ -171,6 +172,17 @@ export interface ModalProps {
      */
     modalRender?: (modalNode: ReactNode) => ReactNode;
     prefixCls?: string;
+    /**
+     * @zh 是否可以拖动弹窗
+     * @en Whether the Modal can be dragged
+     * @defaultValue true
+     */
+    draggable?: boolean;
+    /**
+     * @zh 拖动弹窗额外参数
+     * @en The extra parameters of the Modal
+     */
+    draggableProps?: Partial<DraggableCoreProps>;
 }
 export declare type ModalReturnProps = {
     update: Function;

package/lib/Modal/modal.js

@@ -61,6 +61,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_draggable_1 = __importDefault(require("react-draggable"));
 var react_focus_lock_1 = __importDefault(require("react-focus-lock"));
 var IconClose_1 = __importDefault(require("../../icon/react-icon-cjs/IconClose"));
 var classNames_1 = __importDefault(require("../_util/classNames"));
@@ -101,13 +102,14 @@ var defaultProps = {
     escToExit: true,
     getPopupContainer: function () { return document.body; },
     alignCenter: true,
+    draggable: true,
 };
 function Modal(baseProps, ref) {
     var _a, _b;
     var _c;
     var context = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     var props = (0, useMergeProps_1.default)(baseProps, defaultProps, (_c = context.componentConfig) === null || _c === void 0 ? void 0 : _c.Modal);
-    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon"]);
+    var className = props.className, style = props.style, visible = props.visible, simple = props.simple, title = props.title, children = props.children, cancelText = props.cancelText, okText = props.okText, okButtonProps = props.okButtonProps, cancelButtonProps = props.cancelButtonProps, _d = props.getPopupContainer, getPopupContainer = _d === void 0 ? function () { return document.body; } : _d, footer = props.footer, afterClose = props.afterClose, confirmLoading = props.confirmLoading, mountOnEnter = props.mountOnEnter, unmountOnExit = props.unmountOnExit, afterOpen = props.afterOpen, hideCancel = props.hideCancel, autoFocus = props.autoFocus, focusLock = props.focusLock, maskClosable = props.maskClosable, mask = props.mask, alignCenter = props.alignCenter, getChildrenPopupContainer = props.getChildrenPopupContainer, wrapClassName = props.wrapClassName, escToExit = props.escToExit, modalRender = props.modalRender, maskStyle = props.maskStyle, wrapStyle = props.wrapStyle, closeIcon = props.closeIcon, draggable = props.draggable, draggableProps = props.draggableProps, rest = __rest(props, ["className", "style", "visible", "simple", "title", "children", "cancelText", "okText", "okButtonProps", "cancelButtonProps", "getPopupContainer", "footer", "afterClose", "confirmLoading", "mountOnEnter", "unmountOnExit", "afterOpen", "hideCancel", "autoFocus", "focusLock", "maskClosable", "mask", "alignCenter", "getChildrenPopupContainer", "wrapClassName", "escToExit", "modalRender", "maskStyle", "wrapStyle", "closeIcon", "draggable", "draggableProps"]);
     var modalWrapperRef = (0, react_1.useRef)(null);
     var contentWrapper = (0, react_1.useRef)(null);
     var modalRef = (0, react_1.useRef)(null);
@@ -224,7 +226,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (react_1.default.createElement("div", { className: prefixCls + "-header" },
+        title && (react_1.default.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
             react_1.default.createElement("div", { className: prefixCls + "-title", id: "arco-dialog-" + dialogIndex.current }, title))),
         react_1.default.createElement("div", { ref: contentWrapper, className: prefixCls + "-content" }, children),
         renderFooter(),
@@ -235,10 +237,21 @@ function Modal(baseProps, ref) {
     var modalDom = (react_1.default.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: (0, classNames_1.default)(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: style, ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: __assign({ display: draggable ? 'block' : null }, style), ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (react_1.default.createElement(react_1.default.Fragment, null, element))));
+    var modalWithMouseEventsDom = react_1.default.cloneElement(modalDom, {
+        onMouseDown: function () {
+            maskClickRef.current = false;
+        },
+        onMouseUp: function () {
+            maskClickRef.current = false;
+        },
+    });
+    // 包装在Draggable中的modal
+    var wrappedModalDom = draggable && title ? (react_1.default.createElement(react_draggable_1.default, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
+        react_1.default.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block' } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;
@@ -276,6 +289,8 @@ function Modal(baseProps, ref) {
                 'onConfirm',
                 'closable',
                 'prefixCls',
+                'draggable',
+                'draggableProps',
             ]), { tabIndex: !innerFocusLock || !innerAutoFocus ? -1 : null, ref: function (node) {
                     modalWrapperRef.current = node;
                     initPopupZIndex();
@@ -316,14 +331,7 @@ function Modal(baseProps, ref) {
                         if (unmountOnExit) {
                             modalRef.current = null;
                         }
-                    } }, react_1.default.cloneElement(((0, is_1.isFunction)(modalRender) ? modalRender(modalDom) : modalDom), {
-                    onMouseDown: function () {
-                        maskClickRef.current = false;
-                    },
-                    onMouseUp: function () {
-                        maskClickRef.current = false;
-                    },
-                })))))) : null;
+                    } }, (0, is_1.isFunction)(modalRender) ? modalRender(wrappedModalDom) : wrappedModalDom))))) : null;
 }
 var ExportedModalComponent = (0, react_1.forwardRef)(Modal);
 ExportedModalComponent.displayName = 'Modal';