@prom-ui/core 2.5.0 → 3.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Avatar/cjs/index.development.js +8 -0
- package/Avatar/cjs/index.development.v2.js +8 -0
- package/Avatar/cjs/index.production.js +1 -1
- package/Avatar/cjs/index.production.v2.js +1 -1
- package/Avatar/index.d.ts +13 -5
- package/Avatar/package.json +1 -1
- package/Backdrop/cjs/index.development.js +5 -3
- package/Backdrop/cjs/index.development.v2.js +5 -3
- package/Backdrop/cjs/index.production.js +1 -1
- package/Backdrop/cjs/index.production.v2.js +1 -1
- package/Backdrop/index.d.ts +11 -9
- package/Backdrop/package.json +1 -1
- package/Badge/cjs/index.development.js +7 -1
- package/Badge/cjs/index.development.v2.js +7 -1
- package/Badge/cjs/index.production.js +1 -1
- package/Badge/cjs/index.production.v2.js +1 -1
- package/Badge/index.d.ts +17 -9
- package/Badge/package.json +1 -1
- package/Body/cjs/index.development.js +22 -0
- package/Body/cjs/index.development.v2.js +22 -0
- package/Body/index.d.ts +68 -0
- package/Body/package.json +1 -1
- package/BodyProvider/cjs/index.development.js +103 -151
- package/BodyProvider/cjs/index.development.v2.js +103 -151
- package/BodyProvider/cjs/index.production.js +1 -1
- package/BodyProvider/cjs/index.production.v2.js +1 -1
- package/BodyProvider/hooks/useSyncDomColorScheme.d.ts +10 -0
- package/BodyProvider/hooks/useSyncStoreProps.d.ts +13 -0
- package/BodyProvider/index.d.ts +17 -1
- package/BodyProvider/package.json +1 -1
- package/BodyProvider/slices/sliceColorScheme.d.ts +16 -0
- package/BodyProvider/slices/sliceTTag.d.ts +1 -1
- package/BodyProvider/store.d.ts +4 -2
- package/BodyScrollLock/cjs/index.development.js +7 -0
- package/BodyScrollLock/cjs/index.development.v2.js +7 -0
- package/BodyScrollLock/cjs/index.production.js +1 -1
- package/BodyScrollLock/cjs/index.production.v2.js +1 -1
- package/BodyScrollLock/index.d.ts +8 -0
- package/BodyScrollLock/package.json +1 -1
- package/Box/cjs/index.development.js +14 -3
- package/Box/cjs/index.development.v2.js +14 -3
- package/Box/index.d.ts +110 -3
- package/Box/package.json +1 -1
- package/Button/cjs/index.development.js +16 -0
- package/Button/cjs/index.development.v2.js +16 -0
- package/Button/cjs/index.production.js +1 -1
- package/Button/cjs/index.production.v2.js +1 -1
- package/Button/index.d.ts +87 -1
- package/Button/package.json +1 -1
- package/ButtonPageUp/cjs/index.development.js +8 -0
- package/ButtonPageUp/cjs/index.development.v2.js +8 -0
- package/ButtonPageUp/cjs/index.production.js +1 -1
- package/ButtonPageUp/cjs/index.production.v2.js +1 -1
- package/ButtonPageUp/index.d.ts +14 -5
- package/ButtonPageUp/package.json +1 -1
- package/Checkbox/cjs/index.development.js +6 -0
- package/Checkbox/cjs/index.development.v2.js +6 -0
- package/Checkbox/cjs/index.production.js +1 -1
- package/Checkbox/cjs/index.production.v2.js +1 -1
- package/Checkbox/index.d.ts +9 -0
- package/Checkbox/package.json +1 -1
- package/ColorScheme/cjs/index.development.js +14 -3
- package/ColorScheme/cjs/index.development.v2.js +14 -3
- package/ColorScheme/cjs/index.production.js +1 -1
- package/ColorScheme/cjs/index.production.v2.js +1 -1
- package/ColorScheme/index.d.ts +12 -2
- package/ColorScheme/package.json +1 -1
- package/ContextMenu/cjs/index.development.js +8 -0
- package/ContextMenu/cjs/index.development.v2.js +8 -0
- package/ContextMenu/cjs/index.production.js +1 -1
- package/ContextMenu/cjs/index.production.v2.js +1 -1
- package/ContextMenu/index.d.ts +14 -5
- package/ContextMenu/package.json +1 -1
- package/ErrorCatch/ErrorCatch.d.ts +9 -3
- package/ErrorCatch/cjs/index.development.js +6 -1
- package/ErrorCatch/cjs/index.development.v2.js +6 -1
- package/ErrorCatch/cjs/index.production.js +1 -1
- package/ErrorCatch/cjs/index.production.v2.js +1 -1
- package/ErrorCatch/package.json +1 -1
- package/Flex/cjs/index.development.js +30 -0
- package/Flex/cjs/index.development.v2.js +30 -0
- package/Flex/index.d.ts +86 -0
- package/Flex/package.json +1 -1
- package/Grid/cjs/index.development.js +30 -2
- package/Grid/cjs/index.development.v2.js +30 -2
- package/Grid/cjs/index.production.js +1 -1
- package/Grid/cjs/index.production.v2.js +1 -1
- package/Grid/cjs/style.development.css +1324 -4959
- package/Grid/cjs/style.development.v2.css +1324 -4959
- package/Grid/cjs/style.production.css +1 -1
- package/Grid/cjs/style.production.v2.css +1 -1
- package/Grid/index.d.ts +94 -9
- package/Grid/package.json +1 -1
- package/Icon/cjs/index.development.js +13 -0
- package/Icon/cjs/index.development.v2.js +13 -0
- package/Icon/index.d.ts +29 -2
- package/Icon/package.json +1 -1
- package/Image/cjs/index.development.js +16 -0
- package/Image/cjs/index.development.v2.js +16 -0
- package/Image/cjs/style.development.css +1 -2
- package/Image/cjs/style.development.v2.css +1 -2
- package/Image/cjs/style.production.css +1 -1
- package/Image/cjs/style.production.v2.css +1 -1
- package/Image/index.d.ts +74 -0
- package/Image/package.json +1 -1
- package/ImageEmoji/cjs/index.development.js +6 -0
- package/ImageEmoji/cjs/index.development.v2.js +6 -0
- package/ImageEmoji/cjs/index.production.js +1 -1
- package/ImageEmoji/cjs/index.production.v2.js +1 -1
- package/ImageEmoji/index.d.ts +8 -1
- package/ImageEmoji/package.json +1 -1
- package/Input/cjs/index.development.js +15 -0
- package/Input/cjs/index.development.v2.js +15 -0
- package/Input/index.d.ts +35 -0
- package/Input/package.json +1 -1
- package/InputField/cjs/index.development.js +7 -0
- package/InputField/cjs/index.development.v2.js +7 -0
- package/InputField/cjs/index.production.js +1 -1
- package/InputField/cjs/index.production.v2.js +1 -1
- package/InputField/index.d.ts +13 -4
- package/InputField/package.json +1 -1
- package/KeyPress/cjs/index.development.js +8 -0
- package/KeyPress/cjs/index.development.v2.js +8 -0
- package/KeyPress/cjs/index.production.js +1 -1
- package/KeyPress/cjs/index.production.v2.js +1 -1
- package/KeyPress/index.d.ts +11 -4
- package/KeyPress/package.json +1 -1
- package/Label/cjs/index.development.js +9 -1
- package/Label/cjs/index.development.v2.js +9 -1
- package/Label/index.d.ts +15 -2
- package/Label/package.json +1 -1
- package/Line/cjs/index.development.js +11 -0
- package/Line/cjs/index.development.v2.js +11 -0
- package/Line/index.d.ts +35 -0
- package/Line/package.json +1 -1
- package/Link/cjs/index.development.js +10 -4
- package/Link/cjs/index.development.v2.js +10 -4
- package/Link/cjs/style.development.css +1 -2
- package/Link/cjs/style.development.v2.css +1 -2
- package/Link/cjs/style.production.css +1 -1
- package/Link/cjs/style.production.v2.css +1 -1
- package/Link/index.d.ts +61 -3
- package/Link/package.json +1 -1
- package/List/cjs/index.development.js +22 -0
- package/List/cjs/index.development.v2.js +22 -0
- package/List/index.d.ts +64 -0
- package/List/package.json +1 -1
- package/Media/cjs/index.development.js +6 -1
- package/Media/cjs/index.development.v2.js +6 -1
- package/Media/cjs/index.production.js +1 -1
- package/Media/cjs/index.production.v2.js +1 -1
- package/Media/index.d.ts +8 -3
- package/Media/package.json +1 -1
- package/Modal/cjs/index.development.js +8 -0
- package/Modal/cjs/index.development.v2.js +8 -0
- package/Modal/cjs/index.production.js +1 -1
- package/Modal/cjs/index.production.v2.js +1 -1
- package/Modal/index.d.ts +16 -8
- package/Modal/package.json +1 -1
- package/OutsideClick/cjs/index.development.js +8 -0
- package/OutsideClick/cjs/index.development.v2.js +8 -0
- package/OutsideClick/cjs/index.production.js +1 -1
- package/OutsideClick/cjs/index.production.v2.js +1 -1
- package/OutsideClick/index.d.ts +10 -2
- package/OutsideClick/package.json +1 -1
- package/Overlay/cjs/index.development.js +7 -2
- package/Overlay/cjs/index.development.v2.js +7 -2
- package/Overlay/cjs/index.production.js +1 -1
- package/Overlay/cjs/index.production.v2.js +1 -1
- package/Overlay/index.d.ts +34 -29
- package/Overlay/package.json +1 -1
- package/PhotoGallery/cjs/index.development.js +22 -3
- package/PhotoGallery/cjs/index.development.v2.js +22 -3
- package/PhotoGallery/cjs/index.production.js +1 -1
- package/PhotoGallery/cjs/index.production.v2.js +1 -1
- package/PhotoGallery/cjs/style.development.css +34 -18
- package/PhotoGallery/cjs/style.development.v2.css +34 -18
- package/PhotoGallery/cjs/style.production.css +1 -1
- package/PhotoGallery/cjs/style.production.v2.css +1 -1
- package/PhotoGallery/index.d.ts +22 -7
- package/PhotoGallery/package.json +1 -1
- package/Picture/cjs/index.development.js +22 -0
- package/Picture/cjs/index.development.v2.js +22 -0
- package/Picture/cjs/style.development.css +1 -2
- package/Picture/cjs/style.development.v2.css +1 -2
- package/Picture/cjs/style.production.css +1 -1
- package/Picture/cjs/style.production.v2.css +1 -1
- package/Picture/index.d.ts +62 -0
- package/Picture/package.json +1 -1
- package/Portal/cjs/index.development.js +10 -0
- package/Portal/cjs/index.development.v2.js +10 -0
- package/Portal/cjs/index.production.js +1 -1
- package/Portal/cjs/index.production.v2.js +1 -1
- package/Portal/index.d.ts +12 -3
- package/Portal/package.json +1 -1
- package/Progress/cjs/index.development.js +5 -1
- package/Progress/cjs/index.development.v2.js +5 -1
- package/Progress/cjs/index.production.js +1 -1
- package/Progress/cjs/index.production.v2.js +1 -1
- package/Progress/index.d.ts +9 -1
- package/Progress/package.json +1 -1
- package/QRCode/cjs/index.development.js +6 -0
- package/QRCode/cjs/index.development.v2.js +6 -0
- package/QRCode/cjs/index.production.js +1 -1
- package/QRCode/cjs/index.production.v2.js +1 -1
- package/QRCode/index.d.ts +11 -5
- package/QRCode/package.json +1 -1
- package/Rating/cjs/index.development.js +8 -0
- package/Rating/cjs/index.development.v2.js +8 -0
- package/Rating/cjs/index.production.js +1 -1
- package/Rating/cjs/index.production.v2.js +1 -1
- package/Rating/index.d.ts +12 -4
- package/Rating/package.json +1 -1
- package/RatingSelect/cjs/index.development.js +7 -0
- package/RatingSelect/cjs/index.development.v2.js +7 -0
- package/RatingSelect/cjs/index.production.js +1 -1
- package/RatingSelect/cjs/index.production.v2.js +1 -1
- package/RatingSelect/index.d.ts +13 -6
- package/RatingSelect/package.json +1 -1
- package/Scroll/cjs/index.development.js +23 -0
- package/Scroll/cjs/index.development.v2.js +23 -0
- package/Scroll/index.d.ts +67 -7
- package/Scroll/package.json +1 -1
- package/ScrollControls/ScrollControlsButton.d.ts +2 -0
- package/ScrollControls/cjs/index.development.js +19 -3
- package/ScrollControls/cjs/index.development.v2.js +19 -3
- package/ScrollControls/cjs/index.production.js +1 -1
- package/ScrollControls/cjs/index.production.v2.js +1 -1
- package/ScrollControls/index.d.ts +21 -4
- package/ScrollControls/package.json +1 -1
- package/SimpleSlider/cjs/index.development.js +9 -0
- package/SimpleSlider/cjs/index.development.v2.js +9 -0
- package/SimpleSlider/cjs/index.production.js +1 -1
- package/SimpleSlider/cjs/index.production.v2.js +1 -1
- package/SimpleSlider/index.d.ts +27 -16
- package/SimpleSlider/package.json +1 -1
- package/Skeleton/cjs/index.development.js +11 -0
- package/Skeleton/cjs/index.development.v2.js +11 -0
- package/Skeleton/cjs/index.production.js +1 -1
- package/Skeleton/cjs/index.production.v2.js +1 -1
- package/Skeleton/index.d.ts +73 -12
- package/Skeleton/package.json +1 -1
- package/SnackBar/cjs/index.development.js +6 -1
- package/SnackBar/cjs/index.development.v2.js +6 -1
- package/SnackBar/cjs/index.production.js +1 -1
- package/SnackBar/cjs/index.production.v2.js +1 -1
- package/SnackBar/index.d.ts +22 -15
- package/SnackBar/package.json +1 -1
- package/Spinner/cjs/index.development.js +11 -0
- package/Spinner/cjs/index.development.v2.js +11 -0
- package/Spinner/cjs/index.production.js +1 -1
- package/Spinner/cjs/index.production.v2.js +1 -1
- package/Spinner/index.d.ts +39 -7
- package/Spinner/package.json +1 -1
- package/Text/cjs/index.development.js +16 -0
- package/Text/cjs/index.development.v2.js +16 -0
- package/Text/cjs/style.development.css +4 -8
- package/Text/cjs/style.development.v2.css +4 -8
- package/Text/cjs/style.production.css +1 -1
- package/Text/cjs/style.production.v2.css +1 -1
- package/Text/index.d.ts +83 -0
- package/Text/package.json +1 -1
- package/TextEmoji/cjs/index.development.js +7 -0
- package/TextEmoji/cjs/index.development.v2.js +7 -0
- package/TextEmoji/cjs/index.production.js +1 -1
- package/TextEmoji/cjs/index.production.v2.js +1 -1
- package/TextEmoji/index.d.ts +8 -0
- package/TextEmoji/package.json +1 -1
- package/Tooltip/cjs/index.development.js +8 -0
- package/Tooltip/cjs/index.development.v2.js +8 -0
- package/Tooltip/cjs/index.production.js +1 -1
- package/Tooltip/cjs/index.production.v2.js +1 -1
- package/Tooltip/index.d.ts +37 -30
- package/Tooltip/package.json +1 -1
- package/Tumbler/cjs/index.development.js +6 -0
- package/Tumbler/cjs/index.development.v2.js +6 -0
- package/Tumbler/cjs/index.production.js +1 -1
- package/Tumbler/cjs/index.production.v2.js +1 -1
- package/Tumbler/index.d.ts +8 -0
- package/Tumbler/package.json +1 -1
- package/Viewport/cjs/index.development.js +10 -0
- package/Viewport/cjs/index.development.v2.js +10 -0
- package/Viewport/cjs/index.production.js +1 -1
- package/Viewport/cjs/index.production.v2.js +1 -1
- package/Viewport/index.d.ts +15 -4
- package/Viewport/package.json +1 -1
- package/evokit/cjs/index.production.js +1 -1
- package/evokit/cjs/index.production.v2.js +1 -1
- package/evokit/package.json +1 -1
- package/package.json +3 -16
- package/useBrowserLayoutEffect/cjs/index.development.js +1 -1
- package/useBrowserLayoutEffect/cjs/index.development.v2.js +1 -1
- package/useBrowserLayoutEffect/index.d.ts +1 -1
- package/useBrowserLayoutEffect/package.json +1 -1
- package/useColorScheme/cjs/index.development.js +61 -0
- package/useColorScheme/cjs/index.development.v2.js +61 -0
- package/useColorScheme/cjs/index.production.js +1 -0
- package/useColorScheme/cjs/index.production.v2.js +1 -0
- package/useColorScheme/index.d.ts +31 -0
- package/useColorScheme/index.js +7 -0
- package/useColorScheme/index.v2.js +7 -0
- package/useColorScheme/package.json +9 -0
- package/useDebounce/cjs/index.development.js +2 -9
- package/useDebounce/cjs/index.development.v2.js +2 -9
- package/useDebounce/cjs/index.production.js +1 -1
- package/useDebounce/cjs/index.production.v2.js +1 -1
- package/useDebounce/index.d.ts +1 -1
- package/useDebounce/package.json +1 -1
- package/useForwardRef/cjs/index.development.js +1 -1
- package/useForwardRef/cjs/index.development.v2.js +1 -1
- package/useForwardRef/cjs/index.production.js +1 -1
- package/useForwardRef/cjs/index.production.v2.js +1 -1
- package/useForwardRef/index.d.ts +1 -1
- package/useForwardRef/package.json +1 -1
- package/useInView/package.json +1 -1
- package/useIsMounted/cjs/index.development.js +1 -1
- package/useIsMounted/cjs/index.development.v2.js +1 -1
- package/useIsMounted/cjs/index.production.js +1 -1
- package/useIsMounted/cjs/index.production.v2.js +1 -1
- package/useIsMounted/index.d.ts +1 -1
- package/useIsMounted/package.json +1 -1
- package/useKeyPress/cjs/index.development.js +1 -9
- package/useKeyPress/cjs/index.development.v2.js +1 -9
- package/useKeyPress/cjs/index.production.js +1 -1
- package/useKeyPress/cjs/index.production.v2.js +1 -1
- package/useKeyPress/index.d.ts +1 -1
- package/useKeyPress/package.json +1 -1
- package/useMedia/cjs/index.development.js +1 -1
- package/useMedia/cjs/index.development.v2.js +1 -1
- package/useMedia/index.d.ts +3 -3
- package/useMedia/package.json +1 -1
- package/useOutsideClick/cjs/index.development.js +1 -1
- package/useOutsideClick/cjs/index.development.v2.js +1 -1
- package/useOutsideClick/index.d.ts +1 -1
- package/useOutsideClick/package.json +1 -1
- package/usePortal/cjs/index.development.js +9 -21
- package/usePortal/cjs/index.development.v2.js +9 -21
- package/usePortal/cjs/index.production.js +1 -1
- package/usePortal/cjs/index.production.v2.js +1 -1
- package/usePortal/index.d.ts +5 -6
- package/usePortal/package.json +1 -1
- package/useScrollPosition/cjs/index.development.js +1 -1
- package/useScrollPosition/cjs/index.development.v2.js +1 -1
- package/useScrollPosition/index.d.ts +1 -1
- package/useScrollPosition/package.json +1 -1
- package/useScrollSync/cjs/index.development.js +210 -0
- package/useScrollSync/cjs/index.development.v2.js +210 -0
- package/useScrollSync/cjs/index.production.js +1 -0
- package/useScrollSync/cjs/index.production.v2.js +1 -0
- package/useScrollSync/index.d.ts +31 -0
- package/useScrollSync/index.js +7 -0
- package/useScrollSync/index.v2.js +7 -0
- package/useScrollSync/package.json +12 -0
- package/useSnackBar/cjs/index.development.js +1 -1
- package/useSnackBar/cjs/index.development.v2.js +1 -1
- package/useSnackBar/cjs/index.production.js +1 -1
- package/useSnackBar/cjs/index.production.v2.js +1 -1
- package/useSnackBar/index.d.ts +1 -1
- package/useSnackBar/package.json +1 -1
- package/base/colors-dark.css +0 -5
|
@@ -6,15 +6,32 @@ export type ScrollControlsProps = Omit<React.ComponentProps<'div'>, 'children'>
|
|
|
6
6
|
* Зазвичай це компонент `<Scroll>` або DOM-елемент (наприклад, `<div>`), що містить контент для прокрутки.
|
|
7
7
|
*/
|
|
8
8
|
children: React.ReactElement<any, any>;
|
|
9
|
-
/**
|
|
9
|
+
/** Показувати кнопки при наведенні */
|
|
10
10
|
showOnHover?: boolean;
|
|
11
|
-
/**
|
|
11
|
+
/** Приховати кнопку, якщо не активна */
|
|
12
12
|
hideOnDisabled?: ScrollControlsButtonProps['hideOnDisabled'];
|
|
13
|
-
/**
|
|
13
|
+
/** Якщо передати `false`, компонент перестане працювати */
|
|
14
14
|
isActive?: ScrollControlsButtonProps['isActive'];
|
|
15
|
+
/** Колбек кліку на кнопку «вперед» */
|
|
15
16
|
onClickNext?: ScrollControlsButtonProps['onClickNext'];
|
|
17
|
+
/** Колбек кліку на кнопку «назад» */
|
|
16
18
|
onClickPrev?: ScrollControlsButtonProps['onClickPrev'];
|
|
17
|
-
/**
|
|
19
|
+
/** Встановлює z-index кнопкам */
|
|
18
20
|
zIndex?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Кількість пікселів прокрутки за один клік кнопки.
|
|
23
|
+
* Якщо не передано — прокрутка на `clientWidth` (повну ширину видимої зони).
|
|
24
|
+
*/
|
|
25
|
+
step?: ScrollControlsButtonProps['step'];
|
|
19
26
|
};
|
|
27
|
+
/**
|
|
28
|
+
* Обгортає прокручуваний контент і додає кнопки «вперед» / «назад».
|
|
29
|
+
* Зазвичай використовується разом з компонентом `<Scroll>`.
|
|
30
|
+
* @example
|
|
31
|
+
* import { ScrollControls } from '@prom-ui/core/ScrollControls'
|
|
32
|
+
* import { Scroll } from '@prom-ui/core/Scroll'
|
|
33
|
+
* <ScrollControls>
|
|
34
|
+
* <Scroll>...</Scroll>
|
|
35
|
+
* </ScrollControls>
|
|
36
|
+
*/
|
|
20
37
|
export declare const ScrollControls: React.ForwardRefExoticComponent<Omit<ScrollControlsProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
@@ -103,6 +103,15 @@ var css = {"root":"SimpleSlider__root___WuTIM","track":"SimpleSlider__track___G8
|
|
|
103
103
|
|
|
104
104
|
var _templateObject, _templateObject2, _templateObject3;
|
|
105
105
|
var _excluded = ["showIndex", "autoPlay", "children", "className", "duration", "height", "infinite", "ratio", "style", "width", "onChangeIndex", "onClickDot", "onClickItem", "onClickButtonNext", "onClickButtonPrev", "onSwipeNext", "onSwipePrev", "showOnHoverButtons", "showOnHoverDots", "isDotsTransparent"];
|
|
106
|
+
/**
|
|
107
|
+
* Слайдер з підтримкою свайпу, автопрокрутки та нескінченного гортання.
|
|
108
|
+
* @example
|
|
109
|
+
* import { SimpleSlider } from '@prom-ui/core/SimpleSlider'
|
|
110
|
+
* <SimpleSlider ratio='16/9' width='100%' height={400}>
|
|
111
|
+
* <div>Слайд 1</div>
|
|
112
|
+
* <div>Слайд 2</div>
|
|
113
|
+
* </SimpleSlider>
|
|
114
|
+
*/
|
|
106
115
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
107
116
|
var SimpleSlider = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
108
117
|
var _ref$showIndex = _ref.showIndex,
|
|
@@ -103,6 +103,15 @@ var css = {"root":"SimpleSlider__root___bXdCd","track":"SimpleSlider__track___ig
|
|
|
103
103
|
|
|
104
104
|
var _templateObject, _templateObject2, _templateObject3;
|
|
105
105
|
var _excluded = ["showIndex", "autoPlay", "children", "className", "duration", "height", "infinite", "ratio", "style", "width", "onChangeIndex", "onClickDot", "onClickItem", "onClickButtonNext", "onClickButtonPrev", "onSwipeNext", "onSwipePrev", "showOnHoverButtons", "showOnHoverDots", "isDotsTransparent"];
|
|
106
|
+
/**
|
|
107
|
+
* Слайдер з підтримкою свайпу, автопрокрутки та нескінченного гортання.
|
|
108
|
+
* @example
|
|
109
|
+
* import { SimpleSlider } from '@prom-ui/core/SimpleSlider'
|
|
110
|
+
* <SimpleSlider ratio='16/9' width='100%' height={400}>
|
|
111
|
+
* <div>Слайд 1</div>
|
|
112
|
+
* <div>Слайд 2</div>
|
|
113
|
+
* </SimpleSlider>
|
|
114
|
+
*/
|
|
106
115
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
107
116
|
var SimpleSlider = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
108
117
|
var _ref$showIndex = _ref.showIndex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),a=require("react-easy-swipe"),u=require("clsx"),c=require("@prom-ui/core/Icon"),s=require("@prom-ui/core/BodyProvider"),l=require("@prom-ui/icons/Left"),d=require("@prom-ui/icons/Right");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),a=require("react-easy-swipe"),u=require("clsx"),c=require("@prom-ui/core/Icon"),s=require("@prom-ui/core/BodyProvider"),l=require("@prom-ui/icons/Left"),d=require("@prom-ui/icons/Right");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var v=f(e),m=f(t),b=f(n),h=f(r),y=f(i),x=p(o),g=f(a),w=f(u);function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}var E,j,N,S=function(e){return!!e&&/\d\/\d/.test(e)},P=function(e,t){return Math.abs((e%t+t)%t)},k=function(e){return{paddingTop:"calc(".concat(e.split("/").reverse().join("/")," * 100%)")}},q=function(e){var t=e.width,n=e.height,r=e.ratio,i=e.style,o=S(r);return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach(function(t){b.default(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({width:t,height:o?"auto":n,maxWidth:o?"100%":"none",aspectRatio:o?r:void 0},i)},C=function(e){var t=e.index,n=e.childrenCount,r=e.duration,i=e.offset,o="number"==typeof i,a=o?i:0;return{transform:"translateX(calc(".concat(t*(100/n)*-1,"% + ").concat(a,"px))"),transition:o?void 0:"transform ".concat(r,"ms ease"),width:"".concat(100*n,"%")}},I="WuTIM",D="G8BYu",L="_94Eq7",_="UqTOk I5yQD LXJjI",T="BbLNv I5yQD LXJjI",B="_89h6n",R="E7g4J",M="v-ZWk",W="cbWCu",H="_7N4yb LXJjI",J="yssoj",X="ig5DV",A=["showIndex","autoPlay","children","className","duration","height","infinite","ratio","style","width","onChangeIndex","onClickDot","onClickItem","onClickButtonNext","onClickButtonPrev","onSwipeNext","onSwipePrev","showOnHoverButtons","showOnHoverDots","isDotsTransparent"],Q=x.forwardRef(function(e,t){var n,r,i,a,u=e.showIndex,f=void 0===u?0:u,p=e.autoPlay,O=void 0===p?0:p,Q=e.children,z=e.className,F=e.duration,G=void 0===F?500:F,U=e.height,V=e.infinite,Y=void 0!==V&&V,Z=e.ratio,K=e.style,$=e.width,ee=e.onChangeIndex,te=e.onClickDot,ne=e.onClickItem,re=e.onClickButtonNext,ie=e.onClickButtonPrev,oe=e.onSwipeNext,ae=e.onSwipePrev,ue=e.showOnHoverButtons,ce=void 0!==ue&&ue,se=e.showOnHoverDots,le=void 0!==se&&se,de=e.isDotsTransparent,fe=void 0!==de&&de,pe=y.default(e,A),ve=s.useBodyStoreTTag().t,me=x.useRef(null),be=x.useRef(!1),he=x.useState(!1),ye=h.default(he,2),xe=ye[0],ge=ye[1],we=x.useState({index:f,offset:void 0}),Oe=h.default(we,2),Ee=Oe[0],je=Oe[1],Ne=x.Children.toArray(Q),Se=Ne.length,Pe=!Y&&0===Ee.index,ke=!Y&&Ee.index===Se-1,qe=Se>1,Ce=Se>1,Ie=!xe&&O>0,De=Ee.index-1,Le=Ee.index+1,_e=P(Ee.index,Se),Te=P(De,Se),Be=P(Le,Se),Re=(n=function(){be.current||ke||je({index:Le,offset:void 0})},r=O,i=o.useRef(null),[function(){a(),i.current=setTimeout(n,r)},a=function(){i.current&&clearTimeout(i.current)}]),Me=h.default(Re,2),We=Me[0],He=Me[1],Je=function(){be.current=!0,He()},Xe=function(){be.current=!1,Ie&&We(),Ee.index in Ne||je({index:_e,offset:0}),"function"==typeof ee&&ee(_e)};return x.useEffect(function(){var e,t,n=new IntersectionObserver(function(e){e[0].isIntersecting?We():He()});return null===(e=me.current)||void 0===e||e.addEventListener("transitionstart",Je),null===(t=me.current)||void 0===t||t.addEventListener("transitionend",Xe),Ie&&me.current&&n.observe(me.current),function(){var e,t;null===(e=me.current)||void 0===e||e.removeEventListener("transitionstart",Je),null===(t=me.current)||void 0===t||t.removeEventListener("transitionend",Xe),He(),n.disconnect()}},[Ee.index,Ie]),x.useEffect(function(){f!==Ee.index&&je({index:f,offset:void 0})},[f]),x.createElement(g.default,v.default({ref:t,onSwipeLeft:function(){be.current||ke||("function"==typeof oe&&oe(Be),je({index:Le,offset:void 0}))},onSwipeRight:function(){be.current||Pe||("function"==typeof ae&&ae(Te),je({index:De,offset:void 0}))},onSwipeMove:function(e,t){var n=e.x;if(!(be.current||t.touches&&t.touches.length>1)){var r=n;(Pe&&n>0||ke&&n<0)&&(r=0),je({index:Ee.index,offset:r})}},className:w.default(I,z,b.default(b.default({},J,ce),X,le)),style:q({width:$,height:U,ratio:Z,style:K}),onSwipeStart:function(){return ge(!0)},onSwipeEnd:function(){return ge(!1)},onMouseEnter:function(){return ge(!0)},onMouseLeave:function(){return ge(!1)}},pe),S(Z)&&x.createElement("div",{style:k(Z)}),x.createElement("ul",{ref:me,className:D,style:C({index:Y?Ee.index+1:Ee.index,childrenCount:Y?Se+2:Se,duration:G,offset:Ee.offset}),"data-testid":"simple_slider_track"},Y&&x.createElement("li",{className:L},Ne[Ne.length-1]),Ne.map(function(e,t){return x.createElement("li",{key:t,className:L,onClick:function(){"function"==typeof ne&&ne(t)},"data-qaid":"image_slider_".concat(t)},e)}),Y&&x.createElement("li",{className:L},Ne[0])),qe&&x.createElement(x.Fragment,null,x.createElement("button",{type:"button",className:_,onClick:function(){be.current||Pe||("function"==typeof ie&&ie(Te),je({index:De,offset:void 0}))},disabled:Pe,"aria-label":ve(E||(E=m.default(["Показать предыдущий баннер"]))),"data-qaid":"prev_image"},x.createElement(c.Icon,{className:B,"icon-as":l.SvgLeft})),x.createElement("button",{type:"button",className:T,onClick:function(){be.current||ke||("function"==typeof re&&re(Be),je({index:Le,offset:void 0}))},disabled:ke,"aria-label":ve(j||(j=m.default(["Показать следующий баннер"]))),"data-qaid":"next_image"},x.createElement(c.Icon,{className:B,"icon-as":d.SvgRight}))),Ce&&x.createElement("ul",{className:w.default(R,b.default({},M,fe))},Ne.map(function(e,t){var n=t+1;return x.createElement("li",{className:W,key:t},x.createElement("button",{type:"button",className:H,onClick:function(){return e=t,void(be.current||("function"==typeof te&&te(e),je({index:e,offset:void 0})));var e},disabled:t===_e,"aria-label":ve(N||(N=m.default(["Показать баннер номер ",""])),n),"data-qaid":"view_image_".concat(n)},n))})))});Q.displayName="SimpleSlider",exports.SimpleSlider=Q,require("./style.production.css");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),a=require("react-easy-swipe"),c=require("clsx"),u=require("@prom-ui/core/Icon"),s=require("@prom-ui/core/BodyProvider"),l=require("@prom-ui/icons/Left"),d=require("@prom-ui/icons/Right");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/slicedToArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),a=require("react-easy-swipe"),c=require("clsx"),u=require("@prom-ui/core/Icon"),s=require("@prom-ui/core/BodyProvider"),l=require("@prom-ui/icons/Left"),d=require("@prom-ui/icons/Right");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,Object.freeze(t)}var v=f(e),m=f(t),b=f(n),h=f(r),y=f(i),g=p(o),x=f(a),w=f(c);function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}var E,P,S,j=function(e){return!!e&&/\d\/\d/.test(e)},k=function(e,t){return Math.abs((e%t+t)%t)},q=function(e){return{paddingTop:"calc(".concat(e.split("/").reverse().join("/")," * 100%)")}},N=function(e){var t=e.width,n=e.height,r=e.ratio,i=e.style,o=j(r);return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach(function(t){b.default(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}({width:t,height:o?"auto":n,maxWidth:o?"100%":"none",aspectRatio:o?r:void 0},i)},C=function(e){var t=e.index,n=e.childrenCount,r=e.duration,i=e.offset,o="number"==typeof i,a=o?i:0;return{transform:"translateX(calc(".concat(t*(100/n)*-1,"% + ").concat(a,"px))"),transition:o?void 0:"transform ".concat(r,"ms ease"),width:"".concat(100*n,"%")}},_="bXdCd",D="igqgQ",I="_7TgGX",L="_543BF cQvz3 gHpEr",T="uU4Gw cQvz3 gHpEr",B="LD9ov",R="GA591",H="fybKk",M="d4JnV",Q="UPQSI gHpEr",z="_0cn-k",A="q4PLm",G=["showIndex","autoPlay","children","className","duration","height","infinite","ratio","style","width","onChangeIndex","onClickDot","onClickItem","onClickButtonNext","onClickButtonPrev","onSwipeNext","onSwipePrev","showOnHoverButtons","showOnHoverDots","isDotsTransparent"],X=g.forwardRef(function(e,t){var n,r,i,a,c=e.showIndex,f=void 0===c?0:c,p=e.autoPlay,O=void 0===p?0:p,X=e.children,F=e.className,U=e.duration,W=void 0===U?500:U,J=e.height,K=e.infinite,V=void 0!==K&&K,Y=e.ratio,Z=e.style,$=e.width,ee=e.onChangeIndex,te=e.onClickDot,ne=e.onClickItem,re=e.onClickButtonNext,ie=e.onClickButtonPrev,oe=e.onSwipeNext,ae=e.onSwipePrev,ce=e.showOnHoverButtons,ue=void 0!==ce&&ce,se=e.showOnHoverDots,le=void 0!==se&&se,de=e.isDotsTransparent,fe=void 0!==de&&de,pe=y.default(e,G),ve=s.useBodyStoreTTag().t,me=g.useRef(null),be=g.useRef(!1),he=g.useState(!1),ye=h.default(he,2),ge=ye[0],xe=ye[1],we=g.useState({index:f,offset:void 0}),Oe=h.default(we,2),Ee=Oe[0],Pe=Oe[1],Se=g.Children.toArray(X),je=Se.length,ke=!V&&0===Ee.index,qe=!V&&Ee.index===je-1,Ne=je>1,Ce=je>1,_e=!ge&&O>0,De=Ee.index-1,Ie=Ee.index+1,Le=k(Ee.index,je),Te=k(De,je),Be=k(Ie,je),Re=(n=function(){be.current||qe||Pe({index:Ie,offset:void 0})},r=O,i=o.useRef(null),[function(){a(),i.current=setTimeout(n,r)},a=function(){i.current&&clearTimeout(i.current)}]),He=h.default(Re,2),Me=He[0],Qe=He[1],ze=function(){be.current=!0,Qe()},Ae=function(){be.current=!1,_e&&Me(),Ee.index in Se||Pe({index:Le,offset:0}),"function"==typeof ee&&ee(Le)};return g.useEffect(function(){var e,t,n=new IntersectionObserver(function(e){e[0].isIntersecting?Me():Qe()});return null===(e=me.current)||void 0===e||e.addEventListener("transitionstart",ze),null===(t=me.current)||void 0===t||t.addEventListener("transitionend",Ae),_e&&me.current&&n.observe(me.current),function(){var e,t;null===(e=me.current)||void 0===e||e.removeEventListener("transitionstart",ze),null===(t=me.current)||void 0===t||t.removeEventListener("transitionend",Ae),Qe(),n.disconnect()}},[Ee.index,_e]),g.useEffect(function(){f!==Ee.index&&Pe({index:f,offset:void 0})},[f]),g.createElement(x.default,v.default({ref:t,onSwipeLeft:function(){be.current||qe||("function"==typeof oe&&oe(Be),Pe({index:Ie,offset:void 0}))},onSwipeRight:function(){be.current||ke||("function"==typeof ae&&ae(Te),Pe({index:De,offset:void 0}))},onSwipeMove:function(e,t){var n=e.x;if(!(be.current||t.touches&&t.touches.length>1)){var r=n;(ke&&n>0||qe&&n<0)&&(r=0),Pe({index:Ee.index,offset:r})}},className:w.default(_,F,b.default(b.default({},z,ue),A,le)),style:N({width:$,height:J,ratio:Y,style:Z}),onSwipeStart:function(){return xe(!0)},onSwipeEnd:function(){return xe(!1)},onMouseEnter:function(){return xe(!0)},onMouseLeave:function(){return xe(!1)}},pe),j(Y)&&g.createElement("div",{style:q(Y)}),g.createElement("ul",{ref:me,className:D,style:C({index:V?Ee.index+1:Ee.index,childrenCount:V?je+2:je,duration:W,offset:Ee.offset}),"data-testid":"simple_slider_track"},V&&g.createElement("li",{className:I},Se[Se.length-1]),Se.map(function(e,t){return g.createElement("li",{key:t,className:I,onClick:function(){"function"==typeof ne&&ne(t)},"data-qaid":"image_slider_".concat(t)},e)}),V&&g.createElement("li",{className:I},Se[0])),Ne&&g.createElement(g.Fragment,null,g.createElement("button",{type:"button",className:L,onClick:function(){be.current||ke||("function"==typeof ie&&ie(Te),Pe({index:De,offset:void 0}))},disabled:ke,"aria-label":ve(E||(E=m.default(["Показать предыдущий баннер"]))),"data-qaid":"prev_image"},g.createElement(u.Icon,{className:B,"icon-as":l.SvgLeft})),g.createElement("button",{type:"button",className:T,onClick:function(){be.current||qe||("function"==typeof re&&re(Be),Pe({index:Ie,offset:void 0}))},disabled:qe,"aria-label":ve(P||(P=m.default(["Показать следующий баннер"]))),"data-qaid":"next_image"},g.createElement(u.Icon,{className:B,"icon-as":d.SvgRight}))),Ce&&g.createElement("ul",{className:w.default(R,b.default({},H,fe))},Se.map(function(e,t){var n=t+1;return g.createElement("li",{className:M,key:t},g.createElement("button",{type:"button",className:Q,onClick:function(){return e=t,void(be.current||("function"==typeof te&&te(e),Pe({index:e,offset:void 0})));var e},disabled:t===Le,"aria-label":ve(S||(S=m.default(["Показать баннер номер ",""])),n),"data-qaid":"view_image_".concat(n)},n))})))});X.displayName="SimpleSlider",exports.SimpleSlider=X,require("./style.production.v2.css");
|
package/SimpleSlider/index.d.ts
CHANGED
|
@@ -1,40 +1,51 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export type SimpleSliderProps = {
|
|
3
|
-
/** React
|
|
3
|
+
/** Дочірні React-елементи */
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
+
/** Висота слайдера у px або CSS-рядком */
|
|
5
6
|
height: number | string;
|
|
7
|
+
/** Ширина слайдера у px або CSS-рядком */
|
|
6
8
|
width: number | string;
|
|
7
|
-
/**
|
|
9
|
+
/** Автоматичне гортання у `ms`, за замовчуванням `0` — вимкнено */
|
|
8
10
|
autoPlay?: number;
|
|
9
11
|
className?: string;
|
|
10
|
-
/**
|
|
12
|
+
/** Швидкість анімації гортання у `ms` */
|
|
11
13
|
duration?: number;
|
|
12
|
-
/**
|
|
14
|
+
/** Нескінченне гортання */
|
|
13
15
|
infinite?: boolean;
|
|
14
|
-
/**
|
|
16
|
+
/** Співвідношення сторін `16/9`, `4/3`, `1/1` або нестандартне `900/400` */
|
|
15
17
|
ratio: string;
|
|
16
18
|
style?: React.CSSProperties;
|
|
17
|
-
/**
|
|
19
|
+
/** Додає прозорий фон допоміжної навігації */
|
|
18
20
|
isDotsTransparent?: boolean;
|
|
19
|
-
/**
|
|
21
|
+
/** Показати вибраний слайд за індексом, нумерація починається з `0` */
|
|
20
22
|
showIndex?: number;
|
|
21
|
-
/**
|
|
23
|
+
/** Показувати при наведенні кнопки по боках Вперед і Назад */
|
|
22
24
|
showOnHoverButtons?: boolean;
|
|
23
|
-
/**
|
|
25
|
+
/** Показувати при наведенні точки знизу */
|
|
24
26
|
showOnHoverDots?: boolean;
|
|
25
|
-
/**
|
|
27
|
+
/** Зворотний виклик зміни `index` в кінці анімації `(index) =>` */
|
|
26
28
|
onChangeIndex?: (index: number) => void;
|
|
27
|
-
/**
|
|
29
|
+
/** Зворотний виклик кліку на точку `(index) =>` */
|
|
28
30
|
onClickDot?: (index: number) => void;
|
|
29
|
-
/**
|
|
31
|
+
/** Зворотний виклик кліку на елемент `(index) =>` */
|
|
30
32
|
onClickItem?: (index: number) => void;
|
|
31
|
-
/**
|
|
33
|
+
/** Зворотний виклик кліку на кнопку "Вперед" `(index) =>` */
|
|
32
34
|
onClickButtonNext?: (index: number) => void;
|
|
33
|
-
/**
|
|
35
|
+
/** Зворотний виклик кліку на кнопку "Назад" `(index) =>` */
|
|
34
36
|
onClickButtonPrev?: (index: number) => void;
|
|
35
|
-
/**
|
|
37
|
+
/** Зворотний виклик свайпу вперед `(index) =>` */
|
|
36
38
|
onSwipeNext?: (index: number) => void;
|
|
37
|
-
/**
|
|
39
|
+
/** Зворотний виклик свайпу назад `(index) =>` */
|
|
38
40
|
onSwipePrev?: (index: number) => void;
|
|
39
41
|
};
|
|
42
|
+
/**
|
|
43
|
+
* Слайдер з підтримкою свайпу, автопрокрутки та нескінченного гортання.
|
|
44
|
+
* @example
|
|
45
|
+
* import { SimpleSlider } from '@prom-ui/core/SimpleSlider'
|
|
46
|
+
* <SimpleSlider ratio='16/9' width='100%' height={400}>
|
|
47
|
+
* <div>Слайд 1</div>
|
|
48
|
+
* <div>Слайд 2</div>
|
|
49
|
+
* </SimpleSlider>
|
|
50
|
+
*/
|
|
40
51
|
export declare const SimpleSlider: React.ForwardRefExoticComponent<SimpleSliderProps & React.RefAttributes<any>>;
|
|
@@ -42,6 +42,17 @@ var SkeletonBlock = evokit.createBlock('div', 'skeleton', ['align', 'theme', 'va
|
|
|
42
42
|
css: css
|
|
43
43
|
});
|
|
44
44
|
SkeletonBlock.displayName = 'SkeletonBlock';
|
|
45
|
+
/**
|
|
46
|
+
* Skeleton-заглушка для відображення під час завантаження контенту.
|
|
47
|
+
*
|
|
48
|
+
* Не підтримує медіа-суфікси.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* import { Skeleton } from '@prom-ui/core/Skeleton';
|
|
52
|
+
*
|
|
53
|
+
* <Skeleton width='100%' height={48} />
|
|
54
|
+
* <Skeleton variant='circle' width={40} height={40} />
|
|
55
|
+
*/
|
|
45
56
|
var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
46
57
|
var _ref$align = _ref.align,
|
|
47
58
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
@@ -42,6 +42,17 @@ var SkeletonBlock = evokit.createBlock('div', 'skeleton', ['align', 'theme', 'va
|
|
|
42
42
|
css: css
|
|
43
43
|
});
|
|
44
44
|
SkeletonBlock.displayName = 'SkeletonBlock';
|
|
45
|
+
/**
|
|
46
|
+
* Skeleton-заглушка для відображення під час завантаження контенту.
|
|
47
|
+
*
|
|
48
|
+
* Не підтримує медіа-суфікси.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* import { Skeleton } from '@prom-ui/core/Skeleton';
|
|
52
|
+
*
|
|
53
|
+
* <Skeleton width='100%' height={48} />
|
|
54
|
+
* <Skeleton variant='circle' width={40} height={40} />
|
|
55
|
+
*/
|
|
45
56
|
var Skeleton = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
46
57
|
var _ref$align = _ref.align,
|
|
47
58
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("@prom-ui/core/evokit");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("@prom-ui/core/evokit");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var l=i(e),c=i(t),s=i(r),k=a(o),u=["align","height","opacity","style","theme","variant","width"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach(function(t){c.default(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var y=n.createBlock("div","skeleton",["align","theme","variant","opacity"],{css:{"ek-skeleton":"YQ77B","ek-skeleton_theme_black-100":"_7Lfmq","ek-skeleton_theme_white":"HJ4sO","ek-skeleton_variant_text":"_8cqBE","ek-skeleton_variant_circle":"-y8Ac","ek-skeleton_variant_square":"ER7Aa","ek-skeleton_align_left":"vFpty","ek-skeleton_align_center":"xLcUn","ek-skeleton_align_right":"YXQvi","ek-skeleton_opacity_0":"hV3fo","ek-skeleton_opacity_10":"SWeYg","ek-skeleton_opacity_20":"uh-KW","ek-skeleton_opacity_30":"o-fsf","ek-skeleton_opacity_40":"yQNnj","ek-skeleton_opacity_50":"_8ChyF","ek-skeleton_opacity_60":"jPfCj","ek-skeleton_opacity_70":"yi2qY","ek-skeleton_opacity_80":"kUBbU","ek-skeleton_opacity_90":"C0qIh","ek-skeleton_opacity_100":"PYOu-"}});y.displayName="SkeletonBlock";var _=k.forwardRef(function(e,t){var r=e.align,o=void 0===r?"left":r,n=e.height,i=e.opacity,a=e.style,c=e.theme,p=void 0===c?"black-100":c,_=e.variant,b=void 0===_?"text":_,d=e.width,h=s.default(e,u);return k.createElement(y,l.default({"skeleton-align":o,"skeleton-theme":p,"skeleton-variant":b,"skeleton-opacity":i,style:f({height:n,width:d},a),"data-qaid":"skeleton","data-testid":"skeleton"},h,{ref:t}))});_.displayName="Skeleton",exports.Skeleton=_,require("./style.production.css");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("@prom-ui/core/evokit");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("@prom-ui/core/evokit");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var l=i(e),c=i(t),s=i(r),k=a(o),p=["align","height","opacity","style","theme","variant","width"];function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function _(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach(function(t){c.default(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var y=n.createBlock("div","skeleton",["align","theme","variant","opacity"],{css:{"ek-skeleton":"k6rop","ek-skeleton_theme_black-100":"eJWcz","ek-skeleton_theme_white":"PCwFG","ek-skeleton_variant_text":"NbT89","ek-skeleton_variant_circle":"SlAh0","ek-skeleton_variant_square":"_7p339","ek-skeleton_align_left":"TbAuG","ek-skeleton_align_center":"De09W","ek-skeleton_align_right":"C-QUn","ek-skeleton_opacity_0":"BV48x","ek-skeleton_opacity_10":"oVBvx","ek-skeleton_opacity_20":"F--5F","ek-skeleton_opacity_30":"rwtgY","ek-skeleton_opacity_40":"iR-d8","ek-skeleton_opacity_50":"r6goB","ek-skeleton_opacity_60":"-DW2y","ek-skeleton_opacity_70":"zqdBc","ek-skeleton_opacity_80":"Vc9gU","ek-skeleton_opacity_90":"t9rT-","ek-skeleton_opacity_100":"lw65w"}});y.displayName="SkeletonBlock";var f=k.forwardRef(function(e,t){var r=e.align,o=void 0===r?"left":r,n=e.height,i=e.opacity,a=e.style,c=e.theme,u=void 0===c?"black-100":c,f=e.variant,b=void 0===f?"text":f,d=e.width,h=s.default(e,p);return k.createElement(y,l.default({"skeleton-align":o,"skeleton-theme":u,"skeleton-variant":b,"skeleton-opacity":i,style:_({height:n,width:d},a),"data-qaid":"skeleton","data-testid":"skeleton"},h,{ref:t}))});f.displayName="Skeleton",exports.Skeleton=f,require("./style.production.v2.css");
|
package/Skeleton/index.d.ts
CHANGED
|
@@ -7,31 +7,92 @@ type SkeletonBlockProps = {
|
|
|
7
7
|
'skeleton-opacity'?: EvokitProp<0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100>;
|
|
8
8
|
};
|
|
9
9
|
export type SkeletonProps = React.ComponentPropsWithoutRef<'div'> & {
|
|
10
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Горизонтальне вирівнювання скелетону. Дефолт: `'left'`.
|
|
12
|
+
* @example 'center'
|
|
13
|
+
* @example 'left'
|
|
14
|
+
*/
|
|
11
15
|
align?: SkeletonBlockProps['skeleton-align'];
|
|
12
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Прозорість скелетону в % (0–100).
|
|
18
|
+
* @example 50
|
|
19
|
+
* @example 0
|
|
20
|
+
*/
|
|
13
21
|
opacity?: SkeletonBlockProps['skeleton-opacity'];
|
|
14
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* Тема кольору скелетону. Дефолт: `'black-100'`.
|
|
24
|
+
* @example 'black-100'
|
|
25
|
+
* @example 'white'
|
|
26
|
+
*/
|
|
15
27
|
theme?: SkeletonBlockProps['skeleton-theme'];
|
|
16
|
-
/**
|
|
28
|
+
/**
|
|
29
|
+
* Форма скелетону. Дефолт: `'text'`.
|
|
30
|
+
* @example 'text'
|
|
31
|
+
* @example 'circle'
|
|
32
|
+
* @example 'square'
|
|
33
|
+
*/
|
|
17
34
|
variant?: SkeletonBlockProps['skeleton-variant'];
|
|
18
|
-
/**
|
|
35
|
+
/**
|
|
36
|
+
* Висота скелетону (CSS-значення або число в пікселях).
|
|
37
|
+
* @example '48px'
|
|
38
|
+
* @example 100
|
|
39
|
+
*/
|
|
19
40
|
height?: string | number;
|
|
20
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* Ширина скелетону (CSS-значення або число в пікселях).
|
|
43
|
+
* @example '100%'
|
|
44
|
+
* @example 200
|
|
45
|
+
*/
|
|
21
46
|
width?: string | number;
|
|
22
47
|
};
|
|
48
|
+
/**
|
|
49
|
+
* Skeleton-заглушка для відображення під час завантаження контенту.
|
|
50
|
+
*
|
|
51
|
+
* Не підтримує медіа-суфікси.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* import { Skeleton } from '@prom-ui/core/Skeleton';
|
|
55
|
+
*
|
|
56
|
+
* <Skeleton width='100%' height={48} />
|
|
57
|
+
* <Skeleton variant='circle' width={40} height={40} />
|
|
58
|
+
*/
|
|
23
59
|
export declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
24
|
-
/**
|
|
60
|
+
/**
|
|
61
|
+
* Горизонтальне вирівнювання скелетону. Дефолт: `'left'`.
|
|
62
|
+
* @example 'center'
|
|
63
|
+
* @example 'left'
|
|
64
|
+
*/
|
|
25
65
|
align?: SkeletonBlockProps["skeleton-align"];
|
|
26
|
-
/**
|
|
66
|
+
/**
|
|
67
|
+
* Прозорість скелетону в % (0–100).
|
|
68
|
+
* @example 50
|
|
69
|
+
* @example 0
|
|
70
|
+
*/
|
|
27
71
|
opacity?: SkeletonBlockProps["skeleton-opacity"];
|
|
28
|
-
/**
|
|
72
|
+
/**
|
|
73
|
+
* Тема кольору скелетону. Дефолт: `'black-100'`.
|
|
74
|
+
* @example 'black-100'
|
|
75
|
+
* @example 'white'
|
|
76
|
+
*/
|
|
29
77
|
theme?: SkeletonBlockProps["skeleton-theme"];
|
|
30
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* Форма скелетону. Дефолт: `'text'`.
|
|
80
|
+
* @example 'text'
|
|
81
|
+
* @example 'circle'
|
|
82
|
+
* @example 'square'
|
|
83
|
+
*/
|
|
31
84
|
variant?: SkeletonBlockProps["skeleton-variant"];
|
|
32
|
-
/**
|
|
85
|
+
/**
|
|
86
|
+
* Висота скелетону (CSS-значення або число в пікселях).
|
|
87
|
+
* @example '48px'
|
|
88
|
+
* @example 100
|
|
89
|
+
*/
|
|
33
90
|
height?: string | number;
|
|
34
|
-
/**
|
|
91
|
+
/**
|
|
92
|
+
* Ширина скелетону (CSS-значення або число в пікселях).
|
|
93
|
+
* @example '100%'
|
|
94
|
+
* @example 200
|
|
95
|
+
*/
|
|
35
96
|
width?: string | number;
|
|
36
97
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
37
98
|
export {};
|
package/Skeleton/package.json
CHANGED
|
@@ -43,7 +43,12 @@ var _excluded = ["isOpen", "onClose", "onOpened", "onClosed", "children", "class
|
|
|
43
43
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
44
44
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
46
|
+
* Тост-повідомлення з автоматичним закриттям та підтримкою позиціонування.
|
|
47
|
+
* @example
|
|
48
|
+
* import { SnackBar } from '@prom-ui/core/SnackBar'
|
|
49
|
+
* <SnackBar isOpen={isOpen} onClose={() => setOpen(false)}>
|
|
50
|
+
* Збережено успішно
|
|
51
|
+
* </SnackBar>
|
|
47
52
|
*/
|
|
48
53
|
var SnackBar = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
49
54
|
var isOpen = _ref.isOpen,
|
|
@@ -43,7 +43,12 @@ var _excluded = ["isOpen", "onClose", "onOpened", "onClosed", "children", "class
|
|
|
43
43
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
44
44
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
46
|
+
* Тост-повідомлення з автоматичним закриттям та підтримкою позиціонування.
|
|
47
|
+
* @example
|
|
48
|
+
* import { SnackBar } from '@prom-ui/core/SnackBar'
|
|
49
|
+
* <SnackBar isOpen={isOpen} onClose={() => setOpen(false)}>
|
|
50
|
+
* Збережено успішно
|
|
51
|
+
* </SnackBar>
|
|
47
52
|
*/
|
|
48
53
|
var SnackBar = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
49
54
|
var isOpen = _ref.isOpen,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("clsx"),i=require("react-transition-group"),c=require("@prom-ui/core/Portal"),u=require("@prom-ui/core/useForwardRef");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("clsx"),i=require("react-transition-group"),c=require("@prom-ui/core/Portal"),u=require("@prom-ui/core/useForwardRef");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var l=a(e),f=a(t),p=a(r),d=s(o),b=a(n),y={root:"zviPe",content:"v4tgu","root_position_top-center":"TR90b","root_position_bottom-center":"YlR9W","root_position_top-left":"QBAq1","root_position_top-right":"DzSIt","root_position_bottom-left":"ZNKwU","root_position_bottom-right":"DvkY7",enterActive:"b-sYk",exitActive:"CXTc9",enter:"V8HbR",exit:"FAqxX"},O=["isOpen","onClose","onOpened","onClosed","children","className","style","position","zIndex","padding","autoCloseDelay","isRenderPortal"];function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach(function(t){f.default(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var j=d.forwardRef(function(e,t){var r=e.isOpen,o=e.onClose,n=e.onOpened,a=e.onClosed,s=e.children,f=e.className,m=e.style,j=e.position,g=void 0===j?"bottom-center":j,P=e.zIndex,_=void 0===P?5e3:P,h=e.padding,x=void 0===h?"12px 16px":h,E=e.autoCloseDelay,q=void 0===E?2e3:E,w=e.isRenderPortal,R=void 0===w||w,C=p.default(e,O),D=u.useForwardRef(t,null),k=d.useRef(!1),N=d.useRef(void 0),S=g?y["root_position_".concat(g)]:void 0,z=function(){clearTimeout(N.current)},A=function(){k.current=!1,z(),q>0&&(N.current=setTimeout(function(){k.current=!0,"function"==typeof o&&o()},q))},T=function(){z()},I=function(){"function"==typeof n&&n(),A()};return d.useEffect(function(){return r&&I(),function(){T()}},[]),d.createElement(i.CSSTransition,{nodeRef:D,in:r,timeout:125,classNames:y,unmountOnExit:!0,onEntered:I,onExit:T,onExited:function(){"function"==typeof a&&a({isAutoClose:k.current})}},d.createElement(c.Portal,{isActive:R},d.createElement("div",l.default({className:b.default(y.root,S),ref:D,style:{zIndex:_},role:"presentation","data-testid":"snackbar","data-qaid":"snackbar","data-pds-color-scheme":"light"},C),d.createElement("div",{className:b.default(y.content,f),style:v({padding:x},m),role:"alert",onMouseEnter:z,onMouseLeave:A},s))))});j.displayName="SnackBar",exports.SnackBar=j,require("./style.production.css");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("clsx"),i=require("react-transition-group"),c=require("@prom-ui/core/Portal"),u=require("@prom-ui/core/useForwardRef");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),n=require("clsx"),i=require("react-transition-group"),c=require("@prom-ui/core/Portal"),u=require("@prom-ui/core/useForwardRef");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var l=a(e),f=a(t),p=a(r),d=s(o),b=a(n),m={root:"KYIW0",content:"F8zNR","root_position_top-center":"I5Lmf","root_position_bottom-center":"QB4Ps","root_position_top-left":"QJETh","root_position_top-right":"vHlAp","root_position_bottom-left":"cU3cS","root_position_bottom-right":"dlDmS",enterActive:"mLVVo",exitActive:"_5JFKS",enter:"Rlx0S",exit:"B32cZ"},y=["isOpen","onClose","onOpened","onClosed","children","className","style","position","zIndex","padding","autoCloseDelay","isRenderPortal"];function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,o)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?O(Object(r),!0).forEach(function(t){f.default(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}var j=d.forwardRef(function(e,t){var r=e.isOpen,o=e.onClose,n=e.onOpened,a=e.onClosed,s=e.children,f=e.className,O=e.style,j=e.position,P=void 0===j?"bottom-center":j,g=e.zIndex,_=void 0===g?5e3:g,h=e.padding,x=void 0===h?"12px 16px":h,E=e.autoCloseDelay,q=void 0===E?2e3:E,w=e.isRenderPortal,R=void 0===w||w,S=p.default(e,y),C=u.useForwardRef(t,null),D=d.useRef(!1),N=d.useRef(void 0),k=P?m["root_position_".concat(P)]:void 0,z=function(){clearTimeout(N.current)},A=function(){D.current=!1,z(),q>0&&(N.current=setTimeout(function(){D.current=!0,"function"==typeof o&&o()},q))},I=function(){z()},B=function(){"function"==typeof n&&n(),A()};return d.useEffect(function(){return r&&B(),function(){I()}},[]),d.createElement(i.CSSTransition,{nodeRef:C,in:r,timeout:125,classNames:m,unmountOnExit:!0,onEntered:B,onExit:I,onExited:function(){"function"==typeof a&&a({isAutoClose:D.current})}},d.createElement(c.Portal,{isActive:R},d.createElement("div",l.default({className:b.default(m.root,k),ref:C,style:{zIndex:_},role:"presentation","data-testid":"snackbar","data-qaid":"snackbar","data-pds-color-scheme":"light"},S),d.createElement("div",{className:b.default(m.content,f),style:v({padding:x},O),role:"alert",onMouseEnter:z,onMouseLeave:A},s))))});j.displayName="SnackBar",exports.SnackBar=j,require("./style.production.v2.css");
|
package/SnackBar/index.d.ts
CHANGED
|
@@ -1,47 +1,54 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export type SnackBarProps = React.ComponentPropsWithoutRef<'div'> & React.PropsWithChildren<{
|
|
3
|
+
/** Стан — відкрито чи ні */
|
|
3
4
|
isOpen: boolean;
|
|
4
|
-
/**
|
|
5
|
+
/** Обробник закриття */
|
|
5
6
|
onClose: () => void;
|
|
6
|
-
/**
|
|
7
|
+
/** Спрацьовує, коли SnackBar відкрито і анімацію завершено */
|
|
7
8
|
onOpened?: () => void;
|
|
8
9
|
/** Викликається після закриття SnackBar (`isAutoClose`: автоматично чи вручну) */
|
|
9
10
|
onClosed?: (args: {
|
|
10
11
|
isAutoClose: boolean;
|
|
11
12
|
}) => void;
|
|
12
|
-
/**
|
|
13
|
+
/** Розташування */
|
|
13
14
|
position?: 'top-center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center';
|
|
14
|
-
/**
|
|
15
|
+
/** Розміщення по z-осі */
|
|
15
16
|
zIndex?: number;
|
|
16
|
-
/**
|
|
17
|
+
/** Кількість мілісекунд очікування перед автоматичним викликом функції `onClose` */
|
|
17
18
|
autoCloseDelay?: number;
|
|
18
|
-
/**
|
|
19
|
+
/** Внутрішні відступи */
|
|
19
20
|
padding?: string | number;
|
|
20
|
-
/** Рендер
|
|
21
|
+
/** Рендер у кінець `<body>` */
|
|
21
22
|
isRenderPortal?: boolean;
|
|
22
23
|
}>;
|
|
23
24
|
/**
|
|
24
|
-
*
|
|
25
|
+
* Тост-повідомлення з автоматичним закриттям та підтримкою позиціонування.
|
|
26
|
+
* @example
|
|
27
|
+
* import { SnackBar } from '@prom-ui/core/SnackBar'
|
|
28
|
+
* <SnackBar isOpen={isOpen} onClose={() => setOpen(false)}>
|
|
29
|
+
* Збережено успішно
|
|
30
|
+
* </SnackBar>
|
|
25
31
|
*/
|
|
26
32
|
export declare const SnackBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
33
|
+
/** Стан — відкрито чи ні */
|
|
27
34
|
isOpen: boolean;
|
|
28
|
-
/**
|
|
35
|
+
/** Обробник закриття */
|
|
29
36
|
onClose: () => void;
|
|
30
|
-
/**
|
|
37
|
+
/** Спрацьовує, коли SnackBar відкрито і анімацію завершено */
|
|
31
38
|
onOpened?: () => void;
|
|
32
39
|
/** Викликається після закриття SnackBar (`isAutoClose`: автоматично чи вручну) */
|
|
33
40
|
onClosed?: (args: {
|
|
34
41
|
isAutoClose: boolean;
|
|
35
42
|
}) => void;
|
|
36
|
-
/**
|
|
43
|
+
/** Розташування */
|
|
37
44
|
position?: "top-center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center";
|
|
38
|
-
/**
|
|
45
|
+
/** Розміщення по z-осі */
|
|
39
46
|
zIndex?: number;
|
|
40
|
-
/**
|
|
47
|
+
/** Кількість мілісекунд очікування перед автоматичним викликом функції `onClose` */
|
|
41
48
|
autoCloseDelay?: number;
|
|
42
|
-
/**
|
|
49
|
+
/** Внутрішні відступи */
|
|
43
50
|
padding?: string | number;
|
|
44
|
-
/** Рендер
|
|
51
|
+
/** Рендер у кінець `<body>` */
|
|
45
52
|
isRenderPortal?: boolean;
|
|
46
53
|
} & {
|
|
47
54
|
children?: React.ReactNode | undefined;
|
package/SnackBar/package.json
CHANGED
|
@@ -42,6 +42,17 @@ var SpinnerCircleBlock = evokit.createBlock('circle', 'spinner__circle', [], {
|
|
|
42
42
|
css: css
|
|
43
43
|
});
|
|
44
44
|
SpinnerCircleBlock.displayName = 'SpinnerCircleBlock';
|
|
45
|
+
/**
|
|
46
|
+
* Анімований індикатор завантаження (SVG-спіннер).
|
|
47
|
+
*
|
|
48
|
+
* Не підтримує медіа-суфікси.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* import { Spinner } from '@prom-ui/core/Spinner';
|
|
52
|
+
*
|
|
53
|
+
* <Spinner spinner-color='violet-500' width='24px' height='24px' />
|
|
54
|
+
* <Spinner spinner-color='white' />
|
|
55
|
+
*/
|
|
45
56
|
var Spinner = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
46
57
|
var _ref$width = _ref.width,
|
|
47
58
|
width = _ref$width === void 0 ? '1em' : _ref$width,
|