@vkontakte/vkui 4.22.0 → 4.22.1
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/.cache/.eslintcache +1 -1
- package/.cache/.stylelintcache +1 -1
- package/.cache/.tsbuildinfo +14 -8
- package/.cache/ts/src/components/TabbarItem/TabbarItem.d.ts +3 -1
- package/dist/cjs/components/CardScroll/CardScroll.js +1 -1
- package/dist/cjs/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cjs/components/Cell/useDraggable.js +3 -1
- package/dist/cjs/components/Cell/useDraggable.js.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.js +3 -5
- package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cjs/components/Tabbar/Tabbar.js +3 -1
- package/dist/cjs/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/cjs/components/TabbarItem/TabbarItem.d.ts +3 -1
- package/dist/cjs/components/TabbarItem/TabbarItem.js +29 -11
- package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components/CardScroll/CardScroll.js +1 -1
- package/dist/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/components/Cell/useDraggable.js +2 -1
- package/dist/components/Cell/useDraggable.js.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.js +3 -5
- package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/components/Tabbar/Tabbar.js +3 -1
- package/dist/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.d.ts +3 -1
- package/dist/components/TabbarItem/TabbarItem.js +26 -10
- package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.js +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cssm/components/Cell/useDraggable.js +2 -1
- package/dist/cssm/components/Cell/useDraggable.js.map +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.js +3 -5
- package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cssm/components/Tabbar/Tabbar.css +1 -1
- package/dist/cssm/components/Tabbar/Tabbar.js +3 -1
- package/dist/cssm/components/Tabbar/Tabbar.js.map +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.css +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.js +26 -10
- package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cssm/styles/components.css +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +1 -1
- package/src/components/CardScroll/CardScroll.tsx +4 -1
- package/src/components/Cell/useDraggable.tsx +1 -1
- package/src/components/Epic/Readme.md +1 -0
- package/src/components/FocusTrap/FocusTrap.tsx +11 -8
- package/src/components/Tabbar/Tabbar.css +15 -4
- package/src/components/Tabbar/Tabbar.tsx +3 -1
- package/src/components/TabbarItem/Readme.md +72 -0
- package/src/components/TabbarItem/TabbarItem.css +65 -14
- package/src/components/TabbarItem/TabbarItem.tsx +46 -22
|
@@ -50,7 +50,7 @@ var CardScroll = function CardScroll(_ref) {
|
|
|
50
50
|
|
|
51
51
|
function getScrollToRight(offset) {
|
|
52
52
|
var containerWidth = refContainer.current.offsetWidth;
|
|
53
|
-
var slide = Array.
|
|
53
|
+
var slide = Array.prototype.find.call(refContainer.current.children, function (el) {
|
|
54
54
|
return el.offsetLeft + el.offsetWidth - offset > containerWidth;
|
|
55
55
|
});
|
|
56
56
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","usePlatform","HorizontalScroll","withAdaptivity","useDOM","CardScroll","children","size","sizeX","restProps","platform","refContainer","useRef","gapRef","window","getScrollToLeft","offset","containerWidth","current","offsetWidth","slideIndex","Array","from","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","find","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AACA,OAAOC,gBAAP;AACA,SAASC,cAAT;AACA,SAASC,MAAT;AACA;;AAMA,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAA8D;AAAA,MAA3DC,QAA2D,QAA3DA,QAA2D;AAAA,MAAjDC,IAAiD,QAAjDA,IAAiD;AAAA,MAA3CC,KAA2C,QAA3CA,KAA2C;AAAA,MAAjCC,SAAiC;;AAC1G,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AAEA,MAAMU,YAAY,GAAGb,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,MAAM,GAAGf,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAAf;;AAEA,gBAAmBR,MAAM,EAAzB;AAAA,MAAQU,MAAR,WAAQA,MAAR;;AAEA,WAASC,eAAT,CAAyBC,MAAzB,EAAiD;AAC/C,QAAMC,cAAc,GAAGN,YAAY,CAACO,OAAb,CAAqBC,WAA5C;AACA,QAAMC,UAAU,GAAGC,KAAK,CACrBC,IADgB,CACXX,YAAY,CAACO,OAAb,CAAqBZ,QADV,EAEhBiB,SAFgB,CAEN,UAACC,EAAD;AAAA,aAAqBA,EAAE,CAACC,UAAH,GAAgBD,EAAE,CAACL,WAAnB,GAAiCO,QAAQ,CAACZ,MAAM,CAACa,gBAAP,CAAwBH,EAAxB,EAA4BI,WAA7B,CAAzC,GAAqFZ,MAArF,IAA+F,CAApH;AAAA,KAFM,CAAnB;;AAIA,QAAII,UAAU,KAAK,CAAC,CAApB,EAAuB;AACrB,aAAOJ,MAAP;AACD;;AAED,QAAII,UAAU,KAAK,CAAnB,EAAsB;AACpB,aAAO,CAAP;AACD;;AAED,QAAMS,KAAK,GAAGlB,YAAY,CAACO,OAAb,CAAqBZ,QAArB,CAA8Bc,UAA9B,CAAd;AAEA,QAAMU,QAAQ,GAAGD,KAAK,CAACJ,UAAN,IAAoBR,cAAc,GAAGY,KAAK,CAACV,WAA3C,IAA0DN,MAAM,CAACK,OAAP,CAAeC,WAA1F;;AAEA,QAAIW,QAAQ,IAAI,IAAIjB,MAAM,CAACK,OAAP,CAAeC,WAAnC,EAAgD;AAC9C,aAAO,CAAP;AACD;;AAED,WAAOW,QAAP;AACD;;AAED,WAASC,gBAAT,CAA0Bf,MAA1B,EAAkD;AAChD,QAAMC,cAAc,GAAGN,YAAY,CAACO,OAAb,CAAqBC,WAA5C;AACA,QAAMU,KAAK,GAAGR,KAAK,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"names":["React","classNames","getClassName","usePlatform","HorizontalScroll","withAdaptivity","useDOM","CardScroll","children","size","sizeX","restProps","platform","refContainer","useRef","gapRef","window","getScrollToLeft","offset","containerWidth","current","offsetWidth","slideIndex","Array","from","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","prototype","find","call","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport HorizontalScroll from '../HorizontalScroll/HorizontalScroll';\nimport { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport './CardScroll.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {\n size?: 's' | 'm' | 'l';\n}\n\nconst CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restProps }: CardScrollProps) => {\n const platform = usePlatform();\n\n const refContainer = React.useRef<HTMLDivElement>(null);\n const gapRef = React.useRef<HTMLDivElement>(null);\n\n const { window } = useDOM();\n\n function getScrollToLeft(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slideIndex = Array\n .from(refContainer.current.children)\n .findIndex((el: HTMLElement) => el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);\n\n if (slideIndex === -1) {\n return offset;\n }\n\n if (slideIndex === 0) {\n return 0;\n }\n\n const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n return 0;\n }\n\n return scrollTo;\n }\n\n function getScrollToRight(offset: number): number {\n const containerWidth = refContainer.current.offsetWidth;\n const slide = Array.prototype.find.call(\n refContainer.current.children,\n (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n ) as HTMLElement;\n\n if (!slide) {\n return offset;\n }\n\n return slide.offsetLeft - gapRef.current.offsetWidth;\n }\n\n return (\n <div\n {...restProps}\n vkuiClass={classNames(\n getClassName('CardScroll', platform),\n `CardScroll--${size}`,\n `CardScroll--sizeX-${sizeX}`,\n )}\n >\n <HorizontalScroll getScrollToLeft={getScrollToLeft} getScrollToRight={getScrollToRight} showArrows={true}>\n <div vkuiClass=\"CardScroll__in\" ref={refContainer}>\n <span vkuiClass=\"CardScroll__gap\" ref={gapRef} />\n {children}\n <span vkuiClass=\"CardScroll__gap\" />\n </div>\n </HorizontalScroll>\n </div>\n );\n};\n\nCardScroll.defaultProps = {\n size: 's',\n};\n\nexport default withAdaptivity(CardScroll, { sizeX: true });\n"],"file":"CardScroll.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
export var useDraggable = function useDraggable(_ref) {
|
|
@@ -39,7 +40,7 @@ export var useDraggable = function useDraggable(_ref) {
|
|
|
39
40
|
var rootEl = rootElRef.current;
|
|
40
41
|
setDragging(true);
|
|
41
42
|
|
|
42
|
-
var _siblings =
|
|
43
|
+
var _siblings = _toConsumableArray(rootEl.parentElement.childNodes);
|
|
43
44
|
|
|
44
45
|
var idx = _siblings.indexOf(rootEl);
|
|
45
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"names":["React","useDraggable","onDragFinish","useState","dragging","setDragging","rootElRef","useRef","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"names":["React","useDraggable","onDragFinish","useState","dragging","setDragging","rootElRef","useRef","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","from","to","useDraggableProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n onDragStart: () => void;\n onDragEnd: () => void;\n onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n dragging: boolean;\n rootElRef: any;\n}\n\nexport const useDraggable = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>) => {\n const [dragging, setDragging] = React.useState<boolean>(false);\n const rootElRef = React.useRef(null);\n\n const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);\n const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);\n const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);\n const [dragShift, setDragShift] = React.useState<number>(0);\n const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);\n\n const onDragStart = () => {\n const rootEl = rootElRef.current;\n\n setDragging(true);\n\n const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];\n const idx = _siblings.indexOf(rootEl);\n\n setDragStartIndex(idx);\n setDragEndIndex(idx);\n setSiblings(_siblings);\n setDragShift(0);\n };\n\n const onDragMove = (e: TouchEvent) => {\n e.originalEvent.preventDefault();\n\n const rootEl = rootElRef.current;\n\n rootEl.style.transform = `translateY(${e.shiftY}px)`;\n const rootGesture = rootEl.getBoundingClientRect();\n\n setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n setDragShift(e.shiftY);\n setDragEndIndex(dragStartIndex);\n\n siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n const siblingGesture = sibling.getBoundingClientRect();\n const siblingHalfHeight = siblingGesture.height / 2;\n\n const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n if (dragStartIndex < siblingIndex) {\n if (rootOverSibling) {\n if (dragDirection === 'down') {\n sibling.style.transform = 'translateY(-100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n }\n if (rootUnderSibling && dragDirection === 'up') {\n sibling.style.transform = 'translateY(0)';\n }\n } else if (dragStartIndex > siblingIndex) {\n if (rootUnderSibling) {\n if (dragDirection === 'up') {\n sibling.style.transform = 'translateY(100%)';\n }\n\n setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n }\n if (rootOverSibling && dragDirection === 'down') {\n sibling.style.transform = 'translateY(0)';\n }\n }\n });\n };\n\n const onDragEnd = () => {\n const [from, to] = [dragStartIndex, dragEndIndex];\n\n siblings.forEach((sibling: HTMLElement) => {\n sibling.style.transform = null;\n });\n\n setSiblings(undefined);\n setDragEndIndex(undefined);\n setDragStartIndex(undefined);\n setDragDirection(undefined);\n setDragShift(undefined);\n\n setDragging(false);\n\n onDragFinish && onDragFinish({ from, to });\n };\n\n const useDraggableProps: UseDraggableProps = {\n onDragStart,\n onDragMove,\n onDragEnd,\n dragging,\n rootElRef,\n };\n\n return useDraggableProps;\n};\n"],"file":"useDraggable.js"}
|
|
@@ -60,15 +60,13 @@ export var FocusTrap = function FocusTrap(_ref) {
|
|
|
60
60
|
}, []); // HANDLE FOCUSABLE NODES
|
|
61
61
|
|
|
62
62
|
useIsomorphicLayoutEffect(function () {
|
|
63
|
-
var _ref$current2;
|
|
64
|
-
|
|
65
63
|
if (!ref.current) {
|
|
66
64
|
return noop();
|
|
67
65
|
}
|
|
68
66
|
|
|
69
|
-
var nodes = [];
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
var nodes = [];
|
|
68
|
+
Array.prototype.forEach.call( // eslint-disable-next-line no-restricted-properties
|
|
69
|
+
ref.current.querySelectorAll(FOCUSABLE_ELEMENTS), function (focusableEl) {
|
|
72
70
|
var _window$getComputedSt = window.getComputedStyle(focusableEl),
|
|
73
71
|
display = _window$getComputedSt.display,
|
|
74
72
|
visibility = _window$getComputedSt.visibility;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","noop","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","activeElement","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","length","focus","set","nodes","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","noop","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","activeElement","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop } from '../../lib/utils';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {\n onClose?: (props?: any) => void;\n restoreFocus?: boolean;\n timeout?: number;\n}\n\nexport const FocusTrap: React.FC<FocusTrapProps> = ({\n Component = 'div',\n onClose = noop,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}) => {\n const ref = useExternRef<HTMLElement>(getRootRef);\n\n const { document, window } = useDOM();\n const activeElement = document.activeElement as HTMLElement;\n\n const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[]>(null);\n const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);\n\n // HANDLE TRAP MOUNT\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusOnTrapMount = useTimeout(() => {\n if (keyboardInput && !ref.current?.contains(activeElement) && focusableNodes?.length) {\n focusableNodes[0].focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n focusOnTrapMount.set();\n }, []);\n\n // HANDLE FOCUSABLE NODES\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return noop();\n }\n\n const nodes: HTMLElement[] = [];\n Array.prototype.forEach.call(\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n (focusableEl: Element) => {\n const { display, visibility } = window.getComputedStyle(focusableEl);\n\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl as HTMLElement);\n }\n },\n );\n\n if (nodes?.length) {\n setFocusableNodes(nodes);\n }\n\n return noop();\n }, [children]);\n\n // HANDLE TRAP UNMOUNT\n\n const focusOnTrapUnmount = useTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n useIsomorphicLayoutEffect(() => {\n if (restoreFocus) {\n setRestoreFocusTo(activeElement);\n\n return () => {\n focusOnTrapUnmount.set();\n };\n }\n\n return noop();\n }, [restoreFocus]);\n\n const onDocumentKeydown = (e: KeyboardEvent) => {\n if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n const lastIdx = focusableNodes.length - 1;\n const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n const shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;\n\n if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {\n e.preventDefault();\n\n const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== activeElement) {\n node.focus();\n }\n\n return false;\n }\n }\n\n if (pressedKey(e) === Keys.ESCAPE) {\n onClose();\n }\n\n return true;\n };\n useGlobalEventListener(document, 'keydown', onDocumentKeydown, { capture: true });\n\n return (\n <Component ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"file":"FocusTrap.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiTabbar{position:fixed;z-index:2;bottom:0;left:0;width:100%;height:48px;height:var(--tabbar_height);
|
|
1
|
+
.vkuiTabbar{position:fixed;z-index:2;bottom:0;left:0;width:100%;height:48px;height:var(--tabbar_height);padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);box-sizing:content-box;background:#fff;background:var(--header_alternate_background)}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--ios.vkuiTabbar--shadow::before{position:absolute;bottom:100%;left:0;width:100%;height:1px;background:#d7d8d9;background:var(--separator_common);-webkit-transform-origin:center bottom;transform-origin:center bottom;content:''}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios::before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios::before{-webkit-transform:scaleY(.33);transform:scaleY(.33)}}.vkuiTabbar--android.vkuiTabbar--shadow,.vkuiTabbar--vkcom.vkuiTabbar--shadow{box-shadow:0 -2px 4px 0 rgba(0,0,0,.06),0 0 2px 0 rgba(0,0,0,.08)}
|
|
@@ -31,7 +31,9 @@ var Tabbar = function Tabbar(props) {
|
|
|
31
31
|
vkuiClass: classNames(getClassName('Tabbar', platform), "Tabbar--l-".concat(getItemsLayout()), {
|
|
32
32
|
'Tabbar--shadow': shadow
|
|
33
33
|
})
|
|
34
|
-
}, restProps),
|
|
34
|
+
}, restProps), createScopedElement("div", {
|
|
35
|
+
vkuiClass: "Tabbar__in"
|
|
36
|
+
}, children));
|
|
35
37
|
};
|
|
36
38
|
|
|
37
39
|
Tabbar.defaultProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA;;AAUA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWS,QAAX,CAAb,sBAAgDC,cAAc,EAA9D,GAAoE;AACvF,wBAAkBJ;AADqE,KAApE;AADvB,KAIME,SAJN,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA;;AAUA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWS,QAAX,CAAb,sBAAgDC,cAAc,EAA9D,GAAoE;AACvF,wBAAkBJ;AADqE,KAApE;AADvB,KAIME,SAJN,GAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CANF,CADF;AAYD,CA1BD;;AA4BAF,MAAM,CAACU,YAAP,GAAsB;AACpBP,EAAAA,MAAM,EAAE;AADY,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n */\n shadow?: boolean;\n itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n const { children, shadow, itemsLayout, ...restProps } = props;\n const platform = usePlatform();\n\n const getItemsLayout = () => {\n switch (itemsLayout) {\n case 'horizontal':\n case 'vertical':\n return itemsLayout;\n default:\n return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n }\n };\n\n return (\n <div\n vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n 'Tabbar--shadow': shadow,\n })}\n {...restProps}\n >\n <div vkuiClass=\"Tabbar__in\">\n {children}\n </div>\n </div>\n );\n};\n\nTabbar.defaultProps = {\n shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.vkuiTabbarItem{
|
|
1
|
+
.vkuiTabbarItem{display:flex;align-items:center;justify-content:center;color:#99a2ad;color:var(--tabbar_inactive_icon);text-decoration:none;border:0;outline:0;padding:0;background:0 0;height:48px;height:var(--tabbar_height);position:relative}.vkuiTabbar .vkuiTabbarItem{flex-shrink:0;max-width:100%;min-width:0;flex-grow:1;flex-basis:0}.vkuiTabbarItem--selected{color:#2975cc;color:var(--tabbar_active_icon)}.vkuiTabbarItem__tappable{position:absolute}.vkuiTabbarItem__in{display:flex;padding:0 2px;align-items:center;justify-content:center;pointer-events:none;height:100%;overflow:hidden}.vkuiTabbar--l-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in{position:relative;top:2px}.vkuiTabbar--l-vertical .vkuiTabbarItem__in{flex-direction:column}.vkuiTabbar--l-horizontal .vkuiTabbarItem__in{flex-direction:row}.vkuiTabbarItem__icon{position:relative}.vkuiTabbarItem__label .vkuiCounter{position:absolute;top:-2px;right:-9px}.vkuiTabbarItem__label .vkuiBadge{position:absolute;top:-2px;right:-4px}.vkuiTabbarItem__text{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.vkuiTabbar--l-vertical .vkuiTabbarItem__text{font-size:10px;line-height:12px;font-weight:500;margin-top:2px}.vkuiTabbar--l-horizontal .vkuiTabbarItem__text{font-size:13px;font-weight:500;margin-left:8px}.vkuiTabbarItem--android .vkuiTabbarItem__tappable{width:calc(100% + 16px);padding-bottom:calc(100% + 16px);border-radius:50%}.vkuiTabbarItem--android:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.vkuiTabbarItem--android:last-child{border-top-right-radius:0;border-bottom-right-radius:0}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable{width:100%;height:100%;top:0;left:0}.vkuiTabbarItem--ios .vkuiTabbarItem__in{transition:-webkit-transform .07s cubic-bezier(.36,.66,.04,1);transition:transform .07s cubic-bezier(.36,.66,.04,1);transition:transform .07s cubic-bezier(.36,.66,.04,1),-webkit-transform .07s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .07s var(--ios-easing);transition:transform .07s var(--ios-easing);transition:transform .07s var(--ios-easing),-webkit-transform .07s var(--ios-easing)}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable--active+.vkuiTabbarItem__in{-webkit-transform:scale(.96);transform:scale(.96)}
|
|
@@ -1,29 +1,45 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "selected", "label", "indicator", "text"];
|
|
3
|
+
var _excluded = ["children", "selected", "label", "indicator", "text", "href", "Component", "disabled"];
|
|
4
4
|
import { createScopedElement } from "../../lib/jsxRuntime";
|
|
5
5
|
import { getClassName } from "../../helpers/getClassName";
|
|
6
6
|
import Counter from "../Counter/Counter";
|
|
7
7
|
import { classNames } from "../../lib/classNames";
|
|
8
8
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
9
9
|
import { hasReactNode } from "../../lib/utils";
|
|
10
|
+
import Tappable from "../Tappable/Tappable";
|
|
11
|
+
import { Platform } from "../../lib/platform";
|
|
10
12
|
import "./TabbarItem.css";
|
|
11
13
|
|
|
12
|
-
var TabbarItem = function TabbarItem(
|
|
13
|
-
var children =
|
|
14
|
-
selected =
|
|
15
|
-
label =
|
|
16
|
-
indicator =
|
|
17
|
-
text =
|
|
18
|
-
|
|
14
|
+
var TabbarItem = function TabbarItem(_ref) {
|
|
15
|
+
var children = _ref.children,
|
|
16
|
+
selected = _ref.selected,
|
|
17
|
+
label = _ref.label,
|
|
18
|
+
indicator = _ref.indicator,
|
|
19
|
+
text = _ref.text,
|
|
20
|
+
href = _ref.href,
|
|
21
|
+
_ref$Component = _ref.Component,
|
|
22
|
+
Component = _ref$Component === void 0 ? href ? 'a' : 'button' : _ref$Component,
|
|
23
|
+
disabled = _ref.disabled,
|
|
24
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
|
|
26
|
+
var platform = usePlatform(); // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
|
|
19
27
|
|
|
20
|
-
var platform = usePlatform();
|
|
21
|
-
var Component = restProps.href ? 'a' : 'div';
|
|
22
28
|
return createScopedElement(Component, _extends({}, restProps, {
|
|
29
|
+
disabled: disabled,
|
|
30
|
+
href: href,
|
|
23
31
|
vkuiClass: classNames(getClassName('TabbarItem', platform), {
|
|
24
32
|
'TabbarItem--selected': selected,
|
|
25
33
|
'TabbarItem--text': !!text
|
|
26
34
|
})
|
|
35
|
+
}), createScopedElement(Tappable, {
|
|
36
|
+
role: "presentation",
|
|
37
|
+
Component: "div",
|
|
38
|
+
disabled: disabled,
|
|
39
|
+
activeMode: platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background',
|
|
40
|
+
activeEffectDelay: platform === Platform.IOS ? 0 : 300,
|
|
41
|
+
hasHover: false,
|
|
42
|
+
vkuiClass: "TabbarItem__tappable"
|
|
27
43
|
}), createScopedElement("div", {
|
|
28
44
|
vkuiClass: "TabbarItem__in"
|
|
29
45
|
}, createScopedElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","Tappable","Platform","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","IOS"],"mappings":";;;;AACA,SAASA,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,QAAT;AAEA;;AAqBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAUtC;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGd,WAAW,EAA5B,CADqB,CAGrB;;AACA,SAAQ,oBAAC,SAAD,eACFa,SADE;AAEN,IAAA,QAAQ,EAAED,QAFJ;AAGN,IAAA,IAAI,EAAEF,IAHA;AAIN,IAAA,SAAS,EAAEX,UAAU,CAACF,YAAY,CAAC,YAAD,EAAeiB,QAAf,CAAb,EAAuC;AAC1D,8BAAwBR,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAvC;AAJf,MASN,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EAAEE,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,8BAA5B,GAA6D,YAJ3E;AAKE,IAAA,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,CAA5B,GAAgC,GALrD;AAME,IAAA,QAAQ,EAAE,KANZ;AAOE,IAAA,SAAS,EAAC;AAPZ,IATM,EAkBN;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGV,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,YAAY,CAACO,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IAAuB,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KAAoCA,KAApC,CAF1B,CAFF,CADF,EAQGE,IAAI,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,IAAnC,CARX,CAlBM,CAAR;AA6BD,CA3CD;;AA6CA,eAAeL,UAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport Counter from '../Counter/Counter';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport Tappable from '../Tappable/Tappable';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport './TabbarItem.css';\n\nexport interface TabbarItemProps extends\n Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label\n HasRootRef<HTMLElement>,\n HasComponent {\n selected?: boolean;\n /**\n * Тест рядом с иконкой\n */\n text?: React.ReactNode;\n /**\n * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n */\n indicator?: React.ReactNode;\n /**\n * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n */\n label?: React.ReactNode;\n}\n\nconst TabbarItem: React.FunctionComponent<TabbarItemProps> = ({\n children,\n selected,\n label,\n indicator,\n text,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением\n return (<Component\n {...restProps}\n disabled={disabled}\n href={href}\n vkuiClass={classNames(getClassName('TabbarItem', platform), {\n 'TabbarItem--selected': selected,\n 'TabbarItem--text': !!text,\n })}\n >\n <Tappable\n role=\"presentation\"\n Component=\"div\"\n disabled={disabled}\n activeMode={platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background'}\n activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n hasHover={false}\n vkuiClass=\"TabbarItem__tappable\"\n />\n <div vkuiClass=\"TabbarItem__in\">\n <div vkuiClass=\"TabbarItem__icon\">\n {children}\n <div vkuiClass=\"TabbarItem__label\">\n {hasReactNode(indicator) && indicator}\n {!indicator && label && <Counter size=\"s\" mode=\"prominent\">{label}</Counter>}\n </div>\n </div>\n {text && <div vkuiClass=\"TabbarItem__text\">{text}</div>}\n </div>\n </Component>);\n};\n\nexport default TabbarItem;\n"],"file":"TabbarItem.js"}
|