react-bottom-drawer - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/demo.js

@@ -13,3 +13,3 @@ "use strict";
         react_1.default.createElement("button", { onClick: function () { return setIsOpen(true); } }, "Open Drawer"),
-        react_1.default.createElement(index_1.default, { isVisible: isOpen, onClose: function () { return setIsOpen(false); }, duration: 1000, hideScrollbars: true },
+        react_1.default.createElement(index_1.default, { isVisible: isOpen, onClose: function () { return setIsOpen(false); }, duration: 250, hideScrollbars: true },
             react_1.default.createElement("h1", null, " React Bottom Drawers! "),
@@ -16,0 +16,0 @@ react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo vitae sapien in gravida. Donec fermentum nibh interdum, laoreet arcu sit amet, condimentum enim. Duis justo est, commodo vel ultricies ut, consequat vel velit. Aliquam erat volutpat. Integer vel erat ut ipsum interdum ornare. Vivamus vitae quam cursus, varius lorem ut, aliquet eros. Aenean rhoncus nisl sit amet lorem dapibus, eu placerat odio tempus. Ut justo ipsum, tempor quis rutrum nec, aliquam et nunc. Donec nec nisi nec ligula vehicula venenatis eu nec lorem. Aliquam nec sagittis lectus. Quisque sapien ligula, elementum non rutrum et, laoreet ut lectus. In a elit id tortor volutpat tempus eget vitae tellus. Vivamus iaculis odio tellus, id egestas velit consectetur nec. Phasellus molestie elit in lacinia aliquam."),

dist/index.js

@@ -30,7 +30,7 @@ "use strict";
 var usePreventScroll_1 = __importDefault(require("./lib/hooks/usePreventScroll"));
-var styles_1 = __importStar(require("./lib/styles"));
+var styles_1 = require("./lib/styles");
 var useGlobalStyles_1 = __importDefault(require("./lib/hooks/useGlobalStyles"));
 var SlideUpTransition = function (_a) {
     var isVisible = _a.isVisible, children = _a.children, onClose = _a.onClose, _b = _a.unmountOnExit, unmountOnExit = _b === void 0 ? true : _b, _c = _a.mountOnEnter, mountOnEnter = _c === void 0 ? true : _c, _d = _a.duration, duration = _d === void 0 ? 250 : _d, _e = _a.hideScrollbars, hideScrollbars = _e === void 0 ? false : _e;
-    useGlobalStyles_1.default(styles_1.default({ duration: duration, hideScrollbars: hideScrollbars }));
+    var classNames = useGlobalStyles_1.default(duration, hideScrollbars);
     // Actions to close
@@ -66,8 +66,8 @@ useEscButton_1.default(onClose, isVisible);
         React.createElement(react_transition_group_1.Transition, { appear: true, in: isVisible, timeout: { appear: 0, enter: 0, exit: duration }, unmountOnExit: unmountOnExit, mountOnEnter: mountOnEnter }, function (state) { return (React.createElement(React.Fragment, null,
-            React.createElement("div", { onClick: onClose, className: styles_1.classNames.backdrop, style: styles_1.BackdropStyles[state] }),
-            React.createElement("div", { className: styles_1.classNames.drawer, style: __assign(__assign({}, styles_1.TransitionStyles[state]), getTransforms()) },
-                React.createElement("div", __assign({}, swipeHandlers, { className: styles_1.classNames.handleWrapper }),
-                    React.createElement("div", { className: styles_1.classNames.handle })),
-                React.createElement("div", { className: styles_1.classNames.contentWrapper }, children)))); })));
+            React.createElement("div", { onClick: onClose, className: classNames.backdrop, style: styles_1.BackdropStyles[state] }),
+            React.createElement("div", { className: classNames.drawer, style: __assign(__assign({}, styles_1.TransitionStyles[state]), getTransforms()) },
+                React.createElement("div", __assign({}, swipeHandlers, { className: classNames.handleWrapper }),
+                    React.createElement("div", { className: classNames.handle })),
+                React.createElement("div", { className: classNames.contentWrapper }, children)))); })));
 };
 exports.default = SlideUpTransition;

dist/lib/hooks/useGlobalStyles.d.ts

@@ -1,2 +0,8 @@
-declare function useGlobalStyles(styles: string): void;
+declare function useGlobalStyles(duration: number, hideScrollbars: boolean): {
+    backdrop: string;
+    drawer: string;
+    handleWrapper: string;
+    handle: string;
+    contentWrapper: string;
+};
 export default useGlobalStyles;

dist/lib/hooks/useGlobalStyles.js

@@ -5,5 +5,15 @@ "use strict";
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-function useGlobalStyles(styles) {
+var styles_1 = __importStar(require("../styles"));
+function useGlobalStyles(duration, hideScrollbars) {
+    var identifier = react_1.default.useMemo(function () { return Math.random().toString(36).substr(2); }, []);
+    var classNames = react_1.default.useMemo(function () { return styles_1.getClassNames(identifier); }, [identifier]);
     react_1.default.useEffect(function () {
@@ -13,12 +23,16 @@ if (typeof document === "undefined") {
         }
-        var stylesSetted = document.querySelectorAll("style[data-react-bottom-drawer").length > 0;
-        if (stylesSetted) {
-            return;
-        }
+        var styles = styles_1.default(identifier, { duration: duration, hideScrollbars: hideScrollbars });
         var tag = document.createElement("style");
-        tag.setAttribute("data-react-bottom-drawer", "");
+        tag.setAttribute("data-react-bottom-drawer", identifier);
         tag.innerHTML = styles;
         document.head.appendChild(tag);
-    }, []);
+        return function () {
+            var stylesheet = document.querySelector("style[data-react-bottom-drawer=" + identifier + "]");
+            if (stylesheet) {
+                stylesheet.remove();
+            }
+        };
+    }, [duration, hideScrollbars]);
+    return classNames;
 }
 exports.default = useGlobalStyles;

dist/lib/styles.d.ts

@@ -33,3 +33,3 @@ export declare const TransitionStyles: {
 }
-export declare const classNames: {
+export declare const getClassNames: (identifier: string) => {
     backdrop: string;
@@ -41,3 +41,3 @@ drawer: string;
 };
-declare const globalStylesheet: ({ duration, hideScrollbars }: ICustomizations) => string;
+declare const globalStylesheet: (identifier: string, { duration, hideScrollbars }: ICustomizations) => string;
 export default globalStylesheet;

dist/lib/styles.js

@@ -15,14 +15,21 @@ "use strict";
 };
-var ns = "react-bottom-drawer";
-exports.classNames = {
-    backdrop: ns + "__backdrop",
-    drawer: ns + "__drawer",
-    handleWrapper: ns + "__handle-wrapper",
-    handle: ns + "__handle",
-    contentWrapper: ns + "__content-wrapper"
-};
-var globalStylesheet = function (_a) {
+exports.getClassNames = function (identifier) { return ({
+    backdrop: identifier + "db",
+    drawer: identifier + "dr",
+    handleWrapper: identifier + "hw",
+    handle: identifier + "h",
+    contentWrapper: identifier + "cw",
+}); };
+var globalStylesheet = function (identifier, _a) {
     var duration = _a.duration, hideScrollbars = _a.hideScrollbars;
-    return ("\n  ." + exports.classNames.backdrop + " {\n    position: fixed;\n    z-index: 10;\n    background: rgba(0, 0, 0, 0.5);\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    transition: opacity " + duration + "ms;\n  }\n  ." + exports.classNames.drawer + " {\n    position: fixed;\n    z-index: 11;\n    left: 0;\n    bottom: 0;\n    max-height: 70vh;\n    width: 100vw;\n    background: white;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    transition: transform " + duration + "ms;\n  }\n  ." + exports.classNames.handleWrapper + " {\n    display: flex;\n    justify-content: center;\n    padding: 10px 0;\n  }\n  ." + exports.classNames.handle + " {\n    background: #e3e3e3;\n    height: 5px;\n    width: 70px;\n    border-radius: 5px;\n  }\n  ." + exports.classNames.contentWrapper + " {\n    padding: 0 10px;\n    max-height: calc(70vh - 25px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    " + (hideScrollbars ? "\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n    " : "") + "\n  }\n  " + (hideScrollbars ? "\n  ." + exports.classNames.contentWrapper + "::-webkit-scrollbar {\n    width: 0px;\n    background: transparent;\n  }\n  " : "") + "\n    \n").split("\n").map(function (l) { return l.trim(); }).join("");
+    var classNames = exports.getClassNames(identifier);
+    return ("\n  ." + classNames.backdrop + " {\n    position: fixed;\n    z-index: 10;\n    background: rgba(0, 0, 0, 0.5);\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    transition: opacity " + duration + "ms;\n  }\n  ." + classNames.drawer + " {\n    position: fixed;\n    z-index: 11;\n    left: 0;\n    bottom: 0;\n    max-height: 70vh;\n    width: 100vw;\n    background: white;\n    border-top-left-radius: 15px;\n    border-top-right-radius: 15px;\n    transition: transform " + duration + "ms;\n  }\n  ." + classNames.handleWrapper + " {\n    display: flex;\n    justify-content: center;\n    padding: 10px 0;\n  }\n  ." + classNames.handle + " {\n    background: #e3e3e3;\n    height: 5px;\n    width: 70px;\n    border-radius: 5px;\n  }\n  ." + classNames.contentWrapper + " {\n    padding: 0 10px;\n    max-height: calc(70vh - 25px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    " + (hideScrollbars
+        ? "\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n    "
+        : "") + "\n  }\n  " + (hideScrollbars
+        ? "\n  ." + classNames.contentWrapper + "::-webkit-scrollbar {\n    width: 0px;\n    background: transparent;\n  }\n  "
+        : "") + "\n    \n")
+        .split("\n")
+        .map(function (l) { return l.trim(); })
+        .join("");
 };
 exports.default = globalStylesheet;

package.json

 {
   "name": "react-bottom-drawer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React Component to build friendly dialogs that slide from the bottom",
@@ -29,2 +29,6 @@ "main": "dist",
   "homepage": "https://github.com/fpellicero/react-bottom-drawer#readme",
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
   "devDependencies": {
@@ -31,0 +35,0 @@ "@types/lodash.debounce": "^4.0.6",

No alert changes

Improved metrics

Total package byte prevSize

19190

increased by5.92%

Lines of code

291

increased by9.81%

Worsened metrics

Dependency count

5

increased by66.67%

No dependency changes