@webority/mobile-ui 0.96.0 → 0.98.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 +6747 -6580
- package/dist/canvas-kit/manifest.json +19 -1
- 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/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/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/index.js +1 -1
- package/lib/commonjs/theme/index.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/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/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/index.js +1 -1
- package/lib/module/theme/index.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 +6 -6
- 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 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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,Modal as RNModal,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{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{Carousel}from"../Carousel/index.js";import{Skeleton}from"../Skeleton/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:u,containerStyle:c,testID:h})=>{const
|
|
1
|
+
"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Dimensions,Image,Pressable,Modal as RNModal,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{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{Carousel}from"../Carousel/index.js";import{Skeleton}from"../Skeleton/index.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const MAX_SCALE_FALLBACK=4,MIN_SCALE_FALLBACK=1,DOUBLE_TAP_SCALE_FALLBACK=2,SPRING_CONFIG={damping:18,stiffness:220,mass:1},ImageGallery=({images:e,initialIndex:t=0,showThumbnails:a=!0,showCounter:i=!0,enableLightbox:l=!0,enablePinchZoom:s=!0,onIndexChange:o,haptic:n,loading:r=!1,accessibilityLabel:u,containerStyle:c,testID:h})=>{const m=useTheme(),d=useMemo(()=>buildStyles(m),[m]),[g,p]=useState(clamp(t,0,Math.max(0,e.length-1))),[b,S]=useState(!1),x=useCallback(e=>{p(e),o?.(e)},[o]),v=useCallback(()=>{if(!l)return;const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!0)},[l,n]),I=useCallback(()=>{const e=resolveHaptic(n,"selection");e&&triggerHaptic(e),S(!1)},[n]),y=useCallback((t,a)=>{const i=t.alt??`Image ${a+1} of ${e.length}`;return _jsx(Pressable,{onPress:v,accessibilityRole:"image",accessibilityLabel:i,accessibilityHint:l?"Tap to open fullscreen":void 0,style:d.imageWrap,children:_jsx(Image,{source:t.source,style:d.image,resizeMode:"cover"})})},[l,e.length,v,d]),w=useCallback(e=>_jsx(Image,{source:e.source,style:d.thumbnailImage,resizeMode:"cover"}),[d]),C=_jsxs(View,{style:[d.container,c],testID:h,accessibilityLabel:u??"Image gallery",children:[_jsxs(View,{style:d.carouselWrap,children:[_jsx(Carousel,{data:e,defaultIndex:t,onIndexChange:x,renderItem:y,showPagination:!1,showThumbnails:a,renderThumbnail:w,haptic:n}),i&&e.length>0?_jsx(View,{style:d.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[d.counterText,{color:m.colors["on-scrim"]}],accessibilityLabel:`Image ${g+1} of ${e.length}`,children:`${g+1} / ${e.length}`})}):null]}),l?_jsx(Lightbox,{visible:b,images:e,initialIndex:g,enablePinchZoom:s,showCounter:i,onClose:I,onIndexChange:x,haptic:n}):null]});return r?_jsx(ImageGallerySkeleton,{images:e,showThumbnails:a,showCounter:i,containerStyle:c,testID:h}):C};ImageGallery.displayName="ImageGallery";const ImageGallerySkeleton=({images:e,showThumbnails:t=!0,showCounter:a=!0,containerStyle:i,testID:l})=>{const s=useTheme(),o=Math.min(e?.length||4,6);return _jsxs(View,{style:[{width:"100%"},i],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,children:[_jsxs(View,{style:{position:"relative"},children:[_jsx(Skeleton,{width:"100%",height:280,radius:"lg"}),a?_jsx(View,{style:{position:"absolute",top:12,right:12},children:_jsx(Skeleton,{width:44,height:22,radius:"pill"})}):null]}),t?_jsx(View,{style:{flexDirection:"row",marginTop:s.space.md},children:Array.from({length:o}).map((e,t)=>_jsx(Skeleton,{width:64,height:64,radius:"md",style:{marginRight:s.space.sm}},`sk-thumb-${t}`))}):null]})};ImageGallerySkeleton.displayName="ImageGallerySkeleton",ImageGallery.Skeleton=ImageGallerySkeleton;const Lightbox=({visible:e,images:t,initialIndex:a,enablePinchZoom:i,showCounter:l,onClose:s,onIndexChange:o,haptic:n})=>{const r=useTheme(),u=useMemo(()=>buildLightboxStyles(r),[r]),c=useRef(null),[h,m]=useState(a),d=useCallback(e=>{if(e!==h){const t=resolveHaptic(n,"selection");t&&triggerHaptic(t),m(e),o(e)}},[h,o,n]),g=useCallback((e,a)=>_jsx(ZoomableImage,{image:e,index:a,total:t.length,active:a===h,enabled:i,maxScale:4,minScale:1,doubleTapScale:2,haptic:n}),[h,i,t.length,n]),p=t[h]?.caption;return _jsx(RNModal,{visible:e,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"fade",onRequestClose:s,accessibilityViewIsModal:!0,children:_jsxs(View,{style:u.backdrop,accessibilityViewIsModal:!0,children:[_jsx(Carousel,{ref:c,data:t,defaultIndex:a,onIndexChange:d,renderItem:g,showPagination:!1,haptic:n}),l&&t.length>0?_jsx(View,{style:u.counterPill,pointerEvents:"none",children:_jsx(Text,{style:[u.counterText,{color:r.colors["on-scrim"]}],accessibilityLabel:`Image ${h+1} of ${t.length}`,children:`${h+1} / ${t.length}`})}):null,_jsx(Pressable,{onPress:s,accessibilityRole:"button",accessibilityLabel:"Close gallery",style:u.closeButton,hitSlop:12,...hitSlopMarker(12),children:(r.settings.icons.close??defaultIcons.close)({size:24,color:r.colors["on-scrim"]})}),p?_jsx(Animated.View,{style:u.captionWrap,entering:void 0,accessibilityElementsHidden:!1,children:_jsx(Text,{style:u.captionText,numberOfLines:3,children:p})}):null,_jsx(ToastHost,{})]})})},ZoomableImage=({image:e,index:t,total:a,active:i,enabled:l,maxScale:s,minScale:o,doubleTapScale:n,haptic:r})=>{const u=Dimensions.get("window"),c=useSharedValue(1),h=useSharedValue(1),m=useSharedValue(0),d=useSharedValue(0),g=useSharedValue(0),p=useSharedValue(0),b=useCallback(()=>{c.value=withSpring(1,SPRING_CONFIG),h.value=1,m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),g.value=0,p.value=0},[c,h,m,d,g,p]);React.useEffect(()=>{i||(c.value=withTiming(1,{duration:150}),m.value=withTiming(0,{duration:150}),d.value=withTiming(0,{duration:150}),h.value=1,g.value=0,p.value=0)},[i,c,m,d,h,g,p]);const S=useCallback(()=>{!1!==r&&triggerHaptic("impactLight")},[r]),x=useMemo(()=>Gesture.Pinch().enabled(l).onStart(()=>{"worklet";h.value=c.value}).onUpdate(e=>{"worklet";const t=h.value*e.scale;c.value=t<o?o+.3*(t-o):t>s?s+.2*(t-s):t}).onEnd(()=>{"worklet";return c.value<o?(c.value=withSpring(o,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),h.value=o,g.value=0,void(p.value=0)):c.value>s?(c.value=withSpring(s,SPRING_CONFIG),void(h.value=s)):void(h.value=c.value)}),[l,c,h,m,d,g,p,o,s]),v=useMemo(()=>Gesture.Pan().minPointers(1).maxPointers(1).onStart(()=>{"worklet";g.value=m.value,p.value=d.value}).onUpdate(e=>{"worklet";c.value<=1||(m.value=g.value+e.translationX,d.value=p.value+e.translationY)}).onEnd(()=>{"worklet";g.value=m.value,p.value=d.value}),[c,m,d,g,p]),I=useMemo(()=>Gesture.Tap().numberOfTaps(2).onEnd(()=>{"worklet";runOnJS(S)(),c.value>1?(c.value=withSpring(1,SPRING_CONFIG),m.value=withSpring(0,SPRING_CONFIG),d.value=withSpring(0,SPRING_CONFIG),h.value=1,g.value=0,p.value=0):(c.value=withSpring(n,SPRING_CONFIG),h.value=n)}),[c,h,m,d,g,p,S,n]),y=useMemo(()=>Gesture.Race(x,v,I),[x,v,I]),w=useAnimatedStyle(()=>({transform:[{translateX:m.value},{translateY:d.value},{scale:c.value}]}));React.useEffect(()=>{i||b()},[i,b]);const C=e.alt??`Image ${t+1} of ${a}`;return _jsx(GestureDetector,{gesture:y,children:_jsx(Animated.View,{style:[lightboxImageStyles.container,{width:u.width}],children:_jsx(Animated.Image,{source:e.source,resizeMode:"contain",style:[lightboxImageStyles.image,w],accessibilityLabel:C,accessible:!0})})})},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),buildStyles=e=>StyleSheet.create({container:{width:"100%"},carouselWrap:{width:"100%",position:"relative"},imageWrap:{width:"100%",aspectRatio:16/9,backgroundColor:e.colors["bg-subtle"],overflow:"hidden",borderRadius:e.radius.md,...smoothCorners},image:{width:"100%",height:"100%"},thumbnailImage:{width:"100%",height:"100%"},counterPill:{position:"absolute",top:12,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.55)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold}}),buildLightboxStyles=e=>StyleSheet.create({backdrop:{flex:1,backgroundColor:"#000",justifyContent:"center"},counterPill:{position:"absolute",top:48,alignSelf:"center",paddingHorizontal:e.space.md,paddingVertical:e.space.xs,borderRadius:e.radius.pill,...smoothCorners,backgroundColor:"rgba(0,0,0,0.6)"},counterText:{fontSize:e.text.sm.size,fontWeight:e.weight.semibold},closeButton:{position:"absolute",top:44,right:16,width:40,height:40,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.5)"},captionWrap:{position:"absolute",left:0,right:0,bottom:32,paddingHorizontal:e.space.xl},captionText:{color:"#FFFFFF",fontSize:e.text.base.size,lineHeight:21,textAlign:"center"}}),lightboxImageStyles=StyleSheet.create({container:{flex:1,alignItems:"center",justifyContent:"center"},image:{width:"100%",height:"100%"}});export{ImageGallery};export default ImageGallery;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldLabel}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const InlineSelect=forwardRef((e,t)=>{const{options:l,getOptionLabel:i,getOptionValue:s,getOptionDisabled:o,getOptionDescription:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useMemo,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,resolveFieldSize,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Chevron}from"../FieldBase/Chevron.js";import{FieldLabel}from"../FieldBase/FieldBase.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const InlineSelect=forwardRef((e,t)=>{const{options:l,getOptionLabel:i,getOptionValue:s,getOptionDisabled:o,getOptionDescription:r,getOptionIcon:a,value:n,onChange:c,placeholder:d,label:p,title:b,searchable:S=!1,haptic:u,disabled:m=!1,size:x="md",color:f,chevronColor:h,chevronSize:g,textStyle:y,style:O,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F,accessibilityLabel:k,testID:_}=e,I=useTheme(),T=useMemo(()=>buildStyles(I),[I]),z=resolveFieldSize(I,x),L=useCallback(e=>i?i(e):e.label??"",[i]),H=useCallback(e=>s?s(e):e.value,[s]),w=useCallback(e=>o?o(e):!0===e.disabled,[o]),D=useCallback(e=>r?r(e):e.description,[r]),M=useCallback(e=>a?a(e):e.icon,[a]),[P,V]=useState(!1),B=useMemo(()=>{if(null!=n)return l.find(e=>H(e)===n)},[l,n,H]),R=useCallback(e=>n===e,[n]),$=useCallback(()=>{if(m)return;const e=resolveHaptic(u,"selection");e&&triggerHaptic(e),V(!0)},[m,u]),N=useCallback(()=>{V(!1)},[]),G=useCallback(e=>{if(w(e))return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),c(H(e)),N()},[w,H,c,N,u]),q=m?I.colors["text-disabled"]:f??I.colors.primary,A=void 0!==B?L(B):d??"Select",E=void 0!==B?`Selected: ${L(B)}`:d??"No selection",J=k??`${p??b??"Select"}. ${E}`,K=_jsxs(Pressable,{ref:t,onPress:$,disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:m,expanded:P},"aria-disabled":m,"aria-expanded":P,testID:_,style:({pressed:e})=>[T.trigger,{columnGap:I.space.xs,opacity:e&&!m?.6:1},O],children:[_jsx(Text,{style:[T.triggerText,{color:q,fontSize:z.text,...fontFor(I,"medium")},y],numberOfLines:1,children:A}),_jsx(Chevron,{color:h??q,size:g??z.icon,open:P})]});return _jsxs(_Fragment,{children:[p?_jsxs(View,{style:T.labelled,children:[_jsx(FieldLabel,{size:x,children:p}),K]}):K,_jsx(OptionSheet,{open:P,onClose:N,title:b,accessibilityLabel:p??b??d??"Options",options:l,labelOf:L,getValue:H,disabledOf:w,descriptionOf:D,iconOf:M,isSelected:R,onSelect:G,searchable:S,optionStyle:j,selectedOptionStyle:C,optionTextStyle:v,selectedOptionTextStyle:F})]})});InlineSelect.displayName="InlineSelect";const buildStyles=e=>StyleSheet.create({labelled:{alignItems:"flex-start"},trigger:{flexDirection:"row",alignItems:"center"},triggerText:{includeFontPadding:!1}});export{InlineSelect};export default InlineSelect;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveFieldSize,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Input=forwardRef((e,t)=>{const{label:i,help:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveFieldSize,setNativeValue,useTheme}from"../../theme/index.js";import{mergeRefs,triggerHaptic}from"../../utils/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Button}from"../Button/index.js";import{FieldBase,FieldErrorGlyph,FieldLabel,fieldTextAsString,hasFieldText,RequiredPlaceholder,resolveFieldTextStyle}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{NotationInkContext,useNotationInk}from"../Notation/Notation.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Input=forwardRef((e,t)=>{const{label:i,help:o,placeholder:n,value:l,onChangeText:s,error:r,helperText:a,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:p=!1,multiline:f=!1,leftIcon:g,rightIcon:m,unit:x,unitStyle:h,prefix:y,prefixStyle:b,readOnly:v=!1,action:S,actionStyle:j,size:w="md",variant:T,labelMode:F,required:I=!1,maxLength:R,showCounter:_=!0,textAlign:V,format:A,parse:k,style:z,containerStyle:N,inputStyle:C,labelStyle:L,messageStyle:P,borderRadius:D,onFocus:H,onBlur:B,accessibilityLabel:M,testID:E,editable:O,...q}=e,G=useTheme(),W=useMemo(()=>buildStyles(G),[G]),$=resolveFieldSize(G,w),X=G.components.input[w]["multiline-min-height"],J=Math.round($.text*G.leading.body),K=T??G.settings.components.input?.defaultVariant??G.settings.components.field?.defaultVariant??"outlined",Q=F??G.settings.components.input?.defaultLabelMode??"top",[U,Y]=useState(!1),[Z,ee]=useState(!1),te="password"===d||u||c,ie="password"===d||u,oe="textarea"===d||f,ne=oe?Math.round(.1*$.text):0,le="string"==typeof l&&l.length>0,se=hasFieldText(r),re=!0===r||se,ae=hasFieldText(a),de=se||!re&&ae,ce=hasFieldText(i),ue=hasFieldText(y),pe=!p&&!1!==O,fe=U||le||ue,ge=useRef(null),me=useMemo(()=>mergeRefs(ge,t),[t]),xe=useCallback(()=>{pe&&ge.current?.focus()},[pe]),he=ce&&"float"===Q,ye=useRef(createAnimatedValue(0)).current,be=useRef(createAnimatedValue(de?1:0)).current;useEffect(()=>{const e=Animated.timing(be,{toValue:de?1:0,duration:G.motion.duration.fast,easing:Easing.bezier(...G.motion.ease["in-out"]),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,be,G.motion.duration.fast,G.motion.ease["in-out"]]);const ve=useReducedMotion(),Se=G.settings.components.input?.shakeOnError??!1,je=useRef(re);useEffect(()=>{if(!Se)return void(je.current=re);let e;return re&&!je.current&&(ve||(setNativeValue(ye,0),e=Animated.sequence([Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:-1,duration:50,useNativeDriver:!0}),Animated.timing(ye,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),triggerHaptic("notificationError")),je.current=re,()=>e?.stop()},[re,ye,Se,ve]);const we=useCallback(e=>{Y(!0),H?.(e)},[H]),Te=useCallback(e=>{Y(!1),B?.(e)},[B]),Fe=useCallback(()=>{triggerHaptic("selection"),ee(e=>!e)},[]),Ie=G.colors["field-caret"],Re=D??$.radius,Ve=G.settings.components.input?.tintLabelOnFocus??!1,Ae=U&&Ve?G.colors["field-border-focus"]:G.colors["field-label"],ke=ye.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),ze=Boolean(m)||Boolean(x)||ie,Ne="underline"===K,Ce=g?$.icon+G.space.md+1+G.space.md:0,Le=useFloatingLabel({label:i,enabled:he,floated:fe,required:I,variant:K,sizeTokens:$,leadingOffset:Ce,trailingOffset:ze?$.icon+G.space.sm:0,textAlign:V,paddingLeft:Ne?G.space.none:$["padding-x"],lineHeight:oe?J:void 0,restNudge:ne,floatTrim:oe?2:0,color:Ae,style:L}),Pe=resolveFieldTextStyle(G,{disabled:p}),De=Pe.color,He=Pe.placeholderColor,Be=I&&!ce&&!le&&"string"==typeof n&&n.length>0,Me=re?r:a,Ee=_&&"number"==typeof R&&"string"==typeof l?`${l.length} / ${R}`:null,Oe=re?G.colors["field-message"]:G.colors["text-muted"],qe=useNotationInk(P,$["message-text"],Oe),Ge=M??fieldTextAsString(i)??n,We=p?G.colors["field-icon-disabled"]:U?G.colors["field-icon-focus"]:G.colors["field-icon"],$e={focused:U,disabled:p,error:re,color:We,size:$.icon},renderSlot=e=>renderSlotIcon(e,$e),Xe=(()=>{if(ie){const e=(Z?G.settings.icons.eyeOff:G.settings.icons.eye)??(Z?defaultIcons.eyeOff:defaultIcons.eye);return _jsx(Pressable,{onPress:Fe,disabled:!pe,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.icon,color:We})})}const e=x?_jsx(Text,{style:[W.unit,{fontSize:$.text,color:He},h],children:x}):null,t=m?_jsx(View,{children:renderSlot(m)}):null;return e&&t?_jsxs(View,{style:W.trailingRow,children:[e,t]}):e??t})(),Je=g?_jsx(View,{children:renderSlot(g)}):null,Ke=StyleSheet.flatten(b),Qe=Ke?.fontSize??$.text,Ue=Ke?.color??He,Ye=useMemo(()=>({fontSize:Qe,color:Ue}),[Qe,Ue]),Ze=ue?"string"==typeof y||"number"==typeof y?_jsx(Text,{style:[W.prefix,{fontSize:$.text,color:He,marginRight:G.space.xs,lineHeight:oe?J:void 0,paddingTop:oe?ne:void 0},b],children:y}):_jsx(View,{style:[W.prefixNode,{marginRight:G.space.xs,minHeight:oe?J:void 0,justifyContent:"center",paddingTop:oe?ne:void 0}],children:_jsx(Text,{style:[W.prefix,{fontSize:$.text,color:He,lineHeight:oe?J:void 0},b],children:_jsx(NotationInkContext.Provider,{value:Ye,children:y})})}):null,et=S?_jsx(Button,{variant:S.variant??"outline",tone:S.tone??"primary",size:w,title:S.label,leftIcon:S.icon,loading:S.loading,disabled:p||S.disabled,onPress:S.onPress,pressAnimation:!1,testID:S.testID,style:[W.action,{minHeight:$["min-height"],alignSelf:oe?"flex-start":"stretch"},j]}):null;return _jsxs(Animated.View,{style:[W.container,{transform:[{translateX:ke}]},z],children:[ce&&!he?_jsx(FieldLabel,{size:w,required:I,help:o,color:Ae,style:L,children:i}):null,_jsxs(View,{style:[W.fieldRow,{columnGap:G.space.sm,alignItems:oe?"flex-start":"stretch"}],children:[_jsxs(View,{style:W.fieldWrapper,children:[_jsxs(FieldBase,{size:w,variant:K,focused:U,disabled:p,error:re,filled:le,minHeight:oe?X:void 0,borderRadius:Re,leading:Je,leadingDivider:null!=g,paddingLeft:Ne?G.space.none:void 0,trailing:Xe,slotAlign:oe?"top":"center",slotLineHeight:oe?J:void 0,topNotch:Le.topNotch,onPress:xe,pressFeedback:!1,style:N,children:[Ze,_jsxs(View,{style:W.inputWrap,children:[_jsx(TextInput,{ref:me,style:[W.input,{color:De,fontSize:$.text,...Pe.weightStyle,paddingLeft:Ne?G.space.none:void 0,minHeight:oe?X-2*$["padding-y"]:void 0,lineHeight:oe?J:void 0,paddingTop:oe?ne:void 0,textAlignVertical:oe?"top":"center"},C],textAlign:V,placeholder:he&&!fe||Be?void 0:n,placeholderTextColor:He,value:A&&null!=l?A(l):l,onChangeText:e=>{s&&s(k?k(e):e)},onFocus:we,onBlur:Te,editable:pe,readOnly:v,secureTextEntry:te&&!Z,multiline:oe,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:R,selectionColor:Ie,accessibilityLabel:Ge,accessibilityState:{disabled:p},"aria-disabled":p,testID:E,...q}),Be?_jsx(RequiredPlaceholder,{text:n,color:He,fontSize:$.text,weightStyle:Pe.weightStyle,align:oe?"top":"center",paddingTop:oe?ne:void 0,textAlign:V}):null]})]}),Le.node]}),et]}),de||Ee?_jsxs(View,{style:[W.footerRow,{marginTop:$["message-gap"]}],children:[de?_jsxs(Animated.View,{style:[W.messageRow,{columnGap:G.space.xs,opacity:be}],accessibilityLiveRegion:re?"polite":"none",children:[re?_jsx(FieldErrorGlyph,{size:$["message-text"],color:Oe}):null,_jsx(Text,{style:[W.messageText,{color:Oe,fontSize:$["message-text"],...fontFor(G,"normal")},P],children:_jsx(NotationInkContext.Provider,{value:qe,children:Me})})]}):_jsx(View,{style:W.footerSpacer}),Ee?_jsx(Text,{style:[W.counterText,{color:G.colors["text-subtle"],fontSize:$["message-text"],...fontFor(G,"normal")}],children:Ee}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:e.space.none,margin:e.space.none,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:e.space.sm},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});export{Input};export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{Pressable,StyleSheet,View}from"react-native";import{KeyboardController,KeyboardStickyView,useKeyboardState}from"react-native-keyboard-controller";import{useOptionalFormContext}from"../../form/FormContext.js";import{useTheme}from"../../theme/index.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NavButton=({label:e,accessibilityLabel:o,onPress:t,theme:s})=>_jsx(Pressable,{onPress:t,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,style:{paddingHorizontal:s.space.sm},children:_jsx(Text,{variant:"body",weight:"semibold",size:"lg",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:o="Done",showNavigation:t=!0,onDone:s,onNext:r,onPrev:i,leading:l,style:a,testID:n}=e,c=useTheme(),b=useOptionalFormContext();if(!useKeyboardState(e=>e.isVisible))return null;const d=s??(()=>{KeyboardController.dismiss()}),y=i??b?.focusPrev??(()=>KeyboardController.setFocusTo("prev")),x=r??b?.focusNext??(()=>KeyboardController.setFocusTo("next"));return _jsx(KeyboardStickyView,{style:styles.anchor,children:_jsxs(View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.surface,borderTopColor:c.colors.border,paddingHorizontal:c.space.md},a],children:[t?_jsxs(View,{style:styles.nav,children:[_jsx(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:y,theme:c}),_jsx(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:x,theme:c})]}):_jsx(View,{}),l,_jsx(View,{style:styles.spacer}),_jsx(Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,children:_jsx(Text,{variant:"body",weight:"semibold",color:"link",children:o})})]})})},styles=StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});export{KeyboardToolbar};export default KeyboardToolbar;
|
|
1
|
+
"use strict";import{Pressable,StyleSheet,View}from"react-native";import{KeyboardController,KeyboardStickyView,useKeyboardState}from"react-native-keyboard-controller";import{useOptionalFormContext}from"../../form/FormContext.js";import{useTheme}from"../../theme/index.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{Text}from"../Text/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const NavButton=({label:e,accessibilityLabel:o,onPress:t,theme:s})=>_jsx(Pressable,{onPress:t,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,...hitSlopMarker(8),style:{paddingHorizontal:s.space.sm},children:_jsx(Text,{variant:"body",weight:"semibold",size:"lg",color:"link",children:e})}),KeyboardToolbar=e=>{const{doneLabel:o="Done",showNavigation:t=!0,onDone:s,onNext:r,onPrev:i,leading:l,style:a,testID:n}=e,c=useTheme(),b=useOptionalFormContext();if(!useKeyboardState(e=>e.isVisible))return null;const d=s??(()=>{KeyboardController.dismiss()}),y=i??b?.focusPrev??(()=>KeyboardController.setFocusTo("prev")),x=r??b?.focusNext??(()=>KeyboardController.setFocusTo("next"));return _jsx(KeyboardStickyView,{style:styles.anchor,children:_jsxs(View,{testID:n,accessibilityRole:"toolbar",style:[styles.bar,{backgroundColor:c.colors.surface,borderTopColor:c.colors.border,paddingHorizontal:c.space.md},a],children:[t?_jsxs(View,{style:styles.nav,children:[_jsx(NavButton,{label:"‹",accessibilityLabel:"Previous field",onPress:y,theme:c}),_jsx(NavButton,{label:"›",accessibilityLabel:"Next field",onPress:x,theme:c})]}):_jsx(View,{}),l,_jsx(View,{style:styles.spacer}),_jsx(Pressable,{onPress:d,accessibilityRole:"button",accessibilityLabel:o,hitSlop:8,...hitSlopMarker(8),children:_jsx(Text,{variant:"body",weight:"semibold",color:"link",children:o})})]})})},styles=StyleSheet.create({anchor:{position:"absolute",left:0,right:0,bottom:0},bar:{height:44,flexDirection:"row",alignItems:"center",borderTopWidth:StyleSheet.hairlineWidth},nav:{flexDirection:"row",alignItems:"center"},spacer:{flex:1}});export{KeyboardToolbar};export default KeyboardToolbar;
|