@solostylist/ui-kit-native 1.0.0 → 1.0.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/hooks/index.d.ts +6 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +5 -0
- package/dist/hooks/use-count-down.d.ts +72 -0
- package/dist/hooks/use-count-down.d.ts.map +1 -0
- package/dist/hooks/use-count-down.js +203 -0
- package/dist/hooks/use-is-passed-position.d.ts +20 -0
- package/dist/hooks/use-is-passed-position.d.ts.map +1 -0
- package/dist/hooks/use-is-passed-position.js +31 -0
- package/dist/index.d.ts +36 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +37 -0
- package/dist/s-avatar/index.d.ts +3 -0
- package/dist/s-avatar/index.d.ts.map +1 -0
- package/dist/s-avatar/index.js +1 -0
- package/dist/s-avatar/s-avatar.d.ts +43 -0
- package/dist/s-avatar/s-avatar.d.ts.map +1 -0
- package/dist/s-avatar/s-avatar.js +119 -0
- package/dist/s-button/index.d.ts +3 -0
- package/dist/s-button/index.d.ts.map +1 -0
- package/dist/s-button/index.js +1 -0
- package/dist/s-button/s-button.d.ts +55 -0
- package/dist/s-button/s-button.d.ts.map +1 -0
- package/dist/s-button/s-button.js +161 -0
- package/dist/s-button-link/index.d.ts +2 -0
- package/dist/s-button-link/index.d.ts.map +1 -0
- package/dist/s-button-link/index.js +1 -0
- package/dist/s-button-link/s-button-link.d.ts +43 -0
- package/dist/s-button-link/s-button-link.d.ts.map +1 -0
- package/dist/s-button-link/s-button-link.js +59 -0
- package/dist/s-chat-input/index.d.ts +2 -0
- package/dist/s-chat-input/index.d.ts.map +1 -0
- package/dist/s-chat-input/index.js +1 -0
- package/dist/s-chat-input/s-chat-input.d.ts +52 -0
- package/dist/s-chat-input/s-chat-input.d.ts.map +1 -0
- package/dist/s-chat-input/s-chat-input.js +135 -0
- package/dist/s-chat-message/index.d.ts +3 -0
- package/dist/s-chat-message/index.d.ts.map +1 -0
- package/dist/s-chat-message/index.js +2 -0
- package/dist/s-chat-message/s-chat-message.d.ts +61 -0
- package/dist/s-chat-message/s-chat-message.d.ts.map +1 -0
- package/dist/s-chat-message/s-chat-message.js +132 -0
- package/dist/s-checkbox/index.d.ts +3 -0
- package/dist/s-checkbox/index.d.ts.map +1 -0
- package/dist/s-checkbox/index.js +1 -0
- package/dist/s-checkbox/s-checkbox.d.ts +32 -0
- package/dist/s-checkbox/s-checkbox.d.ts.map +1 -0
- package/dist/s-checkbox/s-checkbox.js +52 -0
- package/dist/s-chip/index.d.ts +3 -0
- package/dist/s-chip/index.d.ts.map +1 -0
- package/dist/s-chip/index.js +1 -0
- package/dist/s-chip/s-chip.d.ts +52 -0
- package/dist/s-chip/s-chip.d.ts.map +1 -0
- package/dist/s-chip/s-chip.js +151 -0
- package/dist/s-code-block/index.d.ts +3 -0
- package/dist/s-code-block/index.d.ts.map +1 -0
- package/dist/s-code-block/index.js +2 -0
- package/dist/s-code-block/s-code-block.d.ts +40 -0
- package/dist/s-code-block/s-code-block.d.ts.map +1 -0
- package/dist/s-code-block/s-code-block.js +69 -0
- package/dist/s-comment-message/index.d.ts +3 -0
- package/dist/s-comment-message/index.d.ts.map +1 -0
- package/dist/s-comment-message/index.js +2 -0
- package/dist/s-comment-message/s-comment-message.d.ts +54 -0
- package/dist/s-comment-message/s-comment-message.d.ts.map +1 -0
- package/dist/s-comment-message/s-comment-message.js +109 -0
- package/dist/s-copyable-text/index.d.ts +3 -0
- package/dist/s-copyable-text/index.d.ts.map +1 -0
- package/dist/s-copyable-text/index.js +1 -0
- package/dist/s-copyable-text/s-copyable-text.d.ts +24 -0
- package/dist/s-copyable-text/s-copyable-text.d.ts.map +1 -0
- package/dist/s-copyable-text/s-copyable-text.js +52 -0
- package/dist/s-countdown/index.d.ts +7 -0
- package/dist/s-countdown/index.d.ts.map +1 -0
- package/dist/s-countdown/index.js +6 -0
- package/dist/s-countdown/s-count-box.d.ts +44 -0
- package/dist/s-countdown/s-count-box.d.ts.map +1 -0
- package/dist/s-countdown/s-count-box.js +135 -0
- package/dist/s-countdown/s-countdown.d.ts +72 -0
- package/dist/s-countdown/s-countdown.d.ts.map +1 -0
- package/dist/s-countdown/s-countdown.js +94 -0
- package/dist/s-data-table/index.d.ts +3 -0
- package/dist/s-data-table/index.d.ts.map +1 -0
- package/dist/s-data-table/index.js +2 -0
- package/dist/s-data-table/s-data-table.d.ts +64 -0
- package/dist/s-data-table/s-data-table.d.ts.map +1 -0
- package/dist/s-data-table/s-data-table.js +75 -0
- package/dist/s-date-picker/index.d.ts +3 -0
- package/dist/s-date-picker/index.d.ts.map +1 -0
- package/dist/s-date-picker/index.js +2 -0
- package/dist/s-date-picker/s-date-picker.d.ts +41 -0
- package/dist/s-date-picker/s-date-picker.d.ts.map +1 -0
- package/dist/s-date-picker/s-date-picker.js +161 -0
- package/dist/s-date-time-picker/index.d.ts +3 -0
- package/dist/s-date-time-picker/index.d.ts.map +1 -0
- package/dist/s-date-time-picker/index.js +2 -0
- package/dist/s-date-time-picker/s-date-time-picker.d.ts +47 -0
- package/dist/s-date-time-picker/s-date-time-picker.d.ts.map +1 -0
- package/dist/s-date-time-picker/s-date-time-picker.js +298 -0
- package/dist/s-divider/index.d.ts +2 -0
- package/dist/s-divider/index.d.ts.map +1 -0
- package/dist/s-divider/index.js +1 -0
- package/dist/s-divider/s-divider.d.ts +24 -0
- package/dist/s-divider/s-divider.d.ts.map +1 -0
- package/dist/s-divider/s-divider.js +30 -0
- package/dist/s-file-dropzone/index.d.ts +3 -0
- package/dist/s-file-dropzone/index.d.ts.map +1 -0
- package/dist/s-file-dropzone/index.js +2 -0
- package/dist/s-file-dropzone/s-file-dropzone.d.ts +63 -0
- package/dist/s-file-dropzone/s-file-dropzone.d.ts.map +1 -0
- package/dist/s-file-dropzone/s-file-dropzone.js +115 -0
- package/dist/s-file-icon/index.d.ts +3 -0
- package/dist/s-file-icon/index.d.ts.map +1 -0
- package/dist/s-file-icon/index.js +2 -0
- package/dist/s-file-icon/s-file-icon.d.ts +23 -0
- package/dist/s-file-icon/s-file-icon.d.ts.map +1 -0
- package/dist/s-file-icon/s-file-icon.js +86 -0
- package/dist/s-form/s-form.d.ts +0 -1
- package/dist/s-form/s-form.d.ts.map +1 -1
- package/dist/s-form/s-form.js +0 -1
- package/dist/s-icon-button/s-icon-button.d.ts +9 -9
- package/dist/s-icon-button/s-icon-button.d.ts.map +1 -1
- package/dist/s-icon-button/s-icon-button.js +38 -4
- package/dist/s-image-comparison/index.d.ts +2 -0
- package/dist/s-image-comparison/index.d.ts.map +1 -0
- package/dist/s-image-comparison/index.js +1 -0
- package/dist/s-image-comparison/s-image-comparison.d.ts +35 -0
- package/dist/s-image-comparison/s-image-comparison.d.ts.map +1 -0
- package/dist/s-image-comparison/s-image-comparison.js +111 -0
- package/dist/s-label/index.d.ts +3 -0
- package/dist/s-label/index.d.ts.map +1 -0
- package/dist/s-label/index.js +1 -0
- package/dist/s-label/s-label.d.ts +24 -0
- package/dist/s-label/s-label.d.ts.map +1 -0
- package/dist/s-label/s-label.js +19 -0
- package/dist/s-language-switcher/index.d.ts +4 -0
- package/dist/s-language-switcher/index.d.ts.map +1 -0
- package/dist/s-language-switcher/index.js +2 -0
- package/dist/s-language-switcher/s-language-switcher.d.ts +53 -0
- package/dist/s-language-switcher/s-language-switcher.d.ts.map +1 -0
- package/dist/s-language-switcher/s-language-switcher.js +57 -0
- package/dist/s-lazy-image/index.d.ts +3 -0
- package/dist/s-lazy-image/index.d.ts.map +1 -0
- package/dist/s-lazy-image/index.js +1 -0
- package/dist/s-lazy-image/s-lazy-image.d.ts +43 -0
- package/dist/s-lazy-image/s-lazy-image.d.ts.map +1 -0
- package/dist/s-lazy-image/s-lazy-image.js +74 -0
- package/dist/s-moving-border/index.d.ts +2 -0
- package/dist/s-moving-border/index.d.ts.map +1 -0
- package/dist/s-moving-border/index.js +1 -0
- package/dist/s-moving-border/s-moving-border.d.ts +38 -0
- package/dist/s-moving-border/s-moving-border.d.ts.map +1 -0
- package/dist/s-moving-border/s-moving-border.js +153 -0
- package/dist/s-multi-select/index.d.ts +2 -0
- package/dist/s-multi-select/index.d.ts.map +1 -0
- package/dist/s-multi-select/index.js +1 -0
- package/dist/s-multi-select/s-multi-select.d.ts +53 -0
- package/dist/s-multi-select/s-multi-select.d.ts.map +1 -0
- package/dist/s-multi-select/s-multi-select.js +150 -0
- package/dist/s-pagination/index.d.ts +3 -0
- package/dist/s-pagination/index.d.ts.map +1 -0
- package/dist/s-pagination/index.js +2 -0
- package/dist/s-pagination/s-pagination.d.ts +49 -0
- package/dist/s-pagination/s-pagination.d.ts.map +1 -0
- package/dist/s-pagination/s-pagination.js +147 -0
- package/dist/s-rating/index.d.ts +3 -0
- package/dist/s-rating/index.d.ts.map +1 -0
- package/dist/s-rating/index.js +1 -0
- package/dist/s-rating/s-rating.d.ts +55 -0
- package/dist/s-rating/s-rating.d.ts.map +1 -0
- package/dist/s-rating/s-rating.js +157 -0
- package/dist/s-review/index.d.ts +3 -0
- package/dist/s-review/index.d.ts.map +1 -0
- package/dist/s-review/index.js +1 -0
- package/dist/s-review/s-review.d.ts +55 -0
- package/dist/s-review/s-review.d.ts.map +1 -0
- package/dist/s-review/s-review.js +148 -0
- package/dist/s-scroll-to-top/index.d.ts +3 -0
- package/dist/s-scroll-to-top/index.d.ts.map +1 -0
- package/dist/s-scroll-to-top/index.js +2 -0
- package/dist/s-scroll-to-top/s-scroll-to-top.d.ts +36 -0
- package/dist/s-scroll-to-top/s-scroll-to-top.d.ts.map +1 -0
- package/dist/s-scroll-to-top/s-scroll-to-top.js +61 -0
- package/dist/s-select/s-select.d.ts +1 -3
- package/dist/s-select/s-select.d.ts.map +1 -1
- package/dist/s-select/s-select.js +61 -101
- package/dist/s-select-list/index.d.ts +3 -0
- package/dist/s-select-list/index.d.ts.map +1 -0
- package/dist/s-select-list/index.js +2 -0
- package/dist/s-select-list/s-select-list.d.ts +34 -0
- package/dist/s-select-list/s-select-list.d.ts.map +1 -0
- package/dist/s-select-list/s-select-list.js +115 -0
- package/dist/s-skeleton/index.d.ts +3 -0
- package/dist/s-skeleton/index.d.ts.map +1 -0
- package/dist/s-skeleton/index.js +1 -0
- package/dist/s-skeleton/s-skeleton.d.ts +27 -0
- package/dist/s-skeleton/s-skeleton.d.ts.map +1 -0
- package/dist/s-skeleton/s-skeleton.js +126 -0
- package/dist/s-switch/index.d.ts +3 -0
- package/dist/s-switch/index.d.ts.map +1 -0
- package/dist/s-switch/index.js +1 -0
- package/dist/s-switch/s-switch.d.ts +30 -0
- package/dist/s-switch/s-switch.d.ts.map +1 -0
- package/dist/s-switch/s-switch.js +44 -0
- package/dist/s-text-field/s-text-field.d.ts +0 -2
- package/dist/s-text-field/s-text-field.d.ts.map +1 -1
- package/dist/s-text-field/s-text-field.js +10 -23
- package/dist/s-text-shimmer/index.d.ts +2 -0
- package/dist/s-text-shimmer/index.d.ts.map +1 -0
- package/dist/s-text-shimmer/index.js +1 -0
- package/dist/s-text-shimmer/s-text-shimmer.d.ts +22 -0
- package/dist/s-text-shimmer/s-text-shimmer.d.ts.map +1 -0
- package/dist/s-text-shimmer/s-text-shimmer.js +102 -0
- package/dist/s-text-truncation/index.d.ts +2 -0
- package/dist/s-text-truncation/index.d.ts.map +1 -0
- package/dist/s-text-truncation/index.js +1 -0
- package/dist/s-text-truncation/s-text-truncation.d.ts +42 -0
- package/dist/s-text-truncation/s-text-truncation.d.ts.map +1 -0
- package/dist/s-text-truncation/s-text-truncation.js +88 -0
- package/dist/s-tip/index.d.ts +3 -0
- package/dist/s-tip/index.d.ts.map +1 -0
- package/dist/s-tip/index.js +1 -0
- package/dist/s-tip/s-tip.d.ts +17 -0
- package/dist/s-tip/s-tip.d.ts.map +1 -0
- package/dist/s-tip/s-tip.js +25 -0
- package/dist/s-tooltip/index.d.ts +2 -0
- package/dist/s-tooltip/index.d.ts.map +1 -0
- package/dist/s-tooltip/index.js +1 -0
- package/dist/s-tooltip/s-tooltip.d.ts +23 -0
- package/dist/s-tooltip/s-tooltip.d.ts.map +1 -0
- package/dist/s-tooltip/s-tooltip.js +17 -0
- package/dist/s-zoom-image/index.d.ts +3 -0
- package/dist/s-zoom-image/index.d.ts.map +1 -0
- package/dist/s-zoom-image/index.js +1 -0
- package/dist/s-zoom-image/s-zoom-image.d.ts +38 -0
- package/dist/s-zoom-image/s-zoom-image.d.ts.map +1 -0
- package/dist/s-zoom-image/s-zoom-image.js +149 -0
- package/dist/theme/theme-primitives.d.ts +10 -0
- package/dist/theme/theme-primitives.d.ts.map +1 -1
- package/dist/theme/theme-primitives.js +11 -0
- package/dist/utils/bytes-to-size.d.ts +9 -0
- package/dist/utils/bytes-to-size.d.ts.map +1 -0
- package/dist/utils/bytes-to-size.js +17 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +1 -0
- package/package.json +175 -5
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom hooks for UI Kit Native
|
|
3
|
+
*/
|
|
4
|
+
export { default as useCountDown, type UseCountDownProps, type UseCountDownReturn, type TimeLeft, } from './use-count-down';
|
|
5
|
+
export { useIsPassedPosition, checkIsPassedPosition } from './use-is-passed-position';
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,GACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Time left object structure
|
|
3
|
+
*/
|
|
4
|
+
export interface TimeLeft {
|
|
5
|
+
days: number;
|
|
6
|
+
hours: number;
|
|
7
|
+
minutes: number;
|
|
8
|
+
seconds: number;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Props for useCountDown hook
|
|
12
|
+
*/
|
|
13
|
+
export interface UseCountDownProps {
|
|
14
|
+
/** Target date timestamp in milliseconds */
|
|
15
|
+
expireDate: number;
|
|
16
|
+
/** Callback fired when countdown reaches zero */
|
|
17
|
+
onComplete?: () => void;
|
|
18
|
+
/** Callback fired on each tick (every second) */
|
|
19
|
+
onTick?: (timeLeft: TimeLeft) => void;
|
|
20
|
+
/** Callback fired when countdown starts */
|
|
21
|
+
onStart?: () => void;
|
|
22
|
+
/** Whether the countdown is paused */
|
|
23
|
+
paused?: boolean;
|
|
24
|
+
/** Custom interval in milliseconds (default: 1000) */
|
|
25
|
+
interval?: number;
|
|
26
|
+
/** Whether to automatically start the countdown */
|
|
27
|
+
autoStart?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Return type for useCountDown hook
|
|
31
|
+
*/
|
|
32
|
+
export interface UseCountDownReturn {
|
|
33
|
+
/** Current time left */
|
|
34
|
+
timeLeft: TimeLeft;
|
|
35
|
+
/** Whether the countdown has expired */
|
|
36
|
+
isExpired: boolean;
|
|
37
|
+
/** Whether the countdown is currently running */
|
|
38
|
+
isRunning: boolean;
|
|
39
|
+
/** Whether the countdown is paused */
|
|
40
|
+
isPaused: boolean;
|
|
41
|
+
/** Start the countdown */
|
|
42
|
+
start: () => void;
|
|
43
|
+
/** Pause the countdown */
|
|
44
|
+
pause: () => void;
|
|
45
|
+
/** Resume the countdown */
|
|
46
|
+
resume: () => void;
|
|
47
|
+
/** Reset the countdown to initial state */
|
|
48
|
+
reset: () => void;
|
|
49
|
+
/** Get the total duration in milliseconds */
|
|
50
|
+
totalDuration: number;
|
|
51
|
+
/** Get the elapsed time in milliseconds */
|
|
52
|
+
elapsedTime: number;
|
|
53
|
+
/** Get the progress as a percentage (0-100) */
|
|
54
|
+
progress: number;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Enhanced countdown hook with comprehensive features
|
|
58
|
+
*
|
|
59
|
+
* Features:
|
|
60
|
+
* - Pause/resume functionality
|
|
61
|
+
* - Event callbacks (onComplete, onTick, onStart)
|
|
62
|
+
* - Custom intervals
|
|
63
|
+
* - Progress tracking
|
|
64
|
+
* - Manual start/stop controls
|
|
65
|
+
* - Expiration detection
|
|
66
|
+
*
|
|
67
|
+
* @param props - UseCountDownProps
|
|
68
|
+
* @returns UseCountDownReturn - Hook return value with time data and controls
|
|
69
|
+
*/
|
|
70
|
+
declare const useCountDown: ({ expireDate, onComplete, onTick, onStart, paused, interval, autoStart, }: UseCountDownProps) => UseCountDownReturn;
|
|
71
|
+
export default useCountDown;
|
|
72
|
+
//# sourceMappingURL=use-count-down.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-count-down.d.ts","sourceRoot":"","sources":["../../src/hooks/use-count-down.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAYD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,QAAQ,EAAE,QAAQ,CAAC;IACnB,wCAAwC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,2BAA2B;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6CAA6C;IAC7C,aAAa,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,YAAY,GAAI,2EAQnB,iBAAiB,KAAG,kBAuMtB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Initial state for countdown
|
|
4
|
+
*/
|
|
5
|
+
const initialState = {
|
|
6
|
+
days: 0,
|
|
7
|
+
hours: 0,
|
|
8
|
+
minutes: 0,
|
|
9
|
+
seconds: 0,
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Enhanced countdown hook with comprehensive features
|
|
13
|
+
*
|
|
14
|
+
* Features:
|
|
15
|
+
* - Pause/resume functionality
|
|
16
|
+
* - Event callbacks (onComplete, onTick, onStart)
|
|
17
|
+
* - Custom intervals
|
|
18
|
+
* - Progress tracking
|
|
19
|
+
* - Manual start/stop controls
|
|
20
|
+
* - Expiration detection
|
|
21
|
+
*
|
|
22
|
+
* @param props - UseCountDownProps
|
|
23
|
+
* @returns UseCountDownReturn - Hook return value with time data and controls
|
|
24
|
+
*/
|
|
25
|
+
const useCountDown = ({ expireDate, onComplete, onTick, onStart, paused = false, interval = 1000, autoStart = true, }) => {
|
|
26
|
+
const [timeLeft, setTimeLeft] = useState(initialState);
|
|
27
|
+
const [isExpired, setIsExpired] = useState(false);
|
|
28
|
+
const [isRunning, setIsRunning] = useState(autoStart && !paused);
|
|
29
|
+
const [isPaused, setIsPaused] = useState(paused);
|
|
30
|
+
const [startTime, setStartTime] = useState(null);
|
|
31
|
+
const timerRef = useRef(null);
|
|
32
|
+
const onCompleteRef = useRef(onComplete);
|
|
33
|
+
const onTickRef = useRef(onTick);
|
|
34
|
+
const onStartRef = useRef(onStart);
|
|
35
|
+
const hasStartedRef = useRef(false);
|
|
36
|
+
const hasCompletedRef = useRef(false);
|
|
37
|
+
// Update refs when callbacks change
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
onCompleteRef.current = onComplete;
|
|
40
|
+
}, [onComplete]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
onTickRef.current = onTick;
|
|
43
|
+
}, [onTick]);
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
onStartRef.current = onStart;
|
|
46
|
+
}, [onStart]);
|
|
47
|
+
/**
|
|
48
|
+
* Calculate time remaining
|
|
49
|
+
*/
|
|
50
|
+
const calculateTimeLeft = useCallback(() => {
|
|
51
|
+
const now = new Date().getTime();
|
|
52
|
+
const distance = expireDate - now;
|
|
53
|
+
if (distance < 0) {
|
|
54
|
+
return { timeLeft: initialState, expired: true };
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
timeLeft: {
|
|
58
|
+
days: Math.floor(distance / (1000 * 60 * 60 * 24)),
|
|
59
|
+
hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
|
|
60
|
+
minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
|
|
61
|
+
seconds: Math.floor((distance % (1000 * 60)) / 1000),
|
|
62
|
+
},
|
|
63
|
+
expired: false,
|
|
64
|
+
};
|
|
65
|
+
}, [expireDate]);
|
|
66
|
+
/**
|
|
67
|
+
* Update timer state
|
|
68
|
+
*/
|
|
69
|
+
const updateTimer = useCallback(() => {
|
|
70
|
+
const { timeLeft: newTimeLeft, expired } = calculateTimeLeft();
|
|
71
|
+
setTimeLeft(newTimeLeft);
|
|
72
|
+
setIsExpired(expired);
|
|
73
|
+
// Call onTick callback
|
|
74
|
+
if (onTickRef.current) {
|
|
75
|
+
onTickRef.current(newTimeLeft);
|
|
76
|
+
}
|
|
77
|
+
// Handle completion
|
|
78
|
+
if (expired && !hasCompletedRef.current) {
|
|
79
|
+
hasCompletedRef.current = true;
|
|
80
|
+
setIsRunning(false);
|
|
81
|
+
if (onCompleteRef.current) {
|
|
82
|
+
onCompleteRef.current();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}, [calculateTimeLeft]);
|
|
86
|
+
/**
|
|
87
|
+
* Start the countdown
|
|
88
|
+
*/
|
|
89
|
+
const start = useCallback(() => {
|
|
90
|
+
if (!hasStartedRef.current && onStartRef.current) {
|
|
91
|
+
onStartRef.current();
|
|
92
|
+
hasStartedRef.current = true;
|
|
93
|
+
}
|
|
94
|
+
setIsRunning(true);
|
|
95
|
+
setIsPaused(false);
|
|
96
|
+
if (!startTime) {
|
|
97
|
+
setStartTime(new Date().getTime());
|
|
98
|
+
}
|
|
99
|
+
}, [startTime]);
|
|
100
|
+
/**
|
|
101
|
+
* Pause the countdown
|
|
102
|
+
*/
|
|
103
|
+
const pause = useCallback(() => {
|
|
104
|
+
setIsRunning(false);
|
|
105
|
+
setIsPaused(true);
|
|
106
|
+
}, []);
|
|
107
|
+
/**
|
|
108
|
+
* Resume the countdown
|
|
109
|
+
*/
|
|
110
|
+
const resume = useCallback(() => {
|
|
111
|
+
setIsRunning(true);
|
|
112
|
+
setIsPaused(false);
|
|
113
|
+
}, []);
|
|
114
|
+
/**
|
|
115
|
+
* Reset the countdown
|
|
116
|
+
*/
|
|
117
|
+
const reset = useCallback(() => {
|
|
118
|
+
setIsRunning(autoStart && !paused);
|
|
119
|
+
setIsPaused(paused);
|
|
120
|
+
setIsExpired(false);
|
|
121
|
+
setStartTime(null);
|
|
122
|
+
hasStartedRef.current = false;
|
|
123
|
+
hasCompletedRef.current = false;
|
|
124
|
+
const { timeLeft: newTimeLeft } = calculateTimeLeft();
|
|
125
|
+
setTimeLeft(newTimeLeft);
|
|
126
|
+
}, [autoStart, paused, calculateTimeLeft]);
|
|
127
|
+
/**
|
|
128
|
+
* Handle pause prop changes
|
|
129
|
+
*/
|
|
130
|
+
useEffect(() => {
|
|
131
|
+
if (paused) {
|
|
132
|
+
pause();
|
|
133
|
+
}
|
|
134
|
+
else if (isPaused && !paused) {
|
|
135
|
+
resume();
|
|
136
|
+
}
|
|
137
|
+
}, [paused, isPaused, pause, resume]);
|
|
138
|
+
/**
|
|
139
|
+
* Timer effect
|
|
140
|
+
*/
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
if (isRunning && !isExpired) {
|
|
143
|
+
timerRef.current = setInterval(updateTimer, interval);
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
if (timerRef.current) {
|
|
147
|
+
clearInterval(timerRef.current);
|
|
148
|
+
timerRef.current = null;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
return () => {
|
|
152
|
+
if (timerRef.current) {
|
|
153
|
+
clearInterval(timerRef.current);
|
|
154
|
+
timerRef.current = null;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
}, [isRunning, isExpired, interval, updateTimer]);
|
|
158
|
+
/**
|
|
159
|
+
* Initial calculation
|
|
160
|
+
*/
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
updateTimer();
|
|
163
|
+
}, [updateTimer]);
|
|
164
|
+
/**
|
|
165
|
+
* Calculate total duration
|
|
166
|
+
*/
|
|
167
|
+
const totalDuration = useMemo(() => {
|
|
168
|
+
if (!startTime)
|
|
169
|
+
return 0;
|
|
170
|
+
return Math.max(0, expireDate - startTime);
|
|
171
|
+
}, [expireDate, startTime]);
|
|
172
|
+
/**
|
|
173
|
+
* Calculate elapsed time
|
|
174
|
+
*/
|
|
175
|
+
const elapsedTime = useMemo(() => {
|
|
176
|
+
if (!startTime)
|
|
177
|
+
return 0;
|
|
178
|
+
const now = new Date().getTime();
|
|
179
|
+
return Math.max(0, now - startTime);
|
|
180
|
+
}, [startTime]);
|
|
181
|
+
/**
|
|
182
|
+
* Calculate progress percentage
|
|
183
|
+
*/
|
|
184
|
+
const progress = useMemo(() => {
|
|
185
|
+
if (totalDuration === 0)
|
|
186
|
+
return 0;
|
|
187
|
+
return Math.min(100, Math.max(0, (elapsedTime / totalDuration) * 100));
|
|
188
|
+
}, [elapsedTime, totalDuration]);
|
|
189
|
+
return {
|
|
190
|
+
timeLeft,
|
|
191
|
+
isExpired,
|
|
192
|
+
isRunning,
|
|
193
|
+
isPaused,
|
|
194
|
+
start,
|
|
195
|
+
pause,
|
|
196
|
+
resume,
|
|
197
|
+
reset,
|
|
198
|
+
totalDuration,
|
|
199
|
+
elapsedTime,
|
|
200
|
+
progress,
|
|
201
|
+
};
|
|
202
|
+
};
|
|
203
|
+
export default useCountDown;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { ScrollView } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to detect if a scroll position has been passed
|
|
4
|
+
* Native version of useIsPassedPosition from @solostylist/ui-kit
|
|
5
|
+
*
|
|
6
|
+
* @param scrollRef - Reference to the ScrollView component
|
|
7
|
+
* @param positionY - Y position threshold to detect
|
|
8
|
+
* @returns boolean indicating if the scroll position has been passed
|
|
9
|
+
*/
|
|
10
|
+
export declare function useIsPassedPosition(scrollRef: React.RefObject<ScrollView> | null, positionY: number): boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Helper function to check if scroll position is passed
|
|
13
|
+
* This should be called from the ScrollView's onScroll event
|
|
14
|
+
*
|
|
15
|
+
* @param scrollY - Current scroll Y position
|
|
16
|
+
* @param threshold - Threshold position
|
|
17
|
+
* @returns boolean indicating if threshold is passed
|
|
18
|
+
*/
|
|
19
|
+
export declare function checkIsPassedPosition(scrollY: number, threshold: number): boolean;
|
|
20
|
+
//# sourceMappingURL=use-is-passed-position.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-is-passed-position.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-passed-position.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAa7G;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAEjF"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to detect if a scroll position has been passed
|
|
4
|
+
* Native version of useIsPassedPosition from @solostylist/ui-kit
|
|
5
|
+
*
|
|
6
|
+
* @param scrollRef - Reference to the ScrollView component
|
|
7
|
+
* @param positionY - Y position threshold to detect
|
|
8
|
+
* @returns boolean indicating if the scroll position has been passed
|
|
9
|
+
*/
|
|
10
|
+
export function useIsPassedPosition(scrollRef, positionY) {
|
|
11
|
+
const [isPassed, setIsPassed] = useState(false);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
// For React Native, we can't directly attach scroll listeners like in web
|
|
14
|
+
// The scroll position tracking should be handled by the parent component
|
|
15
|
+
// This hook will be updated via the onScroll event in the ScrollView
|
|
16
|
+
// Initialize as not passed
|
|
17
|
+
setIsPassed(false);
|
|
18
|
+
}, [scrollRef, positionY]);
|
|
19
|
+
return isPassed;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Helper function to check if scroll position is passed
|
|
23
|
+
* This should be called from the ScrollView's onScroll event
|
|
24
|
+
*
|
|
25
|
+
* @param scrollY - Current scroll Y position
|
|
26
|
+
* @param threshold - Threshold position
|
|
27
|
+
* @returns boolean indicating if threshold is passed
|
|
28
|
+
*/
|
|
29
|
+
export function checkIsPassedPosition(scrollY, threshold) {
|
|
30
|
+
return scrollY > threshold;
|
|
31
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,10 +5,46 @@
|
|
|
5
5
|
* Synced with web ui-kit and uses @solostylist/core for theming
|
|
6
6
|
*/
|
|
7
7
|
export { SThemeProvider, useSTheme, darkTheme, lightTheme, type SThemeProviderProps, type ThemeMode, type NativeTheme, type NativeThemeColors, } from './theme';
|
|
8
|
+
export { SAvatar, type SAvatarProps, type SAvatarSize, type SAvatarColor } from './s-avatar';
|
|
9
|
+
export { SButton, type SButtonProps, type SButtonColor, type SButtonVariant, type SButtonSize } from './s-button';
|
|
10
|
+
export { SButtonLink, type SButtonLinkProps } from './s-button-link';
|
|
11
|
+
export { SChatInput, type SChatInputProps, type ChatFile } from './s-chat-input';
|
|
12
|
+
export { SChatMessage, type SChatMessageProps, type ChatAttachment } from './s-chat-message';
|
|
13
|
+
export { SCheckbox, type SCheckboxProps } from './s-checkbox';
|
|
14
|
+
export { SSwitch, type SSwitchProps } from './s-switch';
|
|
15
|
+
export { SCodeBlock, type SCodeBlockProps } from './s-code-block';
|
|
16
|
+
export { SCommentMessage, type SCommentMessageProps } from './s-comment-message';
|
|
17
|
+
export { SChip, type SChipProps, type SChipColor, type SChipVariant, type SChipSize } from './s-chip';
|
|
18
|
+
export { SCopyableText, type SCopyableTextProps } from './s-copyable-text';
|
|
19
|
+
export { SCountdown, SCountBox, type SCountdownProps, type SCountBoxProps } from './s-countdown';
|
|
20
|
+
export { SDataTable, type SDataTableProps, type ColumnDef } from './s-data-table';
|
|
21
|
+
export { SDatePicker, type SDatePickerProps } from './s-date-picker';
|
|
22
|
+
export { SDateTimePicker, type SDateTimePickerProps } from './s-date-time-picker';
|
|
23
|
+
export { SFileIcon, type SFileIconProps } from './s-file-icon';
|
|
24
|
+
export { SFileDropzone, type SFileDropzoneProps, type CustomFile } from './s-file-dropzone';
|
|
8
25
|
export { SForm, type SFormProps } from './s-form';
|
|
9
26
|
export { SIconButton, type SIconButtonProps } from './s-icon-button';
|
|
27
|
+
export { SImageComparison, type SImageComparisonProps } from './s-image-comparison';
|
|
28
|
+
export { SLanguageSwitcher, type SLanguageSwitcherProps, type SLanguageOption, defaultLanguageOptions, } from './s-language-switcher';
|
|
29
|
+
export { SDivider, type SDividerProps } from './s-divider';
|
|
30
|
+
export { SLabel, type SLabelProps } from './s-label';
|
|
31
|
+
export { SLazyImage, type SLazyImageProps, type SLazyImageVariant } from './s-lazy-image';
|
|
32
|
+
export { SMovingBorder, type SMovingBorderProps } from './s-moving-border';
|
|
33
|
+
export { SZoomImage, type SZoomImageProps } from './s-zoom-image';
|
|
34
|
+
export { SPagination, type SPaginationProps } from './s-pagination';
|
|
35
|
+
export { SRating, type SRatingProps, type SRatingSize, type SRatingColor } from './s-rating';
|
|
36
|
+
export { SReview, type SReviewProps } from './s-review';
|
|
37
|
+
export { SScrollToTop, type SScrollToTopProps } from './s-scroll-to-top';
|
|
10
38
|
export { SSelect, type SSelectProps } from './s-select';
|
|
39
|
+
export { SSelectList, type SSelectListProps, type SSelectListItem } from './s-select-list';
|
|
40
|
+
export { SSkeleton, type SSkeletonProps } from './s-skeleton';
|
|
41
|
+
export { SMultiSelect, type SMultiSelectProps } from './s-multi-select';
|
|
11
42
|
export { SText, type STextProps } from './s-text';
|
|
12
43
|
export { STextField, type STextFieldProps } from './s-text-field';
|
|
44
|
+
export { STextShimmer, type STextShimmerProps } from './s-text-shimmer';
|
|
45
|
+
export { STextTruncation, type STextTruncationProps, type STextTruncationVariant } from './s-text-truncation';
|
|
46
|
+
export { STip, type STipProps } from './s-tip';
|
|
47
|
+
export { STooltip, type STooltipProps } from './s-tooltip';
|
|
48
|
+
export { useCountDown, type UseCountDownProps, type UseCountDownReturn, type TimeLeft, useIsPassedPosition, checkIsPassedPosition, } from './hooks';
|
|
13
49
|
export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';
|
|
14
50
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -7,10 +7,47 @@
|
|
|
7
7
|
// Theme
|
|
8
8
|
export { SThemeProvider, useSTheme, darkTheme, lightTheme, } from './theme';
|
|
9
9
|
// Components
|
|
10
|
+
export { SAvatar } from './s-avatar';
|
|
11
|
+
export { SButton } from './s-button';
|
|
12
|
+
export { SButtonLink } from './s-button-link';
|
|
13
|
+
export { SChatInput } from './s-chat-input';
|
|
14
|
+
export { SChatMessage } from './s-chat-message';
|
|
15
|
+
export { SCheckbox } from './s-checkbox';
|
|
16
|
+
export { SSwitch } from './s-switch';
|
|
17
|
+
export { SCodeBlock } from './s-code-block';
|
|
18
|
+
export { SCommentMessage } from './s-comment-message';
|
|
19
|
+
export { SChip } from './s-chip';
|
|
20
|
+
export { SCopyableText } from './s-copyable-text';
|
|
21
|
+
export { SCountdown, SCountBox } from './s-countdown';
|
|
22
|
+
export { SDataTable } from './s-data-table';
|
|
23
|
+
export { SDatePicker } from './s-date-picker';
|
|
24
|
+
export { SDateTimePicker } from './s-date-time-picker';
|
|
25
|
+
export { SFileIcon } from './s-file-icon';
|
|
26
|
+
export { SFileDropzone } from './s-file-dropzone';
|
|
10
27
|
export { SForm } from './s-form';
|
|
11
28
|
export { SIconButton } from './s-icon-button';
|
|
29
|
+
export { SImageComparison } from './s-image-comparison';
|
|
30
|
+
export { SLanguageSwitcher, defaultLanguageOptions, } from './s-language-switcher';
|
|
31
|
+
export { SDivider } from './s-divider';
|
|
32
|
+
export { SLabel } from './s-label';
|
|
33
|
+
export { SLazyImage } from './s-lazy-image';
|
|
34
|
+
export { SMovingBorder } from './s-moving-border';
|
|
35
|
+
export { SZoomImage } from './s-zoom-image';
|
|
36
|
+
export { SPagination } from './s-pagination';
|
|
37
|
+
export { SRating } from './s-rating';
|
|
38
|
+
export { SReview } from './s-review';
|
|
39
|
+
export { SScrollToTop } from './s-scroll-to-top';
|
|
12
40
|
export { SSelect } from './s-select';
|
|
41
|
+
export { SSelectList } from './s-select-list';
|
|
42
|
+
export { SSkeleton } from './s-skeleton';
|
|
43
|
+
export { SMultiSelect } from './s-multi-select';
|
|
13
44
|
export { SText } from './s-text';
|
|
14
45
|
export { STextField } from './s-text-field';
|
|
46
|
+
export { STextShimmer } from './s-text-shimmer';
|
|
47
|
+
export { STextTruncation } from './s-text-truncation';
|
|
48
|
+
export { STip } from './s-tip';
|
|
49
|
+
export { STooltip } from './s-tooltip';
|
|
50
|
+
// Hooks
|
|
51
|
+
export { useCountDown, useIsPassedPosition, checkIsPassedPosition, } from './hooks';
|
|
15
52
|
// Re-export core colors for convenience
|
|
16
53
|
export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SAvatar, default } from './s-avatar';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ImageSourcePropType, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Avatar size variants - matches common sizing patterns
|
|
5
|
+
*/
|
|
6
|
+
export type SAvatarSize = 'small' | 'medium' | 'large' | number;
|
|
7
|
+
/**
|
|
8
|
+
* Avatar color variants for background when showing initials
|
|
9
|
+
*/
|
|
10
|
+
export type SAvatarColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
|
|
11
|
+
/**
|
|
12
|
+
* Props interface for SAvatar component
|
|
13
|
+
*/
|
|
14
|
+
export interface SAvatarProps {
|
|
15
|
+
/** URL or local asset of the avatar image to display */
|
|
16
|
+
avatar?: string | ImageSourcePropType;
|
|
17
|
+
/** Name of the user, used for initials fallback and optional display */
|
|
18
|
+
name?: string;
|
|
19
|
+
/** Whether to display the name alongside the avatar */
|
|
20
|
+
showName?: boolean;
|
|
21
|
+
/** Size of the avatar in pixels (width and height) or preset size */
|
|
22
|
+
size?: SAvatarSize;
|
|
23
|
+
/** Background color for initials avatar */
|
|
24
|
+
color?: SAvatarColor;
|
|
25
|
+
/** Additional styles for the avatar container */
|
|
26
|
+
style?: StyleProp<ViewStyle>;
|
|
27
|
+
/** Additional styles for the avatar */
|
|
28
|
+
avatarStyle?: StyleProp<ViewStyle>;
|
|
29
|
+
/** Additional styles for the name text */
|
|
30
|
+
nameStyle?: StyleProp<TextStyle>;
|
|
31
|
+
/** Callback fired when avatar is pressed */
|
|
32
|
+
onPress?: () => void;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* A flexible avatar component that displays user profile images with fallback to initials.
|
|
36
|
+
* Built on React Native Paper Avatar with optional name display and customizable sizing.
|
|
37
|
+
*/
|
|
38
|
+
export declare const SAvatar: {
|
|
39
|
+
({ avatar, name, showName, size, color, style, avatarStyle, nameStyle, onPress, }: SAvatarProps): React.JSX.Element;
|
|
40
|
+
displayName: string;
|
|
41
|
+
};
|
|
42
|
+
export default SAvatar;
|
|
43
|
+
//# sourceMappingURL=s-avatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"s-avatar.d.ts","sourceRoot":"","sources":["../../src/s-avatar/s-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAoBzG;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE9F;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACtC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAiDD;;;GAGG;AACH,eAAO,MAAM,OAAO;uFAUjB,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAqFlC,CAAC;AAIF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { Avatar } from 'react-native-paper';
|
|
5
|
+
import { blue, brand, green, lightBlue, lightBrand, lightGreen, lightOrange, lightPurple, lightRed, orange, purple, red, } from '@solostylist/core';
|
|
6
|
+
import { SText } from '../s-text';
|
|
7
|
+
import { useSTheme } from '../theme';
|
|
8
|
+
/**
|
|
9
|
+
* Get size in pixels from size prop
|
|
10
|
+
*/
|
|
11
|
+
const getSizeInPixels = (size) => {
|
|
12
|
+
if (typeof size === 'number') {
|
|
13
|
+
return size;
|
|
14
|
+
}
|
|
15
|
+
switch (size) {
|
|
16
|
+
case 'small':
|
|
17
|
+
return 32;
|
|
18
|
+
case 'medium':
|
|
19
|
+
return 40;
|
|
20
|
+
case 'large':
|
|
21
|
+
return 56;
|
|
22
|
+
default:
|
|
23
|
+
return 40;
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Get font size for initials based on avatar size
|
|
28
|
+
*/
|
|
29
|
+
const getInitialsFontSize = (sizeInPixels) => {
|
|
30
|
+
if (sizeInPixels <= 32) {
|
|
31
|
+
return 12;
|
|
32
|
+
}
|
|
33
|
+
else if (sizeInPixels <= 40) {
|
|
34
|
+
return 14;
|
|
35
|
+
}
|
|
36
|
+
else if (sizeInPixels <= 56) {
|
|
37
|
+
return 18;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return Math.round(sizeInPixels * 0.4);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Get initials from name (up to 2 characters)
|
|
45
|
+
*/
|
|
46
|
+
const getInitials = (name) => {
|
|
47
|
+
if (!name)
|
|
48
|
+
return 'A';
|
|
49
|
+
const parts = name.trim().split(/\s+/);
|
|
50
|
+
if (parts.length === 1) {
|
|
51
|
+
return parts[0].charAt(0).toUpperCase();
|
|
52
|
+
}
|
|
53
|
+
return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* A flexible avatar component that displays user profile images with fallback to initials.
|
|
57
|
+
* Built on React Native Paper Avatar with optional name display and customizable sizing.
|
|
58
|
+
*/
|
|
59
|
+
export const SAvatar = ({ avatar, name, showName = false, size = 'medium', color = 'primary', style, avatarStyle, nameStyle, onPress, }) => {
|
|
60
|
+
const { theme } = useSTheme();
|
|
61
|
+
const sizeInPixels = getSizeInPixels(size);
|
|
62
|
+
const initialsFontSize = getInitialsFontSize(sizeInPixels);
|
|
63
|
+
const initials = getInitials(name);
|
|
64
|
+
// Get color palettes - matches SButton logic
|
|
65
|
+
const getColorPalettes = (color) => {
|
|
66
|
+
switch (color) {
|
|
67
|
+
case 'primary':
|
|
68
|
+
return { light: lightBrand, dark: brand };
|
|
69
|
+
case 'secondary':
|
|
70
|
+
return { light: lightPurple, dark: purple };
|
|
71
|
+
case 'success':
|
|
72
|
+
return { light: lightGreen, dark: green };
|
|
73
|
+
case 'error':
|
|
74
|
+
return { light: lightRed, dark: red };
|
|
75
|
+
case 'info':
|
|
76
|
+
return { light: lightBlue, dark: blue };
|
|
77
|
+
case 'warning':
|
|
78
|
+
return { light: lightOrange, dark: orange };
|
|
79
|
+
default:
|
|
80
|
+
return { light: lightBrand, dark: brand };
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
const { light: lightColor, dark: darkColor } = getColorPalettes(color);
|
|
84
|
+
const colorPalette = theme.dark ? darkColor : lightColor;
|
|
85
|
+
// Get background color for initials avatar - matches SButton contained variant
|
|
86
|
+
const backgroundColor = useMemo(() => {
|
|
87
|
+
return theme.dark ? colorPalette[800] : colorPalette[700];
|
|
88
|
+
}, [theme.dark, colorPalette]);
|
|
89
|
+
// Get text color for initials
|
|
90
|
+
const textColor = useMemo(() => {
|
|
91
|
+
return theme.dark ? colorPalette[100] : colorPalette[50];
|
|
92
|
+
}, [theme.dark, colorPalette]);
|
|
93
|
+
const renderAvatar = () => {
|
|
94
|
+
if (avatar) {
|
|
95
|
+
const source = typeof avatar === 'string' ? { uri: avatar } : avatar;
|
|
96
|
+
return _jsx(Avatar.Image, { size: sizeInPixels, source: source, style: [avatarStyle], onTouchEnd: onPress });
|
|
97
|
+
}
|
|
98
|
+
return (_jsx(Avatar.Text, { size: sizeInPixels, label: initials, style: [
|
|
99
|
+
{
|
|
100
|
+
backgroundColor,
|
|
101
|
+
},
|
|
102
|
+
avatarStyle,
|
|
103
|
+
], labelStyle: {
|
|
104
|
+
fontSize: initialsFontSize,
|
|
105
|
+
fontFamily: theme.typography.fontFamily,
|
|
106
|
+
color: textColor,
|
|
107
|
+
}, onTouchEnd: onPress }));
|
|
108
|
+
};
|
|
109
|
+
return (_jsxs(View, { style: [
|
|
110
|
+
{
|
|
111
|
+
flexDirection: 'row',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
gap: theme.spacing.md,
|
|
114
|
+
},
|
|
115
|
+
style,
|
|
116
|
+
], children: [renderAvatar(), showName && name && (_jsx(SText, { variant: "body1", style: [{ fontSize: 16 }, nameStyle], children: name }))] }));
|
|
117
|
+
};
|
|
118
|
+
SAvatar.displayName = 'SAvatar';
|
|
119
|
+
export default SAvatar;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/s-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SButton, default } from './s-button';
|