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"
   }
 }

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

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

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 1 instance in 1 package

Improved metrics

Total package byte prevSize

19601

increased by0.13%

Number of low quality alerts

3

decreased by-25%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

17

increased by6.25%

No dependency changes