react-ts-popup - npm Package Compare versions

Comparing version 0.0.25 to 0.0.26

dist/cjs/components/popup/index.js

@@ -8,22 +8,15 @@ "use strict";
 var index_button_1 = require("./index.button");
-var styled_components_1 = require("styled-components");
-var theme = {
-    boderColor: 'green',
-    color: 'green',
-    bgColor: 'green'
-};
 var Popup = function (props) {
     if (!props.show)
         return null;
-    return (react_1["default"].createElement(styled_components_1.ThemeProvider, { theme: theme },
-        react_1["default"].createElement(index_styled_1.Area, null,
-            react_1["default"].createElement(index_styled_1.Background, { onClick: function () { return props.close(); } }),
-            react_1["default"].createElement("div", { className: 'content' },
-                props.title && react_1["default"].createElement("h3", { className: 'title' }, props.title),
-                props.desc && react_1["default"].createElement("p", { className: 'desc' }, props.desc),
-                react_1["default"].createElement(react_1["default"].Fragment, null, props.buttons.map(function (button, index) {
-                    return (react_1["default"].createElement(index_button_1.PopupButton, { dark: props.dark, key: index, onClick: button.action }, button.title));
-                }))))));
+    return (react_1["default"].createElement(index_styled_1.Area, { color: 'black' },
+        react_1["default"].createElement(index_styled_1.Background, { onClick: function () { return props.close(); } }),
+        react_1["default"].createElement("div", { className: 'content' },
+            props.title && react_1["default"].createElement("h3", { className: 'title' }, props.title),
+            props.desc && react_1["default"].createElement("p", { className: 'desc' }, props.desc),
+            react_1["default"].createElement(react_1["default"].Fragment, null, props.buttons.map(function (button, index) {
+                return (react_1["default"].createElement(index_button_1.PopupButton, { dark: props.dark, key: index, onClick: button.action }, button.title));
+            })))));
 };
 exports["default"] = Popup;
 //# sourceMappingURL=index.js.map

dist/cjs/components/popup/index.styled.js

@@ -6,5 +6,12 @@ "use strict";
 var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 exports.Area = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: ", ";\n  backdrop-filter: blur(6px);\n  z-index: 1;\n\n  .content {\n    position: relative;\n    width: 600px;\n    padding: 2rem;\n    border-radius: 1rem;\n    background-color: #000000c4;\n    border: 2px solid var(--white-color);\n    box-shadow: 0 0.3rem 0 0 var(--plain-shadow);\n    font-size: 1.4rem;\n    font-weight: 500;\n    color: var(--plain-dark);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      width: 90vw;\n    }\n  }\n\n  .title {\n    font-family: 'Secular One', sans-serif;\n    font-size: 3rem;\n    font-weight: 400;\n    margin-bottom: 1rem;\n    color: white;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: ", ";\n  backdrop-filter: blur(6px);\n  z-index: 1;\n\n  .content {\n    position: relative;\n    width: 600px;\n    padding: 2rem;\n    border-radius: 1rem;\n    background-color: #000000c4;\n    border: 2px solid var(--white-color);\n    box-shadow: 0 0.3rem 0 0 var(--plain-shadow);\n    font-size: 1.4rem;\n    font-weight: 500;\n    color: var(--plain-dark);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      width: 90vw;\n    }\n  }\n\n  .title {\n    font-family: 'Secular One', sans-serif;\n    font-size: 3rem;\n    font-weight: 400;\n    margin-bottom: 1rem;\n    color: white;\n  }\n"])), function (props) { return props.color; });
 exports.Background = styled_components_1["default"].div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+exports.Area.propTypes = {
+    color: prop_types_1["default"].oneOf(['black', 'white'])
+};
+exports.Area.defaultProps = {
+    color: 'black'
+};
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=index.styled.js.map

dist/esm/components/popup/index.js

@@ -5,22 +5,15 @@ import React from 'react';
 import { PopupButton } from './index.button';
-import { ThemeProvider } from 'styled-components';
-var theme = {
-    boderColor: 'green',
-    color: 'green',
-    bgColor: 'green'
-};
 var Popup = function (props) {
     if (!props.show)
         return null;
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Area, null,
-            React.createElement(Background, { onClick: function () { return props.close(); } }),
-            React.createElement("div", { className: 'content' },
-                props.title && React.createElement("h3", { className: 'title' }, props.title),
-                props.desc && React.createElement("p", { className: 'desc' }, props.desc),
-                React.createElement(React.Fragment, null, props.buttons.map(function (button, index) {
-                    return (React.createElement(PopupButton, { dark: props.dark, key: index, onClick: button.action }, button.title));
-                }))))));
+    return (React.createElement(Area, { color: 'black' },
+        React.createElement(Background, { onClick: function () { return props.close(); } }),
+        React.createElement("div", { className: 'content' },
+            props.title && React.createElement("h3", { className: 'title' }, props.title),
+            props.desc && React.createElement("p", { className: 'desc' }, props.desc),
+            React.createElement(React.Fragment, null, props.buttons.map(function (button, index) {
+                return (React.createElement(PopupButton, { dark: props.dark, key: index, onClick: button.action }, button.title));
+            })))));
 };
 export default Popup;
 //# sourceMappingURL=index.js.map

dist/esm/components/popup/index.styled.js

 import { __makeTemplateObject } from "tslib";
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 export var Area = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: ", ";\n  backdrop-filter: blur(6px);\n  z-index: 1;\n\n  .content {\n    position: relative;\n    width: 600px;\n    padding: 2rem;\n    border-radius: 1rem;\n    background-color: #000000c4;\n    border: 2px solid var(--white-color);\n    box-shadow: 0 0.3rem 0 0 var(--plain-shadow);\n    font-size: 1.4rem;\n    font-weight: 500;\n    color: var(--plain-dark);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      width: 90vw;\n    }\n  }\n\n  .title {\n    font-family: 'Secular One', sans-serif;\n    font-size: 3rem;\n    font-weight: 400;\n    margin-bottom: 1rem;\n    color: white;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background-color: ", ";\n  backdrop-filter: blur(6px);\n  z-index: 1;\n\n  .content {\n    position: relative;\n    width: 600px;\n    padding: 2rem;\n    border-radius: 1rem;\n    background-color: #000000c4;\n    border: 2px solid var(--white-color);\n    box-shadow: 0 0.3rem 0 0 var(--plain-shadow);\n    font-size: 1.4rem;\n    font-weight: 500;\n    color: var(--plain-dark);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    @media (max-width: 768px) {\n      width: 90vw;\n    }\n  }\n\n  .title {\n    font-family: 'Secular One', sans-serif;\n    font-size: 3rem;\n    font-weight: 400;\n    margin-bottom: 1rem;\n    color: white;\n  }\n"])), function (props) { return props.color; });
 export var Background = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+Area.propTypes = {
+    color: PropTypes.oneOf(['black', 'white'])
+};
+Area.defaultProps = {
+    color: 'black'
+};
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=index.styled.js.map

package.json

 {
   "name": "react-ts-popup",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "React popup component that helps you create simple and complex Modals, tooltips, and Menus for your next React App.",
@@ -60,2 +60,3 @@ "homepage": "",
     "styled-components": "^5.3.6",
+    "prop-types": "^15.8.1",
     "eslint-plugin-styled-components": "0.0.0"
@@ -68,4 +69,5 @@ },
     "@types/styled-components": "^5.1.26",
+    "prop-types": "^15.8.1",
     "eslint-plugin-styled-components": "0.0.0"
   }
 }

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

19601

0.13%

Number of low quality alerts

4

-33.33%

Worsened metrics

Dependency count

6

20%

Dev dependency count

17

6.25%

No dependency changes