@gravity-ui/navigation 2.32.0 → 3.0.0-beta.0
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/README.md +1 -1
- package/build/cjs/{ActionBar-3c6cdf57.js → ActionBar-_qjZ9IMA.js} +10 -14
- package/build/cjs/{ActionBar-3c6cdf57.js.map → ActionBar-_qjZ9IMA.js.map} +1 -1
- package/build/cjs/AsideFallback.js +10 -16
- package/build/cjs/AsideFallback.js.map +1 -1
- package/build/cjs/AsideHeader.js +15 -20
- package/build/cjs/AsideHeader.js.map +1 -1
- package/build/cjs/AsideHeaderContext.js +4 -10
- package/build/cjs/AsideHeaderContext.js.map +1 -1
- package/build/cjs/Content-Dy2XkiRi.js +16 -0
- package/build/cjs/{Content-64d5738a.js.map → Content-Dy2XkiRi.js.map} +1 -1
- package/build/cjs/Drawer.js +122 -823
- package/build/cjs/Drawer.js.map +1 -1
- package/build/cjs/{FooterItem-de603636.js → FooterItem-Bl_XrJ67.js} +77 -81
- package/build/cjs/FooterItem-Bl_XrJ67.js.map +1 -0
- package/build/cjs/FooterItem.js +8 -13
- package/build/cjs/FooterItem.js.map +1 -1
- package/build/cjs/{HotkeysPanel-1ed9fc32.js → HotkeysPanel-D1wI7tZj.js} +12 -16
- package/build/cjs/{HotkeysPanel-1ed9fc32.js.map → HotkeysPanel-D1wI7tZj.js.map} +1 -1
- package/build/cjs/Item-B_-IH1_h.js +295 -0
- package/build/cjs/Item-B_-IH1_h.js.map +1 -0
- package/build/cjs/PageLayout.js +13 -19
- package/build/cjs/PageLayout.js.map +1 -1
- package/build/cjs/{PageLayoutAside-30f2015c.js → PageLayoutAside-BzYF9W7M.js} +110 -165
- package/build/cjs/PageLayoutAside-BzYF9W7M.js.map +1 -0
- package/build/cjs/PageLayoutAside.js +10 -11
- package/build/cjs/PageLayoutAside.js.map +1 -1
- package/build/cjs/{Settings-8dc2a8ee.js → Settings-D6-a2hgE.js} +110 -102
- package/build/cjs/{Settings-8dc2a8ee.js.map → Settings-D6-a2hgE.js.map} +1 -1
- package/build/cjs/{Title-54580605.js → Title-CzxcSMoP.js} +7 -13
- package/build/cjs/Title-CzxcSMoP.js.map +1 -0
- package/build/cjs/_commonjsHelpers-BJu3ubxk.js +11 -0
- package/build/cjs/_commonjsHelpers-BJu3ubxk.js.map +1 -0
- package/build/cjs/{cn-9933321a.js → cn-DSlPZbcs.js} +1 -1
- package/build/cjs/{cn-9933321a.js.map → cn-DSlPZbcs.js.map} +1 -1
- package/build/cjs/components/ActionBar/ActionBar.d.ts +3 -3
- package/build/cjs/components/ActionBar/__stories__/ActionBar.stories.d.ts +17 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBarShowcase.d.ts +2 -0
- package/build/cjs/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/cjs/components/ActionBar/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/ActionBar/types.d.ts +1 -1
- package/build/cjs/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +0 -3
- package/build/cjs/components/AllPagesPanel/i18n/index.d.ts +5 -1
- package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts +1 -2
- package/build/cjs/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +18 -0
- package/build/cjs/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +14 -0
- package/build/cjs/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +3 -0
- package/build/cjs/components/AsideHeader/__stories__/moc.d.ts +6 -0
- package/build/cjs/components/AsideHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/AsideHeader/components/index.d.ts +0 -1
- package/build/cjs/components/AsideHeader/i18n/index.d.ts +5 -1
- package/build/cjs/components/AsideHeader/types.d.ts +3 -7
- package/build/cjs/components/CompositeBar/CompositeBar.d.ts +1 -1
- package/build/cjs/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +1 -1
- package/build/cjs/components/CompositeBar/Item/Item.d.ts +15 -2
- package/build/cjs/components/Drawer/__stories__/DisablePortal.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/Drawer.stories.d.ts +7 -0
- package/build/cjs/components/Drawer/__stories__/DrawerShowcase.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/HideVeil.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/ResizableItem.d.ts +3 -0
- package/build/cjs/components/Drawer/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/Drawer/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Drawer/utils.d.ts +2 -2
- package/build/cjs/components/Footer/desktop/__stories__/Footer.stories.d.ts +8 -0
- package/build/cjs/components/Footer/desktop/__stories__/FooterShowcase.d.ts +4 -0
- package/build/cjs/components/Footer/desktop/__stories__/moc.d.ts +3 -0
- package/build/cjs/components/Footer/desktop/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Footer/mobile/__stories__/MobileFooter.stories.d.ts +8 -0
- package/build/cjs/components/Footer/mobile/__stories__/MobileFooterShowcase.d.ts +4 -0
- package/build/cjs/components/Footer/mobile/__stories__/moc.d.ts +3 -0
- package/build/cjs/components/Footer/mobile/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/FooterItem/__stories__/FooterItem.stories.d.ts +6 -0
- package/build/cjs/components/FooterItem/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +5 -0
- package/build/cjs/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +6 -0
- package/build/cjs/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/HotkeysPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Logo/Logo.d.ts +1 -1
- package/build/cjs/components/Logo/__stories__/Logo.stories.d.ts +6 -0
- package/build/cjs/components/Logo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/BurgerMenu/__stories__/BurgerMenu.stories.d.ts +6 -0
- package/build/cjs/components/MobileHeader/BurgerMenu/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/MobileHeader/BurgerMenu/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/MobileHeader.d.ts +2 -1
- package/build/cjs/components/MobileHeader/OverlapPanel/__stories__/OverlapPanel.stories.d.ts +6 -0
- package/build/cjs/components/MobileHeader/OverlapPanel/__stories__/moc.d.ts +2 -0
- package/build/cjs/components/MobileHeader/OverlapPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/__stories__/MobileHeader.stories.d.ts +4 -0
- package/build/cjs/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts +3 -0
- package/build/cjs/components/MobileHeader/__stories__/moc.d.ts +1 -0
- package/build/cjs/components/MobileHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/MobileHeader/i18n/index.d.ts +5 -1
- package/build/cjs/components/MobileHeader/types.d.ts +0 -1
- package/build/cjs/components/MobileLogo/__stories__/MobileLogo.stories.d.ts +6 -0
- package/build/cjs/components/MobileLogo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Settings/__stories__/Settings.stories.d.ts +5 -0
- package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts +14 -0
- package/build/cjs/components/Settings/__stories__/SettingsMobileDemo.d.ts +8 -0
- package/build/cjs/components/Settings/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/cjs/components/Settings/i18n/index.d.ts +5 -1
- package/build/cjs/components/Title/i18n/index.d.ts +5 -1
- package/build/cjs/components/TopAlert/TopAlert.d.ts +10 -0
- package/build/cjs/components/TopAlert/index.d.ts +1 -0
- package/build/cjs/components/TopAlert/useTopAlertHeight.d.ts +10 -0
- package/build/cjs/components/types.d.ts +4 -4
- package/build/cjs/{constants-d81c3867.js → constants-B0DLAQY9.js} +1 -1
- package/build/{esm/constants-b1604ff5.js.map → cjs/constants-B0DLAQY9.js.map} +1 -1
- package/build/cjs/debounce-RFF04eVR.js +660 -0
- package/build/{esm/debounce-64cd2b4c.js.map → cjs/debounce-RFF04eVR.js.map} +1 -1
- package/build/cjs/{divider-collapsed-b743122e.js → divider-collapsed-BLSp99lJ.js} +7 -9
- package/build/cjs/divider-collapsed-BLSp99lJ.js.map +1 -0
- package/build/cjs/hooks/useForwardRef.d.ts +1 -1
- package/build/cjs/index-B6c8DVdr.js +68 -0
- package/build/cjs/index-B6c8DVdr.js.map +1 -0
- package/build/cjs/index.js +4 -191
- package/build/cjs/index.js.map +1 -1
- package/build/cjs/index2.js +7 -6
- package/build/cjs/index2.js.map +1 -1
- package/build/cjs/index3.js +8 -8
- package/build/cjs/index4.js +12 -9
- package/build/cjs/index4.js.map +1 -1
- package/build/cjs/index5.js +12 -12
- package/build/cjs/index6.js +186 -15
- package/build/cjs/index6.js.map +1 -1
- package/build/cjs/{style-inject.es-dcee06b6.js → style-inject.es-CsU6UJbw.js} +2 -2
- package/build/cjs/style-inject.es-CsU6UJbw.js.map +1 -0
- package/build/cjs/{tslib.es6-705c6589.js → tslib.es6-D25eJ2i9.js} +33 -31
- package/build/cjs/tslib.es6-D25eJ2i9.js.map +1 -0
- package/build/cjs/utils-BrRoop7o.js +8 -0
- package/build/cjs/{utils-db3e03c2.js.map → utils-BrRoop7o.js.map} +1 -1
- package/build/esm/{ActionBar-834b178a.js → ActionBar-BD_roj92.js} +5 -5
- package/build/esm/{ActionBar-834b178a.js.map → ActionBar-BD_roj92.js.map} +1 -1
- package/build/esm/AsideFallback.js +5 -5
- package/build/esm/AsideFallback.js.map +1 -1
- package/build/esm/AsideHeader.js +11 -10
- package/build/esm/AsideHeader.js.map +1 -1
- package/build/esm/AsideHeaderContext.js.map +1 -1
- package/build/esm/{Content-f94ba85d.js → Content-c3e3OunO.js} +1 -1
- package/build/esm/{Content-f94ba85d.js.map → Content-c3e3OunO.js.map} +1 -1
- package/build/esm/Drawer.js +90 -784
- package/build/esm/Drawer.js.map +1 -1
- package/build/esm/{FooterItem-3cc816a3.js → FooterItem-BP7Ya02G.js} +43 -43
- package/build/esm/FooterItem-BP7Ya02G.js.map +1 -0
- package/build/esm/FooterItem.js +7 -6
- package/build/esm/FooterItem.js.map +1 -1
- package/build/esm/{HotkeysPanel-0576deee.js → HotkeysPanel-BiJ8VcX-.js} +4 -4
- package/build/esm/{HotkeysPanel-0576deee.js.map → HotkeysPanel-BiJ8VcX-.js.map} +1 -1
- package/build/esm/{Item-55899ec8.js → Item-BnjbUb88.js} +40 -44
- package/build/esm/Item-BnjbUb88.js.map +1 -0
- package/build/esm/PageLayout.js +8 -8
- package/build/esm/PageLayout.js.map +1 -1
- package/build/esm/{PageLayoutAside-5d010e96.js → PageLayoutAside-DQVfkCeA.js} +57 -108
- package/build/esm/PageLayoutAside-DQVfkCeA.js.map +1 -0
- package/build/esm/PageLayoutAside.js +10 -9
- package/build/esm/PageLayoutAside.js.map +1 -1
- package/build/esm/{Settings-e660a4c5.js → Settings-BPE0n6i2.js} +36 -24
- package/build/esm/{Settings-e660a4c5.js.map → Settings-BPE0n6i2.js.map} +1 -1
- package/build/esm/{Title-03b4255a.js → Title-CRlzgg4r.js} +4 -6
- package/build/esm/Title-CRlzgg4r.js.map +1 -0
- package/build/esm/_commonjsHelpers-BFTU3MAI.js +8 -0
- package/build/esm/_commonjsHelpers-BFTU3MAI.js.map +1 -0
- package/build/esm/{cn-ffe5e9f5.js → cn-CgiqTV3v.js} +1 -1
- package/build/esm/{cn-ffe5e9f5.js.map → cn-CgiqTV3v.js.map} +1 -1
- package/build/esm/components/ActionBar/ActionBar.d.ts +3 -3
- package/build/esm/components/ActionBar/__stories__/ActionBar.stories.d.ts +17 -0
- package/build/esm/components/ActionBar/__stories__/ActionBarShowcase.d.ts +2 -0
- package/build/esm/components/ActionBar/__stories__/ActionBarSingleSection.d.ts +2 -0
- package/build/esm/components/ActionBar/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/ActionBar/types.d.ts +1 -1
- package/build/esm/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +0 -3
- package/build/esm/components/AllPagesPanel/i18n/index.d.ts +5 -1
- package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +1 -2
- package/build/esm/components/AsideHeader/__stories__/AsideHeader.stories.d.ts +18 -0
- package/build/esm/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts +14 -0
- package/build/esm/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +3 -0
- package/build/esm/components/AsideHeader/__stories__/moc.d.ts +6 -0
- package/build/esm/components/AsideHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/AsideHeader/components/index.d.ts +0 -1
- package/build/esm/components/AsideHeader/i18n/index.d.ts +5 -1
- package/build/esm/components/AsideHeader/types.d.ts +3 -7
- package/build/esm/components/CompositeBar/CompositeBar.d.ts +1 -1
- package/build/esm/components/CompositeBar/HighlightedItem/HighlightedItem.d.ts +1 -1
- package/build/esm/components/CompositeBar/Item/Item.d.ts +15 -2
- package/build/esm/components/Drawer/__stories__/DisablePortal.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/Drawer.stories.d.ts +7 -0
- package/build/esm/components/Drawer/__stories__/DrawerShowcase.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/HideVeil.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/ResizableItem.d.ts +3 -0
- package/build/esm/components/Drawer/__stories__/moc.d.ts +2 -0
- package/build/esm/components/Drawer/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Drawer/utils.d.ts +2 -2
- package/build/esm/components/Footer/desktop/__stories__/Footer.stories.d.ts +8 -0
- package/build/esm/components/Footer/desktop/__stories__/FooterShowcase.d.ts +4 -0
- package/build/esm/components/Footer/desktop/__stories__/moc.d.ts +3 -0
- package/build/esm/components/Footer/desktop/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Footer/mobile/__stories__/MobileFooter.stories.d.ts +8 -0
- package/build/esm/components/Footer/mobile/__stories__/MobileFooterShowcase.d.ts +4 -0
- package/build/esm/components/Footer/mobile/__stories__/moc.d.ts +3 -0
- package/build/esm/components/Footer/mobile/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/FooterItem/__stories__/FooterItem.stories.d.ts +6 -0
- package/build/esm/components/FooterItem/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanel.stories.d.ts +5 -0
- package/build/esm/components/HotkeysPanel/__stories__/HotkeysPanelShowcase.d.ts +6 -0
- package/build/esm/components/HotkeysPanel/__stories__/moc.d.ts +2 -0
- package/build/esm/components/HotkeysPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Logo/Logo.d.ts +1 -1
- package/build/esm/components/Logo/__stories__/Logo.stories.d.ts +6 -0
- package/build/esm/components/Logo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/BurgerMenu/__stories__/BurgerMenu.stories.d.ts +6 -0
- package/build/esm/components/MobileHeader/BurgerMenu/__stories__/moc.d.ts +2 -0
- package/build/esm/components/MobileHeader/BurgerMenu/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/MobileHeader.d.ts +2 -1
- package/build/esm/components/MobileHeader/OverlapPanel/__stories__/OverlapPanel.stories.d.ts +6 -0
- package/build/esm/components/MobileHeader/OverlapPanel/__stories__/moc.d.ts +2 -0
- package/build/esm/components/MobileHeader/OverlapPanel/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/__stories__/MobileHeader.stories.d.ts +4 -0
- package/build/esm/components/MobileHeader/__stories__/MobileHeaderShowcase.d.ts +3 -0
- package/build/esm/components/MobileHeader/__stories__/moc.d.ts +1 -0
- package/build/esm/components/MobileHeader/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/MobileHeader/i18n/index.d.ts +5 -1
- package/build/esm/components/MobileHeader/types.d.ts +0 -1
- package/build/esm/components/MobileLogo/__stories__/MobileLogo.stories.d.ts +6 -0
- package/build/esm/components/MobileLogo/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Settings/__stories__/Settings.stories.d.ts +5 -0
- package/build/esm/components/Settings/__stories__/SettingsDemo.d.ts +14 -0
- package/build/esm/components/Settings/__stories__/SettingsMobileDemo.d.ts +8 -0
- package/build/esm/components/Settings/__tests__/helpersPlaywright.d.ts +1 -1
- package/build/esm/components/Settings/i18n/index.d.ts +5 -1
- package/build/esm/components/Title/i18n/index.d.ts +5 -1
- package/build/esm/components/TopAlert/TopAlert.d.ts +10 -0
- package/build/esm/components/TopAlert/index.d.ts +1 -0
- package/build/esm/components/TopAlert/useTopAlertHeight.d.ts +10 -0
- package/build/esm/components/types.d.ts +4 -4
- package/build/esm/{constants-b1604ff5.js → constants-ChYDZ5F2.js} +2 -2
- package/build/{cjs/constants-d81c3867.js.map → esm/constants-ChYDZ5F2.js.map} +1 -1
- package/build/esm/debounce-DW3XyyUs.js +658 -0
- package/build/{cjs/debounce-8772fd80.js.map → esm/debounce-DW3XyyUs.js.map} +1 -1
- package/build/esm/{divider-collapsed-a0ef54c3.js → divider-collapsed-BgKmR8h9.js} +4 -5
- package/build/esm/divider-collapsed-BgKmR8h9.js.map +1 -0
- package/build/esm/hooks/useForwardRef.d.ts +1 -1
- package/build/esm/index-BLdwsphX.js +66 -0
- package/build/esm/index-BLdwsphX.js.map +1 -0
- package/build/esm/index.js +4 -168
- package/build/esm/index.js.map +1 -1
- package/build/esm/index2.js +6 -3
- package/build/esm/index2.js.map +1 -1
- package/build/esm/index3.js +7 -5
- package/build/esm/index3.js.map +1 -1
- package/build/esm/index4.js +9 -6
- package/build/esm/index4.js.map +1 -1
- package/build/esm/index5.js +8 -7
- package/build/esm/index5.js.map +1 -1
- package/build/esm/index6.js +168 -9
- package/build/esm/index6.js.map +1 -1
- package/build/esm/{style-inject.es-1f59c1d0.js → style-inject.es-Bff-fD1R.js} +2 -2
- package/build/esm/style-inject.es-Bff-fD1R.js.map +1 -0
- package/build/esm/{tslib.es6-3cd4e99f.js → tslib.es6-BCqiemNI.js} +33 -31
- package/build/esm/tslib.es6-BCqiemNI.js.map +1 -0
- package/build/esm/utils-D0s6YtvW.js +6 -0
- package/build/esm/{utils-117463a5.js.map → utils-D0s6YtvW.js.map} +1 -1
- package/package.json +48 -45
- package/build/cjs/Content-64d5738a.js +0 -20
- package/build/cjs/FooterItem-de603636.js.map +0 -1
- package/build/cjs/Item-ff6bc440.js +0 -303
- package/build/cjs/Item-ff6bc440.js.map +0 -1
- package/build/cjs/PageLayoutAside-30f2015c.js.map +0 -1
- package/build/cjs/Title-54580605.js.map +0 -1
- package/build/cjs/TopPanel-c6b83157.js +0 -82
- package/build/cjs/TopPanel-c6b83157.js.map +0 -1
- package/build/cjs/components/AsideHeader/components/TopPanel.d.ts +0 -7
- package/build/cjs/components/AsideHeader/useAsideHeaderTopPanel.d.ts +0 -10
- package/build/cjs/debounce-8772fd80.js +0 -545
- package/build/cjs/divider-collapsed-b743122e.js.map +0 -1
- package/build/cjs/style-inject.es-dcee06b6.js.map +0 -1
- package/build/cjs/tslib.es6-705c6589.js.map +0 -1
- package/build/cjs/utils-db3e03c2.js +0 -8
- package/build/esm/FooterItem-3cc816a3.js.map +0 -1
- package/build/esm/Item-55899ec8.js.map +0 -1
- package/build/esm/PageLayoutAside-5d010e96.js.map +0 -1
- package/build/esm/Title-03b4255a.js.map +0 -1
- package/build/esm/TopPanel-cd270f27.js +0 -76
- package/build/esm/TopPanel-cd270f27.js.map +0 -1
- package/build/esm/components/AsideHeader/components/TopPanel.d.ts +0 -7
- package/build/esm/components/AsideHeader/useAsideHeaderTopPanel.d.ts +0 -10
- package/build/esm/debounce-64cd2b4c.js +0 -543
- package/build/esm/divider-collapsed-a0ef54c3.js.map +0 -1
- package/build/esm/style-inject.es-1f59c1d0.js.map +0 -1
- package/build/esm/tslib.es6-3cd4e99f.js.map +0 -1
- package/build/esm/utils-117463a5.js +0 -6
package/build/cjs/Drawer.js
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var uikit = require('@gravity-ui/uikit');
|
|
5
|
+
var cn = require('./cn-DSlPZbcs.js');
|
|
6
|
+
var styleInject_es = require('./style-inject.es-CsU6UJbw.js');
|
|
7
|
+
var _commonjsHelpers = require('./_commonjsHelpers-BJu3ubxk.js');
|
|
7
8
|
var ReactDOM = require('react-dom');
|
|
8
|
-
var cn = require('./cn-9933321a.js');
|
|
9
|
-
var styleInject_es = require('./style-inject.es-dcee06b6.js');
|
|
10
9
|
require('@bem-react/classname');
|
|
11
10
|
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
function _interopNamespace(e) {
|
|
15
|
-
if (e && e.__esModule) return e;
|
|
11
|
+
function _interopNamespaceDefault(e) {
|
|
16
12
|
var n = Object.create(null);
|
|
17
13
|
if (e) {
|
|
18
14
|
Object.keys(e).forEach(function (k) {
|
|
@@ -25,13 +21,11 @@ function _interopNamespace(e) {
|
|
|
25
21
|
}
|
|
26
22
|
});
|
|
27
23
|
}
|
|
28
|
-
n
|
|
24
|
+
n.default = e;
|
|
29
25
|
return Object.freeze(n);
|
|
30
26
|
}
|
|
31
27
|
|
|
32
|
-
var
|
|
33
|
-
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
34
|
-
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
|
|
28
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
35
29
|
|
|
36
30
|
function _extends() {
|
|
37
31
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -286,14 +280,12 @@ var hasRequiredReactIs;
|
|
|
286
280
|
function requireReactIs () {
|
|
287
281
|
if (hasRequiredReactIs) return reactIs.exports;
|
|
288
282
|
hasRequiredReactIs = 1;
|
|
289
|
-
(function (module) {
|
|
290
283
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
} (reactIs));
|
|
284
|
+
if (process.env.NODE_ENV === 'production') {
|
|
285
|
+
reactIs.exports = requireReactIs_production_min();
|
|
286
|
+
} else {
|
|
287
|
+
reactIs.exports = requireReactIs_development();
|
|
288
|
+
}
|
|
297
289
|
return reactIs.exports;
|
|
298
290
|
}
|
|
299
291
|
|
|
@@ -442,9 +434,9 @@ function requireCheckPropTypes () {
|
|
|
442
434
|
var printWarning = function() {};
|
|
443
435
|
|
|
444
436
|
if (process.env.NODE_ENV !== 'production') {
|
|
445
|
-
var ReactPropTypesSecret = requireReactPropTypesSecret();
|
|
437
|
+
var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
|
|
446
438
|
var loggedTypeFailures = {};
|
|
447
|
-
var has = requireHas();
|
|
439
|
+
var has = /*@__PURE__*/ requireHas();
|
|
448
440
|
|
|
449
441
|
printWarning = function(text) {
|
|
450
442
|
var message = 'Warning: ' + text;
|
|
@@ -553,9 +545,9 @@ function requireFactoryWithTypeCheckers () {
|
|
|
553
545
|
var ReactIs = requireReactIs();
|
|
554
546
|
var assign = requireObjectAssign();
|
|
555
547
|
|
|
556
|
-
var ReactPropTypesSecret = requireReactPropTypesSecret();
|
|
557
|
-
var has = requireHas();
|
|
558
|
-
var checkPropTypes = requireCheckPropTypes();
|
|
548
|
+
var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
|
|
549
|
+
var has = /*@__PURE__*/ requireHas();
|
|
550
|
+
var checkPropTypes = /*@__PURE__*/ requireCheckPropTypes();
|
|
559
551
|
|
|
560
552
|
var printWarning = function() {};
|
|
561
553
|
|
|
@@ -910,7 +902,7 @@ function requireFactoryWithTypeCheckers () {
|
|
|
910
902
|
|
|
911
903
|
function createUnionTypeChecker(arrayOfTypeCheckers) {
|
|
912
904
|
if (!Array.isArray(arrayOfTypeCheckers)) {
|
|
913
|
-
process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') :
|
|
905
|
+
process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : undefined;
|
|
914
906
|
return emptyFunctionThatReturnsNull;
|
|
915
907
|
}
|
|
916
908
|
|
|
@@ -1168,7 +1160,7 @@ function requireFactoryWithThrowingShims () {
|
|
|
1168
1160
|
if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
|
|
1169
1161
|
hasRequiredFactoryWithThrowingShims = 1;
|
|
1170
1162
|
|
|
1171
|
-
var ReactPropTypesSecret = requireReactPropTypesSecret();
|
|
1163
|
+
var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
|
|
1172
1164
|
|
|
1173
1165
|
function emptyFunction() {}
|
|
1174
1166
|
function emptyFunctionWithReset() {}
|
|
@@ -1232,19 +1224,29 @@ function requireFactoryWithThrowingShims () {
|
|
|
1232
1224
|
* LICENSE file in the root directory of this source tree.
|
|
1233
1225
|
*/
|
|
1234
1226
|
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1227
|
+
var hasRequiredPropTypes;
|
|
1228
|
+
|
|
1229
|
+
function requirePropTypes () {
|
|
1230
|
+
if (hasRequiredPropTypes) return propTypes.exports;
|
|
1231
|
+
hasRequiredPropTypes = 1;
|
|
1232
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
1233
|
+
var ReactIs = requireReactIs();
|
|
1234
|
+
|
|
1235
|
+
// By explicitly using `prop-types` you are opting into new development behavior.
|
|
1236
|
+
// http://fb.me/prop-types-in-prod
|
|
1237
|
+
var throwOnDirectAccess = true;
|
|
1238
|
+
propTypes.exports = /*@__PURE__*/ requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
|
|
1239
|
+
} else {
|
|
1240
|
+
// By explicitly using `prop-types` you are opting into new production behavior.
|
|
1241
|
+
// http://fb.me/prop-types-in-prod
|
|
1242
|
+
propTypes.exports = /*@__PURE__*/ requireFactoryWithThrowingShims()();
|
|
1243
|
+
}
|
|
1244
|
+
return propTypes.exports;
|
|
1246
1245
|
}
|
|
1247
1246
|
|
|
1247
|
+
var propTypesExports = /*@__PURE__*/ requirePropTypes();
|
|
1248
|
+
var PropTypes = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(propTypesExports);
|
|
1249
|
+
|
|
1248
1250
|
/**
|
|
1249
1251
|
* Checks if a given element has a CSS class.
|
|
1250
1252
|
*
|
|
@@ -1292,25 +1294,25 @@ var config = {
|
|
|
1292
1294
|
disabled: false
|
|
1293
1295
|
};
|
|
1294
1296
|
|
|
1295
|
-
var timeoutsShape = process.env.NODE_ENV !== 'production' ?
|
|
1296
|
-
enter:
|
|
1297
|
-
exit:
|
|
1298
|
-
appear:
|
|
1297
|
+
var timeoutsShape = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
|
1298
|
+
enter: PropTypes.number,
|
|
1299
|
+
exit: PropTypes.number,
|
|
1300
|
+
appear: PropTypes.number
|
|
1299
1301
|
}).isRequired]) : null;
|
|
1300
|
-
var classNamesShape = process.env.NODE_ENV !== 'production' ?
|
|
1301
|
-
enter:
|
|
1302
|
-
exit:
|
|
1303
|
-
active:
|
|
1304
|
-
}),
|
|
1305
|
-
enter:
|
|
1306
|
-
enterDone:
|
|
1307
|
-
enterActive:
|
|
1308
|
-
exit:
|
|
1309
|
-
exitDone:
|
|
1310
|
-
exitActive:
|
|
1302
|
+
var classNamesShape = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
|
1303
|
+
enter: PropTypes.string,
|
|
1304
|
+
exit: PropTypes.string,
|
|
1305
|
+
active: PropTypes.string
|
|
1306
|
+
}), PropTypes.shape({
|
|
1307
|
+
enter: PropTypes.string,
|
|
1308
|
+
enterDone: PropTypes.string,
|
|
1309
|
+
enterActive: PropTypes.string,
|
|
1310
|
+
exit: PropTypes.string,
|
|
1311
|
+
exitDone: PropTypes.string,
|
|
1312
|
+
exitActive: PropTypes.string
|
|
1311
1313
|
})]) : null;
|
|
1312
1314
|
|
|
1313
|
-
var TransitionGroupContext =
|
|
1315
|
+
var TransitionGroupContext = React.createContext(null);
|
|
1314
1316
|
|
|
1315
1317
|
var forceReflow = function forceReflow(node) {
|
|
1316
1318
|
return node.scrollTop;
|
|
@@ -1526,7 +1528,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1526
1528
|
};
|
|
1527
1529
|
|
|
1528
1530
|
_proto.updateStatus = function updateStatus(mounting, nextStatus) {
|
|
1529
|
-
if (mounting ===
|
|
1531
|
+
if (mounting === undefined) {
|
|
1530
1532
|
mounting = false;
|
|
1531
1533
|
}
|
|
1532
1534
|
|
|
@@ -1536,7 +1538,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1536
1538
|
|
|
1537
1539
|
if (nextStatus === ENTERING) {
|
|
1538
1540
|
if (this.props.unmountOnExit || this.props.mountOnEnter) {
|
|
1539
|
-
var node = this.props.nodeRef ? this.props.nodeRef.current :
|
|
1541
|
+
var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
|
|
1540
1542
|
// With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
|
|
1541
1543
|
// To make the animation happen, we have to separate each rendering and avoid being processed as batched.
|
|
1542
1544
|
|
|
@@ -1560,7 +1562,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1560
1562
|
var enter = this.props.enter;
|
|
1561
1563
|
var appearing = this.context ? this.context.isMounting : mounting;
|
|
1562
1564
|
|
|
1563
|
-
var _ref2 = this.props.nodeRef ? [appearing] : [
|
|
1565
|
+
var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],
|
|
1564
1566
|
maybeNode = _ref2[0],
|
|
1565
1567
|
maybeAppearing = _ref2[1];
|
|
1566
1568
|
|
|
@@ -1598,7 +1600,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1598
1600
|
|
|
1599
1601
|
var exit = this.props.exit;
|
|
1600
1602
|
var timeouts = this.getTimeouts();
|
|
1601
|
-
var maybeNode = this.props.nodeRef ? undefined :
|
|
1603
|
+
var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED
|
|
1602
1604
|
|
|
1603
1605
|
if (!exit || config.disabled) {
|
|
1604
1606
|
this.safeSetState({
|
|
@@ -1662,7 +1664,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1662
1664
|
|
|
1663
1665
|
_proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {
|
|
1664
1666
|
this.setNextCallback(handler);
|
|
1665
|
-
var node = this.props.nodeRef ? this.props.nodeRef.current :
|
|
1667
|
+
var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);
|
|
1666
1668
|
var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;
|
|
1667
1669
|
|
|
1668
1670
|
if (!node || doesNotHaveTimeoutOrListener) {
|
|
@@ -1712,14 +1714,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
|
|
|
1712
1714
|
return (
|
|
1713
1715
|
/*#__PURE__*/
|
|
1714
1716
|
// allows for nested Transitions
|
|
1715
|
-
|
|
1717
|
+
React.createElement(TransitionGroupContext.Provider, {
|
|
1716
1718
|
value: null
|
|
1717
|
-
}, typeof children === 'function' ? children(status, childProps) :
|
|
1719
|
+
}, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))
|
|
1718
1720
|
);
|
|
1719
1721
|
};
|
|
1720
1722
|
|
|
1721
1723
|
return Transition;
|
|
1722
|
-
}(
|
|
1724
|
+
}(React.Component);
|
|
1723
1725
|
|
|
1724
1726
|
Transition.contextType = TransitionGroupContext;
|
|
1725
1727
|
Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1734,10 +1736,10 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1734
1736
|
* (see
|
|
1735
1737
|
* [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
|
|
1736
1738
|
*/
|
|
1737
|
-
nodeRef:
|
|
1738
|
-
current: typeof Element === 'undefined' ?
|
|
1739
|
+
nodeRef: PropTypes.shape({
|
|
1740
|
+
current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {
|
|
1739
1741
|
var value = propValue[key];
|
|
1740
|
-
return
|
|
1742
|
+
return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);
|
|
1741
1743
|
}
|
|
1742
1744
|
}),
|
|
1743
1745
|
|
|
@@ -1755,12 +1757,12 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1755
1757
|
* </Transition>
|
|
1756
1758
|
* ```
|
|
1757
1759
|
*/
|
|
1758
|
-
children:
|
|
1760
|
+
children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,
|
|
1759
1761
|
|
|
1760
1762
|
/**
|
|
1761
1763
|
* Show the component; triggers the enter or exit states
|
|
1762
1764
|
*/
|
|
1763
|
-
in:
|
|
1765
|
+
in: PropTypes.bool,
|
|
1764
1766
|
|
|
1765
1767
|
/**
|
|
1766
1768
|
* By default the child component is mounted immediately along with
|
|
@@ -1768,13 +1770,13 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1768
1770
|
* first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
|
|
1769
1771
|
* mounted, even on "exited", unless you also specify `unmountOnExit`.
|
|
1770
1772
|
*/
|
|
1771
|
-
mountOnEnter:
|
|
1773
|
+
mountOnEnter: PropTypes.bool,
|
|
1772
1774
|
|
|
1773
1775
|
/**
|
|
1774
1776
|
* By default the child component stays mounted after it reaches the `'exited'` state.
|
|
1775
1777
|
* Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
|
|
1776
1778
|
*/
|
|
1777
|
-
unmountOnExit:
|
|
1779
|
+
unmountOnExit: PropTypes.bool,
|
|
1778
1780
|
|
|
1779
1781
|
/**
|
|
1780
1782
|
* By default the child component does not perform the enter transition when
|
|
@@ -1787,17 +1789,17 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1787
1789
|
* > additional `.appear-*` classes, that way you can choose to style it
|
|
1788
1790
|
* > differently.
|
|
1789
1791
|
*/
|
|
1790
|
-
appear:
|
|
1792
|
+
appear: PropTypes.bool,
|
|
1791
1793
|
|
|
1792
1794
|
/**
|
|
1793
1795
|
* Enable or disable enter transitions.
|
|
1794
1796
|
*/
|
|
1795
|
-
enter:
|
|
1797
|
+
enter: PropTypes.bool,
|
|
1796
1798
|
|
|
1797
1799
|
/**
|
|
1798
1800
|
* Enable or disable exit transitions.
|
|
1799
1801
|
*/
|
|
1800
|
-
exit:
|
|
1802
|
+
exit: PropTypes.bool,
|
|
1801
1803
|
|
|
1802
1804
|
/**
|
|
1803
1805
|
* The duration of the transition, in milliseconds.
|
|
@@ -1833,7 +1835,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1833
1835
|
args[_key - 1] = arguments[_key];
|
|
1834
1836
|
}
|
|
1835
1837
|
|
|
1836
|
-
return pt.apply(
|
|
1838
|
+
return pt.apply(undefined, [props].concat(args));
|
|
1837
1839
|
},
|
|
1838
1840
|
|
|
1839
1841
|
/**
|
|
@@ -1850,7 +1852,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1850
1852
|
* }}
|
|
1851
1853
|
* ```
|
|
1852
1854
|
*/
|
|
1853
|
-
addEndListener:
|
|
1855
|
+
addEndListener: PropTypes.func,
|
|
1854
1856
|
|
|
1855
1857
|
/**
|
|
1856
1858
|
* Callback fired before the "entering" status is applied. An extra parameter
|
|
@@ -1860,7 +1862,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1860
1862
|
*
|
|
1861
1863
|
* @type Function(node: HtmlElement, isAppearing: bool) -> void
|
|
1862
1864
|
*/
|
|
1863
|
-
onEnter:
|
|
1865
|
+
onEnter: PropTypes.func,
|
|
1864
1866
|
|
|
1865
1867
|
/**
|
|
1866
1868
|
* Callback fired after the "entering" status is applied. An extra parameter
|
|
@@ -1870,7 +1872,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1870
1872
|
*
|
|
1871
1873
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
1872
1874
|
*/
|
|
1873
|
-
onEntering:
|
|
1875
|
+
onEntering: PropTypes.func,
|
|
1874
1876
|
|
|
1875
1877
|
/**
|
|
1876
1878
|
* Callback fired after the "entered" status is applied. An extra parameter
|
|
@@ -1880,7 +1882,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1880
1882
|
*
|
|
1881
1883
|
* @type Function(node: HtmlElement, isAppearing: bool) -> void
|
|
1882
1884
|
*/
|
|
1883
|
-
onEntered:
|
|
1885
|
+
onEntered: PropTypes.func,
|
|
1884
1886
|
|
|
1885
1887
|
/**
|
|
1886
1888
|
* Callback fired before the "exiting" status is applied.
|
|
@@ -1889,7 +1891,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1889
1891
|
*
|
|
1890
1892
|
* @type Function(node: HtmlElement) -> void
|
|
1891
1893
|
*/
|
|
1892
|
-
onExit:
|
|
1894
|
+
onExit: PropTypes.func,
|
|
1893
1895
|
|
|
1894
1896
|
/**
|
|
1895
1897
|
* Callback fired after the "exiting" status is applied.
|
|
@@ -1898,7 +1900,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1898
1900
|
*
|
|
1899
1901
|
* @type Function(node: HtmlElement) -> void
|
|
1900
1902
|
*/
|
|
1901
|
-
onExiting:
|
|
1903
|
+
onExiting: PropTypes.func,
|
|
1902
1904
|
|
|
1903
1905
|
/**
|
|
1904
1906
|
* Callback fired after the "exited" status is applied.
|
|
@@ -1907,7 +1909,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
1907
1909
|
*
|
|
1908
1910
|
* @type Function(node: HtmlElement) -> void
|
|
1909
1911
|
*/
|
|
1910
|
-
onExited:
|
|
1912
|
+
onExited: PropTypes.func
|
|
1911
1913
|
} : {}; // Name the function so it is clearer in the documentation
|
|
1912
1914
|
|
|
1913
1915
|
function noop() {}
|
|
@@ -2186,7 +2188,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
|
|
|
2186
2188
|
_this$props.classNames;
|
|
2187
2189
|
var props = _objectWithoutPropertiesLoose(_this$props, ["classNames"]);
|
|
2188
2190
|
|
|
2189
|
-
return /*#__PURE__*/
|
|
2191
|
+
return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {
|
|
2190
2192
|
onEnter: this.onEnter,
|
|
2191
2193
|
onEntered: this.onEntered,
|
|
2192
2194
|
onEntering: this.onEntering,
|
|
@@ -2197,7 +2199,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
|
|
|
2197
2199
|
};
|
|
2198
2200
|
|
|
2199
2201
|
return CSSTransition;
|
|
2200
|
-
}(
|
|
2202
|
+
}(React.Component);
|
|
2201
2203
|
|
|
2202
2204
|
CSSTransition.defaultProps = {
|
|
2203
2205
|
classNames: ''
|
|
@@ -2281,7 +2283,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2281
2283
|
*
|
|
2282
2284
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
2283
2285
|
*/
|
|
2284
|
-
onEnter:
|
|
2286
|
+
onEnter: PropTypes.func,
|
|
2285
2287
|
|
|
2286
2288
|
/**
|
|
2287
2289
|
* A `<Transition>` callback fired immediately after the 'enter-active' or
|
|
@@ -2291,7 +2293,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2291
2293
|
*
|
|
2292
2294
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
2293
2295
|
*/
|
|
2294
|
-
onEntering:
|
|
2296
|
+
onEntering: PropTypes.func,
|
|
2295
2297
|
|
|
2296
2298
|
/**
|
|
2297
2299
|
* A `<Transition>` callback fired immediately after the 'enter' or
|
|
@@ -2301,7 +2303,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2301
2303
|
*
|
|
2302
2304
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
2303
2305
|
*/
|
|
2304
|
-
onEntered:
|
|
2306
|
+
onEntered: PropTypes.func,
|
|
2305
2307
|
|
|
2306
2308
|
/**
|
|
2307
2309
|
* A `<Transition>` callback fired immediately after the 'exit' class is
|
|
@@ -2311,7 +2313,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2311
2313
|
*
|
|
2312
2314
|
* @type Function(node: HtmlElement)
|
|
2313
2315
|
*/
|
|
2314
|
-
onExit:
|
|
2316
|
+
onExit: PropTypes.func,
|
|
2315
2317
|
|
|
2316
2318
|
/**
|
|
2317
2319
|
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
|
|
@@ -2320,7 +2322,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2320
2322
|
*
|
|
2321
2323
|
* @type Function(node: HtmlElement)
|
|
2322
2324
|
*/
|
|
2323
|
-
onExiting:
|
|
2325
|
+
onExiting: PropTypes.func,
|
|
2324
2326
|
|
|
2325
2327
|
/**
|
|
2326
2328
|
* A `<Transition>` callback fired immediately after the 'exit' classes
|
|
@@ -2330,720 +2332,15 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
|
|
|
2330
2332
|
*
|
|
2331
2333
|
* @type Function(node: HtmlElement)
|
|
2332
2334
|
*/
|
|
2333
|
-
onExited:
|
|
2335
|
+
onExited: PropTypes.func
|
|
2334
2336
|
}) : {};
|
|
2335
2337
|
|
|
2336
|
-
function _assertThisInitialized(e) {
|
|
2337
|
-
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
2338
|
-
return e;
|
|
2339
|
-
}
|
|
2340
|
-
|
|
2341
|
-
/**
|
|
2342
|
-
* Given `this.props.children`, return an object mapping key to child.
|
|
2343
|
-
*
|
|
2344
|
-
* @param {*} children `this.props.children`
|
|
2345
|
-
* @return {object} Mapping of key to child
|
|
2346
|
-
*/
|
|
2347
|
-
|
|
2348
|
-
function getChildMapping(children, mapFn) {
|
|
2349
|
-
var mapper = function mapper(child) {
|
|
2350
|
-
return mapFn && React.isValidElement(child) ? mapFn(child) : child;
|
|
2351
|
-
};
|
|
2352
|
-
|
|
2353
|
-
var result = Object.create(null);
|
|
2354
|
-
if (children) React.Children.map(children, function (c) {
|
|
2355
|
-
return c;
|
|
2356
|
-
}).forEach(function (child) {
|
|
2357
|
-
// run the map function here instead so that the key is the computed one
|
|
2358
|
-
result[child.key] = mapper(child);
|
|
2359
|
-
});
|
|
2360
|
-
return result;
|
|
2361
|
-
}
|
|
2362
|
-
/**
|
|
2363
|
-
* When you're adding or removing children some may be added or removed in the
|
|
2364
|
-
* same render pass. We want to show *both* since we want to simultaneously
|
|
2365
|
-
* animate elements in and out. This function takes a previous set of keys
|
|
2366
|
-
* and a new set of keys and merges them with its best guess of the correct
|
|
2367
|
-
* ordering. In the future we may expose some of the utilities in
|
|
2368
|
-
* ReactMultiChild to make this easy, but for now React itself does not
|
|
2369
|
-
* directly have this concept of the union of prevChildren and nextChildren
|
|
2370
|
-
* so we implement it here.
|
|
2371
|
-
*
|
|
2372
|
-
* @param {object} prev prev children as returned from
|
|
2373
|
-
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
2374
|
-
* @param {object} next next children as returned from
|
|
2375
|
-
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
2376
|
-
* @return {object} a key set that contains all keys in `prev` and all keys
|
|
2377
|
-
* in `next` in a reasonable order.
|
|
2378
|
-
*/
|
|
2379
|
-
|
|
2380
|
-
function mergeChildMappings(prev, next) {
|
|
2381
|
-
prev = prev || {};
|
|
2382
|
-
next = next || {};
|
|
2383
|
-
|
|
2384
|
-
function getValueForKey(key) {
|
|
2385
|
-
return key in next ? next[key] : prev[key];
|
|
2386
|
-
} // For each key of `next`, the list of keys to insert before that key in
|
|
2387
|
-
// the combined list
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
var nextKeysPending = Object.create(null);
|
|
2391
|
-
var pendingKeys = [];
|
|
2392
|
-
|
|
2393
|
-
for (var prevKey in prev) {
|
|
2394
|
-
if (prevKey in next) {
|
|
2395
|
-
if (pendingKeys.length) {
|
|
2396
|
-
nextKeysPending[prevKey] = pendingKeys;
|
|
2397
|
-
pendingKeys = [];
|
|
2398
|
-
}
|
|
2399
|
-
} else {
|
|
2400
|
-
pendingKeys.push(prevKey);
|
|
2401
|
-
}
|
|
2402
|
-
}
|
|
2403
|
-
|
|
2404
|
-
var i;
|
|
2405
|
-
var childMapping = {};
|
|
2406
|
-
|
|
2407
|
-
for (var nextKey in next) {
|
|
2408
|
-
if (nextKeysPending[nextKey]) {
|
|
2409
|
-
for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
|
2410
|
-
var pendingNextKey = nextKeysPending[nextKey][i];
|
|
2411
|
-
childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
|
2412
|
-
}
|
|
2413
|
-
}
|
|
2414
|
-
|
|
2415
|
-
childMapping[nextKey] = getValueForKey(nextKey);
|
|
2416
|
-
} // Finally, add the keys which didn't appear before any key in `next`
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
for (i = 0; i < pendingKeys.length; i++) {
|
|
2420
|
-
childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
|
2421
|
-
}
|
|
2422
|
-
|
|
2423
|
-
return childMapping;
|
|
2424
|
-
}
|
|
2425
|
-
|
|
2426
|
-
function getProp(child, prop, props) {
|
|
2427
|
-
return props[prop] != null ? props[prop] : child.props[prop];
|
|
2428
|
-
}
|
|
2429
|
-
|
|
2430
|
-
function getInitialChildMapping(props, onExited) {
|
|
2431
|
-
return getChildMapping(props.children, function (child) {
|
|
2432
|
-
return React.cloneElement(child, {
|
|
2433
|
-
onExited: onExited.bind(null, child),
|
|
2434
|
-
in: true,
|
|
2435
|
-
appear: getProp(child, 'appear', props),
|
|
2436
|
-
enter: getProp(child, 'enter', props),
|
|
2437
|
-
exit: getProp(child, 'exit', props)
|
|
2438
|
-
});
|
|
2439
|
-
});
|
|
2440
|
-
}
|
|
2441
|
-
function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
|
2442
|
-
var nextChildMapping = getChildMapping(nextProps.children);
|
|
2443
|
-
var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
|
2444
|
-
Object.keys(children).forEach(function (key) {
|
|
2445
|
-
var child = children[key];
|
|
2446
|
-
if (!React.isValidElement(child)) return;
|
|
2447
|
-
var hasPrev = (key in prevChildMapping);
|
|
2448
|
-
var hasNext = (key in nextChildMapping);
|
|
2449
|
-
var prevChild = prevChildMapping[key];
|
|
2450
|
-
var isLeaving = React.isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)
|
|
2451
|
-
|
|
2452
|
-
if (hasNext && (!hasPrev || isLeaving)) {
|
|
2453
|
-
// console.log('entering', key)
|
|
2454
|
-
children[key] = React.cloneElement(child, {
|
|
2455
|
-
onExited: onExited.bind(null, child),
|
|
2456
|
-
in: true,
|
|
2457
|
-
exit: getProp(child, 'exit', nextProps),
|
|
2458
|
-
enter: getProp(child, 'enter', nextProps)
|
|
2459
|
-
});
|
|
2460
|
-
} else if (!hasNext && hasPrev && !isLeaving) {
|
|
2461
|
-
// item is old (exiting)
|
|
2462
|
-
// console.log('leaving', key)
|
|
2463
|
-
children[key] = React.cloneElement(child, {
|
|
2464
|
-
in: false
|
|
2465
|
-
});
|
|
2466
|
-
} else if (hasNext && hasPrev && React.isValidElement(prevChild)) {
|
|
2467
|
-
// item hasn't changed transition states
|
|
2468
|
-
// copy over the last transition props;
|
|
2469
|
-
// console.log('unchanged', key)
|
|
2470
|
-
children[key] = React.cloneElement(child, {
|
|
2471
|
-
onExited: onExited.bind(null, child),
|
|
2472
|
-
in: prevChild.props.in,
|
|
2473
|
-
exit: getProp(child, 'exit', nextProps),
|
|
2474
|
-
enter: getProp(child, 'enter', nextProps)
|
|
2475
|
-
});
|
|
2476
|
-
}
|
|
2477
|
-
});
|
|
2478
|
-
return children;
|
|
2479
|
-
}
|
|
2480
|
-
|
|
2481
|
-
var values = Object.values || function (obj) {
|
|
2482
|
-
return Object.keys(obj).map(function (k) {
|
|
2483
|
-
return obj[k];
|
|
2484
|
-
});
|
|
2485
|
-
};
|
|
2486
|
-
|
|
2487
|
-
var defaultProps = {
|
|
2488
|
-
component: 'div',
|
|
2489
|
-
childFactory: function childFactory(child) {
|
|
2490
|
-
return child;
|
|
2491
|
-
}
|
|
2492
|
-
};
|
|
2493
|
-
/**
|
|
2494
|
-
* The `<TransitionGroup>` component manages a set of transition components
|
|
2495
|
-
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
|
|
2496
|
-
* components, `<TransitionGroup>` is a state machine for managing the mounting
|
|
2497
|
-
* and unmounting of components over time.
|
|
2498
|
-
*
|
|
2499
|
-
* Consider the example below. As items are removed or added to the TodoList the
|
|
2500
|
-
* `in` prop is toggled automatically by the `<TransitionGroup>`.
|
|
2501
|
-
*
|
|
2502
|
-
* Note that `<TransitionGroup>` does not define any animation behavior!
|
|
2503
|
-
* Exactly _how_ a list item animates is up to the individual transition
|
|
2504
|
-
* component. This means you can mix and match animations across different list
|
|
2505
|
-
* items.
|
|
2506
|
-
*/
|
|
2507
|
-
|
|
2508
|
-
var TransitionGroup = /*#__PURE__*/function (_React$Component) {
|
|
2509
|
-
_inheritsLoose(TransitionGroup, _React$Component);
|
|
2510
|
-
|
|
2511
|
-
function TransitionGroup(props, context) {
|
|
2512
|
-
var _this;
|
|
2513
|
-
|
|
2514
|
-
_this = _React$Component.call(this, props, context) || this;
|
|
2515
|
-
|
|
2516
|
-
var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
_this.state = {
|
|
2520
|
-
contextValue: {
|
|
2521
|
-
isMounting: true
|
|
2522
|
-
},
|
|
2523
|
-
handleExited: handleExited,
|
|
2524
|
-
firstRender: true
|
|
2525
|
-
};
|
|
2526
|
-
return _this;
|
|
2527
|
-
}
|
|
2528
|
-
|
|
2529
|
-
var _proto = TransitionGroup.prototype;
|
|
2530
|
-
|
|
2531
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
2532
|
-
this.mounted = true;
|
|
2533
|
-
this.setState({
|
|
2534
|
-
contextValue: {
|
|
2535
|
-
isMounting: false
|
|
2536
|
-
}
|
|
2537
|
-
});
|
|
2538
|
-
};
|
|
2539
|
-
|
|
2540
|
-
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
2541
|
-
this.mounted = false;
|
|
2542
|
-
};
|
|
2543
|
-
|
|
2544
|
-
TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
|
2545
|
-
var prevChildMapping = _ref.children,
|
|
2546
|
-
handleExited = _ref.handleExited,
|
|
2547
|
-
firstRender = _ref.firstRender;
|
|
2548
|
-
return {
|
|
2549
|
-
children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
|
|
2550
|
-
firstRender: false
|
|
2551
|
-
};
|
|
2552
|
-
} // node is `undefined` when user provided `nodeRef` prop
|
|
2553
|
-
;
|
|
2554
|
-
|
|
2555
|
-
_proto.handleExited = function handleExited(child, node) {
|
|
2556
|
-
var currentChildMapping = getChildMapping(this.props.children);
|
|
2557
|
-
if (child.key in currentChildMapping) return;
|
|
2558
|
-
|
|
2559
|
-
if (child.props.onExited) {
|
|
2560
|
-
child.props.onExited(node);
|
|
2561
|
-
}
|
|
2562
|
-
|
|
2563
|
-
if (this.mounted) {
|
|
2564
|
-
this.setState(function (state) {
|
|
2565
|
-
var children = _extends({}, state.children);
|
|
2566
|
-
|
|
2567
|
-
delete children[child.key];
|
|
2568
|
-
return {
|
|
2569
|
-
children: children
|
|
2570
|
-
};
|
|
2571
|
-
});
|
|
2572
|
-
}
|
|
2573
|
-
};
|
|
2574
|
-
|
|
2575
|
-
_proto.render = function render() {
|
|
2576
|
-
var _this$props = this.props,
|
|
2577
|
-
Component = _this$props.component,
|
|
2578
|
-
childFactory = _this$props.childFactory,
|
|
2579
|
-
props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
|
2580
|
-
|
|
2581
|
-
var contextValue = this.state.contextValue;
|
|
2582
|
-
var children = values(this.state.children).map(childFactory);
|
|
2583
|
-
delete props.appear;
|
|
2584
|
-
delete props.enter;
|
|
2585
|
-
delete props.exit;
|
|
2586
|
-
|
|
2587
|
-
if (Component === null) {
|
|
2588
|
-
return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
|
|
2589
|
-
value: contextValue
|
|
2590
|
-
}, children);
|
|
2591
|
-
}
|
|
2592
|
-
|
|
2593
|
-
return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
|
|
2594
|
-
value: contextValue
|
|
2595
|
-
}, /*#__PURE__*/React__default["default"].createElement(Component, props, children));
|
|
2596
|
-
};
|
|
2597
|
-
|
|
2598
|
-
return TransitionGroup;
|
|
2599
|
-
}(React__default["default"].Component);
|
|
2600
|
-
|
|
2601
|
-
TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
2602
|
-
/**
|
|
2603
|
-
* `<TransitionGroup>` renders a `<div>` by default. You can change this
|
|
2604
|
-
* behavior by providing a `component` prop.
|
|
2605
|
-
* If you use React v16+ and would like to avoid a wrapping `<div>` element
|
|
2606
|
-
* you can pass in `component={null}`. This is useful if the wrapping div
|
|
2607
|
-
* borks your css styles.
|
|
2608
|
-
*/
|
|
2609
|
-
component: propTypes.exports.any,
|
|
2610
|
-
|
|
2611
|
-
/**
|
|
2612
|
-
* A set of `<Transition>` components, that are toggled `in` and out as they
|
|
2613
|
-
* leave. the `<TransitionGroup>` will inject specific transition props, so
|
|
2614
|
-
* remember to spread them through if you are wrapping the `<Transition>` as
|
|
2615
|
-
* with our `<Fade>` example.
|
|
2616
|
-
*
|
|
2617
|
-
* While this component is meant for multiple `Transition` or `CSSTransition`
|
|
2618
|
-
* children, sometimes you may want to have a single transition child with
|
|
2619
|
-
* content that you want to be transitioned out and in when you change it
|
|
2620
|
-
* (e.g. routes, images etc.) In that case you can change the `key` prop of
|
|
2621
|
-
* the transition child as you change its content, this will cause
|
|
2622
|
-
* `TransitionGroup` to transition the child out and back in.
|
|
2623
|
-
*/
|
|
2624
|
-
children: propTypes.exports.node,
|
|
2625
|
-
|
|
2626
|
-
/**
|
|
2627
|
-
* A convenience prop that enables or disables appear animations
|
|
2628
|
-
* for all children. Note that specifying this will override any defaults set
|
|
2629
|
-
* on individual children Transitions.
|
|
2630
|
-
*/
|
|
2631
|
-
appear: propTypes.exports.bool,
|
|
2632
|
-
|
|
2633
|
-
/**
|
|
2634
|
-
* A convenience prop that enables or disables enter animations
|
|
2635
|
-
* for all children. Note that specifying this will override any defaults set
|
|
2636
|
-
* on individual children Transitions.
|
|
2637
|
-
*/
|
|
2638
|
-
enter: propTypes.exports.bool,
|
|
2639
|
-
|
|
2640
|
-
/**
|
|
2641
|
-
* A convenience prop that enables or disables exit animations
|
|
2642
|
-
* for all children. Note that specifying this will override any defaults set
|
|
2643
|
-
* on individual children Transitions.
|
|
2644
|
-
*/
|
|
2645
|
-
exit: propTypes.exports.bool,
|
|
2646
|
-
|
|
2647
|
-
/**
|
|
2648
|
-
* You may need to apply reactive updates to a child as it is exiting.
|
|
2649
|
-
* This is generally done by using `cloneElement` however in the case of an exiting
|
|
2650
|
-
* child the element has already been removed and not accessible to the consumer.
|
|
2651
|
-
*
|
|
2652
|
-
* If you do need to update a child as it leaves you can provide a `childFactory`
|
|
2653
|
-
* to wrap every child, even the ones that are leaving.
|
|
2654
|
-
*
|
|
2655
|
-
* @type Function(child: ReactElement) -> ReactElement
|
|
2656
|
-
*/
|
|
2657
|
-
childFactory: propTypes.exports.func
|
|
2658
|
-
} : {};
|
|
2659
|
-
TransitionGroup.defaultProps = defaultProps;
|
|
2660
|
-
|
|
2661
|
-
/**
|
|
2662
|
-
* The `<ReplaceTransition>` component is a specialized `Transition` component
|
|
2663
|
-
* that animates between two children.
|
|
2664
|
-
*
|
|
2665
|
-
* ```jsx
|
|
2666
|
-
* <ReplaceTransition in>
|
|
2667
|
-
* <Fade><div>I appear first</div></Fade>
|
|
2668
|
-
* <Fade><div>I replace the above</div></Fade>
|
|
2669
|
-
* </ReplaceTransition>
|
|
2670
|
-
* ```
|
|
2671
|
-
*/
|
|
2672
|
-
|
|
2673
|
-
var ReplaceTransition = /*#__PURE__*/function (_React$Component) {
|
|
2674
|
-
_inheritsLoose(ReplaceTransition, _React$Component);
|
|
2675
|
-
|
|
2676
|
-
function ReplaceTransition() {
|
|
2677
|
-
var _this;
|
|
2678
|
-
|
|
2679
|
-
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2680
|
-
_args[_key] = arguments[_key];
|
|
2681
|
-
}
|
|
2682
|
-
|
|
2683
|
-
_this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
|
|
2684
|
-
|
|
2685
|
-
_this.handleEnter = function () {
|
|
2686
|
-
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
2687
|
-
args[_key2] = arguments[_key2];
|
|
2688
|
-
}
|
|
2689
|
-
|
|
2690
|
-
return _this.handleLifecycle('onEnter', 0, args);
|
|
2691
|
-
};
|
|
2692
|
-
|
|
2693
|
-
_this.handleEntering = function () {
|
|
2694
|
-
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
2695
|
-
args[_key3] = arguments[_key3];
|
|
2696
|
-
}
|
|
2697
|
-
|
|
2698
|
-
return _this.handleLifecycle('onEntering', 0, args);
|
|
2699
|
-
};
|
|
2700
|
-
|
|
2701
|
-
_this.handleEntered = function () {
|
|
2702
|
-
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
2703
|
-
args[_key4] = arguments[_key4];
|
|
2704
|
-
}
|
|
2705
|
-
|
|
2706
|
-
return _this.handleLifecycle('onEntered', 0, args);
|
|
2707
|
-
};
|
|
2708
|
-
|
|
2709
|
-
_this.handleExit = function () {
|
|
2710
|
-
for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
|
|
2711
|
-
args[_key5] = arguments[_key5];
|
|
2712
|
-
}
|
|
2713
|
-
|
|
2714
|
-
return _this.handleLifecycle('onExit', 1, args);
|
|
2715
|
-
};
|
|
2716
|
-
|
|
2717
|
-
_this.handleExiting = function () {
|
|
2718
|
-
for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
|
|
2719
|
-
args[_key6] = arguments[_key6];
|
|
2720
|
-
}
|
|
2721
|
-
|
|
2722
|
-
return _this.handleLifecycle('onExiting', 1, args);
|
|
2723
|
-
};
|
|
2724
|
-
|
|
2725
|
-
_this.handleExited = function () {
|
|
2726
|
-
for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
|
|
2727
|
-
args[_key7] = arguments[_key7];
|
|
2728
|
-
}
|
|
2729
|
-
|
|
2730
|
-
return _this.handleLifecycle('onExited', 1, args);
|
|
2731
|
-
};
|
|
2732
|
-
|
|
2733
|
-
return _this;
|
|
2734
|
-
}
|
|
2735
|
-
|
|
2736
|
-
var _proto = ReplaceTransition.prototype;
|
|
2737
|
-
|
|
2738
|
-
_proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {
|
|
2739
|
-
var _child$props;
|
|
2740
|
-
|
|
2741
|
-
var children = this.props.children;
|
|
2742
|
-
var child = React__default["default"].Children.toArray(children)[idx];
|
|
2743
|
-
if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);
|
|
2744
|
-
|
|
2745
|
-
if (this.props[handler]) {
|
|
2746
|
-
var maybeNode = child.props.nodeRef ? undefined : ReactDOM__default["default"].findDOMNode(this);
|
|
2747
|
-
this.props[handler](maybeNode);
|
|
2748
|
-
}
|
|
2749
|
-
};
|
|
2750
|
-
|
|
2751
|
-
_proto.render = function render() {
|
|
2752
|
-
var _this$props = this.props,
|
|
2753
|
-
children = _this$props.children,
|
|
2754
|
-
inProp = _this$props.in,
|
|
2755
|
-
props = _objectWithoutPropertiesLoose(_this$props, ["children", "in"]);
|
|
2756
|
-
|
|
2757
|
-
var _React$Children$toArr = React__default["default"].Children.toArray(children),
|
|
2758
|
-
first = _React$Children$toArr[0],
|
|
2759
|
-
second = _React$Children$toArr[1];
|
|
2760
|
-
|
|
2761
|
-
delete props.onEnter;
|
|
2762
|
-
delete props.onEntering;
|
|
2763
|
-
delete props.onEntered;
|
|
2764
|
-
delete props.onExit;
|
|
2765
|
-
delete props.onExiting;
|
|
2766
|
-
delete props.onExited;
|
|
2767
|
-
return /*#__PURE__*/React__default["default"].createElement(TransitionGroup, props, inProp ? React__default["default"].cloneElement(first, {
|
|
2768
|
-
key: 'first',
|
|
2769
|
-
onEnter: this.handleEnter,
|
|
2770
|
-
onEntering: this.handleEntering,
|
|
2771
|
-
onEntered: this.handleEntered
|
|
2772
|
-
}) : React__default["default"].cloneElement(second, {
|
|
2773
|
-
key: 'second',
|
|
2774
|
-
onEnter: this.handleExit,
|
|
2775
|
-
onEntering: this.handleExiting,
|
|
2776
|
-
onEntered: this.handleExited
|
|
2777
|
-
}));
|
|
2778
|
-
};
|
|
2779
|
-
|
|
2780
|
-
return ReplaceTransition;
|
|
2781
|
-
}(React__default["default"].Component);
|
|
2782
|
-
|
|
2783
|
-
ReplaceTransition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
2784
|
-
in: propTypes.exports.bool.isRequired,
|
|
2785
|
-
children: function children(props, propName) {
|
|
2786
|
-
if (React__default["default"].Children.count(props[propName]) !== 2) return new Error("\"" + propName + "\" must be exactly two transition components.");
|
|
2787
|
-
return null;
|
|
2788
|
-
}
|
|
2789
|
-
} : {};
|
|
2790
|
-
|
|
2791
|
-
var _leaveRenders, _enterRenders;
|
|
2792
|
-
|
|
2793
|
-
function areChildrenDifferent(oldChildren, newChildren) {
|
|
2794
|
-
if (oldChildren === newChildren) return false;
|
|
2795
|
-
|
|
2796
|
-
if (React__default["default"].isValidElement(oldChildren) && React__default["default"].isValidElement(newChildren) && oldChildren.key != null && oldChildren.key === newChildren.key) {
|
|
2797
|
-
return false;
|
|
2798
|
-
}
|
|
2799
|
-
|
|
2800
|
-
return true;
|
|
2801
|
-
}
|
|
2802
|
-
/**
|
|
2803
|
-
* Enum of modes for SwitchTransition component
|
|
2804
|
-
* @enum { string }
|
|
2805
|
-
*/
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
var modes = {
|
|
2809
|
-
out: 'out-in',
|
|
2810
|
-
in: 'in-out'
|
|
2811
|
-
};
|
|
2812
|
-
|
|
2813
|
-
var callHook = function callHook(element, name, cb) {
|
|
2814
|
-
return function () {
|
|
2815
|
-
var _element$props;
|
|
2816
|
-
|
|
2817
|
-
element.props[name] && (_element$props = element.props)[name].apply(_element$props, arguments);
|
|
2818
|
-
cb();
|
|
2819
|
-
};
|
|
2820
|
-
};
|
|
2821
|
-
|
|
2822
|
-
var leaveRenders = (_leaveRenders = {}, _leaveRenders[modes.out] = function (_ref) {
|
|
2823
|
-
var current = _ref.current,
|
|
2824
|
-
changeState = _ref.changeState;
|
|
2825
|
-
return React__default["default"].cloneElement(current, {
|
|
2826
|
-
in: false,
|
|
2827
|
-
onExited: callHook(current, 'onExited', function () {
|
|
2828
|
-
changeState(ENTERING, null);
|
|
2829
|
-
})
|
|
2830
|
-
});
|
|
2831
|
-
}, _leaveRenders[modes.in] = function (_ref2) {
|
|
2832
|
-
var current = _ref2.current,
|
|
2833
|
-
changeState = _ref2.changeState,
|
|
2834
|
-
children = _ref2.children;
|
|
2835
|
-
return [current, React__default["default"].cloneElement(children, {
|
|
2836
|
-
in: true,
|
|
2837
|
-
onEntered: callHook(children, 'onEntered', function () {
|
|
2838
|
-
changeState(ENTERING);
|
|
2839
|
-
})
|
|
2840
|
-
})];
|
|
2841
|
-
}, _leaveRenders);
|
|
2842
|
-
var enterRenders = (_enterRenders = {}, _enterRenders[modes.out] = function (_ref3) {
|
|
2843
|
-
var children = _ref3.children,
|
|
2844
|
-
changeState = _ref3.changeState;
|
|
2845
|
-
return React__default["default"].cloneElement(children, {
|
|
2846
|
-
in: true,
|
|
2847
|
-
onEntered: callHook(children, 'onEntered', function () {
|
|
2848
|
-
changeState(ENTERED, React__default["default"].cloneElement(children, {
|
|
2849
|
-
in: true
|
|
2850
|
-
}));
|
|
2851
|
-
})
|
|
2852
|
-
});
|
|
2853
|
-
}, _enterRenders[modes.in] = function (_ref4) {
|
|
2854
|
-
var current = _ref4.current,
|
|
2855
|
-
children = _ref4.children,
|
|
2856
|
-
changeState = _ref4.changeState;
|
|
2857
|
-
return [React__default["default"].cloneElement(current, {
|
|
2858
|
-
in: false,
|
|
2859
|
-
onExited: callHook(current, 'onExited', function () {
|
|
2860
|
-
changeState(ENTERED, React__default["default"].cloneElement(children, {
|
|
2861
|
-
in: true
|
|
2862
|
-
}));
|
|
2863
|
-
})
|
|
2864
|
-
}), React__default["default"].cloneElement(children, {
|
|
2865
|
-
in: true
|
|
2866
|
-
})];
|
|
2867
|
-
}, _enterRenders);
|
|
2868
|
-
/**
|
|
2869
|
-
* A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes).
|
|
2870
|
-
* You can use it when you want to control the render between state transitions.
|
|
2871
|
-
* Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them.
|
|
2872
|
-
*
|
|
2873
|
-
* If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child.
|
|
2874
|
-
* If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child.
|
|
2875
|
-
*
|
|
2876
|
-
* **Note**: If you want the animation to happen simultaneously
|
|
2877
|
-
* (that is, to have the old child removed and a new child inserted **at the same time**),
|
|
2878
|
-
* you should use
|
|
2879
|
-
* [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group)
|
|
2880
|
-
* instead.
|
|
2881
|
-
*
|
|
2882
|
-
* ```jsx
|
|
2883
|
-
* function App() {
|
|
2884
|
-
* const [state, setState] = useState(false);
|
|
2885
|
-
* return (
|
|
2886
|
-
* <SwitchTransition>
|
|
2887
|
-
* <CSSTransition
|
|
2888
|
-
* key={state ? "Goodbye, world!" : "Hello, world!"}
|
|
2889
|
-
* addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
|
|
2890
|
-
* classNames='fade'
|
|
2891
|
-
* >
|
|
2892
|
-
* <button onClick={() => setState(state => !state)}>
|
|
2893
|
-
* {state ? "Goodbye, world!" : "Hello, world!"}
|
|
2894
|
-
* </button>
|
|
2895
|
-
* </CSSTransition>
|
|
2896
|
-
* </SwitchTransition>
|
|
2897
|
-
* );
|
|
2898
|
-
* }
|
|
2899
|
-
* ```
|
|
2900
|
-
*
|
|
2901
|
-
* ```css
|
|
2902
|
-
* .fade-enter{
|
|
2903
|
-
* opacity: 0;
|
|
2904
|
-
* }
|
|
2905
|
-
* .fade-exit{
|
|
2906
|
-
* opacity: 1;
|
|
2907
|
-
* }
|
|
2908
|
-
* .fade-enter-active{
|
|
2909
|
-
* opacity: 1;
|
|
2910
|
-
* }
|
|
2911
|
-
* .fade-exit-active{
|
|
2912
|
-
* opacity: 0;
|
|
2913
|
-
* }
|
|
2914
|
-
* .fade-enter-active,
|
|
2915
|
-
* .fade-exit-active{
|
|
2916
|
-
* transition: opacity 500ms;
|
|
2917
|
-
* }
|
|
2918
|
-
* ```
|
|
2919
|
-
*/
|
|
2920
|
-
|
|
2921
|
-
var SwitchTransition = /*#__PURE__*/function (_React$Component) {
|
|
2922
|
-
_inheritsLoose(SwitchTransition, _React$Component);
|
|
2923
|
-
|
|
2924
|
-
function SwitchTransition() {
|
|
2925
|
-
var _this;
|
|
2926
|
-
|
|
2927
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2928
|
-
args[_key] = arguments[_key];
|
|
2929
|
-
}
|
|
2930
|
-
|
|
2931
|
-
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
2932
|
-
_this.state = {
|
|
2933
|
-
status: ENTERED,
|
|
2934
|
-
current: null
|
|
2935
|
-
};
|
|
2936
|
-
_this.appeared = false;
|
|
2937
|
-
|
|
2938
|
-
_this.changeState = function (status, current) {
|
|
2939
|
-
if (current === void 0) {
|
|
2940
|
-
current = _this.state.current;
|
|
2941
|
-
}
|
|
2942
|
-
|
|
2943
|
-
_this.setState({
|
|
2944
|
-
status: status,
|
|
2945
|
-
current: current
|
|
2946
|
-
});
|
|
2947
|
-
};
|
|
2948
|
-
|
|
2949
|
-
return _this;
|
|
2950
|
-
}
|
|
2951
|
-
|
|
2952
|
-
var _proto = SwitchTransition.prototype;
|
|
2953
|
-
|
|
2954
|
-
_proto.componentDidMount = function componentDidMount() {
|
|
2955
|
-
this.appeared = true;
|
|
2956
|
-
};
|
|
2957
|
-
|
|
2958
|
-
SwitchTransition.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
|
2959
|
-
if (props.children == null) {
|
|
2960
|
-
return {
|
|
2961
|
-
current: null
|
|
2962
|
-
};
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
if (state.status === ENTERING && props.mode === modes.in) {
|
|
2966
|
-
return {
|
|
2967
|
-
status: ENTERING
|
|
2968
|
-
};
|
|
2969
|
-
}
|
|
2970
|
-
|
|
2971
|
-
if (state.current && areChildrenDifferent(state.current, props.children)) {
|
|
2972
|
-
return {
|
|
2973
|
-
status: EXITING
|
|
2974
|
-
};
|
|
2975
|
-
}
|
|
2976
|
-
|
|
2977
|
-
return {
|
|
2978
|
-
current: React__default["default"].cloneElement(props.children, {
|
|
2979
|
-
in: true
|
|
2980
|
-
})
|
|
2981
|
-
};
|
|
2982
|
-
};
|
|
2983
|
-
|
|
2984
|
-
_proto.render = function render() {
|
|
2985
|
-
var _this$props = this.props,
|
|
2986
|
-
children = _this$props.children,
|
|
2987
|
-
mode = _this$props.mode,
|
|
2988
|
-
_this$state = this.state,
|
|
2989
|
-
status = _this$state.status,
|
|
2990
|
-
current = _this$state.current;
|
|
2991
|
-
var data = {
|
|
2992
|
-
children: children,
|
|
2993
|
-
current: current,
|
|
2994
|
-
changeState: this.changeState,
|
|
2995
|
-
status: status
|
|
2996
|
-
};
|
|
2997
|
-
var component;
|
|
2998
|
-
|
|
2999
|
-
switch (status) {
|
|
3000
|
-
case ENTERING:
|
|
3001
|
-
component = enterRenders[mode](data);
|
|
3002
|
-
break;
|
|
3003
|
-
|
|
3004
|
-
case EXITING:
|
|
3005
|
-
component = leaveRenders[mode](data);
|
|
3006
|
-
break;
|
|
3007
|
-
|
|
3008
|
-
case ENTERED:
|
|
3009
|
-
component = current;
|
|
3010
|
-
}
|
|
3011
|
-
|
|
3012
|
-
return /*#__PURE__*/React__default["default"].createElement(TransitionGroupContext.Provider, {
|
|
3013
|
-
value: {
|
|
3014
|
-
isMounting: !this.appeared
|
|
3015
|
-
}
|
|
3016
|
-
}, component);
|
|
3017
|
-
};
|
|
3018
|
-
|
|
3019
|
-
return SwitchTransition;
|
|
3020
|
-
}(React__default["default"].Component);
|
|
3021
|
-
|
|
3022
|
-
SwitchTransition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
3023
|
-
/**
|
|
3024
|
-
* Transition modes.
|
|
3025
|
-
* `out-in`: Current element transitions out first, then when complete, the new element transitions in.
|
|
3026
|
-
* `in-out`: New element transitions in first, then when complete, the current element transitions out.
|
|
3027
|
-
*
|
|
3028
|
-
* @type {'out-in'|'in-out'}
|
|
3029
|
-
*/
|
|
3030
|
-
mode: propTypes.exports.oneOf([modes.in, modes.out]),
|
|
3031
|
-
|
|
3032
|
-
/**
|
|
3033
|
-
* Any `Transition` or `CSSTransition` component.
|
|
3034
|
-
*/
|
|
3035
|
-
children: propTypes.exports.oneOfType([propTypes.exports.element.isRequired])
|
|
3036
|
-
} : {};
|
|
3037
|
-
SwitchTransition.defaultProps = {
|
|
3038
|
-
mode: modes.out
|
|
3039
|
-
};
|
|
3040
|
-
|
|
3041
2338
|
const DRAWER_ITEM_MIN_RESIZE_WIDTH = 200;
|
|
3042
2339
|
const DRAWER_ITEM_MAX_RESIZE_WIDTH = 800;
|
|
3043
2340
|
const DRAWER_ITEM_INITIAL_RESIZE_WIDTH = 400;
|
|
3044
2341
|
function getEventClientX(e) {
|
|
3045
2342
|
var _a, _b;
|
|
3046
|
-
return 'touches' in e ? (_b = (_a = e.touches[0]) === null || _a ===
|
|
2343
|
+
return 'touches' in e ? ((_b = (_a = e.touches[0]) === null || _a === undefined ? undefined : _a.clientX) !== null && _b !== undefined ? _b : 0) : e.clientX;
|
|
3047
2344
|
}
|
|
3048
2345
|
function useResizeHandlers({ onStart, onMove, onEnd }) {
|
|
3049
2346
|
const initialXPosition = React__namespace.useRef(0);
|
|
@@ -3090,17 +2387,17 @@ function useResizableDrawerItem(params) {
|
|
|
3090
2387
|
const { direction, width, minResizeWidth = DRAWER_ITEM_MIN_RESIZE_WIDTH, maxResizeWidth = DRAWER_ITEM_MAX_RESIZE_WIDTH, onResizeStart, onResize, } = params;
|
|
3091
2388
|
const [isResizing, setIsResizing] = React__namespace.useState(false);
|
|
3092
2389
|
const [resizeDelta, setResizeDelta] = React__namespace.useState(0);
|
|
3093
|
-
const [internalWidth, setInternalWidth] = React__namespace.useState(width !== null && width !==
|
|
2390
|
+
const [internalWidth, setInternalWidth] = React__namespace.useState(width !== null && width !== undefined ? width : DRAWER_ITEM_INITIAL_RESIZE_WIDTH);
|
|
3094
2391
|
const getClampedWidth = React__namespace.useCallback((width) => Math.min(Math.max(width, minResizeWidth), maxResizeWidth), [minResizeWidth, maxResizeWidth]);
|
|
3095
2392
|
const getResizedWidth = React__namespace.useCallback((delta) => {
|
|
3096
2393
|
const signedDelta = direction === 'right' ? delta : -delta;
|
|
3097
|
-
const newWidth = (width !== null && width !==
|
|
2394
|
+
const newWidth = (width !== null && width !== undefined ? width : internalWidth) + signedDelta;
|
|
3098
2395
|
return getClampedWidth(newWidth);
|
|
3099
2396
|
}, [width, internalWidth, direction, getClampedWidth]);
|
|
3100
2397
|
const onStart = React__namespace.useCallback(() => {
|
|
3101
2398
|
setIsResizing(true);
|
|
3102
2399
|
setResizeDelta(0);
|
|
3103
|
-
onResizeStart === null || onResizeStart ===
|
|
2400
|
+
onResizeStart === null || onResizeStart === undefined ? undefined : onResizeStart();
|
|
3104
2401
|
}, [onResizeStart]);
|
|
3105
2402
|
const onMove = React__namespace.useCallback((delta) => {
|
|
3106
2403
|
setResizeDelta(delta);
|
|
@@ -3109,11 +2406,11 @@ function useResizableDrawerItem(params) {
|
|
|
3109
2406
|
const newWidth = getResizedWidth(delta);
|
|
3110
2407
|
setIsResizing(false);
|
|
3111
2408
|
setInternalWidth(newWidth);
|
|
3112
|
-
onResize === null || onResize ===
|
|
2409
|
+
onResize === null || onResize === undefined ? undefined : onResize(newWidth);
|
|
3113
2410
|
}, [getResizedWidth, onResize]);
|
|
3114
2411
|
const displayWidth = isResizing
|
|
3115
2412
|
? getResizedWidth(resizeDelta)
|
|
3116
|
-
: getClampedWidth(width !== null && width !==
|
|
2413
|
+
: getClampedWidth(width !== null && width !== undefined ? width : internalWidth);
|
|
3117
2414
|
const handlers = useResizeHandlers({ onStart, onMove, onEnd });
|
|
3118
2415
|
return { resizedWidth: displayWidth, resizerHandlers: handlers };
|
|
3119
2416
|
}
|
|
@@ -3123,10 +2420,10 @@ styleInject_es.styleInject(css_248z);
|
|
|
3123
2420
|
|
|
3124
2421
|
const b = cn.block('drawer');
|
|
3125
2422
|
const TIMEOUT = 300;
|
|
3126
|
-
const DrawerItem =
|
|
2423
|
+
const DrawerItem = React.forwardRef(function DrawerItem(props, ref) {
|
|
3127
2424
|
const { visible, content, children, direction = 'left', className, resizable, width, minResizeWidth, maxResizeWidth, onResizeStart, onResize, keepMounted = false, } = props;
|
|
3128
|
-
const [isInitialRender, setInitialRender] =
|
|
3129
|
-
const itemRef =
|
|
2425
|
+
const [isInitialRender, setInitialRender] = React.useState(true);
|
|
2426
|
+
const itemRef = React.useRef(null);
|
|
3130
2427
|
const handleRef = uikit.useForkRef(ref, itemRef);
|
|
3131
2428
|
const cssDirection = direction === 'left' ? undefined : direction;
|
|
3132
2429
|
const { resizedWidth, resizerHandlers } = useResizableDrawerItem({
|
|
@@ -3137,29 +2434,31 @@ const DrawerItem = React__default["default"].forwardRef(function DrawerItem(prop
|
|
|
3137
2434
|
onResizeStart,
|
|
3138
2435
|
onResize,
|
|
3139
2436
|
});
|
|
3140
|
-
|
|
2437
|
+
React.useEffect(() => {
|
|
3141
2438
|
setInitialRender(true);
|
|
3142
2439
|
}, [direction]);
|
|
3143
|
-
const resizerElement = resizable ? (
|
|
3144
|
-
|
|
3145
|
-
return (
|
|
3146
|
-
|
|
3147
|
-
resizerElement, children !== null && children !==
|
|
2440
|
+
const resizerElement = resizable ? (React.createElement("div", Object.assign({ className: b('resizer', { direction }) }, resizerHandlers),
|
|
2441
|
+
React.createElement("div", { className: b('resizer-handle') }))) : null;
|
|
2442
|
+
return (React.createElement(CSSTransition, { in: visible, timeout: TIMEOUT, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, classNames: b('item-transition', { direction: cssDirection }), nodeRef: itemRef, onEnter: () => setInitialRender(false), onExit: () => setInitialRender(false) },
|
|
2443
|
+
React.createElement("div", { ref: handleRef, className: b('item', { direction: cssDirection, hidden: isInitialRender && !visible }, [className]), style: { width: resizable ? `${resizedWidth}px` : undefined } },
|
|
2444
|
+
resizerElement, children !== null && children !== undefined ? children : content)));
|
|
3148
2445
|
});
|
|
3149
|
-
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape,
|
|
2446
|
+
const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEscape,
|
|
2447
|
+
// preventScrollBody = true,
|
|
2448
|
+
hideVeil, disablePortal = true, keepMounted = false, }) => {
|
|
3150
2449
|
let someItemVisible = false;
|
|
3151
|
-
|
|
3152
|
-
if (
|
|
2450
|
+
React.Children.forEach(children, (child) => {
|
|
2451
|
+
if (React.isValidElement(child) && child.type === DrawerItem) {
|
|
3153
2452
|
const childVisible = Boolean(child.props.visible);
|
|
3154
2453
|
if (childVisible) {
|
|
3155
2454
|
someItemVisible = true;
|
|
3156
2455
|
}
|
|
3157
2456
|
}
|
|
3158
2457
|
});
|
|
3159
|
-
|
|
2458
|
+
React.useEffect(() => {
|
|
3160
2459
|
function onKeyDown(event) {
|
|
3161
2460
|
if (event.key === 'Escape') {
|
|
3162
|
-
onEscape === null || onEscape ===
|
|
2461
|
+
onEscape === null || onEscape === undefined ? undefined : onEscape();
|
|
3163
2462
|
}
|
|
3164
2463
|
}
|
|
3165
2464
|
if (someItemVisible) {
|
|
@@ -3169,19 +2468,19 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
3169
2468
|
window.removeEventListener('keydown', onKeyDown);
|
|
3170
2469
|
};
|
|
3171
2470
|
}, [onEscape, someItemVisible]);
|
|
3172
|
-
|
|
3173
|
-
const containerRef =
|
|
3174
|
-
const veilRef =
|
|
3175
|
-
const drawer = (
|
|
2471
|
+
// useBodyScrollLock({enabled: preventScrollBody && someItemVisible});
|
|
2472
|
+
const containerRef = React.useRef(null);
|
|
2473
|
+
const veilRef = React.useRef(null);
|
|
2474
|
+
const drawer = (React.createElement(Transition, { in: someItemVisible, timeout: { enter: 0, exit: TIMEOUT }, mountOnEnter: !keepMounted, unmountOnExit: !keepMounted, nodeRef: containerRef }, (state) => {
|
|
3176
2475
|
const childrenVisible = someItemVisible && state === 'entered';
|
|
3177
|
-
return (
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
if (
|
|
2476
|
+
return (React.createElement("div", { ref: containerRef, className: b({ hideVeil }, className), style: style },
|
|
2477
|
+
React.createElement(CSSTransition, { in: childrenVisible, timeout: TIMEOUT, unmountOnExit: true, classNames: b('veil-transition'), nodeRef: veilRef },
|
|
2478
|
+
React.createElement("div", { ref: veilRef, className: b('veil', { hidden: hideVeil }, veilClassName), onClick: onVeilClick })),
|
|
2479
|
+
React.Children.map(children, (child) => {
|
|
2480
|
+
if (React.isValidElement(child) &&
|
|
3182
2481
|
child.type === DrawerItem) {
|
|
3183
2482
|
const childVisible = Boolean(child.props.visible);
|
|
3184
|
-
return
|
|
2483
|
+
return React.cloneElement(child, Object.assign(Object.assign({ keepMounted }, child.props), { visible: childVisible && childrenVisible }));
|
|
3185
2484
|
}
|
|
3186
2485
|
return child;
|
|
3187
2486
|
})));
|
|
@@ -3189,7 +2488,7 @@ const Drawer = ({ className, veilClassName, children, style, onVeilClick, onEsca
|
|
|
3189
2488
|
if (disablePortal) {
|
|
3190
2489
|
return drawer;
|
|
3191
2490
|
}
|
|
3192
|
-
return
|
|
2491
|
+
return React.createElement(uikit.Portal, null, drawer);
|
|
3193
2492
|
};
|
|
3194
2493
|
|
|
3195
2494
|
exports.Drawer = Drawer;
|