@rc-component/dialog 1.3.0 → 1.5.0

package/README.md

@@ -64,7 +64,7 @@ ReactDOM.render(
 | maskTransitionName | String |  | mask animation css class name |  |
 | title | String\|React.Element |  | Title of the dialog |  |
 | footer | React.Element |  | footer of the dialog |  |
-| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button |  |
+| closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean, afterClose:function } & React.AriaAttributes) | true | whether show close button |  |
 | mask | Boolean | true | whether show mask |  |
 | maskClosable | Boolean | true | whether click mask to close |  |
 | keyboard | Boolean | true | whether support press esc to close |  |
@@ -103,3 +103,10 @@ open coverage/ dir
 ## License
 
 rc-dialog is released under the MIT license.
+
+
+## 🤝 Contributing 
+
+<a href="https://openomy.app/github/react-component/dialog" target="_blank" style="display: block; width: 100%;" align="center">
+  <img src="https://www.openomy.app/svg?repo=react-component/dialog&chart=bubble&latestMonth=24" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
+</a>

package/assets/bootstrap.css

@@ -14,7 +14,7 @@
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
-.rc-dialog-section {
+.rc-dialog-container {
   position: relative;
   background-color: #fff;
   border: 1px solid #999;
@@ -80,7 +80,7 @@
     width: 600px;
     margin: 30px auto;
   }
-  .rc-dialog-section {
+  .rc-dialog-container {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   }
 }

package/assets/index.css

@@ -20,7 +20,7 @@
   line-height: 21px;
   font-weight: bold;
 }
-.rc-dialog-section {
+.rc-dialog-container {
   position: relative;
   background-color: #ffffff;
   border: none;

package/es/Dialog/Content/Panel.js

@@ -120,8 +120,8 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled: closeBtnIsDisabled
   }), closableObj.closeIcon) : null;
   const content = /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefixCls}-section`, modalClassNames?.section),
-    style: modalStyles?.section
+    className: classNames(`${prefixCls}-container`, modalClassNames?.container),
+    style: modalStyles?.container
   }, closerNode, headerNode, /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(`${prefixCls}-body`, modalClassNames?.body),
     style: {

package/es/DialogWrap.js

@@ -19,6 +19,7 @@ const DialogWrap = props => {
     forceRender,
     destroyOnHidden = false,
     afterClose,
+    closable,
     panelRef
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
@@ -45,6 +46,11 @@ const DialogWrap = props => {
   }, /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
     destroyOnHidden: destroyOnHidden,
     afterClose: () => {
+      const closableObj = closable && typeof closable === 'object' ? closable : {};
+      const {
+        afterClose: closableAfterClose
+      } = closableObj || {};
+      closableAfterClose?.();
       afterClose?.();
       setAnimatedVisible(false);
     }

package/es/IDialogPropTypes.d.ts

@@ -1,8 +1,13 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
-export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
+export type ClosableType = {
+    closeIcon?: React.ReactNode;
+    disabled?: boolean;
+    afterClose?: () => any;
+};
 export type IDialogPropTypes = {
     className?: string;
     keyboard?: boolean;
@@ -13,10 +18,7 @@ export type IDialogPropTypes = {
     afterClose?: () => any;
     afterOpenChange?: (open: boolean) => void;
     onClose?: (e: SyntheticEvent) => any;
-    closable?: boolean | ({
-        closeIcon?: React.ReactNode;
-        disabled?: boolean;
-    } & React.AriaAttributes);
+    closable?: boolean | (ClosableType & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;
     destroyOnHidden?: boolean;

package/lib/Dialog/Content/Panel.js

@@ -129,8 +129,8 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     disabled: closeBtnIsDisabled
   }), closableObj.closeIcon) : null;
   const content = /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefixCls}-section`, modalClassNames?.section),
-    style: modalStyles?.section
+    className: (0, _classnames.default)(`${prefixCls}-container`, modalClassNames?.container),
+    style: modalStyles?.container
   }, closerNode, headerNode, /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)(`${prefixCls}-body`, modalClassNames?.body),
     style: {

package/lib/DialogWrap.js

@@ -28,6 +28,7 @@ const DialogWrap = props => {
     forceRender,
     destroyOnHidden = false,
     afterClose,
+    closable,
     panelRef
   } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
@@ -54,6 +55,11 @@ const DialogWrap = props => {
   }, /*#__PURE__*/React.createElement(_Dialog.default, _extends({}, props, {
     destroyOnHidden: destroyOnHidden,
     afterClose: () => {
+      const closableObj = closable && typeof closable === 'object' ? closable : {};
+      const {
+        afterClose: closableAfterClose
+      } = closableObj || {};
+      closableAfterClose?.();
       afterClose?.();
       setAnimatedVisible(false);
     }

package/lib/IDialogPropTypes.d.ts

@@ -1,8 +1,13 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
-export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 export type ModalStyles = Partial<Record<SemanticName, CSSProperties>>;
+export type ClosableType = {
+    closeIcon?: React.ReactNode;
+    disabled?: boolean;
+    afterClose?: () => any;
+};
 export type IDialogPropTypes = {
     className?: string;
     keyboard?: boolean;
@@ -13,10 +18,7 @@ export type IDialogPropTypes = {
     afterClose?: () => any;
     afterOpenChange?: (open: boolean) => void;
     onClose?: (e: SyntheticEvent) => any;
-    closable?: boolean | ({
-        closeIcon?: React.ReactNode;
-        disabled?: boolean;
-    } & React.AriaAttributes);
+    closable?: boolean | (ClosableType & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;
     destroyOnHidden?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -61,15 +61,14 @@
     "@rc-component/np": "^1.0.3",
     "@rc-component/select": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
-    "@types/node": "^22.15.18",
+    "@types/node": "^24.0.8",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",
     "@umijs/fabric": "^3.0.0",
-    "bootstrap": "^4.3.1",
-    "cheerio": "1.0.0-rc.12",
+    "bootstrap": "^5.3.7",
     "cross-env": "^7.0.0",
     "dumi": "^2.1.3",
     "eslint": "^7.1.0",
@@ -80,7 +79,7 @@
     "glob": "^11.0.0",
     "husky": "^9.1.6",
     "less": "^4.1.3",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^16.1.2",
     "prettier": "^3.2.1",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",