@apdesign/web-react 1.1.2 → 1.2.0

package/es/DatePicker/util.d.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 export declare function isTimeArrayChange(prevTime: Dayjs[], nextTime: Dayjs[]): boolean;
-export declare function getAvailableDayjsLength(value: any): 1 | 0 | 2;
+export declare function getAvailableDayjsLength(value: any): 0 | 1 | 2;
 export declare function isDisabledDate(cellDate: any, disabledDate: any, mode: any): boolean;
 declare type WeekStartType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export declare function getDefaultWeekStart(dayjsLocale: string): WeekStartType;

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, "mode" | "triggerProps" | "collapse" | "inDropdown" | "theme" | "levelIndent" | "icons" | "autoScrollIntoView" | "selectedKeys" | "openKeys" | "scrollConfig" | "tooltipProps"> & {
+declare const MenuContext: import("react").Context<Pick<MenuProps, "collapse" | "mode" | "triggerProps" | "inDropdown" | "theme" | "levelIndent" | "icons" | "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/Typography/base.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypographyParagraphProps, TypographyTitleProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<TypographyParagraphProps & TypographyTitleProps & import("./interface").CommonProps & {
-    componentType: "Text" | "Title" | "Paragraph";
+    componentType: "Paragraph" | "Title" | "Text";
 } & React.RefAttributes<unknown>>;
 export default _default;

package/es/_class/VirtualList/index.js

@@ -36,7 +36,9 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import React, { useEffect, useImperativeHandle, useRef, useMemo, useState, } from 'react';
+import React, { useEffect, useImperativeHandle, useRef, 
+// useMemo,
+useState, } from 'react';
 import { getValidScrollTop, getCompareItemRelativeTop, getItemAbsoluteTop, getItemRelativeTop, getNodeHeight, getRangeIndex, getScrollPercentage, GHOST_ITEM_KEY, getLongestItemIndex, getLocationItem, } from './utils/itemUtil';
 import { raf, caf } from '../../_util/raf';
 import { isNumber } from '../../_util/is';
@@ -100,7 +102,7 @@ var VirtualList = React.forwardRef(function (props, ref) {
         refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] ||
         DEFAULT_VIRTUAL_ITEM_HEIGHT;
     var viewportHeight = isNumber(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
-    var itemCountVisible = Math.ceil(viewportHeight / itemHeight);
+    var itemCountVisible = Math.ceil(viewportHeight / itemHeight) * 2;
     var itemTotalHeight = itemHeight * itemCount;
     var isVirtual = threshold !== null &&
         itemCount >= threshold &&
@@ -110,18 +112,17 @@ var VirtualList = React.forwardRef(function (props, ref) {
     var refLockScroll = useRef(false);
     var refIsVirtual = useRef(isVirtual);
     // The paddingTop of the record scrolling list is used to correct the scrolling distance
-    var scrollListPadding = useMemo(function () {
-        if (refList.current) {
-            var getPadding = function (property) {
-                return +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
-            };
-            return {
-                top: getPadding('paddingTop'),
-                bottom: getPadding('paddingBottom'),
-            };
-        }
-        return { top: 0, bottom: 0 };
-    }, [refList.current]);
+    // const scrollListPadding = useMemo<{ top: number; bottom: number }>(() => {
+    //   if (refList.current) {
+    //     const getPadding = (property) =>
+    //       +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
+    //     return {
+    //       top: getPadding('paddingTop'),
+    //       bottom: getPadding('paddingBottom'),
+    //     };
+    //   }
+    //   return { top: 0, bottom: 0 };
+    // }, [refList.current]);
     var _l = __read(useStateWithPromise({
         // measure status
         status: 'NONE',
@@ -320,7 +321,8 @@ var VirtualList = React.forwardRef(function (props, ref) {
             var startItemTop = getItemAbsoluteTop({
                 scrollPtg: scrollPtg,
                 clientHeight: clientHeight,
-                scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,
+                scrollTop: scrollTop,
+                // scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,
                 itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex)),
                 itemOffsetPtg: state.itemOffsetPtg,
             });

package/es/_util/constant.d.ts

@@ -1,3 +1,3 @@
 export declare const NOOP: () => void;
 export declare function newArray(length: number): any;
-export declare function pickTriggerPropsFromRest(rest: any): Pick<any, "onClick" | "onFocus" | "onBlur" | "tabIndex" | "onContextMenu" | "onMouseEnter" | "onMouseLeave" | "onMouseMove">;
+export declare function pickTriggerPropsFromRest(rest: any): Pick<any, "onClick" | "tabIndex" | "onFocus" | "onBlur" | "onContextMenu" | "onMouseEnter" | "onMouseLeave" | "onMouseMove">;

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.2";
+export declare const version = "1.2.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.2';
+export var version = '1.2.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';

package/lib/_class/VirtualList/index.js

@@ -124,7 +124,7 @@ var VirtualList = react_1.default.forwardRef(function (props, ref) {
         refItemHeightMap.current[KEY_VIRTUAL_ITEM_HEIGHT] ||
         DEFAULT_VIRTUAL_ITEM_HEIGHT;
     var viewportHeight = (0, is_1.isNumber)(styleListMaxHeight) ? styleListMaxHeight : stateHeight;
-    var itemCountVisible = Math.ceil(viewportHeight / itemHeight);
+    var itemCountVisible = Math.ceil(viewportHeight / itemHeight) * 2;
     var itemTotalHeight = itemHeight * itemCount;
     var isVirtual = threshold !== null &&
         itemCount >= threshold &&
@@ -134,18 +134,17 @@ var VirtualList = react_1.default.forwardRef(function (props, ref) {
     var refLockScroll = (0, react_1.useRef)(false);
     var refIsVirtual = (0, react_1.useRef)(isVirtual);
     // The paddingTop of the record scrolling list is used to correct the scrolling distance
-    var scrollListPadding = (0, react_1.useMemo)(function () {
-        if (refList.current) {
-            var getPadding = function (property) {
-                return +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
-            };
-            return {
-                top: getPadding('paddingTop'),
-                bottom: getPadding('paddingBottom'),
-            };
-        }
-        return { top: 0, bottom: 0 };
-    }, [refList.current]);
+    // const scrollListPadding = useMemo<{ top: number; bottom: number }>(() => {
+    //   if (refList.current) {
+    //     const getPadding = (property) =>
+    //       +window.getComputedStyle(refList.current)[property].replace(/\D/g, '');
+    //     return {
+    //       top: getPadding('paddingTop'),
+    //       bottom: getPadding('paddingBottom'),
+    //     };
+    //   }
+    //   return { top: 0, bottom: 0 };
+    // }, [refList.current]);
     var _l = __read((0, useStateWithPromise_1.default)({
         // measure status
         status: 'NONE',
@@ -344,7 +343,8 @@ var VirtualList = react_1.default.forwardRef(function (props, ref) {
             var startItemTop = (0, itemUtil_1.getItemAbsoluteTop)({
                 scrollPtg: scrollPtg,
                 clientHeight: clientHeight,
-                scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,
+                scrollTop: scrollTop,
+                // scrollTop: scrollTop - (scrollListPadding.top + scrollListPadding.bottom) * scrollPtg,
                 itemHeight: getCachedItemHeight(getItemKeyByIndex(state.itemIndex)),
                 itemOffsetPtg: state.itemOffsetPtg,
             });

package/lib/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.2";
+export declare const version = "1.2.0";

package/lib/index.js

@@ -147,4 +147,4 @@ var Watermark_1 = require("./Watermark");
 Object.defineProperty(exports, "Watermark", { enumerable: true, get: function () { return __importDefault(Watermark_1).default; } });
 var Image_1 = require("./Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
-exports.version = '1.1.2';
+exports.version = '1.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/web-react",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "AP Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",
@@ -126,6 +126,7 @@
     "dayjs": "^1.10.5",
     "lodash": "^4.17.21",
     "number-precision": "^1.3.1",
+    "react-draggable": "^4.4.6",
     "react-focus-lock": "^2.12.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.3.0",