@wireservers-ui/react-natives 2.0.1 → 2.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/CHANGELOG.md +94 -71
- package/LICENSE +21 -21
- package/README.md +653 -613
- package/bin/cli.js +83 -5
- package/bin/init.js +470 -324
- package/package.json +1 -1
- package/src/accordion/accordion-content.tsx +30 -30
- package/src/accordion/accordion-icon.tsx +54 -54
- package/src/accordion/accordion-item.tsx +37 -37
- package/src/accordion/accordion-title-text.tsx +24 -24
- package/src/accordion/accordion-trigger.tsx +38 -38
- package/src/accordion/accordion.tsx +91 -91
- package/src/accordion/index.ts +24 -24
- package/src/accordion/styles.ts +74 -74
- package/src/accordion/types.ts +56 -56
- package/src/actionsheet/actionsheet-backdrop.tsx +23 -23
- package/src/actionsheet/actionsheet-content.tsx +19 -19
- package/src/actionsheet/actionsheet-drag-indicator-wrapper.tsx +19 -19
- package/src/actionsheet/actionsheet-drag-indicator.tsx +19 -19
- package/src/actionsheet/actionsheet-item-text.tsx +19 -19
- package/src/actionsheet/actionsheet-item.tsx +20 -20
- package/src/actionsheet/actionsheet-scroll-view.tsx +12 -12
- package/src/actionsheet/actionsheet.tsx +45 -45
- package/src/actionsheet/index.ts +20 -20
- package/src/actionsheet/styles.ts +25 -25
- package/src/actionsheet/types.ts +49 -49
- package/src/alert/alert-body.tsx +19 -19
- package/src/alert/alert-close-button.tsx +23 -23
- package/src/alert/alert-icon.tsx +40 -40
- package/src/alert/alert-text.tsx +22 -22
- package/src/alert/alert.tsx +33 -33
- package/src/alert/index.ts +15 -15
- package/src/alert/styles.ts +112 -112
- package/src/alert/types.ts +36 -36
- package/src/alert-dialog/alert-dialog.tsx +54 -54
- package/src/alert-dialog/index.ts +2 -2
- package/src/alert-dialog/styles.ts +40 -40
- package/src/alert-dialog/types.ts +40 -40
- package/src/aspect-ratio/aspect-ratio.tsx +20 -20
- package/src/aspect-ratio/index.ts +2 -2
- package/src/aspect-ratio/styles.ts +6 -6
- package/src/aspect-ratio/types.ts +7 -7
- package/src/avatar/avatar-badge.tsx +22 -22
- package/src/avatar/avatar-fallback-text.tsx +33 -33
- package/src/avatar/avatar-group.tsx +53 -53
- package/src/avatar/avatar-image.tsx +21 -21
- package/src/avatar/avatar.tsx +27 -27
- package/src/avatar/index.ts +14 -14
- package/src/avatar/styles.ts +94 -94
- package/src/avatar/types.ts +35 -35
- package/src/badge/badge-icon.tsx +20 -20
- package/src/badge/badge-text.tsx +24 -24
- package/src/badge/badge.tsx +39 -39
- package/src/badge/index.ts +11 -11
- package/src/badge/styles.ts +175 -175
- package/src/badge/types.ts +37 -37
- package/src/blockquote/blockquote.tsx +21 -21
- package/src/blockquote/index.ts +2 -2
- package/src/blockquote/styles.ts +11 -11
- package/src/blockquote/types.ts +6 -6
- package/src/box/box.tsx +19 -19
- package/src/box/index.ts +2 -2
- package/src/box/styles.ts +6 -6
- package/src/box/types.ts +6 -6
- package/src/breadcrumb/breadcrumb-item.tsx +20 -20
- package/src/breadcrumb/breadcrumb-link.tsx +20 -20
- package/src/breadcrumb/breadcrumb-text.tsx +19 -19
- package/src/breadcrumb/breadcrumb.tsx +43 -43
- package/src/breadcrumb/index.ts +12 -12
- package/src/breadcrumb/styles.ts +36 -36
- package/src/breadcrumb/types.ts +33 -33
- package/src/button/button-group.tsx +35 -35
- package/src/button/button-icon.tsx +37 -37
- package/src/button/button-spinner.tsx +12 -12
- package/src/button/button-text.tsx +27 -27
- package/src/button/button.tsx +42 -42
- package/src/button/index.ts +19 -19
- package/src/button/styles.ts +250 -250
- package/src/button/types.ts +67 -67
- package/src/calendar/calendar-day-cell.tsx +67 -67
- package/src/calendar/calendar-day-view.tsx +66 -66
- package/src/calendar/calendar-event.tsx +59 -59
- package/src/calendar/calendar-header.tsx +60 -60
- package/src/calendar/calendar-horizontal-view.tsx +372 -372
- package/src/calendar/calendar-legend.tsx +41 -41
- package/src/calendar/calendar-month-view.tsx +47 -47
- package/src/calendar/calendar-vertical-view.tsx +395 -395
- package/src/calendar/calendar-view-switcher.tsx +65 -65
- package/src/calendar/calendar-week-view.tsx +52 -52
- package/src/calendar/calendar.tsx +74 -74
- package/src/calendar/index.ts +27 -27
- package/src/calendar/styles.ts +367 -367
- package/src/calendar/types.ts +101 -101
- package/src/calendar/use-calendar.ts +170 -170
- package/src/calendar/utils.ts +278 -278
- package/src/card/card-body.tsx +22 -22
- package/src/card/card-footer.tsx +19 -19
- package/src/card/card-header.tsx +22 -22
- package/src/card/card.tsx +27 -27
- package/src/card/index.ts +13 -13
- package/src/card/styles.ts +54 -54
- package/src/card/types.ts +31 -31
- package/src/carousel/carousel.tsx +436 -436
- package/src/carousel/index.ts +2 -2
- package/src/carousel/styles.ts +21 -21
- package/src/carousel/types.ts +41 -41
- package/src/center/center.tsx +19 -19
- package/src/center/index.ts +2 -2
- package/src/center/styles.ts +6 -6
- package/src/center/types.ts +6 -6
- package/src/checkbox/checkbox-group.tsx +63 -63
- package/src/checkbox/checkbox-icon.tsx +35 -35
- package/src/checkbox/checkbox-indicator.tsx +30 -30
- package/src/checkbox/checkbox-label.tsx +24 -24
- package/src/checkbox/checkbox.tsx +86 -86
- package/src/checkbox/index.ts +14 -14
- package/src/checkbox/styles.ts +69 -69
- package/src/checkbox/types.ts +55 -55
- package/src/circular-progress/circular-progress.tsx +82 -82
- package/src/circular-progress/index.ts +2 -2
- package/src/circular-progress/styles.ts +31 -31
- package/src/circular-progress/types.ts +18 -18
- package/src/code/code.tsx +36 -36
- package/src/code/index.ts +2 -2
- package/src/code/styles.ts +25 -25
- package/src/code/types.ts +13 -13
- package/src/collapsible/collapsible.tsx +58 -58
- package/src/collapsible/index.ts +2 -2
- package/src/collapsible/styles.ts +5 -5
- package/src/collapsible/types.ts +21 -21
- package/src/color-picker/color-picker-box.tsx +115 -115
- package/src/color-picker/color-picker-slider.tsx +98 -98
- package/src/color-picker/color-picker.tsx +162 -162
- package/src/color-picker/color-utils.ts +215 -215
- package/src/color-picker/index.ts +34 -34
- package/src/color-picker/styles.ts +32 -32
- package/src/color-picker/types.ts +49 -49
- package/src/color-picker/use-pointer-drag.ts +80 -80
- package/src/container/container.tsx +19 -19
- package/src/container/index.ts +2 -2
- package/src/container/styles.ts +21 -21
- package/src/container/types.ts +10 -10
- package/src/date-picker/date-picker.tsx +136 -136
- package/src/date-picker/index.ts +15 -15
- package/src/date-picker/styles.ts +18 -18
- package/src/date-picker/types.ts +33 -33
- package/src/divider/divider.tsx +21 -21
- package/src/divider/index.ts +2 -2
- package/src/divider/styles.ts +14 -14
- package/src/divider/types.ts +7 -7
- package/src/drawer/drawer-backdrop.tsx +23 -23
- package/src/drawer/drawer-body.tsx +19 -19
- package/src/drawer/drawer-close-button.tsx +29 -29
- package/src/drawer/drawer-content.tsx +142 -142
- package/src/drawer/drawer-footer.tsx +19 -19
- package/src/drawer/drawer-header.tsx +19 -19
- package/src/drawer/drawer.tsx +54 -54
- package/src/drawer/index.ts +22 -22
- package/src/drawer/styles.ts +36 -36
- package/src/drawer/types.ts +62 -62
- package/src/empty/empty.tsx +53 -53
- package/src/empty/index.ts +2 -2
- package/src/empty/styles.ts +26 -26
- package/src/empty/types.ts +22 -22
- package/src/fab/fab-icon.tsx +20 -20
- package/src/fab/fab-label.tsx +22 -22
- package/src/fab/fab.tsx +45 -45
- package/src/fab/index.ts +11 -11
- package/src/fab/styles.ts +57 -57
- package/src/fab/types.ts +33 -33
- package/src/form-control/form-control-error-icon.tsx +25 -25
- package/src/form-control/form-control-error-message.tsx +40 -40
- package/src/form-control/form-control-helper-text.tsx +25 -25
- package/src/form-control/form-control-label-text.tsx +25 -25
- package/src/form-control/form-control-label.tsx +36 -36
- package/src/form-control/form-control.tsx +46 -46
- package/src/form-control/index.ts +20 -20
- package/src/form-control/styles.ts +105 -105
- package/src/form-control/types.ts +45 -45
- package/src/heading/heading.tsx +21 -21
- package/src/heading/index.ts +2 -2
- package/src/heading/styles.ts +24 -24
- package/src/heading/types.ts +19 -19
- package/src/icon/icon.tsx +21 -21
- package/src/icon/index.ts +2 -2
- package/src/icon/styles.ts +18 -18
- package/src/icon/types.ts +8 -8
- package/src/icon-button/icon-button.tsx +23 -23
- package/src/icon-button/index.ts +2 -2
- package/src/icon-button/styles.ts +78 -78
- package/src/icon-button/types.ts +15 -15
- package/src/image/image.tsx +20 -20
- package/src/image/index.ts +2 -2
- package/src/image/styles.ts +28 -28
- package/src/image/types.ts +11 -11
- package/src/index.ts +1039 -1039
- package/src/input/index.ts +13 -13
- package/src/input/input-field.tsx +35 -35
- package/src/input/input-icon.tsx +25 -25
- package/src/input/input-slot.tsx +24 -24
- package/src/input/input.tsx +73 -73
- package/src/input/styles.ts +90 -90
- package/src/input/types.ts +39 -39
- package/src/kbd/index.ts +2 -2
- package/src/kbd/kbd.tsx +21 -21
- package/src/kbd/styles.ts +11 -11
- package/src/kbd/types.ts +7 -7
- package/src/link/index.ts +4 -4
- package/src/link/link-text.tsx +19 -19
- package/src/link/link.tsx +31 -31
- package/src/link/styles.ts +19 -19
- package/src/link/types.ts +13 -13
- package/src/list/index.ts +2 -2
- package/src/list/list.tsx +55 -55
- package/src/list/styles.ts +8 -8
- package/src/list/types.ts +17 -17
- package/src/menu/index.ts +2 -2
- package/src/menu/menu.tsx +99 -99
- package/src/menu/styles.ts +14 -14
- package/src/menu/types.ts +30 -30
- package/src/modal/index.ts +18 -18
- package/src/modal/modal-backdrop.tsx +23 -23
- package/src/modal/modal-body.tsx +19 -19
- package/src/modal/modal-close-button.tsx +29 -29
- package/src/modal/modal-content.tsx +22 -22
- package/src/modal/modal-footer.tsx +19 -19
- package/src/modal/modal-header.tsx +19 -19
- package/src/modal/modal.tsx +50 -50
- package/src/modal/styles.ts +37 -37
- package/src/modal/types.ts +49 -49
- package/src/nativewind-env.d.ts +1 -1
- package/src/number-input/index.ts +18 -18
- package/src/number-input/number-input.tsx +161 -161
- package/src/number-input/styles.ts +35 -35
- package/src/number-input/types.ts +44 -44
- package/src/overlay/index.ts +2 -2
- package/src/overlay/overlay.tsx +21 -21
- package/src/overlay/styles.ts +6 -6
- package/src/overlay/types.ts +7 -7
- package/src/pagination/index.ts +2 -2
- package/src/pagination/pagination.tsx +58 -58
- package/src/pagination/styles.ts +27 -27
- package/src/pagination/types.ts +19 -19
- package/src/password-input/index.ts +14 -14
- package/src/password-input/password-input.tsx +79 -79
- package/src/password-input/styles.ts +25 -25
- package/src/password-input/types.ts +24 -24
- package/src/pin-input/index.ts +12 -12
- package/src/pin-input/pin-input.tsx +96 -96
- package/src/pin-input/styles.ts +16 -16
- package/src/pin-input/types.ts +26 -26
- package/src/popover/index.ts +2 -2
- package/src/popover/popover.tsx +98 -98
- package/src/popover/styles.ts +31 -31
- package/src/popover/types.ts +46 -46
- package/src/portal/index.ts +2 -2
- package/src/portal/portal.tsx +8 -8
- package/src/portal/styles.ts +2 -2
- package/src/portal/types.ts +3 -3
- package/src/pressable/index.ts +2 -2
- package/src/pressable/pressable.tsx +20 -20
- package/src/pressable/styles.ts +10 -10
- package/src/pressable/types.ts +6 -6
- package/src/progress/index.ts +9 -9
- package/src/progress/progress-filled-track.tsx +26 -26
- package/src/progress/progress.tsx +52 -52
- package/src/progress/styles.ts +34 -34
- package/src/progress/types.ts +28 -28
- package/src/radio/index.ts +14 -14
- package/src/radio/radio-group.tsx +61 -61
- package/src/radio/radio-icon.tsx +24 -24
- package/src/radio/radio-indicator.tsx +30 -30
- package/src/radio/radio-label.tsx +24 -24
- package/src/radio/radio.tsx +68 -68
- package/src/radio/styles.ts +69 -69
- package/src/radio/types.ts +51 -51
- package/src/rating/index.ts +7 -7
- package/src/rating/rating.tsx +93 -93
- package/src/rating/styles.ts +13 -13
- package/src/rating/types.ts +29 -29
- package/src/search-input/index.ts +16 -16
- package/src/search-input/search-input.tsx +119 -119
- package/src/search-input/styles.ts +28 -28
- package/src/search-input/types.ts +31 -31
- package/src/segmented-control/index.ts +2 -2
- package/src/segmented-control/segmented-control.tsx +34 -34
- package/src/segmented-control/styles.ts +22 -22
- package/src/segmented-control/types.ts +22 -22
- package/src/select/index.ts +28 -28
- package/src/select/select-backdrop.tsx +25 -25
- package/src/select/select-content.tsx +49 -49
- package/src/select/select-drag-indicator.tsx +19 -19
- package/src/select/select-icon.tsx +25 -25
- package/src/select/select-input.tsx +32 -32
- package/src/select/select-item-text.tsx +30 -30
- package/src/select/select-item.tsx +72 -72
- package/src/select/select-portal.tsx +22 -22
- package/src/select/select-scroll-view.tsx +22 -22
- package/src/select/select-trigger.tsx +64 -64
- package/src/select/select.tsx +101 -101
- package/src/select/styles.ts +114 -114
- package/src/select/types.ts +92 -92
- package/src/skeleton/index.ts +2 -2
- package/src/skeleton/skeleton.tsx +29 -29
- package/src/skeleton/styles.ts +14 -14
- package/src/skeleton/types.ts +12 -12
- package/src/slider/index.ts +12 -12
- package/src/slider/slider-filled-track.tsx +31 -31
- package/src/slider/slider-thumb.tsx +52 -52
- package/src/slider/slider-track.tsx +154 -154
- package/src/slider/slider.tsx +193 -193
- package/src/slider/styles.ts +71 -71
- package/src/slider/types.ts +47 -47
- package/src/snackbar/index.ts +2 -2
- package/src/snackbar/snackbar.tsx +39 -39
- package/src/snackbar/styles.ts +29 -29
- package/src/snackbar/types.ts +21 -21
- package/src/spinner/index.ts +2 -2
- package/src/spinner/spinner.tsx +29 -29
- package/src/spinner/styles.ts +15 -15
- package/src/spinner/types.ts +10 -10
- package/src/stack/index.ts +2 -2
- package/src/stack/stack.tsx +49 -49
- package/src/stack/styles.ts +25 -25
- package/src/stack/types.ts +15 -15
- package/src/stat/index.ts +2 -2
- package/src/stat/stat.tsx +48 -48
- package/src/stat/styles.ts +34 -34
- package/src/stat/types.ts +24 -24
- package/src/stepper/index.ts +2 -2
- package/src/stepper/stepper.tsx +95 -95
- package/src/stepper/styles.ts +49 -49
- package/src/stepper/types.ts +20 -20
- package/src/switch/index.ts +2 -2
- package/src/switch/styles.ts +24 -24
- package/src/switch/switch.tsx +67 -67
- package/src/switch/types.ts +23 -23
- package/src/table/index.ts +2 -2
- package/src/table/styles.ts +12 -12
- package/src/table/table.tsx +52 -52
- package/src/table/types.ts +10 -10
- package/src/tabs/index.ts +18 -18
- package/src/tabs/styles.ts +113 -113
- package/src/tabs/tab-list.tsx +29 -29
- package/src/tabs/tab-panel.tsx +29 -29
- package/src/tabs/tab-panels.tsx +21 -21
- package/src/tabs/tab-text.tsx +26 -26
- package/src/tabs/tab.tsx +56 -56
- package/src/tabs/tabs.tsx +71 -71
- package/src/tabs/types.ts +53 -53
- package/src/tag/index.ts +14 -14
- package/src/tag/styles.ts +115 -115
- package/src/tag/tag-close-button.tsx +26 -26
- package/src/tag/tag-icon.tsx +20 -20
- package/src/tag/tag-text.tsx +22 -22
- package/src/tag/tag.tsx +40 -40
- package/src/tag/types.ts +33 -33
- package/src/tags-input/index.ts +18 -18
- package/src/tags-input/styles.ts +29 -29
- package/src/tags-input/tags-input.tsx +149 -149
- package/src/tags-input/types.ts +37 -37
- package/src/text/index.ts +2 -2
- package/src/text/styles.ts +54 -54
- package/src/text/text.tsx +51 -51
- package/src/text/types.ts +36 -36
- package/src/textarea/index.ts +2 -2
- package/src/textarea/styles.ts +37 -37
- package/src/textarea/textarea.tsx +68 -68
- package/src/textarea/types.ts +14 -14
- package/src/timeline/index.ts +2 -2
- package/src/timeline/styles.ts +57 -57
- package/src/timeline/timeline.tsx +52 -52
- package/src/timeline/types.ts +30 -30
- package/src/toast/index.ts +17 -17
- package/src/toast/styles.ts +118 -118
- package/src/toast/toast-description.tsx +22 -22
- package/src/toast/toast-provider.tsx +136 -136
- package/src/toast/toast-title.tsx +22 -22
- package/src/toast/toast.tsx +43 -43
- package/src/toast/types.ts +50 -50
- package/src/toast/use-toast.ts +7 -7
- package/src/toggle/index.ts +2 -2
- package/src/toggle/styles.ts +30 -30
- package/src/toggle/toggle.tsx +25 -25
- package/src/toggle/types.ts +15 -15
- package/src/toggle-group/index.ts +2 -2
- package/src/toggle-group/styles.ts +35 -35
- package/src/toggle-group/toggle-group.tsx +60 -60
- package/src/toggle-group/types.ts +29 -29
- package/src/tooltip/index.ts +11 -11
- package/src/tooltip/styles.ts +9 -9
- package/src/tooltip/tooltip-content.tsx +19 -19
- package/src/tooltip/tooltip-text.tsx +19 -19
- package/src/tooltip/tooltip.tsx +116 -116
- package/src/tooltip/types.ts +35 -35
- package/src/utils/brand.ts +5 -5
- package/src/utils/create-context.ts +17 -17
- package/src/utils/index.ts +8 -8
- package/src/utils/types.ts +20 -20
- package/src/visually-hidden/index.ts +2 -2
- package/src/visually-hidden/styles.ts +6 -6
- package/src/visually-hidden/types.ts +6 -6
- package/src/visually-hidden/visually-hidden.tsx +22 -22
- package/tailwind-preset.js +212 -203
package/src/accordion/styles.ts
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
import { tv } from 'tailwind-variants';
|
|
2
|
-
|
|
3
|
-
export const accordionStyle = tv({
|
|
4
|
-
base: 'w-full',
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
export const accordionItemStyle = tv({
|
|
8
|
-
base: 'border-b border-outline-200',
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
filled: 'bg-background-50 rounded-lg mb-2 border-0 overflow-hidden',
|
|
12
|
-
unfilled: '',
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
defaultVariants: {
|
|
16
|
-
variant: 'unfilled',
|
|
17
|
-
},
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
export const accordionTriggerStyle = tv({
|
|
21
|
-
base: 'flex-row items-center justify-between w-full active:bg-background-100',
|
|
22
|
-
variants: {
|
|
23
|
-
size: {
|
|
24
|
-
sm: 'px-3 py-2',
|
|
25
|
-
md: 'px-4 py-3',
|
|
26
|
-
lg: 'px-5 py-4',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
defaultVariants: {
|
|
30
|
-
size: 'md',
|
|
31
|
-
},
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export const accordionTitleTextStyle = tv({
|
|
35
|
-
base: 'text-typography-900 font-medium flex-1',
|
|
36
|
-
variants: {
|
|
37
|
-
size: {
|
|
38
|
-
sm: 'text-sm',
|
|
39
|
-
md: 'text-base',
|
|
40
|
-
lg: 'text-lg',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
defaultVariants: {
|
|
44
|
-
size: 'md',
|
|
45
|
-
},
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
export const accordionIconStyle = tv({
|
|
49
|
-
base: 'text-typography-500',
|
|
50
|
-
variants: {
|
|
51
|
-
size: {
|
|
52
|
-
sm: 'h-4 w-4',
|
|
53
|
-
md: 'h-5 w-5',
|
|
54
|
-
lg: 'h-5 w-5',
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
|
-
defaultVariants: {
|
|
58
|
-
size: 'md',
|
|
59
|
-
},
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
export const accordionContentStyle = tv({
|
|
63
|
-
base: 'overflow-hidden',
|
|
64
|
-
variants: {
|
|
65
|
-
size: {
|
|
66
|
-
sm: 'px-3 pb-2',
|
|
67
|
-
md: 'px-4 pb-3',
|
|
68
|
-
lg: 'px-5 pb-4',
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
defaultVariants: {
|
|
72
|
-
size: 'md',
|
|
73
|
-
},
|
|
74
|
-
});
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
|
+
|
|
3
|
+
export const accordionStyle = tv({
|
|
4
|
+
base: 'w-full',
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
export const accordionItemStyle = tv({
|
|
8
|
+
base: 'border-b border-outline-200',
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
filled: 'bg-background-50 rounded-lg mb-2 border-0 overflow-hidden',
|
|
12
|
+
unfilled: '',
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: 'unfilled',
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export const accordionTriggerStyle = tv({
|
|
21
|
+
base: 'flex-row items-center justify-between w-full active:bg-background-100',
|
|
22
|
+
variants: {
|
|
23
|
+
size: {
|
|
24
|
+
sm: 'px-3 py-2',
|
|
25
|
+
md: 'px-4 py-3',
|
|
26
|
+
lg: 'px-5 py-4',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
size: 'md',
|
|
31
|
+
},
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
export const accordionTitleTextStyle = tv({
|
|
35
|
+
base: 'text-typography-900 font-medium flex-1',
|
|
36
|
+
variants: {
|
|
37
|
+
size: {
|
|
38
|
+
sm: 'text-sm',
|
|
39
|
+
md: 'text-base',
|
|
40
|
+
lg: 'text-lg',
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: {
|
|
44
|
+
size: 'md',
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
export const accordionIconStyle = tv({
|
|
49
|
+
base: 'text-typography-500',
|
|
50
|
+
variants: {
|
|
51
|
+
size: {
|
|
52
|
+
sm: 'h-4 w-4',
|
|
53
|
+
md: 'h-5 w-5',
|
|
54
|
+
lg: 'h-5 w-5',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
defaultVariants: {
|
|
58
|
+
size: 'md',
|
|
59
|
+
},
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
export const accordionContentStyle = tv({
|
|
63
|
+
base: 'overflow-hidden',
|
|
64
|
+
variants: {
|
|
65
|
+
size: {
|
|
66
|
+
sm: 'px-3 pb-2',
|
|
67
|
+
md: 'px-4 pb-3',
|
|
68
|
+
lg: 'px-5 pb-4',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
size: 'md',
|
|
73
|
+
},
|
|
74
|
+
});
|
package/src/accordion/types.ts
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
import type { View, Pressable, Text as RNText } from 'react-native';
|
|
2
|
-
|
|
3
|
-
export type AccordionType = 'single' | 'multiple';
|
|
4
|
-
export type AccordionVariant = 'filled' | 'unfilled';
|
|
5
|
-
export type AccordionSize = 'sm' | 'md' | 'lg';
|
|
6
|
-
|
|
7
|
-
export interface AccordionContextValue {
|
|
8
|
-
expandedItems: string[];
|
|
9
|
-
toggleItem: (value: string) => void;
|
|
10
|
-
type: AccordionType;
|
|
11
|
-
isCollapsible: boolean;
|
|
12
|
-
variant: AccordionVariant;
|
|
13
|
-
size: AccordionSize;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export interface AccordionItemContextValue {
|
|
17
|
-
value: string;
|
|
18
|
-
isExpanded: boolean;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export interface AccordionProps
|
|
22
|
-
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
23
|
-
className?: string;
|
|
24
|
-
type?: AccordionType;
|
|
25
|
-
defaultValue?: string[];
|
|
26
|
-
value?: string[];
|
|
27
|
-
onValueChange?: (value: string[]) => void;
|
|
28
|
-
isCollapsible?: boolean;
|
|
29
|
-
variant?: AccordionVariant;
|
|
30
|
-
size?: AccordionSize;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export interface AccordionItemProps
|
|
34
|
-
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
35
|
-
className?: string;
|
|
36
|
-
value: string;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export interface AccordionTriggerProps
|
|
40
|
-
extends React.ComponentPropsWithoutRef<typeof Pressable> {
|
|
41
|
-
className?: string;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export interface AccordionContentProps
|
|
45
|
-
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
46
|
-
className?: string;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export interface AccordionIconProps {
|
|
50
|
-
className?: string;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export interface AccordionTitleTextProps
|
|
54
|
-
extends React.ComponentPropsWithoutRef<typeof RNText> {
|
|
55
|
-
className?: string;
|
|
56
|
-
}
|
|
1
|
+
import type { View, Pressable, Text as RNText } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export type AccordionType = 'single' | 'multiple';
|
|
4
|
+
export type AccordionVariant = 'filled' | 'unfilled';
|
|
5
|
+
export type AccordionSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
|
|
7
|
+
export interface AccordionContextValue {
|
|
8
|
+
expandedItems: string[];
|
|
9
|
+
toggleItem: (value: string) => void;
|
|
10
|
+
type: AccordionType;
|
|
11
|
+
isCollapsible: boolean;
|
|
12
|
+
variant: AccordionVariant;
|
|
13
|
+
size: AccordionSize;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface AccordionItemContextValue {
|
|
17
|
+
value: string;
|
|
18
|
+
isExpanded: boolean;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface AccordionProps
|
|
22
|
+
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
23
|
+
className?: string;
|
|
24
|
+
type?: AccordionType;
|
|
25
|
+
defaultValue?: string[];
|
|
26
|
+
value?: string[];
|
|
27
|
+
onValueChange?: (value: string[]) => void;
|
|
28
|
+
isCollapsible?: boolean;
|
|
29
|
+
variant?: AccordionVariant;
|
|
30
|
+
size?: AccordionSize;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface AccordionItemProps
|
|
34
|
+
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
35
|
+
className?: string;
|
|
36
|
+
value: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface AccordionTriggerProps
|
|
40
|
+
extends React.ComponentPropsWithoutRef<typeof Pressable> {
|
|
41
|
+
className?: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export interface AccordionContentProps
|
|
45
|
+
extends React.ComponentPropsWithoutRef<typeof View> {
|
|
46
|
+
className?: string;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export interface AccordionIconProps {
|
|
50
|
+
className?: string;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export interface AccordionTitleTextProps
|
|
54
|
+
extends React.ComponentPropsWithoutRef<typeof RNText> {
|
|
55
|
+
className?: string;
|
|
56
|
+
}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Pressable } from 'react-native';
|
|
3
|
-
import { useActionSheetContext } from './actionsheet';
|
|
4
|
-
import type { ActionSheetBackdropProps } from './types';
|
|
5
|
-
import { actionsheetBackdropStyle } from './styles';
|
|
6
|
-
|
|
7
|
-
export const ActionSheetBackdrop = React.forwardRef<
|
|
8
|
-
React.ElementRef<typeof Pressable>,
|
|
9
|
-
ActionSheetBackdropProps
|
|
10
|
-
>(({ className, ...props }, ref) => {
|
|
11
|
-
const { onClose } = useActionSheetContext();
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<Pressable
|
|
15
|
-
ref={ref}
|
|
16
|
-
onPress={onClose}
|
|
17
|
-
className={actionsheetBackdropStyle({ class: className })}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
);
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
ActionSheetBackdrop.displayName = 'ActionSheetBackdrop';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pressable } from 'react-native';
|
|
3
|
+
import { useActionSheetContext } from './actionsheet';
|
|
4
|
+
import type { ActionSheetBackdropProps } from './types';
|
|
5
|
+
import { actionsheetBackdropStyle } from './styles';
|
|
6
|
+
|
|
7
|
+
export const ActionSheetBackdrop = React.forwardRef<
|
|
8
|
+
React.ElementRef<typeof Pressable>,
|
|
9
|
+
ActionSheetBackdropProps
|
|
10
|
+
>(({ className, ...props }, ref) => {
|
|
11
|
+
const { onClose } = useActionSheetContext();
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<Pressable
|
|
15
|
+
ref={ref}
|
|
16
|
+
onPress={onClose}
|
|
17
|
+
className={actionsheetBackdropStyle({ class: className })}
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
ActionSheetBackdrop.displayName = 'ActionSheetBackdrop';
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import type { ActionSheetContentProps } from './types';
|
|
4
|
-
import { actionsheetContentStyle } from './styles';
|
|
5
|
-
|
|
6
|
-
export const ActionSheetContent = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof View>,
|
|
8
|
-
ActionSheetContentProps
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<View
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={actionsheetContentStyle({ class: className })}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
ActionSheetContent.displayName = 'ActionSheetContent';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import type { ActionSheetContentProps } from './types';
|
|
4
|
+
import { actionsheetContentStyle } from './styles';
|
|
5
|
+
|
|
6
|
+
export const ActionSheetContent = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof View>,
|
|
8
|
+
ActionSheetContentProps
|
|
9
|
+
>(({ className, ...props }, ref) => {
|
|
10
|
+
return (
|
|
11
|
+
<View
|
|
12
|
+
ref={ref}
|
|
13
|
+
className={actionsheetContentStyle({ class: className })}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
ActionSheetContent.displayName = 'ActionSheetContent';
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import type { ActionSheetDragIndicatorWrapperProps } from './types';
|
|
4
|
-
import { actionsheetDragIndicatorWrapperStyle } from './styles';
|
|
5
|
-
|
|
6
|
-
export const ActionSheetDragIndicatorWrapper = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof View>,
|
|
8
|
-
ActionSheetDragIndicatorWrapperProps
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<View
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={actionsheetDragIndicatorWrapperStyle({ class: className })}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
ActionSheetDragIndicatorWrapper.displayName = 'ActionSheetDragIndicatorWrapper';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import type { ActionSheetDragIndicatorWrapperProps } from './types';
|
|
4
|
+
import { actionsheetDragIndicatorWrapperStyle } from './styles';
|
|
5
|
+
|
|
6
|
+
export const ActionSheetDragIndicatorWrapper = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof View>,
|
|
8
|
+
ActionSheetDragIndicatorWrapperProps
|
|
9
|
+
>(({ className, ...props }, ref) => {
|
|
10
|
+
return (
|
|
11
|
+
<View
|
|
12
|
+
ref={ref}
|
|
13
|
+
className={actionsheetDragIndicatorWrapperStyle({ class: className })}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
ActionSheetDragIndicatorWrapper.displayName = 'ActionSheetDragIndicatorWrapper';
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import type { ActionSheetDragIndicatorProps } from './types';
|
|
4
|
-
import { actionsheetDragIndicatorStyle } from './styles';
|
|
5
|
-
|
|
6
|
-
export const ActionSheetDragIndicator = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof View>,
|
|
8
|
-
ActionSheetDragIndicatorProps
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<View
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={actionsheetDragIndicatorStyle({ class: className })}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
ActionSheetDragIndicator.displayName = 'ActionSheetDragIndicator';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import type { ActionSheetDragIndicatorProps } from './types';
|
|
4
|
+
import { actionsheetDragIndicatorStyle } from './styles';
|
|
5
|
+
|
|
6
|
+
export const ActionSheetDragIndicator = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof View>,
|
|
8
|
+
ActionSheetDragIndicatorProps
|
|
9
|
+
>(({ className, ...props }, ref) => {
|
|
10
|
+
return (
|
|
11
|
+
<View
|
|
12
|
+
ref={ref}
|
|
13
|
+
className={actionsheetDragIndicatorStyle({ class: className })}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
ActionSheetDragIndicator.displayName = 'ActionSheetDragIndicator';
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Text } from 'react-native';
|
|
3
|
-
import type { ActionSheetItemTextProps } from './types';
|
|
4
|
-
import { actionsheetItemTextStyle } from './styles';
|
|
5
|
-
|
|
6
|
-
export const ActionSheetItemText = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof Text>,
|
|
8
|
-
ActionSheetItemTextProps
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<Text
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={actionsheetItemTextStyle({ class: className })}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
ActionSheetItemText.displayName = 'ActionSheetItemText';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Text } from 'react-native';
|
|
3
|
+
import type { ActionSheetItemTextProps } from './types';
|
|
4
|
+
import { actionsheetItemTextStyle } from './styles';
|
|
5
|
+
|
|
6
|
+
export const ActionSheetItemText = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof Text>,
|
|
8
|
+
ActionSheetItemTextProps
|
|
9
|
+
>(({ className, ...props }, ref) => {
|
|
10
|
+
return (
|
|
11
|
+
<Text
|
|
12
|
+
ref={ref}
|
|
13
|
+
className={actionsheetItemTextStyle({ class: className })}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
ActionSheetItemText.displayName = 'ActionSheetItemText';
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Pressable } from 'react-native';
|
|
3
|
-
import type { ActionSheetItemProps } from './types';
|
|
4
|
-
import { actionsheetItemStyle } from './styles';
|
|
5
|
-
|
|
6
|
-
export const ActionSheetItem = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof Pressable>,
|
|
8
|
-
ActionSheetItemProps
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<Pressable
|
|
12
|
-
ref={ref}
|
|
13
|
-
role="menuitem"
|
|
14
|
-
className={actionsheetItemStyle({ class: className })}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
);
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
ActionSheetItem.displayName = 'ActionSheetItem';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Pressable } from 'react-native';
|
|
3
|
+
import type { ActionSheetItemProps } from './types';
|
|
4
|
+
import { actionsheetItemStyle } from './styles';
|
|
5
|
+
|
|
6
|
+
export const ActionSheetItem = React.forwardRef<
|
|
7
|
+
React.ElementRef<typeof Pressable>,
|
|
8
|
+
ActionSheetItemProps
|
|
9
|
+
>(({ className, ...props }, ref) => {
|
|
10
|
+
return (
|
|
11
|
+
<Pressable
|
|
12
|
+
ref={ref}
|
|
13
|
+
role="menuitem"
|
|
14
|
+
className={actionsheetItemStyle({ class: className })}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
);
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
ActionSheetItem.displayName = 'ActionSheetItem';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ScrollView } from 'react-native';
|
|
3
|
-
import type { ActionSheetScrollViewProps } from './types';
|
|
4
|
-
|
|
5
|
-
export const ActionSheetScrollView = React.forwardRef<
|
|
6
|
-
React.ElementRef<typeof ScrollView>,
|
|
7
|
-
ActionSheetScrollViewProps
|
|
8
|
-
>(({ className, ...props }, ref) => {
|
|
9
|
-
return <ScrollView ref={ref} className={className} {...props} />;
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
ActionSheetScrollView.displayName = 'ActionSheetScrollView';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScrollView } from 'react-native';
|
|
3
|
+
import type { ActionSheetScrollViewProps } from './types';
|
|
4
|
+
|
|
5
|
+
export const ActionSheetScrollView = React.forwardRef<
|
|
6
|
+
React.ElementRef<typeof ScrollView>,
|
|
7
|
+
ActionSheetScrollViewProps
|
|
8
|
+
>(({ className, ...props }, ref) => {
|
|
9
|
+
return <ScrollView ref={ref} className={className} {...props} />;
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
ActionSheetScrollView.displayName = 'ActionSheetScrollView';
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Modal as RNModal, View } from 'react-native';
|
|
3
|
-
import { createComponentContext } from '../utils/create-context';
|
|
4
|
-
import type { ActionSheetProps, ActionSheetContextValue } from './types';
|
|
5
|
-
|
|
6
|
-
export const [ActionSheetProvider, useActionSheetContext] =
|
|
7
|
-
createComponentContext<ActionSheetContextValue>('ActionSheet');
|
|
8
|
-
|
|
9
|
-
export const ActionSheet: React.FC<ActionSheetProps> = ({
|
|
10
|
-
isOpen,
|
|
11
|
-
onClose,
|
|
12
|
-
isModal = true,
|
|
13
|
-
children,
|
|
14
|
-
}) => {
|
|
15
|
-
if (isModal) {
|
|
16
|
-
return (
|
|
17
|
-
<ActionSheetProvider value={{ isOpen, onClose }}>
|
|
18
|
-
<RNModal
|
|
19
|
-
visible={isOpen}
|
|
20
|
-
transparent
|
|
21
|
-
animationType="slide"
|
|
22
|
-
onRequestClose={onClose}
|
|
23
|
-
statusBarTranslucent
|
|
24
|
-
>
|
|
25
|
-
<View style={{ flex: 1, justifyContent: 'flex-end' }} pointerEvents="box-none">{children}</View>
|
|
26
|
-
</RNModal>
|
|
27
|
-
</ActionSheetProvider>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
if (!isOpen) return null;
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<ActionSheetProvider value={{ isOpen, onClose }}>
|
|
35
|
-
<View
|
|
36
|
-
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50, justifyContent: 'flex-end' }}
|
|
37
|
-
pointerEvents="box-none"
|
|
38
|
-
>
|
|
39
|
-
{children}
|
|
40
|
-
</View>
|
|
41
|
-
</ActionSheetProvider>
|
|
42
|
-
);
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
ActionSheet.displayName = 'ActionSheet';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Modal as RNModal, View } from 'react-native';
|
|
3
|
+
import { createComponentContext } from '../utils/create-context';
|
|
4
|
+
import type { ActionSheetProps, ActionSheetContextValue } from './types';
|
|
5
|
+
|
|
6
|
+
export const [ActionSheetProvider, useActionSheetContext] =
|
|
7
|
+
createComponentContext<ActionSheetContextValue>('ActionSheet');
|
|
8
|
+
|
|
9
|
+
export const ActionSheet: React.FC<ActionSheetProps> = ({
|
|
10
|
+
isOpen,
|
|
11
|
+
onClose,
|
|
12
|
+
isModal = true,
|
|
13
|
+
children,
|
|
14
|
+
}) => {
|
|
15
|
+
if (isModal) {
|
|
16
|
+
return (
|
|
17
|
+
<ActionSheetProvider value={{ isOpen, onClose }}>
|
|
18
|
+
<RNModal
|
|
19
|
+
visible={isOpen}
|
|
20
|
+
transparent
|
|
21
|
+
animationType="slide"
|
|
22
|
+
onRequestClose={onClose}
|
|
23
|
+
statusBarTranslucent
|
|
24
|
+
>
|
|
25
|
+
<View style={{ flex: 1, justifyContent: 'flex-end' }} pointerEvents="box-none">{children}</View>
|
|
26
|
+
</RNModal>
|
|
27
|
+
</ActionSheetProvider>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (!isOpen) return null;
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<ActionSheetProvider value={{ isOpen, onClose }}>
|
|
35
|
+
<View
|
|
36
|
+
style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50, justifyContent: 'flex-end' }}
|
|
37
|
+
pointerEvents="box-none"
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
</View>
|
|
41
|
+
</ActionSheetProvider>
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
ActionSheet.displayName = 'ActionSheet';
|
package/src/actionsheet/index.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export { ActionSheet } from './actionsheet';
|
|
2
|
-
export { ActionSheetBackdrop } from './actionsheet-backdrop';
|
|
3
|
-
export { ActionSheetContent } from './actionsheet-content';
|
|
4
|
-
export { ActionSheetDragIndicator } from './actionsheet-drag-indicator';
|
|
5
|
-
export { ActionSheetDragIndicatorWrapper } from './actionsheet-drag-indicator-wrapper';
|
|
6
|
-
export { ActionSheetItem } from './actionsheet-item';
|
|
7
|
-
export { ActionSheetItemText } from './actionsheet-item-text';
|
|
8
|
-
export { ActionSheetScrollView } from './actionsheet-scroll-view';
|
|
9
|
-
|
|
10
|
-
export type {
|
|
11
|
-
ActionSheetProps,
|
|
12
|
-
ActionSheetBackdropProps,
|
|
13
|
-
ActionSheetContentProps,
|
|
14
|
-
ActionSheetDragIndicatorProps,
|
|
15
|
-
ActionSheetDragIndicatorWrapperProps,
|
|
16
|
-
ActionSheetItemProps,
|
|
17
|
-
ActionSheetItemTextProps,
|
|
18
|
-
ActionSheetScrollViewProps,
|
|
19
|
-
ActionSheetContextValue,
|
|
20
|
-
} from './types';
|
|
1
|
+
export { ActionSheet } from './actionsheet';
|
|
2
|
+
export { ActionSheetBackdrop } from './actionsheet-backdrop';
|
|
3
|
+
export { ActionSheetContent } from './actionsheet-content';
|
|
4
|
+
export { ActionSheetDragIndicator } from './actionsheet-drag-indicator';
|
|
5
|
+
export { ActionSheetDragIndicatorWrapper } from './actionsheet-drag-indicator-wrapper';
|
|
6
|
+
export { ActionSheetItem } from './actionsheet-item';
|
|
7
|
+
export { ActionSheetItemText } from './actionsheet-item-text';
|
|
8
|
+
export { ActionSheetScrollView } from './actionsheet-scroll-view';
|
|
9
|
+
|
|
10
|
+
export type {
|
|
11
|
+
ActionSheetProps,
|
|
12
|
+
ActionSheetBackdropProps,
|
|
13
|
+
ActionSheetContentProps,
|
|
14
|
+
ActionSheetDragIndicatorProps,
|
|
15
|
+
ActionSheetDragIndicatorWrapperProps,
|
|
16
|
+
ActionSheetItemProps,
|
|
17
|
+
ActionSheetItemTextProps,
|
|
18
|
+
ActionSheetScrollViewProps,
|
|
19
|
+
ActionSheetContextValue,
|
|
20
|
+
} from './types';
|