rc-dialog - npm Package Compare versions

Comparing version 9.3.1 to 9.3.2

es/Dialog/Content/Panel.js

@@ -0,3 +1,3 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import classNames from 'classnames';
@@ -35,3 +35,4 @@ import { useComposeRef } from "rc-util/es/ref";
     height = props.height,
-    modalClassNames = props.classNames;
+    modalClassNames = props.classNames,
+    modalStyles = props.styles;
 
@@ -74,3 +75,4 @@ // ================================= Refs =================================
     footerNode = /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer)
+      className: classNames("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer),
+      style: _objectSpread({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.footer)
     }, footer);
@@ -81,3 +83,4 @@ }
     headerNode = /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header)
+      className: classNames("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header),
+      style: _objectSpread({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header)
     }, /*#__PURE__*/React.createElement("div", {
@@ -103,3 +106,3 @@ className: "".concat(prefixCls, "-title"),
     className: classNames("".concat(prefixCls, "-body"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.body),
-    style: bodyStyle
+    style: _objectSpread(_objectSpread({}, bodyStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
   }, bodyProps), children), footerNode);
@@ -106,0 +109,0 @@ return /*#__PURE__*/React.createElement("div", {

es/Dialog/index.js

@@ -14,2 +14,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import Mask from "./Mask";
+import { warning } from 'rc-util';
 export default function Dialog(props) {
@@ -44,3 +45,13 @@ var _props$prefixCls = props.prefixCls,
     rootClassName = props.rootClassName,
-    modalClassNames = props.classNames;
+    modalClassNames = props.classNames,
+    modalStyles = props.styles;
+  if (process.env.NODE_ENV !== 'production') {
+    ["wrapStyle", "bodyStyle", "maskStyle"].forEach(function (prop) {
+      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
+      warning(!(prop in props), "".concat(prop, " is deprecated, please use styles instead."));
+    });
+    if ("wrapClassName" in props) {
+      warning(false, "wrapClassName is deprecated, please use classNames instead.");
+    }
+  }
   var lastOutSideActiveElementRef = useRef();
@@ -164,5 +175,5 @@ var wrapperRef = useRef();
     motionName: getMotionName(prefixCls, maskTransitionName, maskAnimation),
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       zIndex: zIndex
-    }, maskStyle),
+    }, maskStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.mask),
     maskProps: maskProps,
@@ -176,5 +187,5 @@ className: modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.mask
     onClick: onWrapperClick,
-    style: _objectSpread(_objectSpread({
+    style: _objectSpread(_objectSpread(_objectSpread({
       zIndex: zIndex
-    }, wrapStyle), {}, {
+    }, wrapStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.wrapper), {}, {
       display: !animatedVisible ? 'none' : null
@@ -181,0 +192,0 @@ })

es/IDialogPropTypes.d.ts

@@ -10,2 +10,9 @@ import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 }
+export interface ModalStyles {
+    header?: CSSProperties;
+    body?: CSSProperties;
+    footer?: CSSProperties;
+    mask?: CSSProperties;
+    wrapper?: CSSProperties;
+}
 export type IDialogPropTypes = {
@@ -46,2 +53,3 @@ className?: string;
     classNames?: ModalClassNames;
+    styles?: ModalStyles;
     wrapProps?: any;
@@ -48,0 +56,0 @@ getContainer?: GetContainer | false;

lib/Dialog/Content/Panel.js

@@ -9,4 +9,4 @@ "use strict";
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -46,3 +46,4 @@ var _ref = require("rc-util/lib/ref");
     height = props.height,
-    modalClassNames = props.classNames;
+    modalClassNames = props.classNames,
+    modalStyles = props.styles;
 
@@ -85,3 +86,4 @@ // ================================= Refs =================================
     footerNode = /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer)
+      className: (0, _classnames.default)("".concat(prefixCls, "-footer"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.footer),
+      style: (0, _objectSpread2.default)({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.footer)
     }, footer);
@@ -92,3 +94,4 @@ }
     headerNode = /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header)
+      className: (0, _classnames.default)("".concat(prefixCls, "-header"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.header),
+      style: (0, _objectSpread2.default)({}, modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.header)
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -114,3 +117,3 @@ className: "".concat(prefixCls, "-title"),
     className: (0, _classnames.default)("".concat(prefixCls, "-body"), modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.body),
-    style: bodyStyle
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bodyStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.body)
   }, bodyProps), children), footerNode);
@@ -117,0 +120,0 @@ return /*#__PURE__*/_react.default.createElement("div", {

lib/Dialog/index.js

@@ -21,2 +21,3 @@ "use strict";
 var _Mask = _interopRequireDefault(require("./Mask"));
+var _rcUtil = require("rc-util");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -53,3 +54,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
     rootClassName = props.rootClassName,
-    modalClassNames = props.classNames;
+    modalClassNames = props.classNames,
+    modalStyles = props.styles;
+  if (process.env.NODE_ENV !== 'production') {
+    ["wrapStyle", "bodyStyle", "maskStyle"].forEach(function (prop) {
+      // (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
+      (0, _rcUtil.warning)(!(prop in props), "".concat(prop, " is deprecated, please use styles instead."));
+    });
+    if ("wrapClassName" in props) {
+      (0, _rcUtil.warning)(false, "wrapClassName is deprecated, please use classNames instead.");
+    }
+  }
   var lastOutSideActiveElementRef = (0, React.useRef)();
@@ -173,5 +184,5 @@ var wrapperRef = (0, React.useRef)();
     motionName: (0, _util.getMotionName)(prefixCls, maskTransitionName, maskAnimation),
-    style: (0, _objectSpread2.default)({
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
       zIndex: zIndex
-    }, maskStyle),
+    }, maskStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.mask),
     maskProps: maskProps,
@@ -185,5 +196,5 @@ className: modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.mask
     onClick: onWrapperClick,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
       zIndex: zIndex
-    }, wrapStyle), {}, {
+    }, wrapStyle), modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.wrapper), {}, {
       display: !animatedVisible ? 'none' : null
@@ -190,0 +201,0 @@ })

lib/IDialogPropTypes.d.ts

@@ -10,2 +10,9 @@ import type { GetContainer } from 'rc-util/lib/PortalWrapper';
 }
+export interface ModalStyles {
+    header?: CSSProperties;
+    body?: CSSProperties;
+    footer?: CSSProperties;
+    mask?: CSSProperties;
+    wrapper?: CSSProperties;
+}
 export type IDialogPropTypes = {
@@ -46,2 +53,3 @@ className?: string;
     classNames?: ModalClassNames;
+    styles?: ModalStyles;
     wrapProps?: any;
@@ -48,0 +56,0 @@ getContainer?: GetContainer | false;

package.json

 {
   "name": "rc-dialog",
-  "version": "9.3.1",
+  "version": "9.3.2",
   "description": "dialog ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -57,6 +57,5 @@ # rc-dialog
 | classNames             | { mask?: string; wrapper?: string; header?: string; body?: string; footer?: string} |           | pass className to target area |         |
+| styles                 | { mask?: CSSProperties; wrapper?: CSSProperties; header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties} |    | pass styles to target area |         |
 | style                  | Object                         | {}        | Root style for dialog element.Such as width, height                             |         |
 | zIndex                 | Number                         |           |                                                                                 |         |
-| bodyStyle              | Object                         | {}        | body style for dialog body element.Such as height                               |         |
-| maskStyle              | Object                         | {}        | style for mask element                                                          |         |
 | visible                | Boolean                        | false     | current dialog's visible status                                                 |         |
@@ -63,0 +62,0 @@ | animation              | String                         |           | part of dialog animation css class name                                         |         |

No alert changes

Improved metrics

Total package byte prevSize

77182

increased by3.35%

Lines of code

1718

increased by2.63%

Worsened metrics

Number of lines in readme file

109

decreased by-0.91%

Number of low supply chain risk alerts

4

increased by100%

No dependency changes