@webority/mobile-ui 0.96.0 → 0.99.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/dist/canvas-kit/kit.js +6773 -6594
- package/dist/canvas-kit/manifest.json +20 -2
- package/dist/canvas-kit/release.json +6 -6
- package/lib/commonjs/canvasKit/index.js +1 -1
- package/lib/commonjs/components/AppBar/AppBar.js +1 -1
- package/lib/commonjs/components/Avatar/Avatar.js +1 -1
- package/lib/commonjs/components/Banner/Banner.js +1 -1
- package/lib/commonjs/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Calendar/Calendar.js +1 -1
- package/lib/commonjs/components/Checkbox/Checkbox.js +1 -1
- package/lib/commonjs/components/Chip/Chip.js +1 -1
- package/lib/commonjs/components/DatePicker/DatePicker.js +1 -1
- package/lib/commonjs/components/FilePicker/FilePicker.js +1 -1
- package/lib/commonjs/components/IconButton/IconButton.js +1 -1
- package/lib/commonjs/components/ImageGallery/ImageGallery.js +1 -1
- package/lib/commonjs/components/InlineSelect/InlineSelect.js +1 -1
- package/lib/commonjs/components/Input/Input.js +1 -1
- package/lib/commonjs/components/KeyboardToolbar/KeyboardToolbar.js +1 -1
- package/lib/commonjs/components/MessageList/MessageList.js +1 -1
- package/lib/commonjs/components/Modal/Modal.js +1 -1
- package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
- package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
- package/lib/commonjs/components/Radio/Radio.js +1 -1
- package/lib/commonjs/components/Rating/Rating.js +1 -1
- package/lib/commonjs/components/RichTextEditor/RichTextEditor.js +1 -1
- package/lib/commonjs/components/SearchBar/SearchBar.js +1 -1
- package/lib/commonjs/components/SliderField/SliderField.js +1 -1
- package/lib/commonjs/components/Stepper/Stepper.js +1 -1
- package/lib/commonjs/components/Swipeable/Swipeable.js +1 -1
- package/lib/commonjs/components/Switch/Switch.js +1 -1
- package/lib/commonjs/components/Text/Text.js +1 -1
- package/lib/commonjs/components/Toast/Toast.js +1 -1
- package/lib/commonjs/form/path.js +1 -1
- package/lib/commonjs/index.js +1 -1
- package/lib/commonjs/theme/index.js +1 -1
- package/lib/commonjs/utils/announce.js +1 -1
- package/lib/module/canvasKit/index.js +1 -1
- package/lib/module/components/AppBar/AppBar.js +1 -1
- package/lib/module/components/Avatar/Avatar.js +1 -1
- package/lib/module/components/Banner/Banner.js +1 -1
- package/lib/module/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/module/components/Button/Button.js +1 -1
- package/lib/module/components/Calendar/Calendar.js +1 -1
- package/lib/module/components/Checkbox/Checkbox.js +1 -1
- package/lib/module/components/Chip/Chip.js +1 -1
- package/lib/module/components/DatePicker/DatePicker.js +1 -1
- package/lib/module/components/FilePicker/FilePicker.js +1 -1
- package/lib/module/components/IconButton/IconButton.js +1 -1
- package/lib/module/components/ImageGallery/ImageGallery.js +1 -1
- package/lib/module/components/InlineSelect/InlineSelect.js +1 -1
- package/lib/module/components/Input/Input.js +1 -1
- package/lib/module/components/KeyboardToolbar/KeyboardToolbar.js +1 -1
- package/lib/module/components/MessageList/MessageList.js +1 -1
- package/lib/module/components/Modal/Modal.js +1 -1
- package/lib/module/components/OTPInput/OTPInput.js +1 -1
- package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
- package/lib/module/components/Radio/Radio.js +1 -1
- package/lib/module/components/Rating/Rating.js +1 -1
- package/lib/module/components/RichTextEditor/RichTextEditor.js +1 -1
- package/lib/module/components/SearchBar/SearchBar.js +1 -1
- package/lib/module/components/SliderField/SliderField.js +1 -1
- package/lib/module/components/Stepper/Stepper.js +1 -1
- package/lib/module/components/Swipeable/Swipeable.js +1 -1
- package/lib/module/components/Switch/Switch.js +1 -1
- package/lib/module/components/Text/Text.js +1 -1
- package/lib/module/components/Toast/Toast.js +1 -1
- package/lib/module/form/path.js +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/theme/index.js +1 -1
- package/lib/module/utils/announce.js +1 -1
- package/lib/typescript/commonjs/canvasKit/index.d.ts +20 -3
- package/lib/typescript/commonjs/components/AppBar/AppBar.d.ts +1 -0
- package/lib/typescript/commonjs/components/Button/Button.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Card/Card.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Checkbox/Checkbox.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/DecimalInput/DecimalInput.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Input/Input.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Radio/Radio.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/SearchBar/SearchBar.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Switch/Switch.meta.d.ts +1 -1
- package/lib/typescript/commonjs/components/Text/Text.meta.d.ts +1 -1
- package/lib/typescript/commonjs/index.d.ts +2 -3
- package/lib/typescript/commonjs/theme/index.d.ts +0 -20
- package/lib/typescript/module/canvasKit/index.d.ts +20 -3
- package/lib/typescript/module/components/AppBar/AppBar.d.ts +1 -0
- package/lib/typescript/module/components/Button/Button.meta.d.ts +1 -1
- package/lib/typescript/module/components/Card/Card.meta.d.ts +1 -1
- package/lib/typescript/module/components/Checkbox/Checkbox.meta.d.ts +1 -1
- package/lib/typescript/module/components/DecimalInput/DecimalInput.meta.d.ts +1 -1
- package/lib/typescript/module/components/Input/Input.meta.d.ts +1 -1
- package/lib/typescript/module/components/Radio/Radio.meta.d.ts +1 -1
- package/lib/typescript/module/components/SearchBar/SearchBar.meta.d.ts +1 -1
- package/lib/typescript/module/components/Switch/Switch.meta.d.ts +1 -1
- package/lib/typescript/module/components/Text/Text.meta.d.ts +1 -1
- package/lib/typescript/module/index.d.ts +2 -3
- package/lib/typescript/module/theme/index.d.ts +0 -20
- package/package.json +7 -7
- package/lib/commonjs/initUI.js +0 -1
- package/lib/module/initUI.js +0 -1
- package/lib/typescript/commonjs/initUI.d.ts +0 -12
- package/lib/typescript/module/initUI.d.ts +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{createElement}from"react";import{StyleSheet,View}from"react-native";import{useKeyboardState}from"react-native-keyboard-controller";import{darkTheme,lightTheme}from"../theme/index.js";const
|
|
1
|
+
"use strict";import{createElement}from"react";import{StyleSheet,Text,View}from"react-native";import{useKeyboardState}from"react-native-keyboard-controller";import{darkTheme,fontFor,lightTheme}from"../theme/index.js";export const PHONE_CHROME_INSETS={Ios:{top:54,bottom:34},Android:{top:24,bottom:0}};const HOME_BAR_WIDTH=134,HOME_BAR_HEIGHT=5,NAV_BAR_HEIGHT=24,NAV_PILL_WIDTH=108,NAV_PILL_HEIGHT=4,KEYBOARD_HEIGHT_IOS=336,KEYBOARD_HEIGHT_ANDROID=300,SIGNAL_MAX=4,SIGNAL_BAR_WIDTH=3,SIGNAL_BAR_HEIGHTS=[4,6,8,10],BATTERY_FULL=100,BATTERY_WIDTH=24,BATTERY_HEIGHT=12,BATTERY_BORDER=1,BATTERY_INSET=1,BATTERY_CAP_WIDTH=2,BATTERY_CAP_HEIGHT=4,MARKER={statusBar:"AppStatusBar",homeIndicator:"AppHomeIndicator",navigationBar:"AppNavigationBar",safeArea:"AppSafeArea",keyboardFrame:"AppKeyboardFrame"},wuiMarker=e=>({dataSet:{wui:e}}),paletteFor=e=>"dark"===e?darkTheme:lightTheme,finiteOrZero=e=>"number"==typeof e&&Number.isFinite(e)?e:0,styles=StyleSheet.create({overlayTop:{position:"absolute",top:0,left:0,right:0},overlayBottom:{position:"absolute",bottom:0,left:0,right:0,alignItems:"center",justifyContent:"flex-end"},fill:{flex:1},homeBar:{width:134,height:5},navPill:{width:108,height:4},keyboardPreview:{position:"absolute",bottom:0,left:0,right:0},statusRow:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"space-between"},statusGroup:{flexDirection:"row",alignItems:"center"}}),SignalGlyph=({bars:e,theme:t})=>createElement(View,{testID:"status-bar-signal",style:{flexDirection:"row",alignItems:"flex-end",columnGap:t.space.xxs}},SIGNAL_BAR_HEIGHTS.map((o,r)=>createElement(View,{key:r,style:{width:3,height:o,borderRadius:t.space.xxs/2,backgroundColor:r<e?t.colors["text-body"]:t.colors["text-disabled"]}}))),BatteryGlyph=({level:e,theme:t})=>{const o=Math.round(20*e/100);return createElement(View,{testID:"status-bar-battery",style:{flexDirection:"row",alignItems:"center"}},createElement(View,{style:{width:24,height:12,borderWidth:1,borderColor:t.colors["text-muted"],borderRadius:t.radius.sm/2,padding:1}},createElement(View,{testID:"status-bar-battery-fill",style:{height:"100%",width:o,backgroundColor:t.colors["text-body"],borderRadius:t.space.xxs/2}})),createElement(View,{style:{width:2,height:4,marginLeft:1,backgroundColor:t.colors["text-muted"],borderTopRightRadius:t.space.xxs/2,borderBottomRightRadius:t.space.xxs/2}}))};export const StatusBar=({os:e,colorMode:t="light",time:o,signal:r,battery:a})=>{const i=paletteFor(t),s={...wuiMarker(MARKER.statusBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayTop,{height:PHONE_CHROME_INSETS[e].top}]};if("string"!=typeof o&&"number"!=typeof r&&"number"!=typeof a)return createElement(View,s);const n="Ios"===e,l="string"==typeof o?createElement(Text,{numberOfLines:1,allowFontScaling:!1,style:{color:i.colors["text-body"],fontSize:n?i.text.base.size:i.text.sm.size,...fontFor(i,n?"semibold":"medium")}},o):createElement(View),c=createElement(View,{style:[styles.statusGroup,{columnGap:i.space.xs}]},"number"==typeof r?createElement(SignalGlyph,{bars:Math.min(4,Math.max(0,Math.round(finiteOrZero(r)))),theme:i}):null,"number"==typeof a?createElement(BatteryGlyph,{level:Math.min(100,Math.max(0,finiteOrZero(a))),theme:i}):null);return createElement(View,s,createElement(View,{style:[styles.statusRow,{paddingHorizontal:n?i.space["2xl"]:i.space.lg}]},l,c))};export const HomeIndicator=({os:e,colorMode:t="light"})=>{const o=paletteFor(t);return createElement(View,{...wuiMarker(MARKER.homeIndicator),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:PHONE_CHROME_INSETS[e].bottom}]},"Ios"===e?createElement(View,{style:[styles.homeBar,{backgroundColor:o.colors["text-body"],borderRadius:o.radius.pill,marginBottom:o.space.sm}]}):null)};export const NavigationBar=({os:e,colorMode:t="light"})=>{if("Android"!==e)return null;const o=paletteFor(t);return createElement(View,{...wuiMarker(MARKER.navigationBar),accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:[styles.overlayBottom,{height:24,justifyContent:"center"}]},createElement(View,{style:[styles.navPill,{backgroundColor:o.colors["text-body"],borderRadius:o.radius.pill}]}))};export const SafeArea=({os:e,children:t})=>createElement(View,{...wuiMarker(MARKER.safeArea),style:[styles.fill,{paddingBottom:PHONE_CHROME_INSETS[e].bottom}]},t);const KEYBOARD_PREVIEW_HEIGHT={ios:336,android:300};export const KeyboardFrame=({colorMode:e="light",previewOs:t,children:o})=>{const r=paletteFor(e),a=useKeyboardState(e=>Math.max(0,Math.round(e.height)));return createElement(View,{...wuiMarker(MARKER.keyboardFrame),style:[styles.fill,{paddingBottom:a,backgroundColor:r.colors.bg}]},o,t?createElement(View,{pointerEvents:"none",style:[styles.keyboardPreview,{height:KEYBOARD_PREVIEW_HEIGHT[t],backgroundColor:r.colors.bg}]}):null)};const SOURCE="@webority/mobile-ui",osProp={name:"os",type:"enum",enum:["Ios","Android"],required:!0},colorModeProp={name:"colorMode",type:"enum",enum:["light","dark"],required:!1},timeProp={name:"time",type:"string",required:!1,description:"The clock as shown, such as 9:41."},signalProp={name:"signal",type:"number",required:!1,description:"Signal strength in bars, 0 to 4."},batteryProp={name:"battery",type:"number",required:!1,description:"Battery level in percent, 0 to 100."};export const phoneChromeEntries=[{name:"StatusBar",marker:MARKER.statusBar,acceptsChildren:!1,props:[osProp,colorModeProp,timeProp,signalProp,batteryProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"HomeIndicator",marker:MARKER.homeIndicator,acceptsChildren:!1,props:[osProp,colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"NavigationBar",marker:MARKER.navigationBar,acceptsChildren:!1,props:[osProp,colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"SafeArea",marker:MARKER.safeArea,acceptsChildren:!0,props:[osProp],itemsTakeAction:[],takesAction:[],source:SOURCE},{name:"KeyboardFrame",marker:MARKER.keyboardFrame,acceptsChildren:!0,props:[colorModeProp],itemsTakeAction:[],takesAction:[],source:SOURCE}];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4,variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:e,side:t,badgeStyle:i,haptic:n,flush:o})=>{const l=useTheme(),{style:s,pressIn:r,pressOut:a}=usePressAnimation({enabled:!0}),c=useMemo(()=>buildActionStyles(l),[l]),d=e.badge,u=void 0!==d&&0!==d,p=void 0!==e.text;return _jsx(Animated.View,{style:s,children:_jsxs(Pressable,{onPress:()=>{const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),e.onPress()},onPressIn:r,onPressOut:a,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.text,testID:e.testID,android_ripple:{color:l.colors["surface-pressed"],borderless:!p},style:({pressed:e})=>[p?c.textButton:c.actionButton,o?null:"left"===t?c.actionLeft:c.actionRight,e&&!p?c.actionPressed:null,e&&p?c.textPressed:null],children:[p?_jsx(Text,{style:c.actionText,numberOfLines:1,children:e.text}):_jsx(View,{style:c.iconWrap,children:e.icon}),u?_jsx(View,{style:[c.badge,i],pointerEvents:"none",children:_jsx(Text,{style:c.badgeText,numberOfLines:1,children:String(d)})}):null,e.dot?_jsx(View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((e,t)=>{const{title:i,subtitle:n,titleAlignment:o="left",leftAction:l,rightActions:s,leading:r,trailing:a,onBack:c,gutter:d,titleVariant:u,titleOffset:p,height:m,divider:g,variant:h="default",transparent:x=!1,scrollY:f,style:b,containerStyle:y,titleStyle:S,subtitleStyle:A,badgeStyle:j,haptic:_,testID:w}=e,T=useTheme(),B=useSafeAreaInsets(),I=useMemo(()=>variantSize(T,h),[T,h]),C=useMemo(()=>buildStyles(T),[T]),R="large"===h&&void 0!==f,
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const ACTION_BUTTON_SIZE=44,DOT_OFFSET=10,DOT_SIZE=8,BADGE_OFFSET=4,variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1};case"large":return{height:96,titleSize:e.text["2xl"].size,titleWeight:"bold",alignBottom:!0,subtitleLines:2};default:return{height:56,titleSize:e.text.lg.size,titleWeight:"semibold",alignBottom:!1,subtitleLines:1}}},ActionButton=({action:e,side:t,badgeStyle:i,haptic:n,flush:o})=>{const l=useTheme(),{style:s,pressIn:r,pressOut:a}=usePressAnimation({enabled:!0}),c=useMemo(()=>buildActionStyles(l),[l]),d=e.badge,u=void 0!==d&&0!==d,p=void 0!==e.text;return _jsx(Animated.View,{style:s,children:_jsxs(Pressable,{onPress:()=>{const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),e.onPress()},onPressIn:r,onPressOut:a,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.text,testID:e.testID,android_ripple:{color:l.colors["surface-pressed"],borderless:!p},style:({pressed:e})=>[p?c.textButton:c.actionButton,o?null:"left"===t?c.actionLeft:c.actionRight,e&&!p?c.actionPressed:null,e&&p?c.textPressed:null],children:[p?_jsx(Text,{style:c.actionText,numberOfLines:1,children:e.text}):_jsx(View,{style:c.iconWrap,children:e.icon}),u?_jsx(View,{style:[c.badge,i],pointerEvents:"none",children:_jsx(Text,{style:c.badgeText,numberOfLines:1,children:String(d)})}):null,e.dot?_jsx(View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((e,t)=>{const{title:i,subtitle:n,titleAlignment:o="left",leftAction:l,rightActions:s,leading:r,trailing:a,onBack:c,gutter:d,titleVariant:u,titleOffset:p,height:m,divider:g,variant:h="default",transparent:x=!1,scrollY:f,style:b,containerStyle:y,titleStyle:S,subtitleStyle:A,badgeStyle:j,haptic:_,testID:w}=e,T=useTheme(),B=useSafeAreaInsets(),I=useMemo(()=>variantSize(T,h),[T,h]),C=useMemo(()=>buildStyles(T),[T]),R="large"===h&&void 0!==f,L=l??(c?{icon:_jsx(AppIcon,{name:"arrow-left",size:24,color:T.colors["text-body"]}),onPress:c,accessibilityLabel:"Back"}:void 0),v=a?void 0:s?.[s.length-1],opticalInset=e=>void 0===e?0:void 0!==e.text?T.space.sm:Math.max(10,0),z=void 0===d?null:{paddingLeft:Math.max(d-opticalInset(L),0),paddingRight:Math.max(d-opticalInset(v),0)},V=void 0!==p,O=Boolean(L)||Boolean(r),W=g??!x,P=StyleSheet.hairlineWidth,D=useMemo(()=>{if(!f)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:f.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:f.interpolate({...e,outputRange:[0,-20]}),titleTranslateX:f.interpolate({...e,outputRange:"center"===o?[0,0]:[0,8]}),subtitleOpacity:f.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:f.interpolate({...e,outputRange:[96,56]}),borderOpacity:f.interpolate({...e,outputRange:[0,1]})}},[f,o]),E=R&&D?{transform:[{translateX:D.titleTranslateX},{translateY:D.titleTranslateY},{scale:D.titleScale}]}:null,H=i?u?_jsx(Animated.View,{style:E,children:_jsx(ThemedText,{variant:u,align:"center"===o?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[C.titleVariant,S],children:i})}):_jsx(Animated.Text,{accessibilityRole:"header",style:[C.title,{fontSize:I.titleSize,fontWeight:T.weight[I.titleWeight],textAlign:"center"===o?"center":"left"},E,S],numberOfLines:1,children:i}):null,k=n?_jsx(Animated.Text,{style:[C.subtitle,{textAlign:"center"===o?"center":"left"},R&&D?{opacity:D.subtitleOpacity}:null,A],numberOfLines:I.subtitleLines,children:n}):null,M=_jsxs(View,{style:[C.titleColumn,"center"===o?C.titleColumnCenter:null,I.alignBottom?C.titleColumnBottom:null],children:[H,k]}),N=R?Animated.View:View,F=R&&D?{height:Animated.add(D.barHeight,new Animated.Value(B.top))}:{height:(m??I.height)+B.top};return _jsxs(N,{ref:t,testID:w,style:[C.root,{paddingTop:B.top,backgroundColor:x?"transparent":T.colors.surface},F,!R&&W?{borderBottomWidth:P,borderBottomColor:T.colors.border}:null,b,y],children:[R&&D&&W?_jsx(Animated.View,{pointerEvents:"none",style:[C.animatedBorder,{backgroundColor:T.colors.border,opacity:D.borderOpacity}]}):null,_jsxs(View,{style:[C.row,I.alignBottom?C.rowAlignBottom:null,z,{flex:1}],children:[_jsxs(View,{style:[C.sideSlot,V?C.sideSlotCompact:null],children:[L?_jsx(ActionButton,{action:L,side:"left",haptic:_,flush:V}):null,null!=r&&!1!==r?_jsx(View,{style:C.slotNode,children:r}):null]}),_jsx(View,{pointerEvents:"none",style:[C.center,"center"===o?C.centerAligned:C.centerLeft,V?{paddingLeft:O?p:T.space.none,paddingRight:T.space.none}:null],children:M}),_jsxs(View,{style:[C.sideSlot,C.sideSlotRight,V?C.sideSlotCompact:null],children:[s?.map((e,t)=>_jsx(ActionButton,{action:e,side:"right",badgeStyle:j,haptic:_,flush:V},`appbar-right-${t}`)),null!=a&&!1!==a?_jsx(View,{style:C.slotNode,children:a}):null]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.space.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},slotNode:{flexDirection:"row",alignItems:"center"},center:{flex:1,minWidth:0,paddingHorizontal:e.space.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column",maxWidth:"100%"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors["text-body"]},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.space.xxs,color:e.colors["text-subtle"],fontSize:e.text.sm.size,fontWeight:e.weight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:StyleSheet.hairlineWidth}}),buildActionStyles=e=>StyleSheet.create({actionButton:{width:44,height:44,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.space.xs},actionRight:{marginLeft:e.space.xs},actionPressed:{backgroundColor:e.colors["surface-pressed"]},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.space.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},actionText:{color:e.colors.link,fontSize:e.text.base.size,...fontFor(e,"semibold")},dot:{position:"absolute",top:10,right:10,width:8,height:8,borderRadius:e.radius.pill,backgroundColor:e.colors.danger},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:4,right:4,minWidth:16,height:16,paddingHorizontal:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.danger,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors["on-danger"],fontSize:e.text.xs.size,fontWeight:e.weight.semibold,lineHeight:13}});export{AppBar};export default AppBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{Image}from"expo-image";import{Children,cloneElement,forwardRef,isValidElement,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/index.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SOFT_FILL_OPACITY=.14,MIN_TOUCH_TARGET=44,PRESSED_OPACITY=.7,INITIALS_MAX_FONT_SCALE=1.2;export const AVATAR_COLORS=["avatar-1","avatar-2","avatar-3","avatar-4","avatar-5","avatar-6","avatar-7","avatar-8"];export const avatarToneColors=(e,t)=>{const soft=(e,t)=>tintOf(e,.14,t);switch(t){case"primary":return{background:soft(e.colors.primary,e.colors["primary-soft"]),color:e.colors["primary-text"]};case"secondary":return{background:e.colors.neutral,color:e.colors["on-neutral"]};case"success":return{background:soft(e.colors.success,e.colors["bg-subtle"]),color:e.colors["success-text"]};case"warning":return{background:soft(e.colors.warning,e.colors["bg-subtle"]),color:e.colors["warning-text"]};case"danger":return{background:soft(e.colors.danger,e.colors["bg-subtle"]),color:e.colors["danger-text"]};case"info":return{background:soft(e.colors.info,e.colors["bg-subtle"]),color:e.colors["info-text"]};default:return{background:e.colors["bg-muted"],color:e.colors["text-body"]}}};const sizeMap={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=e=>"number"==typeof e?e:sizeMap[e],resolveRadius=(e,t,r)=>{switch(t){case"circle":return r/2;case"rounded":return Math.max(e.radius.sm,Math.round(.22*r));default:return 0}},initialsFromName=e=>{if(!e)return"";const t=e.trim().split(/\s+/u).filter(Boolean);return 0===t.length?"":1===t.length?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()},hashColor=(e,t)=>{if(!e)return t[0];let r=0;for(let t=0;t<e.length;t+=1)r=(r<<5)-r+e.charCodeAt(t),r|=0;return t[Math.abs(r)%t.length]},RING_WIDTH=1.5,isRingStatus=e=>"verified"===e||"pending"===e,statusColor=(e,t)=>{switch(t){case"online":case"verified":return e.colors.success;case"busy":return e.colors.danger;case"away":case"pending":return e.colors.warning;default:return e.colors["text-subtle"]}},Avatar=forwardRef((e,t)=>{const{source:r,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:l="bottomRight",tone:c,backgroundColor:u,color:d,fontSize:m,loading:h=!1,accessibilityLabel:g,onPress:p,onLongPress:b,haptic:
|
|
1
|
+
"use strict";import{Image}from"expo-image";import{Children,cloneElement,forwardRef,isValidElement,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{AppIcon}from"../AppIcon/index.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const SOFT_FILL_OPACITY=.14,MIN_TOUCH_TARGET=44,PRESSED_OPACITY=.7,INITIALS_MAX_FONT_SCALE=1.2;export const AVATAR_COLORS=["avatar-1","avatar-2","avatar-3","avatar-4","avatar-5","avatar-6","avatar-7","avatar-8"];export const avatarToneColors=(e,t)=>{const soft=(e,t)=>tintOf(e,.14,t);switch(t){case"primary":return{background:soft(e.colors.primary,e.colors["primary-soft"]),color:e.colors["primary-text"]};case"secondary":return{background:e.colors.neutral,color:e.colors["on-neutral"]};case"success":return{background:soft(e.colors.success,e.colors["bg-subtle"]),color:e.colors["success-text"]};case"warning":return{background:soft(e.colors.warning,e.colors["bg-subtle"]),color:e.colors["warning-text"]};case"danger":return{background:soft(e.colors.danger,e.colors["bg-subtle"]),color:e.colors["danger-text"]};case"info":return{background:soft(e.colors.info,e.colors["bg-subtle"]),color:e.colors["info-text"]};default:return{background:e.colors["bg-muted"],color:e.colors["text-body"]}}};const sizeMap={xs:24,sm:32,md:48,lg:64,xl:80},resolveSize=e=>"number"==typeof e?e:sizeMap[e],resolveRadius=(e,t,r)=>{switch(t){case"circle":return r/2;case"rounded":return Math.max(e.radius.sm,Math.round(.22*r));default:return 0}},initialsFromName=e=>{if(!e)return"";const t=e.trim().split(/\s+/u).filter(Boolean);return 0===t.length?"":1===t.length?t[0].charAt(0).toUpperCase():(t[0].charAt(0)+t[1].charAt(0)).toUpperCase()},hashColor=(e,t)=>{if(!e)return t[0];let r=0;for(let t=0;t<e.length;t+=1)r=(r<<5)-r+e.charCodeAt(t),r|=0;return t[Math.abs(r)%t.length]},RING_WIDTH=1.5,isRingStatus=e=>"verified"===e||"pending"===e,statusColor=(e,t)=>{switch(t){case"online":case"verified":return e.colors.success;case"busy":return e.colors.danger;case"away":case"pending":return e.colors.warning;default:return e.colors["text-subtle"]}},Avatar=forwardRef((e,t)=>{const{source:r,ImageComponent:o,name:s,size:a="md",shape:i="circle",status:n=null,statusPosition:l="bottomRight",tone:c,backgroundColor:u,color:d,fontSize:m,loading:h=!1,accessibilityLabel:g,onPress:p,onLongPress:b,haptic:f,hitSlop:y,style:v,textStyle:x,testID:A}=e,C=useTheme(),[S,R]=useState(!1),_=useMemo(()=>resolveSize(a),[a]),I=useMemo(()=>resolveRadius(C,i,_),[C,i,_]),w=C.colors.border,j=C.colors.surface,M=useMemo(()=>initialsFromName(s),[s]),T=useMemo(()=>c?avatarToneColors(C,c):null,[C,c]),k=useMemo(()=>u||(T?.background??C.colors[hashColor(s??"",AVATAR_COLORS)]),[u,T,s,C]),E=d??T?.color??C.colors["on-primary"],L=!!r&&!S,z=m??Math.max(C.text.xs.size,Math.round(.4*_)),G=Math.max(8,Math.round(.25*_)),V=isRingStatus(n),F=_-2*(V?3:0),O=V?resolveRadius(C,i,F):I,N=V?statusColor(C,n):"transparent",W=Math.max(12,Math.round(.32*_)),P=Math.max(10,W-4),D=L?C.colors["bg-muted"]:k,$=A??"avatar",H=s?`${s}'s avatar`:"Avatar",B="verified"===n?", verified":"pending"===n?", pending verification":"",U=g??`${H}${B}`,Y="function"==typeof p||"function"==typeof b,X=g??`${s||H}${B}`,q=Math.max(0,Math.ceil((44-_)/2)),J=y??q,K=[styles.root,{width:_,height:_,borderRadius:I,...smoothCorners,borderWidth:0,borderColor:w,backgroundColor:V?"transparent":D},v],Q=_jsxs(_Fragment,{children:[V?_jsx(View,{style:[styles.ring,{borderRadius:I,...smoothCorners,borderWidth:1.5,borderColor:N}],accessible:!1,pointerEvents:"none",testID:`${$}-ring`}):null,_jsx(View,{style:[styles.picture,{width:F,height:F,borderRadius:O,...smoothCorners,borderWidth:0,borderColor:w,backgroundColor:V?D:"transparent"}],children:L?(()=>{const e={width:F,height:F,borderRadius:O,...smoothCorners},onError=()=>R(!0);return o?_jsx(o,{source:r,onError:onError,style:e,contentFit:"cover",resizeMode:"cover",accessibilityIgnoresInvertColors:!0}):_jsx(Image,{source:r,onError:onError,style:e,contentFit:"cover",accessibilityIgnoresInvertColors:!0})})():_jsx(Text,{style:[styles.initials,{color:E,fontSize:z,fontWeight:C.weight.semibold},x],numberOfLines:1,maxFontSizeMultiplier:1.2,children:M??" "})}),"verified"===n?_jsx(View,{style:[styles.status,"topRight"===l?styles.badgeTopRight:styles.badgeBottomRight,{width:W,height:W,borderRadius:W/2,...smoothCorners,backgroundColor:j}],accessible:!1,pointerEvents:"none",testID:`${$}-badge`,children:_jsx(AppIcon,{name:"verify",variant:"bold",size:P,color:N})}):null,n&&!V?_jsx(View,{style:[styles.status,"topRight"===l?styles.statusTopRight:styles.statusBottomRight,{width:G,height:G,borderRadius:G/2,...smoothCorners,backgroundColor:statusColor(C,n),borderWidth:2,borderColor:j}],accessible:!1,pointerEvents:"none"}):null]}),Z=Y?_jsx(Pressable,{ref:t,onPress:p?e=>{const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),p?.(e)}:void 0,onLongPress:b?e=>{const t=resolveHaptic(f,"longPress");t&&triggerHaptic(t),b?.(e)}:void 0,hitSlop:J,...hitSlopMarker(J),accessibilityRole:"button",accessibilityLabel:X,testID:A,style:({pressed:e})=>[K,e?styles.pressed:null],children:Q}):_jsx(View,{ref:t,style:K,accessible:!0,accessibilityRole:"image",accessibilityLabel:U,testID:A,children:Q});return h?_jsx(AvatarSkeleton,{...e}):Z});Avatar.displayName="Avatar";const AvatarSkeleton=({size:e="md",shape:t="circle",style:r})=>{const o=resolveSize(e);return _jsx(Skeleton,{shape:"circle"===t?"circle":"rounded"===t?"rounded":"rect",width:o,height:o,style:r})};AvatarSkeleton.displayName="AvatarSkeleton",Avatar.Skeleton=AvatarSkeleton;const styles=StyleSheet.create({root:{alignItems:"center",justifyContent:"center",overflow:"visible",position:"relative"},pressed:{opacity:.7},initials:{textAlign:"center"},ring:{position:"absolute",top:0,right:0,bottom:0,left:0},picture:{alignItems:"center",justifyContent:"center",overflow:"hidden"},status:{position:"absolute"},badgeTopRight:{top:-2,right:-2,alignItems:"center",justifyContent:"center"},badgeBottomRight:{bottom:-2,right:-2,alignItems:"center",justifyContent:"center"},statusTopRight:{top:0,right:0},statusBottomRight:{bottom:0,right:0}}),SPACING_OFFSET={tight:"lg",normal:"md",loose:"sm"},STAGGER_MS=50,ENTRANCE_DURATION_MS=220,AvatarGroupItem=({delay:e,marginLeft:t,borderColor:r,borderWidth:o,children:s})=>{const a=useTheme(),i=useRef(createAnimatedValue(0)).current;return useEffect(()=>{const t=Animated.timing(i,{toValue:1,duration:220,delay:e,easing:Easing.out(Easing.cubic),useNativeDriver:!0});return t.start(),()=>t.stop()},[e,i]),_jsx(Animated.View,{style:[groupStyles.item,{marginLeft:t,borderRadius:a.radius.pill,borderColor:r,borderWidth:o,opacity:i}],children:s})},AvatarGroup=e=>{const{children:t,max:r=4,size:o="md",spacing:s="normal",overflowVariant:a="count",accessibilityLabel:i,style:n,testID:l}=e,c=useTheme(),u=useMemo(()=>Children.toArray(t).filter(e=>isValidElement(e)),[t]),d=u.length,m=u.slice(0,r),h=Math.max(0,d-r),g=h>0,p=-c.space[SPACING_OFFSET[s]],b=c.colors.surface,f=i??`Group of ${d} ${1===d?"person":"people"}`,y=useMemo(()=>resolveSize(o),[o]),v=Math.max(c.text.xs.size,Math.round(.34*y));return _jsxs(View,{style:[groupStyles.row,n],accessible:!0,accessibilityLabel:f,accessibilityRole:"summary",testID:l,children:[m.map((e,t)=>{const r=e.key??`avatar-${t}`;return _jsx(AvatarGroupItem,{delay:50*t,marginLeft:0===t?0:p,borderColor:b,borderWidth:1.5,children:cloneElement(e,{size:o})},r)}),g?_jsx(AvatarGroupItem,{delay:50*m.length,marginLeft:0===m.length?0:p,borderColor:b,borderWidth:1.5,children:_jsx(View,{style:[groupStyles.overflow,{width:y,height:y,borderRadius:y/2,...smoothCorners,backgroundColor:c.colors["surface-disabled"]}],accessible:!0,accessibilityRole:"text",accessibilityLabel:"count"===a?`${h} more`:"More avatars",children:_jsx(Text,{style:{color:c.colors["text-muted"],fontSize:v,fontWeight:c.weight.semibold},numberOfLines:1,maxFontSizeMultiplier:1.2,children:"count"===a?`+${h}`:"+"})})},"avatar-overflow"):null]})},groupStyles=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},item:{...smoothCorners},overflow:{alignItems:"center",justifyContent:"center"}}),AvatarWithGroup=Avatar;AvatarWithGroup.Group=AvatarGroup;export{Avatar,AvatarGroup};export default AvatarWithGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Banner=forwardRef((e,t)=>{const{title:r,message:o,variant:s="info",icon:n,actions:i,dismissible:l=!1,onDismiss:a,haptic:c,visible:d=!0,animateMount:u=!0,loading:m=!1,accessibilityRole:p="alert",accessibilityLabel:g,style:h,containerStyle:x,iconCircleStyle:y,tintBarStyle:b,closeButtonStyle:f,actionButtonStyle:w,testID:j}=e,S=useTheme(),k=usePresenceMotion(),C=useMemo(()=>buildStyles(S),[S]),B=useMemo(()=>tintFor(S,s),[S,s]),[_,R]=k.range(-20,0),V=useRef(createAnimatedValue(u&&d?_:0)).current,v=useRef(createAnimatedValue(u&&d?0:d?1:0)).current,[z,T]=useState(d),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!u))return;let e;return d?(T(!0),e=Animated.parallel([Animated.timing(V,{toValue:R,duration:S.motion.duration.default,useNativeDriver:!0}),Animated.timing(v,{toValue:1,duration:k.duration("default"),useNativeDriver:!0})]),e.start()):z&&(e=Animated.parallel([Animated.timing(V,{toValue:_,duration:S.motion.duration.fast,useNativeDriver:!0}),Animated.timing(v,{toValue:0,duration:k.duration("fast"),useNativeDriver:!0})]),e.start(()=>{T(!1)})),()=>e?.stop()},[d]),!z)return null;const A=r??" ",D="string"==typeof o?o??" ":"",
|
|
1
|
+
"use strict";import{forwardRef,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Skeleton,SkeletonText}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Banner=forwardRef((e,t)=>{const{title:r,message:o,variant:s="info",icon:n,actions:i,dismissible:l=!1,onDismiss:a,haptic:c,visible:d=!0,animateMount:u=!0,loading:m=!1,accessibilityRole:p="alert",accessibilityLabel:g,style:h,containerStyle:x,iconCircleStyle:y,tintBarStyle:b,closeButtonStyle:f,actionButtonStyle:w,testID:j}=e,S=useTheme(),k=usePresenceMotion(),C=useMemo(()=>buildStyles(S),[S]),B=useMemo(()=>tintFor(S,s),[S,s]),[_,R]=k.range(-20,0),V=useRef(createAnimatedValue(u&&d?_:0)).current,v=useRef(createAnimatedValue(u&&d?0:d?1:0)).current,[z,T]=useState(d),H=useRef(!0);if(useEffect(()=>{if(H.current&&(H.current=!1,!u))return;let e;return d?(T(!0),e=Animated.parallel([Animated.timing(V,{toValue:R,duration:S.motion.duration.default,useNativeDriver:!0}),Animated.timing(v,{toValue:1,duration:k.duration("default"),useNativeDriver:!0})]),e.start()):z&&(e=Animated.parallel([Animated.timing(V,{toValue:_,duration:S.motion.duration.fast,useNativeDriver:!0}),Animated.timing(v,{toValue:0,duration:k.duration("fast"),useNativeDriver:!0})]),e.start(()=>{T(!1)})),()=>e?.stop()},[d]),!z)return null;const A=r??" ",D="string"==typeof o?o??" ":"",M="alert"===p?"danger"===s?"assertive":"polite":"none",L=_jsxs(Animated.View,{ref:t,accessibilityRole:p,accessibilityLiveRegion:M,accessibilityLabel:g,testID:j,style:[C.container,{backgroundColor:S.colors["bg-subtle"],borderRadius:S.radius.md,...smoothCorners,padding:S.space.md,opacity:v,transform:[{translateY:V}]},h,x],children:[S.components.banner["tint-bar-width"]>0?_jsx(View,{style:[C.tintBar,{backgroundColor:B.bar},b]}):null,_jsxs(View,{style:C.row,children:[!1===n?null:_jsx(View,n?{style:C.iconWrap,children:n}:{style:[C.iconCircle,{backgroundColor:`${B.bar}22`},y],children:_jsx(Text,{style:[C.iconGlyph,{color:B.ink}],accessible:!1,children:B.glyph})}),_jsxs(View,{style:C.textBlock,children:[r||m?_jsx(Text,{style:{color:S.colors["text-body"],fontSize:S.text.base.size,...fontFor(S,"semibold"),lineHeight:20},numberOfLines:2,children:A}):null,"string"==typeof o||m?_jsx(Text,{style:{color:S.colors["text-muted"],fontSize:S.text.sm.size,...fontFor(S,"normal"),lineHeight:18,marginTop:r?S.space.xxs:0},children:D||" "}):_jsx(View,{style:{marginTop:r?S.space.xxs:0},children:o})]}),l?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:"Dismiss banner",onPress:()=>{const e=resolveHaptic(c,"selection");e&&triggerHaptic(e),a?.()},hitSlop:8,...hitSlopMarker(8),style:({pressed:e})=>[C.closeBtn,{backgroundColor:e?S.colors["surface-pressed"]:"transparent"},f],children:_jsx(Text,{style:{color:S.colors["text-muted"],fontSize:S.text.lg.size,fontWeight:S.weight.bold,lineHeight:17},accessible:!1,children:"×"})}):null]}),i&&i.length>0?_jsx(View,{style:C.actionsRow,children:i.map((e,t)=>{const r=e.tone??"primary",o=e.variant??"ghost",s="danger"===r?S.colors.danger:"neutral"===r?S.colors["text-muted"]:B.glyphColor,n="danger"===r?S.colors["danger-text"]:"neutral"===r?S.colors["text-muted"]:B.ink,i="danger"===r?S.colors["on-danger"]:"neutral"===r?S.colors["on-neutral-strong"]:B.on,l="solid"===o;return _jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:e.label,onPress:()=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress()},style:({pressed:t})=>[C.actionBtn,"md"===e.size&&C.actionBtnMd,"outline"===o&&{borderWidth:1,borderColor:n},{backgroundColor:l?s:t?S.colors["surface-pressed"]:"transparent",opacity:l&&t?.85:1},w],children:_jsx(Text,{style:{color:l?i:n,fontSize:S.text.sm.size,textAlign:"center",...fontFor(S,"semibold")},children:e.label})},`${e.label}-${t}`)})}):null]});return m?_jsx(BannerSkeleton,{...e}):L});Banner.displayName="Banner";const BannerSkeleton=({title:e,actions:t,icon:r,containerStyle:o,style:s})=>{const n=useTheme(),i=!1!==r;return _jsxs(View,{style:[{flexDirection:"row",alignItems:"flex-start",backgroundColor:n.colors.surface,borderRadius:n.radius.md,...smoothCorners,padding:n.space.md,borderWidth:1,borderColor:n.colors.border},o,s],accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[i?_jsx(View,{style:{marginRight:n.space.sm},children:_jsx(Skeleton,{shape:"circle",width:32,height:32})}):null,_jsxs(View,{style:{flex:1},children:[void 0!==e?_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:n.space.xs}}):null,_jsx(SkeletonText,{lines:2,fontSize:n.text.sm.size,lastLineWidth:"70%"}),t&&t.length>0?_jsx(View,{style:{flexDirection:"row",marginTop:n.space.sm},children:t.map((e,t)=>_jsx(Skeleton,{width:72,height:28,shape:"rounded",style:{marginRight:n.space.sm}},`sk-banner-action-${t}`))}):null]})]})};BannerSkeleton.displayName="BannerSkeleton",Banner.Skeleton=BannerSkeleton;const tintFor=(e,t)=>{switch(t){case"success":return{bar:e.colors.success,glyphColor:e.colors.success,ink:e.colors["success-text"],on:e.colors["on-success"],glyph:"✓"};case"warning":return{bar:e.colors.warning,glyphColor:e.colors.warning,ink:e.colors["warning-text"],on:e.colors["on-warning"],glyph:"⚠"};case"danger":return{bar:e.colors.danger,glyphColor:e.colors.danger,ink:e.colors["danger-text"],on:e.colors["on-danger"],glyph:"✗"};case"neutral":return{bar:e.colors["text-subtle"],glyphColor:e.colors["text-muted"],ink:e.colors["text-muted"],on:e.colors["on-neutral-strong"],glyph:"i"};default:return{bar:e.colors.primary,glyphColor:e.colors.primary,ink:e.colors["primary-text"],on:e.colors["on-primary"],glyph:"i"}}},buildStyles=e=>{const t=e.components.banner,r=e.space.sm;return StyleSheet.create({container:{overflow:"hidden",paddingLeft:e.space.md},tintBar:{position:"absolute",left:0,top:0,bottom:0,width:t["tint-bar-width"]},row:{flexDirection:"row",alignItems:"flex-start"},iconWrap:{marginRight:r},iconCircle:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginRight:r},iconGlyph:{fontSize:e.text.base.size,fontWeight:"700",lineHeight:17},textBlock:{flex:1,paddingRight:e.space.xs},closeBtn:{width:28,height:28,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",marginLeft:e.space.xxs},actionsRow:{flexDirection:"row",flexWrap:"wrap",justifyContent:"flex-end",marginTop:e.space.xs,columnGap:e.space.xs,rowGap:e.space.xs},actionBtn:{paddingHorizontal:e.space.sm,paddingVertical:e.space.xs,borderRadius:e.radius.sm,...smoothCorners,maxWidth:"100%",alignItems:"center",justifyContent:"center"},actionBtnMd:{minHeight:44,paddingHorizontal:e.space.md}})};export{Banner};export default Banner;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:a,haptic:r="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:_="idle",accessory:S,style:w,indicatorStyle:R,labelStyle:I,labelMaxFontScale:E,testID:A}=e,v=useTheme(),C=useSafeAreaInsets(),j=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,M=v.radius.xl,k=useReducedMotion(),B=useScreenReaderEnabled(y),[z,F]=React.useState(null);useEffect(()=>{null!==z&&z!==_&&F(null)},[z,_]);const N=y&&!B&&"down"===_&&null===z,[P,H]=React.useState(N);useEffect(()=>{P!==N&&(k||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),H(N))},[P,N,k]);const W="function"==typeof S?S({minimized:P}):S,O=null!=W&&!1!==W,U=P&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l||Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l||K||J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),ae=n?Math.ceil(i.length/2):i.length,re=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width||de)+2*ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:re>0?te/re:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]||(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]||(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,Se=me>0?(me-48)/2:0,hasLabel=e=>s&&!P&&!1!==e.showLabel&&e.label.trim().length>0,we=i[ee],Re=we&&!hasLabel(we)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ie=Re-14-24,Ee=Math.max(0,ne-4),Ae=Y?2:Re-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const Ce=Math.max(1,i.length-1),je=useMemo(()=>{const e=[],t=[];for(let i=0;i<=Ce;i++)e.push(i),t.push(i<ae?i*me:i*me+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,Ce,ae,me,he]),Te=i.map(e=>e.key).join(" "),Le=q||G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,Me=J?De.primary:De.surface,ke=J?De["on-primary"]:De.primary,Be=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Fe=J?De.primary:q?De["on-primary"]:ke,Ne=h??D,Pe=g??(K?D:0),He=Pe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=He?We:Math.max(We,C.bottom),$e=He?Math.max(Pe,C.bottom>0?C.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2*We+2*StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?M:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height||de)/2+it-ne/2-nt):0,at=n?_jsx(View,{style:[j.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsxs(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??r;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.centerPressable,{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:[n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[j.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})}),(rt=n,s&&!P&&rt.label.trim().length>0?_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,{color:Be,opacity:J?.7:1},I],children:n.label}):null)]})},CENTER_KEY):null;var rt;const st=O?_jsx(View,{style:U?j.accessoryInline:j.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,lt=_jsxs(View,{style:U?[j.tabRow,j.tabRowInline]:j.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y||Ee>0)?_jsx(Animated.View,{pointerEvents:"none",style:[j.pill,{width:xe,height:Y?Ee:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ee,Ee/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:je}]},R]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:Se,top:Ie,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:je}]},R]}):null,(dt=i.map(e=>{const t=e.key===o,i=t?ke:Be,n=t?Fe:Be,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t||J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G||t),f=_jsxs(Animated.View,{style:[j.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?j.badgeDot:j.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[j.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[j.label,G?j.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},I],children:e.label}):null,S=_jsx(Pressable,{onPress:()=>(e=>{P&&F(_),e.key!==o&&!1!==r&&triggerHaptic(r);const t=be.current[e.key];t&&popIcon(t),a(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},style:({pressed:e})=>[j.tab,Y?j.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[j.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[j.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?R:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:S},e.key):S}),at?[...dt.slice(0,ae),at,...dt.slice(ae)]:dt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[j.underline,"top"===d?j.underlineTop:j.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:je}]},R]}):null]});var dt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[j.outer,{paddingHorizontal:Ne,paddingTop:Math.max(Pe,ot),paddingBottom:$e},w],children:_jsxs(View,{style:[K?j.floatingBar:j.dockedBar,U?j.barInline:null,Qe,{backgroundColor:Me,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[st,lt]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerPressable:{alignItems:"center",maxWidth:"100%",gap:e.space.xs},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.size*e.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
|
|
1
|
+
"use strict";import React,{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,LayoutAnimation,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{supportsBoxShadow,toBoxShadow}from"../../utils/shadows.js";import{renderSlotIcon}from"../AppIcon/index.js";import{useScreenReaderEnabled}from"./useScreenReaderEnabled.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_ICON_SIZE=18,DEFAULT_LABEL_MAX_FONT_SCALE=1.2,ICON_WRAP_AIR=4,PILL_AIR=8,DEFAULT_PILL_MAX_WIDTH=64,TILE_MAX_WIDTH=96,DEFAULT_UNDERLINE_HEIGHT=3,DEFAULT_BUBBLE_SIZE=48,DEFAULT_BUBBLE_LIFT=14,DEFAULT_CENTER_SIZE=48,DEFAULT_CENTER_ICON_SIZE=24,CENTER_KEY="__webority_center_action__",EXPANDED_FLEX=1.5,SOLID_INACTIVE_OPACITY=.7,TILE_INSET=2,formatBadge=e=>null==e||!1===e?null:!0===e||"·"===e?{text:"",isDot:!0}:"number"==typeof e?e<=0?null:{text:e>99?"99+":String(e),isDot:!1}:"string"==typeof e?0===e.length?null:{text:e,isDot:!1}:null,badgeAccessibilitySuffix=e=>null==e||!1===e?"":"number"==typeof e?e>0?`, ${e} unread`:"":!0===e||"·"===e?", new updates":"string"==typeof e&&e.length>0?`, ${e}`:"",BottomNavigation=forwardRef((e,t)=>{const{tabs:i,centerAction:n,activeTab:o,onChange:r,haptic:a="selection",showLabels:s=!0,variant:l="pill",indicatorPosition:d="bottom",radius:c,indicatorRadius:u="auto",elevation:p,iconSize:m,marginHorizontal:h,marginVertical:g,paddingHorizontal:b,paddingVertical:f,border:x,minimizeOnScroll:y=!1,scrollDirection:S="idle",accessory:_,style:w,indicatorStyle:R,labelStyle:I,labelMaxFontScale:E,testID:A}=e,v=useTheme(),j=useSafeAreaInsets(),C=useMemo(()=>buildStyles(v),[v]),T=m??18,L=T+4+8,V=v.space.lg,D=v.space.lg,M=v.radius.xl,k=useReducedMotion(),B=useScreenReaderEnabled(y),[z,F]=React.useState(null);useEffect(()=>{null!==z&&z!==S&&F(null)},[z,S]);const N=y&&!B&&"down"===S&&null===z,[P,H]=React.useState(N);useEffect(()=>{P!==N&&(k||"web"===Platform.OS||LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),H(N))},[P,N,k]);const W="function"==typeof _?_({minimized:P}):_,O=null!=W&&!1!==W,U=P&&O,[$,X]=React.useState(0),Z=O&&!U?$+v.space.xs:0,Y="tile"===l,K="floating"===l||Y,q="bubble"===l,G="expand"===l,J="solid"===l,Q="pill"===l||K||J,ee=Math.max(0,i.findIndex(e=>e.key===o)),[te,ie]=React.useState(0),[ne,oe]=React.useState(0),re=n?Math.ceil(i.length/2):i.length,ae=i.length+(n?1:0),[se,le]=React.useState({width:0,height:0}),de=n?.size??48,ce=void 0!==n?.gap,ue=Math.max(0,n?.gap??0),pe=ce?(se.width||de)+2*ue:0,me=ce?i.length>0?Math.max(0,te-pe)/i.length:0:ae>0?te/ae:0,he=ce?pe:me,ge=useRef(createAnimatedValue(ee)).current,be=useRef({}),fe=useRef({});i.forEach(e=>{be.current[e.key]||(be.current[e.key]=new Animated.Value(1)),fe.current[e.key]||(fe.current[e.key]=createAnimatedValue(e.key===o?1:0))});const xe=me>0?Y?Math.min(me-4,96):Math.min(me-V,64):0,ye=me>0?(me-xe)/2:0,Se=me>0?(me-48)/2:0,hasLabel=e=>s&&!P&&!1!==e.showLabel&&e.label.trim().length>0,we=i[ee],Re=we&&!hasLabel(we)&&ne>0?ne/2:v.space.xs+(T+4)/2,Ie=Re-14-24,Ee=Math.max(0,ne-4),Ae=Y?2:Re-L/2,ve=useRef(ee);useEffect(()=>{if(ve.current===ee)return;ve.current=ee;const e=Animated.spring(ge,{toValue:ee,tension:120,friction:14,useNativeDriver:!0});return e.start(),()=>e.stop()},[ee,ge]);const je=Math.max(1,i.length-1),Ce=useMemo(()=>{const e=[],t=[];for(let i=0;i<=je;i++)e.push(i),t.push(i<re?i*me:i*me+he);return ge.interpolate({inputRange:e,outputRange:t})},[ge,je,re,me,he]),Te=i.map(e=>e.key).join(" "),Le=q||G;useEffect(()=>{const e=Te.split(" ").flatMap(e=>{const t=e===o?1:0,i=fe.current[e];return i?Le?[Animated.spring(i,{toValue:t,tension:140,friction:13,useNativeDriver:!1})]:(i.setValue(t),[]):[]});if(0===e.length)return;const t=Animated.parallel(e);return t.start(),()=>t.stop()},[o,Te,Le]);const popIcon=e=>{Animated.sequence([Animated.timing(e,{toValue:1.15,duration:120,useNativeDriver:!0}),Animated.spring(e,{toValue:1,tension:200,friction:8,useNativeDriver:!0})]).start()},Ve=useRef(new Animated.Value(1)).current,{colors:De}=v,Me=J?De.primary:De.surface,ke=J?De["on-primary"]:De.primary,Be=J?De["on-primary"]:Y?De["text-body"]:De["text-subtle"],ze=J?De["on-primary"]:De["primary-soft"],Fe=J?De.primary:q?De["on-primary"]:ke,Ne=h??D,Pe=g??(K?D:0),He=Pe>0,We=f??v.space.sm,Oe=b??(K?v.space.sm:v.space.xs),Ue=He?We:Math.max(We,j.bottom),$e=He?Math.max(Pe,j.bottom>0?j.bottom+v.space.sm:0):0,Xe="pill"===c,Ze=K?ne+Z+2*We+2*StyleSheet.hairlineWidth:ne+Z+We+Ue,Ye=Xe?ne>0?Ze/2:v.radius.pill:c??(Y?v.radius.pill:K?M:v.radius.none),Ke=void 0!==c,activeBgRadius=(e,t)=>"number"==typeof u?Math.max(0,Math.min(u,e/2)):"auto"===u&&Ke?Math.min(Ye,e/2):t,qe="underline"===l?Math.max(Oe,Xe&&0===ne?0:Ye):Oe,Ge=p??"none",Je="none"===Ge?void 0:v.shadow[Ge],Qe=void 0===Je?null:supportsBoxShadow()?{boxShadow:toBoxShadow(Je)}:Je,et=x?StyleSheet.hairlineWidth:0,tt=J?De.primary:De.border,it=n?.lift??0,nt=We+et+Z,ot=n&&ne>0?Math.max(0,(se.height||de)/2+it-ne/2-nt):0,rt=n?_jsx(View,{style:[C.centerCell,ce?{flex:0,marginHorizontal:ue}:null],pointerEvents:"box-none",children:_jsxs(Pressable,{onPress:()=>{if(!n)return;const e=n.haptic??a;!1!==e&&triggerHaptic(e),popIcon(Ve),n.onPress()},onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;le(e=>e.width===t&&e.height===i?e:{width:t,height:i})},accessibilityRole:"button",accessibilityLabel:n.label,hitSlop:{top:6,bottom:6,left:6,right:6},...hitSlopMarker({top:6,bottom:6,left:6,right:6}),style:({pressed:e})=>[C.centerPressable,{top:-it},e?{opacity:.85}:null],testID:n.testID??(A?`${A}-center`:void 0),children:[n.content?_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:n.content}):_jsx(View,{style:[C.centerCircle,{width:de,height:de,borderRadius:v.radius.pill,...smoothCorners,backgroundColor:n.color??De.primary}],children:_jsx(Animated.View,{style:{transform:[{scale:Ve}]},children:renderSlotIcon(n.icon??"add",{color:n.iconColor??De["on-primary"],size:n.iconSize??24,disabled:!1})})}),(at=n,s&&!P&&at.label.trim().length>0?_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[C.label,{color:Be,opacity:J?.7:1},I],children:n.label}):null)]})},CENTER_KEY):null;var at;const st=O?_jsx(View,{style:U?C.accessoryInline:C.accessoryStacked,onLayout:e=>X(e.nativeEvent.layout.height),testID:A?`${A}-accessory`:void 0,children:W}):null,lt=_jsxs(View,{style:U?[C.tabRow,C.tabRowInline]:C.tabRow,onLayout:e=>{const{width:t,height:i}=e.nativeEvent.layout;ie(t),oe(i)},children:[Q&&xe>0&&(!Y||Ee>0)?_jsx(Animated.View,{pointerEvents:"none",style:[C.pill,{width:xe,height:Y?Ee:L,left:ye,top:Ae,backgroundColor:ze,borderRadius:Y?activeBgRadius(Ee,Ee/2):activeBgRadius(L,v.radius.pill),...smoothCorners,transform:[{translateX:Ce}]},R]}):null,q&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[C.bubble,v.shadow.elevated,{width:48,height:48,borderRadius:v.radius.pill,...smoothCorners,left:Se,top:Ie,backgroundColor:De.primary,borderColor:De.surface,transform:[{translateX:Ce}]},R]}):null,(dt=i.map(e=>{const t=e.key===o,i=t?ke:Be,n=t?Fe:Be,s="string"==typeof e.icon?{name:e.icon,variant:"bold"}:e.icon,l=t?e.activeIcon??s:e.icon,d=be.current[e.key],c=fe.current[e.key],u=formatBadge(e.badge??null),p=badgeAccessibilitySuffix(e.badge??null),m=J&&!t?.7:1,h=q&&t||J?De.primary:De.surface,g=hasLabel(e),b=g&&(!G||t),f=_jsxs(Animated.View,{style:[C.iconWrap,{width:T+4,height:T+4,opacity:m,transform:[{scale:d}]}],children:[renderSlotIcon(l,{color:n,size:T,focused:t,disabled:!1}),u?_jsx(View,{style:[u.isDot?C.badgeDot:C.badgePill,{backgroundColor:De.danger,borderColor:h}],children:u.isDot?null:_jsx(Text,{style:[C.badgeText,{color:De["on-danger"]}],numberOfLines:1,children:u.text})}):null]}),x=q?_jsx(Animated.View,{style:{top:c.interpolate({inputRange:[0,1],outputRange:[0,-14]})},children:f}):f,y=b?_jsx(Animated.Text,{numberOfLines:1,maxFontSizeMultiplier:E??v.settings.maxFontSizeMultiplier??1.2,style:[C.label,G?C.labelInline:null,{color:i,opacity:G?c:m,fontWeight:t?v.weight.semibold:v.weight.normal},I],children:e.label}):null,_=_jsx(Pressable,{onPress:()=>(e=>{P&&F(S),e.key!==o&&!1!==a&&triggerHaptic(a);const t=be.current[e.key];t&&popIcon(t),r(e.key)})(e),accessibilityRole:"tab",accessibilityState:{selected:t},"aria-selected":t,accessibilityLabel:`${e.label}${p}`,accessibilityHint:`Switches to ${e.label}`,hitSlop:{top:6,bottom:6,left:6,right:6},...hitSlopMarker({top:6,bottom:6,left:6,right:6}),style:({pressed:e})=>[C.tab,Y?C.tabTile:null,e?{opacity:.85}:null],testID:A?`${A}-tab-${e.key}`:void 0,children:G?_jsxs(View,{style:[C.expandPill,{height:L,paddingHorizontal:t&&g?v.space.md:Math.max(0,(L-(T+4))/2)}],children:[_jsx(View,{pointerEvents:"none",style:[C.expandFill,{borderRadius:activeBgRadius(L,L/2),...smoothCorners,backgroundColor:t?De["primary-soft"]:"transparent"},t?R:null]}),x,y]}):_jsxs(_Fragment,{children:[x,y]})},e.key);return G?_jsx(Animated.View,{style:{flex:c.interpolate({inputRange:[0,1],outputRange:[1,g?1.5:1]})},children:_},e.key):_}),rt?[...dt.slice(0,re),rt,...dt.slice(re)]:dt),"underline"===l&&me>0?_jsx(Animated.View,{pointerEvents:"none",style:[C.underline,"top"===d?C.underlineTop:C.underlineBottom,"top"===d?{top:-We-Z}:{bottom:-We},{width:me,height:3,backgroundColor:De.primary,transform:[{translateX:Ce}]},R]}):null]});var dt;return _jsx(View,{ref:t,testID:A,accessibilityRole:"tablist",style:[C.outer,{paddingHorizontal:Ne,paddingTop:Math.max(Pe,ot),paddingBottom:$e},w],children:_jsxs(View,{style:[K?C.floatingBar:C.dockedBar,U?C.barInline:null,Qe,{backgroundColor:Me,borderColor:tt,borderRadius:Ye,...smoothCorners},K?{borderWidth:et,paddingHorizontal:Oe,paddingVertical:We}:{borderTopWidth:et,borderBottomWidth:et,borderLeftWidth:et,borderRightWidth:et,paddingHorizontal:qe,paddingTop:We,paddingBottom:Ue}],children:[st,lt]})})});BottomNavigation.displayName="BottomNavigation";const buildStyles=e=>StyleSheet.create({outer:{backgroundColor:"transparent"},dockedBar:{paddingHorizontal:e.space.xs},floatingBar:{paddingVertical:e.space.sm,paddingHorizontal:e.space.sm},tabRow:{flexDirection:"row",alignItems:"stretch",position:"relative"},tabRowInline:{flex:1},barInline:{flexDirection:"row",alignItems:"center"},accessoryStacked:{marginBottom:e.space.xs},accessoryInline:{flexShrink:0,marginRight:e.space.xs},tab:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center",paddingVertical:e.space.xs,gap:e.space.xs},tabTile:{paddingVertical:e.space.sm,gap:e.space.xxs},centerCell:{flex:1,minHeight:44,alignItems:"center",justifyContent:"center"},centerPressable:{alignItems:"center",maxWidth:"100%",gap:e.space.xs},centerCircle:{alignItems:"center",justifyContent:"center"},iconWrap:{alignItems:"center",justifyContent:"center",position:"relative"},label:{fontSize:e.text.xs.size,lineHeight:e.text.xs.size*e.leading.heading,textAlign:"center",includeFontPadding:!1},labelInline:{fontSize:e.text.sm.size,lineHeight:e.text.sm.size*e.leading.heading,flexShrink:1,includeFontPadding:!1},expandPill:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:e.space.xs},expandFill:{position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},pill:{position:"absolute",left:0},bubble:{position:"absolute",left:0,borderWidth:3},underline:{position:"absolute",left:0,height:3},underlineBottom:{borderTopLeftRadius:e.radius.none,borderTopRightRadius:e.radius.none,...smoothCorners},underlineTop:{borderBottomLeftRadius:e.radius.none,borderBottomRightRadius:e.radius.none,...smoothCorners},badgePill:{position:"absolute",top:-4,right:-8,minWidth:18,height:18,borderRadius:e.radius.pill,...smoothCorners,paddingHorizontal:e.space.xs,paddingVertical:e.space.xxs,alignItems:"center",justifyContent:"center",borderWidth:1.5},badgeDot:{position:"absolute",top:-2,right:-2,width:10,height:10,borderRadius:e.radius.pill,...smoothCorners,borderWidth:1.5},badgeText:{fontSize:e.text.xs.size,fontWeight:"700",lineHeight:13,textAlign:"center",includeFontPadding:!1}});export{BottomNavigation};export default BottomNavigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,resolveButtonSize,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,t)=>{const{title:
|
|
1
|
+
"use strict";import React,{forwardRef,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,View}from"react-native";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,Gradient,resolveButtonSize,useTheme}from"../../theme/index.js";import{createAnimatedValue}from"../../theme/animatedValue.js";import{ariaFromState}from"../../utils/ariaState.js";import{ACCENT_PRESSED_TINT,tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const Button=forwardRef((e,t)=>{const{title:o,children:r,variant:s="solid",tone:i="primary",size:n="md",loading:l=!1,disabled:a=!1,fullWidth:d=!1,leftIcon:c,rightIcon:u,iconVariant:b,leftIconBadge:g=!1,haptic:p,rounded:h=!1,gradient:m,style:f,containerStyle:x,textStyle:y,pressAnimation:S,onPress:C,accessibilityLabel:_,accessibilityHint:I,accessibilityState:k,testID:w,onLayout:j,...T}=e;if(__DEV__&&hasTextChild(r))throw new Error('[@webority/mobile-ui] Button was given its label as text children. Pass it as `title` (<Button title="Save" />): text children draw a blank button with no accessible name.');const F=useTheme(),v=!a&&!l,L={...k,disabled:!v,busy:l},R="link"===s,O=S??(!R&&"scale"),P=usePressAnimation({preset:O||"scale",enabled:!1!==O&&v}),A=useFlickGuard(),W=useMemo(()=>buildStyles(F),[F]),V=useMemo(()=>resolveButtonSize(F,n),[F,n]),E=useMemo(()=>toneFor(F,i),[F,i]),z=useMemo(()=>variantFor(F,s,E,a),[F,s,E,a]),B=useMemo(()=>!m||a||"solid"!==s?null:"string"==typeof m?F.settings.gradients[m]??null:m,[m,a,s,F.settings.gradients]),D=StyleSheet.flatten(f)?.borderRadius,H=R?0:"number"==typeof D?D:h?F.radius.pill:V.radius,N=useSquircle(!B&&"link"!==s,H,j),M=useRef(createAnimatedValue(0)).current,[q,G]=useState(0),[K,U]=useState(null),X=R?e=>G(e.nativeEvent.layout.width):void 0,Y=_??o,J="outline"===s||"ghost"===s,Q=!J&&!R,Z={color:z.textColor,size:V.icon,disabled:a},$=g&&!R&&Boolean(c),ee=F.space.xs,te=V["min-height"]-2*ee-2*z.borderWidth,oe={color:z.badgeInk,size:V["badge-icon"],disabled:a},re=l?_jsx(Spinner,{variant:"circular",size:"sm",color:$?z.badgeInk:z.textColor,accessibilityLabel:"Loading"}):c?renderSlotIcon(c,$?oe:Z,b):null,se=_jsxs(View,{style:W.contentRow,children:[$?_jsx(View,{testID:"button-icon-badge",style:[W.iconLeft,W.iconBadge,{width:te,height:te,borderRadius:te/2,backgroundColor:z.badgeFill}],children:re}):re?_jsx(View,{style:W.iconLeft,children:re}):null,o?_jsxs(View,{onLayout:X,children:[_jsx(Text,{style:[W.label,{color:z.textColor,fontSize:V.text,...fontFor(F,"semibold")},y],numberOfLines:1,children:o}),R?_jsx(Animated.View,{pointerEvents:"none",testID:"button-link-underline",style:[W.linkUnderline,{backgroundColor:z.textColor,transform:[{translateX:M.interpolate({inputRange:[0,1],outputRange:[-q/2,0]})},{scaleX:M.interpolate({inputRange:[0,1],outputRange:[0,1]})}]}]}):null]}):r,u?_jsx(View,{style:W.iconRight,children:renderSlotIcon(u,Z,b)}):null]}),ie=R?null===K?LINK_HIT_SLOP:Math.max(LINK_HIT_SLOP,touchSlopFor(K)):touchSlopFor(V["min-height"]),ne={top:ie,bottom:ie,left:R?LINK_HIT_SLOP:0,right:R?LINK_HIT_SLOP:0};return _jsx(Animated.View,{style:[P.style,d?W.fullWidth:null,x],children:_jsx(Pressable,{ref:t,onPress:e=>{v&&!A.isFlick(e)&&(P.press(),p&&triggerHaptic(p),C?.(e))},onPressIn:e=>{A.onPressIn(e),P.pressIn(),R&&v&&(M.stopAnimation(),M.setValue(0),Animated.timing(M,{toValue:1,duration:F.motion.duration.slower,easing:Easing.bezier(...F.motion.ease.decelerate),useNativeDriver:!0}).start())},onPressOut:()=>{P.pressOut()},disabled:!v,hitSlop:ne,...hitSlopMarker(ne),accessibilityRole:"button",accessibilityLabel:Y,accessibilityHint:I,accessibilityState:L,...ariaFromState(L),testID:w,onLayout:e=>{N.onLayout(e),R&&U(e.nativeEvent.layout.height)},style:({pressed:e})=>[W.base,{paddingHorizontal:R?0:V["padding-x"],paddingVertical:R?0:$?ee:V["padding-y"],paddingLeft:$?ee:void 0,minHeight:R?void 0:V["min-height"],borderRadius:H,...smoothCorners,backgroundColor:B||N.active?"transparent":z.backgroundColor,borderWidth:z.borderWidth,borderColor:N.active?"transparent":z.borderColor,opacity:l?.55:1,overflow:N.active||R?"visible":"hidden"},e&&J&&!N.active?{backgroundColor:F.colors["surface-pressed"]}:null,d?W.fullWidth:null,f],...T,"aria-disabled":!v,"aria-busy":l,children:({pressed:e})=>_jsxs(_Fragment,{children:[N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:H,fill:e&&J?F.colors["surface-pressed"]:z.backgroundColor,stroke:z.borderColor,strokeWidth:z.borderWidth,outset:z.borderWidth}):null,B?_jsx(Gradient,{gradient:B,style:[StyleSheet.absoluteFill,{borderRadius:H,...smoothCorners}]}):null,e&&Q?N.active&&N.size?_jsx(SquircleFill,{width:N.size.width,height:N.size.height,radius:H,fill:z.pressedTint,outset:z.borderWidth,testID:"button-pressed"}):_jsx(View,{pointerEvents:"none",style:[W.pressedOverlay,{borderRadius:H,backgroundColor:z.pressedTint,...smoothCorners}],testID:"button-pressed"}):null,se]})})})});Button.displayName="Button";const hasTextChild=e=>React.Children.toArray(e).some(e=>"string"==typeof e||"number"==typeof e),SOFT_FILL_OPACITY=.14,toneFor=(e,t)=>{switch(t){case"primary":return{base:e.colors.primary,outline:e.colors.primary,on:e.colors["on-primary"],fg:e.colors["primary-text"],soft:tintOf(e.colors.primary,.14,e.colors["primary-soft"])};case"secondary":return{base:e.colors.neutral,outline:e.colors.border,on:e.colors["on-neutral"],fg:e.colors["on-neutral"],soft:e.colors.neutral};case"success":return{base:e.colors.success,outline:e.colors.success,on:e.colors["on-success"],fg:e.colors["success-text"],soft:tintOf(e.colors.success,.14,e.colors["bg-subtle"])};case"warning":return{base:e.colors.warning,outline:e.colors.warning,on:e.colors["on-warning"],fg:e.colors["warning-text"],soft:tintOf(e.colors.warning,.14,e.colors["bg-subtle"])};case"danger":return{base:e.colors.danger,outline:e.colors.danger,on:e.colors["on-danger"],fg:e.colors["danger-text"],soft:tintOf(e.colors.danger,.14,e.colors["bg-subtle"])};default:return{base:e.colors["bg-muted"],outline:e.colors.border,on:e.colors["text-body"],fg:e.colors["text-body"],soft:e.colors["bg-subtle"]}}},BUTTON_BORDER_WIDTH=1,MIN_TOUCH_TARGET=44,LINK_HIT_SLOP=8,touchSlopFor=e=>Math.max(0,Math.ceil((44-e)/2)),variantFor=(e,t,o,r)=>{const s=r?e.colors["text-disabled"]:o.fg,i={badgeFill:e.colors["surface-disabled"],badgeInk:e.colors["text-disabled"]},n=r?i:{badgeFill:o.on,badgeInk:o.base},l=r?i:{badgeFill:o.base,badgeInk:o.on};switch(t){case"solid":return{backgroundColor:r?e.colors["surface-disabled"]:o.base,borderColor:"transparent",borderWidth:1,textColor:r?e.colors["text-disabled"]:o.on,pressedTint:e.colors["surface-pressed"],...n};case"soft":return{backgroundColor:r?e.colors["surface-disabled"]:o.soft,borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"outline":return{backgroundColor:"transparent",borderColor:r?e.colors.border:o.outline,borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"ghost":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:1,textColor:s,pressedTint:e.colors["surface-pressed"],...l};case"link":return{backgroundColor:"transparent",borderColor:"transparent",borderWidth:0,textColor:r?e.colors["text-disabled"]:e.colors.link,pressedTint:e.colors["surface-pressed"],...l};case"glass":return{backgroundColor:e.colors["glass-fill"],borderColor:e.colors["glass-border"],borderWidth:1,textColor:r?e.colors["text-disabled"]:e.colors["on-glass"],pressedTint:ACCENT_PRESSED_TINT,badgeFill:e.colors["glass-badge"],badgeInk:r?e.colors["text-disabled"]:o.base};default:return{backgroundColor:o.base,borderColor:"transparent",borderWidth:1,textColor:o.on,pressedTint:e.colors["surface-pressed"],...n}}},buildStyles=e=>StyleSheet.create({pressedOverlay:{position:"absolute",top:0,right:0,bottom:0,left:0},base:{alignItems:"center",justifyContent:"center",flexDirection:"row",overflow:"hidden"},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},linkUnderline:{height:1.5,marginTop:1},iconLeft:{marginRight:e.space.sm},iconBadge:{alignItems:"center",justifyContent:"center"},iconRight:{marginLeft:e.space.sm},fullWidth:{alignSelf:"stretch"}});export{Button};export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useLayoutEffect,useMemo,useRef}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,Text,View}from"react-native";import{useControllableState,usePresenceMotion}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{CalendarDay}from"./CalendarDay.js";import{addMonths,buildMonthMatrix,GRID_CELLS,startOfDay,startOfMonth,toIso,weekdayLabels}from"./calendarDates.js";import{buildCalendarStyles,MIN_CELL_SIZE,NAV_BUTTON_SIZE}from"./calendarStyles.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_TONE={holiday:"danger",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors["text-muted"]}},toneInk=(e,t)=>"neutral"===t?e.colors["text-muted"]:e.colors[`${t}-text`],Calendar=forwardRef((e,t)=>{const{mode:a="single",value:s,onChange:i,month:n,onMonthChange:r,minDate:l,maxDate:o,disabledDates:d,weekStartsOn:u=0,locale:c="en-IN",markedDates:m,strikeMarkedInRange:h=!1,cellSize:y,haptic:g,accessibilityLabel:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useLayoutEffect,useMemo,useRef}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,Text,View}from"react-native";import{useControllableState,usePresenceMotion}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{CalendarDay}from"./CalendarDay.js";import{addMonths,buildMonthMatrix,GRID_CELLS,startOfDay,startOfMonth,toIso,weekdayLabels}from"./calendarDates.js";import{buildCalendarStyles,MIN_CELL_SIZE,NAV_BUTTON_SIZE}from"./calendarStyles.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_TONE={holiday:"danger",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors["text-muted"]}},toneInk=(e,t)=>"neutral"===t?e.colors["text-muted"]:e.colors[`${t}-text`],Calendar=forwardRef((e,t)=>{const{mode:a="single",value:s,onChange:i,month:n,onMonthChange:r,minDate:l,maxDate:o,disabledDates:d,weekStartsOn:u=0,locale:c="en-IN",markedDates:m,strikeMarkedInRange:h=!1,cellSize:y,haptic:g,accessibilityLabel:p,style:f,headerLabelStyle:b,navButtonStyle:x,testID:M}=e,k=useTheme(),w=usePresenceMotion(),D=useMemo(()=>buildCalendarStyles(k),[k]),[S,T]=useControllableState({value:n?startOfMonth(n):void 0,defaultValue:startOfMonth(s?.start??new Date),onChange:r}),_=12*S.getFullYear()+S.getMonth(),v=s?.start?startOfDay(s.start):null,C="range"===a&&s?.end?startOfDay(s.end):null,I=v?.getTime()??null,L=C?.getTime()??null,E=toIso(new Date),j=l?startOfDay(l).getTime():null,A=o?startOfDay(o).getTime():null,V=useMemo(()=>new Set((d??[]).map(e=>toIso(e))),[d]),N=useCallback(e=>null!==j&&e.getTime()<j||null!==A&&e.getTime()>A||V.has(toIso(e)),[j,A,V]),R=useMemo(()=>{const e=new Map;for(const t of m??[]){const a=toIso(t.date);let s=e.get(a);s||(s={dots:[],holiday:!1,spoken:[]},e.set(a,s));const i=t.tone??DEFAULT_TONE[t.kind],n=toneColor(k,i);s.dots.length<3&&s.dots.push({key:`${t.kind}-${s.dots.length}`,color:n}),"holiday"===t.kind&&(s.holiday=!0,s.holidayInk??=toneInk(k,i)),t.label&&s.spoken.push(t.label),s.spoken.push(t.kind)}return e},[m,k]),O=useMemo(()=>buildMonthMatrix(new Date(Math.floor(_/12),_%12,1),u),[_,u]),F=useMemo(()=>weekdayLabels(c,u),[c,u]),P=useMemo(()=>new Intl.DateTimeFormat(c,{month:"long",year:"numeric"}),[c]),B=useMemo(()=>new Intl.DateTimeFormat(c,{weekday:"short",day:"numeric",month:"long"}),[c]),z=P.format(S),H=null===j||startOfMonth(new Date(j)).getTime()<S.getTime(),Z=null===A||startOfMonth(new Date(A)).getTime()>S.getTime(),X=useRef(createAnimatedValue(0)).current,$=useRef(createAnimatedValue(1)).current,U=useRef(null);useEffect(()=>()=>U.current?.stop(),[]);const q=useCallback(e=>{!1!==g&&triggerHaptic("impactLight");const t=k.motion.duration.fast,a=k.motion.duration.fast,[s]=w.range(32*-e,0),[i]=w.range(32*e,0),n=w.reduced?w.duration("fast"):t,r=w.reduced?w.duration("fast"):a;U.current?.stop(),U.current=Animated.sequence([Animated.parallel([Animated.timing(X,{toValue:s,duration:t,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing($,{toValue:0,duration:n,useNativeDriver:!0})]),Animated.timing(X,{toValue:i,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(X,{toValue:0,duration:a,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing($,{toValue:1,duration:r,useNativeDriver:!0})])]),U.current.start();const l=addMonths(S,e);T(l),AccessibilityInfo.announceForAccessibility(P.format(l))},[g,S,$,P,X,w,T,k]),G=useCallback(()=>q(-1),[q]),Y=useCallback(()=>q(1),[q]),pressDay=e=>{if(N(e.date))return;const t=resolveHaptic(g,"selection");t&&triggerHaptic(t);const s=e.date;"single"===a||!v||C||s.getTime()<v.getTime()?i({start:s}):i({start:v,end:s}),e.inMonth||T(startOfMonth(s))},W=useRef(pressDay);useLayoutEffect(()=>{W.current=pressDay});const J=useCallback(e=>W.current(e),[]),K=void 0===y?void 0:Math.max(y,MIN_CELL_SIZE),Q=useMemo(()=>void 0===K?{flex:1}:{width:K},[K]),ee=useMemo(()=>void 0===K?{flex:1,aspectRatio:1,minHeight:MIN_CELL_SIZE}:{width:K,height:K},[K]),te=Math.max(k.space.sm,(MIN_CELL_SIZE-NAV_BUTTON_SIZE)/2),ae=Math.min(k.settings.maxFontSizeMultiplier??1.5,1.5),se=[];for(let e=0;e<GRID_CELLS;e+=7)se.push(O.slice(e,e+7));return _jsxs(View,{ref:t,style:[D.root,f],testID:M,children:[_jsxs(View,{style:D.headerRow,children:[_jsx(Pressable,{onPress:G,disabled:!H,style:({pressed:e})=>[D.navBtn,e&&D.navBtnPressed,!H&&D.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Previous month",accessibilityState:{disabled:!H},"aria-disabled":!H,hitSlop:te,...hitSlopMarker(te),children:_jsx(Text,{style:D.navText,maxFontSizeMultiplier:ae,children:"‹"})}),_jsx(Animated.View,{style:[D.headerLabelWrap,{opacity:$,transform:[{translateX:X}]},b],children:_jsx(Text,{style:D.headerLabel,accessibilityRole:"header",accessibilityLabel:p?`${p}, ${z}`:void 0,maxFontSizeMultiplier:k.settings.maxFontSizeMultiplier,children:z})}),_jsx(Pressable,{onPress:Y,disabled:!Z,style:({pressed:e})=>[D.navBtn,e&&D.navBtnPressed,!Z&&D.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Next month",accessibilityState:{disabled:!Z},"aria-disabled":!Z,hitSlop:te,...hitSlopMarker(te),children:_jsx(Text,{style:D.navText,maxFontSizeMultiplier:ae,children:"›"})})]}),_jsx(View,{style:D.weekdayRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:F.map(({weekday:e,label:t})=>_jsx(View,{style:[D.weekdayCell,Q],children:_jsx(Text,{style:D.weekdayText,maxFontSizeMultiplier:ae,children:t})},e))}),_jsx(Animated.View,{style:{opacity:$,transform:[{translateX:X}]},children:se.map(e=>_jsx(View,{style:D.gridRow,children:e.map(e=>{const t=e.date.getTime(),s=null!==I&&t===I,i=null!==L&&t===L,n=null!==I&&null!==L&&t>=I&&t<=L,r=n&&!s&&!i,l=e.iso===E,o=R.get(e.iso),d=h&&n&&!0===o?.holiday,u=[B.format(e.date),...o?.spoken??[]];return l&&u.push("today"),"range"===a&&(s&&i?u.push("start and end of your range"):s?u.push("start of your range"):i?u.push("end of your range"):r&&u.push("in your range")),d&&u.push("not counted"),_jsx(CalendarDay,{cell:e,accessibilityLabel:u.join(", "),disabled:N(e.date),edge:s||i,mid:r,barLeft:n&&(i||r)&&!(s&&i),barRight:n&&(s||r)&&!(s&&i),today:l,struck:d,dots:o?.dots,inkColor:o?.holidayInk,cellStyle:ee,styles:D,maxFontSizeMultiplier:ae,onPressDay:J},e.iso)})},e[0].iso))})]})});Calendar.displayName="Calendar";export{Calendar};export default Calendar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveCheckboxSize,spaceOf,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.primary}},toneOnColor=(e,r)=>{switch(r){case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-primary"]}},Checkbox=forwardRef((e,r)=>{const{checked:
|
|
1
|
+
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Pressable,StyleSheet,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useControllableState}from"../../hooks/index.js";import{createAnimatedValue,resolveCheckboxSize,spaceOf,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,r)=>{switch(r){case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.primary}},toneOnColor=(e,r)=>{switch(r){case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-primary"]}},Checkbox=forwardRef((e,r)=>{const{checked:t,defaultChecked:s,onChange:o,indeterminate:i=!1,disabled:a=!1,label:l,description:n,error:c,help:d,labelLines:h,size:p="md",tone:u="primary",accessibilityLabel:m,haptic:x,style:b,boxStyle:f,indeterminateBarStyle:g,containerStyle:y,labelStyle:C,testID:S,hitSlop:w,...k}=e,[j,v]=useControllableState({value:t,defaultValue:s??!1,onChange:o}),T=useTheme(),R=useMemo(()=>buildStyles(T),[T]),{"box-size":_}=useMemo(()=>resolveCheckboxSize(T,p),[T,p]),L=T.size.border,M=spaceOf(T,T.components.checkbox["label-gap"]),V=toneColor(T,u),A=w??6,D=j||i,F=useRef(createAnimatedValue(D?1:0)).current;useEffect(()=>{const e=Animated.spring(F,{toValue:D?1:0,damping:T.motion.spring.snappy.damping,stiffness:T.motion.spring.snappy.stiffness,mass:T.motion.spring.snappy.mass,useNativeDriver:!0});return e.start(),()=>e.stop()},[D,F,T.motion.spring.snappy]);const I=F.interpolate({inputRange:[0,1],outputRange:[0,1]}),H=m??fieldTextAsString(l),P=!0===c||hasFieldText(c),z=D?V:a?T.colors.border:P?T.colors["field-border-error"]:T.colors.border,B=D?V:a?T.colors["surface-disabled"]:"transparent",O=a&&!D?T.colors["text-disabled"]:toneOnColor(T,u),W=Math.round(.72*_),E=Math.round(.55*_),N=Math.max(2,Math.round(.12*_)),U=_jsxs(Pressable,{ref:r,onPress:e=>{if(a)return;const r=resolveHaptic(x,"selection");r&&triggerHaptic(r),v(!j),k.onPressOut?.(e)},disabled:a,accessibilityRole:"checkbox",accessibilityLabel:H,accessibilityHint:k.accessibilityHint??fieldTextAsString(n),accessibilityState:{checked:i?"mixed":j,disabled:a},"aria-checked":i?"mixed":j,"aria-disabled":a,testID:S,hitSlop:A,...hitSlopMarker(A),...k,style:({pressed:e})=>[R.row,hasChoiceDetail(n,c)?R.rowTop:null,hasFieldText(d)?R.rowShrink:null,{opacity:a?.55:e?.85:1},y,b],children:[_jsx(View,{style:[R.box,{width:_,height:_,borderWidth:L,borderRadius:T.radius.sm,...smoothCorners,borderColor:z,backgroundColor:B},f],children:_jsx(Animated.View,{style:[R.glyphWrap,{opacity:F,transform:[{scale:I}]}],children:i?_jsx(View,{style:[{width:E,height:N,borderRadius:T.radius.pill,...smoothCorners,backgroundColor:O},g]}):_jsx(Svg,{width:W,height:W,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:O,strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})})}),_jsx(ChoiceText,{label:l,description:n,error:c,disabled:a,labelLines:h||void 0,descriptionLines:h||void 0,style:{marginLeft:M},labelStyle:C})]});return hasFieldText(d)?_jsxs(View,{style:[R.helpRow,hasChoiceDetail(n,c)?R.rowTop:null],children:[U,_jsx(View,{style:[R.help,{marginLeft:T.space.xs}],children:d})]}):U});Checkbox.displayName="Checkbox";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"},rowShrink:{flexShrink:1},helpRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0},box:{alignItems:"center",justifyContent:"center"},glyphWrap:{alignItems:"center",justifyContent:"center"}});export{Checkbox};export default Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveChipSize,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors["primary-soft"],on:e.colors.primary,ink:e.colors["primary-text"],border:e.colors.primary,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"success":return{base:e.colors["bg-muted"],on:e.colors.success,ink:e.colors["success-text"],border:e.colors.success,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"warning":return{base:e.colors["bg-muted"],on:e.colors.warning,ink:e.colors["warning-text"],border:e.colors.warning,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"danger":return{base:e.colors["bg-muted"],on:e.colors.danger,ink:e.colors["danger-text"],border:e.colors.danger,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"info":return{base:e.colors["bg-muted"],on:e.colors.info,ink:e.colors["info-text"],border:e.colors.info,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};default:return{base:e.colors["bg-muted"],on:e.colors["text-body"],ink:e.colors["text-body"],border:e.colors.border,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary}}},SOFT_FILL_OPACITY=.14,SOFT_SELECTED_FILL_OPACITY=.24,hasChipCount=e=>null!=e&&""!==e,Chip=forwardRef((e,r)=>{const{label:s,count:o,selected:t=!1,selectionMode:l="single",onPress:i,onClose:n,leftIcon:c,iconVariant:a,variant:d="filled",tone:p="neutral",size:m="md",disabled:u=!1,loading:
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveChipSize,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneFor=(e,r)=>{switch(r){case"primary":return{base:e.colors["primary-soft"],on:e.colors.primary,ink:e.colors["primary-text"],border:e.colors.primary,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"success":return{base:e.colors["bg-muted"],on:e.colors.success,ink:e.colors["success-text"],border:e.colors.success,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"warning":return{base:e.colors["bg-muted"],on:e.colors.warning,ink:e.colors["warning-text"],border:e.colors.warning,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"danger":return{base:e.colors["bg-muted"],on:e.colors.danger,ink:e.colors["danger-text"],border:e.colors.danger,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};case"info":return{base:e.colors["bg-muted"],on:e.colors.info,ink:e.colors["info-text"],border:e.colors.info,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary};default:return{base:e.colors["bg-muted"],on:e.colors["text-body"],ink:e.colors["text-body"],border:e.colors.border,selectedBg:e.colors["primary-soft"],selectedOn:e.colors.primary,selectedInk:e.colors["primary-text"],selectedBorder:e.colors.primary}}},SOFT_FILL_OPACITY=.14,SOFT_SELECTED_FILL_OPACITY=.24,hasChipCount=e=>null!=e&&""!==e,Chip=forwardRef((e,r)=>{const{label:s,count:o,selected:t=!1,selectionMode:l="single",onPress:i,onClose:n,leftIcon:c,iconVariant:a,variant:d="filled",tone:p="neutral",size:m="md",disabled:u=!1,loading:h=!1,accessibilityLabel:b,haptic:y,style:f,textStyle:g,containerStyle:x,countStyle:S,closeButtonStyle:k,closeIconStyle:C,testID:j}=e,I=useTheme(),w=!!i&&!u,_="radio"===l,z=!!i&&(!u||_),O=hasChipCount(o),{style:v,pressIn:B,pressOut:L}=usePressAnimation({enabled:w}),M=useMemo(()=>toneFor(I,p),[I,p]),P=useMemo(()=>resolveChipSize(I,m),[I,m]),T=Math.max(0,Math.ceil((44-P["min-height"])/2)),F=_?{top:T,bottom:T}:void 0,R="filled"===d,A="soft"===d,H=(()=>{if(A){const e=t?M.selectedOn:M.on;return tintOf(e,t?.24:.14,t?M.selectedBg:M.base)}return t?R?M.selectedBg:"transparent":R?M.base:"transparent"})(),V=A?"transparent":t?M.selectedBorder:R?"transparent":M.border,D=u?I.colors["text-disabled"]:t?A?I.colors["text-body"]:M.selectedInk:M.ink,E=R||A?0:I.size.border,handlePress=()=>{if(!w)return;const e=resolveHaptic(y,"selection");e&&triggerHaptic(e),i?.()},$=b??(O?`${s}, ${o}`:s),N=_jsxs(View,{style:styles.row,children:[c?_jsx(View,{style:{marginRight:P.gap},children:renderSlotIcon(c,{color:D,size:P.icon,disabled:u},a)}):null,_jsx(Text,{style:[styles.label,{color:D,fontSize:P.text,...fontFor(I,"medium")},g],numberOfLines:1,children:s??" "}),O?_jsx(Text,{style:[styles.count,{color:D,fontSize:Math.min(I.text.xs.size,P.text),marginLeft:I.space.xs,...fontFor(I,"normal")},S],numberOfLines:1,children:o}):null,n?_jsx(Pressable,{onPress:()=>{u||(!1!==y&&triggerHaptic("impactLight"),n?.())},disabled:u,accessibilityRole:"button",accessibilityLabel:`Remove ${s}`,accessibilityState:{disabled:u},"aria-disabled":u,hitSlop:6,...hitSlopMarker(6),style:({pressed:e})=>[styles.close,{width:P["close-size"],height:P["close-size"],borderRadius:P["close-size"]/2,...smoothCorners,marginLeft:P.gap,backgroundColor:e?I.colors["surface-pressed"]:I.colors["surface-hover"]},k],children:_jsx(Text,{style:[{color:D,fontSize:P["close-text"],...fontFor(I,"bold"),lineHeight:P["close-text"]+2},C],maxFontSizeMultiplier:1,children:"×"})}):null]}),Y={paddingHorizontal:P["padding-x"],paddingVertical:P["padding-y"],minHeight:P["min-height"],borderRadius:I.radius.pill,...smoothCorners,overflow:"hidden",backgroundColor:H,borderWidth:E,borderColor:V,opacity:u?.55:1};let U;return U=z?_jsx(Animated.View,{style:[v,{alignSelf:"flex-start",borderRadius:I.radius.pill,...smoothCorners,overflow:"hidden"}],children:_jsx(Pressable,{ref:r,onPress:handlePress,onPressIn:B,onPressOut:L,disabled:!w,accessibilityRole:_?"radio":"multiple"===l?"checkbox":"button",accessibilityLabel:$,accessibilityState:_||"multiple"===l?{checked:t,disabled:u}:{selected:t,disabled:u},"aria-checked":_||"multiple"===l?t:void 0,"aria-selected":_||"multiple"===l?void 0:t,"aria-disabled":u,hitSlop:F,...F?hitSlopMarker(F):{},android_ripple:{color:I.colors["surface-pressed"],borderless:!1},testID:j,style:({pressed:e})=>[styles.base,Y,e&&"outlined"===d?{backgroundColor:I.colors["surface-pressed"]}:null,x,f],children:N})}):_jsx(View,{ref:r,style:[styles.base,Y,x,f],accessible:!0,accessibilityRole:"text",accessibilityLabel:$,accessibilityState:{selected:t,disabled:u},"aria-selected":t,"aria-disabled":u,testID:j,children:N}),h?_jsx(ChipSkeleton,{...e}):U});Chip.displayName="Chip";const ChipSkeleton=({label:e,count:r,size:s="md",leftIcon:o,onClose:t,style:l,containerStyle:i})=>{const n=useTheme(),c=resolveChipSize(n,s),a=Math.max(40,Math.min(120,7*(e??"").length)),d=c["min-height"],p=d/2,m=a+2*c["padding-x"]+(hasChipCount(r)?c.gap/2+7*String(r).length:0)+(void 0!==o?c.gap+14:0)+(void 0!==t?c.gap+c["close-size"]:0);return _jsx(Skeleton,{width:m,height:d,radius:p,style:[{alignSelf:"flex-start"},i,l]})};ChipSkeleton.displayName="ChipSkeleton",Chip.Skeleton=ChipSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},row:{flexDirection:"row",alignItems:"center"},label:{flexShrink:1,textAlign:"center"},count:{flexShrink:0,fontVariant:["tabular-nums"]},close:{alignItems:"center",justifyContent:"center"}});export{Chip};export default Chip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Easing,Modal,Pressable,StyleSheet,Text,View}from"react-native";import{GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{PickerTrigger}from"../PickerTrigger/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const NAV_BUTTON_SIZE=36,AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),GRID_SIZE=12,DECADE_SPAN=10,startOfDay=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()),isSameDay=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),toIso=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,addMonths=(e,t)=>new Date(e.getFullYear(),e.getMonth()+t,1),buildMonthMatrix=(e,t)=>{const a=e.getFullYear(),r=e.getMonth(),s=(new Date(a,r,1).getDay()-t+7)%7,i=[];for(let e=0;e<42;e+=1){const t=new Date(a,r,1-s+e);i.push({date:t,inMonth:t.getMonth()===r,iso:toIso(t)})}return i},weekdayLabels=(e,t)=>{const a=new Intl.DateTimeFormat(e,{weekday:"short"}),r=[];for(let e=0;e<7;e+=1){const s=new Date(1970,0,4+(t+e)%7);r.push(a.format(s))}return r},formatMonthYear=(e,t)=>new Intl.DateTimeFormat(t,{month:"long",year:"numeric"}).format(e),decadeStartFor=e=>10*Math.floor(e/10),buildYearCells=e=>{const t=e-4;return Array.from({length:12},(e,a)=>t+a)},buildDecadeCells=e=>{const t=decadeStartFor(e)-40;return Array.from({length:12},(e,a)=>t+10*a)},DatePicker=e=>{const{value:t,onChange:a,onClose:r,minDate:s,maxDate:i,disabledDates:o,mode:n="modal",locale:l="en-IN",weekStartsOn:c=0,title:d="Select Date",confirmLabel:u="Confirm",cancelLabel:m="Cancel",style:g,containerStyle:y,headerLabelStyle:h,navButtonStyle:b,footerButtonStyle:p,haptic:f,testID:x,label:w,placeholder:D,helperText:v,error:C,required:j,disabled:A,size:S,variant:V,clearable:T,onClear:_,formatValue:R,triggerStyle:M}=e,k=void 0!==e.visible,[I,P]=useState(!1),F=k?e.visible:I,N=k?x:x?`${x}-calendar`:void 0,Y=useTheme(),L=usePresenceMotion(),[z,B]=useModalInsets(),$=useMemo(()=>buildStyles(Y),[Y]),[E,H]=useState(()=>startOfDay(new Date));useEffect(()=>{F&&H(startOfDay(new Date))},[F]);const O=t?startOfDay(t):E,[W,G]=useState(O),[q,X]=useState(t?startOfDay(t):null),[Z,U]=useState("days"),J=useRef(createAnimatedValue(0)).current,K=useRef(createAnimatedValue(0)).current,Q=useRef(createAnimatedValue(0)).current,ee=useRef(0),te=useRef(createAnimatedValue(0)).current,ae=useRef(createAnimatedValue(1)).current,re=useRef(createAnimatedValue(1)).current,se=useRef(createAnimatedValue(1)).current,ie=useRef(createAnimatedValue(1)).current,oe=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(t){const e=startOfDay(t);X(e),G(e)}else X(null)},[t]);const ne=useMemo(()=>{const e=new Set;return o?.forEach(t=>e.add(toIso(startOfDay(t)))),e},[o]),le=useMemo(()=>s?startOfDay(s):null,[s]),ce=useMemo(()=>i?startOfDay(i):null,[i]),de=useCallback(e=>!!(le&&e.getTime()<le.getTime())||(!!(ce&&e.getTime()>ce.getTime())||!!ne.has(toIso(e))),[le,ce,ne]),ue=useMemo(()=>buildMonthMatrix(W,c),[W,c]),me=useMemo(()=>buildYearCells(W.getFullYear()),[W]),ge=useMemo(()=>buildDecadeCells(W.getFullYear()),[W]),ye=useMemo(()=>weekdayLabels(l,c),[l,c]),he=useMemo(()=>new Intl.DateTimeFormat(l,{weekday:"long",year:"numeric",month:"long",day:"numeric"}),[l]),be=useMemo(()=>{if("days"===Z)return formatMonthYear(W,l);if("years"===Z){return`${me[0]} - ${me[me.length-1]}`}return`${ge[0]} - ${ge[ge.length-1]+9}`},[W,ge,l,Z,me]),pe=useCallback(e=>!!(le&&e<le.getFullYear())||!!(ce&&e>ce.getFullYear()),[le,ce]),fe=useCallback(e=>!!(le&&e+10-1<le.getFullYear())||!!(ce&&e>ce.getFullYear()),[le,ce]),xe=useCallback(e=>{!1!==f&&triggerHaptic("impactLight");const t=e>0?1:-1,a=Y.motion.duration.fast,r=Y.motion.duration.fast,[s]=L.range(32*-t,0),[i]=L.range(32*t,0),o=L.reduced?L.duration("fast"):a,n=L.reduced?L.duration("fast"):r;Animated.sequence([Animated.parallel([Animated.timing(te,{toValue:s,duration:a,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(ae,{toValue:0,duration:o,useNativeDriver:!0})]),Animated.timing(te,{toValue:i,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(te,{toValue:0,duration:r,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(ae,{toValue:1,duration:n,useNativeDriver:!0})])]).start();const c=addMonths(W,e);G(c),AccessibilityInfo.announceForAccessibility(formatMonthYear(c,l))},[W,f,l,ae,te,L,Y.motion.duration.fast]),we=useCallback(()=>{"days"!==Z?(!1!==f&&triggerHaptic("impactLight"),G("years"===Z?e=>new Date(e.getFullYear()-12,e.getMonth(),1):e=>new Date(e.getFullYear()-120,e.getMonth(),1))):xe(-1)},[xe,Z,f]),De=useCallback(()=>{"days"!==Z?(!1!==f&&triggerHaptic("impactLight"),G("years"===Z?e=>new Date(e.getFullYear()+12,e.getMonth(),1):e=>new Date(e.getFullYear()+120,e.getMonth(),1))):xe(1)},[xe,Z,f]),ve=useCallback(()=>{const[e]=L.range(.9,1),t=L.reduced?L.duration("default"):Y.motion.duration.default;setNativeValue(se,0),setNativeValue(ie,e),Animated.parallel([Animated.timing(se,{toValue:1,duration:t,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(ie,{toValue:1,duration:t,easing:Easing.out(Easing.cubic),useNativeDriver:!0})]).start()},[se,ie,L,Y.motion.duration.default]),Ce=useCallback(()=>{const e=resolveHaptic(f,"selection");if(e&&triggerHaptic(e),!L.reduced){const e=80,t=100;Animated.sequence([Animated.timing(oe,{toValue:.96,duration:e,useNativeDriver:!0}),Animated.timing(oe,{toValue:1,duration:t,useNativeDriver:!0})]).start()}U(e=>"days"===e?"years":"years"===e?"decades":"years"),ve()},[ve,oe,f,L.reduced]),je=useCallback(e=>{const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),G(t=>new Date(e,t.getMonth(),1)),U("days"),ve()},[ve,f]),Ae=useCallback(e=>{const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),G(t=>new Date(e+4,t.getMonth(),1)),U("years"),ve()},[ve,f]),Se=useCallback(e=>{if(de(e.date))return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),X(e.date),e.inMonth||G(new Date(e.date.getFullYear(),e.date.getMonth(),1)),L.reduced||(setNativeValue(re,.7),Animated.spring(re,{toValue:1,damping:Y.motion.spring.bouncy.damping,stiffness:Y.motion.spring.bouncy.stiffness,mass:Y.motion.spring.bouncy.mass,useNativeDriver:!0}).start())},[de,L.reduced,re,Y.motion.spring.bouncy,f]),Ve=useCallback(()=>{k||P(!1),r?.()},[k,r]),Te=useCallback(()=>{"modal"===n?Animated.parallel([Animated.timing(J,{toValue:0,duration:L.duration("default"),easing:Easing.bezier(...Y.motion.ease.accelerate),useNativeDriver:!1}),Animated.timing(K,{toValue:0,duration:L.duration("fast"),easing:Easing.bezier(...Y.motion.ease.accelerate),useNativeDriver:!0})]).start(()=>{Ve()}):Ve()},[J,n,Ve,L,K,Y.motion.ease.accelerate]),{handleGesture:Re,opacity:Me}=useDragToDismiss({drag:Q,travel:()=>ee.current||320,onDismiss:Te}),ke=useMemo(()=>Animated.multiply(K,Me),[K,Me]),Ie=useMemo(()=>J.interpolate({inputRange:[0,1],outputRange:[transparentOf(Y.colors.scrim),Y.colors.scrim]}),[J,Y.colors.scrim]);useEffect(()=>{if("modal"===n&&F){J.setValue(0),setNativeValue(K,0),setNativeValue(Q,0),setNativeValue(Me,1);const e=L.reduced?Animated.timing(K,{toValue:1,duration:L.duration("default"),useNativeDriver:!0}):Animated.spring(K,{toValue:1,damping:Y.motion.spring.gentle.damping,stiffness:Y.motion.spring.gentle.stiffness,mass:Y.motion.spring.gentle.mass,useNativeDriver:!0}),t=Animated.parallel([Animated.timing(J,{toValue:1,duration:L.duration("default"),easing:Easing.out(Easing.cubic),useNativeDriver:!1}),e]);return t.start(),()=>t.stop()}},[F,n,J,L,K,Q,Me,Y.motion]);const Pe=useCallback(()=>{!1!==f&&triggerHaptic("selection"),Te()},[Te,f]),Fe=useCallback(()=>{q&&(!1!==f&&triggerHaptic("notificationSuccess"),a?.(q),Te())},[Te,a,q,f]),Ne=K.interpolate({inputRange:[0,1],outputRange:L.range(320,0)}),Ye=_jsx(View,{style:$.titleRow,children:_jsx(Text,{style:$.title,accessibilityRole:"header",children:d})}),Le=_jsxs(View,{style:[$.card,g,y],accessibilityRole:"modal"===n?void 0:"none",accessible:!1,testID:N,children:["modal"===n?_jsx(GestureDetector,{gesture:Re,children:_jsxs(View,{style:$.grabArea,children:[_jsx(View,{style:$.handle}),Ye]})}):Ye,_jsxs(View,{style:$.headerRow,children:[_jsx(Pressable,{onPress:we,style:({pressed:e})=>[$.navBtn,e&&$.navBtnPressed,b],accessibilityRole:"button",accessibilityLabel:"days"===Z?"Previous month":"years"===Z?"Previous years":"Previous decades",hitSlop:8,children:_jsx(Text,{style:$.navText,children:"‹"})}),_jsx(Pressable,{onPress:Ce,style:[$.headerLabelWrap,h],accessibilityRole:"button",accessibilityLabel:"days"===Z?`${be}, switch to year selection`:"years"===Z?`${be}, switch to decade selection`:`${be}, switch to year selection`,hitSlop:8,children:_jsxs(Animated.View,{style:[$.headerLabelInner,{transform:[{scale:oe}],opacity:"days"===Z?ae:1}],children:[_jsx(Animated.Text,{style:[$.headerLabel,{transform:[{translateX:"days"===Z?te:0}]}],accessibilityLiveRegion:"polite",children:be}),_jsx(View,{style:$.headerCaret,children:(Y.settings.icons.chevronDown??defaultIcons.chevronDown)({size:Y.text.sm.size,color:Y.colors["text-muted"]})})]})}),_jsx(Pressable,{onPress:De,style:({pressed:e})=>[$.navBtn,e&&$.navBtnPressed,b],accessibilityRole:"button",accessibilityLabel:"days"===Z?"Next month":"years"===Z?"Next years":"Next decades",hitSlop:8,children:_jsx(Text,{style:$.navText,children:"›"})})]}),"days"===Z?_jsxs(_Fragment,{children:[_jsx(View,{style:$.weekdayRow,children:ye.map((e,t)=>_jsx(View,{style:$.weekdayCell,children:_jsx(Text,{style:$.weekdayText,children:e})},`${e}-${t}`))}),_jsx(Animated.View,{style:[$.grid,{opacity:ae,transform:[{translateX:te}]}],children:Array.from({length:6}).map((e,t)=>_jsx(View,{style:$.gridRow,children:ue.slice(7*t,7*t+7).map(e=>{const t=de(e.date),a=!!q&&isSameDay(e.date,q),r=isSameDay(e.date,E),s=a?Y.colors.primary:"transparent",i=r&&!a?Y.colors.primary:"transparent",o=a?Y.colors["on-primary"]:e.inMonth?t?Y.colors["text-disabled"]:Y.colors["text-body"]:Y.colors["text-subtle"],n=t?.3:e.inMonth?1:.4;return _jsx(Pressable,{disabled:t,onPress:()=>Se(e),accessibilityRole:"button",accessibilityLabel:he.format(e.date),accessibilityState:{selected:a,disabled:t},"aria-selected":a,"aria-disabled":t,style:$.dayCell,children:_jsx(Animated.View,{style:[$.dayInner,{backgroundColor:s,borderColor:i,borderWidth:r&&!a?1.5:0,opacity:n},a?{transform:[{scale:re}]}:null],children:_jsx(Text,{style:[$.dayText,{color:o}],children:e.date.getDate()})})},e.iso)})},`r-${t}`))})]}):_jsx(Animated.View,"years"===Z?{style:[$.yearGrid,{opacity:se,transform:[{scale:ie}]}],children:Array.from({length:3}).map((e,t)=>_jsx(View,{style:$.gridRow,children:me.slice(4*t,4*t+4).map(e=>{const t=pe(e),a=!!q&&q.getFullYear()===e,r=E.getFullYear()===e,s=a?Y.colors.primary:"transparent",i=r&&!a?Y.colors.primary:"transparent",o=a?Y.colors["on-primary"]:t?Y.colors["text-disabled"]:Y.colors["text-body"],n=t?.3:1;return _jsx(Pressable,{disabled:t,onPress:()=>je(e),accessibilityRole:"button",accessibilityLabel:`Year ${e}`,accessibilityState:{selected:a,disabled:t},"aria-selected":a,"aria-disabled":t,style:$.yearCell,children:_jsx(View,{style:[$.yearInner,{backgroundColor:s,borderColor:i,borderWidth:r&&!a?1.5:0,opacity:n}],children:_jsx(Text,{style:[$.yearText,{color:o}],children:e})})},`year-${e}`)})},`yr-${t}`))}:{style:[$.yearGrid,{opacity:se,transform:[{scale:ie}]}],children:Array.from({length:3}).map((e,t)=>_jsx(View,{style:$.gridRow,children:ge.slice(4*t,4*t+4).map(e=>{const t=e+10-1,a=fe(e),r=!!q&&decadeStartFor(q.getFullYear())===e,s=decadeStartFor(E.getFullYear())===e,i=r?Y.colors.primary:"transparent",o=s&&!r?Y.colors.primary:"transparent",n=r?Y.colors["on-primary"]:a?Y.colors["text-disabled"]:Y.colors["text-body"],l=a?.3:1;return _jsx(Pressable,{disabled:a,onPress:()=>Ae(e),accessibilityRole:"button",accessibilityLabel:`Decade ${e} to ${t}`,accessibilityState:{selected:r,disabled:a},"aria-selected":r,"aria-disabled":a,style:$.yearCell,children:_jsxs(View,{style:[$.yearInner,{backgroundColor:i,borderColor:o,borderWidth:s&&!r?1.5:0,opacity:l}],children:[_jsx(Text,{style:[$.yearText,{color:n}],children:`${e}s`}),_jsx(Text,{style:[$.decadeRangeText,{color:r?Y.colors["on-primary"]:Y.colors["text-subtle"]}],children:`${e}-${t}`})]})},`decade-${e}`)})},`dec-${t}`))}),_jsxs(View,{style:$.footer,children:[_jsx(Pressable,{onPress:Pe,style:({pressed:e})=>[$.footerBtn,$.footerCancel,e&&$.footerBtnPressed,p],accessibilityRole:"button",accessibilityLabel:m,children:_jsx(Text,{style:[$.footerBtnText,{color:Y.colors["text-muted"]}],children:m})}),_jsx(Pressable,{onPress:Fe,disabled:!q,style:({pressed:e})=>[$.footerBtn,$.footerConfirm,{backgroundColor:Y.colors.primary,opacity:q?1:.5},e&&{backgroundColor:Y.colors["primary-hover"]},p],accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{disabled:!q},"aria-disabled":!q,children:_jsx(Text,{style:[$.footerBtnText,{color:Y.colors["on-primary"]}],children:u})})]})]}),ze=t?(R??(e=>e.toLocaleDateString()))(t):void 0,Be=!k;if("inline"===n)return F||Be?Be?_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:w,value:ze,placeholder:D,helperText:v,error:C,required:j,disabled:A,size:S,variant:V,clearable:T,onClear:_,onPress:()=>P(!0),triggerStyle:M,testID:x}),F?Le:null]}):Le:null;const $e=_jsx(Modal,{visible:F,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:Te,children:_jsx(ModalSafeArea,{onInsets:B,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,style:[$.backdrop,{backgroundColor:Ie}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:Te,accessibilityLabel:"Dismiss"}),_jsx(Animated.View,{style:[$.sheetWrap,{paddingBottom:Math.max(z.bottom,Y.space.lg),opacity:ke,transform:[{translateY:Animated.add(Ne,Q)}]}],onLayout:e=>{ee.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessibilityRole:"none",children:Le}),_jsx(ToastHost,{})]})})});return Be?_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:w,value:ze,placeholder:D,helperText:v,error:C,required:j,disabled:A,size:S,variant:V,clearable:T,onClear:_,onPress:()=>P(!0),triggerStyle:M,testID:x}),$e]}):$e},buildStyles=e=>{const t=e.shadow.popover;return StyleSheet.create({backdrop:{...StyleSheet.absoluteFill},sheetWrap:{position:"absolute",left:0,right:0,bottom:0,paddingHorizontal:e.space.md,paddingBottom:e.space.lg},card:{backgroundColor:e.colors.surface,borderRadius:e.radius.xl,...smoothCorners,padding:e.space.lg,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},grabArea:{marginTop:-e.space.lg,paddingTop:e.space.sm},handle:{alignSelf:"center",width:36,height:4,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors["border-subtle"],marginBottom:e.space.sm},titleRow:{marginBottom:e.space.sm},title:{fontSize:e.text.lg.size,fontWeight:e.weight.semibold,color:e.colors["text-body"]},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:e.space.md},navBtn:{width:36,height:36,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:e.colors["bg-subtle"]},navBtnPressed:{backgroundColor:e.colors["surface-pressed"]},navText:{fontSize:e.text["2xl"].size,lineHeight:26,color:e.colors["text-body"],fontWeight:e.weight.semibold},headerLabelWrap:{flex:1,alignItems:"center"},headerLabelInner:{flexDirection:"row",alignItems:"center",justifyContent:"center"},headerLabel:{fontSize:e.text.base.size,fontWeight:e.weight.semibold,color:e.colors["text-body"]},headerCaret:{marginLeft:e.space.xs,alignItems:"center",justifyContent:"center"},weekdayRow:{flexDirection:"row",marginBottom:e.space.xs},weekdayCell:{flex:1,alignItems:"center",paddingVertical:e.space.xs},weekdayText:{fontSize:e.text.xs.size,fontWeight:e.weight.medium,color:e.colors["text-subtle"],letterSpacing:e["letter-spacing"].wide},grid:{},gridRow:{flexDirection:"row"},dayCell:{flex:1,aspectRatio:1,alignItems:"center",justifyContent:"center",padding:e.space.xxs},dayInner:{width:"100%",height:"100%",borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dayText:{fontSize:e.text.sm.size,fontWeight:e.weight.medium},yearGrid:{},yearCell:{flex:1,aspectRatio:1.6,alignItems:"center",justifyContent:"center",padding:e.space.xs},yearInner:{width:"100%",height:"100%",borderRadius:e.radius.lg,...smoothCorners,alignItems:"center",justifyContent:"center"},yearText:{fontSize:e.text.base.size,fontWeight:e.weight.semibold},decadeRangeText:{fontSize:e.text.xs.size,fontWeight:e.weight.medium,marginTop:e.space.xxs},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",marginTop:e.space.lg,gap:e.space.sm},footerBtn:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,borderRadius:e.radius.md,...smoothCorners,minHeight:40,alignItems:"center",justifyContent:"center"},footerCancel:{backgroundColor:"transparent"},footerConfirm:{},footerBtnPressed:{opacity:.85},footerBtnText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold}})};export{DatePicker};export default DatePicker;
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Easing,Modal,Pressable,StyleSheet,Text,View}from"react-native";import{GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{PickerTrigger}from"../PickerTrigger/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const NAV_BUTTON_SIZE=36,AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),GRID_SIZE=12,DECADE_SPAN=10,startOfDay=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()),isSameDay=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),toIso=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,addMonths=(e,t)=>new Date(e.getFullYear(),e.getMonth()+t,1),buildMonthMatrix=(e,t)=>{const a=e.getFullYear(),r=e.getMonth(),s=(new Date(a,r,1).getDay()-t+7)%7,i=[];for(let e=0;e<42;e+=1){const t=new Date(a,r,1-s+e);i.push({date:t,inMonth:t.getMonth()===r,iso:toIso(t)})}return i},weekdayLabels=(e,t)=>{const a=new Intl.DateTimeFormat(e,{weekday:"short"}),r=[];for(let e=0;e<7;e+=1){const s=new Date(1970,0,4+(t+e)%7);r.push(a.format(s))}return r},formatMonthYear=(e,t)=>new Intl.DateTimeFormat(t,{month:"long",year:"numeric"}).format(e),decadeStartFor=e=>10*Math.floor(e/10),buildYearCells=e=>{const t=e-4;return Array.from({length:12},(e,a)=>t+a)},buildDecadeCells=e=>{const t=decadeStartFor(e)-40;return Array.from({length:12},(e,a)=>t+10*a)},DatePicker=e=>{const{value:t,onChange:a,onClose:r,minDate:s,maxDate:i,disabledDates:o,mode:n="modal",locale:l="en-IN",weekStartsOn:c=0,title:d="Select Date",confirmLabel:u="Confirm",cancelLabel:m="Cancel",style:g,containerStyle:y,headerLabelStyle:h,navButtonStyle:p,footerButtonStyle:b,haptic:f,testID:x,label:w,placeholder:D,helperText:v,error:C,required:j,disabled:S,size:A,variant:V,clearable:T,onClear:_,formatValue:M,triggerStyle:R}=e,k=void 0!==e.visible,[I,P]=useState(!1),F=k?e.visible:I,N=k?x:x?`${x}-calendar`:void 0,Y=useTheme(),L=usePresenceMotion(),[z,B]=useModalInsets(),$=useMemo(()=>buildStyles(Y),[Y]),[E,H]=useState(()=>startOfDay(new Date));useEffect(()=>{F&&H(startOfDay(new Date))},[F]);const O=t?startOfDay(t):E,[W,G]=useState(O),[q,X]=useState(t?startOfDay(t):null),[Z,U]=useState("days"),J=useRef(createAnimatedValue(0)).current,K=useRef(createAnimatedValue(0)).current,Q=useRef(createAnimatedValue(0)).current,ee=useRef(0),te=useRef(createAnimatedValue(0)).current,ae=useRef(createAnimatedValue(1)).current,re=useRef(createAnimatedValue(1)).current,se=useRef(createAnimatedValue(1)).current,ie=useRef(createAnimatedValue(1)).current,oe=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(t){const e=startOfDay(t);X(e),G(e)}else X(null)},[t]);const ne=useMemo(()=>{const e=new Set;return o?.forEach(t=>{e.add(toIso(startOfDay(t)))}),e},[o]),le=useMemo(()=>s?startOfDay(s):null,[s]),ce=useMemo(()=>i?startOfDay(i):null,[i]),de=useCallback(e=>!!(le&&e.getTime()<le.getTime())||(!!(ce&&e.getTime()>ce.getTime())||!!ne.has(toIso(e))),[le,ce,ne]),ue=useMemo(()=>buildMonthMatrix(W,c),[W,c]),me=useMemo(()=>buildYearCells(W.getFullYear()),[W]),ge=useMemo(()=>buildDecadeCells(W.getFullYear()),[W]),ye=useMemo(()=>weekdayLabels(l,c),[l,c]),he=useMemo(()=>new Intl.DateTimeFormat(l,{weekday:"long",year:"numeric",month:"long",day:"numeric"}),[l]),pe=useMemo(()=>{if("days"===Z)return formatMonthYear(W,l);if("years"===Z){return`${me[0]} - ${me[me.length-1]}`}return`${ge[0]} - ${ge[ge.length-1]+9}`},[W,ge,l,Z,me]),be=useCallback(e=>!!(le&&e<le.getFullYear())||!!(ce&&e>ce.getFullYear()),[le,ce]),fe=useCallback(e=>!!(le&&e+10-1<le.getFullYear())||!!(ce&&e>ce.getFullYear()),[le,ce]),xe=useCallback(e=>{!1!==f&&triggerHaptic("impactLight");const t=e>0?1:-1,a=Y.motion.duration.fast,r=Y.motion.duration.fast,[s]=L.range(32*-t,0),[i]=L.range(32*t,0),o=L.reduced?L.duration("fast"):a,n=L.reduced?L.duration("fast"):r;Animated.sequence([Animated.parallel([Animated.timing(te,{toValue:s,duration:a,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(ae,{toValue:0,duration:o,useNativeDriver:!0})]),Animated.timing(te,{toValue:i,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(te,{toValue:0,duration:r,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(ae,{toValue:1,duration:n,useNativeDriver:!0})])]).start();const c=addMonths(W,e);G(c),AccessibilityInfo.announceForAccessibility(formatMonthYear(c,l))},[W,f,l,ae,te,L,Y.motion.duration.fast]),we=useCallback(()=>{"days"!==Z?(!1!==f&&triggerHaptic("impactLight"),G("years"===Z?e=>new Date(e.getFullYear()-12,e.getMonth(),1):e=>new Date(e.getFullYear()-120,e.getMonth(),1))):xe(-1)},[xe,Z,f]),De=useCallback(()=>{"days"!==Z?(!1!==f&&triggerHaptic("impactLight"),G("years"===Z?e=>new Date(e.getFullYear()+12,e.getMonth(),1):e=>new Date(e.getFullYear()+120,e.getMonth(),1))):xe(1)},[xe,Z,f]),ve=useCallback(()=>{const[e]=L.range(.9,1),t=L.reduced?L.duration("default"):Y.motion.duration.default;setNativeValue(se,0),setNativeValue(ie,e),Animated.parallel([Animated.timing(se,{toValue:1,duration:t,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(ie,{toValue:1,duration:t,easing:Easing.out(Easing.cubic),useNativeDriver:!0})]).start()},[se,ie,L,Y.motion.duration.default]),Ce=useCallback(()=>{const e=resolveHaptic(f,"selection");if(e&&triggerHaptic(e),!L.reduced){const e=80,t=100;Animated.sequence([Animated.timing(oe,{toValue:.96,duration:e,useNativeDriver:!0}),Animated.timing(oe,{toValue:1,duration:t,useNativeDriver:!0})]).start()}U(e=>"days"===e?"years":"years"===e?"decades":"years"),ve()},[ve,oe,f,L.reduced]),je=useCallback(e=>{const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),G(t=>new Date(e,t.getMonth(),1)),U("days"),ve()},[ve,f]),Se=useCallback(e=>{const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),G(t=>new Date(e+4,t.getMonth(),1)),U("years"),ve()},[ve,f]),Ae=useCallback(e=>{if(de(e.date))return;const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),X(e.date),e.inMonth||G(new Date(e.date.getFullYear(),e.date.getMonth(),1)),L.reduced||(setNativeValue(re,.7),Animated.spring(re,{toValue:1,damping:Y.motion.spring.bouncy.damping,stiffness:Y.motion.spring.bouncy.stiffness,mass:Y.motion.spring.bouncy.mass,useNativeDriver:!0}).start())},[de,L.reduced,re,Y.motion.spring.bouncy,f]),Ve=useCallback(()=>{k||P(!1),r?.()},[k,r]),Te=useCallback(()=>{"modal"===n?Animated.parallel([Animated.timing(J,{toValue:0,duration:L.duration("default"),easing:Easing.bezier(...Y.motion.ease.accelerate),useNativeDriver:!1}),Animated.timing(K,{toValue:0,duration:L.duration("fast"),easing:Easing.bezier(...Y.motion.ease.accelerate),useNativeDriver:!0})]).start(()=>{Ve()}):Ve()},[J,n,Ve,L,K,Y.motion.ease.accelerate]),{handleGesture:Me,opacity:Re}=useDragToDismiss({drag:Q,travel:()=>ee.current||320,onDismiss:Te}),ke=useMemo(()=>Animated.multiply(K,Re),[K,Re]),Ie=useMemo(()=>J.interpolate({inputRange:[0,1],outputRange:[transparentOf(Y.colors.scrim),Y.colors.scrim]}),[J,Y.colors.scrim]);useEffect(()=>{if("modal"===n&&F){J.setValue(0),setNativeValue(K,0),setNativeValue(Q,0),setNativeValue(Re,1);const e=L.reduced?Animated.timing(K,{toValue:1,duration:L.duration("default"),useNativeDriver:!0}):Animated.spring(K,{toValue:1,damping:Y.motion.spring.gentle.damping,stiffness:Y.motion.spring.gentle.stiffness,mass:Y.motion.spring.gentle.mass,useNativeDriver:!0}),t=Animated.parallel([Animated.timing(J,{toValue:1,duration:L.duration("default"),easing:Easing.out(Easing.cubic),useNativeDriver:!1}),e]);return t.start(),()=>t.stop()}},[F,n,J,L,K,Q,Re,Y.motion]);const Pe=useCallback(()=>{!1!==f&&triggerHaptic("selection"),Te()},[Te,f]),Fe=useCallback(()=>{q&&(!1!==f&&triggerHaptic("notificationSuccess"),a?.(q),Te())},[Te,a,q,f]),Ne=K.interpolate({inputRange:[0,1],outputRange:L.range(320,0)}),Ye=_jsx(View,{style:$.titleRow,children:_jsx(Text,{style:$.title,accessibilityRole:"header",children:d})}),Le=_jsxs(View,{style:[$.card,g,y],accessibilityRole:"modal"===n?void 0:"none",accessible:!1,testID:N,children:["modal"===n?_jsx(GestureDetector,{gesture:Me,children:_jsxs(View,{style:$.grabArea,children:[_jsx(View,{style:$.handle}),Ye]})}):Ye,_jsxs(View,{style:$.headerRow,children:[_jsx(Pressable,{onPress:we,style:({pressed:e})=>[$.navBtn,e&&$.navBtnPressed,p],accessibilityRole:"button",accessibilityLabel:"days"===Z?"Previous month":"years"===Z?"Previous years":"Previous decades",hitSlop:8,...hitSlopMarker(8),children:_jsx(Text,{style:$.navText,children:"‹"})}),_jsx(Pressable,{onPress:Ce,style:[$.headerLabelWrap,h],accessibilityRole:"button",accessibilityLabel:"days"===Z?`${pe}, switch to year selection`:"years"===Z?`${pe}, switch to decade selection`:`${pe}, switch to year selection`,hitSlop:8,...hitSlopMarker(8),children:_jsxs(Animated.View,{style:[$.headerLabelInner,{transform:[{scale:oe}],opacity:"days"===Z?ae:1}],children:[_jsx(Animated.Text,{style:[$.headerLabel,{transform:[{translateX:"days"===Z?te:0}]}],accessibilityLiveRegion:"polite",children:pe}),_jsx(View,{style:$.headerCaret,children:(Y.settings.icons.chevronDown??defaultIcons.chevronDown)({size:Y.text.sm.size,color:Y.colors["text-muted"]})})]})}),_jsx(Pressable,{onPress:De,style:({pressed:e})=>[$.navBtn,e&&$.navBtnPressed,p],accessibilityRole:"button",accessibilityLabel:"days"===Z?"Next month":"years"===Z?"Next years":"Next decades",hitSlop:8,...hitSlopMarker(8),children:_jsx(Text,{style:$.navText,children:"›"})})]}),"days"===Z?_jsxs(_Fragment,{children:[_jsx(View,{style:$.weekdayRow,children:ye.map((e,t)=>_jsx(View,{style:$.weekdayCell,children:_jsx(Text,{style:$.weekdayText,children:e})},`${e}-${t}`))}),_jsx(Animated.View,{style:[$.grid,{opacity:ae,transform:[{translateX:te}]}],children:Array.from({length:6}).map((e,t)=>_jsx(View,{style:$.gridRow,children:ue.slice(7*t,7*t+7).map(e=>{const t=de(e.date),a=!!q&&isSameDay(e.date,q),r=isSameDay(e.date,E),s=a?Y.colors.primary:"transparent",i=r&&!a?Y.colors.primary:"transparent",o=a?Y.colors["on-primary"]:e.inMonth?t?Y.colors["text-disabled"]:Y.colors["text-body"]:Y.colors["text-subtle"],n=t?.3:e.inMonth?1:.4;return _jsx(Pressable,{disabled:t,onPress:()=>Ae(e),accessibilityRole:"button",accessibilityLabel:he.format(e.date),accessibilityState:{selected:a,disabled:t},"aria-selected":a,"aria-disabled":t,style:$.dayCell,children:_jsx(Animated.View,{style:[$.dayInner,{backgroundColor:s,borderColor:i,borderWidth:r&&!a?1.5:0,opacity:n},a?{transform:[{scale:re}]}:null],children:_jsx(Text,{style:[$.dayText,{color:o}],children:e.date.getDate()})})},e.iso)})},`r-${t}`))})]}):_jsx(Animated.View,"years"===Z?{style:[$.yearGrid,{opacity:se,transform:[{scale:ie}]}],children:Array.from({length:3}).map((e,t)=>_jsx(View,{style:$.gridRow,children:me.slice(4*t,4*t+4).map(e=>{const t=be(e),a=!!q&&q.getFullYear()===e,r=E.getFullYear()===e,s=a?Y.colors.primary:"transparent",i=r&&!a?Y.colors.primary:"transparent",o=a?Y.colors["on-primary"]:t?Y.colors["text-disabled"]:Y.colors["text-body"],n=t?.3:1;return _jsx(Pressable,{disabled:t,onPress:()=>je(e),accessibilityRole:"button",accessibilityLabel:`Year ${e}`,accessibilityState:{selected:a,disabled:t},"aria-selected":a,"aria-disabled":t,style:$.yearCell,children:_jsx(View,{style:[$.yearInner,{backgroundColor:s,borderColor:i,borderWidth:r&&!a?1.5:0,opacity:n}],children:_jsx(Text,{style:[$.yearText,{color:o}],children:e})})},`year-${e}`)})},`yr-${t}`))}:{style:[$.yearGrid,{opacity:se,transform:[{scale:ie}]}],children:Array.from({length:3}).map((e,t)=>_jsx(View,{style:$.gridRow,children:ge.slice(4*t,4*t+4).map(e=>{const t=e+10-1,a=fe(e),r=!!q&&decadeStartFor(q.getFullYear())===e,s=decadeStartFor(E.getFullYear())===e,i=r?Y.colors.primary:"transparent",o=s&&!r?Y.colors.primary:"transparent",n=r?Y.colors["on-primary"]:a?Y.colors["text-disabled"]:Y.colors["text-body"],l=a?.3:1;return _jsx(Pressable,{disabled:a,onPress:()=>Se(e),accessibilityRole:"button",accessibilityLabel:`Decade ${e} to ${t}`,accessibilityState:{selected:r,disabled:a},"aria-selected":r,"aria-disabled":a,style:$.yearCell,children:_jsxs(View,{style:[$.yearInner,{backgroundColor:i,borderColor:o,borderWidth:s&&!r?1.5:0,opacity:l}],children:[_jsx(Text,{style:[$.yearText,{color:n}],children:`${e}s`}),_jsx(Text,{style:[$.decadeRangeText,{color:r?Y.colors["on-primary"]:Y.colors["text-subtle"]}],children:`${e}-${t}`})]})},`decade-${e}`)})},`dec-${t}`))}),_jsxs(View,{style:$.footer,children:[_jsx(Pressable,{onPress:Pe,style:({pressed:e})=>[$.footerBtn,$.footerCancel,e&&$.footerBtnPressed,b],accessibilityRole:"button",accessibilityLabel:m,children:_jsx(Text,{style:[$.footerBtnText,{color:Y.colors["text-muted"]}],children:m})}),_jsx(Pressable,{onPress:Fe,disabled:!q,style:({pressed:e})=>[$.footerBtn,$.footerConfirm,{backgroundColor:Y.colors.primary,opacity:q?1:.5},e&&{backgroundColor:Y.colors["primary-hover"]},b],accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{disabled:!q},"aria-disabled":!q,children:_jsx(Text,{style:[$.footerBtnText,{color:Y.colors["on-primary"]}],children:u})})]})]}),ze=t?(M??(e=>e.toLocaleDateString()))(t):void 0,Be=!k;if("inline"===n)return F||Be?Be?_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:w,value:ze,placeholder:D,helperText:v,error:C,required:j,disabled:S,size:A,variant:V,clearable:T,onClear:_,onPress:()=>P(!0),triggerStyle:R,testID:x}),F?Le:null]}):Le:null;const $e=_jsx(Modal,{visible:F,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:Te,children:_jsx(ModalSafeArea,{onInsets:B,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,style:[$.backdrop,{backgroundColor:Ie}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:Te,accessibilityLabel:"Dismiss"}),_jsx(Animated.View,{style:[$.sheetWrap,{paddingBottom:Math.max(z.bottom,Y.space.lg),opacity:ke,transform:[{translateY:Animated.add(Ne,Q)}]}],onLayout:e=>{ee.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessibilityRole:"none",children:Le}),_jsx(ToastHost,{})]})})});return Be?_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:w,value:ze,placeholder:D,helperText:v,error:C,required:j,disabled:S,size:A,variant:V,clearable:T,onClear:_,onPress:()=>P(!0),triggerStyle:R,testID:x}),$e]}):$e},buildStyles=e=>{const t=e.shadow.popover;return StyleSheet.create({backdrop:{...StyleSheet.absoluteFill},sheetWrap:{position:"absolute",left:0,right:0,bottom:0,paddingHorizontal:e.space.md,paddingBottom:e.space.lg},card:{backgroundColor:e.colors.surface,borderRadius:e.radius.xl,...smoothCorners,padding:e.space.lg,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},grabArea:{marginTop:-e.space.lg,paddingTop:e.space.sm},handle:{alignSelf:"center",width:36,height:4,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors["border-subtle"],marginBottom:e.space.sm},titleRow:{marginBottom:e.space.sm},title:{fontSize:e.text.lg.size,fontWeight:e.weight.semibold,color:e.colors["text-body"]},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:e.space.md},navBtn:{width:36,height:36,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:e.colors["bg-subtle"]},navBtnPressed:{backgroundColor:e.colors["surface-pressed"]},navText:{fontSize:e.text["2xl"].size,lineHeight:26,color:e.colors["text-body"],fontWeight:e.weight.semibold},headerLabelWrap:{flex:1,alignItems:"center"},headerLabelInner:{flexDirection:"row",alignItems:"center",justifyContent:"center"},headerLabel:{fontSize:e.text.base.size,fontWeight:e.weight.semibold,color:e.colors["text-body"]},headerCaret:{marginLeft:e.space.xs,alignItems:"center",justifyContent:"center"},weekdayRow:{flexDirection:"row",marginBottom:e.space.xs},weekdayCell:{flex:1,alignItems:"center",paddingVertical:e.space.xs},weekdayText:{fontSize:e.text.xs.size,fontWeight:e.weight.medium,color:e.colors["text-subtle"],letterSpacing:e["letter-spacing"].wide},grid:{},gridRow:{flexDirection:"row"},dayCell:{flex:1,aspectRatio:1,alignItems:"center",justifyContent:"center",padding:e.space.xxs},dayInner:{width:"100%",height:"100%",borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},dayText:{fontSize:e.text.sm.size,fontWeight:e.weight.medium},yearGrid:{},yearCell:{flex:1,aspectRatio:1.6,alignItems:"center",justifyContent:"center",padding:e.space.xs},yearInner:{width:"100%",height:"100%",borderRadius:e.radius.lg,...smoothCorners,alignItems:"center",justifyContent:"center"},yearText:{fontSize:e.text.base.size,fontWeight:e.weight.semibold},decadeRangeText:{fontSize:e.text.xs.size,fontWeight:e.weight.medium,marginTop:e.space.xxs},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",marginTop:e.space.lg,gap:e.space.sm},footerBtn:{paddingHorizontal:e.space.lg,paddingVertical:e.space.sm,borderRadius:e.radius.md,...smoothCorners,minHeight:40,alignItems:"center",justifyContent:"center"},footerCancel:{backgroundColor:"transparent"},footerConfirm:{},footerBtnPressed:{opacity:.85},footerBtnText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold}})};export{DatePicker};export default DatePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{hasFieldText}from"../FieldBase/index.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,s=0;for(;r>=1024&&s<t.length-1;)r/=1024,s+=1;return`${r>=10||0===s?Math.round(r):Math.round(10*r)/10} ${t[s]}`};export const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,t)=>{const{files:r,defaultFiles:s,onChange:i,sources:o,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:h,disabled:m=!1,helperText:p,error:x,labels:b,haptic:f,onPick:y,onRemove:T,onError:j,onFilePress:S,onRetry:C,style:w,accessibilityLabel:F,testID:_}=e,v=useTheme(),z=useMemo(()=>buildStyles(v),[v]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),k=v.radius.md,R=v.colors.primary,[I,V]=useControllableState({value:r,defaultValue:s??[],onChange:i}),O=useRef(I);O.current=I;const B=useCallback(e=>{O.current=e,V(e)},[V]),[L,M]=useState(null),[H,$]=useState(!1),A=x??L??void 0,E="number"==typeof l&&I.length>=l,W=useCallback((e,t)=>{0!==e.length&&(M(e[0]),e.forEach(e=>j?.(e,t)),!1!==f&&triggerHaptic("notificationError"))},[j,f]),D=useCallback(async e=>{let t;try{t=await e.pick()}catch(e){return void W([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let s=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-O.current.length);s.length>e&&(r.push(P.errorTooMany(l)),s=s.slice(0,e))}const i=[];for(const e of s){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){r.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):i.push(e)}if(W(r),0===i.length)return;if(!d){B([...O.current,...i]),M(r.length>0?r[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void y?.(i)}const o=i.map(e=>({...e,status:"processing"}));B([...O.current,...o]);const u=[];for(const e of o)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};B(O.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){B(O.current.filter(t=>t.id!==e.id)),W([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&M(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),y?.(u)}},[l,n,a,c,d,P,W,B,y,f]),U=useCallback(e=>{if(m||E)return;const t=e?o.find(t=>t.key===e):1===o.length?o[0]:void 0;t?D(t):o.length>1&&$(!0)},[m,E,o,D]),G=useCallback(e=>{if(m)return;B(O.current.filter(t=>t.id!==e.id)),M(null);const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),T?.(e)},[m,B,T,f]),N=useCallback(()=>{B([]),M(null)},[B]);useImperativeHandle(t,()=>({open:U,clear:N}),[U,N]);const q=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,K=F??`Attachments. ${q}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Y=v.settings.icons.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return _jsxs(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:[_jsx(Text,{style:[z.tileOverlayText,{color:v.colors["on-scrim"]}],children:`${t}%`}),_jsx(View,{style:[z.tileProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.tileProgressFill,{width:`${t}%`,backgroundColor:v.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[z.doneBadge,{backgroundColor:v.colors.success}],children:_jsx(Text,{style:[z.doneBadgeText,{color:v.colors["on-success"]}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?_jsx(Image,{source:{uri:t},style:z.thumbnailImage}):_jsx(View,{style:[z.extensionTile,{backgroundColor:v.colors["bg-subtle"]}],children:_jsx(Text,{style:[z.extensionText,{color:v.colors["text-muted"],...fontFor(v,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>G(e),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[z.removeButton,{backgroundColor:v.colors.scrim}],children:_jsx(Text,{style:[z.removeButtonText,{color:v.colors["on-scrim"]}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[z.retryText,{color:v.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:m,remove:()=>G(e),retry:C?()=>C(e):void 0},s=g?g(r):"card"===u?(e=>{const{file:t}=e;return _jsxs(View,{style:[z.tile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return _jsxs(View,{style:[z.listRow,{borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border,backgroundColor:v.colors.bg}],children:[_jsxs(View,{style:[z.listThumb,{borderRadius:v.radius.sm,...smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:z.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[z.listName,{color:v.colors["text-body"],fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:t.name}),_jsx(Text,{numberOfLines:1,style:[z.listSubtitle,{color:"error"===t.status?v.colors["danger-text"]:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?_jsx(View,{style:[z.listProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:v.colors.primary}]})}):null]}),retryButton(t),_jsx(Pressable,{onPress:()=>G(t),disabled:m,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:_jsx(Text,{style:[z.listRemoveText,{color:v.colors["text-subtle"]}],children:"×"})})]})})(r);return _jsx(Pressable,{onPress:S?()=>S(e):void 0,disabled:m||!S,accessibilityLabel:fileA11yLabel(e),children:s},e.id)},J={open:U,disabled:m||E,fileCount:I.length,atCapacity:E},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:K,accessibilityState:{disabled:m||E},"aria-disabled":m||E,style:({pressed:t})=>[z.trigger,e?z.triggerCompact:null,{borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:t?v.colors["surface-pressed"]:v.colors.bg,opacity:m||E?.55:1}],children:[_jsxs(View,{style:z.triggerRow,children:[Y?Y({size:16,color:v.colors.primary}):null,_jsx(Text,{style:[z.triggerText,{color:v.colors.primary,fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&p?_jsx(Text,{style:[z.helperText,{color:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:p}):null]}),Q=_jsx(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[z.tile,z.addTile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:e?v.colors["surface-pressed"]:"transparent",opacity:m||E?.55:1}],children:_jsx(Text,{style:[z.addTileText,{color:v.colors.primary}],children:"+"})});return _jsxs(View,{style:[z.container,w],testID:_,accessibilityLabel:K,children:["card"===u?0===I.length?h?h(J):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[z.strip,{columnGap:v.space.sm}],children:[I.map(renderOneFile),h?h(J):E||m?null:Q]}):_jsxs(View,{style:{rowGap:v.space.sm},children:[h?h(J):E?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),hasFieldText(A)?_jsx(Text,{accessibilityLiveRegion:"polite",style:[z.errorText,{color:v.colors["danger-text"],fontSize:v.text.xs.size,marginTop:v.space.xxs}],children:A}):null,_jsx(OptionSheet,{open:H,onClose:()=>$(!1),title:P.sheetTitle,options:o,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{$(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",minHeight:48,paddingVertical:e.space.md,paddingHorizontal:e.space.lg},triggerCompact:{minHeight:40,paddingVertical:e.space.sm},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:e.space.xs,textAlign:"center"},strip:{paddingVertical:e.space.xxs},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:e.text["3xl"].size,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:e.text.sm.size,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:e.text.sm.size,includeFontPadding:!1,marginBottom:e.space.xs},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:e.text.xs.size,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:e.text.sm.size,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:e.text.xl.size,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:e.space.sm,columnGap:e.space.sm},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:e.space.xxs},listProgressTrack:{height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden",marginTop:e.space.xs},listProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},listRemoveText:{fontSize:e.text["2xl"].size,includeFontPadding:!1,paddingHorizontal:e.space.xs},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{hasFieldText}from"../FieldBase/index.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,s=0;for(;r>=1024&&s<t.length-1;)r/=1024,s+=1;return`${r>=10||0===s?Math.round(r):Math.round(10*r)/10} ${t[s]}`};export const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,t)=>{const{files:r,defaultFiles:s,onChange:i,sources:o,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:h,renderTrigger:g,disabled:m=!1,helperText:p,error:x,labels:b,haptic:f,onPick:y,onRemove:T,onError:S,onFilePress:j,onRetry:C,style:w,accessibilityLabel:F,testID:_}=e,v=useTheme(),z=useMemo(()=>buildStyles(v),[v]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),k=v.radius.md,R=v.colors.primary,[I,V]=useControllableState({value:r,defaultValue:s??[],onChange:i}),M=useRef(I);M.current=I;const O=useCallback(e=>{M.current=e,V(e)},[V]),[B,L]=useState(null),[H,$]=useState(!1),A=x??B??void 0,E="number"==typeof l&&I.length>=l,W=useCallback((e,t)=>{0!==e.length&&(L(e[0]),e.forEach(e=>{S?.(e,t)}),!1!==f&&triggerHaptic("notificationError"))},[S,f]),D=useCallback(async e=>{let t;try{t=await e.pick()}catch(e){return void W([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let s=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-M.current.length);s.length>e&&(r.push(P.errorTooMany(l)),s=s.slice(0,e))}const i=[];for(const e of s){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){r.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):i.push(e)}if(W(r),0===i.length)return;if(!d){O([...M.current,...i]),L(r.length>0?r[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void y?.(i)}const o=i.map(e=>({...e,status:"processing"}));O([...M.current,...o]);const u=[];for(const e of o)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};O(M.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){O(M.current.filter(t=>t.id!==e.id)),W([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&L(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),y?.(u)}},[l,n,a,c,d,P,W,O,y,f]),U=useCallback(e=>{if(m||E)return;const t=e?o.find(t=>t.key===e):1===o.length?o[0]:void 0;t?D(t):o.length>1&&$(!0)},[m,E,o,D]),G=useCallback(e=>{if(m)return;O(M.current.filter(t=>t.id!==e.id)),L(null);const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),T?.(e)},[m,O,T,f]),N=useCallback(()=>{O([]),L(null)},[O]);useImperativeHandle(t,()=>({open:U,clear:N}),[U,N]);const q=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,K=F??`Attachments. ${q}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Y=v.settings.icons.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return _jsxs(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:[_jsx(Text,{style:[z.tileOverlayText,{color:v.colors["on-scrim"]}],children:`${t}%`}),_jsx(View,{style:[z.tileProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.tileProgressFill,{width:`${t}%`,backgroundColor:v.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[z.doneBadge,{backgroundColor:v.colors.success}],children:_jsx(Text,{style:[z.doneBadgeText,{color:v.colors["on-success"]}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?_jsx(Image,{source:{uri:t},style:z.thumbnailImage}):_jsx(View,{style:[z.extensionTile,{backgroundColor:v.colors["bg-subtle"]}],children:_jsx(Text,{style:[z.extensionText,{color:v.colors["text-muted"],...fontFor(v,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>G(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[z.removeButton,{backgroundColor:v.colors.scrim}],children:_jsx(Text,{style:[z.removeButtonText,{color:v.colors["on-scrim"]}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[z.retryText,{color:v.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:m,remove:()=>G(e),retry:C?()=>C(e):void 0},s=h?h(r):"card"===u?(e=>{const{file:t}=e;return _jsxs(View,{style:[z.tile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return _jsxs(View,{style:[z.listRow,{borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border,backgroundColor:v.colors.bg}],children:[_jsxs(View,{style:[z.listThumb,{borderRadius:v.radius.sm,...smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:z.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[z.listName,{color:v.colors["text-body"],fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:t.name}),_jsx(Text,{numberOfLines:1,style:[z.listSubtitle,{color:"error"===t.status?v.colors["danger-text"]:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?_jsx(View,{style:[z.listProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:v.colors.primary}]})}):null]}),retryButton(t),_jsx(Pressable,{onPress:()=>G(t),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:_jsx(Text,{style:[z.listRemoveText,{color:v.colors["text-subtle"]}],children:"×"})})]})})(r);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:m||!j,accessibilityLabel:fileA11yLabel(e),children:s},e.id)},J={open:U,disabled:m||E,fileCount:I.length,atCapacity:E},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:K,accessibilityState:{disabled:m||E},"aria-disabled":m||E,style:({pressed:t})=>[z.trigger,e?z.triggerCompact:null,{borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:t?v.colors["surface-pressed"]:v.colors.bg,opacity:m||E?.55:1}],children:[_jsxs(View,{style:z.triggerRow,children:[Y?Y({size:16,color:v.colors.primary}):null,_jsx(Text,{style:[z.triggerText,{color:v.colors.primary,fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&p?_jsx(Text,{style:[z.helperText,{color:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:p}):null]}),Q=_jsx(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[z.tile,z.addTile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:e?v.colors["surface-pressed"]:"transparent",opacity:m||E?.55:1}],children:_jsx(Text,{style:[z.addTileText,{color:v.colors.primary}],children:"+"})});return _jsxs(View,{style:[z.container,w],testID:_,accessibilityLabel:K,children:["card"===u?0===I.length?g?g(J):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[z.strip,{columnGap:v.space.sm}],children:[I.map(renderOneFile),g?g(J):E||m?null:Q]}):_jsxs(View,{style:{rowGap:v.space.sm},children:[g?g(J):E?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),hasFieldText(A)?_jsx(Text,{accessibilityLiveRegion:"polite",style:[z.errorText,{color:v.colors["danger-text"],fontSize:v.text.xs.size,marginTop:v.space.xxs}],children:A}):null,_jsx(OptionSheet,{open:H,onClose:()=>$(!1),title:P.sheetTitle,options:o,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{$(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",minHeight:48,paddingVertical:e.space.md,paddingHorizontal:e.space.lg},triggerCompact:{minHeight:40,paddingVertical:e.space.sm},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:e.space.xs,textAlign:"center"},strip:{paddingVertical:e.space.xxs},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:e.text["3xl"].size,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:e.text.sm.size,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:e.text.sm.size,includeFontPadding:!1,marginBottom:e.space.xs},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:e.text.xs.size,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:e.text.sm.size,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:e.text.xl.size,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:e.space.sm,columnGap:e.space.sm},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:e.space.xxs},listProgressTrack:{height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden",marginTop:e.space.xs},listProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},listRemoveText:{fontSize:e.text["2xl"].size,includeFontPadding:!1,paddingHorizontal:e.space.xs},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef}from"react";import{Animated,Pressable,StyleSheet}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const GLASS_RIM_WIDTH=1,HIT_SLOP=6,SOFT_FILL_OPACITY=.14,SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:48,icon:24}},toneFor=(e,o)=>{switch(o){case"secondary":return{base:e.colors.neutral,on:e.colors["on-neutral"],fg:e.colors.neutral};case"success":return{base:e.colors.success,on:e.colors["on-success"],fg:e.colors["success-text"]};case"warning":return{base:e.colors.warning,on:e.colors["on-warning"],fg:e.colors["warning-text"]};case"danger":return{base:e.colors.danger,on:e.colors["on-danger"],fg:e.colors["danger-text"]};case"neutral":return{base:e.colors["bg-muted"],on:e.colors["text-body"],fg:e.colors["text-body"]};default:return{base:e.colors.primary,on:e.colors["on-primary"],fg:e.colors.primary}}},IconButton=forwardRef((e,o)=>{const{icon:s,iconVariant:r,onPress:t,accessibilityLabel:n,tone:i="primary",variant:
|
|
1
|
+
"use strict";import{forwardRef}from"react";import{Animated,Pressable,StyleSheet}from"react-native";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx}from"react/jsx-runtime";const GLASS_RIM_WIDTH=1,HIT_SLOP=6,SOFT_FILL_OPACITY=.14,SIZE_MAP={sm:{diameter:32,icon:16},md:{diameter:40,icon:20},lg:{diameter:48,icon:24}},toneFor=(e,o)=>{switch(o){case"secondary":return{base:e.colors.neutral,outline:e.colors.border,on:e.colors["on-neutral"],fg:e.colors.neutral};case"success":return{base:e.colors.success,outline:e.colors.success,on:e.colors["on-success"],fg:e.colors["success-text"]};case"warning":return{base:e.colors.warning,outline:e.colors.warning,on:e.colors["on-warning"],fg:e.colors["warning-text"]};case"danger":return{base:e.colors.danger,outline:e.colors.danger,on:e.colors["on-danger"],fg:e.colors["danger-text"]};case"neutral":return{base:e.colors["bg-muted"],outline:e.colors.border,on:e.colors["text-body"],fg:e.colors["text-body"]};default:return{base:e.colors.primary,outline:e.colors.primary,on:e.colors["on-primary"],fg:e.colors.primary}}},IconButton=forwardRef((e,o)=>{const{icon:s,iconVariant:r,onPress:t,accessibilityLabel:n,tone:i="primary",variant:l="solid",size:c="md",shape:a="circle",active:d=!1,disabled:u=!1,loading:m=!1,haptic:b,style:p,testID:f}=e,g=useTheme(),y=SIZE_MAP[c],I=u||m,{style:h,pressIn:S,pressOut:x}=usePressAnimation({scaleTo:.92,enabled:!I}),{base:j,outline:P,on:_,fg:w}=toneFor(g,i),A=d?"solid":l;let C="transparent",O="transparent",T=0,H=I?g.colors["text-disabled"]:w;"solid"===A?(C=I?g.colors["surface-disabled"]:j,H=I?g.colors["text-disabled"]:_):"soft"===A?C=I?g.colors["surface-disabled"]:tintOf(j,.14,g.colors["bg-subtle"]):"outline"===A?(O=I?g.colors.border:P,T=g.size.border):"glass"===A&&(C=g.colors["glass-fill"],O=g.colors["glass-border"],T=1,H=I?g.colors["text-disabled"]:g.colors["on-glass"]);const L={color:H,size:y.icon,disabled:I},v="circle"===a?y.diameter/2:g.radius.md;return _jsx(Pressable,{ref:o,onPress:e=>{if(I)return;const o=resolveHaptic(b,"selection");o&&triggerHaptic(o),t?.(e)},onPressIn:S,onPressOut:x,disabled:I,accessibilityRole:"button",accessibilityLabel:n,accessibilityState:{disabled:I,selected:d},"aria-disabled":I,"aria-selected":d,hitSlop:6,...hitSlopMarker(6),testID:f,style:({pressed:e})=>[styles.base,{width:y.diameter,height:y.diameter,borderRadius:v,...smoothCorners,backgroundColor:C,borderColor:O,borderWidth:T,opacity:e&&"solid"!==A?.7:1},p],children:_jsx(Animated.View,{style:[styles.content,h],children:m?_jsx(Spinner,{size:"sm",color:H}):renderSlotIcon(s,L,r)})})});IconButton.displayName="IconButton";const styles=StyleSheet.create({base:{alignItems:"center",justifyContent:"center"},content:{alignItems:"center",justifyContent:"center"}});export{IconButton};export default IconButton;
|