@density/ui-modal - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.js

@@ -6,3 +6,2 @@
 exports.default = Modal;
-exports.ModalClose = ModalClose;
 
@@ -17,2 +16,3 @@ var _react = require("react");
   var children = _ref.children,
+      onClose = _ref.onClose,
       onClickBackdrop = _ref.onClickBackdrop;
@@ -28,2 +28,7 @@
         } },
+      onClose ? React.createElement(
+        "div",
+        { className: "modal-close", onClick: onClose },
+        "\u2715"
+      ) : null,
       children
@@ -34,11 +39,1 @@ )
 
-function ModalClose(_ref2) {
-  var onClick = _ref2.onClick;
-
-  return React.createElement(
-    "span",
-    { className: "modal-close", onClick: onClick },
-    "\xD7"
-  );
-}
-

dist/story.js

@@ -53,3 +53,6 @@ 'use strict';
       _index2.default,
-      { onClickBackdrop: (0, _addonActions.action)('backdrop click') },
+      {
+        onClickBackdrop: (0, _addonActions.action)('backdrop click'),
+        onClose: (0, _addonActions.action)('close button click')
+      },
       _react2.default.createElement(
@@ -61,4 +64,3 @@ _card2.default,
           null,
-          'Foo',
-          _react2.default.createElement(_index.ModalClose, { onClick: (0, _addonActions.action)('close button click') })
+          'Foo'
         ),
@@ -65,0 +67,0 @@ _react2.default.createElement(

index.js

 import * as React from 'react';
 
-export default function Modal({children, onClickBackdrop}) {
+export default function Modal({children, onClose, onClickBackdrop}) {
   return <div className="modal-backdrop" onClick={onClickBackdrop}>
-    <div className="modal" onClick={e => e.stopPropagation()}>{children}</div>
+    <div className="modal" onClick={e => e.stopPropagation()}>
+      {onClose ? <div className="modal-close" onClick={onClose}>&#10005;</div> : null}
+      {children}
+    </div>
   </div>;
 }
-
-export function ModalClose({onClick}) {
-  return <span className="modal-close" onClick={onClick}>&times;</span>;
-}

package.json

 {
   "name": "@density/ui-modal",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "Modal popup component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

story.js

@@ -26,7 +26,9 @@ import React from 'react';
       foo
-      <Modal onClickBackdrop={action('backdrop click')}>
+      <Modal
+        onClickBackdrop={action('backdrop click')}
+        onClose={action('close button click')}
+      >
         <Card>
           <CardHeader>
             Foo
-            <ModalClose onClick={action('close button click')} />
           </CardHeader>
@@ -33,0 +35,0 @@ <CardBody>Bar</CardBody>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31834

increased by373.02%

Number of package files

13

increased by30%

Lines of code

170

increased by4.29%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes