@webority/mobile-ui 0.12.0 → 0.13.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/lib/commonjs/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/commonjs/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/DatePicker/DatePicker.js +1 -1
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.js +1 -1
- package/lib/commonjs/components/DecimalInput/DecimalInput.js +1 -1
- package/lib/commonjs/components/DecimalInput/index.js +1 -1
- package/lib/commonjs/components/Input/Input.js +1 -1
- package/lib/commonjs/components/LoaderOverlay/LoaderOverlay.js +1 -1
- package/lib/commonjs/components/Menu/MenuSurface.js +1 -1
- package/lib/commonjs/components/Modal/Modal.js +1 -1
- package/lib/commonjs/components/ModalSafeArea/ModalSafeArea.js +1 -0
- package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
- package/lib/commonjs/components/ProfilePicker/ProfilePicker.js +1 -1
- package/lib/commonjs/components/SearchBar/SearchBar.js +1 -1
- package/lib/commonjs/components/SignaturePad/SignaturePad.js +1 -1
- package/lib/commonjs/components/Slider/Slider.js +1 -1
- package/lib/commonjs/components/TimePicker/TimePicker.js +1 -1
- package/lib/commonjs/components/Tooltip/Tooltip.js +1 -1
- package/lib/commonjs/components/index.js +1 -1
- package/lib/commonjs/form/useForm.js +1 -1
- package/lib/commonjs/hooks/useDragToDismiss.js +1 -1
- package/lib/module/components/BottomNavigation/BottomNavigation.js +1 -1
- package/lib/module/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/module/components/Card/Card.js +1 -1
- package/lib/module/components/DatePicker/DatePicker.js +1 -1
- package/lib/module/components/DateRangePicker/DateRangePicker.js +1 -1
- package/lib/module/components/DecimalInput/DecimalInput.js +1 -1
- package/lib/module/components/DecimalInput/index.js +1 -1
- package/lib/module/components/Input/Input.js +1 -1
- package/lib/module/components/LoaderOverlay/LoaderOverlay.js +1 -1
- package/lib/module/components/Menu/MenuSurface.js +1 -1
- package/lib/module/components/Modal/Modal.js +1 -1
- package/lib/module/components/ModalSafeArea/ModalSafeArea.js +1 -0
- package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js +1 -1
- package/lib/module/components/SearchBar/SearchBar.js +1 -1
- package/lib/module/components/Slider/Slider.js +1 -1
- package/lib/module/components/TimePicker/TimePicker.js +1 -1
- package/lib/module/components/Tooltip/Tooltip.js +1 -1
- package/lib/module/components/index.js +1 -1
- package/lib/module/form/useForm.js +1 -1
- package/lib/module/hooks/useDragToDismiss.js +1 -1
- package/lib/typescript/commonjs/components/DecimalInput/DecimalInput.d.ts +16 -3
- package/lib/typescript/commonjs/components/DecimalInput/index.d.ts +1 -1
- package/lib/typescript/commonjs/components/ModalSafeArea/ModalSafeArea.d.ts +26 -0
- package/lib/typescript/commonjs/components/index.d.ts +1 -1
- package/lib/typescript/module/components/DecimalInput/DecimalInput.d.ts +16 -3
- package/lib/typescript/module/components/DecimalInput/index.d.ts +1 -1
- package/lib/typescript/module/components/ModalSafeArea/ModalSafeArea.d.ts +26 -0
- package/lib/typescript/module/components/index.d.ts +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,onOpenChange:s,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:p="Search…",emptyText:u="No options",labelOf:h,getValue:m,disabledOf:g,destructiveOf:f,descriptionOf:y,iconOf:b,isSelected:x,onSelect:S,multi:T=!1,searchable:j=!1,searchSelectionColor:C,accessibilityLabel:w,optionStyle:_,selectedOptionStyle:R,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,v=useTheme(),z=useSafeAreaInsets(),D=useMemo(()=>buildStyles(v),[v]),[L,P]=useState(""),H=Dimensions.get("window").height,W=Math.round(.7*H),[A,M]=useState(t),O=useRef(createAnimatedValue(0)).current,B=useRef(createAnimatedValue(W)).current,E=useRef(createAnimatedValue(0)).current,F=useMemo(()=>Animated.add(B,E),[B,E]);useEffect(()=>{t&&M(!0)},[t]);const N=useRef(s);N.current=s;const G=useRef(!1);useEffect(()=>{G.current!==t&&(G.current=t,N.current?.(t))},[t]);const $=useRef(i);$.current=i;const J=useRef(A);useEffect(()=>{J.current&&!A&&"ios"!==Platform.OS&&$.current?.(),J.current=A},[A]),useEffect(()=>{if(!A)return;t&&setNativeValue(E,0);const e=t?Animated.parallel([Animated.timing(O,{toValue:1,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.standard),useNativeDriver:!1}),Animated.spring(B,{toValue:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(O,{toValue:0,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.standard),useNativeDriver:!1}),Animated.timing(B,{toValue:W,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&M(!1)}),()=>e.stop()},[t,A,O,B,E,W,v.motion.duration.fast,v.motion.easing.standard,v.motion.easing.accelerate,v.motion.spring.snappy]);const{handleGesture:K}=useDragToDismiss({drag:E,travel:W,onDismiss:o}),U=useMemo(()=>Gesture.Native(),[]),[Y,Z]=useState(0),q=useKeyboardState(e=>e.height),Q=A?Math.max(0,Math.round(q)):0,X=Math.max(z.top,StatusBar.currentHeight??0)+v.spacing.sm,ee=Q>0,te=ee?Math.max(0,Math.min(W,(Y>0?Y:H)-Q-X)):W;useEffect(()=>{t||P("")},[t]);const oe=useMemo(()=>{const e=j?L.trim().toLowerCase():"",matches=t=>0===e.length||h(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[j,L,n,a,h,y]),ie=useCallback(()=>{o()},[o]),se=useRef(null),re=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=oe.length-1;e>=0;e-=1)if("header"===oe[e].kind){t=e+1;break}for(let o=t;o<oe.length;o+=1){const t=oe[o];if("option"!==t.kind)continue;const i=h(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[d,oe,a,h]),ne=d&&re.size>0&&0===L.trim().length,ae=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...re.has("#")?["#"]:[]],[re]),le=useCallback(e=>{const t=re.get(e);void 0!==t&&se.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[re]),ce=useRef(null),de=useCallback(()=>{null!==ce.current&&(clearTimeout(ce.current),ce.current=null)},[]),pe=useCallback(e=>{se.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),de(),ce.current=setTimeout(()=>{ce.current=null,se.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[de]);useEffect(()=>(A||de(),de),[A,de]);return _jsx(Modal,{visible:A,transparent:!0,animationType:"none",onRequestClose:ie,onDismiss:()=>$.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>Z(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:v.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ie,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:w??r??"Options",style:[D.sheet,{maxHeight:te,bottom:Q,paddingBottom:ee?16:z.bottom+16,backgroundColor:v.colors.background.elevated,borderTopLeftRadius:v.radius.xl,borderTopRightRadius:v.radius.xl,...smoothCorners,transform:[{translateY:F}],...v.shadows.xl}],children:[_jsx(GestureDetector,{gesture:K,children:_jsxs(View,{children:[_jsx(View,{style:D.sheetHandleRow,children:_jsx(View,{style:[D.sheetHandle,{backgroundColor:v.components.select?.handleColor??v.components.bottomSheet?.handleColor??v.colors.border.primary}]})}),r?_jsx(Text,{style:[D.sheetTitle,{color:v.colors.text.primary,fontSize:v.typography.fontSize.lg,fontWeight:v.typography.fontWeight.semibold,paddingHorizontal:v.spacing.lg,marginBottom:v.spacing.sm}],children:r}):null]})}),j?_jsx(View,{style:[D.searchWrap,{marginHorizontal:v.spacing.lg,marginBottom:v.spacing.sm}],children:_jsxs(View,{style:[D.searchBox,{backgroundColor:v.colors.background.secondary,borderColor:v.colors.border.primary,borderRadius:v.radius.md,...smoothCorners,paddingHorizontal:v.spacing.md,gap:v.spacing.sm}],children:[(v.icons?.search??defaultIcons.search)({size:18,color:v.colors.text.tertiary}),_jsx(TextInput,{value:L,onChangeText:P,placeholder:p,placeholderTextColor:v.colors.text.tertiary,selectionColor:C??v.colors.border.focus,accessibilityLabel:"Search options",style:[D.searchInput,{color:v.colors.text.primary,fontSize:v.typography.fontSize.base,paddingVertical:v.spacing.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>P(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(v.icons?.close??defaultIcons.close)({size:18,color:v.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[D.listWrap,ne?D.listRow:null],children:[_jsx(GestureDetector,{gesture:U,children:_jsx(FlatList,{ref:se,data:oe,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(m(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[D.sectionHeader,{paddingHorizontal:v.spacing.lg,paddingTop:v.spacing.md}],children:l?l(e.title):_jsx(Text,{style:[D.sectionTitle,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.xs,fontWeight:v.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=h(t),i=m(t),s=y(t),r=b(t),n=x(i),a=g(t),d=f?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:v.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[D.optionRow,{backgroundColor:n?v.colors.surface.selected:e?v.colors.surface.pressed:"transparent",opacity:a?.5:1,paddingHorizontal:v.spacing.lg,paddingVertical:v.spacing.md},_,n?R:null],children:[c?_jsx(View,{style:D.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:D.optionIcon,children:r}):null,_jsxs(View,{style:D.optionTextWrap,children:[_jsx(Text,{style:[D.optionLabel,{color:d?v.colors.toneText.error:n?v.colors.primary:v.colors.text.primary,fontSize:v.typography.fontSize.base,fontWeight:n?v.typography.fontWeight.semibold:v.typography.fontWeight.medium},V,n?k:null],children:o}),s?_jsx(Text,{style:[D.optionDescription,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),T?_jsx(View,{style:[D.checkbox,{borderColor:n?v.colors.primary:v.colors.border.primary,backgroundColor:n?v.colors.primary:"transparent"}],children:n?_jsx(View,{style:D.checkboxTick}):null}):n?"icon"===v.components.optionSheet?.selectedMarker?_jsx(View,{style:D.singleSelectedIcon,children:(v.icons?.selectedTick??defaultIcons.selectedTick)({size:20,color:v.colors.primary})}):_jsx(View,{style:[D.singleSelectedDot,{backgroundColor:v.colors.primary}]}):null]})},onScrollToIndexFailed:pe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ne,style:ne?D.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[D.empty,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.sm,paddingVertical:v.spacing.xl}],children:u})})}),ne?_jsx(View,{style:[D.rail,{paddingRight:v.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:ae.map(e=>{const t=re.has(e);return _jsx(Pressable,{onPress:()=>le(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:D.railLetter,children:_jsx(Text,{style:[D.railLetterText,{color:t?v.colors.primary:v.colors.text.tertiary,fontSize:v.typography.fontSize.xs,fontWeight:v.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),T?_jsx(View,{style:[D.sheetFooter,{borderTopColor:v.colors.border.secondary,paddingHorizontal:v.spacing.lg,paddingVertical:v.spacing.md}],children:_jsx(Pressable,{onPress:ie,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[D.doneButton,{backgroundColor:e?v.colors.primaryPressed:v.colors.primary,borderRadius:v.radius.md,...smoothCorners,paddingVertical:v.spacing.sm,paddingHorizontal:v.spacing.lg}],children:_jsx(Text,{style:{color:v.colors.onPrimary,fontSize:v.typography.fontSize.base,fontWeight:v.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,onOpenChange:s,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:p="Search…",emptyText:u="No options",labelOf:h,getValue:m,disabledOf:g,destructiveOf:f,descriptionOf:y,iconOf:b,isSelected:x,onSelect:S,multi:T=!1,searchable:j=!1,searchSelectionColor:C,accessibilityLabel:w,optionStyle:_,selectedOptionStyle:R,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,v=useTheme(),[z,D]=useModalInsets(),L=useMemo(()=>buildStyles(v),[v]),[P,M]=useState(""),H=Dimensions.get("window").height,W=Math.round(.7*H),[A,O]=useState(t),B=useRef(createAnimatedValue(0)).current,E=useRef(createAnimatedValue(W)).current,F=useRef(createAnimatedValue(0)).current,N=useMemo(()=>Animated.add(E,F),[E,F]);useEffect(()=>{t&&O(!0)},[t]);const G=useRef(s);G.current=s;const $=useRef(!1);useEffect(()=>{$.current!==t&&($.current=t,G.current?.(t))},[t]);const J=useRef(i);J.current=i;const K=useRef(A);useEffect(()=>{K.current&&!A&&"ios"!==Platform.OS&&J.current?.(),K.current=A},[A]),useEffect(()=>{if(!A)return;t&&setNativeValue(F,0);const e=t?Animated.parallel([Animated.timing(B,{toValue:1,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.standard),useNativeDriver:!1}),Animated.spring(E,{toValue:0,damping:v.motion.spring.snappy.damping,stiffness:v.motion.spring.snappy.stiffness,mass:v.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(B,{toValue:0,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.standard),useNativeDriver:!1}),Animated.timing(E,{toValue:W,duration:v.motion.duration.fast,easing:Easing.bezier(...v.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&O(!1)}),()=>e.stop()},[t,A,B,E,F,W,v.motion.duration.fast,v.motion.easing.standard,v.motion.easing.accelerate,v.motion.spring.snappy]);const{handleGesture:U}=useDragToDismiss({drag:F,travel:W,onDismiss:o}),Y=useMemo(()=>Gesture.Native(),[]),[Z,q]=useState(0),Q=useKeyboardState(e=>e.height),X=A?Math.max(0,Math.round(Q)):0,ee=Math.max(z.top,StatusBar.currentHeight??0)+v.spacing.sm,te=X>0,oe=te?Math.max(0,Math.min(W,(Z>0?Z:H)-X-ee)):W;useEffect(()=>{t||M("")},[t]);const ie=useMemo(()=>{const e=j?P.trim().toLowerCase():"",matches=t=>0===e.length||h(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[j,P,n,a,h,y]),se=useCallback(()=>{o()},[o]),re=useRef(null),ne=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=ie.length-1;e>=0;e-=1)if("header"===ie[e].kind){t=e+1;break}for(let o=t;o<ie.length;o+=1){const t=ie[o];if("option"!==t.kind)continue;const i=h(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[d,ie,a,h]),ae=d&&ne.size>0&&0===P.trim().length,le=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ne.has("#")?["#"]:[]],[ne]),ce=useCallback(e=>{const t=ne.get(e);void 0!==t&&re.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ne]),de=useRef(null),pe=useCallback(()=>{null!==de.current&&(clearTimeout(de.current),de.current=null)},[]),ue=useCallback(e=>{re.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),pe(),de.current=setTimeout(()=>{de.current=null,re.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[pe]);useEffect(()=>(A||pe(),pe),[A,pe]);return _jsx(Modal,{visible:A,transparent:!0,animationType:"none",onRequestClose:se,onDismiss:()=>J.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsx(ModalSafeArea,{onInsets:D,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>q(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:v.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:se,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:w??r??"Options",style:[L.sheet,{maxHeight:oe,bottom:X,paddingBottom:te?16:z.bottom+16,backgroundColor:v.colors.background.elevated,borderTopLeftRadius:v.radius.xl,borderTopRightRadius:v.radius.xl,...smoothCorners,transform:[{translateY:N}],...v.shadows.xl}],children:[_jsx(GestureDetector,{gesture:U,children:_jsxs(View,{children:[_jsx(View,{style:L.sheetHandleRow,children:_jsx(View,{style:[L.sheetHandle,{backgroundColor:v.components.select?.handleColor??v.components.bottomSheet?.handleColor??v.colors.border.primary}]})}),r?_jsx(Text,{style:[L.sheetTitle,{color:v.colors.text.primary,fontSize:v.typography.fontSize.lg,fontWeight:v.typography.fontWeight.semibold,paddingHorizontal:v.spacing.lg,marginBottom:v.spacing.sm}],children:r}):null]})}),j?_jsx(View,{style:[L.searchWrap,{marginHorizontal:v.spacing.lg,marginBottom:v.spacing.sm}],children:_jsxs(View,{style:[L.searchBox,{backgroundColor:v.colors.background.secondary,borderColor:v.colors.border.primary,borderRadius:v.radius.md,...smoothCorners,paddingHorizontal:v.spacing.md,gap:v.spacing.sm}],children:[(v.icons?.search??defaultIcons.search)({size:18,color:v.colors.text.tertiary}),_jsx(TextInput,{value:P,onChangeText:M,placeholder:p,placeholderTextColor:v.colors.text.tertiary,selectionColor:C??v.colors.border.focus,accessibilityLabel:"Search options",style:[L.searchInput,{color:v.colors.text.primary,fontSize:v.typography.fontSize.base,paddingVertical:v.spacing.sm}]}),P.length>0?_jsx(Pressable,{onPress:()=>M(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(v.icons?.close??defaultIcons.close)({size:18,color:v.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[L.listWrap,ae?L.listRow:null],children:[_jsx(GestureDetector,{gesture:Y,children:_jsx(FlatList,{ref:re,data:ie,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(m(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[L.sectionHeader,{paddingHorizontal:v.spacing.lg,paddingTop:v.spacing.md}],children:l?l(e.title):_jsx(Text,{style:[L.sectionTitle,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.xs,fontWeight:v.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=h(t),i=m(t),s=y(t),r=b(t),n=x(i),a=g(t),d=f?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:v.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[L.optionRow,{backgroundColor:n?v.colors.surface.selected:e?v.colors.surface.pressed:"transparent",opacity:a?.5:1,paddingHorizontal:v.spacing.lg,paddingVertical:v.spacing.md},_,n?R:null],children:[c?_jsx(View,{style:L.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:L.optionIcon,children:r}):null,_jsxs(View,{style:L.optionTextWrap,children:[_jsx(Text,{style:[L.optionLabel,{color:d?v.colors.toneText.error:n?v.colors.primary:v.colors.text.primary,fontSize:v.typography.fontSize.base,fontWeight:n?v.typography.fontWeight.semibold:v.typography.fontWeight.medium},V,n?k:null],children:o}),s?_jsx(Text,{style:[L.optionDescription,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),T?_jsx(View,{style:[L.checkbox,{borderColor:n?v.colors.primary:v.colors.border.primary,backgroundColor:n?v.colors.primary:"transparent"}],children:n?_jsx(View,{style:L.checkboxTick}):null}):n?"icon"===v.components.optionSheet?.selectedMarker?_jsx(View,{style:L.singleSelectedIcon,children:(v.icons?.selectedTick??defaultIcons.selectedTick)({size:20,color:v.colors.primary})}):_jsx(View,{style:[L.singleSelectedDot,{backgroundColor:v.colors.primary}]}):null]})},onScrollToIndexFailed:ue,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ae,style:ae?L.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[L.empty,{color:v.colors.text.tertiary,fontSize:v.typography.fontSize.sm,paddingVertical:v.spacing.xl}],children:u})})}),ae?_jsx(View,{style:[L.rail,{paddingRight:v.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:le.map(e=>{const t=ne.has(e);return _jsx(Pressable,{onPress:()=>ce(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:L.railLetter,children:_jsx(Text,{style:[L.railLetterText,{color:t?v.colors.primary:v.colors.text.tertiary,fontSize:v.typography.fontSize.xs,fontWeight:v.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),T?_jsx(View,{style:[L.sheetFooter,{borderTopColor:v.colors.border.secondary,paddingHorizontal:v.spacing.lg,paddingVertical:v.spacing.md}],children:_jsx(Pressable,{onPress:se,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[L.doneButton,{backgroundColor:e?v.colors.primaryPressed:v.colors.primary,borderRadius:v.radius.md,...smoothCorners,paddingVertical:v.spacing.sm,paddingHorizontal:v.spacing.lg}],children:_jsx(Text,{style:{color:v.colors.onPrimary,fontSize:v.typography.fontSize.base,fontWeight:v.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,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{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?oe(i,t.iso)??t:i??t},[m,Q,v,i,oe]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?isValidNationalNumber(e.nationalNumber,t,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===le);return{callingCode:t?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,te]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:o??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=V??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,
|
|
1
|
+
"use strict";import{countryFlagEmoji,formatPhoneAsTyped,getPhoneCountries,isSupportedCountry,isValidNationalNumber,maxNationalNumberLength,splitPhoneNumber}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES}from"@webority/mobile-core/phone/countries";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,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{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder,resolveFieldSize,resolveFieldTextStyle}from"../FieldBase/index.js";import{Chevron}from"../FieldBase/Chevron.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}];export const ALL_CALLING_CODES=getPhoneCountries().map(e=>({iso:e.iso,code:e.callingCode,label:PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,t,o)=>{const i=e.replace(/[^0-9]/g,"");if(!i)return null;const n=splitPhoneNumber(`+${i}`);let l=n?.callingCode,r=n?.nationalNumber??"";if(!l){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(l=e.find(e=>i.startsWith(e)),!l)return null;r=i.slice(l.length)}const a=t.filter(e=>e.code===l),s=a.find(e=>e.iso===o)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:l,nationalNumber:r,iso:s}};const planOf=e=>isSupportedCountry(e)?e:null;export const PhoneNumberInput=forwardRef((e,t)=>{const{value:o,defaultValue:i,onChange:n,e164:l,onChangeE164:r,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onComplete:c,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:g="All countries",hiddenCountries:h,showFlag:y=!0,renderFlag:N,renderCountry:C,countrySearchPlaceholder:S,showAlphabetIndex:x,defaultIso:v="IN",validation:F="any",maxLength:T,formatAsYouType:I=!0,countryLocked:E=!1,label:L,labelMode:O="top",labelStyle:P,placeholder:j="Phone number",helperText:_,error:A,invalidMessage:w,required:z,disabled:R=!1,size:k="md",variant:M,borderRadius:V,countrySheetTitle:D="Country code",haptic:B,accessibilityLabel:$,countryAccessibilityLabel:H,onFocus:U,onBlur:W,style:q,testID:G}=e,Y=useTheme(),K=useMemo(()=>buildStyles(Y),[Y]),J=useRef(null),Q=useMemo(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=useMemo(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:g,options:Q}]:void 0},[p,f,g,Q]),Z=useCallback((e,t,o)=>{if(!e)return null;if(N)return N(e);if(!y)return null;const i=countryFlagEmoji(e.iso);return i?_jsx(Text,{style:[K.flag,{fontSize:t}],testID:o,children:i}):null},[N,y,K.flag]),ee=useCallback(e=>{const t=planOf(e),o=t?maxNationalNumberLength(t,!1===F?"any":F):Number.POSITIVE_INFINITY;return T?Math.min(o,T):o},[T,F]),te=useCallback((e,t)=>e.slice(0,ee(t)),[ee]),oe=useCallback((e,t)=>{const o=planOf(t)??void 0,i=splitPhoneNumber(e,o);if(!i)return null;const n=i.country??t,l=m.find(e=>e.iso===n);return{callingCode:l?.code??i.callingCode,nationalNumber:te(i.nationalNumber,n),iso:l?.iso??n}},[m,te]),ie=useMemo(()=>{const e=Q.find(e=>e.iso===v)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof i?oe(i,t.iso)??t:i??t},[m,Q,v,i,oe]),ne=useCallback(e=>{if(!1===F)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?isValidNationalNumber(e.nationalNumber,t,F):e.nationalNumber.length>0},[F]),[le,re]=useState(ie.iso),ae=useMemo(()=>{if(void 0===l)return;const e=l?parseE164(l,m,le):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===le);return{callingCode:t?.code??ie.callingCode,nationalNumber:"",iso:le}},[l,m,le,ie.callingCode,te]),se=useCallback(e=>{re(e.iso),n?.(e),r?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,r,m,ne]),[ue,de]=useControllableState({value:o??ae,defaultValue:ie,onChange:se}),[ce,be]=useState(!1),me=useCallback(()=>{R||J.current?.focus()},[R]),[pe,fe]=useState(!1),[ge,he]=useState(!1),[ye,Ne]=useState(!1),Ce=useRef(!1);useEffect(()=>{ye||(Ce.current=!1)},[ye]);const Se=resolveFieldSize(Y,k),xe=resolveFieldTextStyle(Y,{disabled:R}),ve=M??Y.components.field?.defaultVariant??"outlined",Fe="underline"===ve,Te=V??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[Ee,Le]=useState(0),Oe=Ee+Ie+1+Ie,Pe=ue.nationalNumber.length>0,je=z&&!L&&!Pe&&j.length>0,Ae=ce||Pe,we=Boolean(L)&&"float"===O&&Ee>0,ze=useFloatingLabel({label:L,enabled:we,floated:Ae,required:z,variant:ve,sizeTokens:Se,leadingOffset:Oe,paddingLeft:Fe?0:Se.paddingHorizontal,color:Y.colors.field.label,style:P}),Re=useMemo(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),ke=planOf(ue.iso),Me=I&&ke?formatPhoneAsTyped(ue.nationalNumber,ke):ue.nationalNumber,Ve=ee(ue.iso),De=0===ue.nationalNumber.length||pe||!Number.isFinite(Ve)?void 0:Me.length+Math.max(0,Ve-ue.nationalNumber.length),Be=ne(ue);useEffect(()=>{Pe||he(!1)},[Pe]);const $e=ke?maxNationalNumberLength(ke,!1===F?"any":F):Number.POSITIVE_INFINITY,He=ue.nationalNumber.length>=$e,Ue=!1!==F&&!1!==w&&Pe&&!Be&&(ge||He),We="mobile"===F?"Enter a valid mobile number":"Enter a valid number",qe=hasFieldText(A)?A:Ue?w||We:void 0,Ge=!0===A||hasFieldText(qe),Ye=useRef(Be),Ke=useRef(ue);Ke.current=ue,useEffect(()=>{Ye.current!==Be&&(Ye.current=Be,b?.(Be),Be&&c?.(formatE164(Ke.current)))},[Be,c,b]);const Je=useCallback(e=>{if(e.includes("+")){const t=oe(e,ue.iso);if(t&&!E&&Q.some(e=>e.iso===t.iso))return void de(t);if(t&&t.iso===ue.iso)return void de(t)}de({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,E,ue,oe,te,de]),Qe=useCallback(e=>{const t=e;de({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ne(!1);const o=resolveHaptic(B,"selection");o&&triggerHaptic(o)},[ue,B,te,de]);useImperativeHandle(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>de({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?formatPhoneAsTyped(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,de]);const Xe=R||E,Ze=_jsx(FieldBase,{size:k,variant:ve,borderRadius:Te,topNotch:ze.topNotch,focused:ce,disabled:R,error:Ge,filled:Pe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Fe?0:void 0,leading:_jsxs(Pressable,{onPress:()=>{Xe||(Ce.current=!0,Ne(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:H??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Le(e=>e===t?e:t)},style:K.codeTrigger,testID:G?`${G}-code`:void 0,children:[Z(Re,Se.fontSize,G?`${G}-flag`:void 0),_jsx(Text,{style:[K.codeText,{color:xe.color,fontSize:Se.fontSize}],children:`+${ue.callingCode}`}),E?null:_jsx(Chevron,{color:R?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Se.iconSize,open:ye})]}),children:_jsxs(View,{style:K.inputWrap,children:[_jsx(TextInput,{ref:J,value:Me,maxLength:De,onChangeText:Je,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:d,onSelectionChange:e=>{const{start:t,end:o}=e.nativeEvent.selection;fe(t!==o)},onFocus:()=>{be(!0),U?.()},onBlur:()=>{be(!1),Pe&&!Ce.current&&he(!0),W?.()},editable:!R,placeholder:we&&!Ae||je?void 0:j,placeholderTextColor:xe.placeholderColor,accessibilityLabel:$??L??j,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:xe.color,fontSize:Se.fontSize,...xe.weightStyle,paddingLeft:Fe?0:void 0}],testID:G?`${G}-input`:void 0}),je?_jsx(RequiredPlaceholder,{text:j,color:xe.placeholderColor,fontSize:Se.fontSize,weightStyle:xe.weightStyle}):null]})});return _jsxs(View,{style:q,testID:G,children:[L&&"top"===O?_jsx(FieldLabel,{size:k,required:z,children:L}):null,_jsxs(View,{style:K.fieldWrapper,children:[Ze,ze.node]}),_jsx(FieldMessage,{size:k,error:Ge,text:Ge?qe:_}),_jsx(OptionSheet,{open:ye,onClose:()=>Ne(!1),title:D,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===Re?.iso,onSelect:Qe,searchable:Q.length>8,searchPlaceholder:S,alphabetIndex:x??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...fontFor(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,l)=>{const{value:o,onChangeText:s,onSubmit:t,onFocus:a,onBlur:i,placeholder:n="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:b,size:f="md",variant:p,borderRadius:S,label:m,labelMode:g="top",labelStyle:h,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:z,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:T,style:E,inputStyle:I,accessibilityLabel:H,testID:w,...D}=e,A=useTheme(),P=p??A.components.searchBar?.defaultVariant??A.components.field?.defaultVariant??"filled",V="underline"===P,M=resolveFieldSize(A,f),N={...M,...A.components.searchBar?.[f]??{}},O=resolveFieldTextStyle(A,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,l),[l]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(A),[A]),K="string"==typeof o?o:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),i?.(e)},[i]),[Y,Z]=useState(K),ee=useDebounce(Y,b??0);useEffect(()=>{void 0!==b&&K!==Y&&Z(K)},[K,b]);const le=useRef(K);useEffect(()=>{void 0!==b&&ee!==le.current&&(le.current=ee,s(ee))},[ee,b,s]);const oe=useCallback(e=>{void 0===b?s(e):Z(e)},[b,s]),se=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e),void 0!==b&&(Z(""),le.current=""),s(""),u?.()},[T,b,s,u]),te=useCallback(()=>{t?.(void 0!==b?Y:K)},[t,b,Y,K]),ae=void 0!==b?Y:K,ie=ae.length>0,[ne,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const l=v?.find(l=>l.value===e)?.label;l&&announce(`Searching ${l}`)},[v,re]),[ue,de]=useState(!1),be=useRef(null),fe=useCallback(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),pe=useCallback(()=>{fe(),de(!0)},[fe]),Se=useCallback(()=>{fe(),be.current=setTimeout(()=>de(!1),50)},[fe]);useEffect(()=>fe,[fe]);const me=!c&&(G||ue),ge=useMemo(()=>(R??[]).slice(0,j),[R,j]),he=useMemo(()=>(z??[]).slice(0,L).map(normalizeSuggestion),[z,L]),ve=me&&!ie&&ge.length>0,xe=me&&ie&&he.length>0,Ce=xe?he.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e)},[T]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/useControllableState.js";import{useDebounce}from"../../hooks/useDebounce.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{FieldBase,FieldLabel,resolveFieldSize,resolveFieldTextStyle,resolveVariantColors}from"../FieldBase/FieldBase.js";import{useFloatingLabel}from"../FieldBase/useFloatingLabel.js";import{normalizeSuggestion,SearchRecents,SearchScopeBar,SearchSuggestions}from"./SearchPanel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=forwardRef((e,l)=>{const{value:o,onChangeText:s,onSubmit:t,onFocus:a,onBlur:i,placeholder:n="Search…",autoFocus:r=!1,disabled:c=!1,onClear:u,leftIcon:d,debounceMs:b,size:f="md",variant:p,borderRadius:S,label:m,labelMode:g="top",labelStyle:h,scopes:v,scope:x,onScopeChange:C,recents:R,recentsTitle:y="Recent searches",maxRecents:j=DEFAULT_PANEL_ROWS,onSelectRecent:F,onRemoveRecent:k,onClearRecents:_,suggestions:z,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:B,haptic:T,style:E,inputStyle:I,accessibilityLabel:H,testID:w,...D}=e,A=useTheme(),P=p??A.components.searchBar?.defaultVariant??A.components.field?.defaultVariant??"filled",V="underline"===P,M=resolveFieldSize(A,f),N={...M,...A.components.searchBar?.[f]??{}},O=resolveFieldTextStyle(A,{disabled:c}),W=useRef(null),U=useMemo(()=>mergeRefs(W,l),[l]),$=useCallback(()=>{c||W.current?.focus()},[c]),q=useMemo(()=>buildStyles(A),[A]),K="string"==typeof o?o:"",[G,J]=useState(!1),Q=useCallback(e=>{J(!0),a?.(e)},[a]),X=useCallback(e=>{J(!1),i?.(e)},[i]),[Y,Z]=useState(K),ee=useDebounce(Y,b??0);useEffect(()=>{void 0!==b&&K!==Y&&Z(K)},[K,b]);const le=useRef(K);useEffect(()=>{void 0!==b&&ee!==le.current&&(le.current=ee,s(ee))},[ee,b,s]);const oe=useCallback(e=>{void 0===b?s(e):Z(e)},[b,s]),se=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e),void 0!==b&&(Z(""),le.current=""),s(""),u?.()},[T,b,s,u]),te=useCallback(()=>{t?.(void 0!==b?Y:K)},[t,b,Y,K]),ae=void 0!==b?Y:K,ie=ae.length>0,[ne,re]=useControllableState({value:x,defaultValue:v?.[0]?.value??"",onChange:C}),ce=useCallback(e=>{re(e);const l=v?.find(l=>l.value===e)?.label;l&&announce(`Searching ${l}`)},[v,re]),[ue,de]=useState(!1),be=useRef(null),fe=useCallback(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),pe=useCallback(()=>{fe(),de(!0)},[fe]),Se=useCallback(()=>{fe(),be.current=setTimeout(()=>de(!1),50)},[fe]);useEffect(()=>fe,[fe]);const me=!c&&(G||ue),ge=useMemo(()=>(R??[]).slice(0,j),[R,j]),he=useMemo(()=>(z??[]).slice(0,L).map(normalizeSuggestion),[z,L]),ve=me&&!ie&&ge.length>0,xe=me&&ie&&he.length>0,Ce=xe?he.length:0;useEffect(()=>{Ce>0&&announce(1===Ce?"1 suggestion":`${Ce} suggestions`)},[Ce]);const Re=useCallback(()=>{const e=resolveHaptic(T,"selection");e&&triggerHaptic(e)},[T]),ye=useCallback(e=>{Re(),W.current?.blur(),de(!1),F?.(e)},[Re,F]),je=useCallback(e=>{Re(),W.current?.blur(),de(!1),B?.(e)},[Re,B]),Fe=useCallback(e=>{Re(),k?.(e),announce(`Removed ${e}`),$()},[Re,k,$]),ke=useCallback(()=>{Re(),_?.(),announce("Recent searches cleared"),$()},[Re,_,$]),ze={size:N.iconSize,color:c?A.colors.text.disabled:A.colors.text.tertiary,disabled:c},Le=d?renderSlotIcon(d,ze):(A.icons?.search??defaultIcons.search)(ze),Be=Boolean(m)&&"float"===g,Te=useFloatingLabel({label:m,enabled:Be,floated:G||ie,variant:P,sizeTokens:{...M,...N},leadingOffset:N.iconSize+A.spacing.md,trailingOffset:ie?N.iconSize+A.spacing.md:0,paddingLeft:V?0:N.paddingHorizontal,color:A.colors.field.label,style:h}),Ee=ie&&!c?_jsx(Pressable,{onPress:se,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(A.icons?.close??defaultIcons.close)({size:N.iconSize,color:A.colors.text.secondary})}):null;return _jsxs(View,{style:E,testID:w,children:[m&&!Be?_jsx(FieldLabel,{size:f,style:h,children:m}):null,_jsx(View,{style:q.root,children:_jsxs(View,{style:q.fieldWrap,children:[_jsx(FieldBase,{size:f,variant:P,focused:G,disabled:c,filled:ie,minHeight:N.minHeight,paddingHorizontal:V?0:N.paddingHorizontal,borderRadius:S??N.borderRadius,leading:Le,trailing:Ee,topNotch:Te.topNotch,onPress:$,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:H??n,children:_jsx(TextInput,{ref:U,style:[q.input,{fontSize:N.fontSize,color:O.color,...O.weightStyle},I],value:ae,onChangeText:oe,onSubmitEditing:te,onFocus:Q,onBlur:X,placeholder:!Be||G||ie?n:void 0,placeholderTextColor:O.placeholderColor,autoFocus:r,editable:!c,returnKeyType:"search",selectionColor:resolveVariantColors(A,P).borderFocusedRepresentative,accessibilityLabel:H??n,accessibilityState:{disabled:c},"aria-disabled":c,...D})}),Te.node]})}),v&&v.length>0?_jsx(SearchScopeBar,{scopes:v,scope:ne||(v[0]?.value??""),disabled:c,haptic:T,onChange:ce}):null,ve?_jsx(SearchRecents,{recents:ge,title:y,onSelect:ye,onRemove:k?Fe:void 0,onClear:_?ke:void 0,onHold:pe,onRelease:Se}):null,xe?_jsx(SearchSuggestions,{suggestions:he,query:ae,onSelect:je,onHold:pe,onRelease:Se}):null]})});SearchBar.displayName="SearchBar";const buildStyles=e=>StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});export{SearchBar};export default SearchBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,Easing,runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{sliderToneInk}from"./valueText.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_MAP={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},VARIANT_SIZE_MAP={inset:{sm:{trackHeight:14,thumbDiameter:10},md:{trackHeight:20,thumbDiameter:14},lg:{trackHeight:26,thumbDiameter:18}},minimal:{sm:{trackHeight:2,thumbDiameter:14},md:{trackHeight:3,thumbDiameter:18},lg:{trackHeight:4,thumbDiameter:22}},bar:{sm:{trackHeight:20,thumbDiameter:20},md:{trackHeight:28,thumbDiameter:28},lg:{trackHeight:36,thumbDiameter:36}}},INSET_RING_RATIO=.3,MIN_THUMB_TOUCH=44,TONE_TO_COLOR_KEY={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),snapToStep=(e,t,a,r)=>{if(r<=0)return clamp(e,t,a);const i=Math.round((e-t)/r)*r+t,s=String(r).split(".")[1]?.length??0,n=s>0?Number(i.toFixed(s)):i;return clamp(n,t,a)},BUBBLE_GAP=2,BUBBLE_CARET=8,BUBBLE_WRAP_WIDTH=160,NO_SHADOW={shadowOpacity:0,elevation:0},defaultFormatLabel=e=>String(e),Slider=forwardRef((e,t)=>{const{min:a=0,max:r=100,step:i=1,disabled:s=!1,tone:n="primary",size:o="md",variant:l="default",showLabel:u=!1,snapThumb:c=!1,formatLabel:m=defaultFormatLabel,renderLabel:d,accessibilityLabel:h,haptic:b,style:g,containerStyle:p,trackStyle:f,fillStyle:y,thumbStyle:v,labelStyle:w,thumbPressScale:S,labelShowDuration:k,labelOpacity:C,testID:x}=e,_=useTheme(),A=_.components.slider,D=A?.[o],H=useMemo(()=>"default"===l?{trackHeight:D?.trackHeight??SIZE_MAP[o].trackHeight,thumbDiameter:D?.thumbDiameter??SIZE_MAP[o].thumbDiameter}:VARIANT_SIZE_MAP[l][o],[D,o,l]),M="inset"===l?H.trackHeight/2:0,O=A?.thumbPressAnimation??!1,E=S??A?.thumbPressScale??1.1,j=k??A?.labelShowDuration??_.motion.duration.fast,T=C??A?.labelOpacity??1,V=useMemo(()=>buildStyles(_,H),[_,H]),R=useMemo(()=>({damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass}),[_.motion.spring.snappy]),[I,P]=useState(0),W=_.colors[TONE_TO_COLOR_KEY[n]],L=sliderToneInk(_,n),N=!0===e.range,[X,B]=useControllableState({value:e.value,defaultValue:e.defaultValue??(N?[a,r]:a),onChange:e.onChange}),F=useSharedValue(0),G=useSharedValue(0),J=useSharedValue(N?X[0]:X),U=useSharedValue(N?X[1]:X),z=useSharedValue(0),Z=useSharedValue(0),K=useSharedValue(1),Y=useSharedValue(1),$="always"===u,q=useSharedValue($?1:0),Q=useSharedValue($?1:0),ee=useMemo(()=>10**(String(i).split(".")[1]?.length??0),[i]);useEffect(()=>()=>{cancelAnimation(F),cancelAnimation(G),cancelAnimation(K),cancelAnimation(Y),cancelAnimation(q),cancelAnimation(Q)},[F,G,K,Y,q,Q]);const te=useCallback((e,t)=>{const i=t-2*M;return r===a||i<=0?M:M+(e-a)/(r-a)*i},[a,r,M]),ae=useCallback((e,t)=>{const s=t-2*M;if(s<=0)return a;const n=clamp((e-M)/s,0,1);return snapToStep(a+n*(r-a),a,r,i)},[a,r,i,M]),re=useRef(!1),ie=_.motion.duration.fast,se=useRef(X);se.current=X;const ne=useRef(I);ne.current=I;const oe=useCallback((e=!1)=>{const t=ne.current;if(t<=0)return;const place=t=>e?withTiming(t,{duration:ie,easing:Easing.out(Easing.cubic)}):t,a=se.current;if(N){const[e,r]=a,i=Math.min(e,r),s=Math.max(e,r);J.value=i,U.value=s,F.value=place(te(i,t)),G.value=place(te(s,t))}else{const e=a;J.value=e,U.value=e,F.value=place(te(e,t))}},[N,te,J,U,F,G,ie]),[le,ue]=useState(0),ce=useRef(!1),me=useCallback(e=>{re.current=e,e||(ce.current=!0,ue(e=>e+1))},[]);useEffect(()=>{if(re.current)return;const e=ce.current;ce.current=!1,oe(e)},[JSON.stringify(X),I,le,oe]);const de=useCallback(e=>{const t=e.nativeEvent.layout.width;Z.value=t,P(t)},[Z]),he=useCallback((e,t)=>{B(N?[e,t]:e)},[N,B]),be=useCallback(()=>{const e=resolveHaptic(b,"selection");e&&triggerHaptic(e)},[b]),ge=useRef(he);ge.current=he;const pe=useRef(be);pe.current=be;const fe=useCallback((e,t)=>ge.current(e,t),[]),ye=useCallback(()=>pe.current(),[]),ve=Math.max(0,(44-H.thumbDiameter)/2),we=ve>0?ve:void 0,Se=useCallback(e=>{const t="low"===e?F:G,n="low"===e?J:U,o="low"===e?U:J,l="low"===e?K:Y,m="low"===e?q:Q,d="low"===e,h=a,b=r,g=i,p=ee,f=N,y=E,v=O,w=!0===u,S=c,k=T,C=j,x=R,_=M,follow=e=>{"worklet";const a=Z.value-2*_;if(a<=0||!Number.isFinite(e))return;const r=Math.min(Math.max(z.value+e,_),Z.value-_);let i=h+(r-_)/a*(b-h);g>0&&(i=Math.round((i-h)/g)*g+h,i=Math.round(i*p)/p),i=Math.min(Math.max(i,h),b),f&&(d&&i>o.value&&(i=o.value),!d&&i<o.value&&(i=o.value)),t.value=S||b===h?b===h?_:_+(i-h)/(b-h)*a:f?d?Math.min(r,G.value):Math.max(r,F.value):r,i!==n.value&&(n.value=i,i!==h&&i!==b||runOnJS(ye)(),runOnJS(fe)(J.value,U.value))},A=Gesture.Pan().enabled(!s).minDistance(0);return(void 0===we?A:A.hitSlop(we)).onStart(()=>{"worklet";runOnJS(me)(!0),z.value=t.value,v&&(l.value=withSpring(y,x)),w&&(m.value=withTiming(k,{duration:C,easing:Easing.out(Easing.cubic)})),runOnJS(ye)()}).onUpdate(e=>{"worklet";follow(e.translationX)}).onEnd(e=>{"worklet";follow(e.translationX),v&&(l.value=withSpring(1,x)),w&&(m.value=withTiming(0,{duration:C,easing:Easing.out(Easing.cubic)}))}).onFinalize(()=>{"worklet";runOnJS(me)(!1)})},[s,a,r,i,ee,N,E,O,u,c,T,j,R,M,we,fe,ye,me,F,G,J,U,K,Y,q,Q,z,Z]),ke=useMemo(()=>Se("low"),[Se]),Ce=useMemo(()=>Se("high"),[Se]),xe=useCallback(e=>{if(s||N||I<=0)return;const t=clamp(e.nativeEvent.locationX,0,I),a=ae(t,I);a!==J.value&&(be(),J.value=a,F.value=withTiming(te(a,I),{duration:_.motion.duration.fast,easing:Easing.out(Easing.cubic)}),he(a,a))},[s,N,I,ae,te,he,be,F,J,_.motion.duration.fast]),_e=useCallback(e=>{if(s)return;const t="increment"===e.nativeEvent.actionName?i:-i,n=i>0?Math.round(t*ee)/ee:t;if(N){const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,U.value);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,U.value))}else{const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,r);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,t))}},[s,i,ee,N,a,r,te,I,F,J,U,he,be]),Ae=H.thumbDiameter/2,De=s?_.colors.surface.disabled:W,He="inset"===l?{backgroundColor:De,borderColor:_.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*H.thumbDiameter)),...NO_SHADOW}:"minimal"===l?{backgroundColor:De,borderWidth:0}:"bar"===l?{backgroundColor:"transparent",borderWidth:0,...NO_SHADOW}:{backgroundColor:_.colors.background.elevated,borderColor:De},Me=useAnimatedStyle(()=>{const e=Z.value;if(e<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const t=s?.55:1;if(N){const a=Math.max(0,G.value-F.value+2*M);return{opacity:t,transform:[{translateX:F.value-M},{scaleX:a/e}]}}return{opacity:t,transform:[{translateX:F.value+M-e},{scaleX:1}]}}),Oe=useAnimatedStyle(()=>({transform:[{translateX:F.value-Ae},{scale:K.value}]})),Ee=useAnimatedStyle(()=>({transform:[{translateX:G.value-Ae},{scale:Y.value}]})),je=useAnimatedStyle(()=>({opacity:q.value})),Te=useAnimatedStyle(()=>({opacity:Q.value})),clampDisplay=e=>clamp(e,a,r),Ve=clampDisplay(N?Math.min(...X):X),Re=clampDisplay(N?Math.max(...X):X);return _jsx(View,{ref:t,style:[V.container,p,g],testID:x,accessibilityRole:"adjustable",accessibilityLabel:h,accessibilityState:{disabled:s},"aria-disabled":s,accessibilityValue:N?{min:a,max:r,now:Ve,text:`${Ve} to ${Re}`}:{min:a,max:r,now:Ve},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:_e,children:_jsx(Pressable,{onPress:xe,disabled:s||N,style:V.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsxs(View,{style:V.trackWrap,onLayout:de,children:[_jsxs(View,{style:V.trackClip,pointerEvents:"none",children:[_jsx(View,{style:[V.track,{backgroundColor:s?_.colors.surface.disabled:_.colors.border.primary},f]}),_jsx(Animated.View,{style:[V.fill,{backgroundColor:s?_.colors.surface.disabled:W},y,Me]})]}),_jsx(GestureDetector,{gesture:ke,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:Ae,...smoothCorners,opacity:s?.55:1},He,v,Oe],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,je],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Ve):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Ve)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}),N?_jsx(GestureDetector,{gesture:Ce,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:Ae,...smoothCorners,opacity:s?.55:1},He,v,Ee],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Te],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Re):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Re)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}):null]})})})});Slider.displayName="Slider";const buildStyles=(e,t)=>{const a=e.shadows.md,r=Math.max(t.thumbDiameter,t.trackHeight),i=r/2+4;return StyleSheet.create({container:{width:"100%",paddingVertical:i,justifyContent:"center"},trackTouch:{width:"100%",justifyContent:"center"},trackWrap:{width:"100%",height:r,justifyContent:"center"},trackClip:{position:"absolute",left:0,right:0,height:t.trackHeight,top:(r-t.trackHeight)/2,borderRadius:t.trackHeight/2,...smoothCorners,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:t.trackHeight/2,...smoothCorners},fill:{position:"absolute",top:0,left:0,width:"100%",height:t.trackHeight,borderRadius:t.trackHeight/2,...smoothCorners,transformOrigin:"left"},thumb:{position:"absolute",top:(r-t.thumbDiameter)/2,left:0,borderWidth:2,shadowColor:a.shadowColor,shadowOffset:a.shadowOffset,shadowOpacity:a.shadowOpacity,shadowRadius:a.shadowRadius,elevation:a.elevation,alignItems:"center",justifyContent:"center"},bubbleWrap:{position:"absolute",bottom:t.thumbDiameter+2,left:t.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,...smoothCorners,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.xxs,borderRadius:e.radius.md,...smoothCorners,minWidth:36,alignItems:"center",justifyContent:"center",...Platform.select({ios:{shadowColor:e.shadows.sm.shadowColor,shadowOffset:e.shadows.sm.shadowOffset,shadowOpacity:e.shadows.sm.shadowOpacity,shadowRadius:e.shadows.sm.shadowRadius},android:{elevation:e.shadows.sm.elevation},default:{}})},bubbleText:{color:e.colors.onPrimary,fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.semibold}})};export{Slider};export default Slider;
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Platform,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,Easing,runOnJS,useAnimatedStyle,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{useControllableState}from"../../hooks/index.js";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{sliderToneInk}from"./valueText.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SIZE_MAP={sm:{trackHeight:4,thumbDiameter:24},md:{trackHeight:6,thumbDiameter:28},lg:{trackHeight:8,thumbDiameter:32}},VARIANT_SIZE_MAP={inset:{sm:{trackHeight:14,thumbDiameter:10},md:{trackHeight:20,thumbDiameter:14},lg:{trackHeight:26,thumbDiameter:18}},minimal:{sm:{trackHeight:2,thumbDiameter:14},md:{trackHeight:3,thumbDiameter:18},lg:{trackHeight:4,thumbDiameter:22}},bar:{sm:{trackHeight:20,thumbDiameter:20},md:{trackHeight:28,thumbDiameter:28},lg:{trackHeight:36,thumbDiameter:36}}},INSET_RING_RATIO=.3,MIN_THUMB_TOUCH=44,TONE_TO_COLOR_KEY={primary:"primary",success:"success",warning:"warning",error:"error"},clamp=(e,t,a)=>Math.min(Math.max(e,t),a),snapToStep=(e,t,a,r)=>{if(r<=0)return clamp(e,t,a);const i=Math.round((e-t)/r)*r+t,s=String(r).split(".")[1]?.length??0,n=s>0?Number(i.toFixed(s)):i;return clamp(n,t,a)},BUBBLE_GAP=2,BUBBLE_CARET=8,BUBBLE_WRAP_WIDTH=160,NO_SHADOW={shadowOpacity:0,elevation:0},defaultFormatLabel=e=>String(e),Slider=forwardRef((e,t)=>{const{min:a=0,max:r=100,step:i=1,disabled:s=!1,tone:n="primary",size:o="md",variant:l="default",showLabel:u=!1,snapThumb:c=!1,formatLabel:m=defaultFormatLabel,renderLabel:d,accessibilityLabel:h,haptic:b,style:g,containerStyle:p,trackStyle:f,fillStyle:y,thumbStyle:v,labelStyle:w,thumbPressScale:S,labelShowDuration:k,labelOpacity:C,testID:x}=e,_=useTheme(),A=_.components.slider,D=A?.[o],H=useMemo(()=>"default"===l?{trackHeight:D?.trackHeight??SIZE_MAP[o].trackHeight,thumbDiameter:D?.thumbDiameter??SIZE_MAP[o].thumbDiameter}:VARIANT_SIZE_MAP[l][o],[D,o,l]),M="inset"===l?H.trackHeight/2:0,O=A?.thumbPressAnimation??!1,E=S??A?.thumbPressScale??1.1,j=k??A?.labelShowDuration??_.motion.duration.fast,T=C??A?.labelOpacity??1,V=useMemo(()=>buildStyles(_,H),[_,H]),R=useMemo(()=>({damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass}),[_.motion.spring.snappy]),[I,P]=useState(0),W=_.colors[TONE_TO_COLOR_KEY[n]],L=sliderToneInk(_,n),N=!0===e.range,[X,B]=useControllableState({value:e.value,defaultValue:e.defaultValue??(N?[a,r]:a),onChange:e.onChange}),F=useSharedValue(0),G=useSharedValue(0),J=useSharedValue(N?X[0]:X),U=useSharedValue(N?X[1]:X),z=useSharedValue(0),Z=useSharedValue(0),K=useSharedValue(1),Y=useSharedValue(1),$="always"===u,q=useSharedValue($?1:0),Q=useSharedValue($?1:0),ee=useMemo(()=>10**(String(i).split(".")[1]?.length??0),[i]);useEffect(()=>()=>{cancelAnimation(F),cancelAnimation(G),cancelAnimation(K),cancelAnimation(Y),cancelAnimation(q),cancelAnimation(Q)},[F,G,K,Y,q,Q]);const te=useCallback((e,t)=>{const i=t-2*M;return r===a||i<=0?M:M+(e-a)/(r-a)*i},[a,r,M]),ae=useCallback((e,t)=>{const s=t-2*M;if(s<=0)return a;const n=clamp((e-M)/s,0,1);return snapToStep(a+n*(r-a),a,r,i)},[a,r,i,M]),re=useRef(!1),ie=_.motion.duration.fast,se=useRef(X);se.current=X;const ne=useRef(I);ne.current=I;const oe=useCallback((e=!1)=>{const t=ne.current;if(t<=0)return;const place=t=>e?withTiming(t,{duration:ie,easing:Easing.out(Easing.cubic)}):t,a=se.current;if(N){const[e,r]=a,i=Math.min(e,r),s=Math.max(e,r);J.value=i,U.value=s,F.value=place(te(i,t)),G.value=place(te(s,t))}else{const e=a;J.value=e,U.value=e,F.value=place(te(e,t))}},[N,te,J,U,F,G,ie]),[le,ue]=useState(0),ce=useRef(!1),me=useCallback(e=>{re.current=e,e||(ce.current=!0,ue(e=>e+1))},[]);useEffect(()=>{if(re.current)return;const e=ce.current;ce.current=!1,oe(e)},[JSON.stringify(X),I,le,oe]);const de=useCallback(e=>{const t=e.nativeEvent.layout.width;Z.value=t,P(t)},[Z]),he=useCallback((e,t)=>{B(N?[e,t]:e)},[N,B]),be=useCallback(()=>{const e=resolveHaptic(b,"selection");e&&triggerHaptic(e)},[b]),ge=useRef(he);ge.current=he;const pe=useRef(be);pe.current=be;const fe=useCallback((e,t)=>ge.current(e,t),[]),ye=useCallback(()=>pe.current(),[]),ve=Math.max(0,(44-H.thumbDiameter)/2),we=ve>0?ve:void 0,Se=useCallback(e=>{const t="low"===e?F:G,n="low"===e?J:U,o="low"===e?U:J,l="low"===e?K:Y,m="low"===e?q:Q,d="low"===e,h=a,b=r,g=i,p=ee,f=N,y=E,v=O,w=!0===u,S=c,k=T,C=j,x=R,_=M,follow=e=>{"worklet";const a=Z.value-2*_;if(a<=0||!Number.isFinite(e))return;const r=Math.min(Math.max(z.value+e,_),Z.value-_);let i=h+(r-_)/a*(b-h);g>0&&(i=Math.round((i-h)/g)*g+h,i=Math.round(i*p)/p),i=Math.min(Math.max(i,h),b),f&&(d&&i>o.value&&(i=o.value),!d&&i<o.value&&(i=o.value)),t.value=S||b===h?b===h?_:_+(i-h)/(b-h)*a:f?d?Math.min(r,G.value):Math.max(r,F.value):r,i!==n.value&&(n.value=i,i!==h&&i!==b||runOnJS(ye)(),runOnJS(fe)(J.value,U.value))},A=Gesture.Pan().enabled(!s).minDistance(0);return(void 0===we?A:A.hitSlop(we)).onStart(()=>{"worklet";runOnJS(me)(!0),z.value=t.value,v&&(l.value=withSpring(y,x)),w&&(m.value=withTiming(k,{duration:C,easing:Easing.out(Easing.cubic)})),runOnJS(ye)()}).onUpdate(e=>{"worklet";follow(e.translationX)}).onEnd(e=>{"worklet";follow(e.translationX),v&&(l.value=withSpring(1,x)),w&&(m.value=withTiming(0,{duration:C,easing:Easing.out(Easing.cubic)}))}).onFinalize(()=>{"worklet";runOnJS(me)(!1)})},[s,a,r,i,ee,N,E,O,u,c,T,j,R,M,we,fe,ye,me,F,G,J,U,K,Y,q,Q,z,Z]),ke=useMemo(()=>Se("low"),[Se]),Ce=useMemo(()=>Se("high"),[Se]),xe=useCallback(e=>{if(s||N||I<=0)return;const t=clamp(e.nativeEvent.locationX,0,I),a=ae(t,I);a!==J.value&&(be(),J.value=a,F.value=withTiming(te(a,I),{duration:_.motion.duration.fast,easing:Easing.out(Easing.cubic)}),he(a,a))},[s,N,I,ae,te,he,be,F,J,_.motion.duration.fast]),Ae=useCallback(e=>{if(s)return;const t="increment"===e.nativeEvent.actionName?i:-i,n=i>0?Math.round(t*ee)/ee:t;if(N){const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,U.value);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,U.value))}else{const e=Math.round((J.value+n)*ee)/ee,t=clamp(e,a,r);t!==J.value&&(J.value=t,F.value=te(t,I),be(),he(t,t))}},[s,i,ee,N,a,r,te,I,F,J,U,he,be]),De=H.thumbDiameter/2,He=s?_.colors.surface.disabled:W,Me="inset"===l?{backgroundColor:He,borderColor:_.colors.background.elevated,borderWidth:Math.max(2,Math.round(.3*H.thumbDiameter)),...NO_SHADOW}:"minimal"===l?{backgroundColor:He,borderWidth:0}:"bar"===l?{backgroundColor:"transparent",borderWidth:0,...NO_SHADOW}:{backgroundColor:_.colors.background.elevated,borderColor:He},Oe=useAnimatedStyle(()=>{const e=Z.value;if(e<=0)return{opacity:0,transform:[{translateX:0},{scaleX:1}]};const t=s?.55:1;if(N){const a=Math.max(0,G.value-F.value+2*M);return{opacity:t,transform:[{translateX:F.value-M},{scaleX:a/e}]}}return{opacity:t,transform:[{translateX:F.value+M-e},{scaleX:1}]}}),Ee=useAnimatedStyle(()=>({transform:[{translateX:F.value-De},{scale:K.value}]})),je=useAnimatedStyle(()=>({transform:[{translateX:G.value-De},{scale:Y.value}]})),Te=useAnimatedStyle(()=>({opacity:q.value})),Ve=useAnimatedStyle(()=>({opacity:Q.value})),clampDisplay=e=>clamp(e,a,r),Re=clampDisplay(N?Math.min(...X):X),Ie=clampDisplay(N?Math.max(...X):X);return _jsx(View,{ref:t,style:[V.container,p,g],testID:x,accessibilityRole:"adjustable",accessibilityLabel:h,accessibilityState:{disabled:s},"aria-disabled":s,accessibilityValue:N?{min:a,max:r,now:Re,text:`${Re} to ${Ie}`}:{min:a,max:r,now:Re},accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:Ae,children:_jsx(Pressable,{onPress:xe,disabled:s||N,style:V.trackTouch,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:_jsxs(View,{style:V.trackWrap,onLayout:de,children:[_jsxs(View,{style:V.trackClip,pointerEvents:"none",children:[_jsx(View,{style:[V.track,{backgroundColor:s?_.colors.surface.disabled:_.colors.border.primary},f]}),_jsx(Animated.View,{style:[V.fill,{backgroundColor:s?_.colors.surface.disabled:W},y,Oe]})]}),_jsx(GestureDetector,{gesture:ke,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:De,...smoothCorners,opacity:s?.55:1},Me,v,Ee],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Te],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Re):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Re)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}),N?_jsx(GestureDetector,{gesture:Ce,children:_jsx(Animated.View,{style:[V.thumb,{width:H.thumbDiameter,height:H.thumbDiameter,borderRadius:De,...smoothCorners,opacity:s?.55:1},Me,v,je],accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:u?_jsxs(Animated.View,{style:[V.bubbleWrap,Ve],pointerEvents:"none",children:[_jsx(View,{style:[V.bubble,{backgroundColor:W}],children:d?d(Ie):_jsx(Text,{style:[V.bubbleText,{color:L},w],numberOfLines:1,children:m(Ie)})}),_jsx(View,{style:[V.bubbleCaret,{backgroundColor:W}]})]}):null})}):null]})})})});Slider.displayName="Slider";const buildStyles=(e,t)=>{const a=e.shadows.md,r=Math.max(t.thumbDiameter,t.trackHeight),i=r/2+4;return StyleSheet.create({container:{width:"100%",paddingVertical:i,justifyContent:"center"},trackTouch:{width:"100%",justifyContent:"center"},trackWrap:{width:"100%",height:r,justifyContent:"center"},trackClip:{position:"absolute",left:0,right:0,height:t.trackHeight,top:(r-t.trackHeight)/2,borderRadius:t.trackHeight/2,...smoothCorners,overflow:"hidden"},track:{position:"absolute",top:0,right:0,bottom:0,left:0,borderRadius:t.trackHeight/2,...smoothCorners},fill:{position:"absolute",top:0,left:0,width:"100%",height:t.trackHeight,borderRadius:t.trackHeight/2,...smoothCorners,transformOrigin:"left"},thumb:{position:"absolute",top:(r-t.thumbDiameter)/2,left:0,borderWidth:2,shadowColor:a.shadowColor,shadowOffset:a.shadowOffset,shadowOpacity:a.shadowOpacity,shadowRadius:a.shadowRadius,elevation:a.elevation,alignItems:"center",justifyContent:"center"},bubbleWrap:{position:"absolute",bottom:t.thumbDiameter+2,left:t.thumbDiameter/2-80,width:160,alignItems:"center"},bubbleCaret:{width:8,height:8,marginTop:-5,borderRadius:1,...smoothCorners,transform:[{rotate:"45deg"}]},bubble:{paddingHorizontal:e.spacing.sm,paddingVertical:e.spacing.xxs,borderRadius:e.radius.md,...smoothCorners,minWidth:36,alignItems:"center",justifyContent:"center",...Platform.select({ios:{shadowColor:e.shadows.sm.shadowColor,shadowOffset:e.shadows.sm.shadowOffset,shadowOpacity:e.shadows.sm.shadowOpacity,shadowRadius:e.shadows.sm.shadowRadius},android:{elevation:e.shadows.sm.elevation},default:{}})},bubbleText:{color:e.colors.onPrimary,fontSize:e.typography.fontSize.xs,fontWeight:e.typography.fontWeight.semibold}})};export{Slider};export default Slider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Pressable,StyleSheet,Text,View}from"react-native";import{GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{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{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Button from"../Button/Button.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{PickerTrigger}from"../PickerTrigger/PickerTrigger.js";import{ToastHost}from"../Toast/ToastProvider.js";import{WheelPicker}from"../WheelPicker/index.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const range=(e,t,i=1)=>{const a=[];for(let r=e;r<=t;r+=i)a.push(r);return a},pad2=e=>e.toString().padStart(2,"0"),to24h=(e,t,i)=>"24h"===i?e:"AM"===t?12===e?0:e:12===e?12:e+12,from24h=(e,t)=>"24h"===t?{displayHour:e,period:"AM"}:0===e?{displayHour:12,period:"AM"}:12===e?{displayHour:12,period:"PM"}:e>12?{displayHour:e-12,period:"PM"}:{displayHour:e,period:"AM"},clampMinuteToStep=(e,t)=>{const i=Math.round(e/t)*t;return Math.min(59,Math.max(0,i))},TimePicker=e=>{const{visible:t,value:i,onChange:a,onClose:r,format:s="12h",minuteStep:o=1,title:n="Select Time",confirmLabel:l="Confirm",cancelLabel:u="Cancel",testID:m,style:c,containerStyle:d,headerLabelStyle:p,footerButtonStyle:g,label:h,placeholder:f,helperText:y,error:b,required:x,disabled:M,size:v,variant:S,clearable:k,onClear:j,formatValue:T,triggerStyle:w,haptic:A}=e,C=void 0!==e.visible,[D,H]=useState(!1),P=C?t:D,V=C?m:m?`${m}-modal`:void 0,_=useTheme(),[R,B]=useModalInsets(),N=useMemo(()=>buildStyles(_),[_]),I=useRef(createAnimatedValue(0)).current,$=useRef(createAnimatedValue(40)).current,L=useRef(createAnimatedValue(0)).current,z=useRef(0),F=useCallback(()=>{C?r?.():H(!1)},[C,r]),O=useCallback(()=>{Animated.parallel([Animated.timing(I,{toValue:0,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!1}),Animated.timing($,{toValue:40,duration:_.motion.duration.fast,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})]).start(()=>F())},[F,I,$,_.motion.duration.fast,_.motion.easing.accelerate]),{handleGesture:W}=useDragToDismiss({drag:L,travel:()=>z.current||320,onDismiss:O}),E=useMemo(()=>"24h"===s?range(0,23):range(1,12),[s]),G=useMemo(()=>range(0,59,o),[o]),q=useMemo(()=>["AM","PM"],[]),U=useMemo(()=>{const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:r,period:n}=from24h(e,s);return{displayHour:r,minute:a,period:n,hour24:e}},[i,s,o]),[Y,J]=useState(()=>{const e=E.indexOf(U.displayHour);return e>=0?e:0}),[K,Q]=useState(()=>{const e=G.indexOf(U.minute);return e>=0?e:0}),[X,Z]=useState(()=>"PM"===U.period?1:0);useEffect(()=>{if(!P)return;const e=i&&Number.isFinite(i.hour)?i.hour:(new Date).getHours(),t=i&&Number.isFinite(i.minute)?i.minute:(new Date).getMinutes(),a=clampMinuteToStep(t,o),{displayHour:r,period:n}=from24h(e,s),l=E.indexOf(r);J(l>=0?l:0);const u=G.indexOf(a);Q(u>=0?u:0),Z("PM"===n?1:0)},[P,i,s,o,E,G]),useEffect(()=>{let e;return P?(e=Animated.parallel([Animated.timing(I,{toValue:1,duration:_.motion.duration.normal,easing:Easing.out(Easing.cubic),useNativeDriver:!1}),Animated.spring($,{toValue:0,damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()):(I.setValue(0),setNativeValue($,40),setNativeValue(L,0)),()=>e?.stop()},[P,I,$,L,_.motion]);const ee=useCallback((e,t)=>{"hour"===e?J(Math.max(0,E.indexOf(Number(t)))):"minute"===e?Q(Math.max(0,G.indexOf(Number(t)))):Z("PM"===t?1:0)},[E,G]),te=useCallback(()=>{!1!==A&&triggerHaptic("selection"),O()},[O,A]),ie=useCallback(()=>{const e=E[Y]??0,t=q[X]??"AM",i=to24h(e,t,s),r=G[K]??0;!1!==A&&triggerHaptic("notificationSuccess"),a?.({hour:i,minute:r}),O()},[E,Y,q,X,G,K,s,a,O,A]),ae=useMemo(()=>{const e=E[Y]??0,t=G[K]??0;if("24h"===s)return`${pad2(e)}:${pad2(t)}`;const i=q[X]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[E,Y,G,K,q,X,s]),re=useMemo(()=>E.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[E]),se=useMemo(()=>G.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[G]),oe=useMemo(()=>q.map(e=>({value:e,label:e})),[q]),ne=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:re,value:E[Y]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:se,value:G[K]??0,gapAfter:"12h"===s?_.spacing.md:void 0,testID:"time-picker-minute"}];return"12h"===s&&e.push({key:"period",label:"Period",items:oe,value:q[X]??"AM",testID:"time-picker-period"}),e},[re,se,oe,E,Y,G,K,q,X,s,_.spacing.md]),le=useCallback(e=>{if("24h"===s)return`${pad2(e.hour)}:${pad2(e.minute)}`;const{displayHour:t,period:i}=from24h(e.hour,"12h");return`${t}:${pad2(e.minute)} ${i}`},[s]),ue=!C&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(T??le)(i):void 0,me=_jsx(Modal,{visible:P,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:O,testID:V,children:_jsx(ModalSafeArea,{onInsets:B,children:_jsxs(GestureHandlerRootView,{collapsable:!1,style:N.backdrop,children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:O,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsxs(Animated.View,{style:[N.sheet,{paddingBottom:Math.max(R.bottom,_.spacing.lg),transform:[{translateY:Animated.add($,L)}]},c,d],onLayout:e=>{z.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:n,children:[_jsx(GestureDetector,{gesture:W,children:_jsxs(View,{children:[_jsx(View,{style:N.handle}),_jsx(Text,{style:[N.title,p],accessibilityRole:"header",children:n})]})}),_jsx(View,{style:N.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${ae}`,children:_jsx(Text,{style:N.summary,children:ae})}),_jsx(WheelPicker,{columns:ne,onChange:ee,haptic:A,style:N.wheels}),_jsxs(View,{style:N.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:te,style:[N.footerBtn,g],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:ie,style:[N.footerBtn,g],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]}),_jsx(ToastHost,{})]})})});return C?me:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:h,placeholder:f,helperText:y,error:b,required:x,disabled:M,size:v,variant:S,clearable:k,onClear:j,value:ue,onPress:()=>H(!0),triggerStyle:w,testID:m}),me]})},buildStyles=e=>{const t=e.shadows.xl;return StyleSheet.create({backdrop:{flex:1,backgroundColor:e.colors.background.overlay,justifyContent:"flex-end"},sheet:{backgroundColor:e.colors.background.elevated,borderTopLeftRadius:e.radius.xl,borderTopRightRadius:e.radius.xl,...smoothCorners,paddingTop:e.spacing.sm,paddingHorizontal:e.spacing.lg,paddingBottom:e.spacing.xl,shadowColor:t.shadowColor,shadowOffset:t.shadowOffset,shadowOpacity:t.shadowOpacity,shadowRadius:t.shadowRadius,elevation:t.elevation},handle:{alignSelf:"center",width:e.components.timePicker?.handleWidth??36,height:e.components.timePicker?.handleHeight??4,borderRadius:e.radius.full,...smoothCorners,backgroundColor:e.colors.border.secondary,marginBottom:e.spacing.sm},title:{textAlign:"center",fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.primary,marginBottom:e.spacing.sm},summaryWrap:{alignItems:"center",marginBottom:e.spacing.md},summary:{fontSize:e.typography.fontSize["2xl"],fontWeight:e.typography.fontWeight.bold,color:e.colors.primary,letterSpacing:e.typography.letterSpacing.wide},wheels:{marginBottom:e.spacing.lg},footer:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:e.spacing.sm},footerBtn:{paddingHorizontal:e.spacing.lg}})};export{TimePicker};export default TimePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:
|
|
1
|
+
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,T="rich"===r,_=e.trigger??(T?"press":"longPress"),A=useTheme(),R=useSafeAreaInsets(),[S,w]=useModalInsets(),x=useMemo(()=>({...R,top:S.top,bottom:S.bottom}),[R,S]),v=useWindowDimensions(),j=useMemo(()=>buildStyles(A),[A]),C=A.components.tooltip,D=C?.gap??8,E=C?.screenPadding??8,P=C?.pressAutoHideMs??4e3,L=C?.arrowHalfWidth??4,H=C?.arrowHeight??6,M=C?.arrowCornerPadding??12,I=C?.lineHeight??18,F=c??(T?280:C?.maxWidth??240),W="press"===_&&!T,O=C?.enableScaleAnimation??!1,V=C?.exitDurationMs??150,k="manual"===_||"boolean"==typeof a,[U,N]=useState(!1),B=k?Boolean(a):U,[z,G]=useState(null),[X,Y]=useState({width:0,height:0}),q=useRef(null),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(!1),ee=useRef(!1),te=useRef(createAnimatedValue(B?1:O?.85:1)).current,oe=useRef(createAnimatedValue(B?1:0)).current,re=useRef(null),se=useRef(!1),ne=useCallback(e=>{k||N(e),l?.(e)},[k,l]),ie=useCallback(()=>{q.current&&q.current.measureInWindow((e,t,o,r)=>{G({x:e,y:t,width:o,height:r})})},[]),ae=useCallback(e=>{ie(),ne(!0)},[ie,ne]),le=useCallback(()=>{ne(!1)},[ne]),ue=useRef(le);ue.current=le;const ce=useCallback(()=>{if(!$.current)return;$.current=!1;const e=Z.current;Z.current=null,e?e():T&&focusHost(J.current??q.current)},[T]);useEffect(()=>{if(B)return ee.current=!0,$.current=!1,claimAnchoredSurface(()=>ue.current());ee.current&&(ee.current=!1,$.current=!0,"ios"!==Platform.OS&&ce())},[B]);const me=useCallback(()=>{Z.current=n?.onPress??null,le()},[n,le]);useEffect(()=>{if(!se.current)return se.current=!0,B&&(ie(),W&&(re.current&&clearTimeout(re.current),re.current=setTimeout(()=>{le()},P))),()=>{re.current&&(clearTimeout(re.current),re.current=null)};let e;if(B){ie();const t=[Animated.timing(oe,{toValue:1,duration:A.motion.duration.fast,useNativeDriver:!0})];O&&t.push(Animated.spring(te,{toValue:1,damping:A.motion.spring.snappy.damping,stiffness:A.motion.spring.snappy.stiffness,mass:A.motion.spring.snappy.mass,useNativeDriver:!0})),e=Animated.parallel(t),e.start(),W&&(re.current&&clearTimeout(re.current),re.current=setTimeout(()=>{le()},P))}else{const t=[Animated.timing(oe,{toValue:0,duration:V,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})];O&&t.push(Animated.timing(te,{toValue:.85,duration:V,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(),re.current&&(clearTimeout(re.current),re.current=null)}return()=>{e?.stop(),re.current&&(clearTimeout(re.current),re.current=null)}},[B]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===X.width&&o===X.height||Y({width:t,height:o})},de=useMemo(()=>resolveTooltipPosition({anchor:z,size:X,placement:i,rich:T,viewport:{width:v.width,height:v.height,insets:x},maxWidth:F,gap:D,padding:E,arrowCornerPadding:M}),[z,X,i,T,v.width,v.height,x,F,D,E,M]),fe=B&&null!==z&&X.width>0;useEffect(()=>{if(!T||!fe)return;const e="web"===Platform.OS?Q:K,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[T,fe]);const pe=o.props,he=useMemo(()=>mergeRefs(pe.ref,J),[pe.ref]),ge={};"longPress"!==_||pe.contextMenu?"press"===_&&(ge.onPress=e=>{pe.onPress?.(e),ae(e)}):(ge.onLongPress=ae,ge.accessibilityHint="Long press for more info"),T&&(ge.ref=he);const be=React.cloneElement(o,ge),ye=d??("string"==typeof t?t:"Tooltip"),Te=useMemo(()=>{if(!m)return null;const e=T?A.colors.background.elevated:A.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:L,borderRightWidth:L,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===de.placement?{...t,bottom:-H,left:de.arrowOffset-L,transform:[{rotate:"180deg"}]}:"bottom"===de.placement?{...t,top:-H,left:de.arrowOffset-L}:"left"===de.placement?{...t,right:-H,top:de.arrowOffset-L,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:de.arrowOffset-L,transform:[{rotate:"-90deg"}]}},[m,de,A,T,L,H]),Ae={position:"absolute",top:de.top,left:de.left,maxWidth:F,opacity:fe?oe:0,transform:[{scale:te}]},Re=Te?_jsx(View,{style:[Te,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:q,collapsable:!1,onLayout:ie,testID:y,children:be}),_jsx(Modal,{visible:B,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:le,onDismiss:ce,children:_jsxs(ModalSafeArea,{onInsets:w,children:[T?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?le:void 0,accessibilityLabel:b,accessibilityRole:"button"}),B?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[Ae,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:me,focusRef:K,actionRef:Q,messageStyle:g}),Re]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?le:void 0,accessibilityLabel:b,accessibilityRole:"button",children:B?_jsxs(Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:ye,onLayout:handleContentLayout,style:[Ae,f,p],children:[_jsx(View,{style:[j.tooltip,{backgroundColor:A.colors.background.inverse,borderRadius:A.radius.md,...smoothCorners,paddingHorizontal:A.spacing.md,paddingVertical:A.spacing.sm,...A.shadows.lg,shadowColor:A.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:A.colors.text.inverse,fontSize:A.typography.fontSize.sm,lineHeight:I},g],children:t}):t}),Re]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar}from"./AppBar/index.js";export{AsyncBlock}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete}from"./Autocomplete/index.js";export{Avatar,AvatarGroup}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Banner}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation}from"./BottomNavigation/index.js";export{BottomSheet,useBottomSheet,useSheetSwap}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button}from"./Button/index.js";export{Calendar}from"./Calendar/index.js";export{Card}from"./Card/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{DatePicker}from"./DatePicker/index.js";export{DateRangePicker}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DecimalInput,parseDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FilterChipRow}from"./FilterChipRow/index.js";export{FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{ImageGallery}from"./ImageGallery/index.js";export{InlineSelect}from"./InlineSelect/index.js";export{Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{NumberInput}from"./NumberInput/index.js";export{OnboardingPager}from"./OnboardingPager/index.js";export{OptionSheet}from"./OptionSheet/index.js";export{OTPInput}from"./OTPInput/index.js";export{PaymentResult}from"./PaymentResult/index.js";export{PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{PickerTrigger}from"./PickerTrigger/index.js";export{ProfileCompletion}from"./ProfileCompletion/index.js";export{ProfilePicker}from"./ProfilePicker/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{Rating}from"./Rating/index.js";export{Repeater}from"./Repeater/index.js";export{applyMarkdownAction,RichTextEditor}from"./RichTextEditor/index.js";export{ScannerOverlay}from"./ScannerOverlay/index.js";export{SearchBar,useRecentSearches}from"./SearchBar/index.js";export{SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{Select}from"./Select/index.js";export{SignaturePad}from"./SignaturePad/index.js";export{Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useReduceMotion,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{SliderField}from"./SliderField/index.js";export{SlideToConfirm}from"./SlideToConfirm/index.js";export{Sparkline}from"./Sparkline/index.js";export{Spinner}from"./Spinner/index.js";export{SquircleView}from"./SquircleView/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{TimePicker}from"./TimePicker/index.js";export{Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{Tooltip}from"./Tooltip/index.js";export{Tour}from"./Tour/index.js";export{TypingIndicator}from"./TypingIndicator/index.js";export{WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";
|
|
1
|
+
"use strict";export{Accordion,AccordionGroup}from"./Accordion/index.js";export{AmountSlider}from"./AmountSlider/index.js";export{AnimatePresence}from"./AnimatePresence/index.js";export{AppBar}from"./AppBar/index.js";export{AsyncBlock}from"./AsyncBlock/index.js";export{AuthedImage,authedImageCacheStats,clearAuthedImageCache,getAuthedImageCacheLimit,setAuthedImageCacheLimit}from"./AuthedImage/index.js";export{Autocomplete}from"./Autocomplete/index.js";export{Avatar,AvatarGroup}from"./Avatar/index.js";export{Badge}from"./Badge/index.js";export{Banner}from"./Banner/index.js";export{BarChart}from"./BarChart/index.js";export{BottomNavigation}from"./BottomNavigation/index.js";export{BottomSheet,useBottomSheet,useSheetSwap}from"./BottomSheet/index.js";export{Box,Row,Spacer,Stack}from"./Box/index.js";export{Button}from"./Button/index.js";export{Calendar}from"./Calendar/index.js";export{Card}from"./Card/index.js";export{Carousel}from"./Carousel/index.js";export{Checkbox}from"./Checkbox/index.js";export{Chip}from"./Chip/index.js";export{ChoiceGroup}from"./ChoiceGroup/index.js";export{Composer}from"./Composer/index.js";export{Confetti}from"./Confetti/index.js";export{DatePicker}from"./DatePicker/index.js";export{DateRangePicker}from"./DateRangePicker/index.js";export{DateSeparator,DEFAULT_DATE_SEPARATOR_LABELS,dayLabel}from"./DateSeparator/index.js";export{cleanDecimalText,DecimalInput,isUnclearDecimalComma,parseDecimalText,pointDecimalText}from"./DecimalInput/index.js";export{Descriptions}from"./Descriptions/index.js";export{Dialog}from"./Dialog/index.js";export{Divider}from"./Divider/index.js";export{Drawer}from"./Drawer/index.js";export{EmptyState}from"./EmptyState/index.js";export{ErrorBoundary,useErrorHandler,withErrorBoundary}from"./ErrorBoundary/index.js";export{FilePicker,formatFileSize}from"./FilePicker/index.js";export{FileViewer}from"./FileViewer/index.js";export{FilterChipRow}from"./FilterChipRow/index.js";export{FloatingActionButton,FloatingActionButtonGroup}from"./FloatingActionButton/index.js";export{ForceUpdateDialog}from"./ForceUpdateDialog/index.js";export{FormField}from"./FormField/index.js";export{IconBadge}from"./IconBadge/index.js";export{IconButton}from"./IconButton/index.js";export{ImageGallery}from"./ImageGallery/index.js";export{InlineSelect}from"./InlineSelect/index.js";export{Input}from"./Input/index.js";export{KeyboardAwareScrollView}from"./KeyboardAwareScrollView/index.js";export{KeyboardToolbar}from"./KeyboardToolbar/index.js";export{ListItem}from"./ListItem/index.js";export{LoaderOverlay,loader,useLoader}from"./LoaderOverlay/index.js";export{Markdown}from"./Markdown/index.js";export{Menu}from"./Menu/index.js";export{DEFAULT_MESSAGE_BUBBLE_LABELS,MessageBubble}from"./MessageBubble/index.js";export{DEFAULT_MESSAGE_LIST_LABELS,MessageList}from"./MessageList/index.js";export{MODAL_DISMISS_GRACE_MS,Modal}from"./Modal/index.js";export{Notation,parseNotation,sym}from"./Notation/index.js";export{NumberInput}from"./NumberInput/index.js";export{OnboardingPager}from"./OnboardingPager/index.js";export{OptionSheet}from"./OptionSheet/index.js";export{OTPInput}from"./OTPInput/index.js";export{PaymentResult}from"./PaymentResult/index.js";export{PermissionPrompt,usePermissionPrompt}from"./PermissionPrompt/index.js";export{ALL_CALLING_CODES,DEFAULT_CALLING_CODES,formatE164,PhoneNumberInput,parseE164}from"./PhoneNumberInput/index.js";export{PickerTrigger}from"./PickerTrigger/index.js";export{ProfileCompletion}from"./ProfileCompletion/index.js";export{ProfilePicker}from"./ProfilePicker/index.js";export{ProgressBar}from"./ProgressBar/index.js";export{ProgressRing}from"./ProgressRing/index.js";export{Radio,RadioDot,RadioGroup}from"./Radio/index.js";export{Rating}from"./Rating/index.js";export{Repeater}from"./Repeater/index.js";export{applyMarkdownAction,RichTextEditor}from"./RichTextEditor/index.js";export{ScannerOverlay}from"./ScannerOverlay/index.js";export{SearchBar,useRecentSearches}from"./SearchBar/index.js";export{SectionHeader}from"./SectionHeader/index.js";export{SegmentedControl}from"./SegmentedControl/index.js";export{Select}from"./Select/index.js";export{SignaturePad}from"./SignaturePad/index.js";export{Skeleton,SkeletonCircle,SkeletonClockProvider,SkeletonContent,SkeletonList,SkeletonProvider,SkeletonSkip,SkeletonText,useReduceMotion,useSkeletonClock,useSkeletonDefaults}from"./Skeleton/index.js";export{Slider}from"./Slider/index.js";export{SliderField}from"./SliderField/index.js";export{SlideToConfirm}from"./SlideToConfirm/index.js";export{Sparkline}from"./Sparkline/index.js";export{Spinner}from"./Spinner/index.js";export{SquircleView}from"./SquircleView/index.js";export{StatTile}from"./StatTile/index.js";export{StatusBadge}from"./StatusBadge/index.js";export{Stepper}from"./Stepper/index.js";export{Swipeable}from"./Swipeable/index.js";export{Switch}from"./Switch/index.js";export{Tabs}from"./Tabs/index.js";export{TagInput}from"./TagInput/index.js";export{Text}from"./Text/index.js";export{Timeline}from"./Timeline/index.js";export{TimePicker}from"./TimePicker/index.js";export{Toast,ToastHost,ToastProvider,toast,useToast}from"./Toast/index.js";export{Tooltip}from"./Tooltip/index.js";export{Tour}from"./Tour/index.js";export{TypingIndicator}from"./TypingIndicator/index.js";export{WheelPicker}from"./WheelPicker/index.js";export{ZoomableImage}from"./ZoomableImage/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{valuesEqual}from"./equal.js";import{getPath,setPath}from"./path.js";const rulesFor=(e,r)=>{if(!e||"function"==typeof e)return[];const t=e[r];return t?Array.isArray(t)?t:[t]:[]};export function useForm(e){const r=useRef(e);r.current=e;const t=useRef(e.initialValues),[u,n]=useState(e.initialValues),[s,c]=useState({}),[a,o]=useState({}),[l,i]=useState(!1),[f,d]=useState(!1),[v,b]=useState(0),h=useRef({values:u,errors:s,touched:a,submitCount:v});h.current={values:u,errors:s,touched:a,submitCount:v};const
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{valuesEqual}from"./equal.js";import{getPath,setPath}from"./path.js";const rulesFor=(e,r)=>{if(!e||"function"==typeof e)return[];const t=e[r];return t?Array.isArray(t)?t:[t]:[]};export function useForm(e){const r=useRef(e);r.current=e;const t=useRef(e.initialValues),[u,n]=useState(e.initialValues),[s,c]=useState({}),[a,o]=useState({}),[l,i]=useState(!1),[f,d]=useState(!1),[v,b]=useState(0),h=useRef({values:u,errors:s,touched:a,submitCount:v});h.current={values:u,errors:s,touched:a,submitCount:v};const y=useRef(new Map),C=useRef([]),m=useRef(null),k=useRef({values:e.initialValues,version:0});valuesEqual(e.initialValues,k.current.values)||(k.current={values:e.initialValues,version:k.current.version+1});const g=k.current.version;useEffect(()=>{if(!r.current.enableReinitialize)return;const e=r.current.initialValues;t.current=e,h.current.values=e,h.current.errors={},h.current.touched={},n(e),c({}),o({})},[g]);const p=useCallback(async e=>{const t=r.current.validate,u=h.current.values;if("function"==typeof t){return(await t(u)??{})[e]||void 0}const n=getPath(u,e);for(const r of rulesFor(t,e)){const e=await r(n,u);if(e)return e}},[]),F=useCallback(async e=>{const t=r.current.validate;if(!t)return{};if("function"==typeof t)return await t(e)??{};const u={};return await Promise.all(Object.keys(t).map(async r=>{const n=getPath(e,r);for(const s of rulesFor(t,r)){const t=await s(n,e);if(t){u[r]=t;break}}})),u},[]),w=useCallback(async e=>{const r=await p(e);c(t=>{if(t[e]===r)return t;const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[p]),E=useCallback(async()=>{d(!0);const e=await F(h.current.values);return d(!1),h.current.errors=e,c(e),e},[F]),P=useCallback((e,t,u)=>{const s=setPath(h.current.values,e,t);h.current.values=s,n(s);const c=r.current,a=Boolean(h.current.errors[e])&&"blur"===c.revalidateOn;(u??(!a&&(h.current.touched[e]||h.current.submitCount>0||"change"===c.validateOn)))&&w(e)},[w]),S=useCallback(e=>{o(r=>{if(r[e])return r;const t={...r,[e]:!0};return h.current.touched=t,t}),w(e)},[w]),V=useCallback((e,r=!0,t)=>{const u={...h.current.touched,[e]:r};h.current.touched=u,o(u),(t??r)&&w(e)},[w]),R=useCallback((e,r)=>{c(t=>{const u={...t};return r?u[e]=r:delete u[e],h.current.errors=u,u})},[]),O=useCallback(e=>{h.current.errors=e,c(e)},[]),j=useCallback((e,r)=>{const t="function"==typeof e?e(h.current.values):{...h.current.values,...e};h.current.values=t,n(t),r&&E()},[E]),M=useCallback(e=>{const r=e?{...t.current,...e}:t.current;t.current=r,h.current.values=r,h.current.errors={},h.current.touched={},h.current.submitCount=0,n(r),c({}),o({}),b(0)},[]),q=useCallback((e,r)=>{r?(y.current.set(e,r),C.current.includes(e)||C.current.push(e)):(y.current.delete(e),C.current=C.current.filter(r=>r!==e))},[]),x=useCallback(e=>{m.current=e},[]),B=useCallback(e=>{const r=C.current,t=m.current,u=t?r.indexOf(t):-1,n=r[u+e];n&&(m.current=n,y.current.get(n)?.focus?.())},[]),A=useCallback(()=>B(1),[B]),T=useCallback(()=>B(-1),[B]),z=useMemo(()=>({setErrors:O,setFieldError:R,reset:M,setSubmitting:i}),[O,R,M]),N=useRef(!1),D=useCallback(()=>{N.current||(N.current=!0,(async()=>{try{const e=r.current,t=h.current.values;let u;h.current.submitCount+=1,b(e=>e+1),d(!0);try{u=await F(t)}finally{d(!1)}const n=new Set([...C.current,...Object.keys(u)]),s={...h.current.touched};n.forEach(e=>{s[e]=!0}),h.current.touched=s,h.current.errors=u,o(s),c(u);const a=C.current.find(e=>u[e])??Object.keys(u).find(e=>u[e]);if(a)return void y.current.get(a)?.focus?.();i(!0);try{await e.onSubmit(t,z)}finally{i(!1)}}finally{N.current=!1}})())},[F,z]),G=useMemo(()=>{const e={};for(const r of Object.keys(s))s[r]&&(a[r]||v>0)&&(e[r]=s[r]);return e},[s,a,v]),H=useMemo(()=>{const e=r.current.validate;if(!e)return!0;if("function"==typeof e)return Object.values(s).every(e=>!e);for(const r of Object.keys(e)){const t=getPath(u,r);for(const n of rulesFor(e,r)){const e=n(t,u);if("string"==typeof e&&e)return!1}}return!0},[u,s]),I=useMemo(()=>!valuesEqual(u,t.current),[u]);return{values:u,errors:G,rawErrors:s,touched:a,dirty:I,isValid:H,isSubmitting:l,isValidating:f,submitCount:v,setFieldValue:P,setFieldTouched:V,setFieldError:R,setValues:j,setErrors:O,reset:M,validate:E,validateField:p,submit:D,handleBlur:S,focusNext:A,focusPrev:T,registerField:q,getFieldState:e=>{const r=getPath(u,e),n=s[e],c=!!a[e];return{value:r,error:c||v>0?n:void 0,rawError:n,touched:c,dirty:!valuesEqual(r,getPath(t.current,e))}},getFieldProps:e=>({name:e,value:getPath(u,e),error:a[e]||v>0?s[e]:void 0,touched:!!a[e],onChange:r=>P(e,r),onChangeText:r=>P(e,r),onBlur:()=>S(e),onFocus:()=>x(e),setValue:(r,t)=>P(e,r,t)})}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useMemo}from"react";import{Animated,Easing}from"react-native";import{Gesture}from"react-native-gesture-handler";import{setNativeValue,useTheme}from"../theme/index.js";export const DRAG_DISMISS_DISTANCE=100;export const DRAG_DISMISS_VELOCITY=.5;export const createDragToDismissController=({drag:e,travel:t,onDismiss:s},n)=>{const{snappy:a}=n.spring,springBack=()=>Animated.spring(e,{toValue:0,damping:a.damping,stiffness:a.stiffness,mass:a.mass,useNativeDriver:!0}).start();return{move:t=>{setNativeValue(e,Math.max(0,t))},release:(a,r)=>{a>100||r>.5?Animated.timing(e,{toValue:"function"==typeof t?t():t,duration:n.duration.fast,easing:Easing.bezier(...n.easing.accelerate),useNativeDriver:!0}).start(()=>s()):springBack()},cancel:springBack}};export const useDragToDismiss=e=>{const{drag:t,travel:s,onDismiss:n,contentAtTop:a,scrollGesture:r}=e,{motion:i}=useTheme();return useMemo(()=>{const e=createDragToDismissController({drag:t,travel:s,onDismiss:n},i),o=Gesture.Pan().runOnJS(!0).activeOffsetY(6).failOffsetX([-12,12]).onUpdate(t=>e.move(t.translationY)).onEnd(t=>e.release(t.translationY,t.velocityY/1e3)).onFinalize((t
|
|
1
|
+
"use strict";import{useMemo}from"react";import{Animated,Easing}from"react-native";import{Gesture}from"react-native-gesture-handler";import{setNativeValue,useTheme}from"../theme/index.js";export const DRAG_DISMISS_DISTANCE=100;export const DRAG_DISMISS_VELOCITY=.5;export const createDragToDismissController=({drag:e,travel:t,onDismiss:s},n)=>{const{snappy:a}=n.spring,springBack=()=>Animated.spring(e,{toValue:0,damping:a.damping,stiffness:a.stiffness,mass:a.mass,useNativeDriver:!0}).start();return{move:t=>{setNativeValue(e,Math.max(0,t))},release:(a,r)=>{a>100||r>.5?Animated.timing(e,{toValue:"function"==typeof t?t():t,duration:n.duration.fast,easing:Easing.bezier(...n.easing.accelerate),useNativeDriver:!0}).start(()=>s()):springBack()},cancel:springBack}};export const useDragToDismiss=e=>{const{drag:t,travel:s,onDismiss:n,contentAtTop:a,scrollGesture:r}=e,{motion:i}=useTheme();return useMemo(()=>{const e=createDragToDismissController({drag:t,travel:s,onDismiss:n},i),o=Gesture.Pan().runOnJS(!0).activeOffsetY(6).failOffsetX([-12,12]).onUpdate(t=>e.move(t.translationY)).onEnd(t=>e.release(t.translationY,t.velocityY/1e3)).onFinalize((_e,t)=>{t||e.cancel()});let l=0,m=!1;const u=Gesture.Pan().runOnJS(!0).activeOffsetY(8).failOffsetX([-12,12]).onBegin(()=>{l=0,m=!1}).onUpdate(t=>{if(!m){if(a&&!a())return;m=!0,l=t.translationY}e.move(t.translationY-l)}).onEnd(t=>{m&&e.release(t.translationY-l,t.velocityY/1e3)}).onFinalize((_e,t)=>{!t&&m&&e.cancel()});return r&&u.simultaneousWithExternalGesture(r),{handleGesture:o,sheetGesture:u}},[t,s,n,a,r,i])};
|
|
@@ -12,11 +12,22 @@ export interface DecimalRules {
|
|
|
12
12
|
}
|
|
13
13
|
/**
|
|
14
14
|
* What a figure typed or pasted into the field is cleaned to. In exponent mode only the characters
|
|
15
|
-
* `0-9 . e E + -` survive. Otherwise: digits and at most one
|
|
16
|
-
* minus when `signed`, and `decimals` fraction digits at most.
|
|
15
|
+
* `0-9 . e E + -` survive. Otherwise: digits and at most one decimal mark (the first point or comma,
|
|
16
|
+
* kept as typed), an optional leading minus when `signed`, and `decimals` fraction digits at most.
|
|
17
|
+
* A comma stays a comma here so a comma before exactly three digits can still be told apart.
|
|
17
18
|
*/
|
|
18
19
|
export declare function cleanDecimalText(text: string | null | undefined, { whole, signed, decimals, allowExponent }?: DecimalRules): string;
|
|
19
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* A decimal comma followed by exactly three digits (`2,500`): it could be a decimal or a thousands
|
|
22
|
+
* group, so the field refuses to read it.
|
|
23
|
+
*/
|
|
24
|
+
export declare function isUnclearDecimalComma(text: string | null | undefined): boolean;
|
|
25
|
+
/** The text with a readable decimal comma written as a point. An unclear comma is left as it is. */
|
|
26
|
+
export declare function pointDecimalText(text: string): string;
|
|
27
|
+
/**
|
|
28
|
+
* What a half-typed figure reads as: nothing yet. A lone minus or mark is on its way to a number.
|
|
29
|
+
* A decimal comma reads as a point; an unclear one (see `isUnclearDecimalComma`) reads as nothing.
|
|
30
|
+
*/
|
|
20
31
|
export declare function parseDecimalText(text: string): number | '';
|
|
21
32
|
export interface DecimalInputProps extends Omit<InputProps, 'value' | 'onChange' | 'onChangeText' | 'keyboardType'> {
|
|
22
33
|
/** The quantity's symbol, drawn in the prefix box before the value. Passed to Input as `prefix`. */
|
|
@@ -45,6 +56,8 @@ export interface DecimalInputProps extends Omit<InputProps, 'value' | 'onChange'
|
|
|
45
56
|
* the keystroke, and follows `value` when it changes from elsewhere.
|
|
46
57
|
*/
|
|
47
58
|
numeric?: boolean;
|
|
59
|
+
/** Shown when the figure has a comma before exactly three digits and no `error` is passed. */
|
|
60
|
+
unclearCommaMessage?: InputProps['error'];
|
|
48
61
|
}
|
|
49
62
|
/**
|
|
50
63
|
* A figure typed on a number keyboard, over Input. Every Input prop passes through; the value may be
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export type { DecimalInputProps, DecimalRules } from './DecimalInput';
|
|
2
|
-
export { cleanDecimalText, DecimalInput, default, parseDecimalText } from './DecimalInput';
|
|
2
|
+
export { cleanDecimalText, DecimalInput, default, isUnclearDecimalComma, parseDecimalText, pointDecimalText } from './DecimalInput';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import { type Dispatch, type SetStateAction } from 'react';
|
|
3
|
+
export interface ModalInsets {
|
|
4
|
+
top: number;
|
|
5
|
+
bottom: number;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Top and bottom insets of the window a native Modal draws in, seeded from the
|
|
9
|
+
* app-level provider and corrected once the Modal's own provider reports.
|
|
10
|
+
* Pass the setter to `ModalSafeArea` as `onInsets`.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useModalInsets: () => [ModalInsets, Dispatch<SetStateAction<ModalInsets>>];
|
|
13
|
+
/** Reports the nearest provider's top and bottom insets up; renders nothing. */
|
|
14
|
+
export declare const InsetsProbe: React.FC<{
|
|
15
|
+
onChange: Dispatch<SetStateAction<ModalInsets>>;
|
|
16
|
+
}>;
|
|
17
|
+
/**
|
|
18
|
+
* Wrap a native Modal's content in this: the app-level provider measures the
|
|
19
|
+
* app window (bottom inset 0 under Android's navigation bar when the app is
|
|
20
|
+
* not edge to edge), not the translucent Modal window the content is drawn in.
|
|
21
|
+
*/
|
|
22
|
+
export declare const ModalSafeArea: React.FC<{
|
|
23
|
+
onInsets: Dispatch<SetStateAction<ModalInsets>>;
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
}>;
|
|
26
|
+
//# sourceMappingURL=ModalSafeArea.d.ts.map
|
|
@@ -51,7 +51,7 @@ export { DateRangePicker } from './DateRangePicker';
|
|
|
51
51
|
export type { DateSeparatorLabels, DateSeparatorProps } from './DateSeparator';
|
|
52
52
|
export { DateSeparator, DEFAULT_DATE_SEPARATOR_LABELS, dayLabel } from './DateSeparator';
|
|
53
53
|
export type { DecimalInputProps, DecimalRules } from './DecimalInput';
|
|
54
|
-
export { cleanDecimalText, DecimalInput, parseDecimalText } from './DecimalInput';
|
|
54
|
+
export { cleanDecimalText, DecimalInput, isUnclearDecimalComma, parseDecimalText, pointDecimalText } from './DecimalInput';
|
|
55
55
|
export type { DescriptionItem, DescriptionsProps, DescriptionsSize, DescriptionsVariant } from './Descriptions';
|
|
56
56
|
export { Descriptions } from './Descriptions';
|
|
57
57
|
export type { DialogAction, DialogProps, DialogVariant } from './Dialog';
|
|
@@ -12,11 +12,22 @@ export interface DecimalRules {
|
|
|
12
12
|
}
|
|
13
13
|
/**
|
|
14
14
|
* What a figure typed or pasted into the field is cleaned to. In exponent mode only the characters
|
|
15
|
-
* `0-9 . e E + -` survive. Otherwise: digits and at most one
|
|
16
|
-
* minus when `signed`, and `decimals` fraction digits at most.
|
|
15
|
+
* `0-9 . e E + -` survive. Otherwise: digits and at most one decimal mark (the first point or comma,
|
|
16
|
+
* kept as typed), an optional leading minus when `signed`, and `decimals` fraction digits at most.
|
|
17
|
+
* A comma stays a comma here so a comma before exactly three digits can still be told apart.
|
|
17
18
|
*/
|
|
18
19
|
export declare function cleanDecimalText(text: string | null | undefined, { whole, signed, decimals, allowExponent }?: DecimalRules): string;
|
|
19
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* A decimal comma followed by exactly three digits (`2,500`): it could be a decimal or a thousands
|
|
22
|
+
* group, so the field refuses to read it.
|
|
23
|
+
*/
|
|
24
|
+
export declare function isUnclearDecimalComma(text: string | null | undefined): boolean;
|
|
25
|
+
/** The text with a readable decimal comma written as a point. An unclear comma is left as it is. */
|
|
26
|
+
export declare function pointDecimalText(text: string): string;
|
|
27
|
+
/**
|
|
28
|
+
* What a half-typed figure reads as: nothing yet. A lone minus or mark is on its way to a number.
|
|
29
|
+
* A decimal comma reads as a point; an unclear one (see `isUnclearDecimalComma`) reads as nothing.
|
|
30
|
+
*/
|
|
20
31
|
export declare function parseDecimalText(text: string): number | '';
|
|
21
32
|
export interface DecimalInputProps extends Omit<InputProps, 'value' | 'onChange' | 'onChangeText' | 'keyboardType'> {
|
|
22
33
|
/** The quantity's symbol, drawn in the prefix box before the value. Passed to Input as `prefix`. */
|
|
@@ -45,6 +56,8 @@ export interface DecimalInputProps extends Omit<InputProps, 'value' | 'onChange'
|
|
|
45
56
|
* the keystroke, and follows `value` when it changes from elsewhere.
|
|
46
57
|
*/
|
|
47
58
|
numeric?: boolean;
|
|
59
|
+
/** Shown when the figure has a comma before exactly three digits and no `error` is passed. */
|
|
60
|
+
unclearCommaMessage?: InputProps['error'];
|
|
48
61
|
}
|
|
49
62
|
/**
|
|
50
63
|
* A figure typed on a number keyboard, over Input. Every Input prop passes through; the value may be
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export type { DecimalInputProps, DecimalRules } from './DecimalInput.js';
|
|
2
|
-
export { cleanDecimalText, DecimalInput, default, parseDecimalText } from './DecimalInput.js';
|
|
2
|
+
export { cleanDecimalText, DecimalInput, default, isUnclearDecimalComma, parseDecimalText, pointDecimalText } from './DecimalInput.js';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import { type Dispatch, type SetStateAction } from 'react';
|
|
3
|
+
export interface ModalInsets {
|
|
4
|
+
top: number;
|
|
5
|
+
bottom: number;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Top and bottom insets of the window a native Modal draws in, seeded from the
|
|
9
|
+
* app-level provider and corrected once the Modal's own provider reports.
|
|
10
|
+
* Pass the setter to `ModalSafeArea` as `onInsets`.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useModalInsets: () => [ModalInsets, Dispatch<SetStateAction<ModalInsets>>];
|
|
13
|
+
/** Reports the nearest provider's top and bottom insets up; renders nothing. */
|
|
14
|
+
export declare const InsetsProbe: React.FC<{
|
|
15
|
+
onChange: Dispatch<SetStateAction<ModalInsets>>;
|
|
16
|
+
}>;
|
|
17
|
+
/**
|
|
18
|
+
* Wrap a native Modal's content in this: the app-level provider measures the
|
|
19
|
+
* app window (bottom inset 0 under Android's navigation bar when the app is
|
|
20
|
+
* not edge to edge), not the translucent Modal window the content is drawn in.
|
|
21
|
+
*/
|
|
22
|
+
export declare const ModalSafeArea: React.FC<{
|
|
23
|
+
onInsets: Dispatch<SetStateAction<ModalInsets>>;
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
}>;
|
|
26
|
+
//# sourceMappingURL=ModalSafeArea.d.ts.map
|
|
@@ -51,7 +51,7 @@ export { DateRangePicker } from './DateRangePicker/index.js';
|
|
|
51
51
|
export type { DateSeparatorLabels, DateSeparatorProps } from './DateSeparator/index.js';
|
|
52
52
|
export { DateSeparator, DEFAULT_DATE_SEPARATOR_LABELS, dayLabel } from './DateSeparator/index.js';
|
|
53
53
|
export type { DecimalInputProps, DecimalRules } from './DecimalInput/index.js';
|
|
54
|
-
export { cleanDecimalText, DecimalInput, parseDecimalText } from './DecimalInput/index.js';
|
|
54
|
+
export { cleanDecimalText, DecimalInput, isUnclearDecimalComma, parseDecimalText, pointDecimalText } from './DecimalInput/index.js';
|
|
55
55
|
export type { DescriptionItem, DescriptionsProps, DescriptionsSize, DescriptionsVariant } from './Descriptions/index.js';
|
|
56
56
|
export { Descriptions } from './Descriptions/index.js';
|
|
57
57
|
export type { DialogAction, DialogProps, DialogVariant } from './Dialog/index.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"@webority/mobile-core": ">=0.
|
|
63
|
+
"@webority/mobile-core": ">=0.13.0 <0.14.0",
|
|
64
64
|
"expo": ">=57.0.0",
|
|
65
65
|
"expo-file-system": ">=57.0.0",
|
|
66
66
|
"expo-haptics": ">=57.0.0",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
|
-
"@webority/mobile-core": "0.
|
|
110
|
+
"@webority/mobile-core": "0.13.0"
|
|
111
111
|
},
|
|
112
112
|
"scripts": {
|
|
113
113
|
"build": "bob build && node ../../scripts/minify-lib.mjs",
|