@rc-component/dialog 1.2.0 → 1.4.0

package/README.md

@@ -49,34 +49,34 @@ ReactDOM.render(
 
 ### rc-dialog
 
-| Name                   | Type                           | Default   | Description                                                                     | Version |
-| ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- |
-| prefixCls              | String                         | rc-dialog | The dialog dom node's prefixCls                                                 |         |
-| className              | String                         |           | additional className for dialog                                                 |         |
-| classNames             | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;  } |           | pass className to target area |         |
-| styles                 | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;  } |    | pass styles to target area |         |
-| style                  | Object                         | {}        | Root style for dialog element.Such as width, height                             |         |
-| zIndex                 | Number                         |           |                                                                                 |         |
-| visible                | Boolean                        | false     | current dialog's visible status                                                 |         |
-| animation              | String                         |           | part of dialog animation css class name                                         |         |
-| maskAnimation          | String                         |           | part of dialog's mask animation css class name                                  |         |
-| transitionName         | String                         |           | dialog animation css class name                                                 |         |
-| 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 |         |
-| mask                   | Boolean                        | true      | whether show mask                                                               |         |
-| maskClosable           | Boolean                        | true      | whether click mask to close                                                     |         |
-| keyboard               | Boolean                        | true      | whether support press esc to close                                              |         |
-| mousePosition          | {x:number,y:number}            |           | set pageX and pageY of current mouse(it will cause transform origin to be set). |         |
-| onClose                | function()                     |           | called when click close button or mask                                          |         |
-| afterClose             | function()                     |           | called when close animation end                                                 |         |
-| getContainer           | function(): HTMLElement        |           | to determine where Dialog will be mounted                                       |         |
-| destroyOnClose         | Boolean                        | false     | to unmount child compenents on onClose                                          |         |
-| closeIcon              | ReactNode                      |           | specific the close icon.                                                        |         |
-| forceRender            | Boolean                        | false     | Create dialog dom node before dialog first show                                 |         |
-| focusTriggerAfterClose | Boolean                        | true      | focus trigger element when dialog closed                                        |         |
-| modalRender            | (node: ReactNode) => ReactNode |           | Custom modal content render                                                     | 8.3.0   |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| prefixCls | String | rc-dialog | The dialog dom node's prefixCls |  |
+| className | String |  | additional className for dialog |  |
+| classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } |  | pass className to target area |  |
+| styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } |  | pass styles to target area |  |
+| style | Object | {} | Root style for dialog element.Such as width, height |  |
+| zIndex | Number |  |  |  |
+| visible | Boolean | false | current dialog's visible status |  |
+| animation | String |  | part of dialog animation css class name |  |
+| maskAnimation | String |  | part of dialog's mask animation css class name |  |
+| transitionName | String |  | dialog animation css class name |  |
+| 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 |  |
+| mask | Boolean | true | whether show mask |  |
+| maskClosable | Boolean | true | whether click mask to close |  |
+| keyboard | Boolean | true | whether support press esc to close |  |
+| mousePosition | {x:number,y:number} |  | set pageX and pageY of current mouse(it will cause transform origin to be set). |  |
+| onClose | function() |  | called when click close button or mask |  |
+| afterClose | function() |  | called when close animation end |  |
+| getContainer | function(): HTMLElement |  | to determine where Dialog will be mounted |  |
+| destroyOnHidden | Boolean | false | to unmount child compenents on onClose |  |
+| closeIcon | ReactNode |  | specific the close icon. |  |
+| forceRender | Boolean | false | Create dialog dom node before dialog first show |  |
+| focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed |  |
+| modalRender | (node: ReactNode) => ReactNode |  | Custom modal content render | 8.3.0 |
 
 ## Development
 
@@ -85,8 +85,6 @@ npm install
 npm start
 ```
 
-
-
 ## Test Case
 
 ```
@@ -102,7 +100,13 @@ npm run coverage
 
 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

@@ -45,8 +45,8 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
     panel: panelRef
   } = React.useContext(RefContext);
   const mergedRef = useComposeRef(holderRef, panelRef);
-  const sentinelStartRef = useRef();
-  const sentinelEndRef = useRef();
+  const sentinelStartRef = useRef(null);
+  const sentinelEndRef = useRef(null);
   React.useImperativeHandle(ref, () => ({
     focus: () => {
       sentinelStartRef.current?.focus({
@@ -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/Dialog/Content/index.js

@@ -13,14 +13,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     className,
     visible,
     forceRender,
-    destroyOnClose,
+    destroyOnHidden,
     motionName,
     ariaId,
     onVisibleChanged,
     mousePosition
   } = props;
-  const dialogRef = useRef();
-  const panelRef = useRef();
+  const dialogRef = useRef(null);
+  const panelRef = useRef(null);
 
   // ============================== Refs ==============================
   React.useImperativeHandle(ref, () => ({
@@ -48,7 +48,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     onEnterPrepare: onPrepare,
     forceRender: forceRender,
     motionName: motionName,
-    removeOnLeave: destroyOnClose,
+    removeOnLeave: destroyOnHidden,
     ref: dialogRef
   }, ({
     className: motionClassName,
@@ -67,5 +67,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: classNames(className, motionClassName)
   })));
 });
-Content.displayName = 'Content';
+if (process.env.NODE_ENV !== 'production') {
+  Content.displayName = 'Content';
+}
 export default Content;

package/es/Dialog/index.js

@@ -50,9 +50,9 @@ const Dialog = props => {
       warning(false, `wrapClassName is deprecated, please use classNames instead.`);
     }
   }
-  const lastOutSideActiveElementRef = useRef();
-  const wrapperRef = useRef();
-  const contentRef = useRef();
+  const lastOutSideActiveElementRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
   // ========================== Init ==========================
@@ -106,7 +106,7 @@ const Dialog = props => {
 
   // >>> Content
   const contentClickRef = useRef(false);
-  const contentTimeoutRef = useRef();
+  const contentTimeoutRef = useRef(null);
 
   // We need record content click incase content popup out of dialog
   const onContentMouseDown = () => {

package/es/DialogWrap.js

@@ -17,7 +17,7 @@ const DialogWrap = props => {
     visible,
     getContainer,
     forceRender,
-    destroyOnClose = false,
+    destroyOnHidden = false,
     afterClose,
     panelRef
   } = props;
@@ -32,7 +32,7 @@ const DialogWrap = props => {
   }, [visible]);
 
   // Destroy on close will remove wrapped div
-  if (!forceRender && destroyOnClose && !animatedVisible) {
+  if (!forceRender && destroyOnHidden && !animatedVisible) {
     return null;
   }
   return /*#__PURE__*/React.createElement(RefContext.Provider, {
@@ -43,12 +43,14 @@ const DialogWrap = props => {
     getContainer: getContainer,
     autoLock: visible || animatedVisible
   }, /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
-    destroyOnClose: destroyOnClose,
+    destroyOnHidden: destroyOnHidden,
     afterClose: () => {
       afterClose?.();
       setAnimatedVisible(false);
     }
   }))));
 };
-DialogWrap.displayName = 'Dialog';
+if (process.env.NODE_ENV !== 'production') {
+  DialogWrap.displayName = 'Dialog';
+}
 export default DialogWrap;

package/es/IDialogPropTypes.d.ts

@@ -1,6 +1,6 @@
 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 IDialogPropTypes = {
@@ -19,7 +19,7 @@ export type IDialogPropTypes = {
     } & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;
-    destroyOnClose?: boolean;
+    destroyOnHidden?: boolean;
     mousePosition?: {
         x: number;
         y: number;

package/lib/Dialog/Content/Panel.js

@@ -54,8 +54,8 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     panel: panelRef
   } = _react.default.useContext(_context.RefContext);
   const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef);
-  const sentinelStartRef = (0, _react.useRef)();
-  const sentinelEndRef = (0, _react.useRef)();
+  const sentinelStartRef = (0, _react.useRef)(null);
+  const sentinelEndRef = (0, _react.useRef)(null);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => {
       sentinelStartRef.current?.focus({
@@ -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/Dialog/Content/index.js

@@ -22,14 +22,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     className,
     visible,
     forceRender,
-    destroyOnClose,
+    destroyOnHidden,
     motionName,
     ariaId,
     onVisibleChanged,
     mousePosition
   } = props;
-  const dialogRef = (0, _react.useRef)();
-  const panelRef = (0, _react.useRef)();
+  const dialogRef = (0, _react.useRef)(null);
+  const panelRef = (0, _react.useRef)(null);
 
   // ============================== Refs ==============================
   React.useImperativeHandle(ref, () => ({
@@ -57,7 +57,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     onEnterPrepare: onPrepare,
     forceRender: forceRender,
     motionName: motionName,
-    removeOnLeave: destroyOnClose,
+    removeOnLeave: destroyOnHidden,
     ref: dialogRef
   }, ({
     className: motionClassName,
@@ -76,5 +76,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: (0, _classnames.default)(className, motionClassName)
   })));
 });
-Content.displayName = 'Content';
+if (process.env.NODE_ENV !== 'production') {
+  Content.displayName = 'Content';
+}
 var _default = exports.default = Content;

package/lib/Dialog/index.js

@@ -59,9 +59,9 @@ const Dialog = props => {
       (0, _warning.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
     }
   }
-  const lastOutSideActiveElementRef = (0, _react.useRef)();
-  const wrapperRef = (0, _react.useRef)();
-  const contentRef = (0, _react.useRef)();
+  const lastOutSideActiveElementRef = (0, _react.useRef)(null);
+  const wrapperRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
 
   // ========================== Init ==========================
@@ -115,7 +115,7 @@ const Dialog = props => {
 
   // >>> Content
   const contentClickRef = (0, _react.useRef)(false);
-  const contentTimeoutRef = (0, _react.useRef)();
+  const contentTimeoutRef = (0, _react.useRef)(null);
 
   // We need record content click incase content popup out of dialog
   const onContentMouseDown = () => {

package/lib/DialogWrap.js

@@ -26,7 +26,7 @@ const DialogWrap = props => {
     visible,
     getContainer,
     forceRender,
-    destroyOnClose = false,
+    destroyOnHidden = false,
     afterClose,
     panelRef
   } = props;
@@ -41,7 +41,7 @@ const DialogWrap = props => {
   }, [visible]);
 
   // Destroy on close will remove wrapped div
-  if (!forceRender && destroyOnClose && !animatedVisible) {
+  if (!forceRender && destroyOnHidden && !animatedVisible) {
     return null;
   }
   return /*#__PURE__*/React.createElement(_context.RefContext.Provider, {
@@ -52,12 +52,14 @@ const DialogWrap = props => {
     getContainer: getContainer,
     autoLock: visible || animatedVisible
   }, /*#__PURE__*/React.createElement(_Dialog.default, _extends({}, props, {
-    destroyOnClose: destroyOnClose,
+    destroyOnHidden: destroyOnHidden,
     afterClose: () => {
       afterClose?.();
       setAnimatedVisible(false);
     }
   }))));
 };
-DialogWrap.displayName = 'Dialog';
+if (process.env.NODE_ENV !== 'production') {
+  DialogWrap.displayName = 'Dialog';
+}
 var _default = exports.default = DialogWrap;

package/lib/IDialogPropTypes.d.ts

@@ -1,6 +1,6 @@
 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 IDialogPropTypes = {
@@ -19,7 +19,7 @@ export type IDialogPropTypes = {
     } & React.AriaAttributes);
     maskClosable?: boolean;
     visible?: boolean;
-    destroyOnClose?: boolean;
+    destroyOnHidden?: boolean;
     mousePosition?: {
         x: number;
         y: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/dialog",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "dialog ui component for react",
   "keywords": [
     "react",
@@ -57,18 +57,18 @@
   },
   "devDependencies": {
     "@rc-component/drawer": "^1.0.0",
-    "@rc-component/select": "^1.0.0",
     "@rc-component/father-plugin": "^2.0.2",
     "@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/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
+    "@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",
@@ -77,9 +77,9 @@
     "father": "^4.1.5",
     "gh-pages": "^6.1.1",
     "glob": "^11.0.0",
-    "husky": "^8.0.3",
+    "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",