@vkontakte/vkui 7.11.2 → 7.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ContentCard/ContentCard.d.ts.map +1 -1
- package/dist/components/ContentCard/ContentCard.js +4 -1
- package/dist/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/components/ImageBase/ImageBase.d.ts.map +1 -1
- package/dist/components/ImageBase/ImageBase.js +4 -1
- package/dist/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.d.ts +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.d.ts.map +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js +18 -20
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/components/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/useTooltip.js +2 -13
- package/dist/components/Tooltip/useTooltip.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.module.css +4 -0
- package/dist/cssm/components/ContentCard/ContentCard.js +4 -1
- package/dist/cssm/components/ContentCard/ContentCard.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.js +4 -1
- package/dist/cssm/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js +14 -19
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cssm/components/Tooltip/useTooltip.js +2 -13
- package/dist/cssm/components/Tooltip/useTooltip.js.map +1 -1
- package/dist/cssm/hooks/useAdaptivityWithJSMediaQueries.js +5 -4
- package/dist/cssm/hooks/useAdaptivityWithJSMediaQueries.js.map +1 -1
- package/dist/hooks/useAdaptivityWithJSMediaQueries.d.ts +0 -13
- package/dist/hooks/useAdaptivityWithJSMediaQueries.d.ts.map +1 -1
- package/dist/hooks/useAdaptivityWithJSMediaQueries.js +5 -4
- package/dist/hooks/useAdaptivityWithJSMediaQueries.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +1 -1
- package/src/components/CalendarHeader/CalendarHeader.module.css +4 -0
- package/src/components/CalendarHeader/CalendarHeader.module.css.d.ts.map +1 -1
- package/src/components/ContentCard/ContentCard.tsx +4 -1
- package/src/components/ImageBase/ImageBase.tsx +4 -1
- package/src/components/PanelHeaderButton/PanelHeaderButton.tsx +18 -20
- package/src/components/Tooltip/useTooltip.tsx +1 -13
- package/src/hooks/useAdaptivityWithJSMediaQueries.ts +8 -3
|
@@ -27,6 +27,10 @@ getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, d
|
|
|
27
27
|
baseClassName: styles.tappable,
|
|
28
28
|
children: [
|
|
29
29
|
(src || srcSet) && /*#__PURE__*/ _jsx("img", {
|
|
30
|
+
// safari и firefox нужно чтобы атрибут `loading` был до `src`
|
|
31
|
+
//
|
|
32
|
+
// https://mihaly4.ru/image-loading-lazy-bug
|
|
33
|
+
loading: loading,
|
|
30
34
|
ref: getRef,
|
|
31
35
|
className: styles.img,
|
|
32
36
|
src: src,
|
|
@@ -34,7 +38,6 @@ getRef, maxHeight, src, srcSet, alt = '', width = '100%', height, crossOrigin, d
|
|
|
34
38
|
alt: alt,
|
|
35
39
|
crossOrigin: crossOrigin,
|
|
36
40
|
decoding: decoding,
|
|
37
|
-
loading: loading,
|
|
38
41
|
referrerPolicy: referrerPolicy,
|
|
39
42
|
sizes: sizes,
|
|
40
43
|
useMap: useMap,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n extends HasRootRef<HTMLDivElement>,\n HasComponent,\n Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n HasRef<HTMLImageElement> {\n /**\n Текст над заголовком.\n */\n overTitle?: React.ReactNode;\n /**\n Заголовок.\n */\n title?: React.ReactNode;\n /**\n Позволяет поменять тег используемый для заголовка.\n */\n titleComponent?: React.ElementType;\n /**\n Текст.\n */\n description?: React.ReactNode;\n /**\n Нижний текст.\n */\n caption?: React.ReactNode;\n /**\n Максимальная высота изображения.\n */\n maxHeight?: number;\n /**\n * Внешний вид карточки.\n */\n mode?: CardProps['mode'];\n /**\n * Пользовательское значения стиля `object-fit` для картинки\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n */\n imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n overTitle,\n title,\n titleComponent = 'span',\n description,\n caption,\n // card props\n className,\n mode = 'shadow',\n style,\n getRootRef,\n // img props\n getRef,\n maxHeight,\n src,\n srcSet,\n alt = '',\n width = '100%',\n height,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n useMap,\n fetchPriority,\n imageObjectFit,\n hasHover = false,\n hasActive = false,\n Component = 'li',\n ...restProps\n}: ContentCardProps): React.ReactNode => {\n return (\n <Card\n mode={mode}\n getRootRef={getRootRef}\n Component={Component}\n style={style}\n className={classNames(restProps.disabled && styles.disabled, className)}\n >\n <Tappable\n hasHover={hasHover}\n hasActive={hasActive}\n {...restProps}\n baseClassName={styles.tappable}\n >\n {(src || srcSet) && (\n <img\n ref={getRef}\n className={styles.img}\n src={src}\n srcSet={srcSet}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { Card, type CardProps } from '../Card/Card';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n extends HasRootRef<HTMLDivElement>,\n HasComponent,\n Omit<TappableOmitProps, 'getRootRef' | 'crossOrigin' | 'title' | 'src'>,\n Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n HasRef<HTMLImageElement> {\n /**\n Текст над заголовком.\n */\n overTitle?: React.ReactNode;\n /**\n Заголовок.\n */\n title?: React.ReactNode;\n /**\n Позволяет поменять тег используемый для заголовка.\n */\n titleComponent?: React.ElementType;\n /**\n Текст.\n */\n description?: React.ReactNode;\n /**\n Нижний текст.\n */\n caption?: React.ReactNode;\n /**\n Максимальная высота изображения.\n */\n maxHeight?: number;\n /**\n * Внешний вид карточки.\n */\n mode?: CardProps['mode'];\n /**\n * Пользовательское значения стиля `object-fit` для картинки\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n */\n imageObjectFit?: React.CSSProperties['objectFit'];\n}\n\n/**\n * @see https://vkui.io/components/content-card\n */\nexport const ContentCard = ({\n overTitle,\n title,\n titleComponent = 'span',\n description,\n caption,\n // card props\n className,\n mode = 'shadow',\n style,\n getRootRef,\n // img props\n getRef,\n maxHeight,\n src,\n srcSet,\n alt = '',\n width = '100%',\n height,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n useMap,\n fetchPriority,\n imageObjectFit,\n hasHover = false,\n hasActive = false,\n Component = 'li',\n ...restProps\n}: ContentCardProps): React.ReactNode => {\n return (\n <Card\n mode={mode}\n getRootRef={getRootRef}\n Component={Component}\n style={style}\n className={classNames(restProps.disabled && styles.disabled, className)}\n >\n <Tappable\n hasHover={hasHover}\n hasActive={hasActive}\n {...restProps}\n baseClassName={styles.tappable}\n >\n {(src || srcSet) && (\n <img\n // safari и firefox нужно чтобы атрибут `loading` был до `src`\n //\n // https://mihaly4.ru/image-loading-lazy-bug\n loading={loading}\n ref={getRef}\n className={styles.img}\n src={src}\n srcSet={srcSet}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n useMap={useMap}\n {...getFetchPriorityProp(fetchPriority)}\n height={height}\n width={width}\n style={{ maxHeight, objectFit: imageObjectFit }}\n />\n )}\n <div className={styles.body}>\n {hasReactNode(overTitle) && (\n <Caption\n className={classNames(styles.text, styles.overTitle)}\n weight=\"1\"\n level=\"3\"\n caps\n >\n {overTitle}\n </Caption>\n )}\n {hasReactNode(title) && (\n <Headline className={styles.text} weight=\"2\" level=\"1\" Component={titleComponent}>\n {title}\n </Headline>\n )}\n {hasReactNode(description) && <Text className={styles.text}>{description}</Text>}\n {hasReactNode(caption) && (\n <Footnote className={classNames(styles.text, styles.caption)}>{caption}</Footnote>\n )}\n </div>\n </Tappable>\n </Card>\n );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","overTitle","title","titleComponent","description","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","imageObjectFit","hasHover","hasActive","Component","restProps","disabled","baseClassName","tappable","img","ref","objectFit","div","body","text","weight","level","caps"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,qBAAkB;AAEvD,SAASC,IAAI,QAAwB,kBAAe;AACpD,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA2C9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,QAAQ,MAAM,EACdC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,cAAc,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,YAAY,IAAI,EAChB,GAAGC,WACc;IACjB,qBACE,KAACnC;QACCc,MAAMA;QACNE,YAAYA;QACZkB,WAAWA;QACXnB,OAAOA;QACPF,WAAWhB,WAAWsC,UAAUC,QAAQ,IAAI9B,OAAO8B,QAAQ,EAAEvB;kBAE7D,cAAA,MAACZ;YACC+B,UAAUA;YACVC,WAAWA;YACV,GAAGE,SAAS;YACbE,eAAe/B,OAAOgC,QAAQ;;gBAE5BnB,CAAAA,OAAOC,MAAK,mBACZ,KAACmB;oBACC,8DAA8D;oBAC9D,EAAE;oBACF,4CAA4C;oBAC5Cb,SAASA;oBACTc,KAAKvB;oBACLJ,WAAWP,OAAOiC,GAAG;oBACrBpB,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVE,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;oBACP,GAAG9B,qBAAqB+B,cAAc;oBACvCP,QAAQA;oBACRD,OAAOA;oBACPP,OAAO;wBAAEG;wBAAWuB,WAAWV;oBAAe;;8BAGlD,MAACW;oBAAI7B,WAAWP,OAAOqC,IAAI;;wBACxB7C,aAAaU,4BACZ,KAACN;4BACCW,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOE,SAAS;4BACnDqC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHvC;;wBAGJV,aAAaW,wBACZ,KAACL;4BAASS,WAAWP,OAAOsC,IAAI;4BAAEC,QAAO;4BAAIC,OAAM;4BAAIZ,WAAWxB;sCAC/DD;;wBAGJX,aAAaa,8BAAgB,KAACN;4BAAKQ,WAAWP,OAAOsC,IAAI;sCAAGjC;;wBAC5Db,aAAac,0BACZ,KAACT;4BAASU,WAAWhB,WAAWS,OAAOsC,IAAI,EAAEtC,OAAOM,OAAO;sCAAIA;;;;;;;AAM3E,EAAE"}
|
|
@@ -92,12 +92,15 @@ const sizeToNumber = (size)=>{
|
|
|
92
92
|
onError?.(event);
|
|
93
93
|
};
|
|
94
94
|
const { getRootRef: getImgRef, fetchPriority, ...imgRest } = useMergeProps(hasSrc ? {
|
|
95
|
+
// safari и firefox нужно чтобы атрибут `loading` был до `src`
|
|
96
|
+
//
|
|
97
|
+
// https://mihaly4.ru/image-loading-lazy-bug
|
|
98
|
+
loading,
|
|
95
99
|
getRootRef: getRef,
|
|
96
100
|
alt,
|
|
97
101
|
className: classNames(styles.img, getObjectFitClassName(objectFit), objectPosition && styles.withObjectPosition, filter && styles.withFilter, keepAspectRatio && styles.imgKeepRatio, failed && styles.imgHiddenAlt),
|
|
98
102
|
crossOrigin,
|
|
99
103
|
decoding,
|
|
100
|
-
loading,
|
|
101
104
|
referrerPolicy,
|
|
102
105
|
style: mergeStyle(keepAspectRatio ? {
|
|
103
106
|
width: widthImg || width,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n AnchorHTMLAttributesOnly,\n HasDataAttribute,\n HasRootRef,\n LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n type FloatElementIndentation,\n type FloatElementPlacement,\n ImageBaseFloatElement,\n type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n ImageBaseFloatElementProps,\n FloatElementPlacement,\n FloatElementIndentation,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement> {\n /**\n * Задаёт размер картинки.\n *\n * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n *\n * > ⚠️ Использование кастомного размера – это пограничный кейс.\n */\n size?: LiteralUnion<ImageBaseSize, number>;\n /**\n * Ширина изображения.\n */\n widthSize?: number | string;\n /**\n * Высота изображения.\n */\n heightSize?: number | string;\n /**\n * Отключает обводку.\n */\n noBorder?: boolean;\n /**\n * Фолбек на случай, если картинка не прогрузилась.\n *\n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n *\n * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n *\n * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n *\n * > ⚠️ Может перекрывать `children`.\n */\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /**\n * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n */\n withTransparentBackground?: boolean;\n /**\n * Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n */\n objectFit?: React.CSSProperties['objectFit'];\n /**\n * Пользовательское значения стиля object-position\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n */\n objectPosition?: React.CSSProperties['objectPosition'];\n /**\n * Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n */\n keepAspectRatio?: boolean;\n /**\n * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n */\n elementTiming?: string;\n /**\n * Пользовательское значения стиля filter\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n */\n filter?: React.CSSProperties['filter'];\n /**\n * Свойства, которые можно прокинуть внутрь компонента:\n * - `img`: свойства для прокидывания в тег `<img>`;.\n */\n slotProps?: {\n img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;\n };\n /**\n * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n */\n getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles.imgObjectFitContain;\n case 'cover':\n return styles.imgObjectFitCover;\n case 'none':\n return styles.imgObjectFitNone;\n case 'scale-down':\n return styles.imgObjectFitScaleDown;\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/**\n * @see https://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n FloatElement: typeof ImageBaseFloatElement;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority: fetchPriorityProp,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n objectPosition,\n filter,\n keepAspectRatio = false,\n getRootRef,\n elementTiming,\n slotProps,\n ...restProps\n}: ImageBaseProps) => {\n if (process.env.NODE_ENV === 'development') {\n /* istanbul ignore if: не проверяем в тестах */\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n );\n }\n }\n\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n const wrapperRef = useExternRef(getRootRef);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n const hasSrc = src || srcSet;\n const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (React.isValidElement(fallbackIcon)) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const {\n getRootRef: getImgRef,\n fetchPriority,\n ...imgRest\n } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n hasSrc\n ? {\n getRootRef: getRef,\n alt,\n className: classNames(\n styles.img,\n getObjectFitClassName(objectFit),\n objectPosition && styles.withObjectPosition,\n filter && styles.withFilter,\n keepAspectRatio && styles.imgKeepRatio,\n failed && styles.imgHiddenAlt,\n ),\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n style: mergeStyle(\n keepAspectRatio\n ? {\n width: widthImg || width,\n height: heightImg || height,\n }\n : undefined,\n objectPosition || filter\n ? {\n '--vkui_internal--ImageBase_object_position': objectPosition,\n '--vkui_internal--ImageBase_object_filter': filter,\n }\n : undefined,\n ),\n sizes,\n src,\n srcSet,\n useMap,\n width,\n height,\n onLoad: handleImageLoad,\n onError: handleImageError,\n fetchPriority: fetchPriorityProp,\n // @ts-expect-error: TS2322 отсутствует в @types/react\n elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n }\n : {},\n hasSrc ? slotProps?.img : undefined,\n );\n\n const imgRef = useExternRef(getImgRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n const onMouseOver = () => {\n mouseOverHandlersRef.current.forEach((fn) => fn());\n };\n\n const onMouseOut = () => {\n mouseOutHandlersRef.current.forEach((fn) => fn());\n };\n\n const contextValue = React.useMemo(\n () => ({\n size,\n onMouseOverHandlers: mouseOverHandlersRef.current,\n onMouseOutHandlers: mouseOutHandlersRef.current,\n }),\n [size],\n );\n\n return (\n <ImageBaseContext.Provider value={contextValue}>\n <Clickable\n baseStyle={{ width, height }}\n baseClassName={classNames(\n styles.host,\n hasSrc && loaded && styles.loaded,\n withTransparentBackground && styles.transparentBackground,\n )}\n getRootRef={wrapperRef}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n {...restProps}\n >\n {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}\n {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n {children && <div className={styles.children}>{children}</div>}\n {!noBorder && <div aria-hidden className={styles.border} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","img","withObjectPosition","withFilter","imgKeepRatio","imgHiddenAlt","style","elementtiming","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","Provider","baseStyle","baseClassName","host","transparentBackground","ref","div","fallback","aria-hidden","border","Badge","Overlay","FloatElement"],"mappings":"AAAA;;AAEA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,KAAK,QAAQ,yBAAsB;AAC5C,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,oBAAoB,QAAQ,qBAAkB;AACvD,SAASC,QAAQ,QAAQ,wBAAqB;AAO9C,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,cAAc,QAAkC,qCAAkC;AAC3F,SAGEC,qBAAqB,QAEhB,mDAAgD;AACvD,SAASC,gBAAgB,QAAoC,yCAAsC;AACnG,SAASC,gBAAgB,QAAQ,eAAY;AAE7C,SAASC,oBAAoB,EAAEC,YAAY,QAAQ,kBAAe;AAClE,OAAOC,YAAY,yBAAyB;AAa5C,SACEC,+BAA+B,EAC/BC,kCAAkC,EAClCC,iCAAiC,QAC5B,eAAY;AAEnB,SAASN,gBAAgB,GAAG;AAE5B,MAAMO,OAAOZ,SAAS;AAEtB;;CAEC,GACD,MAAMa,cAAc;AAkFpB,MAAMC,wBAAwB,CAACC;IAC7B,OAAQA;QACN,KAAK;YACH,OAAOP,OAAOQ,mBAAmB;QACnC,KAAK;YACH,OAAOR,OAAOS,iBAAiB;QACjC,KAAK;YACH,OAAOT,OAAOU,gBAAgB;QAChC,KAAK;YACH,OAAOV,OAAOW,qBAAqB;IACvC;IACA,OAAOC;AACT;AAEA,MAAMC,UAAU,CAACC;IACf,IAAIA,MAAMC,QAAQ,CAAC,OAAO;QACxB,OAAOC,SAASF;IAClB;IACA,OAAOF;AACT;AAEA,MAAMK,eAAe,CAACC;IACpB,IAAI,OAAOA,SAAS,UAAU;QAC5B,OAAOL,QAAQK;IACjB;IACA,OAAOA;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,YAIT,CAAC,EACHC,GAAG,EACHC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,GAAG,EACHC,MAAM,EACNC,MAAM,EACNC,eAAeC,iBAAiB,EAChCC,MAAM,EACNb,MAAMc,QAAQ,EACdC,OAAOC,QAAQ,EACfC,QAAQC,SAAS,EACjBC,SAAS,EACTC,UAAU,EACVC,WAAW,KAAK,EAChBC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,yBAAyB,EACzBtC,YAAY,OAAO,EACnBuC,cAAc,EACdC,MAAM,EACNC,kBAAkB,KAAK,EACvBC,UAAU,EACVC,aAAa,EACbC,SAAS,EACT,GAAGC,WACY;IACf,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,6CAA6C,GAC7C,IAAIxB,QAAQ;YACV3B,KACE;QAEJ;IACF;IAEA,MAAMc,OAAOc,YAAY3C,MAAM;QAAC4B,aAAaoB;QAAYpB,aAAaqB;KAAY,EAAEjC;IACpF,MAAMmD,aAAarE,aAAa8D;IAEhC,MAAMhB,QAAQI,aAAcW,CAAAA,kBAAkBpC,YAAYM,IAAG;IAC7D,MAAMiB,SAASG,cAAeU,CAAAA,kBAAkBpC,YAAYM,IAAG;IAE/D,MAAM,CAACuC,QAAQC,UAAU,GAAG1E,MAAM2E,QAAQ,CAAC;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAG7E,MAAM2E,QAAQ,CAAC;IAE3C,MAAMG,uBAAuB/E,OAAuB,EAAE;IACtD,MAAMgF,sBAAsBhF,OAAuB,EAAE;IAErD,MAAMiF,SAAStC,OAAOC;IACtB,MAAMa,eAAeoB,UAAU,CAACI,SAASvB,mBAAmB;IAE5D,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CxD,aAAamB;QACb,kBAAIlC,MAAMiF,cAAc,CAACzB,eAAe;YACtC1C,qBAAqBoB,MAAM;gBAAEgD,MAAM;gBAAgBpD,OAAO0B;YAAa;QACzE;IACF;IAEA,MAAM2B,kBAAkB,CAACC;QACvB,IAAIX,QAAQ;YACV;QACF;QAEAC,UAAU;QACVG,UAAU;QACVlB,SAASyB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBV,UAAU;QACVG,UAAU;QACVjB,UAAUwB;IACZ;IAEA,MAAM,EACJnB,YAAYqB,SAAS,EACrBzC,aAAa,EACb,GAAG0C,SACJ,GAAGnF,cACF4E,SACI;QACEf,YAAYlB;QACZX;QACAoD,WAAWvF,WACTe,OAAOyE,GAAG,EACVnE,sBAAsBC,YACtBuC,kBAAkB9C,OAAO0E,kBAAkB,EAC3C3B,UAAU/C,OAAO2E,UAAU,EAC3B3B,mBAAmBhD,OAAO4E,YAAY,EACtChB,UAAU5D,OAAO6E,YAAY;QAE/BxD;QACAC;QACAC;QACAC;QACAsD,OAAO5F,WACL8D,kBACI;YACEf,OAAOC,YAAYD;YACnBE,QAAQC,aAAaD;QACvB,IACAvB,WACJkC,kBAAkBC,SACd;YACE,8CAA8CD;YAC9C,4CAA4CC;QAC9C,IACAnC;QAENa;QACAC;QACAC;QACAC;QACAK;QACAE;QACAQ,QAAQwB;QACRvB,SAASyB;QACTxC,eAAeC;QACf,sDAAsD;QACtDiD,eAAe7B;IACjB,IACA,CAAC,GACLc,SAASb,WAAWsB,MAAM7D;IAG5B,MAAMoE,SAAS7F,aAAamF;IAC5B,MAAMW,2BAA2BjG,MAAMD,MAAM,CAAC;IAC9CC,MAAMkG,SAAS,CACb,SAASC;QACP,IAAIF,yBAAyBG,OAAO,EAAE;YACpC;QACF;QACAH,yBAAyBG,OAAO,GAAG;QAEnC,IAAIJ,OAAOI,OAAO,IAAIJ,OAAOI,OAAO,CAACC,QAAQ,IAAI,CAAC5B,QAAQ;YACxD,MAAMW,QAAQ,IAAIkB,MAAM;YACxBN,OAAOI,OAAO,CAACG,aAAa,CAACnB;QAC/B;IACF,GACA;QAACY;QAAQvB;KAAO;IAGlB,MAAM+B,cAAc;QAClB1B,qBAAqBsB,OAAO,CAACK,OAAO,CAAC,CAACC,KAAOA;IAC/C;IAEA,MAAMC,aAAa;QACjB5B,oBAAoBqB,OAAO,CAACK,OAAO,CAAC,CAACC,KAAOA;IAC9C;IAEA,MAAME,eAAe5G,MAAM6G,OAAO,CAChC,IAAO,CAAA;YACL3E;YACA4E,qBAAqBhC,qBAAqBsB,OAAO;YACjDW,oBAAoBhC,oBAAoBqB,OAAO;QACjD,CAAA,GACA;QAAClE;KAAK;IAGR,qBACE,KAACrB,iBAAiBmG,QAAQ;QAAClF,OAAO8E;kBAChC,cAAA,MAACnG;YACCwG,WAAW;gBAAEhE;gBAAOE;YAAO;YAC3B+D,eAAejH,WACbe,OAAOmG,IAAI,EACXnC,UAAUP,UAAUzD,OAAOyD,MAAM,EACjCZ,6BAA6B7C,OAAOoG,qBAAqB;YAE3DnD,YAAYO;YACZgC,aAAaA;YACbG,YAAYA;YACX,GAAGvC,SAAS;;gBAEZY,wBAAU,KAACS;oBAAI4B,KAAKrB;oBAAS,GAAGT,OAAO;oBAAG,GAAGhF,qBAAqBsC,cAAc;;gBAChFW,8BAAgB,KAAC8D;oBAAI9B,WAAWxE,OAAOuG,QAAQ;8BAAG/D;;gBAClDE,0BAAY,KAAC4D;oBAAI9B,WAAWxE,OAAO0C,QAAQ;8BAAGA;;gBAC9C,CAACH,0BAAY,KAAC+D;oBAAIE,aAAW;oBAAChC,WAAWxE,OAAOyG,MAAM;;;;;AAI/D,EAAE;AACFtF,UAAUuF,KAAK,GAAGhH;AAClByB,UAAUwF,OAAO,GAAG/G;AACpBuB,UAAUyF,YAAY,GAAGjH;AAEzB,IAAI0D,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCjE,4BAA4B6B,UAAUuF,KAAK,EAAE;IAC7CpH,4BAA4B6B,UAAUwF,OAAO,EAAE;IAC/CrH,4BAA4B6B,UAAUyF,YAAY,EAAE;AACtD"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { minOr } from '../../lib/comparing';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type {\n AnchorHTMLAttributesOnly,\n HasDataAttribute,\n HasRootRef,\n LiteralUnion,\n} from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport {\n type FloatElementIndentation,\n type FloatElementPlacement,\n ImageBaseFloatElement,\n type ImageBaseFloatElementProps,\n} from './ImageBaseFloatElement/ImageBaseFloatElement';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n ImageBaseFloatElementProps,\n FloatElementPlacement,\n FloatElementIndentation,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nconst warn = warnOnce('ImageBase');\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement> {\n /**\n * Задаёт размер картинки.\n *\n * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n *\n * > ⚠️ Использование кастомного размера – это пограничный кейс.\n */\n size?: LiteralUnion<ImageBaseSize, number>;\n /**\n * Ширина изображения.\n */\n widthSize?: number | string;\n /**\n * Высота изображения.\n */\n heightSize?: number | string;\n /**\n * Отключает обводку.\n */\n noBorder?: boolean;\n /**\n * Фолбек на случай, если картинка не прогрузилась.\n *\n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n *\n * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n *\n * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n *\n * > ⚠️ Может перекрывать `children`.\n */\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /**\n * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n */\n withTransparentBackground?: boolean;\n /**\n * Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).\n */\n objectFit?: React.CSSProperties['objectFit'];\n /**\n * Пользовательское значения стиля object-position\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).\n */\n objectPosition?: React.CSSProperties['objectPosition'];\n /**\n * Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.\n */\n keepAspectRatio?: boolean;\n /**\n * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.\n */\n elementTiming?: string;\n /**\n * Пользовательское значения стиля filter\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).\n */\n filter?: React.CSSProperties['filter'];\n /**\n * Свойства, которые можно прокинуть внутрь компонента:\n * - `img`: свойства для прокидывания в тег `<img>`;.\n */\n slotProps?: {\n img?: React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute;\n };\n /**\n * @deprecated Since 7.9.0. Будет удалено в v9. Используйте `slotProps={ img: { getRootRef: ... } }`.\n */\n getRef?: React.Ref<HTMLImageElement>; // TODO [>=9] Удалить свойство\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles.imgObjectFitContain;\n case 'cover':\n return styles.imgObjectFitCover;\n case 'none':\n return styles.imgObjectFitNone;\n case 'scale-down':\n return styles.imgObjectFitScaleDown;\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/**\n * @see https://vkui.io/components/image-base\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n FloatElement: typeof ImageBaseFloatElement;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority: fetchPriorityProp,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n objectPosition,\n filter,\n keepAspectRatio = false,\n getRootRef,\n elementTiming,\n slotProps,\n ...restProps\n}: ImageBaseProps) => {\n if (process.env.NODE_ENV === 'development') {\n /* istanbul ignore if: не проверяем в тестах */\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее и будет удалено в VKUI v9. Используйте `slotProps={ img: { getRootRef: ... } }`',\n );\n }\n }\n\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n const wrapperRef = useExternRef(getRootRef);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const mouseOverHandlersRef = useRef<VoidFunction[]>([]);\n const mouseOutHandlersRef = useRef<VoidFunction[]>([]);\n\n const hasSrc = src || srcSet;\n const fallbackIcon = failed || !hasSrc ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (React.isValidElement(fallbackIcon)) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const {\n getRootRef: getImgRef,\n fetchPriority,\n ...imgRest\n } = useMergeProps<React.ComponentProps<'img'> & HasRootRef<HTMLImageElement> & HasDataAttribute>(\n hasSrc\n ? {\n // safari и firefox нужно чтобы атрибут `loading` был до `src`\n //\n // https://mihaly4.ru/image-loading-lazy-bug\n loading,\n getRootRef: getRef,\n alt,\n className: classNames(\n styles.img,\n getObjectFitClassName(objectFit),\n objectPosition && styles.withObjectPosition,\n filter && styles.withFilter,\n keepAspectRatio && styles.imgKeepRatio,\n failed && styles.imgHiddenAlt,\n ),\n crossOrigin,\n decoding,\n referrerPolicy,\n style: mergeStyle(\n keepAspectRatio\n ? {\n width: widthImg || width,\n height: heightImg || height,\n }\n : undefined,\n objectPosition || filter\n ? {\n '--vkui_internal--ImageBase_object_position': objectPosition,\n '--vkui_internal--ImageBase_object_filter': filter,\n }\n : undefined,\n ),\n sizes,\n src,\n srcSet,\n useMap,\n width,\n height,\n onLoad: handleImageLoad,\n onError: handleImageError,\n fetchPriority: fetchPriorityProp,\n // @ts-expect-error: TS2322 отсутствует в @types/react\n elementtiming: elementTiming, // eslint-disable-line react/no-unknown-property\n }\n : {},\n hasSrc ? slotProps?.img : undefined,\n );\n\n const imgRef = useExternRef(getImgRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n const onMouseOver = () => {\n mouseOverHandlersRef.current.forEach((fn) => fn());\n };\n\n const onMouseOut = () => {\n mouseOutHandlersRef.current.forEach((fn) => fn());\n };\n\n const contextValue = React.useMemo(\n () => ({\n size,\n onMouseOverHandlers: mouseOverHandlersRef.current,\n onMouseOutHandlers: mouseOutHandlersRef.current,\n }),\n [size],\n );\n\n return (\n <ImageBaseContext.Provider value={contextValue}>\n <Clickable\n baseStyle={{ width, height }}\n baseClassName={classNames(\n styles.host,\n hasSrc && loaded && styles.loaded,\n withTransparentBackground && styles.transparentBackground,\n )}\n getRootRef={wrapperRef}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n {...restProps}\n >\n {hasSrc && <img ref={imgRef} {...imgRest} {...getFetchPriorityProp(fetchPriority)} />}\n {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n {children && <div className={styles.children}>{children}</div>}\n {!noBorder && <div aria-hidden className={styles.border} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\nImageBase.Badge = ImageBaseBadge;\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.FloatElement = ImageBaseFloatElement;\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');\n defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');\n defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');\n}\n"],"names":["useRef","React","classNames","mergeStyle","useExternRef","useMergeProps","minOr","defineComponentDisplayNames","getFetchPriorityProp","warnOnce","Clickable","ImageBaseBadge","ImageBaseFloatElement","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","warn","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","fetchPriorityProp","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","objectPosition","filter","keepAspectRatio","getRootRef","elementTiming","slotProps","restProps","process","env","NODE_ENV","wrapperRef","loaded","setLoaded","useState","failed","setFailed","mouseOverHandlersRef","mouseOutHandlersRef","hasSrc","isValidElement","name","handleImageLoad","event","handleImageError","getImgRef","imgRest","className","img","withObjectPosition","withFilter","imgKeepRatio","imgHiddenAlt","style","elementtiming","imgRef","isOnLoadStatusCheckedRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","onMouseOver","forEach","fn","onMouseOut","contextValue","useMemo","onMouseOverHandlers","onMouseOutHandlers","Provider","baseStyle","baseClassName","host","transparentBackground","ref","div","fallback","aria-hidden","border","Badge","Overlay","FloatElement"],"mappings":"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"}
|
|
@@ -14,6 +14,16 @@ const platformClassNames = {
|
|
|
14
14
|
android: styles.android,
|
|
15
15
|
vkcom: styles.vkcom
|
|
16
16
|
};
|
|
17
|
+
const defaultHoverMode = {
|
|
18
|
+
ios: 'background',
|
|
19
|
+
android: 'background',
|
|
20
|
+
vkcom: styles.hover
|
|
21
|
+
};
|
|
22
|
+
const defaultActiveMode = {
|
|
23
|
+
ios: 'opacity',
|
|
24
|
+
android: 'background',
|
|
25
|
+
vkcom: styles.active
|
|
26
|
+
};
|
|
17
27
|
const ButtonTypography = ({ primary, children })=>{
|
|
18
28
|
const platform = usePlatform();
|
|
19
29
|
if (platform === 'ios') {
|
|
@@ -32,25 +42,10 @@ const ButtonTypography = ({ primary, children })=>{
|
|
|
32
42
|
const warn = warnOnce('PanelHeaderButton');
|
|
33
43
|
/**
|
|
34
44
|
* @see https://vkui.io/components/panel-header#panel-header-button
|
|
35
|
-
*/ export const PanelHeaderButton = ({ children, primary = false, label, ...restProps })=>{
|
|
45
|
+
*/ export const PanelHeaderButton = ({ children, primary = false, label, activeEffectDelay = 200, hoverMode, activeMode, ...restProps })=>{
|
|
36
46
|
const isPrimitive = isPrimitiveReactNode(children);
|
|
37
47
|
const isPrimitiveLabel = isPrimitiveReactNode(label);
|
|
38
48
|
const platform = usePlatform();
|
|
39
|
-
let hoverMode;
|
|
40
|
-
let activeMode;
|
|
41
|
-
switch(platform){
|
|
42
|
-
case 'ios':
|
|
43
|
-
hoverMode = 'background';
|
|
44
|
-
activeMode = 'opacity';
|
|
45
|
-
break;
|
|
46
|
-
case 'vkcom':
|
|
47
|
-
hoverMode = styles.hover;
|
|
48
|
-
activeMode = styles.active;
|
|
49
|
-
break;
|
|
50
|
-
default:
|
|
51
|
-
hoverMode = 'background';
|
|
52
|
-
activeMode = 'background';
|
|
53
|
-
}
|
|
54
49
|
if (process.env.NODE_ENV === 'development') {
|
|
55
50
|
/* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */ const isAccessible = hasAccessibleName({
|
|
56
51
|
children: [
|
|
@@ -70,9 +65,9 @@ const warn = warnOnce('PanelHeaderButton');
|
|
|
70
65
|
const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);
|
|
71
66
|
return /*#__PURE__*/ _jsxs(Tappable, {
|
|
72
67
|
Component: restProps.href ? 'a' : 'button',
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
activeMode: activeMode,
|
|
68
|
+
activeEffectDelay: activeEffectDelay,
|
|
69
|
+
hoverMode: hoverMode ? hoverMode : defaultHoverMode[platform],
|
|
70
|
+
activeMode: activeMode ? activeMode : defaultActiveMode[platform],
|
|
76
71
|
...restProps,
|
|
77
72
|
baseClassName: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, onlyPrimitive && styles.primitive, !isPrimitive && !isPrimitiveLabel && styles.notPrimitive),
|
|
78
73
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {\n /**\n * Флаг для обозначения первичной кнопки\n * Влияет на стилизацию кнопки.\n */\n primary?: boolean;\n /**\n * Текст или содержимое кнопки.\n */\n label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Флаг для обозначения первичной кнопки\n * Наследуется от PanelHeaderButtonProps['primary'].\n */\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkui.io/components/panel-header#panel-header-button\n */\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nconst defaultHoverMode = {\n ios: 'background',\n android: 'background',\n vkcom: styles.hover,\n};\n\nconst defaultActiveMode = {\n ios: 'opacity',\n android: 'background',\n vkcom: styles.active,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {\n /**\n * Флаг для обозначения первичной кнопки\n * Влияет на стилизацию кнопки.\n */\n primary?: boolean;\n /**\n * Текст или содержимое кнопки.\n */\n label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n /**\n * Флаг для обозначения первичной кнопки\n * Наследуется от PanelHeaderButtonProps['primary'].\n */\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkui.io/components/panel-header#panel-header-button\n */\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n activeEffectDelay = 200,\n hoverMode,\n activeMode,\n ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n const elements = [label, children].filter((item) => !!item);\n\n const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n activeEffectDelay={activeEffectDelay}\n hoverMode={hoverMode ? hoverMode : defaultHoverMode[platform]}\n activeMode={activeMode ? activeMode : defaultActiveMode[platform]}\n {...restProps}\n baseClassName={classNames(\n styles.host,\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n onlyPrimitive && styles.primitive,\n !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n )}\n >\n {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n {isPrimitiveLabel ? (\n <ButtonTypography primary={primary} className={styles.label}>\n {label}\n </ButtonTypography>\n ) : (\n label\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","defaultHoverMode","hover","defaultActiveMode","active","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","activeEffectDelay","hoverMode","activeMode","restProps","isPrimitive","isPrimitiveLabel","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAEA,MAAMC,mBAAmB;IACvBH,KAAK;IACLC,SAAS;IACTC,OAAOJ,OAAOM,KAAK;AACrB;AAEA,MAAMC,oBAAoB;IACxBL,KAAK;IACLC,SAAS;IACTC,OAAOJ,OAAOQ,MAAM;AACtB;AAsBA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWnB;IAEjB,IAAImB,aAAa,OAAO;QACtB,qBACE,KAACb;YAAMc,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACb;QAAKiB,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,oBAAoB,GAAG,EACvBC,SAAS,EACTC,UAAU,EACV,GAAGC,WACoB;IACvB,MAAMC,cAAchC,qBAAqBmB;IACzC,MAAMc,mBAAmBjC,qBAAqB2B;IAC9C,MAAMP,WAAWnB;IAEjB,IAAIiC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAenC,kBAAkB;YACrCiB,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGI,SAAS;QACd;QAEA,IAAI,CAACM,cAAc;YACjBZ,KAAKtB,gBAAgBmC,IAAI,CAACP,UAAUQ,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACb;QAAOR;KAAS,CAACsB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAK5C,qBAAqBwC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAACnC;QACCgB,WAAWU,UAAUQ,IAAI,GAAG,MAAM;QAClCX,mBAAmBA;QACnBC,WAAWA,YAAYA,YAAYhB,gBAAgB,CAACO,SAAS;QAC7DU,YAAYA,aAAaA,aAAaf,iBAAiB,CAACK,SAAS;QAChE,GAAGW,SAAS;QACbc,eAAe9C,WACbS,OAAOsC,IAAI,EACXrC,mBAAmBsC,cAAc,CAAC3B,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BgC,iBAAiBnC,OAAOwC,SAAS,EACjC,CAAChB,eAAe,CAACC,oBAAoBzB,OAAOyC,YAAY;;YAGzDjB,4BAAc,KAACf;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFc,iCACC,KAAChB;gBAAiBC,SAASA;gBAASgC,WAAW1C,OAAOmB,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}
|
|
@@ -5,7 +5,7 @@ import { useCallback } from "react";
|
|
|
5
5
|
import { classNames } from "@vkontakte/vkjs";
|
|
6
6
|
import { useFloatingElement } from "../../hooks/useFloatingElement.js";
|
|
7
7
|
import { animationFadeClassNames } from "../../lib/animation/index.js";
|
|
8
|
-
import { getArrowCoordsByMiddlewareData
|
|
8
|
+
import { getArrowCoordsByMiddlewareData } from "../../lib/floating/index.js";
|
|
9
9
|
import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
|
|
10
10
|
import { TooltipBase } from "../TooltipBase/TooltipBase.js";
|
|
11
11
|
export const useTooltip = ({ // UseFloatingMiddlewaresBootstrapOptions
|
|
@@ -87,18 +87,7 @@ id: idProp, getRootRef, appearance = 'neutral', style: styleProp, className, zIn
|
|
|
87
87
|
onPlacementChange,
|
|
88
88
|
renderFloatingComponent,
|
|
89
89
|
externalFloatingElementRef: getRootRef,
|
|
90
|
-
remapReferenceProps
|
|
91
|
-
customMiddlewares: [
|
|
92
|
-
sizeMiddleware({
|
|
93
|
-
apply ({ rects, elements, availableWidth }) {
|
|
94
|
-
const width = Math.min(Math.ceil(rects.floating.width), Math.floor(availableWidth));
|
|
95
|
-
Object.assign(elements.floating.style, {
|
|
96
|
-
width: `${width}px`
|
|
97
|
-
});
|
|
98
|
-
},
|
|
99
|
-
padding: overflowPadding
|
|
100
|
-
})
|
|
101
|
-
]
|
|
90
|
+
remapReferenceProps
|
|
102
91
|
});
|
|
103
92
|
return {
|
|
104
93
|
anchorRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type Ref, useCallback } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n type FloatingComponentProps,\n useFloatingElement,\n type UseFloatingElementProps,\n} from '../../hooks/useFloatingElement';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport { getArrowCoordsByMiddlewareData
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type Ref, useCallback } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n type FloatingComponentProps,\n useFloatingElement,\n type UseFloatingElementProps,\n} from '../../hooks/useFloatingElement';\nimport { animationFadeClassNames } from '../../lib/animation';\nimport { getArrowCoordsByMiddlewareData } from '../../lib/floating';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { TooltipBase } from '../TooltipBase/TooltipBase';\nimport { type TooltipProps } from './Tooltip';\n\nexport type UseTooltipProps = Omit<TooltipProps, 'children'> & {\n [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {\n /**\n * Реф на якорный элемент.\n */\n anchorRef: Ref<ElementType>;\n /**\n * Свойства для якорного элемента, содержит необходимые обработчики.\n */\n anchorProps: ReferenceProps<ElementType>;\n /**\n * Отрендеренный компонент тултипа.\n */\n tooltip: React.ReactNode | null;\n};\n\nexport const useTooltip = ({\n // UseFloatingMiddlewaresBootstrapOptions\n placement: placementProp = 'bottom',\n arrowPadding = 10,\n arrowHeight = 8,\n offsetByMainAxis = 8,\n offsetByCrossAxis = 0,\n hideWhenReferenceHidden,\n disableFlipMiddleware = false,\n disableShiftMiddleware = false,\n disableTriggerOnFocus = false,\n onReferenceHiddenChange,\n overflowPadding,\n\n // useFloatingWithInteractions\n defaultShown,\n shown: shownProp,\n onShownChange,\n hoverDelay = 150,\n strategy,\n\n // инверсированные св-ва для useFloatingWithInteractions\n enableInteractive = false,\n disableArrow = false,\n disableCloseAfterClick = false,\n\n // AppRootProps\n usePortal,\n\n // TooltipBaseProps\n id: idProp,\n getRootRef,\n appearance = 'neutral',\n style: styleProp,\n className,\n zIndex = 'var(--vkui--z_index_popout)',\n closable,\n onPlacementChange,\n ...popperProps\n}: UseTooltipProps): UseTooltipResult => {\n const generatedId = React.useId();\n const tooltipId = idProp || generatedId;\n\n const renderFloatingComponent = useCallback(\n ({\n shown,\n floatingProps,\n floatingRef,\n placement: resultPlacement,\n middlewareData,\n setArrowRef,\n willBeHide,\n onClose,\n }: FloatingComponentProps<HTMLDivElement>) => {\n if (!shown) {\n return null;\n }\n return (\n <AppRootPortal usePortal={usePortal}>\n <TooltipBase\n {...popperProps}\n {...floatingProps}\n style={{\n ...floatingProps.style,\n zIndex,\n ...styleProp,\n }}\n id={tooltipId}\n getRootRef={floatingRef}\n appearance={appearance}\n arrowProps={\n disableArrow\n ? undefined\n : {\n placement: resultPlacement,\n coords: getArrowCoordsByMiddlewareData(middlewareData),\n getRootRef: setArrowRef,\n }\n }\n className={classNames(\n willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n className,\n )}\n onCloseIconClick={closable ? onClose : undefined}\n />\n </AppRootPortal>\n );\n },\n [\n appearance,\n className,\n closable,\n disableArrow,\n popperProps,\n styleProp,\n tooltipId,\n usePortal,\n zIndex,\n ],\n );\n\n const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =\n useCallback(\n ({ shown, ...referenceProps }) => ({\n ...referenceProps,\n ...(shown && { 'aria-describedby': tooltipId }),\n }),\n [tooltipId],\n );\n\n const { component, anchorRef, anchorProps } = useFloatingElement({\n placement: placementProp,\n arrow: !disableArrow,\n arrowHeight,\n arrowPadding,\n offsetByMainAxis,\n offsetByCrossAxis,\n hideWhenReferenceHidden,\n disableFlipMiddleware,\n disableShiftMiddleware,\n overflowPadding,\n\n defaultShown,\n shown: shownProp,\n onShownChange,\n trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],\n onReferenceHiddenChange,\n hoverDelay,\n closeAfterClick: !disableCloseAfterClick,\n disableInteractive: !enableInteractive,\n strategy,\n\n onPlacementChange,\n\n renderFloatingComponent,\n externalFloatingElementRef: getRootRef,\n remapReferenceProps,\n });\n\n return {\n anchorRef,\n anchorProps,\n tooltip: component,\n };\n};\n"],"names":["React","useCallback","classNames","useFloatingElement","animationFadeClassNames","getArrowCoordsByMiddlewareData","AppRootPortal","TooltipBase","useTooltip","placement","placementProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","hideWhenReferenceHidden","disableFlipMiddleware","disableShiftMiddleware","disableTriggerOnFocus","onReferenceHiddenChange","overflowPadding","defaultShown","shown","shownProp","onShownChange","hoverDelay","strategy","enableInteractive","disableArrow","disableCloseAfterClick","usePortal","id","idProp","getRootRef","appearance","style","styleProp","className","zIndex","closable","onPlacementChange","popperProps","generatedId","useId","tooltipId","renderFloatingComponent","floatingProps","floatingRef","resultPlacement","middlewareData","setArrowRef","willBeHide","onClose","arrowProps","undefined","coords","out","in","onCloseIconClick","remapReferenceProps","referenceProps","component","anchorRef","anchorProps","arrow","trigger","closeAfterClick","disableInteractive","externalFloatingElementRef","tooltip"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAAmBC,WAAW,QAAQ,QAAQ;AAC9C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAEEC,kBAAkB,QAEb,oCAAiC;AACxC,SAASC,uBAAuB,QAAQ,+BAAsB;AAC9D,SAASC,8BAA8B,QAAQ,8BAAqB;AAEpE,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,WAAW,QAAQ,gCAA6B;AAsBzD,OAAO,MAAMC,aAAa,CAAC,EACzB,yCAAyC;AACzCC,WAAWC,gBAAgB,QAAQ,EACnCC,eAAe,EAAE,EACjBC,cAAc,CAAC,EACfC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAC7BC,yBAAyB,KAAK,EAC9BC,wBAAwB,KAAK,EAC7BC,uBAAuB,EACvBC,eAAe,EAEf,8BAA8B;AAC9BC,YAAY,EACZC,OAAOC,SAAS,EAChBC,aAAa,EACbC,aAAa,GAAG,EAChBC,QAAQ,EAER,wDAAwD;AACxDC,oBAAoB,KAAK,EACzBC,eAAe,KAAK,EACpBC,yBAAyB,KAAK,EAE9B,eAAe;AACfC,SAAS,EAET,mBAAmB;AACnBC,IAAIC,MAAM,EACVC,UAAU,EACVC,aAAa,SAAS,EACtBC,OAAOC,SAAS,EAChBC,SAAS,EACTC,SAAS,6BAA6B,EACtCC,QAAQ,EACRC,iBAAiB,EACjB,GAAGC,aACa;IAChB,MAAMC,cAAc1C,MAAM2C,KAAK;IAC/B,MAAMC,YAAYZ,UAAUU;IAE5B,MAAMG,0BAA0B5C,YAC9B,CAAC,EACCqB,KAAK,EACLwB,aAAa,EACbC,WAAW,EACXtC,WAAWuC,eAAe,EAC1BC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,OAAO,EACgC;QACvC,IAAI,CAAC9B,OAAO;YACV,OAAO;QACT;QACA,qBACE,KAAChB;YAAcwB,WAAWA;sBACxB,cAAA,KAACvB;gBACE,GAAGkC,WAAW;gBACd,GAAGK,aAAa;gBACjBX,OAAO;oBACL,GAAGW,cAAcX,KAAK;oBACtBG;oBACA,GAAGF,SAAS;gBACd;gBACAL,IAAIa;gBACJX,YAAYc;gBACZb,YAAYA;gBACZmB,YACEzB,eACI0B,YACA;oBACE7C,WAAWuC;oBACXO,QAAQlD,+BAA+B4C;oBACvChB,YAAYiB;gBACd;gBAENb,WAAWnC,WACTiD,aAAa/C,wBAAwBoD,GAAG,GAAGpD,wBAAwBqD,EAAE,EACrEpB;gBAEFqB,kBAAkBnB,WAAWa,UAAUE;;;IAI/C,GACA;QACEpB;QACAG;QACAE;QACAX;QACAa;QACAL;QACAQ;QACAd;QACAQ;KACD;IAGH,MAAMqB,sBACJ1D,YACE,CAAC,EAAEqB,KAAK,EAAE,GAAGsC,gBAAgB,GAAM,CAAA;YACjC,GAAGA,cAAc;YACjB,GAAItC,SAAS;gBAAE,oBAAoBsB;YAAU,CAAC;QAChD,CAAA,GACA;QAACA;KAAU;IAGf,MAAM,EAAEiB,SAAS,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAAG5D,mBAAmB;QAC/DM,WAAWC;QACXsD,OAAO,CAACpC;QACRhB;QACAD;QACAE;QACAC;QACAC;QACAC;QACAC;QACAG;QAEAC;QACAC,OAAOC;QACPC;QACAyC,SAAS/C,wBAAwB,UAAU;YAAC;YAAS;SAAQ;QAC7DC;QACAM;QACAyC,iBAAiB,CAACrC;QAClBsC,oBAAoB,CAACxC;QACrBD;QAEAc;QAEAK;QACAuB,4BAA4BnC;QAC5B0B;IACF;IAEA,OAAO;QACLG;QACAC;QACAM,SAASR;IACX;AACF,EAAE"}
|
|
@@ -4,6 +4,7 @@ import { AdaptivityContext } from "../components/AdaptivityProvider/AdaptivityCo
|
|
|
4
4
|
import { getOrDefault } from "../helpers/getOrDefault.js";
|
|
5
5
|
import { getSizeX, getSizeY, getViewHeightByMediaQueries, getViewWidthByMediaQueries, tryToCheckIsDesktop } from "../lib/adaptivity/index.js";
|
|
6
6
|
import { matchMediaListAddListener, matchMediaListRemoveListener } from "../lib/matchMedia.js";
|
|
7
|
+
import { warnOnce } from "../lib/warnOnce.js";
|
|
7
8
|
import { useMediaQueries } from "./useMediaQueries.js";
|
|
8
9
|
import { usePlatform } from "./usePlatform.js";
|
|
9
10
|
/**
|
|
@@ -18,14 +19,14 @@ import { usePlatform } from "./usePlatform.js";
|
|
|
18
19
|
* >
|
|
19
20
|
* > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки
|
|
20
21
|
* > страницы либо пользователем, либо программно.
|
|
21
|
-
*/
|
|
22
|
+
*/ const warn = warnOnce('useAdaptivityWithJSMediaQueries');
|
|
23
|
+
export const useAdaptivityWithJSMediaQueries = ()=>{
|
|
22
24
|
if (!canUseDOM) {
|
|
23
|
-
|
|
24
|
-
console.error(`[useAdaptivityWithJSMediaQueries] Похоже, вы пытаетесь использовать хук вне браузера.
|
|
25
|
+
warn(`Похоже, вы пытаетесь использовать хук вне браузера.
|
|
25
26
|
|
|
26
27
|
Постарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.
|
|
27
28
|
|
|
28
|
-
Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel
|
|
29
|
+
Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`, 'error');
|
|
29
30
|
}
|
|
30
31
|
const { viewWidth: viewWidthContext, viewHeight: viewHeightContext, sizeX: sizeXContext, sizeY: sizeYContext, hasPointer: hasPointerContext, hasHover: hasHoverContext } = React.useContext(AdaptivityContext);
|
|
31
32
|
const platform = usePlatform();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM, hasHover as hasHoverLib, hasMouse as hasPointerLib } from '@vkontakte/vkjs';\nimport {\n AdaptivityContext,\n type AdaptivityProps as BaseAdaptivityProps,\n} from '../components/AdaptivityProvider/AdaptivityContext';\nimport { getOrDefault } from '../helpers/getOrDefault';\nimport {\n getSizeX,\n getSizeY,\n getViewHeightByMediaQueries,\n getViewWidthByMediaQueries,\n tryToCheckIsDesktop,\n} from '../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\nimport { useMediaQueries } from './useMediaQueries';\nimport { usePlatform } from './usePlatform';\n\nexport interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {\n isDesktop: boolean;\n}\n\n/**\n * Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.\n *\n * Берёт в приоритет значения из `AdaptivityContext`.\n *\n * > ⚠ SSR\n * >\n * > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен\n * > на стороне сервера.\n * >\n * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки\n * > страницы либо пользователем, либо программно.\n */\nexport const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {\n if (!canUseDOM) {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM, hasHover as hasHoverLib, hasMouse as hasPointerLib } from '@vkontakte/vkjs';\nimport {\n AdaptivityContext,\n type AdaptivityProps as BaseAdaptivityProps,\n} from '../components/AdaptivityProvider/AdaptivityContext';\nimport { getOrDefault } from '../helpers/getOrDefault';\nimport {\n getSizeX,\n getSizeY,\n getViewHeightByMediaQueries,\n getViewWidthByMediaQueries,\n tryToCheckIsDesktop,\n} from '../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\nimport { warnOnce } from '../lib/warnOnce';\nimport { useMediaQueries } from './useMediaQueries';\nimport { usePlatform } from './usePlatform';\n\nexport interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {\n isDesktop: boolean;\n}\n\n/**\n * Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.\n *\n * Берёт в приоритет значения из `AdaptivityContext`.\n *\n * > ⚠ SSR\n * >\n * > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен\n * > на стороне сервера.\n * >\n * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки\n * > страницы либо пользователем, либо программно.\n */\nconst warn = warnOnce('useAdaptivityWithJSMediaQueries');\n\nexport const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {\n if (!canUseDOM) {\n warn(\n `Похоже, вы пытаетесь использовать хук вне браузера.\n\nПостарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.\n\nИспользуйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`,\n 'error',\n );\n }\n\n const {\n viewWidth: viewWidthContext,\n viewHeight: viewHeightContext,\n sizeX: sizeXContext,\n sizeY: sizeYContext,\n hasPointer: hasPointerContext,\n hasHover: hasHoverContext,\n } = React.useContext(AdaptivityContext);\n\n const platform = usePlatform();\n const mediaQueries = useMediaQueries();\n\n const [[viewWidthLocal, viewHeightLocal], setViewSizeLocal] = React.useState(() => [\n getOrDefault(viewWidthContext, getViewWidthByMediaQueries(mediaQueries)),\n getOrDefault(viewHeightContext, getViewHeightByMediaQueries(mediaQueries)),\n ]);\n\n const adaptivityProps = React.useMemo(() => {\n const hasPointer = getOrDefault(hasPointerContext, hasPointerLib);\n const hasHover = getOrDefault(hasHoverContext, hasHoverLib);\n const viewWidth = getOrDefault(viewWidthContext, viewWidthLocal);\n const viewHeight = getOrDefault(viewHeightContext, viewHeightLocal);\n const sizeX = getOrDefault(sizeXContext, getSizeX(viewWidth));\n const sizeY = getOrDefault(sizeYContext, getSizeY(viewWidth, viewHeight, hasPointer));\n const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform);\n\n return {\n viewWidth,\n viewHeight,\n sizeX,\n sizeY,\n hasPointer,\n hasHover,\n isDesktop,\n };\n }, [\n viewWidthLocal,\n viewHeightLocal,\n viewWidthContext,\n viewHeightContext,\n sizeXContext,\n sizeYContext,\n hasPointerContext,\n hasHoverContext,\n platform,\n ]);\n\n React.useEffect(() => {\n const handleMediaQuery = () => {\n setViewSizeLocal((prevSizeLocal) => {\n const newViewWidthLocal = getOrDefault(\n viewWidthContext,\n getViewWidthByMediaQueries(mediaQueries),\n );\n const newViewHeightLocal = getOrDefault(\n viewHeightContext,\n getViewHeightByMediaQueries(mediaQueries),\n );\n\n const [prevViewWidthLocal, prevViewHeightLocal] = prevSizeLocal;\n\n if (\n prevViewWidthLocal !== newViewWidthLocal ||\n prevViewHeightLocal !== newViewHeightLocal\n ) {\n return [newViewWidthLocal, newViewHeightLocal];\n }\n\n return prevSizeLocal;\n });\n };\n\n if (!viewWidthContext) {\n [\n mediaQueries.desktopPlus,\n mediaQueries.tablet,\n mediaQueries.smallTablet,\n mediaQueries.mobile,\n ].forEach((matchMediaListener) =>\n matchMediaListAddListener(matchMediaListener, handleMediaQuery),\n );\n }\n\n if (!viewHeightContext) {\n [mediaQueries.mediumHeight, mediaQueries.mobileLandscapeHeight].forEach(\n (matchMediaListener) => matchMediaListAddListener(matchMediaListener, handleMediaQuery),\n );\n }\n\n return () => {\n [\n mediaQueries.desktopPlus,\n mediaQueries.tablet,\n mediaQueries.smallTablet,\n mediaQueries.mobile,\n mediaQueries.mediumHeight,\n mediaQueries.mobileLandscapeHeight,\n ].forEach((matchMediaListener) =>\n matchMediaListRemoveListener(matchMediaListener, handleMediaQuery),\n );\n };\n }, [mediaQueries, viewWidthContext, viewHeightContext]);\n\n return adaptivityProps;\n};\n"],"names":["React","canUseDOM","hasHover","hasHoverLib","hasMouse","hasPointerLib","AdaptivityContext","getOrDefault","getSizeX","getSizeY","getViewHeightByMediaQueries","getViewWidthByMediaQueries","tryToCheckIsDesktop","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","useMediaQueries","usePlatform","warn","useAdaptivityWithJSMediaQueries","viewWidth","viewWidthContext","viewHeight","viewHeightContext","sizeX","sizeXContext","sizeY","sizeYContext","hasPointer","hasPointerContext","hasHoverContext","useContext","platform","mediaQueries","viewWidthLocal","viewHeightLocal","setViewSizeLocal","useState","adaptivityProps","useMemo","isDesktop","useEffect","handleMediaQuery","prevSizeLocal","newViewWidthLocal","newViewHeightLocal","prevViewWidthLocal","prevViewHeightLocal","desktopPlus","tablet","smallTablet","mobile","forEach","matchMediaListener","mediumHeight","mobileLandscapeHeight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,EAAEC,YAAYC,WAAW,EAAEC,YAAYC,aAAa,QAAQ,kBAAkB;AAChG,SACEC,iBAAiB,QAEZ,wDAAqD;AAC5D,SAASC,YAAY,QAAQ,6BAA0B;AACvD,SACEC,QAAQ,EACRC,QAAQ,EACRC,2BAA2B,EAC3BC,0BAA0B,EAC1BC,mBAAmB,QACd,6BAAoB;AAC3B,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAoB;AAC5F,SAASC,QAAQ,QAAQ,qBAAkB;AAC3C,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASC,WAAW,QAAQ,mBAAgB;AAM5C;;;;;;;;;;;;CAYC,GACD,MAAMC,OAAOH,SAAS;AAEtB,OAAO,MAAMI,kCAAkC;IAC7C,IAAI,CAAClB,WAAW;QACdiB,KACE,CAAC;;;;oFAI6E,CAAC,EAC/E;IAEJ;IAEA,MAAM,EACJE,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,OAAOC,YAAY,EACnBC,OAAOC,YAAY,EACnBC,YAAYC,iBAAiB,EAC7B3B,UAAU4B,eAAe,EAC1B,GAAG9B,MAAM+B,UAAU,CAACzB;IAErB,MAAM0B,WAAWf;IACjB,MAAMgB,eAAejB;IAErB,MAAM,CAAC,CAACkB,gBAAgBC,gBAAgB,EAAEC,iBAAiB,GAAGpC,MAAMqC,QAAQ,CAAC,IAAM;YACjF9B,aAAac,kBAAkBV,2BAA2BsB;YAC1D1B,aAAagB,mBAAmBb,4BAA4BuB;SAC7D;IAED,MAAMK,kBAAkBtC,MAAMuC,OAAO,CAAC;QACpC,MAAMX,aAAarB,aAAasB,mBAAmBxB;QACnD,MAAMH,WAAWK,aAAauB,iBAAiB3B;QAC/C,MAAMiB,YAAYb,aAAac,kBAAkBa;QACjD,MAAMZ,aAAaf,aAAagB,mBAAmBY;QACnD,MAAMX,QAAQjB,aAAakB,cAAcjB,SAASY;QAClD,MAAMM,QAAQnB,aAAaoB,cAAclB,SAASW,WAAWE,YAAYM;QACzE,MAAMY,YAAY5B,oBAAoBQ,WAAWE,YAAYM,YAAYI;QAEzE,OAAO;YACLZ;YACAE;YACAE;YACAE;YACAE;YACA1B;YACAsC;QACF;IACF,GAAG;QACDN;QACAC;QACAd;QACAE;QACAE;QACAE;QACAE;QACAC;QACAE;KACD;IAEDhC,MAAMyC,SAAS,CAAC;QACd,MAAMC,mBAAmB;YACvBN,iBAAiB,CAACO;gBAChB,MAAMC,oBAAoBrC,aACxBc,kBACAV,2BAA2BsB;gBAE7B,MAAMY,qBAAqBtC,aACzBgB,mBACAb,4BAA4BuB;gBAG9B,MAAM,CAACa,oBAAoBC,oBAAoB,GAAGJ;gBAElD,IACEG,uBAAuBF,qBACvBG,wBAAwBF,oBACxB;oBACA,OAAO;wBAACD;wBAAmBC;qBAAmB;gBAChD;gBAEA,OAAOF;YACT;QACF;QAEA,IAAI,CAACtB,kBAAkB;YACrB;gBACEY,aAAae,WAAW;gBACxBf,aAAagB,MAAM;gBACnBhB,aAAaiB,WAAW;gBACxBjB,aAAakB,MAAM;aACpB,CAACC,OAAO,CAAC,CAACC,qBACTxC,0BAA0BwC,oBAAoBX;QAElD;QAEA,IAAI,CAACnB,mBAAmB;YACtB;gBAACU,aAAaqB,YAAY;gBAAErB,aAAasB,qBAAqB;aAAC,CAACH,OAAO,CACrE,CAACC,qBAAuBxC,0BAA0BwC,oBAAoBX;QAE1E;QAEA,OAAO;YACL;gBACET,aAAae,WAAW;gBACxBf,aAAagB,MAAM;gBACnBhB,aAAaiB,WAAW;gBACxBjB,aAAakB,MAAM;gBACnBlB,aAAaqB,YAAY;gBACzBrB,aAAasB,qBAAqB;aACnC,CAACH,OAAO,CAAC,CAACC,qBACTvC,6BAA6BuC,oBAAoBX;QAErD;IACF,GAAG;QAACT;QAAcZ;QAAkBE;KAAkB;IAEtD,OAAOe;AACT,EAAE"}
|
|
@@ -2,18 +2,5 @@ import { type AdaptivityProps as BaseAdaptivityProps } from '../components/Adapt
|
|
|
2
2
|
export interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {
|
|
3
3
|
isDesktop: boolean;
|
|
4
4
|
}
|
|
5
|
-
/**
|
|
6
|
-
* Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.
|
|
7
|
-
*
|
|
8
|
-
* Берёт в приоритет значения из `AdaptivityContext`.
|
|
9
|
-
*
|
|
10
|
-
* > ⚠ SSR
|
|
11
|
-
* >
|
|
12
|
-
* > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен
|
|
13
|
-
* > на стороне сервера.
|
|
14
|
-
* >
|
|
15
|
-
* > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки
|
|
16
|
-
* > страницы либо пользователем, либо программно.
|
|
17
|
-
*/
|
|
18
5
|
export declare const useAdaptivityWithJSMediaQueries: () => UseAdaptivityWithJSMediaQueries;
|
|
19
6
|
//# sourceMappingURL=useAdaptivityWithJSMediaQueries.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAdaptivityWithJSMediaQueries.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,IAAI,mBAAmB,EAC5C,MAAM,oDAAoD,CAAC;
|
|
1
|
+
{"version":3,"file":"useAdaptivityWithJSMediaQueries.d.ts","sourceRoot":"","sources":["../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,IAAI,mBAAmB,EAC5C,MAAM,oDAAoD,CAAC;AAc5D,MAAM,WAAW,+BAAgC,SAAQ,QAAQ,CAAC,mBAAmB,CAAC;IACpF,SAAS,EAAE,OAAO,CAAC;CACpB;AAiBD,eAAO,MAAM,+BAA+B,QAAO,+BAoHlD,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { AdaptivityContext } from "../components/AdaptivityProvider/AdaptivityCo
|
|
|
4
4
|
import { getOrDefault } from "../helpers/getOrDefault.js";
|
|
5
5
|
import { getSizeX, getSizeY, getViewHeightByMediaQueries, getViewWidthByMediaQueries, tryToCheckIsDesktop } from "../lib/adaptivity/index.js";
|
|
6
6
|
import { matchMediaListAddListener, matchMediaListRemoveListener } from "../lib/matchMedia.js";
|
|
7
|
+
import { warnOnce } from "../lib/warnOnce.js";
|
|
7
8
|
import { useMediaQueries } from "./useMediaQueries.js";
|
|
8
9
|
import { usePlatform } from "./usePlatform.js";
|
|
9
10
|
/**
|
|
@@ -18,14 +19,14 @@ import { usePlatform } from "./usePlatform.js";
|
|
|
18
19
|
* >
|
|
19
20
|
* > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки
|
|
20
21
|
* > страницы либо пользователем, либо программно.
|
|
21
|
-
*/
|
|
22
|
+
*/ const warn = warnOnce('useAdaptivityWithJSMediaQueries');
|
|
23
|
+
export const useAdaptivityWithJSMediaQueries = ()=>{
|
|
22
24
|
if (!canUseDOM) {
|
|
23
|
-
|
|
24
|
-
console.error(`[useAdaptivityWithJSMediaQueries] Похоже, вы пытаетесь использовать хук вне браузера.
|
|
25
|
+
warn(`Похоже, вы пытаетесь использовать хук вне браузера.
|
|
25
26
|
|
|
26
27
|
Постарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.
|
|
27
28
|
|
|
28
|
-
Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel
|
|
29
|
+
Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`, 'error');
|
|
29
30
|
}
|
|
30
31
|
const { viewWidth: viewWidthContext, viewHeight: viewHeightContext, sizeX: sizeXContext, sizeY: sizeYContext, hasPointer: hasPointerContext, hasHover: hasHoverContext } = React.useContext(AdaptivityContext);
|
|
31
32
|
const platform = usePlatform();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM, hasHover as hasHoverLib, hasMouse as hasPointerLib } from '@vkontakte/vkjs';\nimport {\n AdaptivityContext,\n type AdaptivityProps as BaseAdaptivityProps,\n} from '../components/AdaptivityProvider/AdaptivityContext';\nimport { getOrDefault } from '../helpers/getOrDefault';\nimport {\n getSizeX,\n getSizeY,\n getViewHeightByMediaQueries,\n getViewWidthByMediaQueries,\n tryToCheckIsDesktop,\n} from '../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\nimport { useMediaQueries } from './useMediaQueries';\nimport { usePlatform } from './usePlatform';\n\nexport interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {\n isDesktop: boolean;\n}\n\n/**\n * Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.\n *\n * Берёт в приоритет значения из `AdaptivityContext`.\n *\n * > ⚠ SSR\n * >\n * > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен\n * > на стороне сервера.\n * >\n * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки\n * > страницы либо пользователем, либо программно.\n */\nexport const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {\n if (!canUseDOM) {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useAdaptivityWithJSMediaQueries.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM, hasHover as hasHoverLib, hasMouse as hasPointerLib } from '@vkontakte/vkjs';\nimport {\n AdaptivityContext,\n type AdaptivityProps as BaseAdaptivityProps,\n} from '../components/AdaptivityProvider/AdaptivityContext';\nimport { getOrDefault } from '../helpers/getOrDefault';\nimport {\n getSizeX,\n getSizeY,\n getViewHeightByMediaQueries,\n getViewWidthByMediaQueries,\n tryToCheckIsDesktop,\n} from '../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';\nimport { warnOnce } from '../lib/warnOnce';\nimport { useMediaQueries } from './useMediaQueries';\nimport { usePlatform } from './usePlatform';\n\nexport interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {\n isDesktop: boolean;\n}\n\n/**\n * Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.\n *\n * Берёт в приоритет значения из `AdaptivityContext`.\n *\n * > ⚠ SSR\n * >\n * > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен\n * > на стороне сервера.\n * >\n * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки\n * > страницы либо пользователем, либо программно.\n */\nconst warn = warnOnce('useAdaptivityWithJSMediaQueries');\n\nexport const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {\n if (!canUseDOM) {\n warn(\n `Похоже, вы пытаетесь использовать хук вне браузера.\n\nПостарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.\n\nИспользуйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`,\n 'error',\n );\n }\n\n const {\n viewWidth: viewWidthContext,\n viewHeight: viewHeightContext,\n sizeX: sizeXContext,\n sizeY: sizeYContext,\n hasPointer: hasPointerContext,\n hasHover: hasHoverContext,\n } = React.useContext(AdaptivityContext);\n\n const platform = usePlatform();\n const mediaQueries = useMediaQueries();\n\n const [[viewWidthLocal, viewHeightLocal], setViewSizeLocal] = React.useState(() => [\n getOrDefault(viewWidthContext, getViewWidthByMediaQueries(mediaQueries)),\n getOrDefault(viewHeightContext, getViewHeightByMediaQueries(mediaQueries)),\n ]);\n\n const adaptivityProps = React.useMemo(() => {\n const hasPointer = getOrDefault(hasPointerContext, hasPointerLib);\n const hasHover = getOrDefault(hasHoverContext, hasHoverLib);\n const viewWidth = getOrDefault(viewWidthContext, viewWidthLocal);\n const viewHeight = getOrDefault(viewHeightContext, viewHeightLocal);\n const sizeX = getOrDefault(sizeXContext, getSizeX(viewWidth));\n const sizeY = getOrDefault(sizeYContext, getSizeY(viewWidth, viewHeight, hasPointer));\n const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform);\n\n return {\n viewWidth,\n viewHeight,\n sizeX,\n sizeY,\n hasPointer,\n hasHover,\n isDesktop,\n };\n }, [\n viewWidthLocal,\n viewHeightLocal,\n viewWidthContext,\n viewHeightContext,\n sizeXContext,\n sizeYContext,\n hasPointerContext,\n hasHoverContext,\n platform,\n ]);\n\n React.useEffect(() => {\n const handleMediaQuery = () => {\n setViewSizeLocal((prevSizeLocal) => {\n const newViewWidthLocal = getOrDefault(\n viewWidthContext,\n getViewWidthByMediaQueries(mediaQueries),\n );\n const newViewHeightLocal = getOrDefault(\n viewHeightContext,\n getViewHeightByMediaQueries(mediaQueries),\n );\n\n const [prevViewWidthLocal, prevViewHeightLocal] = prevSizeLocal;\n\n if (\n prevViewWidthLocal !== newViewWidthLocal ||\n prevViewHeightLocal !== newViewHeightLocal\n ) {\n return [newViewWidthLocal, newViewHeightLocal];\n }\n\n return prevSizeLocal;\n });\n };\n\n if (!viewWidthContext) {\n [\n mediaQueries.desktopPlus,\n mediaQueries.tablet,\n mediaQueries.smallTablet,\n mediaQueries.mobile,\n ].forEach((matchMediaListener) =>\n matchMediaListAddListener(matchMediaListener, handleMediaQuery),\n );\n }\n\n if (!viewHeightContext) {\n [mediaQueries.mediumHeight, mediaQueries.mobileLandscapeHeight].forEach(\n (matchMediaListener) => matchMediaListAddListener(matchMediaListener, handleMediaQuery),\n );\n }\n\n return () => {\n [\n mediaQueries.desktopPlus,\n mediaQueries.tablet,\n mediaQueries.smallTablet,\n mediaQueries.mobile,\n mediaQueries.mediumHeight,\n mediaQueries.mobileLandscapeHeight,\n ].forEach((matchMediaListener) =>\n matchMediaListRemoveListener(matchMediaListener, handleMediaQuery),\n );\n };\n }, [mediaQueries, viewWidthContext, viewHeightContext]);\n\n return adaptivityProps;\n};\n"],"names":["React","canUseDOM","hasHover","hasHoverLib","hasMouse","hasPointerLib","AdaptivityContext","getOrDefault","getSizeX","getSizeY","getViewHeightByMediaQueries","getViewWidthByMediaQueries","tryToCheckIsDesktop","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","useMediaQueries","usePlatform","warn","useAdaptivityWithJSMediaQueries","viewWidth","viewWidthContext","viewHeight","viewHeightContext","sizeX","sizeXContext","sizeY","sizeYContext","hasPointer","hasPointerContext","hasHoverContext","useContext","platform","mediaQueries","viewWidthLocal","viewHeightLocal","setViewSizeLocal","useState","adaptivityProps","useMemo","isDesktop","useEffect","handleMediaQuery","prevSizeLocal","newViewWidthLocal","newViewHeightLocal","prevViewWidthLocal","prevViewHeightLocal","desktopPlus","tablet","smallTablet","mobile","forEach","matchMediaListener","mediumHeight","mobileLandscapeHeight"],"mappings":"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"}
|