@apdesign/web-react 1.3.2 → 1.3.3

package/es/Button/index.d.ts

@@ -2,12 +2,12 @@ import React from 'react';
 import Group from './group';
 import { ButtonProps } from './interface';
 declare const ButtonComponent: React.ForwardRefExoticComponent<Partial<{
-    htmlType?: "button" | "reset" | "submit";
-} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "onClick" | "type"> & {
+    htmlType?: "button" | "submit" | "reset";
+} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "type" | "onClick"> & {
     href: string;
     target?: string;
     anchorProps?: React.HTMLProps<HTMLAnchorElement>;
-} & Omit<React.AnchorHTMLAttributes<any>, "className" | "onClick" | "type">> & React.RefAttributes<unknown>> & {
+} & Omit<React.AnchorHTMLAttributes<any>, "className" | "type" | "onClick">> & React.RefAttributes<unknown>> & {
     __BYTE_BUTTON: boolean;
     Group: typeof Group;
 };

package/es/Modal/modal.js

@@ -85,7 +85,9 @@ function Modal(baseProps, ref) {
     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, 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 className = props.className, style = props.style, visible = props.visible, simple = props.simple, originTitle = 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"]);
+    // 由于draggable是在title上进行，所以这里处理没有title的情况
+    var title = draggable ? originTitle || ' ' : originTitle;
     var modalWrapperRef = useRef(null);
     var contentWrapper = useRef(null);
     var modalRef = useRef(null);
@@ -202,7 +204,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (React.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
+        (title || draggable) && (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(),
@@ -210,10 +212,12 @@ function Modal(baseProps, ref) {
             (closeIcon !== undefined ? (React.createElement("span", { onClick: onCancel, className: prefixCls + "-close-icon" }, closeIcon)) : (React.createElement(IconHover, { tabIndex: -1, onClick: onCancel, className: prefixCls + "-close-icon", role: "button", "aria-label": "Close" },
                 React.createElement(IconClose, null))))));
     var ariaProps = title ? { 'aria-labelledby': "arco-dialog-" + dialogIndex.current } : {};
+    // 将绑定到弹窗的尺寸相关样式移到上层div
+    var _h = style || {}, width = _h.width, height = _h.height, restStyle = __rest(_h, ["width", "height"]);
     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: __assign({ display: draggable ? 'block' : null }, style), ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: __assign(__assign({ display: draggable ? 'block' : null }, restStyle), { width: draggable ? '100%' : width, height: draggable ? '100%' : height }), ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (React.createElement(React.Fragment, null, element))));
@@ -227,7 +231,7 @@ function Modal(baseProps, ref) {
     });
     // 包装在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);
+        React.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block', width: width, height: height } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;

package/es/Select/option.js

@@ -100,6 +100,7 @@ function Option(props, ref) {
                         backgroundColor: 'rgb(var(--primary-6))',
                         cursor: 'pointer',
                         color: 'white',
+                        fontSize: '12px',
                         padding: '7px',
                         paddingLeft: '20px',
                         marginLeft: '-20px',

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, "onFocus" | "onBlur" | "onClick" | "tabIndex" | "onContextMenu" | "onMouseEnter" | "onMouseLeave" | "onMouseMove">;
+export declare function pickTriggerPropsFromRest(rest: any): Pick<any, "onClick" | "onFocus" | "onBlur" | "tabIndex" | "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.3.2";
+export declare const version = "1.3.3";

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.3.2';
+export var version = '1.3.3';

package/lib/Modal/modal.js

@@ -109,7 +109,9 @@ function Modal(baseProps, ref) {
     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, 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 className = props.className, style = props.style, visible = props.visible, simple = props.simple, originTitle = 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"]);
+    // 由于draggable是在title上进行，所以这里处理没有title的情况
+    var title = draggable ? originTitle || ' ' : originTitle;
     var modalWrapperRef = (0, react_1.useRef)(null);
     var contentWrapper = (0, react_1.useRef)(null);
     var modalRef = (0, react_1.useRef)(null);
@@ -226,7 +228,7 @@ function Modal(baseProps, ref) {
                 ? getChildrenPopupContainer(node)
                 : contentWrapper.current;
         } }),
-        title && (react_1.default.createElement("div", { className: prefixCls + "-header", style: { cursor: draggable ? 'move' : null } },
+        (title || draggable) && (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(),
@@ -234,10 +236,12 @@ function Modal(baseProps, ref) {
             (closeIcon !== undefined ? (react_1.default.createElement("span", { onClick: onCancel, className: prefixCls + "-close-icon" }, closeIcon)) : (react_1.default.createElement(icon_hover_1.default, { tabIndex: -1, onClick: onCancel, className: prefixCls + "-close-icon", role: "button", "aria-label": "Close" },
                 react_1.default.createElement(IconClose_1.default, null))))));
     var ariaProps = title ? { 'aria-labelledby': "arco-dialog-" + dialogIndex.current } : {};
+    // 将绑定到弹窗的尺寸相关样式移到上层div
+    var _h = style || {}, width = _h.width, height = _h.height, restStyle = __rest(_h, ["width", "height"]);
     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: __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: {
+            _a), className), style: __assign(__assign({ display: draggable ? 'block' : null }, restStyle), { width: draggable ? '100%' : width, height: draggable ? '100%' : height }), 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))));
@@ -251,7 +255,7 @@ function Modal(baseProps, ref) {
     });
     // 包装在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);
+        react_1.default.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block', width: width, height: height } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;

package/lib/Select/option.js

@@ -124,6 +124,7 @@ function Option(props, ref) {
                         backgroundColor: 'rgb(var(--primary-6))',
                         cursor: 'pointer',
                         color: 'white',
+                        fontSize: '12px',
                         padding: '7px',
                         paddingLeft: '20px',
                         marginLeft: '-20px',

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.3.2";
+export declare const version = "1.3.3";

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.3.2';
+exports.version = '1.3.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/web-react",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "AP Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",