@rc-component/dialog 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +28 -31
  2. package/es/Dialog/Content/Panel.js +2 -2
  3. package/es/Dialog/Content/index.js +7 -5
  4. package/es/Dialog/index.js +4 -4
  5. package/es/DialogWrap.js +6 -4
  6. package/es/IDialogPropTypes.d.ts +1 -1
  7. package/lib/Dialog/Content/Panel.js +2 -2
  8. package/lib/Dialog/Content/index.js +7 -5
  9. package/lib/Dialog/index.js +4 -4
  10. package/lib/DialogWrap.js +6 -4
  11. package/lib/IDialogPropTypes.d.ts +1 -1
  12. package/package.json +12 -10
package/README.md CHANGED
@@ -49,34 +49,34 @@ ReactDOM.render(
49
49
 
50
50
  ### rc-dialog
51
51
 
52
- | Name | Type | Default | Description | Version |
53
- | ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- |
54
- | prefixCls | String | rc-dialog | The dialog dom node's prefixCls | |
55
- | className | String | | additional className for dialog | |
56
- | classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | | pass className to target area | |
57
- | styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | | pass styles to target area | |
58
- | style | Object | {} | Root style for dialog element.Such as width, height | |
59
- | zIndex | Number | | | |
60
- | visible | Boolean | false | current dialog's visible status | |
61
- | animation | String | | part of dialog animation css class name | |
62
- | maskAnimation | String | | part of dialog's mask animation css class name | |
63
- | transitionName | String | | dialog animation css class name | |
64
- | maskTransitionName | String | | mask animation css class name | |
65
- | title | String\|React.Element | | Title of the dialog | |
66
- | footer | React.Element | | footer of the dialog | |
67
- | closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button | |
68
- | mask | Boolean | true | whether show mask | |
69
- | maskClosable | Boolean | true | whether click mask to close | |
70
- | keyboard | Boolean | true | whether support press esc to close | |
71
- | mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | |
72
- | onClose | function() | | called when click close button or mask | |
73
- | afterClose | function() | | called when close animation end | |
74
- | getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | |
75
- | destroyOnClose | Boolean | false | to unmount child compenents on onClose | |
76
- | closeIcon | ReactNode | | specific the close icon. | |
77
- | forceRender | Boolean | false | Create dialog dom node before dialog first show | |
78
- | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | |
79
- | modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 |
52
+ | Name | Type | Default | Description | Version |
53
+ | --- | --- | --- | --- | --- |
54
+ | prefixCls | String | rc-dialog | The dialog dom node's prefixCls | |
55
+ | className | String | | additional className for dialog | |
56
+ | classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | | pass className to target area | |
57
+ | styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | | pass styles to target area | |
58
+ | style | Object | {} | Root style for dialog element.Such as width, height | |
59
+ | zIndex | Number | | | |
60
+ | visible | Boolean | false | current dialog's visible status | |
61
+ | animation | String | | part of dialog animation css class name | |
62
+ | maskAnimation | String | | part of dialog's mask animation css class name | |
63
+ | transitionName | String | | dialog animation css class name | |
64
+ | maskTransitionName | String | | mask animation css class name | |
65
+ | title | String\|React.Element | | Title of the dialog | |
66
+ | footer | React.Element | | footer of the dialog | |
67
+ | closable | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes | true | whether show close button | |
68
+ | mask | Boolean | true | whether show mask | |
69
+ | maskClosable | Boolean | true | whether click mask to close | |
70
+ | keyboard | Boolean | true | whether support press esc to close | |
71
+ | mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | |
72
+ | onClose | function() | | called when click close button or mask | |
73
+ | afterClose | function() | | called when close animation end | |
74
+ | getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | |
75
+ | destroyOnHidden | Boolean | false | to unmount child compenents on onClose | |
76
+ | closeIcon | ReactNode | | specific the close icon. | |
77
+ | forceRender | Boolean | false | Create dialog dom node before dialog first show | |
78
+ | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | |
79
+ | modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 |
80
80
 
81
81
  ## Development
82
82
 
@@ -85,8 +85,6 @@ npm install
85
85
  npm start
86
86
  ```
87
87
 
88
-
89
-
90
88
  ## Test Case
91
89
 
92
90
  ```
@@ -102,7 +100,6 @@ npm run coverage
102
100
 
103
101
  open coverage/ dir
104
102
 
105
-
106
103
  ## License
107
104
 
108
105
  rc-dialog is released under the MIT license.
package/es/Dialog/Content/Panel.js CHANGED
@@ -45,8 +45,8 @@ const Panel = /*#__PURE__*/React.forwardRef((props, ref) => {
45
45
  panel: panelRef
46
46
  } = React.useContext(RefContext);
47
47
  const mergedRef = useComposeRef(holderRef, panelRef);
48
- const sentinelStartRef = useRef();
49
- const sentinelEndRef = useRef();
48
+ const sentinelStartRef = useRef(null);
49
+ const sentinelEndRef = useRef(null);
50
50
  React.useImperativeHandle(ref, () => ({
51
51
  focus: () => {
52
52
  sentinelStartRef.current?.focus({
package/es/Dialog/Content/index.js CHANGED
@@ -13,14 +13,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
13
13
  className,
14
14
  visible,
15
15
  forceRender,
16
- destroyOnClose,
16
+ destroyOnHidden,
17
17
  motionName,
18
18
  ariaId,
19
19
  onVisibleChanged,
20
20
  mousePosition
21
21
  } = props;
22
- const dialogRef = useRef();
23
- const panelRef = useRef();
22
+ const dialogRef = useRef(null);
23
+ const panelRef = useRef(null);
24
24
 
25
25
  // ============================== Refs ==============================
26
26
  React.useImperativeHandle(ref, () => ({
@@ -48,7 +48,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
48
48
  onEnterPrepare: onPrepare,
49
49
  forceRender: forceRender,
50
50
  motionName: motionName,
51
- removeOnLeave: destroyOnClose,
51
+ removeOnLeave: destroyOnHidden,
52
52
  ref: dialogRef
53
53
  }, ({
54
54
  className: motionClassName,
@@ -67,5 +67,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
67
67
  className: classNames(className, motionClassName)
68
68
  })));
69
69
  });
70
- Content.displayName = 'Content';
70
+ if (process.env.NODE_ENV !== 'production') {
71
+ Content.displayName = 'Content';
72
+ }
71
73
  export default Content;
package/es/Dialog/index.js CHANGED
@@ -50,9 +50,9 @@ const Dialog = props => {
50
50
  warning(false, `wrapClassName is deprecated, please use classNames instead.`);
51
51
  }
52
52
  }
53
- const lastOutSideActiveElementRef = useRef();
54
- const wrapperRef = useRef();
55
- const contentRef = useRef();
53
+ const lastOutSideActiveElementRef = useRef(null);
54
+ const wrapperRef = useRef(null);
55
+ const contentRef = useRef(null);
56
56
  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
57
57
 
58
58
  // ========================== Init ==========================
@@ -106,7 +106,7 @@ const Dialog = props => {
106
106
 
107
107
  // >>> Content
108
108
  const contentClickRef = useRef(false);
109
- const contentTimeoutRef = useRef();
109
+ const contentTimeoutRef = useRef(null);
110
110
 
111
111
  // We need record content click incase content popup out of dialog
112
112
  const onContentMouseDown = () => {
package/es/DialogWrap.js CHANGED
@@ -17,7 +17,7 @@ const DialogWrap = props => {
17
17
  visible,
18
18
  getContainer,
19
19
  forceRender,
20
- destroyOnClose = false,
20
+ destroyOnHidden = false,
21
21
  afterClose,
22
22
  panelRef
23
23
  } = props;
@@ -32,7 +32,7 @@ const DialogWrap = props => {
32
32
  }, [visible]);
33
33
 
34
34
  // Destroy on close will remove wrapped div
35
- if (!forceRender && destroyOnClose && !animatedVisible) {
35
+ if (!forceRender && destroyOnHidden && !animatedVisible) {
36
36
  return null;
37
37
  }
38
38
  return /*#__PURE__*/React.createElement(RefContext.Provider, {
@@ -43,12 +43,14 @@ const DialogWrap = props => {
43
43
  getContainer: getContainer,
44
44
  autoLock: visible || animatedVisible
45
45
  }, /*#__PURE__*/React.createElement(Dialog, _extends({}, props, {
46
- destroyOnClose: destroyOnClose,
46
+ destroyOnHidden: destroyOnHidden,
47
47
  afterClose: () => {
48
48
  afterClose?.();
49
49
  setAnimatedVisible(false);
50
50
  }
51
51
  }))));
52
52
  };
53
- DialogWrap.displayName = 'Dialog';
53
+ if (process.env.NODE_ENV !== 'production') {
54
+ DialogWrap.displayName = 'Dialog';
55
+ }
54
56
  export default DialogWrap;
package/es/IDialogPropTypes.d.ts CHANGED
@@ -19,7 +19,7 @@ export type IDialogPropTypes = {
19
19
  } & React.AriaAttributes);
20
20
  maskClosable?: boolean;
21
21
  visible?: boolean;
22
- destroyOnClose?: boolean;
22
+ destroyOnHidden?: boolean;
23
23
  mousePosition?: {
24
24
  x: number;
25
25
  y: number;
package/lib/Dialog/Content/Panel.js CHANGED
@@ -54,8 +54,8 @@ const Panel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
54
54
  panel: panelRef
55
55
  } = _react.default.useContext(_context.RefContext);
56
56
  const mergedRef = (0, _ref.useComposeRef)(holderRef, panelRef);
57
- const sentinelStartRef = (0, _react.useRef)();
58
- const sentinelEndRef = (0, _react.useRef)();
57
+ const sentinelStartRef = (0, _react.useRef)(null);
58
+ const sentinelEndRef = (0, _react.useRef)(null);
59
59
  _react.default.useImperativeHandle(ref, () => ({
60
60
  focus: () => {
61
61
  sentinelStartRef.current?.focus({
package/lib/Dialog/Content/index.js CHANGED
@@ -22,14 +22,14 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
22
22
  className,
23
23
  visible,
24
24
  forceRender,
25
- destroyOnClose,
25
+ destroyOnHidden,
26
26
  motionName,
27
27
  ariaId,
28
28
  onVisibleChanged,
29
29
  mousePosition
30
30
  } = props;
31
- const dialogRef = (0, _react.useRef)();
32
- const panelRef = (0, _react.useRef)();
31
+ const dialogRef = (0, _react.useRef)(null);
32
+ const panelRef = (0, _react.useRef)(null);
33
33
 
34
34
  // ============================== Refs ==============================
35
35
  React.useImperativeHandle(ref, () => ({
@@ -57,7 +57,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
57
57
  onEnterPrepare: onPrepare,
58
58
  forceRender: forceRender,
59
59
  motionName: motionName,
60
- removeOnLeave: destroyOnClose,
60
+ removeOnLeave: destroyOnHidden,
61
61
  ref: dialogRef
62
62
  }, ({
63
63
  className: motionClassName,
@@ -76,5 +76,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
76
76
  className: (0, _classnames.default)(className, motionClassName)
77
77
  })));
78
78
  });
79
- Content.displayName = 'Content';
79
+ if (process.env.NODE_ENV !== 'production') {
80
+ Content.displayName = 'Content';
81
+ }
80
82
  var _default = exports.default = Content;
package/lib/Dialog/index.js CHANGED
@@ -59,9 +59,9 @@ const Dialog = props => {
59
59
  (0, _warning.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
60
60
  }
61
61
  }
62
- const lastOutSideActiveElementRef = (0, _react.useRef)();
63
- const wrapperRef = (0, _react.useRef)();
64
- const contentRef = (0, _react.useRef)();
62
+ const lastOutSideActiveElementRef = (0, _react.useRef)(null);
63
+ const wrapperRef = (0, _react.useRef)(null);
64
+ const contentRef = (0, _react.useRef)(null);
65
65
  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
66
66
 
67
67
  // ========================== Init ==========================
@@ -115,7 +115,7 @@ const Dialog = props => {
115
115
 
116
116
  // >>> Content
117
117
  const contentClickRef = (0, _react.useRef)(false);
118
- const contentTimeoutRef = (0, _react.useRef)();
118
+ const contentTimeoutRef = (0, _react.useRef)(null);
119
119
 
120
120
  // We need record content click incase content popup out of dialog
121
121
  const onContentMouseDown = () => {
package/lib/DialogWrap.js CHANGED
@@ -26,7 +26,7 @@ const DialogWrap = props => {
26
26
  visible,
27
27
  getContainer,
28
28
  forceRender,
29
- destroyOnClose = false,
29
+ destroyOnHidden = false,
30
30
  afterClose,
31
31
  panelRef
32
32
  } = props;
@@ -41,7 +41,7 @@ const DialogWrap = props => {
41
41
  }, [visible]);
42
42
 
43
43
  // Destroy on close will remove wrapped div
44
- if (!forceRender && destroyOnClose && !animatedVisible) {
44
+ if (!forceRender && destroyOnHidden && !animatedVisible) {
45
45
  return null;
46
46
  }
47
47
  return /*#__PURE__*/React.createElement(_context.RefContext.Provider, {
@@ -52,12 +52,14 @@ const DialogWrap = props => {
52
52
  getContainer: getContainer,
53
53
  autoLock: visible || animatedVisible
54
54
  }, /*#__PURE__*/React.createElement(_Dialog.default, _extends({}, props, {
55
- destroyOnClose: destroyOnClose,
55
+ destroyOnHidden: destroyOnHidden,
56
56
  afterClose: () => {
57
57
  afterClose?.();
58
58
  setAnimatedVisible(false);
59
59
  }
60
60
  }))));
61
61
  };
62
- DialogWrap.displayName = 'Dialog';
62
+ if (process.env.NODE_ENV !== 'production') {
63
+ DialogWrap.displayName = 'Dialog';
64
+ }
63
65
  var _default = exports.default = DialogWrap;
package/lib/IDialogPropTypes.d.ts CHANGED
@@ -19,7 +19,7 @@ export type IDialogPropTypes = {
19
19
  } & React.AriaAttributes);
20
20
  maskClosable?: boolean;
21
21
  visible?: boolean;
22
- destroyOnClose?: boolean;
22
+ destroyOnHidden?: boolean;
23
23
  mousePosition?: {
24
24
  x: number;
25
25
  y: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/dialog",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "description": "dialog ui component for react",
5
5
  "keywords": [
6
6
  "react",
@@ -40,7 +40,8 @@
40
40
  "prepublishOnly": "npm run compile && rc-np",
41
41
  "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
42
42
  "start": "dumi dev",
43
- "test": "rc-test"
43
+ "test": "rc-test",
44
+ "tsc": "bunx tsc --noEmit"
44
45
  },
45
46
  "lint-staged": {
46
47
  "**/*.{js,jsx,tsx,ts,md,json}": [
@@ -49,20 +50,23 @@
49
50
  ]
50
51
  },
51
52
  "dependencies": {
52
- "@rc-component/portal": "^1.0.0-8",
53
+ "@rc-component/motion": "^1.1.3",
54
+ "@rc-component/portal": "^2.0.0",
53
55
  "@rc-component/util": "^1.0.1",
54
- "classnames": "^2.2.6",
55
- "@rc-component/motion": "^1.1.3"
56
+ "classnames": "^2.2.6"
56
57
  },
57
58
  "devDependencies": {
59
+ "@rc-component/drawer": "^1.0.0",
58
60
  "@rc-component/father-plugin": "^2.0.2",
59
61
  "@rc-component/np": "^1.0.3",
62
+ "@rc-component/select": "^1.0.0",
60
63
  "@testing-library/jest-dom": "^6.1.6",
61
64
  "@testing-library/react": "^13.0.0",
62
65
  "@types/jest": "^29.4.0",
63
66
  "@types/keyv": "3.1.4",
64
- "@types/react": "^18.0.24",
65
- "@types/react-dom": "^18.0.8",
67
+ "@types/node": "^22.15.18",
68
+ "@types/react": "^19.1.4",
69
+ "@types/react-dom": "^19.1.5",
66
70
  "@umijs/fabric": "^3.0.0",
67
71
  "bootstrap": "^4.3.1",
68
72
  "cheerio": "1.0.0-rc.12",
@@ -74,12 +78,10 @@
74
78
  "father": "^4.1.5",
75
79
  "gh-pages": "^6.1.1",
76
80
  "glob": "^11.0.0",
77
- "husky": "^8.0.3",
81
+ "husky": "^9.1.6",
78
82
  "less": "^4.1.3",
79
83
  "lint-staged": "^15.2.0",
80
84
  "prettier": "^3.2.1",
81
- "rc-drawer": "^7.0.0",
82
- "rc-select": "^14.11.0",
83
85
  "rc-test": "^7.0.14",
84
86
  "react": "^18.0.0",
85
87
  "react-dom": "^18.0.0",