@vkontakte/vkui 5.3.0 → 5.3.2
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/cjs/components/ActionSheet/types.d.ts +1 -1
- package/dist/cjs/components/ActionSheet/types.js.map +1 -1
- package/dist/cjs/components/Banner/Banner.d.ts +3 -2
- package/dist/cjs/components/Banner/Banner.js +5 -3
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/Button/Button.js +1 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/ChipsInput/ChipsInput.d.ts +1 -1
- package/dist/cjs/components/ChipsInput/ChipsInput.js +5 -3
- package/dist/cjs/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +6 -3
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.d.ts +2 -1
- package/dist/cjs/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cjs/components/PromoBanner/PromoBanner.d.ts +3 -0
- package/dist/cjs/components/PromoBanner/PromoBanner.js +5 -0
- package/dist/cjs/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts +1 -1
- package/dist/cjs/components/Select/Select.js +7 -3
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/Separator/Separator.js +2 -4
- package/dist/cjs/components/Separator/Separator.js.map +1 -1
- package/dist/cjs/components/Spacing/Spacing.js +0 -1
- package/dist/cjs/components/Spacing/Spacing.js.map +1 -1
- package/dist/cjs/components/TabbarItem/TabbarItem.js +2 -2
- package/dist/cjs/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cjs/components/Tappable/Tappable.js +1 -1
- package/dist/cjs/components/Tappable/Tappable.js.map +1 -1
- package/dist/cjs/components/Typography/Caption/Caption.d.ts +3 -8
- package/dist/cjs/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/cjs/components/Typography/Footnote/Footnote.d.ts +3 -8
- package/dist/cjs/components/Typography/Footnote/Footnote.js.map +1 -1
- package/dist/cjs/components/Typography/Headline/Headline.d.ts +4 -7
- package/dist/cjs/components/Typography/Headline/Headline.js +0 -5
- package/dist/cjs/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/cjs/components/Typography/Paragraph/Paragraph.d.ts +4 -7
- package/dist/cjs/components/Typography/Paragraph/Paragraph.js +0 -5
- package/dist/cjs/components/Typography/Paragraph/Paragraph.js.map +1 -1
- package/dist/cjs/components/Typography/Subhead/Subhead.d.ts +3 -8
- package/dist/cjs/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/cjs/components/Typography/Text/Text.d.ts +4 -7
- package/dist/cjs/components/Typography/Text/Text.js +0 -5
- package/dist/cjs/components/Typography/Text/Text.js.map +1 -1
- package/dist/cjs/components/Typography/Title/Title.d.ts +3 -7
- package/dist/cjs/components/Typography/Title/Title.js.map +1 -1
- package/dist/cjs/components/Typography/types.d.ts +11 -0
- package/dist/cjs/components/Typography/types.js +8 -0
- package/dist/cjs/components/Typography/types.js.map +1 -0
- package/dist/cjs/components/UsersStack/UsersStack.js +1 -1
- package/dist/cjs/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cjs/lib/warnOnce.js +2 -2
- package/dist/cjs/lib/warnOnce.js.map +1 -1
- package/dist/components/ActionSheet/types.d.ts +1 -1
- package/dist/components/ActionSheet/types.js.map +1 -1
- package/dist/components/Banner/Banner.d.ts +3 -2
- package/dist/components/Banner/Banner.js +5 -3
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/ChipsInput/ChipsInput.d.ts +1 -1
- package/dist/components/ChipsInput/ChipsInput.js +5 -3
- package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +6 -3
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/FormStatus/FormStatus.d.ts +2 -1
- package/dist/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/components/PromoBanner/PromoBanner.d.ts +3 -0
- package/dist/components/PromoBanner/PromoBanner.js +8 -0
- package/dist/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.js +7 -3
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Separator/Separator.js +2 -4
- package/dist/components/Separator/Separator.js.map +1 -1
- package/dist/components/Spacing/Spacing.js +0 -1
- package/dist/components/Spacing/Spacing.js.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.js +2 -2
- package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components/Tappable/Tappable.js +1 -1
- package/dist/components/Tappable/Tappable.js.map +1 -1
- package/dist/components/Typography/Caption/Caption.d.ts +3 -8
- package/dist/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/components/Typography/Footnote/Footnote.d.ts +3 -8
- package/dist/components/Typography/Footnote/Footnote.js.map +1 -1
- package/dist/components/Typography/Headline/Headline.d.ts +4 -7
- package/dist/components/Typography/Headline/Headline.js +0 -5
- package/dist/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/components/Typography/Paragraph/Paragraph.d.ts +4 -7
- package/dist/components/Typography/Paragraph/Paragraph.js +0 -5
- package/dist/components/Typography/Paragraph/Paragraph.js.map +1 -1
- package/dist/components/Typography/Subhead/Subhead.d.ts +3 -8
- package/dist/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/components/Typography/Text/Text.d.ts +4 -7
- package/dist/components/Typography/Text/Text.js +0 -5
- package/dist/components/Typography/Text/Text.js.map +1 -1
- package/dist/components/Typography/Title/Title.d.ts +3 -7
- package/dist/components/Typography/Title/Title.js.map +1 -1
- package/dist/components/Typography/types.d.ts +11 -0
- package/dist/components/Typography/types.js +3 -0
- package/dist/components/Typography/types.js.map +1 -0
- package/dist/components/UsersStack/UsersStack.js +1 -1
- package/dist/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/components.css +10 -10
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +429 -430
- package/dist/cssm/components/ActionSheet/types.d.ts +1 -1
- package/dist/cssm/components/ActionSheet/types.js.map +1 -1
- package/dist/cssm/components/Banner/Banner.d.ts +3 -2
- package/dist/cssm/components/Banner/Banner.js +3 -2
- package/dist/cssm/components/Banner/Banner.js.map +1 -1
- package/dist/cssm/components/Button/Button.js +1 -1
- package/dist/cssm/components/Button/Button.js.map +1 -1
- package/dist/cssm/components/Button/Button.module.css +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.d.ts +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.js +3 -2
- package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cssm/components/Counter/Counter.module.css +2 -2
- package/dist/cssm/components/CustomSelect/CustomSelect.js +6 -3
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.d.ts +2 -1
- package/dist/cssm/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.module.css +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.module.css +1 -1
- package/dist/cssm/components/PromoBanner/PromoBanner.d.ts +3 -0
- package/dist/cssm/components/PromoBanner/PromoBanner.js +8 -0
- package/dist/cssm/components/PromoBanner/PromoBanner.js.map +1 -1
- package/dist/cssm/components/RichCell/RichCell.module.css +1 -1
- package/dist/cssm/components/Search/Search.module.css +1 -1
- package/dist/cssm/components/Select/Select.d.ts +1 -1
- package/dist/cssm/components/Select/Select.js +3 -1
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Separator/Separator.js +2 -4
- package/dist/cssm/components/Separator/Separator.js.map +1 -1
- package/dist/cssm/components/Separator/Separator.module.css +1 -1
- package/dist/cssm/components/Spacing/Spacing.js +0 -1
- package/dist/cssm/components/Spacing/Spacing.js.map +1 -1
- package/dist/cssm/components/TabbarItem/TabbarItem.js +2 -2
- package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cssm/components/Tappable/Tappable.js +1 -1
- package/dist/cssm/components/Tappable/Tappable.js.map +1 -1
- package/dist/cssm/components/Tappable/Tappable.module.css +1 -1
- package/dist/cssm/components/Typography/Caption/Caption.d.ts +3 -8
- package/dist/cssm/components/Typography/Caption/Caption.js.map +1 -1
- package/dist/cssm/components/Typography/Footnote/Footnote.d.ts +3 -8
- package/dist/cssm/components/Typography/Footnote/Footnote.js.map +1 -1
- package/dist/cssm/components/Typography/Headline/Headline.d.ts +4 -7
- package/dist/cssm/components/Typography/Headline/Headline.js +0 -5
- package/dist/cssm/components/Typography/Headline/Headline.js.map +1 -1
- package/dist/cssm/components/Typography/Paragraph/Paragraph.d.ts +4 -7
- package/dist/cssm/components/Typography/Paragraph/Paragraph.js +0 -5
- package/dist/cssm/components/Typography/Paragraph/Paragraph.js.map +1 -1
- package/dist/cssm/components/Typography/Subhead/Subhead.d.ts +3 -8
- package/dist/cssm/components/Typography/Subhead/Subhead.js.map +1 -1
- package/dist/cssm/components/Typography/Text/Text.d.ts +4 -7
- package/dist/cssm/components/Typography/Text/Text.js +0 -5
- package/dist/cssm/components/Typography/Text/Text.js.map +1 -1
- package/dist/cssm/components/Typography/Title/Title.d.ts +3 -7
- package/dist/cssm/components/Typography/Title/Title.js.map +1 -1
- package/dist/cssm/components/Typography/types.d.ts +11 -0
- package/dist/cssm/components/Typography/types.js +3 -0
- package/dist/cssm/components/Typography/types.js.map +1 -0
- package/dist/cssm/components/UsersStack/UsersStack.js +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cssm/lib/warnOnce.js +2 -2
- package/dist/cssm/lib/warnOnce.js.map +1 -1
- package/dist/lib/warnOnce.js +2 -2
- package/dist/lib/warnOnce.js.map +1 -1
- package/dist/vkui.css +10 -10
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +429 -430
- package/package.json +1 -1
|
@@ -35,6 +35,9 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
37
|
* @see https://vkcom.github.io/VKUI/#/PromoBanner
|
|
38
|
+
* @deprecated v5.3.1
|
|
39
|
+
*
|
|
40
|
+
* Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
|
|
38
41
|
*/
|
|
39
42
|
export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => JSX.Element;
|
|
40
43
|
export {};
|
|
@@ -6,12 +6,17 @@ import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
|
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { Icon24Dismiss } from "@vkontakte/icons";
|
|
8
8
|
import { classNames } from "@vkontakte/vkjs";
|
|
9
|
+
import { warnOnce } from "../../lib/warnOnce";
|
|
9
10
|
import { Button } from "../Button/Button";
|
|
10
11
|
import { Image } from "../Image/Image";
|
|
11
12
|
import { SimpleCell } from "../SimpleCell/SimpleCell";
|
|
12
13
|
import { Footnote } from "../Typography/Footnote/Footnote";
|
|
14
|
+
var warn = warnOnce("PromoBanner");
|
|
13
15
|
/**
|
|
14
16
|
* @see https://vkcom.github.io/VKUI/#/PromoBanner
|
|
17
|
+
* @deprecated v5.3.1
|
|
18
|
+
*
|
|
19
|
+
* Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
|
|
15
20
|
*/ export var PromoBanner = function(_param) {
|
|
16
21
|
var _param_bannerData = _param.bannerData, bannerData = _param_bannerData === void 0 ? {} : _param_bannerData, onClose = _param.onClose, isCloseButtonHidden = _param.isCloseButtonHidden, className = _param.className, restProps = _object_without_properties(_param, [
|
|
17
22
|
"bannerData",
|
|
@@ -19,6 +24,9 @@ import { Footnote } from "../Typography/Footnote/Footnote";
|
|
|
19
24
|
"isCloseButtonHidden",
|
|
20
25
|
"className"
|
|
21
26
|
]);
|
|
27
|
+
if (process.env.NODE_ENV === "development") {
|
|
28
|
+
warn("Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners");
|
|
29
|
+
}
|
|
22
30
|
var _React_useState = _sliced_to_array(React.useState(""), 2), currentPixel = _React_useState[0], setCurrentPixel = _React_useState[1];
|
|
23
31
|
var statsPixels = React.useMemo(function() {
|
|
24
32
|
return bannerData.statistics ? bannerData.statistics.reduce(function(acc, item) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\ntype StatsType =\n | 'playbackStarted' // Начало показа\n | 'click'; // Клик по баннеру\n\ntype BannerData = {\n title?: string;\n url_types?: string;\n bannerID?: string;\n imageWidth?: number;\n imageHeight?: number;\n imageLink?: string;\n trackingLink?: string;\n type?: string;\n iconWidth?: number;\n domain?: string;\n ctaText?: string;\n advertisingLabel?: string;\n iconLink?: string;\n statistics?: Array<{ type: StatsType; url: string }>;\n openInBrowser?: boolean;\n iconHeight?: number;\n directLink?: boolean;\n navigationType?: string;\n description?: string;\n ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n bannerData: BannerData;\n /** Флаг скрытия кнопки закрытия рекламы */\n isCloseButtonHidden?: boolean;\n /** Хандлер закрытия рекламы */\n onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n */\nexport const PromoBanner = ({\n bannerData = {},\n onClose,\n isCloseButtonHidden,\n className,\n ...restProps\n}: PromoBannerProps) => {\n const [currentPixel, setCurrentPixel] = React.useState('');\n\n const statsPixels = React.useMemo(\n () =>\n (bannerData.statistics\n ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n : {}) as Record<StatsType, string | void>,\n [bannerData.statistics],\n );\n\n const onClick = React.useCallback(\n () => setCurrentPixel(statsPixels.click || ''),\n [statsPixels.click],\n );\n\n React.useEffect(() => {\n if (statsPixels.playbackStarted) {\n setCurrentPixel(statsPixels.playbackStarted);\n }\n }, [statsPixels.playbackStarted]);\n\n return (\n <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n <div className={styles['PromoBanner__head']}>\n <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n {bannerData.ageRestrictions && (\n <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n )}\n\n {!isCloseButtonHidden && (\n <div className={styles['PromoBanner__close']} onClick={onClose}>\n <Icon24Dismiss />\n </div>\n )}\n </div>\n <SimpleCell\n href={bannerData.trackingLink}\n onClick={onClick}\n rel=\"nofollow noopener noreferrer\"\n target=\"_blank\"\n before={\n bannerData.iconLink && (\n <Image\n size={48}\n src={bannerData.iconLink}\n alt={bannerData.title}\n data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n />\n )\n }\n after={\n bannerData.ctaText && (\n <Button\n mode=\"outline\"\n data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n >\n {bannerData.ctaText}\n </Button>\n )\n }\n subtitle={bannerData.domain}\n >\n {bannerData.title}\n </SimpleCell>\n\n {currentPixel.length > 0 && (\n <div className={styles['PromoBanner__pixels']}>\n <img src={currentPixel} alt=\"\" />\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","Icon24Dismiss","classNames","Button","Image","SimpleCell","Footnote","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n | 'playbackStarted' // Начало показа\n | 'click'; // Клик по баннеру\n\ntype BannerData = {\n title?: string;\n url_types?: string;\n bannerID?: string;\n imageWidth?: number;\n imageHeight?: number;\n imageLink?: string;\n trackingLink?: string;\n type?: string;\n iconWidth?: number;\n domain?: string;\n ctaText?: string;\n advertisingLabel?: string;\n iconLink?: string;\n statistics?: Array<{ type: StatsType; url: string }>;\n openInBrowser?: boolean;\n iconHeight?: number;\n directLink?: boolean;\n navigationType?: string;\n description?: string;\n ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n bannerData: BannerData;\n /** Флаг скрытия кнопки закрытия рекламы */\n isCloseButtonHidden?: boolean;\n /** Хандлер закрытия рекламы */\n onClose: () => void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n bannerData = {},\n onClose,\n isCloseButtonHidden,\n className,\n ...restProps\n}: PromoBannerProps) => {\n if (process.env.NODE_ENV === 'development') {\n warn(\n 'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n );\n }\n\n const [currentPixel, setCurrentPixel] = React.useState('');\n\n const statsPixels = React.useMemo(\n () =>\n (bannerData.statistics\n ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n : {}) as Record<StatsType, string | void>,\n [bannerData.statistics],\n );\n\n const onClick = React.useCallback(\n () => setCurrentPixel(statsPixels.click || ''),\n [statsPixels.click],\n );\n\n React.useEffect(() => {\n if (statsPixels.playbackStarted) {\n setCurrentPixel(statsPixels.playbackStarted);\n }\n }, [statsPixels.playbackStarted]);\n\n return (\n <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n <div className={styles['PromoBanner__head']}>\n <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n {bannerData.ageRestrictions && (\n <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n )}\n\n {!isCloseButtonHidden && (\n <div className={styles['PromoBanner__close']} onClick={onClose}>\n <Icon24Dismiss />\n </div>\n )}\n </div>\n <SimpleCell\n href={bannerData.trackingLink}\n onClick={onClick}\n rel=\"nofollow noopener noreferrer\"\n target=\"_blank\"\n before={\n bannerData.iconLink && (\n <Image\n size={48}\n src={bannerData.iconLink}\n alt={bannerData.title}\n data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n />\n )\n }\n after={\n bannerData.ctaText && (\n <Button\n mode=\"outline\"\n data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n >\n {bannerData.ctaText}\n </Button>\n )\n }\n subtitle={bannerData.domain}\n >\n {bannerData.title}\n </SimpleCell>\n\n {currentPixel.length > 0 && (\n <div className={styles['PromoBanner__pixels']}>\n <img src={currentPixel} alt=\"\" />\n </div>\n )}\n </div>\n );\n};\n"],"names":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,OAAOL,SAAS;AAsCtB;;;;;CAKC,GACD,OAAO,IAAMM,cAAc,iBAMH;mCALtBC,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ,CAAC;IAED,IAAwCR,mCAAAA,MAAMkB,QAAQ,CAAC,SAAhDC,eAAiCnB,oBAAnBoB,kBAAmBpB;IAExC,IAAMqB,cAAcrB,MAAMsB,OAAO,CAC/B;eACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,wCAAKD,MAAK,qBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC,CAAC;OACR;QAAClB,WAAWa,UAAU;KAAC;IAGzB,IAAMM,UAAU7B,MAAM8B,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB/B,MAAMgC,SAAS,CAAC,WAAM;QACpB,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C,CAAC;IACH,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIrB,WAAWX,8BAAkCW;OAAgBC,0BAChE,oBAACoB;QAAIrB,SAAS;qBACZ,oBAACN,gBAAUG,WAAWyB,gBAAgB,IAAI,kBACzCzB,WAAW0B,eAAe,kBACzB,oBAAC7B;QAASM,SAAS;OAA+BH,WAAW0B,eAAe,GAG7E,CAACxB,qCACA,oBAACsB;QAAIrB,SAAS;QAAgCgB,SAASlB;qBACrD,oBAACV,sCAIP,oBAACK;QACC+B,MAAM3B,WAAW4B,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,QAAQ,kBACjB,oBAACrC;YACCsC,MAAM;YACNC,KAAKlC,WAAWgC,QAAQ;YACxBG,KAAKnC,WAAWoC,KAAK;YACrBC,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAW+B,SAAS;;QAIzEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC9C;YACC+C,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B,SAAS;WAE1EtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWoC,KAAK,GAGlB3B,aAAamC,MAAM,GAAG,mBACrB,oBAACpB;QAAIrB,SAAS;qBACZ,oBAAC0C;QAAIX,KAAKzB;QAAc0B,KAAI;;AAKtC,EAAE"}
|
|
@@ -4,4 +4,4 @@ export type SelectType = 'default' | 'plain' | 'accent';
|
|
|
4
4
|
/**
|
|
5
5
|
* @see https://vkcom.github.io/VKUI/#/Select
|
|
6
6
|
*/
|
|
7
|
-
export declare const Select: ({ children, options, popupDirection, renderOption, ...props }: SelectProps) => JSX.Element;
|
|
7
|
+
export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => JSX.Element;
|
|
@@ -7,17 +7,21 @@ import { NativeSelect } from "../NativeSelect/NativeSelect";
|
|
|
7
7
|
/**
|
|
8
8
|
* @see https://vkcom.github.io/VKUI/#/Select
|
|
9
9
|
*/ export var Select = function(_param) {
|
|
10
|
-
var children = _param.children, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options, popupDirection = _param.popupDirection, renderOption = _param.renderOption, props = _object_without_properties(_param, [
|
|
10
|
+
var children = _param.children, _param_options = _param.options, options = _param_options === void 0 ? [] : _param_options, popupDirection = _param.popupDirection, renderOption = _param.renderOption, allowClearButton = _param.allowClearButton, ClearButton = _param.ClearButton, props = _object_without_properties(_param, [
|
|
11
11
|
"children",
|
|
12
12
|
"options",
|
|
13
13
|
"popupDirection",
|
|
14
|
-
"renderOption"
|
|
14
|
+
"renderOption",
|
|
15
|
+
"allowClearButton",
|
|
16
|
+
"ClearButton"
|
|
15
17
|
]);
|
|
16
18
|
var hasPointer = useAdaptivityHasPointer();
|
|
17
19
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ React.createElement(CustomSelect, _object_spread({
|
|
18
20
|
options: options,
|
|
19
21
|
popupDirection: popupDirection,
|
|
20
|
-
renderOption: renderOption
|
|
22
|
+
renderOption: renderOption,
|
|
23
|
+
allowClearButton: allowClearButton,
|
|
24
|
+
ClearButton: ClearButton
|
|
21
25
|
}, props)), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ React.createElement(NativeSelect, props, options.map(function(param) {
|
|
22
26
|
var label = param.label, value = param.value;
|
|
23
27
|
return /*#__PURE__*/ React.createElement("option", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n children,\n options = [],\n popupDirection,\n renderOption,\n ...props\n}: SelectProps) => {\n const hasPointer = useAdaptivityHasPointer();\n\n return (\n <React.Fragment>\n {(hasPointer === undefined || hasPointer) && (\n <CustomSelect\n options={options}\n popupDirection={popupDirection}\n renderOption={renderOption}\n {...props}\n />\n )}\n {(hasPointer === undefined || !hasPointer) && (\n <NativeSelect {...props}>\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,IAAMC,SAAS,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect, SelectProps } from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\n\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = ({\n children,\n options = [],\n popupDirection,\n renderOption,\n allowClearButton,\n ClearButton,\n ...props\n}: SelectProps) => {\n const hasPointer = useAdaptivityHasPointer();\n\n return (\n <React.Fragment>\n {(hasPointer === undefined || hasPointer) && (\n <CustomSelect\n options={options}\n popupDirection={popupDirection}\n renderOption={renderOption}\n allowClearButton={allowClearButton}\n ClearButton={ClearButton}\n {...props}\n />\n )}\n {(hasPointer === undefined || !hasPointer) && (\n <NativeSelect {...props}>\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","useAdaptivityHasPointer","CustomSelect","NativeSelect","Select","children","options","popupDirection","renderOption","allowClearButton","ClearButton","props","hasPointer","Fragment","undefined","map","label","value","option","key"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,YAAY,QAAqB,+BAA+B;AACzE,SAASC,YAAY,QAAQ,+BAA+B;AAI5D;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAQH;QAPjBC,kBAAAA,kCACAC,SAAAA,sCAAU,EAAE,mBACZC,wBAAAA,gBACAC,sBAAAA,cACAC,0BAAAA,kBACAC,qBAAAA,aACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,aAAaX;IAEnB,qBACE,oBAACD,MAAMa,QAAQ,QACZ,AAACD,CAAAA,eAAeE,aAAaF,UAAS,mBACrC,oBAACV;QACCI,SAASA;QACTC,gBAAgBA;QAChBC,cAAcA;QACdC,kBAAkBA;QAClBC,aAAaA;OACTC,SAGP,AAACC,CAAAA,eAAeE,aAAa,CAACF,UAAS,mBACtC,oBAACT,cAAiBQ,OACfL,QAAQS,GAAG,CAAC;YAAGC,cAAAA,OAAOC,cAAAA;6BACrB,oBAACC;YAAOD,OAAOA;YAAOE,KAAK,AAAC,GAAQ,OAANF;WAC3BD;;AAOf,EAAE"}
|
|
@@ -11,10 +11,8 @@ import { classNames } from "@vkontakte/vkjs";
|
|
|
11
11
|
"className"
|
|
12
12
|
]);
|
|
13
13
|
return React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
role: "separator"
|
|
17
|
-
}), /*#__PURE__*/ React.createElement("div", {
|
|
14
|
+
className: classNames("vkuiSeparator", !wide && "vkuiSeparator--padded", className)
|
|
15
|
+
}), /*#__PURE__*/ React.createElement("hr", {
|
|
18
16
|
className: "vkuiSeparator__in"
|
|
19
17
|
}));
|
|
20
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * С этим свойством компонент не будет иметь отступы слева и справа\n */\n wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n <div\n {...restProps}\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Separator.module.css';\n\nexport interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * С этим свойством компонент не будет иметь отступы слева и справа\n */\n wide?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({ wide, className, ...restProps }: SeparatorProps) => (\n <div\n {...restProps}\n className={classNames(styles['Separator'], !wide && styles['Separator--padded'], className)}\n >\n <hr className={styles['Separator__in']} />\n </div>\n);\n"],"names":["React","classNames","Separator","wide","className","restProps","div","hr"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,IAAMC,YAAY,+BACvB;QAD0BC,cAAAA,MAAMC,mBAAAA,WAAcC;QAApBF;QAAMC;;WAChC,oBAACE,+CACKD;QACJD,WAAWH,4BAAgC,CAACE,iCAAqCC;sBAEjF,oBAACG;QAAGH,SAAS;;AACV,EACL"}
|
|
@@ -16,7 +16,6 @@ import { classNames } from "@vkontakte/vkjs";
|
|
|
16
16
|
padding: "".concat(size / 2, "px 0")
|
|
17
17
|
}, styleProp);
|
|
18
18
|
return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
|
|
19
|
-
"aria-hidden": true,
|
|
20
19
|
className: classNames(className, "vkuiSpacing"),
|
|
21
20
|
style: style
|
|
22
21
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Высота спэйсинга\n */\n size?: number;\n children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n const style: React.CSSProperties = {\n height: size,\n padding: `${size / 2}px 0`,\n ...styleProp,\n };\n\n return
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * Высота спэйсинга\n */\n size?: number;\n children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n const style: React.CSSProperties = {\n height: size,\n padding: `${size / 2}px 0`,\n ...styleProp,\n };\n\n return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,oBAACK,+CAAQH;QAAWD,WAAWL,WAAWK;QAA+BF,OAAOA;;AACzF,EAAE"}
|
|
@@ -24,8 +24,8 @@ var warn = warnOnce("TabbarItem");
|
|
|
24
24
|
]);
|
|
25
25
|
var platform = usePlatform();
|
|
26
26
|
if (process.env.NODE_ENV === "development") {
|
|
27
|
-
var
|
|
28
|
-
if (!
|
|
27
|
+
var hasAccessibleName = text || restProps["aria-label"] || restProps["aria-labelledby"];
|
|
28
|
+
if (!hasAccessibleName) {
|
|
29
29
|
warn(COMMON_WARNINGS.a11y[Component === "a" ? "link-name" : "button-name"], "error");
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\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\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n text,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n className,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n const
|
|
1
|
+
{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\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\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n children,\n selected,\n indicator,\n text,\n href,\n Component = href ? 'a' : 'button',\n disabled,\n className,\n ...restProps\n}: TabbarItemProps) => {\n const platform = usePlatform();\n\n if (process.env.NODE_ENV === 'development') {\n const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n if (!hasAccessibleName) {\n warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n }\n }\n\n return (\n <Component\n {...restProps}\n disabled={disabled}\n href={href}\n className={classNames(\n styles['TabbarItem'],\n platform === Platform.IOS && styles['TabbarItem--ios'],\n platform === Platform.ANDROID && styles['TabbarItem--android'],\n selected && styles['TabbarItem--selected'],\n !!text && styles['TabbarItem--text'],\n className,\n )}\n >\n <Tappable\n role=\"presentation\"\n Component=\"div\"\n disabled={disabled}\n activeMode={\n platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n }\n activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n hasHover={false}\n className={styles['TabbarItem__tappable']}\n />\n <div className={styles['TabbarItem__in']}>\n <div className={styles['TabbarItem__icon']}>\n {children}\n <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n </div>\n {text && (\n <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n {text}\n </Footnote>\n )}\n </div>\n </Component>\n );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAkB3D,IAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMI,aAAa,iBAUH;QATrBC,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,QAAQ,qBACjCE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKJ,gBAAgBoB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA,mDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWjB,6BAETmB,aAAahB,SAASsB,GAAG,2BACzBN,aAAahB,SAASuB,OAAO,+BAC7Bf,wCACA,CAAC,CAACE,gCACFI;sBAGF,oBAACX;QACCqB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAahB,SAASsB,GAAG,wCAA4C,YAAY;QAEnFI,mBAAmBV,aAAahB,SAASsB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,SAAS;sBAEX,oBAACc;QAAId,SAAS;qBACZ,oBAACc;QAAId,SAAS;OACXP,wBACD,oBAACqB;QAAId,SAAS;OAAgChB,aAAaW,cAAcA,aAE1EC,sBACC,oBAACN;QAASQ,WAAU;QAAME,SAAS;QAA8Be,QAAO;OACrEnB;AAMb,EAAE"}
|
|
@@ -241,7 +241,7 @@ function useActivity(hasActive, stopDelay) {
|
|
|
241
241
|
var clearClicks = useTimeout(function() {
|
|
242
242
|
return setClicks([]);
|
|
243
243
|
}, WAVE_LIVE);
|
|
244
|
-
var classes = classNames(className, "vkuiTappable", "vkuiInternalTappable", platform === Platform.IOS && "vkuiTappable--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],
|
|
244
|
+
var classes = classNames(className, "vkuiTappable", "vkuiInternalTappable", platform === Platform.IOS && "vkuiTappable--ios", sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && "vkuiTappable--hasHover", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
|
|
245
245
|
background: "vkuiTappable--hover-background",
|
|
246
246
|
opacity: "vkuiTappable--hover-opacity"
|
|
247
247
|
})[hoverMode], hasActive && active && isPresetActiveMode && ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n none: styles['Tappable--sizeX-none'],\n compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n | 'onTouchStart'\n | 'onTouchMove'\n | 'onTouchEnd'\n | 'onTouchCancel'\n | 'onMouseDown'\n | 'onMouseMove'\n | 'onMouseUp'\n | 'onMouseLeave'\n> &\n AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n extends TappableElementProps,\n HasRootRef<HTMLElement>,\n HasComponent,\n Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n /**\n * Длительность показа active-состояния\n */\n activeEffectDelay?: number;\n stopPropagation?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на hover-состояние\n */\n hasHover?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на active-состояние\n */\n hasActive?: boolean;\n /**\n * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n */\n activeMode?: StateMode | string;\n /**\n * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n */\n hoverMode?: StateMode | string;\n /**\n * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n */\n focusVisibleMode?: FocusVisibleMode | string;\n children?: React.ReactNode;\n onEnter?(outputEvent: MouseEvent): void;\n onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n x: number;\n y: number;\n id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n switch (stateMode) {\n case 'opacity':\n case 'background':\n return true;\n default:\n return false;\n }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n TapState.none,\n );\n const _stop = () => setActivity(TapState.none);\n const start = () => hasActive && setActivity(TapState.active);\n const delayStart = () => {\n hasActive && setActivity(TapState.pending);\n };\n\n const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n const stopTimeout = useTimeout(_stop, stopDelay);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.pending) {\n activeTimeout.set();\n return activeTimeout.clear;\n }\n if (activity === TapState.exiting) {\n return stopTimeout.clear;\n }\n if (activity === TapState.active) {\n activeBus.emit('active', id);\n }\n return noop;\n }, [activity]);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.none) {\n return noop;\n }\n const onActiveChange = (activeId: string) => {\n activeId !== id && _stop();\n };\n activeBus.on('active', onActiveChange);\n return () => activeBus.off('active', onActiveChange);\n }, [activity === TapState.none]);\n\n useIsomorphicLayoutEffect(() => {\n !hasActive && _stop();\n }, [hasActive]);\n\n const stop = (delay?: number) => {\n if (delay) {\n setActivity(TapState.exiting);\n return stopTimeout.set(delay);\n }\n _stop();\n };\n\n return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n children,\n Component,\n onClick,\n onKeyDown: _onKeyDown,\n activeEffectDelay = ACTIVE_EFFECT_DELAY,\n stopPropagation = false,\n getRootRef,\n hasHover: _hasHover = true,\n hoverMode = 'background',\n hasActive: _hasActive = true,\n activeMode = 'background',\n focusVisibleMode = 'inside',\n onEnter,\n onLeave,\n className,\n ...props\n}: TappableProps) => {\n Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n const { onHoverChange } = React.useContext(TappableContext);\n const insideTouchRoot = React.useContext(TouchRootContext);\n const platform = usePlatform();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeX = 'none' } = useAdaptivity();\n const hasPointerContext = useAdaptivityHasPointer();\n const hasHoverContext = useAdaptivityHasHover();\n\n const [clicks, setClicks] = React.useState<Wave[]>([]);\n const [childHover, setChildHover] = React.useState(false);\n const {\n value: _hovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const hovered = _hovered && !props.disabled;\n const hasActive = _hasActive && !childHover && !props.disabled;\n const hasHover = hasHoverContext && _hasHover && !childHover;\n const isCustomElement =\n Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n const isPresetHoverMode = isPresetStateMode(hoverMode);\n const isPresetActiveMode = isPresetStateMode(activeMode);\n const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n const active = activity === TapState.active || activity === TapState.exiting;\n\n const containerRef = useExternRef(getRootRef);\n\n // hover propagation\n const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n useIsomorphicLayoutEffect(() => {\n if (!hovered) {\n return noop;\n }\n onHoverChange(true);\n return () => onHoverChange(false);\n }, [hovered]);\n\n /*\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\n function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n e.preventDefault();\n containerRef.current?.click();\n }\n }\n\n const needWaves =\n platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n function addClick(x: number, y: number) {\n const dateNow = Date.now();\n const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n setClicks([...filteredClicks, { x, y, id: dateNow }]);\n clearClicks.set();\n }\n\n function onStart({ originalEvent }: TouchEvent) {\n if (hasActive) {\n if (originalEvent.touches && originalEvent.touches.length > 1) {\n // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n return stop();\n }\n\n if (needWaves) {\n const { top, left } = getOffsetRect(containerRef.current);\n const x = coordX(originalEvent) - (left ?? 0);\n const y = coordY(originalEvent) - (top ?? 0);\n addClick(x, y);\n }\n\n delayStart();\n }\n }\n\n function onMove({ isSlide }: TouchEvent) {\n if (isSlide) {\n stop();\n }\n }\n\n function onEnd({ duration }: TouchEvent) {\n if (activity === TapState.none) {\n return;\n }\n if (activity === TapState.pending) {\n // активировать при коротком тапе\n start();\n }\n\n // отключить без задержки при длинном тапе\n const activeDuration = duration - ACTIVE_DELAY;\n stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n }\n\n const classes = classNames(\n className,\n styles['Tappable'],\n 'vkuiInternalTappable',\n platform === Platform.IOS && styles['Tappable--ios'],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n hasHoverContext && styles['Tappable--hover-has'],\n hasActive && styles['Tappable--hasActive'],\n hasHover && hovered && !isPresetHoverMode && hoverMode,\n hasActive && active && !isPresetActiveMode && activeMode,\n focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n hasHover &&\n hovered &&\n isPresetHoverMode &&\n {\n background: styles['Tappable--hover-background'],\n opacity: styles['Tappable--hover-opacity'],\n }[hoverMode],\n hasActive &&\n active &&\n isPresetActiveMode &&\n {\n background: styles['Tappable--active-background'],\n opacity: styles['Tappable--active-opacity'],\n }[activeMode],\n focusVisible && styles['Tappable--focus-visible'],\n );\n\n const handlers: RootComponentProps = {\n onStart: callMultiple(onStart, props.onStart),\n onMove: callMultiple(onMove, props.onMove),\n onEnd: callMultiple(onEnd, props.onEnd),\n onClick,\n onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n };\n const role = props.href ? 'link' : 'button';\n\n return (\n <Touch\n onEnter={callMultiple(setHoveredTrue, onEnter)}\n onLeave={callMultiple(setHoveredFalse, onLeave)}\n type={Component === 'button' ? 'button' : undefined}\n tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n role={isCustomElement ? role : undefined}\n aria-disabled={isCustomElement ? props.disabled : undefined}\n stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n {...props}\n slideThreshold={20}\n usePointerHover\n className={classes}\n Component={Component}\n getRootRef={containerRef}\n onBlur={callMultiple(onBlur, props.onBlur)}\n onFocus={callMultiple(onFocus, props.onFocus)}\n {...(props.disabled ? {} : handlers)}\n >\n <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n {needWaves && (\n <span aria-hidden className={styles.Tappable__waves}>\n {clicks.map((wave) => (\n <span\n key={wave.id}\n className={styles.Tappable__wave}\n style={{ top: wave.y, left: wave.x }}\n />\n ))}\n </span>\n )}\n {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n <span aria-hidden className={styles.Tappable__stateLayer} />\n )}\n {!props.disabled && isPresetFocusVisibleMode && (\n <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n )}\n </Touch>\n );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","mode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n none: styles['Tappable--sizeX-none'],\n compact: styles['Tappable--sizeX-compact'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n | 'onTouchStart'\n | 'onTouchMove'\n | 'onTouchEnd'\n | 'onTouchCancel'\n | 'onMouseDown'\n | 'onMouseMove'\n | 'onMouseUp'\n | 'onMouseLeave'\n> &\n AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n extends TappableElementProps,\n HasRootRef<HTMLElement>,\n HasComponent,\n Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n /**\n * Длительность показа active-состояния\n */\n activeEffectDelay?: number;\n stopPropagation?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на hover-состояние\n */\n hasHover?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на active-состояние\n */\n hasActive?: boolean;\n /**\n * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n */\n activeMode?: StateMode | string;\n /**\n * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n */\n hoverMode?: StateMode | string;\n /**\n * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n */\n focusVisibleMode?: FocusVisibleMode | string;\n children?: React.ReactNode;\n onEnter?(outputEvent: MouseEvent): void;\n onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n x: number;\n y: number;\n id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n switch (stateMode) {\n case 'opacity':\n case 'background':\n return true;\n default:\n return false;\n }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n TapState.none,\n );\n const _stop = () => setActivity(TapState.none);\n const start = () => hasActive && setActivity(TapState.active);\n const delayStart = () => {\n hasActive && setActivity(TapState.pending);\n };\n\n const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n const stopTimeout = useTimeout(_stop, stopDelay);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.pending) {\n activeTimeout.set();\n return activeTimeout.clear;\n }\n if (activity === TapState.exiting) {\n return stopTimeout.clear;\n }\n if (activity === TapState.active) {\n activeBus.emit('active', id);\n }\n return noop;\n }, [activity]);\n\n useIsomorphicLayoutEffect(() => {\n if (activity === TapState.none) {\n return noop;\n }\n const onActiveChange = (activeId: string) => {\n activeId !== id && _stop();\n };\n activeBus.on('active', onActiveChange);\n return () => activeBus.off('active', onActiveChange);\n }, [activity === TapState.none]);\n\n useIsomorphicLayoutEffect(() => {\n !hasActive && _stop();\n }, [hasActive]);\n\n const stop = (delay?: number) => {\n if (delay) {\n setActivity(TapState.exiting);\n return stopTimeout.set(delay);\n }\n _stop();\n };\n\n return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n children,\n Component,\n onClick,\n onKeyDown: _onKeyDown,\n activeEffectDelay = ACTIVE_EFFECT_DELAY,\n stopPropagation = false,\n getRootRef,\n hasHover: _hasHover = true,\n hoverMode = 'background',\n hasActive: _hasActive = true,\n activeMode = 'background',\n focusVisibleMode = 'inside',\n onEnter,\n onLeave,\n className,\n ...props\n}: TappableProps) => {\n Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n const { onHoverChange } = React.useContext(TappableContext);\n const insideTouchRoot = React.useContext(TouchRootContext);\n const platform = usePlatform();\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeX = 'none' } = useAdaptivity();\n const hasPointerContext = useAdaptivityHasPointer();\n const hasHoverContext = useAdaptivityHasHover();\n\n const [clicks, setClicks] = React.useState<Wave[]>([]);\n const [childHover, setChildHover] = React.useState(false);\n const {\n value: _hovered,\n setTrue: setHoveredTrue,\n setFalse: setHoveredFalse,\n } = useBooleanState(false);\n\n const hovered = _hovered && !props.disabled;\n const hasActive = _hasActive && !childHover && !props.disabled;\n const hasHover = hasHoverContext && _hasHover && !childHover;\n const isCustomElement =\n Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n const isPresetHoverMode = isPresetStateMode(hoverMode);\n const isPresetActiveMode = isPresetStateMode(activeMode);\n const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n const active = activity === TapState.active || activity === TapState.exiting;\n\n const containerRef = useExternRef(getRootRef);\n\n // hover propagation\n const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n useIsomorphicLayoutEffect(() => {\n if (!hovered) {\n return noop;\n }\n onHoverChange(true);\n return () => onHoverChange(false);\n }, [hovered]);\n\n /*\n * [a11y]\n * Обрабатывает событие onkeydown\n * для кастомных доступных элементов:\n * - role=\"link\" (активация по Enter)\n * - role=\"button\" (активация по Space и Enter)\n */\n function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n e.preventDefault();\n containerRef.current?.click();\n }\n }\n\n const needWaves =\n platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n function addClick(x: number, y: number) {\n const dateNow = Date.now();\n const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n setClicks([...filteredClicks, { x, y, id: dateNow }]);\n clearClicks.set();\n }\n\n function onStart({ originalEvent }: TouchEvent) {\n if (hasActive) {\n if (originalEvent.touches && originalEvent.touches.length > 1) {\n // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n return stop();\n }\n\n if (needWaves) {\n const { top, left } = getOffsetRect(containerRef.current);\n const x = coordX(originalEvent) - (left ?? 0);\n const y = coordY(originalEvent) - (top ?? 0);\n addClick(x, y);\n }\n\n delayStart();\n }\n }\n\n function onMove({ isSlide }: TouchEvent) {\n if (isSlide) {\n stop();\n }\n }\n\n function onEnd({ duration }: TouchEvent) {\n if (activity === TapState.none) {\n return;\n }\n if (activity === TapState.pending) {\n // активировать при коротком тапе\n start();\n }\n\n // отключить без задержки при длинном тапе\n const activeDuration = duration - ACTIVE_DELAY;\n stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n }\n\n const classes = classNames(\n className,\n styles['Tappable'],\n 'vkuiInternalTappable',\n platform === Platform.IOS && styles['Tappable--ios'],\n sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n hasHover && styles['Tappable--hasHover'],\n hasActive && styles['Tappable--hasActive'],\n hasHover && hovered && !isPresetHoverMode && hoverMode,\n hasActive && active && !isPresetActiveMode && activeMode,\n focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n hasHover &&\n hovered &&\n isPresetHoverMode &&\n {\n background: styles['Tappable--hover-background'],\n opacity: styles['Tappable--hover-opacity'],\n }[hoverMode],\n hasActive &&\n active &&\n isPresetActiveMode &&\n {\n background: styles['Tappable--active-background'],\n opacity: styles['Tappable--active-opacity'],\n }[activeMode],\n focusVisible && styles['Tappable--focus-visible'],\n );\n\n const handlers: RootComponentProps = {\n onStart: callMultiple(onStart, props.onStart),\n onMove: callMultiple(onMove, props.onMove),\n onEnd: callMultiple(onEnd, props.onEnd),\n onClick,\n onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n };\n const role = props.href ? 'link' : 'button';\n\n return (\n <Touch\n onEnter={callMultiple(setHoveredTrue, onEnter)}\n onLeave={callMultiple(setHoveredFalse, onLeave)}\n type={Component === 'button' ? 'button' : undefined}\n tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n role={isCustomElement ? role : undefined}\n aria-disabled={isCustomElement ? props.disabled : undefined}\n stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n {...props}\n slideThreshold={20}\n usePointerHover\n className={classes}\n Component={Component}\n getRootRef={containerRef}\n onBlur={callMultiple(onBlur, props.onBlur)}\n onFocus={callMultiple(onFocus, props.onFocus)}\n {...(props.disabled ? {} : handlers)}\n >\n <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n {needWaves && (\n <span aria-hidden className={styles.Tappable__waves}>\n {clicks.map((wave) => (\n <span\n key={wave.id}\n className={styles.Tappable__wave}\n style={{ top: wave.y, left: wave.x }}\n />\n ))}\n </span>\n )}\n {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n <span aria-hidden className={styles.Tappable__stateLayer} />\n )}\n {!props.disabled && isPresetFocusVisibleMode && (\n <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n )}\n </Touch>\n );\n};\n"],"names":["React","classNames","noop","mitt","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","useBooleanState","useExternRef","useFocusVisible","usePlatform","useTimeout","shouldTriggerClickOnEnterOrSpace","SizeType","callMultiple","getOffsetRect","Platform","coordX","coordY","useIsomorphicLayoutEffect","FocusVisible","Touch","TouchRootContext","sizeXClassNames","none","compact","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","onKeyDown","e","isCustomElement","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","top","left","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","childHover","setChildHover","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","hovered","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","childContext","useRef","ANDROID","classes","IOS","REGULAR","background","opacity","handlers","role","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","mode"],"mappings":"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"}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export interface CaptionProps extends
|
|
4
|
-
/**
|
|
5
|
-
* Задаёт начертание шрифта отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HasCaps, TypographyProps } from '../types';
|
|
3
|
+
export interface CaptionProps extends TypographyProps, HasCaps {
|
|
8
4
|
level?: '1' | '2' | '3';
|
|
9
|
-
caps?: boolean;
|
|
10
5
|
}
|
|
11
6
|
/**
|
|
12
7
|
* @see https://vkcom.github.io/VKUI/#/Caption
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Caption/Caption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Caption.module.css';\n\nexport interface CaptionProps extends TypographyProps, HasCaps {\n level?: '1' | '2' | '3';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Caption\n */\nexport const Caption = ({\n className,\n children,\n weight,\n level = '1',\n caps,\n Component = 'span',\n ...restProps\n}: CaptionProps) => {\n return (\n <Component\n {...restProps}\n className={classNames(\n className,\n styles['Caption'],\n caps && styles['Caption--caps'],\n {\n '1': styles['Caption--level-1'],\n '2': styles['Caption--level-2'],\n '3': styles['Caption--level-3'],\n }[level],\n weight &&\n {\n '1': styles['Caption--weight-1'],\n '2': styles['Caption--weight-2'],\n '3': styles['Caption--weight-3'],\n }[weight],\n )}\n >\n {children}\n </Component>\n );\n};\n"],"names":["React","classNames","Caption","className","children","weight","level","caps","Component","restProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAQ7C;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAQH;QAPlBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,8BACAC,OAAAA,kCAAQ,oBACRC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACA,mDACKC;QACJN,WAAWF,WACTE,0BAEAI,6BACA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,MAAM,EACRD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP,EAAE"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export interface FootnoteProps extends
|
|
4
|
-
/**
|
|
5
|
-
* Задаёт начертание шрифта отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
8
|
-
caps?: boolean;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HasCaps, TypographyProps } from '../types';
|
|
3
|
+
export interface FootnoteProps extends TypographyProps, HasCaps {
|
|
9
4
|
}
|
|
10
5
|
/**
|
|
11
6
|
* @see https://vkcom.github.io/VKUI/#/Footnote
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Footnote/Footnote.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasCaps, TypographyProps } from '../types';\nimport styles from './Footnote.module.css';\n\nexport interface FootnoteProps extends TypographyProps, HasCaps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footnote\n */\nexport const Footnote = ({\n className,\n children,\n weight,\n caps,\n Component = 'span',\n ...restProps\n}: FootnoteProps) => {\n return (\n <Component\n {...restProps}\n className={classNames(\n className,\n styles['Footnote'],\n caps && styles['Footnote--caps'],\n weight &&\n {\n '1': styles['Footnote--weight-1'],\n '2': styles['Footnote--weight-2'],\n '3': styles['Footnote--weight-3'],\n }[weight],\n )}\n >\n {children}\n </Component>\n );\n};\n"],"names":["React","classNames","Footnote","className","children","weight","caps","Component","restProps"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAM7C;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAOH;QANnBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,QACAC,cAAAA,gCACAC,WAAAA,0CAAY,2BACTC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACA,mDACKC;QACJL,WAAWF,WACTE,2BAEAG,8BACAD,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP,EAAE"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* Задаёт начертание шрифта отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HasRootRef } from '../../../types';
|
|
3
|
+
import { TypographyProps } from '../types';
|
|
4
|
+
export interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {
|
|
8
5
|
level?: '1' | '2';
|
|
9
6
|
}
|
|
10
7
|
/**
|
|
@@ -6,11 +6,9 @@ import * as React from "react";
|
|
|
6
6
|
import { classNames } from "@vkontakte/vkjs";
|
|
7
7
|
import { useAdaptivity } from "../../../hooks/useAdaptivity";
|
|
8
8
|
import { SizeType } from "../../../lib/adaptivity";
|
|
9
|
-
import { warnOnce } from "../../../lib/warnOnce";
|
|
10
9
|
var sizeYClassNames = _define_property({
|
|
11
10
|
none: "vkuiHeadline--sizeY-none"
|
|
12
11
|
}, SizeType.COMPACT, "vkuiHeadline--sizeY-compact");
|
|
13
|
-
var warn = warnOnce("Headline");
|
|
14
12
|
/**
|
|
15
13
|
* @see https://vkcom.github.io/VKUI/#/Headline
|
|
16
14
|
*/ export var Headline = function(_param) {
|
|
@@ -23,9 +21,6 @@ var warn = warnOnce("Headline");
|
|
|
23
21
|
"getRootRef"
|
|
24
22
|
]);
|
|
25
23
|
var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
|
|
26
|
-
if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
|
|
27
|
-
warn("getRootRef может использоваться только с элементами DOM", "error");
|
|
28
|
-
}
|
|
29
24
|
return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
|
|
30
25
|
ref: getRootRef,
|
|
31
26
|
className: classNames(className, "vkuiHeadline", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Headline/Headline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Headline.module.css';\n\nconst sizeYClassNames = {\n none: styles['Headline--sizeY-none'],\n [SizeType.COMPACT]: styles['Headline--sizeY-compact'],\n};\n\nexport interface HeadlineProps extends TypographyProps, HasRootRef<HTMLElement> {\n level?: '1' | '2';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n className,\n children,\n weight = '3',\n level = '1',\n Component = 'h4',\n getRootRef,\n ...restProps\n}: HeadlineProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Component\n {...restProps}\n ref={getRootRef}\n className={classNames(\n className,\n styles['Headline'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n {\n '1': styles['Headline--level-1'],\n '2': styles['Headline--level-2'],\n }[level],\n {\n '1': styles['Headline--weight-1'],\n '2': styles['Headline--weight-2'],\n '3': styles['Headline--weight-3'],\n }[weight],\n )}\n >\n {children}\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeYClassNames","none","COMPACT","Headline","className","children","weight","level","Component","getRootRef","restProps","sizeY","ref","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AAKnD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAOnB;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAQH;QAPnBC,mBAAAA,WACAC,kBAAAA,iCACAC,QAAAA,oCAAS,2CACTC,OAAAA,kCAAQ,8CACRC,WAAAA,0CAAY,yBACZC,oBAAAA,YACGC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BX,iBAAAA,wCAAAA,eAAnBa,OAAAA,0CAAQ;IAEhB,qBACE,oBAACH,mDACKE;QACJE,KAAKH;QACLL,WAAWP,WACTO,2BAEAO,UAAUZ,SAASc,OAAO,IAAIb,eAAe,CAACW,MAAM,EACpD;YACE,GAAG;YACH,GAAG;QACL,CAAC,CAACJ,MAAM,EACR;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAC,CAACD,OAAO;QAGVD;AAGP,EAAE"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* Задаёт начертание шрифта, отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HasRootRef } from '../../../types';
|
|
3
|
+
import { TypographyProps } from '../types';
|
|
4
|
+
export interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {
|
|
8
5
|
}
|
|
9
6
|
/**
|
|
10
7
|
* @see https://vkcom.github.io/VKUI/#/Paragraph
|
|
@@ -3,8 +3,6 @@ import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
|
|
|
3
3
|
import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { classNames } from "@vkontakte/vkjs";
|
|
6
|
-
import { warnOnce } from "../../../lib/warnOnce";
|
|
7
|
-
var warn = warnOnce("Paragraph");
|
|
8
6
|
/**
|
|
9
7
|
* @see https://vkcom.github.io/VKUI/#/Paragraph
|
|
10
8
|
*/ export var Paragraph = function(_param) {
|
|
@@ -15,9 +13,6 @@ var warn = warnOnce("Paragraph");
|
|
|
15
13
|
"weight",
|
|
16
14
|
"children"
|
|
17
15
|
]);
|
|
18
|
-
if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
|
|
19
|
-
warn("getRootRef может использоваться только с элементами DOM", "error");
|
|
20
|
-
}
|
|
21
16
|
return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
|
|
22
17
|
ref: getRootRef,
|
|
23
18
|
className: classNames(className, "vkuiParagraph", weight && ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../../types';\nimport { TypographyProps } from '../types';\nimport styles from './Paragraph.module.css';\n\nexport interface ParagraphProps extends TypographyProps, HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Paragraph\n */\nexport const Paragraph = ({\n className,\n Component = 'span',\n getRootRef,\n weight,\n children,\n ...restProps\n}: ParagraphProps) => {\n return (\n <Component\n {...restProps}\n ref={getRootRef}\n className={classNames(\n className,\n styles['Paragraph'],\n weight &&\n {\n '1': styles['Paragraph--weight-1'],\n '2': styles['Paragraph--weight-2'],\n '3': styles['Paragraph--weight-3'],\n }[weight],\n )}\n >\n {children}\n </Component>\n );\n};\n"],"names":["React","classNames","Paragraph","className","Component","getRootRef","weight","children","restProps","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,YAAY,iBAOH;QANpBC,mBAAAA,qCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACH,mDACKI;QACJC,KAAKJ;QACLF,WAAWF,WACTE,4BAEAG,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZC;AAGP,EAAE"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
export
|
|
4
|
-
/**
|
|
5
|
-
* Задаёт начертание шрифта отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
8
|
-
}
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TypographyProps } from '../types';
|
|
3
|
+
export type SubheadProps = TypographyProps;
|
|
9
4
|
/**
|
|
10
5
|
* @see https://vkcom.github.io/VKUI/#/Subhead
|
|
11
6
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Typography/Subhead/Subhead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Typography/Subhead/Subhead.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { TypographyProps } from '../types';\nimport styles from './Subhead.module.css';\n\nconst sizeYClassNames = {\n none: styles['Subhead--sizeY-none'],\n [SizeType.COMPACT]: styles['Subhead--sizeY-compact'],\n};\n\nexport type SubheadProps = TypographyProps;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Subhead\n */\nexport const Subhead = ({\n className,\n children,\n weight,\n Component = 'h5',\n ...restProps\n}: SubheadProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <Component\n {...restProps}\n className={classNames(\n className,\n styles['Subhead'],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n weight &&\n {\n '1': styles['Subhead--weight-1'],\n '2': styles['Subhead--weight-2'],\n '3': styles['Subhead--weight-3'],\n }[weight],\n )}\n >\n {children}\n </Component>\n );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeYClassNames","none","COMPACT","Subhead","className","children","weight","Component","restProps","sizeY","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,QAAQ,QAAQ,0BAA0B;AAInD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAKnB;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAMH;QALlBC,mBAAAA,WACAC,kBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,yBACTC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BT,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAEhB,qBACE,oBAACF,mDACKC;QACJJ,WAAWP,WACTO,0BAEAK,UAAUV,SAASW,OAAO,IAAIV,eAAe,CAACS,MAAM,EACpDH,UACE,CAAA;YACE,GAAG;YACH,GAAG;YACH,GAAG;QACL,CAAA,CAAC,CAACA,OAAO;QAGZD;AAGP,EAAE"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
* Задаёт начертание шрифта, отличное от стандартного.
|
|
6
|
-
*/
|
|
7
|
-
weight?: '1' | '2' | '3';
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HasRootRef } from '../../../types';
|
|
3
|
+
import { TypographyProps } from '../types';
|
|
4
|
+
export interface TextProps extends TypographyProps, HasRootRef<HTMLElement> {
|
|
8
5
|
}
|
|
9
6
|
/**
|
|
10
7
|
* @see https://vkcom.github.io/VKUI/#/Text
|
|
@@ -6,11 +6,9 @@ import * as React from "react";
|
|
|
6
6
|
import { classNames } from "@vkontakte/vkjs";
|
|
7
7
|
import { useAdaptivity } from "../../../hooks/useAdaptivity";
|
|
8
8
|
import { SizeType } from "../../../lib/adaptivity";
|
|
9
|
-
import { warnOnce } from "../../../lib/warnOnce";
|
|
10
9
|
var sizeYClassNames = _define_property({
|
|
11
10
|
none: "vkuiText--sizeY-none"
|
|
12
11
|
}, SizeType.COMPACT, "vkuiText--sizeY-compact");
|
|
13
|
-
var warn = warnOnce("Text");
|
|
14
12
|
/**
|
|
15
13
|
* @see https://vkcom.github.io/VKUI/#/Text
|
|
16
14
|
*/ export var Text = function(_param) {
|
|
@@ -21,9 +19,6 @@ var warn = warnOnce("Text");
|
|
|
21
19
|
"Component",
|
|
22
20
|
"getRootRef"
|
|
23
21
|
]);
|
|
24
|
-
if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
|
|
25
|
-
warn('Свойство "getRootRef" может использоваться только с компонентами DOM', "error");
|
|
26
|
-
}
|
|
27
22
|
var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
|
|
28
23
|
return /*#__PURE__*/ React.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
|
|
29
24
|
ref: getRootRef,
|