@salutejs/plasma-new-hope 0.122.1-canary.1325.10449260850.0 → 0.122.1-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Modal/hooks/useModal.js +15 -0
- package/cjs/components/Modal/hooks/useModal.js.map +1 -1
- package/cjs/components/Popup/PopupContext.js +8 -23
- package/cjs/components/Popup/PopupContext.js.map +1 -1
- package/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/cjs/components/Popup/hooks/usePopup.js.map +1 -1
- package/cjs/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
- package/emotion/cjs/components/Modal/hooks/useModal.js +15 -0
- package/emotion/cjs/components/Popup/PopupContext.js +8 -23
- package/emotion/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +5 -9
- package/emotion/es/components/Modal/hooks/useModal.js +17 -2
- package/emotion/es/components/Popup/PopupContext.js +9 -24
- package/emotion/es/components/Popup/hooks/usePopup.js +0 -5
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +5 -9
- package/es/components/Modal/hooks/useModal.js +17 -2
- package/es/components/Modal/hooks/useModal.js.map +1 -1
- package/es/components/Popup/PopupContext.js +9 -24
- package/es/components/Popup/PopupContext.js.map +1 -1
- package/es/components/Popup/hooks/usePopup.js +0 -5
- package/es/components/Popup/hooks/usePopup.js.map +1 -1
- package/es/components/Tabs/ui/TabItem/TabItem.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Modal/hooks/useModal.js +15 -0
- package/styled-components/cjs/components/Popup/PopupContext.js +8 -23
- package/styled-components/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +5 -9
- package/styled-components/es/components/Modal/hooks/useModal.js +17 -2
- package/styled-components/es/components/Popup/PopupContext.js +9 -24
- package/styled-components/es/components/Popup/hooks/usePopup.js +0 -5
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +5 -9
- package/types/components/Modal/hooks/useModal.d.ts +1 -1
- package/types/components/Modal/hooks/useModal.d.ts.map +1 -1
- package/types/components/Popup/PopupContext.d.ts.map +1 -1
- package/types/components/Popup/hooks/usePopup.d.ts.map +1 -1
- package/types/components/Tabs/ui/TabItem/TabItem.d.ts +26 -15
- package/types/components/Tabs/ui/TabItem/TabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/TabItem/TabItem.types.d.ts +7 -8
- package/types/components/Tabs/ui/TabItem/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.d.ts +2 -26
- package/types/components/Tabs/ui/Tabs/Tabs.d.ts.map +1 -1
- package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts +2 -1
- package/types/components/Tabs/ui/Tabs/Tabs.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +26 -14
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +28 -14
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabsController.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Tabs/TabsController.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +26 -14
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +28 -14
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabsController.d.ts +2 -2
- package/types/examples/plasma_web/components/Tabs/TabsController.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Tabs/TabItem.d.ts +1 -13
- package/types/examples/sds_engineer/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts +1 -13
- package/types/examples/sds_engineer/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/types/AsProps.d.ts.map +1 -1
@@ -14,12 +14,14 @@ require('@linaria/react');
|
|
14
14
|
var ESCAPE_KEYCODE = 27;
|
15
15
|
var useModal = function useModal(_ref) {
|
16
16
|
var id = _ref.id,
|
17
|
+
isOpen = _ref.isOpen,
|
17
18
|
popupInfo = _ref.popupInfo,
|
18
19
|
onEscKeyDown = _ref.onEscKeyDown,
|
19
20
|
onClose = _ref.onClose,
|
20
21
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
21
22
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc;
|
22
23
|
var popupController = PopupContext.usePopupContext();
|
24
|
+
var overflow = React.useRef(document.body.style.overflowY);
|
23
25
|
|
24
26
|
// При ESC закрывает текущее окно, если это возможно
|
25
27
|
var onKeyDown = React.useCallback(function (event) {
|
@@ -42,6 +44,19 @@ var useModal = function useModal(_ref) {
|
|
42
44
|
window.removeEventListener('keydown', onKeyDown);
|
43
45
|
};
|
44
46
|
}, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
|
47
|
+
|
48
|
+
// linaria не поддерживает динамический global
|
49
|
+
React.useEffect(function () {
|
50
|
+
if (isOpen) {
|
51
|
+
overflow.current = document.body.style.overflowY;
|
52
|
+
document.body.style.overflowY = 'hidden';
|
53
|
+
}
|
54
|
+
}, [isOpen]);
|
55
|
+
React.useEffect(function () {
|
56
|
+
if (!isOpen && !ModalContext.hasModals(popupController.items)) {
|
57
|
+
document.body.style.overflowY = overflow.current;
|
58
|
+
}
|
59
|
+
}, [isOpen, overflow.current, popupController.items]);
|
45
60
|
var modalInfo = _rollupPluginBabelHelpers.objectSpread2({
|
46
61
|
id: id,
|
47
62
|
info: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useModal.js","sources":["../../../../src/components/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { ModalInfo, getIdLastModal } from '../ModalContext';\nimport { ModalHookArgs } from '../Modal.types';\nimport { usePopupContext } from '../../Popup';\n\nconst ESCAPE_KEYCODE = 27;\n\nexport const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {\n const popupController = usePopupContext();\n\n // При ESC закрывает текущее окно, если это возможно\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!closeOnEsc) {\n return;\n }\n if (event.keyCode === ESCAPE_KEYCODE && getIdLastModal(popupController.items) === id) {\n if (onEscKeyDown) {\n onEscKeyDown(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }\n },\n [onClose, onEscKeyDown, popupController.items, closeOnEsc],\n );\n\n useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);\n\n const modalInfo: ModalInfo = {\n id,\n info: {\n isModal: true,\n },\n ...popupInfo,\n };\n\n return { modalInfo };\n};\n"],"names":["ESCAPE_KEYCODE","useModal","_ref","id","popupInfo","onEscKeyDown","onClose","_ref$closeOnEsc","closeOnEsc","popupController","usePopupContext","onKeyDown","useCallback","event","keyCode","getIdLastModal","items","useEffect","window","addEventListener","removeEventListener","modalInfo","_objectSpread","info","isModal"],"mappings":";;;;;;;;;;;;;AAMA,IAAMA,cAAc,GAAG,EAAE,CAAA;IAEZC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,
|
1
|
+
{"version":3,"file":"useModal.js","sources":["../../../../src/components/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ModalInfo, getIdLastModal, hasModals } from '../ModalContext';\nimport { ModalHookArgs } from '../Modal.types';\nimport { usePopupContext } from '../../Popup';\n\nconst ESCAPE_KEYCODE = 27;\n\nexport const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {\n const popupController = usePopupContext();\n const overflow = useRef<string>(document.body.style.overflowY);\n\n // При ESC закрывает текущее окно, если это возможно\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!closeOnEsc) {\n return;\n }\n if (event.keyCode === ESCAPE_KEYCODE && getIdLastModal(popupController.items) === id) {\n if (onEscKeyDown) {\n onEscKeyDown(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }\n },\n [onClose, onEscKeyDown, popupController.items, closeOnEsc],\n );\n\n useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);\n\n // linaria не поддерживает динамический global\n useEffect(() => {\n if (isOpen) {\n overflow.current = document.body.style.overflowY;\n document.body.style.overflowY = 'hidden';\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!isOpen && !hasModals(popupController.items)) {\n document.body.style.overflowY = overflow.current;\n }\n }, [isOpen, overflow.current, popupController.items]);\n\n const modalInfo: ModalInfo = {\n id,\n info: {\n isModal: true,\n },\n ...popupInfo,\n };\n\n return { modalInfo };\n};\n"],"names":["ESCAPE_KEYCODE","useModal","_ref","id","isOpen","popupInfo","onEscKeyDown","onClose","_ref$closeOnEsc","closeOnEsc","popupController","usePopupContext","overflow","useRef","document","body","style","overflowY","onKeyDown","useCallback","event","keyCode","getIdLastModal","items","useEffect","window","addEventListener","removeEventListener","current","hasModals","modalInfo","_objectSpread","info","isModal"],"mappings":";;;;;;;;;;;;;AAMA,IAAMA,cAAc,GAAG,EAAE,CAAA;IAEZC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAA2F;AAAA,EAAA,IAArFC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAAC,eAAA,GAAAN,IAAA,CAAEO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA,CAAA;AACtF,EAAA,IAAME,eAAe,GAAGC,4BAAe,EAAE,CAAA;EACzC,IAAMC,QAAQ,GAAGC,YAAM,CAASC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,CAAC,CAAA;;AAE9D;AACA,EAAA,IAAMC,SAAS,GAAGC,iBAAW,CACzB,UAACC,KAAoB,EAAK;IACtB,IAAI,CAACX,UAAU,EAAE;AACb,MAAA,OAAA;AACJ,KAAA;AACA,IAAA,IAAIW,KAAK,CAACC,OAAO,KAAKrB,cAAc,IAAIsB,2BAAc,CAACZ,eAAe,CAACa,KAAK,CAAC,KAAKpB,EAAE,EAAE;AAClF,MAAA,IAAIG,YAAY,EAAE;QACdA,YAAY,CAACc,KAAK,CAAC,CAAA;AACnB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAIb,OAAO,EAAE;AACTA,QAAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACJ,KAAA;AACJ,GAAC,EACD,CAACA,OAAO,EAAED,YAAY,EAAEI,eAAe,CAACa,KAAK,EAAEd,UAAU,CAC7D,CAAC,CAAA;AAEDe,EAAAA,eAAS,CAAC,YAAM;AACZC,IAAAA,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC,CAAA;AAC7C,IAAA,OAAO,YAAM;AACTO,MAAAA,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAET,SAAS,CAAC,CAAA;KACnD,CAAA;AACL,GAAC,EAAE,CAACX,OAAO,EAAED,YAAY,EAAEI,eAAe,CAACa,KAAK,EAAEd,UAAU,CAAC,CAAC,CAAA;;AAE9D;AACAe,EAAAA,eAAS,CAAC,YAAM;AACZ,IAAA,IAAIpB,MAAM,EAAE;MACRQ,QAAQ,CAACgB,OAAO,GAAGd,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,CAAA;AAChDH,MAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,GAAG,QAAQ,CAAA;AAC5C,KAAA;AACJ,GAAC,EAAE,CAACb,MAAM,CAAC,CAAC,CAAA;AAEZoB,EAAAA,eAAS,CAAC,YAAM;IACZ,IAAI,CAACpB,MAAM,IAAI,CAACyB,sBAAS,CAACnB,eAAe,CAACa,KAAK,CAAC,EAAE;MAC9CT,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,GAAGL,QAAQ,CAACgB,OAAO,CAAA;AACpD,KAAA;AACJ,GAAC,EAAE,CAACxB,MAAM,EAAEQ,QAAQ,CAACgB,OAAO,EAAElB,eAAe,CAACa,KAAK,CAAC,CAAC,CAAA;EAErD,IAAMO,SAAoB,GAAAC,uCAAA,CAAA;AACtB5B,IAAAA,EAAE,EAAFA,EAAE;AACF6B,IAAAA,IAAI,EAAE;AACFC,MAAAA,OAAO,EAAE,IAAA;AACb,KAAA;AAAC,GAAA,EACE5B,SAAS,CACf,CAAA;EAED,OAAO;AAAEyB,IAAAA,SAAS,EAATA,SAAAA;GAAW,CAAA;AACxB;;;;"}
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
6
6
|
var React = require('react');
|
7
|
-
var ModalContext = require('../Modal/ModalContext.js');
|
8
7
|
|
9
8
|
var POPUP_PORTAL_ID = 'plasma-popup-root';
|
10
9
|
var items = [];
|
@@ -22,36 +21,22 @@ var usePopupContext = function usePopupContext() {
|
|
22
21
|
};
|
23
22
|
var PopupProvider = function PopupProvider(_ref) {
|
24
23
|
var children = _ref.children;
|
25
|
-
var prevBodyOverflowY = React.useRef(document.body.style.overflowY);
|
26
24
|
var _useState = React.useState([]),
|
27
25
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
28
26
|
items = _useState2[0],
|
29
27
|
setItems = _useState2[1];
|
30
28
|
var register = function register(info) {
|
31
|
-
setItems(
|
32
|
-
var _info$info;
|
33
|
-
if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !ModalContext.hasModals(prevItems)) {
|
34
|
-
prevBodyOverflowY.current = document.body.style.overflowY;
|
35
|
-
document.body.style.overflowY = 'hidden';
|
36
|
-
}
|
37
|
-
return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevItems), [info]);
|
38
|
-
});
|
29
|
+
setItems([].concat(_rollupPluginBabelHelpers.toConsumableArray(items), [info]));
|
39
30
|
};
|
40
31
|
var unregister = function unregister(id) {
|
41
|
-
|
42
|
-
|
43
|
-
return id === item.id;
|
44
|
-
});
|
45
|
-
if (index === -1) {
|
46
|
-
return prevItems;
|
47
|
-
}
|
48
|
-
var prevHasModals = ModalContext.hasModals(prevItems);
|
49
|
-
prevItems.splice(index, 1);
|
50
|
-
if (prevHasModals && !ModalContext.hasModals(prevItems)) {
|
51
|
-
document.body.style.overflowY = prevBodyOverflowY.current;
|
52
|
-
}
|
53
|
-
return prevItems;
|
32
|
+
var index = items.findIndex(function (item) {
|
33
|
+
return id === item.id;
|
54
34
|
});
|
35
|
+
if (index === -1) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
items.splice(index, 1);
|
39
|
+
setItems(_rollupPluginBabelHelpers.toConsumableArray(items));
|
55
40
|
};
|
56
41
|
var context = {
|
57
42
|
items: items,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PopupContext.js","sources":["../../../src/components/Popup/PopupContext.tsx"],"sourcesContent":["import React, { createContext, useEffect, useState, useContext, FC, PropsWithChildren
|
1
|
+
{"version":3,"file":"PopupContext.js","sources":["../../../src/components/Popup/PopupContext.tsx"],"sourcesContent":["import React, { createContext, useEffect, useState, useContext, FC, PropsWithChildren } from 'react';\n\nimport type { PopupContextType, PopupInfo } from './Popup.types';\n\nexport const POPUP_PORTAL_ID = 'plasma-popup-root';\n\nconst items: PopupInfo[] = [];\n\nconst PopupContext = createContext<PopupContextType>({\n items,\n register(_info: PopupInfo): void {\n throw new Error('Function not implemented. Add PopupProvider');\n },\n unregister(_id: string): void {\n throw new Error('Function not implemented. Add PopupProvider');\n },\n});\n\nexport const usePopupContext = () => useContext(PopupContext);\n\nexport const PopupProvider: FC<PropsWithChildren> = ({ children }) => {\n const [items, setItems] = useState<PopupInfo[]>([]);\n\n const register = (info: PopupInfo) => {\n setItems([...items, info]);\n };\n\n const unregister = (id: string) => {\n const index = items.findIndex((item: PopupInfo) => id === item.id);\n\n if (index === -1) {\n return;\n }\n\n items.splice(index, 1);\n setItems([...items]);\n };\n\n const context = {\n items,\n register,\n unregister,\n };\n\n useEffect(() => {\n return () => {\n const portal = document.createElement('div');\n if (portal && document.body.contains(portal)) {\n document.body.removeChild(portal);\n }\n };\n }, []);\n\n return <PopupContext.Provider value={context}>{children}</PopupContext.Provider>;\n};\n"],"names":["POPUP_PORTAL_ID","items","PopupContext","createContext","register","_info","Error","unregister","_id","usePopupContext","useContext","PopupProvider","_ref","children","_useState","useState","_useState2","_slicedToArray","setItems","info","concat","_toConsumableArray","id","index","findIndex","item","splice","context","useEffect","portal","document","createElement","body","contains","removeChild","React","Provider","value"],"mappings":";;;;;;;AAIO,IAAMA,eAAe,GAAG,oBAAmB;AAElD,IAAMC,KAAkB,GAAG,EAAE,CAAA;AAE7B,IAAMC,YAAY,gBAAGC,mBAAa,CAAmB;AACjDF,EAAAA,KAAK,EAALA,KAAK;EACLG,QAAQ,EAAA,SAAAA,QAACC,CAAAA,KAAgB,EAAQ;AAC7B,IAAA,MAAM,IAAIC,KAAK,CAAC,6CAA6C,CAAC,CAAA;GACjE;EACDC,UAAU,EAAA,SAAAA,UAACC,CAAAA,GAAW,EAAQ;AAC1B,IAAA,MAAM,IAAIF,KAAK,CAAC,6CAA6C,CAAC,CAAA;AAClE,GAAA;AACJ,CAAC,CAAC,CAAA;AAEWG,IAAAA,eAAe,GAAG,SAAlBA,eAAeA,GAAA;EAAA,OAASC,gBAAU,CAACR,YAAY,CAAC,CAAA;AAAA,EAAA;IAEhDS,aAAoC,GAAG,SAAvCA,aAAoCA,CAAAC,IAAA,EAAqB;AAAA,EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC3D,EAAA,IAAAC,SAAA,GAA0BC,cAAQ,CAAc,EAAE,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA5Cb,IAAAA,KAAK,GAAAe,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,QAAQ,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEtB,EAAA,IAAMZ,QAAQ,GAAG,SAAXA,QAAQA,CAAIe,IAAe,EAAK;IAClCD,QAAQ,CAAA,EAAA,CAAAE,MAAA,CAAAC,2CAAA,CAAKpB,KAAK,CAAA,EAAA,CAAEkB,IAAI,CAAA,CAAC,CAAC,CAAA;GAC7B,CAAA;AAED,EAAA,IAAMZ,UAAU,GAAG,SAAbA,UAAUA,CAAIe,EAAU,EAAK;AAC/B,IAAA,IAAMC,KAAK,GAAGtB,KAAK,CAACuB,SAAS,CAAC,UAACC,IAAe,EAAA;AAAA,MAAA,OAAKH,EAAE,KAAKG,IAAI,CAACH,EAAE,CAAA;KAAC,CAAA,CAAA;AAElE,IAAA,IAAIC,KAAK,KAAK,CAAC,CAAC,EAAE;AACd,MAAA,OAAA;AACJ,KAAA;AAEAtB,IAAAA,KAAK,CAACyB,MAAM,CAACH,KAAK,EAAE,CAAC,CAAC,CAAA;AACtBL,IAAAA,QAAQ,CAAAG,2CAAA,CAAKpB,KAAK,CAAC,CAAC,CAAA;GACvB,CAAA;AAED,EAAA,IAAM0B,OAAO,GAAG;AACZ1B,IAAAA,KAAK,EAALA,KAAK;AACLG,IAAAA,QAAQ,EAARA,QAAQ;AACRG,IAAAA,UAAU,EAAVA,UAAAA;GACH,CAAA;AAEDqB,EAAAA,eAAS,CAAC,YAAM;AACZ,IAAA,OAAO,YAAM;AACT,MAAA,IAAMC,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,CAAA;MAC5C,IAAIF,MAAM,IAAIC,QAAQ,CAACE,IAAI,CAACC,QAAQ,CAACJ,MAAM,CAAC,EAAE;AAC1CC,QAAAA,QAAQ,CAACE,IAAI,CAACE,WAAW,CAACL,MAAM,CAAC,CAAA;AACrC,OAAA;KACH,CAAA;GACJ,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,oBAAOM,KAAA,CAAAJ,aAAA,CAAC7B,YAAY,CAACkC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEV,OAAAA;AAAQ,GAAA,EAAEd,QAAgC,CAAC,CAAA;AACpF;;;;;;"}
|
@@ -69,11 +69,6 @@ var usePopup = function usePopup(_ref) {
|
|
69
69
|
popupController.unregister(id);
|
70
70
|
setVisible(false);
|
71
71
|
}, [isOpen, isVisible, animationInfo]);
|
72
|
-
React.useEffect(function () {
|
73
|
-
return function () {
|
74
|
-
popupController.unregister(id);
|
75
|
-
};
|
76
|
-
}, [id]);
|
77
72
|
return {
|
78
73
|
isVisible: isVisible,
|
79
74
|
setVisible: setVisible,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePopup.js","sources":["../../../../src/components/Popup/hooks/usePopup.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { PopupAnimationInfo, PopupHookArgs } from '../Popup.types';\nimport { usePopupContext } from '../PopupContext';\n\n// Хук для поключения анимации\nconst usePopupAnimation = (): PopupAnimationInfo => {\n const [endAnimation, setEndAnimation] = useState<boolean>(false);\n const [endTransition, setEndTransition] = useState<boolean>(false);\n\n return { endAnimation, endTransition, setEndTransition, setEndAnimation };\n};\n\n// Хук для внутреннего состояния, необходимого для правильного отображения вложенных окон, а также для анимации\nexport const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs) => {\n const [isVisible, setVisible] = useState<boolean>(false);\n const popupController = usePopupContext();\n const animationInfo = usePopupAnimation();\n\n // для использования transition в качестве анимации\n useEffect(() => {\n if (withAnimation && animationInfo) {\n animationInfo.setEndTransition(!isVisible || animationInfo?.endAnimation);\n }\n }, [animationInfo, withAnimation, isVisible]);\n\n // сначала добавление/удаление из контекста, и только после этого отображение/скрытие\n useEffect(() => {\n // при первом открытии\n if (isOpen && !isVisible) {\n popupController.register({ id, ...popupInfo });\n setVisible(true);\n animationInfo.setEndAnimation(false);\n return;\n }\n\n if (isOpen || !isVisible) {\n return;\n }\n\n // если есть анимация - закрытие по окончании анимации\n if (withAnimation) {\n animationInfo.setEndAnimation(true);\n return;\n }\n\n // иначе обычное закрытие\n popupController.unregister(id);\n setVisible(false);\n }, [isOpen, isVisible, animationInfo]);\n\n
|
1
|
+
{"version":3,"file":"usePopup.js","sources":["../../../../src/components/Popup/hooks/usePopup.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { PopupAnimationInfo, PopupHookArgs } from '../Popup.types';\nimport { usePopupContext } from '../PopupContext';\n\n// Хук для поключения анимации\nconst usePopupAnimation = (): PopupAnimationInfo => {\n const [endAnimation, setEndAnimation] = useState<boolean>(false);\n const [endTransition, setEndTransition] = useState<boolean>(false);\n\n return { endAnimation, endTransition, setEndTransition, setEndAnimation };\n};\n\n// Хук для внутреннего состояния, необходимого для правильного отображения вложенных окон, а также для анимации\nexport const usePopup = ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs) => {\n const [isVisible, setVisible] = useState<boolean>(false);\n const popupController = usePopupContext();\n const animationInfo = usePopupAnimation();\n\n // для использования transition в качестве анимации\n useEffect(() => {\n if (withAnimation && animationInfo) {\n animationInfo.setEndTransition(!isVisible || animationInfo?.endAnimation);\n }\n }, [animationInfo, withAnimation, isVisible]);\n\n // сначала добавление/удаление из контекста, и только после этого отображение/скрытие\n useEffect(() => {\n // при первом открытии\n if (isOpen && !isVisible) {\n popupController.register({ id, ...popupInfo });\n setVisible(true);\n animationInfo.setEndAnimation(false);\n return;\n }\n\n if (isOpen || !isVisible) {\n return;\n }\n\n // если есть анимация - закрытие по окончании анимации\n if (withAnimation) {\n animationInfo.setEndAnimation(true);\n return;\n }\n\n // иначе обычное закрытие\n popupController.unregister(id);\n setVisible(false);\n }, [isOpen, isVisible, animationInfo]);\n\n return { isVisible, setVisible, animationInfo, withAnimation };\n};\n"],"names":["usePopupAnimation","_useState","useState","_useState2","_slicedToArray","endAnimation","setEndAnimation","_useState3","_useState4","endTransition","setEndTransition","usePopup","_ref","isOpen","id","popupInfo","withAnimation","_useState5","_useState6","isVisible","setVisible","popupController","usePopupContext","animationInfo","useEffect","register","_objectSpread","unregister"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { ComponentConfig, RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (disabled || !refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n pilled={pilled}\n role={role}\n view={view}\n size={size}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, className)}\n onClick={handleClick}\n {...rest}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n </>\n </Root>\n );\n });\n\nexport const tabItemConfig: ComponentConfig = {\n name: 'TabItem',\n tag: 'button',\n layout: tabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TabItem.js","sources":["../../../../../src/components/Tabs/ui/TabItem/TabItem.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useContext, useEffect, useCallback } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../../../engines';\nimport { classes } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { TabsContext } from '../../TabsContext';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { TabItemProps } from './TabItem.types';\nimport { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';\n\nexport const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>\n forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {\n const {\n size,\n view,\n isActive,\n selected,\n disabled = false,\n pilled = false,\n children,\n contentLeft,\n contentRight,\n animated = true,\n onIndexChange,\n itemIndex,\n tabIndex,\n className,\n onClick,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n const refs = useContext(TabsContext);\n\n const role = 'tab';\n\n const pilledAttr = view !== 'clear' && pilled;\n const animatedClass = animated ? classes.tabItemAnimated : undefined;\n const pilledClass = pilledAttr ? classes.tabsPilled : undefined;\n const selectedClass = isActive || selected ? classes.selectedTabsItem : undefined;\n const hasKeyNavigation = itemIndex !== undefined && onIndexChange !== undefined;\n const navigationTabIndex = !disabled && refs?.current === itemIndex ? 0 : -1;\n\n useEffect(() => {\n if (!refs) {\n return;\n }\n\n refs.register(innerRef);\n\n return () => refs.unregister(innerRef);\n }, [refs]);\n\n const onItemFocus = useCallback<React.FocusEventHandler>(\n (event) => {\n if (!hasKeyNavigation && innerRef?.current) {\n innerRef.current.scrollTo({\n top: 0,\n left: innerRef.current.offsetLeft,\n behavior: 'smooth',\n });\n\n return;\n }\n\n if (disabled || !refs) {\n return;\n }\n\n const focusIndex = refs.items.findIndex((itemRef) => itemRef.current === event.target);\n\n if (focusIndex === refs.current) {\n return;\n }\n\n onIndexChange?.(focusIndex);\n refs.setCurrent(focusIndex);\n },\n [refs, innerRef, onIndexChange, disabled],\n );\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n\n if (!onClick) {\n return;\n }\n\n onClick(event);\n };\n\n return (\n <Root\n ref={ref}\n disabled={disabled}\n pilled={pilled}\n role={role}\n view={view}\n size={size}\n onFocus={onItemFocus}\n tabIndex={hasKeyNavigation ? navigationTabIndex : tabIndex}\n className={cx(pilledClass, selectedClass, animatedClass, className)}\n onClick={handleClick}\n {...rest}\n >\n <>\n {contentLeft && <LeftContent className={classes.tabLeftContent}>{contentLeft}</LeftContent>}\n <StyledContent className={classes.tabContent}>{children}</StyledContent>\n {contentRight && <RightContent className={classes.tabRightContent}>{contentRight}</RightContent>}\n </>\n </Root>\n );\n });\n\nexport const tabItemConfig = {\n name: 'TabItem',\n tag: 'button',\n layout: tabItemRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n },\n },\n defaults: {\n view: 'default',\n },\n};\n"],"names":["tabItemRoot","Root","forwardRef","props","outerRef","size","view","isActive","selected","_props$disabled","disabled","_props$pilled","pilled","children","contentLeft","contentRight","_props$animated","animated","onIndexChange","itemIndex","tabIndex","className","onClick","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","refs","useContext","TabsContext","role","pilledAttr","animatedClass","classes","tabItemAnimated","undefined","pilledClass","tabsPilled","selectedClass","selectedTabsItem","hasKeyNavigation","navigationTabIndex","current","useEffect","register","unregister","onItemFocus","useCallback","event","scrollTo","top","left","offsetLeft","behavior","focusIndex","items","findIndex","itemRef","target","setCurrent","handleClick","currentTarget","scrollIntoView","block","inline","React","createElement","_extends","onFocus","cx","Fragment","LeftContent","tabLeftContent","StyledContent","tabContent","RightContent","tabRightContent","tabItemConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","defaults"],"mappings":"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"}
|
@@ -16,12 +16,14 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
16
16
|
var ESCAPE_KEYCODE = 27;
|
17
17
|
var useModal = exports.useModal = function useModal(_ref) {
|
18
18
|
var id = _ref.id,
|
19
|
+
isOpen = _ref.isOpen,
|
19
20
|
popupInfo = _ref.popupInfo,
|
20
21
|
onEscKeyDown = _ref.onEscKeyDown,
|
21
22
|
onClose = _ref.onClose,
|
22
23
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
23
24
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc;
|
24
25
|
var popupController = (0, _Popup.usePopupContext)();
|
26
|
+
var overflow = (0, _react.useRef)(document.body.style.overflowY);
|
25
27
|
|
26
28
|
// При ESC закрывает текущее окно, если это возможно
|
27
29
|
var onKeyDown = (0, _react.useCallback)(function (event) {
|
@@ -44,6 +46,19 @@ var useModal = exports.useModal = function useModal(_ref) {
|
|
44
46
|
window.removeEventListener('keydown', onKeyDown);
|
45
47
|
};
|
46
48
|
}, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
|
49
|
+
|
50
|
+
// linaria не поддерживает динамический global
|
51
|
+
(0, _react.useEffect)(function () {
|
52
|
+
if (isOpen) {
|
53
|
+
overflow.current = document.body.style.overflowY;
|
54
|
+
document.body.style.overflowY = 'hidden';
|
55
|
+
}
|
56
|
+
}, [isOpen]);
|
57
|
+
(0, _react.useEffect)(function () {
|
58
|
+
if (!isOpen && !(0, _ModalContext.hasModals)(popupController.items)) {
|
59
|
+
document.body.style.overflowY = overflow.current;
|
60
|
+
}
|
61
|
+
}, [isOpen, overflow.current, popupController.items]);
|
47
62
|
var modalInfo = _objectSpread({
|
48
63
|
id: id,
|
49
64
|
info: {
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.usePopupContext = exports.PopupProvider = exports.POPUP_PORTAL_ID = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
-
var _ModalContext = /*#__PURE__*/require("../Modal/ModalContext");
|
10
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
11
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
12
11
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
@@ -35,36 +34,22 @@ var usePopupContext = exports.usePopupContext = function usePopupContext() {
|
|
35
34
|
};
|
36
35
|
var PopupProvider = exports.PopupProvider = function PopupProvider(_ref) {
|
37
36
|
var children = _ref.children;
|
38
|
-
var prevBodyOverflowY = (0, _react.useRef)(document.body.style.overflowY);
|
39
37
|
var _useState = (0, _react.useState)([]),
|
40
38
|
_useState2 = _slicedToArray(_useState, 2),
|
41
39
|
items = _useState2[0],
|
42
40
|
setItems = _useState2[1];
|
43
41
|
var register = function register(info) {
|
44
|
-
setItems(
|
45
|
-
var _info$info;
|
46
|
-
if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !(0, _ModalContext.hasModals)(prevItems)) {
|
47
|
-
prevBodyOverflowY.current = document.body.style.overflowY;
|
48
|
-
document.body.style.overflowY = 'hidden';
|
49
|
-
}
|
50
|
-
return [].concat(_toConsumableArray(prevItems), [info]);
|
51
|
-
});
|
42
|
+
setItems([].concat(_toConsumableArray(items), [info]));
|
52
43
|
};
|
53
44
|
var unregister = function unregister(id) {
|
54
|
-
|
55
|
-
|
56
|
-
return id === item.id;
|
57
|
-
});
|
58
|
-
if (index === -1) {
|
59
|
-
return prevItems;
|
60
|
-
}
|
61
|
-
var prevHasModals = (0, _ModalContext.hasModals)(prevItems);
|
62
|
-
prevItems.splice(index, 1);
|
63
|
-
if (prevHasModals && !(0, _ModalContext.hasModals)(prevItems)) {
|
64
|
-
document.body.style.overflowY = prevBodyOverflowY.current;
|
65
|
-
}
|
66
|
-
return prevItems;
|
45
|
+
var index = items.findIndex(function (item) {
|
46
|
+
return id === item.id;
|
67
47
|
});
|
48
|
+
if (index === -1) {
|
49
|
+
return;
|
50
|
+
}
|
51
|
+
items.splice(index, 1);
|
52
|
+
setItems(_toConsumableArray(items));
|
68
53
|
};
|
69
54
|
var context = {
|
70
55
|
items: items,
|
@@ -81,11 +81,6 @@ var usePopup = exports.usePopup = function usePopup(_ref) {
|
|
81
81
|
popupController.unregister(id);
|
82
82
|
setVisible(false);
|
83
83
|
}, [isOpen, isVisible, animationInfo]);
|
84
|
-
(0, _react.useEffect)(function () {
|
85
|
-
return function () {
|
86
|
-
popupController.unregister(id);
|
87
|
-
};
|
88
|
-
}, [id]);
|
89
84
|
return {
|
90
85
|
isVisible: isVisible,
|
91
86
|
setVisible: setVisible,
|
@@ -5,15 +5,6 @@ title: Tabs
|
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
|
-
# Tabs
|
9
|
-
Набор компонентов для создания вкладок.
|
10
|
-
Структура для вкладок похожа на структуру маркированных списков.
|
11
|
-
|
12
|
-
## TabsController
|
13
|
-
|
14
|
-
<Description name="TabsController" />
|
15
|
-
<PropsTable name="TabsController" />
|
16
|
-
|
17
8
|
## Tabs
|
18
9
|
|
19
10
|
<Description name="Tabs" />
|
@@ -24,6 +15,11 @@ import { PropsTable, Description } from '@site/src/components';
|
|
24
15
|
<Description name="TabItem" />
|
25
16
|
<PropsTable name="TabItem" />
|
26
17
|
|
18
|
+
## TabsController (deprecated)
|
19
|
+
Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
|
20
|
+
|
21
|
+
<Description name="TabsController" />
|
22
|
+
<PropsTable name="TabsController" />
|
27
23
|
|
28
24
|
## Использование
|
29
25
|
|
@@ -4,18 +4,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
7
|
-
import { useCallback, useEffect } from 'react';
|
8
|
-
import { getIdLastModal } from '../ModalContext';
|
7
|
+
import { useCallback, useEffect, useRef } from 'react';
|
8
|
+
import { getIdLastModal, hasModals } from '../ModalContext';
|
9
9
|
import { usePopupContext } from '../../Popup';
|
10
10
|
var ESCAPE_KEYCODE = 27;
|
11
11
|
export var useModal = function useModal(_ref) {
|
12
12
|
var id = _ref.id,
|
13
|
+
isOpen = _ref.isOpen,
|
13
14
|
popupInfo = _ref.popupInfo,
|
14
15
|
onEscKeyDown = _ref.onEscKeyDown,
|
15
16
|
onClose = _ref.onClose,
|
16
17
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
17
18
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc;
|
18
19
|
var popupController = usePopupContext();
|
20
|
+
var overflow = useRef(document.body.style.overflowY);
|
19
21
|
|
20
22
|
// При ESC закрывает текущее окно, если это возможно
|
21
23
|
var onKeyDown = useCallback(function (event) {
|
@@ -38,6 +40,19 @@ export var useModal = function useModal(_ref) {
|
|
38
40
|
window.removeEventListener('keydown', onKeyDown);
|
39
41
|
};
|
40
42
|
}, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
|
43
|
+
|
44
|
+
// linaria не поддерживает динамический global
|
45
|
+
useEffect(function () {
|
46
|
+
if (isOpen) {
|
47
|
+
overflow.current = document.body.style.overflowY;
|
48
|
+
document.body.style.overflowY = 'hidden';
|
49
|
+
}
|
50
|
+
}, [isOpen]);
|
51
|
+
useEffect(function () {
|
52
|
+
if (!isOpen && !hasModals(popupController.items)) {
|
53
|
+
document.body.style.overflowY = overflow.current;
|
54
|
+
}
|
55
|
+
}, [isOpen, overflow.current, popupController.items]);
|
41
56
|
var modalInfo = _objectSpread({
|
42
57
|
id: id,
|
43
58
|
info: {
|
@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
8
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
9
9
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
-
import React, { createContext, useEffect, useState, useContext
|
12
|
-
import { hasModals } from '../Modal/ModalContext';
|
11
|
+
import React, { createContext, useEffect, useState, useContext } from 'react';
|
13
12
|
export var POPUP_PORTAL_ID = 'plasma-popup-root';
|
14
13
|
var items = [];
|
15
14
|
var PopupContext = /*#__PURE__*/createContext({
|
@@ -26,36 +25,22 @@ export var usePopupContext = function usePopupContext() {
|
|
26
25
|
};
|
27
26
|
export var PopupProvider = function PopupProvider(_ref) {
|
28
27
|
var children = _ref.children;
|
29
|
-
var prevBodyOverflowY = useRef(document.body.style.overflowY);
|
30
28
|
var _useState = useState([]),
|
31
29
|
_useState2 = _slicedToArray(_useState, 2),
|
32
30
|
items = _useState2[0],
|
33
31
|
setItems = _useState2[1];
|
34
32
|
var register = function register(info) {
|
35
|
-
setItems(
|
36
|
-
var _info$info;
|
37
|
-
if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !hasModals(prevItems)) {
|
38
|
-
prevBodyOverflowY.current = document.body.style.overflowY;
|
39
|
-
document.body.style.overflowY = 'hidden';
|
40
|
-
}
|
41
|
-
return [].concat(_toConsumableArray(prevItems), [info]);
|
42
|
-
});
|
33
|
+
setItems([].concat(_toConsumableArray(items), [info]));
|
43
34
|
};
|
44
35
|
var unregister = function unregister(id) {
|
45
|
-
|
46
|
-
|
47
|
-
return id === item.id;
|
48
|
-
});
|
49
|
-
if (index === -1) {
|
50
|
-
return prevItems;
|
51
|
-
}
|
52
|
-
var prevHasModals = hasModals(prevItems);
|
53
|
-
prevItems.splice(index, 1);
|
54
|
-
if (prevHasModals && !hasModals(prevItems)) {
|
55
|
-
document.body.style.overflowY = prevBodyOverflowY.current;
|
56
|
-
}
|
57
|
-
return prevItems;
|
36
|
+
var index = items.findIndex(function (item) {
|
37
|
+
return id === item.id;
|
58
38
|
});
|
39
|
+
if (index === -1) {
|
40
|
+
return;
|
41
|
+
}
|
42
|
+
items.splice(index, 1);
|
43
|
+
setItems(_toConsumableArray(items));
|
59
44
|
};
|
60
45
|
var context = {
|
61
46
|
items: items,
|
@@ -76,11 +76,6 @@ export var usePopup = function usePopup(_ref) {
|
|
76
76
|
popupController.unregister(id);
|
77
77
|
setVisible(false);
|
78
78
|
}, [isOpen, isVisible, animationInfo]);
|
79
|
-
useEffect(function () {
|
80
|
-
return function () {
|
81
|
-
popupController.unregister(id);
|
82
|
-
};
|
83
|
-
}, [id]);
|
84
79
|
return {
|
85
80
|
isVisible: isVisible,
|
86
81
|
setVisible: setVisible,
|
@@ -5,15 +5,6 @@ title: Tabs
|
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
|
-
# Tabs
|
9
|
-
Набор компонентов для создания вкладок.
|
10
|
-
Структура для вкладок похожа на структуру маркированных списков.
|
11
|
-
|
12
|
-
## TabsController
|
13
|
-
|
14
|
-
<Description name="TabsController" />
|
15
|
-
<PropsTable name="TabsController" />
|
16
|
-
|
17
8
|
## Tabs
|
18
9
|
|
19
10
|
<Description name="Tabs" />
|
@@ -24,6 +15,11 @@ import { PropsTable, Description } from '@site/src/components';
|
|
24
15
|
<Description name="TabItem" />
|
25
16
|
<PropsTable name="TabItem" />
|
26
17
|
|
18
|
+
## TabsController (deprecated)
|
19
|
+
Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
|
20
|
+
|
21
|
+
<Description name="TabsController" />
|
22
|
+
<PropsTable name="TabsController" />
|
27
23
|
|
28
24
|
## Использование
|
29
25
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import { useCallback, useEffect } from 'react';
|
3
|
-
import { getIdLastModal } from '../ModalContext.js';
|
2
|
+
import { useRef, useCallback, useEffect } from 'react';
|
3
|
+
import { getIdLastModal, hasModals } from '../ModalContext.js';
|
4
4
|
import { usePopupContext } from '../../Popup/PopupContext.js';
|
5
5
|
import '@salutejs/plasma-core';
|
6
6
|
import '../../../utils/react.js';
|
@@ -10,12 +10,14 @@ import '@linaria/react';
|
|
10
10
|
var ESCAPE_KEYCODE = 27;
|
11
11
|
var useModal = function useModal(_ref) {
|
12
12
|
var id = _ref.id,
|
13
|
+
isOpen = _ref.isOpen,
|
13
14
|
popupInfo = _ref.popupInfo,
|
14
15
|
onEscKeyDown = _ref.onEscKeyDown,
|
15
16
|
onClose = _ref.onClose,
|
16
17
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
17
18
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc;
|
18
19
|
var popupController = usePopupContext();
|
20
|
+
var overflow = useRef(document.body.style.overflowY);
|
19
21
|
|
20
22
|
// При ESC закрывает текущее окно, если это возможно
|
21
23
|
var onKeyDown = useCallback(function (event) {
|
@@ -38,6 +40,19 @@ var useModal = function useModal(_ref) {
|
|
38
40
|
window.removeEventListener('keydown', onKeyDown);
|
39
41
|
};
|
40
42
|
}, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
|
43
|
+
|
44
|
+
// linaria не поддерживает динамический global
|
45
|
+
useEffect(function () {
|
46
|
+
if (isOpen) {
|
47
|
+
overflow.current = document.body.style.overflowY;
|
48
|
+
document.body.style.overflowY = 'hidden';
|
49
|
+
}
|
50
|
+
}, [isOpen]);
|
51
|
+
useEffect(function () {
|
52
|
+
if (!isOpen && !hasModals(popupController.items)) {
|
53
|
+
document.body.style.overflowY = overflow.current;
|
54
|
+
}
|
55
|
+
}, [isOpen, overflow.current, popupController.items]);
|
41
56
|
var modalInfo = _objectSpread2({
|
42
57
|
id: id,
|
43
58
|
info: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useModal.js","sources":["../../../../src/components/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { ModalInfo, getIdLastModal } from '../ModalContext';\nimport { ModalHookArgs } from '../Modal.types';\nimport { usePopupContext } from '../../Popup';\n\nconst ESCAPE_KEYCODE = 27;\n\nexport const useModal = ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {\n const popupController = usePopupContext();\n\n // При ESC закрывает текущее окно, если это возможно\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!closeOnEsc) {\n return;\n }\n if (event.keyCode === ESCAPE_KEYCODE && getIdLastModal(popupController.items) === id) {\n if (onEscKeyDown) {\n onEscKeyDown(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }\n },\n [onClose, onEscKeyDown, popupController.items, closeOnEsc],\n );\n\n useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);\n\n const modalInfo: ModalInfo = {\n id,\n info: {\n isModal: true,\n },\n ...popupInfo,\n };\n\n return { modalInfo };\n};\n"],"names":["ESCAPE_KEYCODE","useModal","_ref","id","popupInfo","onEscKeyDown","onClose","_ref$closeOnEsc","closeOnEsc","popupController","usePopupContext","onKeyDown","useCallback","event","keyCode","getIdLastModal","items","useEffect","window","addEventListener","removeEventListener","modalInfo","_objectSpread","info","isModal"],"mappings":";;;;;;;;;AAMA,IAAMA,cAAc,GAAG,EAAE,CAAA;IAEZC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,
|
1
|
+
{"version":3,"file":"useModal.js","sources":["../../../../src/components/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ModalInfo, getIdLastModal, hasModals } from '../ModalContext';\nimport { ModalHookArgs } from '../Modal.types';\nimport { usePopupContext } from '../../Popup';\n\nconst ESCAPE_KEYCODE = 27;\n\nexport const useModal = ({ id, isOpen, popupInfo, onEscKeyDown, onClose, closeOnEsc = true }: ModalHookArgs) => {\n const popupController = usePopupContext();\n const overflow = useRef<string>(document.body.style.overflowY);\n\n // При ESC закрывает текущее окно, если это возможно\n const onKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!closeOnEsc) {\n return;\n }\n if (event.keyCode === ESCAPE_KEYCODE && getIdLastModal(popupController.items) === id) {\n if (onEscKeyDown) {\n onEscKeyDown(event);\n return;\n }\n\n if (onClose) {\n onClose();\n }\n }\n },\n [onClose, onEscKeyDown, popupController.items, closeOnEsc],\n );\n\n useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);\n\n // linaria не поддерживает динамический global\n useEffect(() => {\n if (isOpen) {\n overflow.current = document.body.style.overflowY;\n document.body.style.overflowY = 'hidden';\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (!isOpen && !hasModals(popupController.items)) {\n document.body.style.overflowY = overflow.current;\n }\n }, [isOpen, overflow.current, popupController.items]);\n\n const modalInfo: ModalInfo = {\n id,\n info: {\n isModal: true,\n },\n ...popupInfo,\n };\n\n return { modalInfo };\n};\n"],"names":["ESCAPE_KEYCODE","useModal","_ref","id","isOpen","popupInfo","onEscKeyDown","onClose","_ref$closeOnEsc","closeOnEsc","popupController","usePopupContext","overflow","useRef","document","body","style","overflowY","onKeyDown","useCallback","event","keyCode","getIdLastModal","items","useEffect","window","addEventListener","removeEventListener","current","hasModals","modalInfo","_objectSpread","info","isModal"],"mappings":";;;;;;;;;AAMA,IAAMA,cAAc,GAAG,EAAE,CAAA;IAEZC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAA2F;AAAA,EAAA,IAArFC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAEC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IAAEC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IAAAC,eAAA,GAAAN,IAAA,CAAEO,UAAU;AAAVA,IAAAA,UAAU,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,eAAA,CAAA;AACtF,EAAA,IAAME,eAAe,GAAGC,eAAe,EAAE,CAAA;EACzC,IAAMC,QAAQ,GAAGC,MAAM,CAASC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,CAAC,CAAA;;AAE9D;AACA,EAAA,IAAMC,SAAS,GAAGC,WAAW,CACzB,UAACC,KAAoB,EAAK;IACtB,IAAI,CAACX,UAAU,EAAE;AACb,MAAA,OAAA;AACJ,KAAA;AACA,IAAA,IAAIW,KAAK,CAACC,OAAO,KAAKrB,cAAc,IAAIsB,cAAc,CAACZ,eAAe,CAACa,KAAK,CAAC,KAAKpB,EAAE,EAAE;AAClF,MAAA,IAAIG,YAAY,EAAE;QACdA,YAAY,CAACc,KAAK,CAAC,CAAA;AACnB,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAIb,OAAO,EAAE;AACTA,QAAAA,OAAO,EAAE,CAAA;AACb,OAAA;AACJ,KAAA;AACJ,GAAC,EACD,CAACA,OAAO,EAAED,YAAY,EAAEI,eAAe,CAACa,KAAK,EAAEd,UAAU,CAC7D,CAAC,CAAA;AAEDe,EAAAA,SAAS,CAAC,YAAM;AACZC,IAAAA,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC,CAAA;AAC7C,IAAA,OAAO,YAAM;AACTO,MAAAA,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAET,SAAS,CAAC,CAAA;KACnD,CAAA;AACL,GAAC,EAAE,CAACX,OAAO,EAAED,YAAY,EAAEI,eAAe,CAACa,KAAK,EAAEd,UAAU,CAAC,CAAC,CAAA;;AAE9D;AACAe,EAAAA,SAAS,CAAC,YAAM;AACZ,IAAA,IAAIpB,MAAM,EAAE;MACRQ,QAAQ,CAACgB,OAAO,GAAGd,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,CAAA;AAChDH,MAAAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,GAAG,QAAQ,CAAA;AAC5C,KAAA;AACJ,GAAC,EAAE,CAACb,MAAM,CAAC,CAAC,CAAA;AAEZoB,EAAAA,SAAS,CAAC,YAAM;IACZ,IAAI,CAACpB,MAAM,IAAI,CAACyB,SAAS,CAACnB,eAAe,CAACa,KAAK,CAAC,EAAE;MAC9CT,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,SAAS,GAAGL,QAAQ,CAACgB,OAAO,CAAA;AACpD,KAAA;AACJ,GAAC,EAAE,CAACxB,MAAM,EAAEQ,QAAQ,CAACgB,OAAO,EAAElB,eAAe,CAACa,KAAK,CAAC,CAAC,CAAA;EAErD,IAAMO,SAAoB,GAAAC,cAAA,CAAA;AACtB5B,IAAAA,EAAE,EAAFA,EAAE;AACF6B,IAAAA,IAAI,EAAE;AACFC,MAAAA,OAAO,EAAE,IAAA;AACb,KAAA;AAAC,GAAA,EACE5B,SAAS,CACf,CAAA;EAED,OAAO;AAAEyB,IAAAA,SAAS,EAATA,SAAAA;GAAW,CAAA;AACxB;;;;"}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
|
-
import React, { useContext,
|
3
|
-
import { hasModals } from '../Modal/ModalContext.js';
|
2
|
+
import React, { useContext, useState, useEffect, createContext } from 'react';
|
4
3
|
|
5
4
|
var POPUP_PORTAL_ID = 'plasma-popup-root';
|
6
5
|
var items = [];
|
@@ -18,36 +17,22 @@ var usePopupContext = function usePopupContext() {
|
|
18
17
|
};
|
19
18
|
var PopupProvider = function PopupProvider(_ref) {
|
20
19
|
var children = _ref.children;
|
21
|
-
var prevBodyOverflowY = useRef(document.body.style.overflowY);
|
22
20
|
var _useState = useState([]),
|
23
21
|
_useState2 = _slicedToArray(_useState, 2),
|
24
22
|
items = _useState2[0],
|
25
23
|
setItems = _useState2[1];
|
26
24
|
var register = function register(info) {
|
27
|
-
setItems(
|
28
|
-
var _info$info;
|
29
|
-
if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !hasModals(prevItems)) {
|
30
|
-
prevBodyOverflowY.current = document.body.style.overflowY;
|
31
|
-
document.body.style.overflowY = 'hidden';
|
32
|
-
}
|
33
|
-
return [].concat(_toConsumableArray(prevItems), [info]);
|
34
|
-
});
|
25
|
+
setItems([].concat(_toConsumableArray(items), [info]));
|
35
26
|
};
|
36
27
|
var unregister = function unregister(id) {
|
37
|
-
|
38
|
-
|
39
|
-
return id === item.id;
|
40
|
-
});
|
41
|
-
if (index === -1) {
|
42
|
-
return prevItems;
|
43
|
-
}
|
44
|
-
var prevHasModals = hasModals(prevItems);
|
45
|
-
prevItems.splice(index, 1);
|
46
|
-
if (prevHasModals && !hasModals(prevItems)) {
|
47
|
-
document.body.style.overflowY = prevBodyOverflowY.current;
|
48
|
-
}
|
49
|
-
return prevItems;
|
28
|
+
var index = items.findIndex(function (item) {
|
29
|
+
return id === item.id;
|
50
30
|
});
|
31
|
+
if (index === -1) {
|
32
|
+
return;
|
33
|
+
}
|
34
|
+
items.splice(index, 1);
|
35
|
+
setItems(_toConsumableArray(items));
|
51
36
|
};
|
52
37
|
var context = {
|
53
38
|
items: items,
|