@laerdal/life-react-components 1.6.0 → 1.7.0-dev.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/ContentAccordion.cjs +1 -1
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +2 -2
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/Accordion/styles.cjs +1 -1
- package/dist/Accordion/styles.cjs.map +1 -1
- package/dist/Accordion/styles.js +2 -2
- package/dist/Accordion/styles.js.map +1 -1
- package/dist/Banners/Banner.cjs +21 -5
- package/dist/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js +20 -5
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Banners/styles.cjs +1 -1
- package/dist/Banners/styles.cjs.map +1 -1
- package/dist/Banners/styles.js +1 -1
- package/dist/Banners/styles.js.map +1 -1
- package/dist/Button/BackButton.cjs +2 -2
- package/dist/Button/BackButton.cjs.map +1 -1
- package/dist/Button/BackButton.js +3 -3
- package/dist/Button/BackButton.js.map +1 -1
- package/dist/Button/Button.cjs +8 -21
- package/dist/Button/Button.cjs.map +1 -1
- package/dist/Button/Button.d.ts +1 -0
- package/dist/Button/Button.js +9 -22
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/Iconbutton.cjs +26 -32
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.d.ts +5 -0
- package/dist/Button/Iconbutton.js +23 -32
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/Card/Card.cjs +28 -44
- package/dist/Card/Card.cjs.map +1 -1
- package/dist/Card/Card.d.ts +3 -11
- package/dist/Card/Card.js +26 -44
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/CardBottomSection.cjs +5 -12
- package/dist/Card/CardBottomSection.cjs.map +1 -1
- package/dist/Card/CardBottomSection.d.ts +1 -2
- package/dist/Card/CardBottomSection.js +6 -13
- package/dist/Card/CardBottomSection.js.map +1 -1
- package/dist/Card/CardMiddleSection.cjs +7 -18
- package/dist/Card/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/CardMiddleSection.d.ts +0 -2
- package/dist/Card/CardMiddleSection.js +7 -17
- package/dist/Card/CardMiddleSection.js.map +1 -1
- package/dist/Card/CardTopSection.cjs +11 -14
- package/dist/Card/CardTopSection.cjs.map +1 -1
- package/dist/Card/CardTopSection.d.ts +2 -4
- package/dist/Card/CardTopSection.js +12 -15
- package/dist/Card/CardTopSection.js.map +1 -1
- package/dist/Card/index.cjs +1 -13
- package/dist/Card/index.cjs.map +1 -1
- package/dist/Card/index.d.ts +0 -1
- package/dist/Card/index.js +0 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +22 -29
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +24 -31
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs +8 -22
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.d.ts +2 -9
- package/dist/Chips/ChipStyles.js +5 -14
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChipTypes.d.ts +12 -26
- package/dist/Chips/ChoiceChips.cjs +14 -8
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +14 -9
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +22 -29
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +25 -32
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +45 -45
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +47 -46
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/Chips/index.cjs +1 -1
- package/dist/Chips/index.cjs.map +1 -1
- package/dist/Chips/index.d.ts +1 -1
- package/dist/Chips/index.js +1 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +398 -0
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -0
- package/dist/ChipsInput/ChipDropdownInput.d.ts +22 -0
- package/dist/ChipsInput/ChipDropdownInput.js +382 -0
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -0
- package/dist/ChipsInput/ChipInput.cjs +141 -0
- package/dist/ChipsInput/ChipInput.cjs.map +1 -0
- package/dist/{Chips → ChipsInput}/ChipInput.d.ts +1 -4
- package/dist/ChipsInput/ChipInput.js +122 -0
- package/dist/ChipsInput/ChipInput.js.map +1 -0
- package/dist/ChipsInput/ChipInputField.cjs +193 -0
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -0
- package/dist/ChipsInput/ChipInputField.d.ts +24 -0
- package/dist/ChipsInput/ChipInputField.js +158 -0
- package/dist/ChipsInput/ChipInputField.js.map +1 -0
- package/dist/ChipsInput/ChipInputTypes.cjs +6 -0
- package/dist/ChipsInput/ChipInputTypes.cjs.map +1 -0
- package/dist/ChipsInput/ChipInputTypes.d.ts +22 -0
- package/dist/ChipsInput/ChipInputTypes.js +2 -0
- package/dist/ChipsInput/ChipInputTypes.js.map +1 -0
- package/dist/ChipsInput/index.cjs +19 -0
- package/dist/ChipsInput/index.cjs.map +1 -0
- package/dist/ChipsInput/index.d.ts +1 -0
- package/dist/ChipsInput/index.js +2 -0
- package/dist/ChipsInput/index.js.map +1 -0
- package/dist/Dropdown/BasicDropdown.cjs +1 -0
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +2 -1
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/CommonStyling.cjs +7 -5
- package/dist/Dropdown/CommonStyling.cjs.map +1 -1
- package/dist/Dropdown/CommonStyling.js +7 -6
- package/dist/Dropdown/CommonStyling.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +19 -24
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +20 -25
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/index.cjs +0 -8
- package/dist/Dropdown/index.cjs.map +1 -1
- package/dist/Dropdown/index.d.ts +1 -2
- package/dist/Dropdown/index.js +1 -2
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.cjs +6 -3
- package/dist/Footer/Components/FooterDropdownLinks.cjs.map +1 -1
- package/dist/Footer/Components/FooterDropdownLinks.js +6 -4
- package/dist/Footer/Components/FooterDropdownLinks.js.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs +5 -3
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js +5 -4
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/Components/FooterTop.cjs +2 -1
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js +3 -2
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/GlobalNavigationBar/Avatar.cjs +5 -7
- package/dist/GlobalNavigationBar/Avatar.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Avatar.js +5 -8
- package/dist/GlobalNavigationBar/Avatar.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs +9 -6
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.d.ts +2 -1
- package/dist/GlobalNavigationBar/Logo.js +9 -7
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/MainMenu.cjs +11 -13
- package/dist/GlobalNavigationBar/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/MainMenu.js +10 -13
- package/dist/GlobalNavigationBar/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/RightSideNav.cjs +3 -5
- package/dist/GlobalNavigationBar/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/RightSideNav.js +2 -5
- package/dist/GlobalNavigationBar/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs +3 -1
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js +2 -1
- package/dist/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js +2 -2
- package/dist/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
- package/dist/HyperLink/HyperLink.cjs +3 -1
- package/dist/HyperLink/HyperLink.cjs.map +1 -1
- package/dist/HyperLink/HyperLink.d.ts +4 -0
- package/dist/HyperLink/HyperLink.js +1 -1
- package/dist/HyperLink/HyperLink.js.map +1 -1
- package/dist/HyperLink/styling.cjs +1 -1
- package/dist/HyperLink/styling.cjs.map +1 -1
- package/dist/HyperLink/styling.js +1 -1
- package/dist/HyperLink/styling.js.map +1 -1
- package/dist/Image/ImageWithFallbacks.cjs +122 -0
- package/dist/Image/ImageWithFallbacks.cjs.map +1 -0
- package/dist/Image/ImageWithFallbacks.d.ts +21 -0
- package/dist/Image/ImageWithFallbacks.js +109 -0
- package/dist/Image/ImageWithFallbacks.js.map +1 -0
- package/dist/Image/index.cjs +16 -0
- package/dist/Image/index.cjs.map +1 -0
- package/dist/Image/index.d.ts +2 -0
- package/dist/Image/index.js +3 -0
- package/dist/Image/index.js.map +1 -0
- package/dist/InputFields/Checkbox.cjs +2 -2
- package/dist/InputFields/Checkbox.cjs.map +1 -1
- package/dist/InputFields/Checkbox.js +3 -3
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +57 -19
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.js +56 -19
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs +119 -96
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js +119 -96
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +2 -2
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.js +3 -3
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs +3 -3
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.js +3 -3
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/Textarea.cjs +1 -1
- package/dist/InputFields/Textarea.cjs.map +1 -1
- package/dist/InputFields/Textarea.js +1 -1
- package/dist/InputFields/Textarea.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs +6 -8
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.d.ts +0 -3
- package/dist/InputFields/components/SearchBarInput.js +4 -5
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/InputFields/components/SearchField.cjs +29 -19
- package/dist/InputFields/components/SearchField.cjs.map +1 -1
- package/dist/InputFields/components/SearchField.d.ts +8 -8
- package/dist/InputFields/components/SearchField.js +25 -18
- package/dist/InputFields/components/SearchField.js.map +1 -1
- package/dist/InputFields/styling.cjs +6 -8
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.js +7 -8
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/List/ListRow.cjs +5 -5
- package/dist/List/ListRow.cjs.map +1 -1
- package/dist/List/ListRow.js +8 -5
- package/dist/List/ListRow.js.map +1 -1
- package/dist/MenuItem/MenuItem.cjs +1 -0
- package/dist/MenuItem/MenuItem.cjs.map +1 -1
- package/dist/MenuItem/MenuItem.js +2 -1
- package/dist/MenuItem/MenuItem.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +79 -38
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +15 -8
- package/dist/Modals/ModalContainer.js +80 -37
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +234 -0
- package/dist/Modals/ModalContent.cjs.map +1 -0
- package/dist/Modals/ModalContent.d.ts +17 -0
- package/dist/Modals/ModalContent.js +203 -0
- package/dist/Modals/ModalContent.js.map +1 -0
- package/dist/Modals/ModalDialog.cjs +69 -42
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +6 -2
- package/dist/Modals/ModalDialog.js +71 -42
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +14 -8
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.d.ts +2 -0
- package/dist/Modals/ModalStyles.js +12 -7
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +5 -0
- package/dist/Modals/index.cjs +8 -0
- package/dist/Modals/index.cjs.map +1 -1
- package/dist/Modals/index.d.ts +3 -2
- package/dist/Modals/index.js +2 -1
- package/dist/Modals/index.js.map +1 -1
- package/dist/NavItem/NavItem.cjs +1 -1
- package/dist/NavItem/NavItem.cjs.map +1 -1
- package/dist/NavItem/NavItem.js +2 -2
- package/dist/NavItem/NavItem.js.map +1 -1
- package/dist/Paginator/Paginator.cjs +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js +2 -2
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/QuizButton/QuizButton.cjs +4 -8
- package/dist/QuizButton/QuizButton.cjs.map +1 -1
- package/dist/QuizButton/QuizButton.js +5 -9
- package/dist/QuizButton/QuizButton.js.map +1 -1
- package/dist/SegmentControl/SegmentControl.cjs +1 -1
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
- package/dist/SegmentControl/SegmentControl.js +2 -2
- package/dist/SegmentControl/SegmentControl.js.map +1 -1
- package/dist/SkipToContent/SkipToContent.cjs +2 -2
- package/dist/SkipToContent/SkipToContent.cjs.map +1 -1
- package/dist/SkipToContent/SkipToContent.js +2 -2
- package/dist/SkipToContent/SkipToContent.js.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.cjs +3 -1
- package/dist/Switcher/MobileSwitcherMenu.cjs.map +1 -1
- package/dist/Switcher/MobileSwitcherMenu.js +2 -1
- package/dist/Switcher/MobileSwitcherMenu.js.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.cjs +1 -1
- package/dist/Switcher/SwitcherMenuItem.cjs.map +1 -1
- package/dist/Switcher/SwitcherMenuItem.js +2 -2
- package/dist/Switcher/SwitcherMenuItem.js.map +1 -1
- package/dist/Table/TableStyles.cjs +4 -4
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +5 -5
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Tabs/HorizontalTabs.cjs +5 -1
- package/dist/Tabs/HorizontalTabs.cjs.map +1 -1
- package/dist/Tabs/HorizontalTabs.js +6 -3
- package/dist/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/Tabs/TabLink.cjs +48 -45
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.js +47 -46
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Tabs/VerticalTabs.cjs.map +1 -1
- package/dist/Tabs/VerticalTabs.js.map +1 -1
- package/dist/Tag/Tag.cjs +5 -2
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +5 -2
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Toasters/Toast.cjs +2 -0
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -0
- package/dist/Toasters/Toast.js.map +1 -1
- package/dist/Toggles/ToggleButton.cjs +81 -0
- package/dist/Toggles/ToggleButton.cjs.map +1 -0
- package/dist/Toggles/ToggleButton.d.ts +14 -0
- package/dist/Toggles/ToggleButton.js +59 -0
- package/dist/Toggles/ToggleButton.js.map +1 -0
- package/dist/Toggles/ToggleSwitch.cjs +8 -6
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.js +8 -6
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerStyles.cjs +2 -2
- package/dist/Toggles/TogglerStyles.cjs.map +1 -1
- package/dist/Toggles/TogglerStyles.js +3 -3
- package/dist/Toggles/TogglerStyles.js.map +1 -1
- package/dist/Toggles/index.cjs +8 -0
- package/dist/Toggles/index.cjs.map +1 -1
- package/dist/Toggles/index.d.ts +2 -1
- package/dist/Toggles/index.js +2 -1
- package/dist/Toggles/index.js.map +1 -1
- package/dist/Tooltips/TooltipStyles.cjs +2 -2
- package/dist/Tooltips/TooltipStyles.cjs.map +1 -1
- package/dist/Tooltips/TooltipStyles.js +3 -3
- package/dist/Tooltips/TooltipStyles.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.cjs.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipTypes.js.map +1 -1
- package/dist/Tooltips/TooltipWrapper.cjs +2 -0
- package/dist/Tooltips/TooltipWrapper.cjs.map +1 -1
- package/dist/Tooltips/TooltipWrapper.d.ts +1 -1
- package/dist/Tooltips/TooltipWrapper.js +2 -0
- package/dist/Tooltips/TooltipWrapper.js.map +1 -1
- package/dist/common/FocusVisible.cjs +24 -1
- package/dist/common/FocusVisible.cjs.map +1 -1
- package/dist/common/FocusVisible.js +24 -1
- package/dist/common/FocusVisible.js.map +1 -1
- package/dist/common/HoverWithin.cjs +63 -0
- package/dist/common/HoverWithin.cjs.map +1 -0
- package/dist/common/HoverWithin.d.ts +2 -0
- package/dist/common/HoverWithin.js +51 -0
- package/dist/common/HoverWithin.js.map +1 -0
- package/dist/common/InputStyling.cjs +1 -1
- package/dist/common/InputStyling.cjs.map +1 -1
- package/dist/common/InputStyling.js +2 -2
- package/dist/common/InputStyling.js.map +1 -1
- package/dist/common/index.cjs +8 -0
- package/dist/common/index.cjs.map +1 -1
- package/dist/common/index.d.ts +1 -0
- package/dist/common/index.js +1 -0
- package/dist/common/index.js.map +1 -1
- package/dist/index.cjs +28 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/focus-styles.cjs +22 -0
- package/dist/styles/focus-styles.cjs.map +1 -0
- package/dist/styles/focus-styles.d.ts +2 -0
- package/dist/styles/focus-styles.js +9 -0
- package/dist/styles/focus-styles.js.map +1 -0
- package/dist/styles/index.cjs +67 -1
- package/dist/styles/index.cjs.map +1 -1
- package/dist/styles/index.d.ts +3 -1
- package/dist/styles/index.js +6 -1
- package/dist/styles/index.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +1 -1
- package/dist/Chips/ChipInput.cjs +0 -199
- package/dist/Chips/ChipInput.cjs.map +0 -1
- package/dist/Chips/ChipInput.js +0 -182
- package/dist/Chips/ChipInput.js.map +0 -1
- package/dist/Dropdown/ChipDropdownInput.cjs +0 -431
- package/dist/Dropdown/ChipDropdownInput.cjs.map +0 -1
- package/dist/Dropdown/ChipDropdownInput.d.ts +0 -24
- package/dist/Dropdown/ChipDropdownInput.js +0 -418
- package/dist/Dropdown/ChipDropdownInput.js.map +0 -1
|
@@ -13,8 +13,6 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
|
|
|
13
13
|
|
|
14
14
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
15
|
|
|
16
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
17
|
-
|
|
18
16
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
19
17
|
|
|
20
18
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
@@ -31,8 +29,6 @@ var _reactModal = _interopRequireDefault(require("react-modal"));
|
|
|
31
29
|
|
|
32
30
|
var _styles = require("../styles");
|
|
33
31
|
|
|
34
|
-
var _zIndexes = require("../styles/z-indexes");
|
|
35
|
-
|
|
36
32
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
37
33
|
|
|
38
34
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -64,7 +60,7 @@ var ModalContainerStyles = {
|
|
|
64
60
|
}
|
|
65
61
|
}; //override modal classes to define the animations
|
|
66
62
|
|
|
67
|
-
var modalTransitions = "\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ".concat(
|
|
63
|
+
var modalTransitions = "\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ".concat(_styles.Z_INDEXES.backdrop, ";\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ").concat(_styles.Z_INDEXES.modal, ";\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
|
|
68
64
|
|
|
69
65
|
var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
70
66
|
(0, _inherits2.default)(ModalContainer, _React$Component);
|
|
@@ -72,28 +68,8 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
72
68
|
var _super = _createSuper(ModalContainer);
|
|
73
69
|
|
|
74
70
|
function ModalContainer() {
|
|
75
|
-
var _this;
|
|
76
|
-
|
|
77
71
|
(0, _classCallCheck2.default)(this, ModalContainer);
|
|
78
|
-
|
|
79
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
80
|
-
args[_key] = arguments[_key];
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
84
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "GetSize", function () {
|
|
85
|
-
var modalHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'auto';
|
|
86
|
-
var modalWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
87
|
-
return {
|
|
88
|
-
height: modalHeight,
|
|
89
|
-
width: modalWidth
|
|
90
|
-
};
|
|
91
|
-
});
|
|
92
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "GetOverflow", function () {
|
|
93
|
-
var modalOverflow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'visible';
|
|
94
|
-
return modalOverflow;
|
|
95
|
-
});
|
|
96
|
-
return _this;
|
|
72
|
+
return _super.apply(this, arguments);
|
|
97
73
|
}
|
|
98
74
|
|
|
99
75
|
(0, _createClass2.default)(ModalContainer, [{
|
|
@@ -111,6 +87,35 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
111
87
|
head.appendChild(style);
|
|
112
88
|
style.appendChild(document.createTextNode(modalTransitions));
|
|
113
89
|
}
|
|
90
|
+
|
|
91
|
+
if (this.props.showModal) {
|
|
92
|
+
this.preventScroll(window.scrollY);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}, {
|
|
96
|
+
key: "getSnapshotBeforeUpdate",
|
|
97
|
+
value: function getSnapshotBeforeUpdate(prevProps, prevState) {
|
|
98
|
+
return {
|
|
99
|
+
scroll: window.scrollY
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
}, {
|
|
103
|
+
key: "componentDidUpdate",
|
|
104
|
+
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
105
|
+
if (this.props.showModal && !prevProps.showModal) {
|
|
106
|
+
this.preventScroll(snapshot.scroll);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
if (!this.props.showModal && prevProps.showModal) {
|
|
110
|
+
this.resetScroll();
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}, {
|
|
114
|
+
key: "componentWillUnmount",
|
|
115
|
+
value: function componentWillUnmount() {
|
|
116
|
+
if (this.props.showModal) {
|
|
117
|
+
this.resetScroll();
|
|
118
|
+
}
|
|
114
119
|
}
|
|
115
120
|
}, {
|
|
116
121
|
key: "render",
|
|
@@ -120,21 +125,21 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
120
125
|
showModal = _this$props.showModal,
|
|
121
126
|
closeModal = _this$props.closeModal,
|
|
122
127
|
children = _this$props.children,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
128
|
+
_this$props$height = _this$props.height,
|
|
129
|
+
height = _this$props$height === void 0 ? 'auto' : _this$props$height,
|
|
130
|
+
_this$props$width = _this$props.width,
|
|
131
|
+
width = _this$props$width === void 0 ? 'auto' : _this$props$width,
|
|
132
|
+
_this$props$overflow = _this$props.overflow,
|
|
133
|
+
overflow = _this$props$overflow === void 0 ? 'visible' : _this$props$overflow,
|
|
126
134
|
padding = _this$props.padding,
|
|
127
135
|
_this$props$minWidth = _this$props.minWidth,
|
|
128
136
|
minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
|
|
129
137
|
_this$props$maxWidth = _this$props.maxWidth,
|
|
130
138
|
maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
|
|
131
139
|
_this$props$zIndex = _this$props.zIndex,
|
|
132
|
-
zIndex = _this$props$zIndex === void 0 ? parseInt(
|
|
133
|
-
|
|
134
|
-
var
|
|
135
|
-
width = sizes.width;
|
|
136
|
-
var overflow = this.GetOverflow(modalOverflow);
|
|
137
|
-
var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
|
|
140
|
+
zIndex = _this$props$zIndex === void 0 ? parseInt(_styles.Z_INDEXES.modal) : _this$props$zIndex; // should be at least z-index of modal and below z-index of toast
|
|
141
|
+
|
|
142
|
+
var zIndexValue = Math.min(Math.max(zIndex, +_styles.Z_INDEXES.modal), +_styles.Z_INDEXES.toast - 1);
|
|
138
143
|
var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
|
|
139
144
|
height: height,
|
|
140
145
|
width: width,
|
|
@@ -159,6 +164,41 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
159
164
|
children: children
|
|
160
165
|
});
|
|
161
166
|
}
|
|
167
|
+
}, {
|
|
168
|
+
key: "preventScroll",
|
|
169
|
+
value: function preventScroll(offset) {
|
|
170
|
+
if (!ModalContainer.openInstances) {
|
|
171
|
+
this.setState({
|
|
172
|
+
scroll: offset
|
|
173
|
+
});
|
|
174
|
+
document.body.style.position = 'fixed';
|
|
175
|
+
document.body.style.left = "0px";
|
|
176
|
+
document.body.style.right = "0px";
|
|
177
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
ModalContainer.openInstances++;
|
|
181
|
+
}
|
|
182
|
+
}, {
|
|
183
|
+
key: "resetScroll",
|
|
184
|
+
value: function resetScroll() {
|
|
185
|
+
ModalContainer.openInstances--;
|
|
186
|
+
|
|
187
|
+
if (!ModalContainer.openInstances) {
|
|
188
|
+
//@ts-ignore
|
|
189
|
+
document.body.style.position = null; //@ts-ignore
|
|
190
|
+
|
|
191
|
+
document.body.style.left = null; //@ts-ignore
|
|
192
|
+
|
|
193
|
+
document.body.style.top = null; //@ts-ignore
|
|
194
|
+
|
|
195
|
+
document.body.style.right = null;
|
|
196
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
197
|
+
this.setState({
|
|
198
|
+
scroll: 0
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
}
|
|
162
202
|
}]);
|
|
163
203
|
return ModalContainer;
|
|
164
204
|
}(React.Component);
|
|
@@ -168,14 +208,15 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
168
208
|
showModal: _propTypes.default.bool.isRequired,
|
|
169
209
|
closeModal: _propTypes.default.func.isRequired,
|
|
170
210
|
children: _propTypes.default.any.isRequired,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
211
|
+
height: _propTypes.default.any,
|
|
212
|
+
width: _propTypes.default.any,
|
|
213
|
+
overflow: _propTypes.default.string,
|
|
174
214
|
padding: _propTypes.default.string,
|
|
175
215
|
minWidth: _propTypes.default.string,
|
|
176
216
|
maxWidth: _propTypes.default.string,
|
|
177
217
|
zIndex: _propTypes.default.number
|
|
178
218
|
});
|
|
219
|
+
(0, _defineProperty2.default)(ModalContainer, "openInstances", 0);
|
|
179
220
|
var _default = ModalContainer;
|
|
180
221
|
exports.default = _default;
|
|
181
222
|
//# sourceMappingURL=ModalContainer.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
|
|
@@ -4,22 +4,29 @@ declare type ModalContainerProps = {
|
|
|
4
4
|
showModal: boolean;
|
|
5
5
|
closeModal: () => void;
|
|
6
6
|
children: any;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
height?: any;
|
|
8
|
+
width?: any;
|
|
9
|
+
overflow?: string;
|
|
10
10
|
padding?: string;
|
|
11
11
|
minWidth?: string;
|
|
12
12
|
maxWidth?: string;
|
|
13
13
|
zIndex?: number;
|
|
14
14
|
};
|
|
15
|
-
declare type ModalContainerState = {
|
|
15
|
+
declare type ModalContainerState = {
|
|
16
|
+
scroll: number;
|
|
17
|
+
};
|
|
16
18
|
declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {
|
|
19
|
+
private static openInstances;
|
|
17
20
|
componentDidMount(): void;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
width: string;
|
|
21
|
+
getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): {
|
|
22
|
+
scroll: number;
|
|
21
23
|
};
|
|
22
|
-
|
|
24
|
+
componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: {
|
|
25
|
+
scroll: number;
|
|
26
|
+
}): void;
|
|
27
|
+
componentWillUnmount(): void;
|
|
23
28
|
render(): JSX.Element;
|
|
29
|
+
private preventScroll;
|
|
30
|
+
private resetScroll;
|
|
24
31
|
}
|
|
25
32
|
export default ModalContainer;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
4
3
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
6
5
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
@@ -18,7 +17,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
18
17
|
import * as React from 'react';
|
|
19
18
|
import ReactModal from 'react-modal';
|
|
20
19
|
import { BOXSHADOWS } from '../styles';
|
|
21
|
-
import { Z_INDEXES } from '../styles
|
|
20
|
+
import { Z_INDEXES } from '../styles';
|
|
22
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
22
|
var ModalContainerStyles = {
|
|
24
23
|
content: {
|
|
@@ -45,31 +44,9 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
45
44
|
var _super = _createSuper(ModalContainer);
|
|
46
45
|
|
|
47
46
|
function ModalContainer() {
|
|
48
|
-
var _this;
|
|
49
|
-
|
|
50
47
|
_classCallCheck(this, ModalContainer);
|
|
51
48
|
|
|
52
|
-
|
|
53
|
-
args[_key] = arguments[_key];
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
57
|
-
|
|
58
|
-
_defineProperty(_assertThisInitialized(_this), "GetSize", function () {
|
|
59
|
-
var modalHeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'auto';
|
|
60
|
-
var modalWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
61
|
-
return {
|
|
62
|
-
height: modalHeight,
|
|
63
|
-
width: modalWidth
|
|
64
|
-
};
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
_defineProperty(_assertThisInitialized(_this), "GetOverflow", function () {
|
|
68
|
-
var modalOverflow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'visible';
|
|
69
|
-
return modalOverflow;
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
return _this;
|
|
49
|
+
return _super.apply(this, arguments);
|
|
73
50
|
}
|
|
74
51
|
|
|
75
52
|
_createClass(ModalContainer, [{
|
|
@@ -87,6 +64,35 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
87
64
|
head.appendChild(style);
|
|
88
65
|
style.appendChild(document.createTextNode(modalTransitions));
|
|
89
66
|
}
|
|
67
|
+
|
|
68
|
+
if (this.props.showModal) {
|
|
69
|
+
this.preventScroll(window.scrollY);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}, {
|
|
73
|
+
key: "getSnapshotBeforeUpdate",
|
|
74
|
+
value: function getSnapshotBeforeUpdate(prevProps, prevState) {
|
|
75
|
+
return {
|
|
76
|
+
scroll: window.scrollY
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}, {
|
|
80
|
+
key: "componentDidUpdate",
|
|
81
|
+
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
82
|
+
if (this.props.showModal && !prevProps.showModal) {
|
|
83
|
+
this.preventScroll(snapshot.scroll);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (!this.props.showModal && prevProps.showModal) {
|
|
87
|
+
this.resetScroll();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}, {
|
|
91
|
+
key: "componentWillUnmount",
|
|
92
|
+
value: function componentWillUnmount() {
|
|
93
|
+
if (this.props.showModal) {
|
|
94
|
+
this.resetScroll();
|
|
95
|
+
}
|
|
90
96
|
}
|
|
91
97
|
}, {
|
|
92
98
|
key: "render",
|
|
@@ -96,21 +102,21 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
96
102
|
showModal = _this$props.showModal,
|
|
97
103
|
closeModal = _this$props.closeModal,
|
|
98
104
|
children = _this$props.children,
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
105
|
+
_this$props$height = _this$props.height,
|
|
106
|
+
height = _this$props$height === void 0 ? 'auto' : _this$props$height,
|
|
107
|
+
_this$props$width = _this$props.width,
|
|
108
|
+
width = _this$props$width === void 0 ? 'auto' : _this$props$width,
|
|
109
|
+
_this$props$overflow = _this$props.overflow,
|
|
110
|
+
overflow = _this$props$overflow === void 0 ? 'visible' : _this$props$overflow,
|
|
102
111
|
padding = _this$props.padding,
|
|
103
112
|
_this$props$minWidth = _this$props.minWidth,
|
|
104
113
|
minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
|
|
105
114
|
_this$props$maxWidth = _this$props.maxWidth,
|
|
106
115
|
maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
|
|
107
116
|
_this$props$zIndex = _this$props.zIndex,
|
|
108
|
-
zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex;
|
|
109
|
-
|
|
110
|
-
var
|
|
111
|
-
width = sizes.width;
|
|
112
|
-
var overflow = this.GetOverflow(modalOverflow);
|
|
113
|
-
var zIndexValue = zIndex < 1060 ? 1060 : zIndex >= 1070 ? 1069 : zIndex;
|
|
117
|
+
zIndex = _this$props$zIndex === void 0 ? parseInt(Z_INDEXES.modal) : _this$props$zIndex; // should be at least z-index of modal and below z-index of toast
|
|
118
|
+
|
|
119
|
+
var zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
|
|
114
120
|
var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
|
|
115
121
|
height: height,
|
|
116
122
|
width: width,
|
|
@@ -135,6 +141,41 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
135
141
|
children: children
|
|
136
142
|
});
|
|
137
143
|
}
|
|
144
|
+
}, {
|
|
145
|
+
key: "preventScroll",
|
|
146
|
+
value: function preventScroll(offset) {
|
|
147
|
+
if (!ModalContainer.openInstances) {
|
|
148
|
+
this.setState({
|
|
149
|
+
scroll: offset
|
|
150
|
+
});
|
|
151
|
+
document.body.style.position = 'fixed';
|
|
152
|
+
document.body.style.left = "0px";
|
|
153
|
+
document.body.style.right = "0px";
|
|
154
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
ModalContainer.openInstances++;
|
|
158
|
+
}
|
|
159
|
+
}, {
|
|
160
|
+
key: "resetScroll",
|
|
161
|
+
value: function resetScroll() {
|
|
162
|
+
ModalContainer.openInstances--;
|
|
163
|
+
|
|
164
|
+
if (!ModalContainer.openInstances) {
|
|
165
|
+
//@ts-ignore
|
|
166
|
+
document.body.style.position = null; //@ts-ignore
|
|
167
|
+
|
|
168
|
+
document.body.style.left = null; //@ts-ignore
|
|
169
|
+
|
|
170
|
+
document.body.style.top = null; //@ts-ignore
|
|
171
|
+
|
|
172
|
+
document.body.style.right = null;
|
|
173
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
174
|
+
this.setState({
|
|
175
|
+
scroll: 0
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
}
|
|
138
179
|
}]);
|
|
139
180
|
|
|
140
181
|
return ModalContainer;
|
|
@@ -145,14 +186,16 @@ _defineProperty(ModalContainer, "propTypes", {
|
|
|
145
186
|
showModal: _pt.bool.isRequired,
|
|
146
187
|
closeModal: _pt.func.isRequired,
|
|
147
188
|
children: _pt.any.isRequired,
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
189
|
+
height: _pt.any,
|
|
190
|
+
width: _pt.any,
|
|
191
|
+
overflow: _pt.string,
|
|
151
192
|
padding: _pt.string,
|
|
152
193
|
minWidth: _pt.string,
|
|
153
194
|
maxWidth: _pt.string,
|
|
154
195
|
zIndex: _pt.number
|
|
155
196
|
});
|
|
156
197
|
|
|
198
|
+
_defineProperty(ModalContainer, "openInstances", 0);
|
|
199
|
+
|
|
157
200
|
export default ModalContainer;
|
|
158
201
|
//# sourceMappingURL=ModalContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","id","showModal","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","stylesConfiguration","Object","assign","styles","getElementById","Component"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,aAAvB;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,IAAMC,oBAAoB,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,GAAG,EAAE,KADE;AAEPC,IAAAA,IAAI,EAAE,KAFC;AAGPC,IAAAA,KAAK,EAAE,MAHA;AAIPC,IAAAA,MAAM,EAAE,MAJD;AAKPC,IAAAA,WAAW,EAAE,MALN;AAMPC,IAAAA,KAAK,EAAE,OANA;AAOPC,IAAAA,MAAM,EAAE,OAPD;AAQPC,IAAAA,YAAY,EAAE,KARP;AASPC,IAAAA,SAAS,EAAE,YATJ;AAUPC,IAAAA,MAAM,EAAE,CAVD;AAWPC,IAAAA,QAAQ,EAAE,MAXH;AAYPC,IAAAA,SAAS,EAAEf,UAAU,CAACgB;AAZf;AADkB,CAA7B,C,CAiBA;;AACA,IAAMC,gBAAgB,iEAGThB,SAAS,CAACiB,QAHD,+KAYTjB,SAAS,CAACkB,KAZD,okBAAtB;;IAmDMC,c;;;;;;;;;;;;;;;;8DAgBM;AAAA,UAACC,WAAD,uEAAuB,MAAvB;AAAA,UAA+BC,UAA/B,uEAAoD,MAApD;AAAA,aAAgE;AAAEZ,QAAAA,MAAM,EAAEW,WAAV;AAAuBZ,QAAAA,KAAK,EAAEa;AAA9B,OAAhE;AAAA,K;;kEACI;AAAA,UAACC,aAAD,uEAAyB,SAAzB;AAAA,aAAuCA,aAAvC;AAAA,K;;;;;;;WAhBd,6BAAoB;AAClB,UAAIxB,UAAU,CAACyB,aAAX,CAAyBC,OAA7B,EAAsC;AACpC1B,QAAAA,UAAU,CAACyB,aAAX,CAAyBC,OAAzB,CAAiCC,eAAjC,GAAmD,iBAAnD;AACD,OAHiB,CAKlB;;;AACA,UAAI,CAACC,QAAQ,CAACC,aAAT,CAAuB,iCAAvB,CAAL,EAAgE;AAC9D,YAAMC,IAAI,GAAGF,QAAQ,CAACE,IAAT,IAAiBF,QAAQ,CAACG,oBAAT,CAA8B,MAA9B,EAAsC,CAAtC,CAA9B;AACA,YAAMC,KAAK,GAAGJ,QAAQ,CAACK,aAAT,CAAuB,OAAvB,CAAd;AACAD,QAAAA,KAAK,CAACE,YAAN,CAAmB,sBAAnB,EAA2C,QAA3C;AACAJ,QAAAA,IAAI,CAACK,WAAL,CAAiBH,KAAjB;AACAA,QAAAA,KAAK,CAACG,WAAN,CAAkBP,QAAQ,CAACQ,cAAT,CAAwBlB,gBAAxB,CAAlB;AACD;AACF;;;WAID,kBAAS;AACP,wBAAmK,KAAKmB,KAAxK;AAAA,UAAQC,EAAR,eAAQA,EAAR;AAAA,UAAYC,SAAZ,eAAYA,SAAZ;AAAA,UAAuBC,UAAvB,eAAuBA,UAAvB;AAAA,UAAmCC,QAAnC,eAAmCA,QAAnC;AAAA,UAA6CnB,WAA7C,eAA6CA,WAA7C;AAAA,UAA0DC,UAA1D,eAA0DA,UAA1D;AAAA,UAAsEC,aAAtE,eAAsEA,aAAtE;AAAA,UAAqFkB,OAArF,eAAqFA,OAArF;AAAA,6CAA8FC,QAA9F;AAAA,UAA8FA,QAA9F,qCAAyG,EAAzG;AAAA,6CAA6GC,QAA7G;AAAA,UAA6GA,QAA7G,qCAAwH,EAAxH;AAAA,2CAA4HC,MAA5H;AAAA,UAA4HA,MAA5H,mCAAqIC,QAAQ,CAAC5C,SAAS,CAACkB,KAAX,CAA7I;AACA,UAAM2B,KAAK,GAAG,KAAKC,OAAL,CAAa1B,WAAb,EAA0BC,UAA1B,CAAd;AACA,UAAQZ,MAAR,GAA0BoC,KAA1B,CAAQpC,MAAR;AAAA,UAAgBD,KAAhB,GAA0BqC,KAA1B,CAAgBrC,KAAhB;AACA,UAAMK,QAAQ,GAAG,KAAKkC,WAAL,CAAiBzB,aAAjB,CAAjB;AACA,UAAM0B,WAAW,GAAGL,MAAM,GAAG,IAAT,GAAgB,IAAhB,GAAuBA,MAAM,IAAG,IAAT,GAAgB,IAAhB,GAAuBA,MAAlE;AACA,UAAMM,mBAAmB,GAAGC,MAAM,CAACC,MAAP,mBAAmBlD,oBAAoB,CAACC,OAAxC,GAAmD;AAAEO,QAAAA,MAAM,EAANA,MAAF;AAAUD,QAAAA,KAAK,EAALA,KAAV;AAAiBgC,QAAAA,OAAO,EAAPA,OAAjB;AAA0B3B,QAAAA,QAAQ,EAARA,QAA1B;AAAoC4B,QAAAA,QAAQ,EAARA,QAApC;AAA8CC,QAAAA,QAAQ,EAARA,QAA9C;AAAwDC,QAAAA,MAAM,EAAEK;AAAhE,OAAnD,CAA5B;AACA,UAAMI,MAAM,GAAG;AAAElD,QAAAA,OAAO,EAAE+C;AAAX,OAAf;AAEA,0BACE,KAAC,UAAD;AAAY,QAAA,EAAE,EAAEb,EAAhB;AAAoB,QAAA,MAAM,EAAEC,SAA5B;AAAuC,QAAA,cAAc,EAAE,GAAvD;AAA4D,QAAA,cAAc,EAAE;AAAA,iBAAMC,UAAU,EAAhB;AAAA,SAA5E;AAAgG,QAAA,KAAK,EAAEc,MAAvG;AAA+G,QAAA,UAAU,EAAE1B,QAAQ,CAAC2B,cAAT,CAAwB,MAAxB,KAAmC,EAA9J;AAAA,kBACGd;AADH,QADF;AAKD;;;;EAhC0B1C,KAAK,CAACyD,S;;gBAA7BnC,c;AAfJiB,EAAAA,E;AACAC,EAAAA,S;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAnB,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAkB,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,M;;;AAwCF,eAAexB,cAAf","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '', zIndex = parseInt(Z_INDEXES.modal) } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const zIndexValue = zIndex < 1060 ? 1060 : zIndex >=1070 ? 1069 : zIndex;\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth, zIndex: zIndexValue });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","body","position","state","scrollTo","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
|