@hifi/react-tos-modal - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/TosModal.js

@@ -12,3 +12,3 @@ "use strict";
   position: fixed;
-  background-color: rgba(0, 0, 0, 0.65);
+  background-color: ${props => `rgba(0, 0, 0, ${props.lightboxOpacity})` || "rgba(0, 0, 0, 0.65)"};
   top: 0;
@@ -101,3 +101,3 @@ left: 0;
 `;
-const Modal = ({ handleAgree, isScrollable, backgroundColor, modalBorderRadius, modalHeight, modalHeightMobile, modalWidth, scrollBarWidth, scrollTrackColor, scrollThumbColor, scrollThumbHoverColor, tosJsx, modalButtonHeight, modalButtonWidth, modalButtonFontSize, modalButtonColorEnabled, modalButtonColorHover, modalButtonText, modalPaddingTopBottom, modalPaddingSides, }) => {
+const Modal = ({ handleAgree, isScrollable, backgroundColor, lightboxOpacity, modalBorderRadius, modalHeight, modalHeightMobile, modalWidth, scrollBarWidth, scrollTrackColor, scrollThumbColor, scrollThumbHoverColor, tosJsx, modalButtonHeight, modalButtonWidth, modalButtonFontSize, modalButtonColorEnabled, modalButtonColorHover, modalButtonText, modalPaddingTopBottom, modalPaddingSides, }) => {
     const [disabled, setDisabled] = (0, react_1.useState)(isScrollable);
@@ -113,6 +113,6 @@ const handleScroll = (event) => {
     };
-    return ((0, jsx_runtime_1.jsx)(ModalBackground, { children: (0, jsx_runtime_1.jsx)(ModalForeground, Object.assign({ backgroundColor: backgroundColor, modalBorderRadius: modalBorderRadius, modalHeight: modalHeight, modalHeightMobile: modalHeightMobile, modalWidth: modalWidth, modalPaddingTopBottom: modalPaddingTopBottom, modalPaddingSides: modalPaddingSides }, { children: (0, jsx_runtime_1.jsxs)(ModalBody, { children: [(0, jsx_runtime_1.jsx)(ModalContent, Object.assign({ isScrollable: isScrollable, onScroll: handleScroll, scrollBarWidth: scrollBarWidth, scrollTrackColor: scrollTrackColor, scrollThumbColor: scrollThumbColor, scrollThumbHoverColor: scrollThumbHoverColor }, { children: tosJsx })), (0, jsx_runtime_1.jsx)(ModalButton, Object.assign({ disabled: disabled, onClick: handleAgree, modalButtonHeight: modalButtonHeight, modalButtonWidth: modalButtonWidth, modalButtonFontSize: modalButtonFontSize, modalButtonColorEnabled: modalButtonColorEnabled, modalButtonColorHover: modalButtonColorHover, id: "accept" }, { children: modalButtonText }))] }) })) }));
+    return ((0, jsx_runtime_1.jsx)(ModalBackground, Object.assign({ lightboxOpacity: lightboxOpacity }, { children: (0, jsx_runtime_1.jsx)(ModalForeground, Object.assign({ backgroundColor: backgroundColor, modalBorderRadius: modalBorderRadius, modalHeight: modalHeight, modalHeightMobile: modalHeightMobile, modalWidth: modalWidth, modalPaddingTopBottom: modalPaddingTopBottom, modalPaddingSides: modalPaddingSides }, { children: (0, jsx_runtime_1.jsxs)(ModalBody, { children: [(0, jsx_runtime_1.jsx)(ModalContent, Object.assign({ isScrollable: isScrollable, onScroll: handleScroll, scrollBarWidth: scrollBarWidth, scrollTrackColor: scrollTrackColor, scrollThumbColor: scrollThumbColor, scrollThumbHoverColor: scrollThumbHoverColor }, { children: tosJsx })), (0, jsx_runtime_1.jsx)(ModalButton, Object.assign({ disabled: disabled, onClick: handleAgree, modalButtonHeight: modalButtonHeight, modalButtonWidth: modalButtonWidth, modalButtonFontSize: modalButtonFontSize, modalButtonColorEnabled: modalButtonColorEnabled, modalButtonColorHover: modalButtonColorHover, id: "accept" }, { children: modalButtonText }))] }) })) })));
 };
 function TosModal({ children, config, modalButtonText, tosJsx, }) {
-    const { backgroundColor, isScrollable, modalHeight, modalHeightMobile, modalBorderRadius, modalWidth, scrollBarWidth, scrollTrackColor, scrollThumbColor, scrollThumbHoverColor, modalButtonHeight, modalButtonWidth, modalButtonFontSize, modalButtonColorEnabled, modalButtonColorHover, modalPaddingTopBottom, modalPaddingSides, } = config;
+    const { backgroundColor, isScrollable, lightboxOpacity, modalHeight, modalHeightMobile, modalBorderRadius, modalWidth, scrollBarWidth, scrollTrackColor, scrollThumbColor, scrollThumbHoverColor, modalButtonHeight, modalButtonWidth, modalButtonFontSize, modalButtonColorEnabled, modalButtonColorHover, modalPaddingTopBottom, modalPaddingSides, } = config;
     const [agreed, setAgreed] = (0, react_1.useState)(() => {
@@ -127,4 +127,4 @@ const cached = localStorage.getItem("agreed") || JSON.parse("false");
     }, [agreed]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [!agreed && ((0, jsx_runtime_1.jsx)(Modal, { handleAgree: handleAgree, backgroundColor: backgroundColor, isScrollable: isScrollable, modalBorderRadius: modalBorderRadius, modalHeight: modalHeight, modalHeightMobile: modalHeightMobile, modalWidth: modalWidth, scrollBarWidth: scrollBarWidth, scrollTrackColor: scrollTrackColor, scrollThumbColor: scrollThumbColor, scrollThumbHoverColor: scrollThumbHoverColor, tosJsx: tosJsx, modalButtonHeight: modalButtonHeight, modalButtonWidth: modalButtonWidth, modalButtonFontSize: modalButtonFontSize, modalButtonColorEnabled: modalButtonColorEnabled, modalButtonColorHover: modalButtonColorHover, modalButtonText: modalButtonText, modalPaddingTopBottom: modalPaddingTopBottom, modalPaddingSides: modalPaddingSides })), children] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [!agreed && ((0, jsx_runtime_1.jsx)(Modal, { handleAgree: handleAgree, backgroundColor: backgroundColor, isScrollable: isScrollable, modalBorderRadius: modalBorderRadius, modalHeight: modalHeight, modalHeightMobile: modalHeightMobile, modalWidth: modalWidth, scrollBarWidth: scrollBarWidth, scrollTrackColor: scrollTrackColor, scrollThumbColor: scrollThumbColor, scrollThumbHoverColor: scrollThumbHoverColor, tosJsx: tosJsx, lightboxOpacity: lightboxOpacity, modalButtonHeight: modalButtonHeight, modalButtonWidth: modalButtonWidth, modalButtonFontSize: modalButtonFontSize, modalButtonColorEnabled: modalButtonColorEnabled, modalButtonColorHover: modalButtonColorHover, modalButtonText: modalButtonText, modalPaddingTopBottom: modalPaddingTopBottom, modalPaddingSides: modalPaddingSides })), children] }));
 }
 exports.default = TosModal;

dist/types.d.ts

@@ -7,3 +7,3 @@ /// <reference types="react" />
     modalButtonText: string;
-} & ModalButtonProps & ModalContentProps & ModalForegroundProps;
+} & ModalButtonProps & ModalBackgroundProps & ModalContentProps & ModalForegroundProps;
 declare type ModalButtonProps = {
@@ -16,2 +16,5 @@ modalButtonHeight: string;
 };
+declare type ModalBackgroundProps = {
+    lightboxOpacity: string;
+};
 declare type ModalContentProps = {
@@ -33,3 +36,3 @@ isScrollable: boolean;
 };
-declare type TosModalConfig = ModalButtonProps & ModalContentProps & ModalForegroundProps;
+declare type TosModalConfig = ModalButtonProps & ModalBackgroundProps & ModalContentProps & ModalForegroundProps;
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@hifi/react-tos-modal",
   "description": "A React modal for displaying terms of service at the start of a session",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "author": {
@@ -6,0 +6,0 @@ "name": "Hifi",

No alert changes

Improved metrics

Total package byte prevSize

13641

increased by2.87%

Lines of code

205

increased by1.99%

No dependency changes