@uiw/react-modal - npm Package Compare versions

Comparing version 4.21.14 to 5.0.0-bate-0

cjs/CallShow.d.ts

 import React from 'react';
 import { ModalProps } from './';
-export default function CallShow(props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
-    children?: React.ReactNode;
+export default function CallShow(props: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
+    children: React.ReactNode;
 }): void;
+//# sourceMappingURL=CallShow.d.ts.map

cjs/CallShow.js

@@ -25,8 +25,6 @@ "use strict";
 function CallShow(props) {
-  var _ref = props || {},
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '提示框' : _ref$title,
-      children = _ref.children,
-      other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
+  var _props$title = props.title,
+      title = _props$title === void 0 ? '提示框' : _props$title,
+      children = props.children,
+      other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var dv = document.createElement('div');
@@ -33,0 +31,0 @@ dv.id = 'uiw-modal-call-show-element';

cjs/index.d.ts

 import React from 'react';
 import { OverlayProps } from '@uiw/react-overlay';
 import { ButtonType, ButtonProps } from '@uiw/react-button';
-import { IconProps } from '@uiw/react-icon';
 import { IProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export interface ModalProps extends IProps, OverlayProps {
@@ -15,3 +14,3 @@ type?: ButtonType;
     title?: string;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
     useButton?: boolean;
@@ -29,9 +28,9 @@ usePortal?: boolean;
 }
-declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>>;
-declare type Modal = typeof Modal & {
-    show: (props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
-        children?: React.ReactNode;
+declare type ShowModalProps = {
+    show?: (props: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
+        children: React.ReactNode;
     }) => void;
 };
-declare const _default: Modal;
-export default _default;
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>> & ShowModalProps;
+export default Modal;
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -10,2 +10,3 @@ "use strict";
 });
+var _exportNames = {};
 exports["default"] = void 0;
@@ -29,4 +30,6 @@
 
-var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
+var _Close = require("@uiw/icons/lib/Close");
 
+var _reactIcon = require("@uiw/react-icon");
+
 var _utils = require("@uiw/utils");
@@ -36,2 +39,16 @@
 
+var _style = _interopRequireWildcard(require("./style"));
+
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -188,3 +205,4 @@
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOverlay["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    as: _reactOverlay["default"],
     usePortal: usePortal,
@@ -195,5 +213,5 @@ isOpen: isOpen
     className: cls,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ModalStyleContainer, {
       className: "".concat(prefixCls, "-container"),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ModalStyleInner, {
         className: ["".concat(prefixCls, "-inner"), title ? "".concat(prefixCls, "-shown-title") : null, icon ? "".concat(prefixCls, "-shown-icon") : null].filter(Boolean).join(' ').trim(),
@@ -205,7 +223,5 @@ style: {
         },
-        children: [(title || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [(title || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ModalStyleHeader, {
           className: "".concat(prefixCls, "-header"),
-          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
-            type: icon
-          }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+          children: [icon && icon, title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
             children: title
@@ -217,10 +233,12 @@ }), isCloseButtonShown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactButton["default"], {
             },
-            icon: "close",
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon.IconStyleBase, {
+              as: _Close.Close
+            }),
             type: "light"
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.ModalStyleBody, {
           className: "".concat(prefixCls, "-body"),
           style: bodyStyle,
           children: children || content
-        }), useButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), useButton && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.ModalStyleFooter, {
           className: "".concat(prefixCls, "-footer"),
@@ -252,3 +270,2 @@ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactButton["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
 exports["default"] = _default;
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/CallShow.d.ts

 import React from 'react';
 import { ModalProps } from './';
-export default function CallShow(props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
-    children?: React.ReactNode;
+export default function CallShow(props: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
+    children: React.ReactNode;
 }): void;
+//# sourceMappingURL=CallShow.d.ts.map

esm/CallShow.js

@@ -9,8 +9,7 @@ import _extends from "@babel/runtime/helpers/extends";
 export default function CallShow(props) {
-  var _ref = props || {},
-      {
+  var {
     title = '提示框',
     children
-  } = _ref,
-      other = _objectWithoutPropertiesLoose(_ref, _excluded);
+  } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -17,0 +16,0 @@ var dv = document.createElement('div');

esm/index.d.ts

 import React from 'react';
 import { OverlayProps } from '@uiw/react-overlay';
 import { ButtonType, ButtonProps } from '@uiw/react-button';
-import { IconProps } from '@uiw/react-icon';
 import { IProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export interface ModalProps extends IProps, OverlayProps {
@@ -15,3 +14,3 @@ type?: ButtonType;
     title?: string;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
     useButton?: boolean;
@@ -29,9 +28,9 @@ usePortal?: boolean;
 }
-declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>>;
-declare type Modal = typeof Modal & {
-    show: (props?: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
-        children?: React.ReactNode;
+declare type ShowModalProps = {
+    show?: (props: Omit<ModalProps, 'onClosed' | 'isOpen'> & {
+        children: React.ReactNode;
     }) => void;
 };
-declare const _default: Modal;
-export default _default;
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<OverlayProps>> & ShowModalProps;
+export default Modal;
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -8,8 +8,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import Button from '@uiw/react-button';
-import Icon from '@uiw/react-icon';
+import { Close } from '@uiw/icons/lib/Close';
+import { IconStyleBase } from '@uiw/react-icon';
 import { noop } from '@uiw/utils';
-import "./style/index.css";
 import CallShow from './CallShow';
+import ModalStyleWrap, { ModalStyleBody, ModalStyleContainer, ModalStyleFooter, ModalStyleHeader, ModalStyleInner } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export * from './style';
 var Modal = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -91,3 +93,4 @@ var {
 
-  return /*#__PURE__*/_jsx(Overlay, _extends({
+  return /*#__PURE__*/_jsx(ModalStyleWrap, _extends({
+    as: Overlay,
     usePortal: usePortal,
@@ -98,5 +101,5 @@ isOpen: isOpen
     className: cls,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(ModalStyleContainer, {
       className: prefixCls + "-container",
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxs(ModalStyleInner, {
         className: [prefixCls + "-inner", title ? prefixCls + "-shown-title" : null, icon ? prefixCls + "-shown-icon" : null].filter(Boolean).join(' ').trim(),
@@ -108,7 +111,5 @@ style: {
         },
-        children: [(title || icon) && /*#__PURE__*/_jsxs("div", {
+        children: [(title || icon) && /*#__PURE__*/_jsxs(ModalStyleHeader, {
           className: prefixCls + "-header",
-          children: [icon && /*#__PURE__*/_jsx(Icon, {
-            type: icon
-          }), title && /*#__PURE__*/_jsx("h4", {
+          children: [icon && icon, title && /*#__PURE__*/_jsx("h4", {
             children: title
@@ -118,10 +119,12 @@ }), isCloseButtonShown && /*#__PURE__*/_jsx(Button, {
             onClick: e => handleCancel(e),
-            icon: "close",
+            icon: /*#__PURE__*/_jsx(IconStyleBase, {
+              as: Close
+            }),
             type: "light"
           })]
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsx(ModalStyleBody, {
           className: prefixCls + "-body",
           style: bodyStyle,
           children: children || content
-        }), useButton && /*#__PURE__*/_jsxs("div", {
+        }), useButton && /*#__PURE__*/_jsxs(ModalStyleFooter, {
           className: prefixCls + "-footer",
@@ -128,0 +131,0 @@ children: [/*#__PURE__*/_jsx(Button, _extends({

package.json

 {
   "name": "@uiw/react-modal",
-  "version": "4.21.14",
+  "version": "5.0.0-bate-0",
   "description": "Modal component",
@@ -44,10 +44,11 @@ "author": "Kenny Wong <[e-mail]>",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/react-button": "^4.21.14",
-    "@uiw/react-icon": "^4.21.14",
-    "@uiw/react-overlay": "^4.21.14",
-    "@uiw/utils": "^4.21.14"
+    "@uiw/react-button": "^5.0.0-bate-0",
+    "@uiw/react-icon": "^5.0.0-bate-0",
+    "@uiw/react-overlay": "^5.0.0-bate-0",
+    "@uiw/utils": "^5.0.0-bate-0"
   }
 }

README.md

@@ -18,7 +18,5 @@ Modal 模态对话框
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, ButtonGroup, Button } from 'uiw';
+import { Modal, ButtonGroup, Button, Icon } from 'uiw';
 
@@ -46,3 +44,3 @@ class Demo extends React.Component {
           cancelText="取消按钮"
-          icon="information"
+          icon={<Icon type="information" />}
           type="primary"
@@ -76,3 +74,3 @@ onConfirm={() => console.log('您点击了确定按钮！')}
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -84,6 +82,4 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Modal, ButtonGroup, Button } from 'uiw';
@@ -141,3 +137,3 @@
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -150,7 +146,5 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, ButtonGroup, Button } from 'uiw';
+import { Modal, ButtonGroup, Button, Form, Input, Textarea, Row, Col } from 'uiw';
 
@@ -261,3 +255,3 @@ class Demo extends React.Component {
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -269,7 +263,5 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, ButtonGroup, Button } from 'uiw';
+import { Modal, ButtonGroup, Button, Icon } from 'uiw';
 
@@ -298,3 +290,3 @@ class Demo extends React.Component {
           cancelText="取消按钮"
-          icon="information"
+          icon={<Icon type="information" />}
           type="danger"
@@ -332,3 +324,3 @@ onConfirm={() => console.log('您点击了确定按钮！')}
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -340,6 +332,4 @@
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
-```jsx
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Modal, ButtonGroup, Button } from 'uiw';
@@ -363,3 +353,3 @@
 }
-ReactDOM.render(<Demo />, _mount_);
+export default Demo
 ```
@@ -376,3 +366,3 @@
 | confirmText | 确认按钮文字 | String | `确认` |
-| icon | 设置对话框右上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
+| icon | 设置对话框左上角图标，设置 `type` 将图标设置不同的颜色。当前属性为 [`<Icon>`](#/components/icon) 组件的 `type` 属性，所以可以参考该组件自定义图标。 | String/ReactNode | - |
 | useButton | 是否使用默认按钮，如果设置 `false` 需要自定义按钮关闭 | Boolean | `true` |
@@ -379,0 +369,0 @@ | type | 按钮类型跟 `<Button>` 组件的 `type` 参数一致，同时会影响按钮颜色。 | String | `light` |

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91212

increased by43.52%

Number of package files

23

increased by9.52%

Lines of code

932

increased by27.67%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

373

decreased by-2.61%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Added@uiw/icons@2.6.1(transitive)

• + Added@uiw/react-button@5.0.0-bate-9(transitive)

• + Added@uiw/react-icon@5.0.0-bate-9(transitive)

• + Added@uiw/react-overlay@5.0.0-bate-9(transitive)

• + Added@uiw/react-portal@5.0.0-bate-9(transitive)

• + Added@uiw/utils@5.0.0-bate-9(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.15(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@uiw/icons@2.6.10(transitive)

• - Removed@uiw/react-button@4.22.3(transitive)

• - Removed@uiw/react-icon@4.22.3(transitive)

• - Removed@uiw/react-overlay@4.22.3(transitive)

• - Removed@uiw/react-portal@4.22.3(transitive)

• - Removed@uiw/utils@4.22.3(transitive)

• Updated@uiw/react-button@^5.0.0-bate-0

• Updated@uiw/react-icon@^5.0.0-bate-0

• Updated@uiw/react-overlay@^5.0.0-bate-0

• Updated@uiw/utils@^5.0.0-bate-0