@webority/mobile-ui 0.14.2 → 0.16.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/Accordion/Accordion.js +1 -1
- package/lib/commonjs/components/AmountSlider/AmountSlider.js +1 -1
- package/lib/commonjs/components/AnimatePresence/AnimatePresence.js +1 -1
- package/lib/commonjs/components/AppBar/AppBar.js +1 -1
- package/lib/commonjs/components/AsyncBlock/AsyncBlock.js +1 -1
- package/lib/commonjs/components/Banner/Banner.js +1 -1
- package/lib/commonjs/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/commonjs/components/Button/Button.js +1 -1
- package/lib/commonjs/components/Calendar/Calendar.js +1 -1
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/Carousel/Carousel.js +1 -1
- package/lib/commonjs/components/Chip/Chip.js +1 -1
- package/lib/commonjs/components/DatePicker/DatePicker.js +1 -1
- package/lib/commonjs/components/DateRangePicker/DateRangePicker.js +1 -1
- package/lib/commonjs/components/Drawer/Drawer.js +1 -1
- package/lib/commonjs/components/EmptyState/EmptyState.js +1 -1
- package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js +1 -1
- package/lib/commonjs/components/IconButton/IconButton.js +1 -1
- package/lib/commonjs/components/ListItem/ListItem.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/MessageBubble/MessageBubble.js +1 -1
- package/lib/commonjs/components/Modal/Modal.js +1 -1
- package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
- package/lib/commonjs/components/OnboardingPager/OnboardingPager.js +1 -1
- package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/commonjs/components/ProfilePicker/ProfilePicker.js +1 -1
- package/lib/commonjs/components/ProgressBar/ProgressBar.js +1 -1
- package/lib/commonjs/components/Screen/Screen.js +1 -0
- package/lib/commonjs/components/Screen/index.js +1 -0
- package/lib/commonjs/components/SignaturePad/SignaturePad.js +1 -1
- package/lib/commonjs/components/Skeleton/Skeleton.js +1 -1
- package/lib/commonjs/components/Skeleton/SkeletonContent.js +1 -1
- package/lib/commonjs/components/Skeleton/SkeletonProvider.js +1 -1
- package/lib/commonjs/components/Skeleton/index.js +1 -1
- package/lib/commonjs/components/Spinner/Spinner.js +1 -1
- package/lib/commonjs/components/StatusBadge/StatusBadge.js +1 -1
- package/lib/commonjs/components/TagInput/TagInput.js +1 -1
- package/lib/commonjs/components/Text/Text.js +1 -1
- package/lib/commonjs/components/TimePicker/TimePicker.js +1 -1
- package/lib/commonjs/components/Toast/Toast.js +1 -1
- package/lib/commonjs/components/Tooltip/Tooltip.js +1 -1
- package/lib/commonjs/components/Tour/Tour.js +1 -1
- package/lib/commonjs/components/WheelPicker/Wheel.js +1 -1
- package/lib/commonjs/components/WheelPicker/WheelPicker.js +1 -1
- package/lib/commonjs/components/index.js +1 -1
- package/lib/commonjs/hooks/index.js +1 -1
- package/lib/commonjs/hooks/useDragToDismiss.js +1 -1
- package/lib/commonjs/hooks/useFieldChain.js +1 -0
- package/lib/commonjs/hooks/usePresenceMotion.js +1 -0
- package/lib/commonjs/hooks/usePressAnimation.js +1 -1
- package/lib/commonjs/hooks/useReducedMotion.js +1 -1
- package/lib/commonjs/index.js +1 -1
- package/lib/commonjs/network/NetworkStatusBanner.js +1 -1
- package/lib/commonjs/theme/tokens.js +1 -1
- package/lib/commonjs/utils/hapticUtils.js +1 -1
- package/lib/module/components/Accordion/Accordion.js +1 -1
- package/lib/module/components/AmountSlider/AmountSlider.js +1 -1
- package/lib/module/components/AnimatePresence/AnimatePresence.js +1 -1
- package/lib/module/components/AppBar/AppBar.js +1 -1
- package/lib/module/components/AsyncBlock/AsyncBlock.js +1 -1
- package/lib/module/components/Banner/Banner.js +1 -1
- package/lib/module/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/module/components/Button/Button.js +1 -1
- package/lib/module/components/Calendar/Calendar.js +1 -1
- package/lib/module/components/Card/Card.js +1 -1
- package/lib/module/components/Carousel/Carousel.js +1 -1
- package/lib/module/components/Chip/Chip.js +1 -1
- package/lib/module/components/DatePicker/DatePicker.js +1 -1
- package/lib/module/components/DateRangePicker/DateRangePicker.js +1 -1
- package/lib/module/components/Drawer/Drawer.js +1 -1
- package/lib/module/components/EmptyState/EmptyState.js +1 -1
- package/lib/module/components/FloatingActionButton/FloatingActionButton.js +1 -1
- package/lib/module/components/IconButton/IconButton.js +1 -1
- package/lib/module/components/ListItem/ListItem.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/MessageBubble/MessageBubble.js +1 -1
- package/lib/module/components/Modal/Modal.js +1 -1
- package/lib/module/components/OTPInput/OTPInput.js +1 -1
- package/lib/module/components/OnboardingPager/OnboardingPager.js +1 -1
- package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/module/components/ProfilePicker/ProfilePicker.js +1 -1
- package/lib/module/components/ProgressBar/ProgressBar.js +1 -1
- package/lib/module/components/Screen/Screen.js +1 -0
- package/lib/module/components/Screen/index.js +1 -0
- package/lib/module/components/SignaturePad/SignaturePad.js +1 -1
- package/lib/module/components/Skeleton/Skeleton.js +1 -1
- package/lib/module/components/Skeleton/SkeletonContent.js +1 -1
- package/lib/module/components/Skeleton/SkeletonProvider.js +1 -1
- package/lib/module/components/Skeleton/index.js +1 -1
- package/lib/module/components/Spinner/Spinner.js +1 -1
- package/lib/module/components/StatusBadge/StatusBadge.js +1 -1
- package/lib/module/components/TagInput/TagInput.js +1 -1
- package/lib/module/components/Text/Text.js +1 -1
- package/lib/module/components/TimePicker/TimePicker.js +1 -1
- package/lib/module/components/Toast/Toast.js +1 -1
- package/lib/module/components/Tooltip/Tooltip.js +1 -1
- package/lib/module/components/Tour/Tour.js +1 -1
- package/lib/module/components/WheelPicker/Wheel.js +1 -1
- package/lib/module/components/WheelPicker/WheelPicker.js +1 -1
- package/lib/module/components/index.js +1 -1
- package/lib/module/hooks/index.js +1 -1
- package/lib/module/hooks/useDragToDismiss.js +1 -1
- package/lib/module/hooks/useFieldChain.js +1 -0
- package/lib/module/hooks/usePresenceMotion.js +1 -0
- package/lib/module/hooks/usePressAnimation.js +1 -1
- package/lib/module/hooks/useReducedMotion.js +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/network/NetworkStatusBanner.js +1 -1
- package/lib/module/theme/tokens.js +1 -1
- package/lib/module/utils/hapticUtils.js +1 -1
- package/lib/typescript/commonjs/components/AnimatePresence/AnimatePresence.d.ts +5 -5
- package/lib/typescript/commonjs/components/AsyncBlock/AsyncBlock.d.ts +11 -6
- package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts +8 -2
- package/lib/typescript/commonjs/components/Button/Button.d.ts +6 -3
- package/lib/typescript/commonjs/components/Card/Card.d.ts +1 -1
- package/lib/typescript/commonjs/components/Carousel/Carousel.d.ts +2 -0
- package/lib/typescript/commonjs/components/ListItem/ListItem.d.ts +1 -1
- package/lib/typescript/commonjs/components/MessageBubble/MessageBubble.d.ts +6 -3
- package/lib/typescript/commonjs/components/OTPInput/OTPInput.d.ts +1 -2
- package/lib/typescript/commonjs/components/Screen/Screen.d.ts +39 -0
- package/lib/typescript/commonjs/components/Screen/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/SignaturePad/SignaturePad.d.ts +6 -0
- package/lib/typescript/commonjs/components/Skeleton/Skeleton.d.ts +2 -2
- package/lib/typescript/commonjs/components/Skeleton/SkeletonProvider.d.ts +3 -11
- package/lib/typescript/commonjs/components/Skeleton/index.d.ts +1 -1
- package/lib/typescript/commonjs/components/WheelPicker/Wheel.d.ts +2 -0
- package/lib/typescript/commonjs/components/WheelPicker/WheelPicker.d.ts +5 -0
- package/lib/typescript/commonjs/components/index.d.ts +3 -1
- package/lib/typescript/commonjs/hooks/index.d.ts +4 -0
- package/lib/typescript/commonjs/hooks/useDragToDismiss.d.ts +10 -2
- package/lib/typescript/commonjs/hooks/useFieldChain.d.ts +10 -0
- package/lib/typescript/commonjs/hooks/usePresenceMotion.d.ts +14 -0
- package/lib/typescript/commonjs/hooks/usePressAnimation.d.ts +2 -2
- package/lib/typescript/commonjs/hooks/useReducedMotion.d.ts +0 -6
- package/lib/typescript/commonjs/index.d.ts +2 -2
- package/lib/typescript/commonjs/theme/types.d.ts +6 -0
- package/lib/typescript/module/components/AnimatePresence/AnimatePresence.d.ts +5 -5
- package/lib/typescript/module/components/AsyncBlock/AsyncBlock.d.ts +11 -6
- package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts +8 -2
- package/lib/typescript/module/components/Button/Button.d.ts +6 -3
- package/lib/typescript/module/components/Card/Card.d.ts +1 -1
- package/lib/typescript/module/components/Carousel/Carousel.d.ts +2 -0
- package/lib/typescript/module/components/ListItem/ListItem.d.ts +1 -1
- package/lib/typescript/module/components/MessageBubble/MessageBubble.d.ts +6 -3
- package/lib/typescript/module/components/OTPInput/OTPInput.d.ts +1 -2
- package/lib/typescript/module/components/Screen/Screen.d.ts +39 -0
- package/lib/typescript/module/components/Screen/index.d.ts +3 -0
- package/lib/typescript/module/components/SignaturePad/SignaturePad.d.ts +6 -0
- package/lib/typescript/module/components/Skeleton/Skeleton.d.ts +2 -2
- package/lib/typescript/module/components/Skeleton/SkeletonProvider.d.ts +3 -11
- package/lib/typescript/module/components/Skeleton/index.d.ts +1 -1
- package/lib/typescript/module/components/WheelPicker/Wheel.d.ts +2 -0
- package/lib/typescript/module/components/WheelPicker/WheelPicker.d.ts +5 -0
- package/lib/typescript/module/components/index.d.ts +3 -1
- package/lib/typescript/module/hooks/index.d.ts +4 -0
- package/lib/typescript/module/hooks/useDragToDismiss.d.ts +10 -2
- package/lib/typescript/module/hooks/useFieldChain.d.ts +10 -0
- package/lib/typescript/module/hooks/usePresenceMotion.d.ts +14 -0
- package/lib/typescript/module/hooks/usePressAnimation.d.ts +2 -2
- package/lib/typescript/module/hooks/useReducedMotion.d.ts +0 -6
- package/lib/typescript/module/index.d.ts +2 -2
- package/lib/typescript/module/theme/types.d.ts +6 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage,fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,o)=>Math.min(o,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.onNeutral};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,o,t)=>{const s=toneFor(e,r),n=t?.badgeColor??s.base,i=e.colors.background.primary,l="neutral"===r&&void 0===t?.badgeColor;let a;switch(o){case"soft":a={fill:l?e.colors.background.tertiary:blendOf(n,.14,i,e.colors.background.secondary),ring:i,icon:n};break;case"outline":a={fill:i,ring:l?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:i,icon:s.on}}return t?.badgeIconColor?{...a,icon:t.badgeIconColor}:a},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,r)=>{const{value:o,name:t,sources:s,onPick:n,onRemove:i,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:d,size:u="md",shape:m="circle",badgeIcon:p="camera",tone:b,variant:g,avatarTone:f,avatarBackgroundColor:h,avatarColor:y,label:x,required:k=!1,helperText:C,error:v,layout:S="stacked",title:_,subtitle:j,ImageComponent:T,labels:I,haptic:F,onError:A,accessibilityLabel:P,style:w,testID:E}=e,L=useTheme(),M=L.components.profilePicker,R=b??M?.defaultTone??"primary",O=g??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O,M),[L,R,O,M]),z=f??M?.defaultAvatarTone,D=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{background:h??e?.background??L.colors.background.tertiary,icon:y??e?.color??L.colors.text.tertiary}},[L,z,h,y]),B=useMemo(()=>({...DEFAULT_LABELS,...I}),[I]),[H,U]=useState(null),[W,$]=useState(null),[N,Z]=useState(!1),[q,G]=useState(o);o!==q&&(G(o),U(null));const X=l||a,Q=H??o??null,Y=v??W??void 0,J=!X&&(null!==H||Boolean(o)&&Boolean(i)),K=s.length>0||J,ee="number"==typeof u?u:SIZE_PX[u],re=resolveRadius(m,ee),oe=re*(1-Math.SQRT1_2),te=clamp(Math.round(.28*ee),24,44),se=oe-te/2,ne=Math.max(0,-se),ie=useCallback(e=>{$(e),A?.(e),!1!==F&&triggerHaptic("notificationError")},[A,F]),le=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void ie(e instanceof Error?e.message:String(e))}const o=r?.[0];if(!o)return;if("number"==typeof d&&"number"==typeof o.size&&o.size>1024*d*1024)return void ie(B.errorTooLarge(d));if(o.type&&!matchesAccept(o.type,c))return void ie(B.errorWrongType);$(null),U(o.uri);const t=resolveHaptic(F,"selection");t&&triggerHaptic(t),n?.(o)},[d,c,B,F,n,ie]),ae=useCallback(()=>{X||(ue.current=null,1!==s.length||J?(s.length>0||J)&&Z(!0):le(s[0]))},[X,s,J,le]),ce=useCallback(()=>{U(null),$(null);const e=resolveHaptic(F,"selection");e&&triggerHaptic(e),i?.()},[F,i]),de=useMemo(()=>{const e=s.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[s,J]),ue=useRef(null),me=useCallback(e=>{ue.current||(Z(!1),"remove"===e.kind?ce():ue.current=e.source)},[ce]),pe=useCallback(()=>{const e=ue.current;ue.current=null,e&&le(e)},[le]),be=E??"profile-picker",ge=P??(K?B.pick:t),fe=_jsx(View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,...smoothCorners,backgroundColor:D.background}],children:_jsx(AppIcon,{name:"user",size:Math.round(.45*ee),color:D.icon})}),he=_jsx(View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:_jsxs(Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:ge,accessibilityHint:fieldTextAsString(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},"aria-disabled":K?X:void 0,"aria-busy":l,testID:`${be}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||t?_jsx(Avatar,{source:Q?{uri:Q}:void 0,name:t,size:ee,shape:m,tone:z,backgroundColor:h,color:y,ImageComponent:T,accessibilityLabel:ge},Q??"initials"):fe,l?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:re,...smoothCorners,backgroundColor:L.colors.background.overlay}],testID:`${be}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors.onPrimary})}):null,!a&&K?_jsx(View,{pointerEvents:"none",testID:`${be}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:te/2,...smoothCorners,right:se,bottom:se,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==S?_jsxs(View,{style:[styles.meta,"profile"===S?styles.metaCentred:null],children:[_?_jsx(Text,{style:[styles.title,"profile"===S?styles.textCentred:null,{color:L.colors.text.primary,fontSize:L.typography.fontSize.base,...fontFor(L,"semibold")}],children:_}):null,j?_jsx(Text,{style:[styles.subtitle,"profile"===S?styles.textCentred:null,{color:L.colors.text.secondary,fontSize:L.typography.fontSize.sm,...fontFor(L,"normal")}],children:j}):null,_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)})]}):_jsx(FieldMessage,{text:Y??C,error:hasFieldText(Y)});return _jsxs(View,{ref:r,style:w,testID:E,children:[x?_jsx(FieldLabel,{required:k,children:x}):null,_jsxs(View,{style:"inline"===S?[styles.row,{columnGap:L.spacing.md}]:["profile"===S?styles.columnCentred:styles.column,{rowGap:L.spacing.xs}],children:[he,ye]}),_jsx(OptionSheet,{open:N,onClose:()=>Z(!1),onAfterClose:pe,title:B.sheetTitle,options:de,labelOf:e=>{const r=e;return"remove"===r.kind?B.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?REMOVE_VALUE:r.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const r=e;return"remove"===r.kind?void 0:r.source.description},iconOf:e=>{const r=e;return"remove"===r.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors.toneText.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,fontFor,Gradient,setNativeValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},GLOW_LOCATIONS=[0,.35,.5,.65,1],glowOf=e=>{const t=tintOf(e,0,"transparent"),r=tintOf(e,.6,e);return{colors:[t,r,e,r,t],locations:GLOW_LOCATIONS,start:{x:0,y:.5},end:{x:1,y:.5}}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=forwardRef((e,t)=>{const r=useTheme(),
|
|
1
|
+
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{Animated,Easing,StyleSheet,Text,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{createAnimatedValue,fontFor,Gradient,setNativeValue,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},GLOW_LOCATIONS=[0,.35,.5,.65,1],glowOf=e=>{const t=tintOf(e,0,"transparent"),r=tintOf(e,.6,e);return{colors:[t,r,e,r,t],locations:GLOW_LOCATIONS,start:{x:0,y:.5},end:{x:1,y:.5}}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=forwardRef((e,t)=>{const r=useTheme(),o=useReducedMotion(),{progress:s,label:i,showPercent:n=!1,indeterminate:a,height:l=6,radius:u,tone:c="primary",trackColor:d,barColor:m,gradient:p,segments:g,animated:f=!0,style:h,containerStyle:y,barStyle:b,accessibilityLabel:w,testID:x}=e,j=a??"number"!=typeof s,R=clampProgress(s),V=useRef(createAnimatedValue(R)).current,S=useRef(createAnimatedValue(0)).current,A=useRef(createAnimatedValue(0)).current,v=useRef(0),_=r.components.progressBar?.determinateAnimationDuration??400,C=r.components.progressBar?.indeterminateLoopDuration??1500,B=r.components.progressBar?.indeterminateWidth??"30%",O=useMemo(()=>buildStyles(r),[r]),N=u??r.radius.full,L=d??r.colors.surface.disabled,M=m??toneColor(r,c),P=useMemo(()=>p?"string"==typeof p?r.gradients[p]??null:p:null,[p,r.gradients]),k=useMemo(()=>glowOf(M),[M]),D=Array.isArray(g)&&g.length>0;useEffect(()=>{j||(f?Animated.timing(V,{toValue:R,duration:_,easing:Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():V.setValue(R))},[f,R,_,V,j,r]),useEffect(()=>{if(!j)return;setNativeValue(S,0);const e=Animated.loop(Animated.timing(S,{toValue:1,duration:C,easing:Easing.inOut(Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[j,S,C]);const E=V.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),T=S.interpolate({inputRange:[0,1],outputRange:[-1,1]}),G=S.interpolate({inputRange:[0,.5,1],outputRange:[.4,1,.4]}),F=n&&!j&&!D,I=null!=i||F,z=_jsx(View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:w??("string"==typeof i?i:void 0),accessibilityValue:j?{text:"Loading"}:{min:0,max:100,now:Math.round(100*R)},testID:x,onLayout:e=>{const t=e.nativeEvent.layout.width;v.current=t,setNativeValue(A,t)},style:[O.track,{height:l,borderRadius:N,...smoothCorners,backgroundColor:L},h,y],children:D?_jsx(View,{style:[O.segments,{height:l}],children:(g??[]).map((e,t)=>_jsx(View,{style:{width:100*clampProgress(e.value)+"%",height:l,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):_jsx(Animated.View,j?{style:[O.indeterminateBar,{height:l,width:o?"100%":B,opacity:o?G:1,transform:o?[]:[{translateX:Animated.multiply(T,A)}]},b],children:_jsx(Gradient,{gradient:k,style:StyleSheet.absoluteFill})}:{style:[O.determinateBar,{height:l,borderRadius:N,...smoothCorners,backgroundColor:P?"transparent":M,width:E,overflow:P?"hidden":void 0},b],children:P?_jsx(Gradient,{gradient:P,style:StyleSheet.absoluteFill}):null})});if(!I)return z;const W={fontSize:r.typography.fontSize.sm,...fontFor(r,"medium")};return _jsxs(View,{style:O.wrapper,children:[_jsxs(View,{style:[O.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof i||"number"==typeof i?_jsx(Text,{style:[O.label,W,{color:r.colors.text.primary}],children:i}):_jsx(View,{style:O.label,children:i}),F?_jsx(Text,{accessible:!1,importantForAccessibility:"no",style:[W,{color:r.colors.text.secondary}],children:`${Math.round(100*R)}%`}):null]}),z]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});export{ProgressBar};export default ProgressBar;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";import{cloneElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{},buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.background.primary},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.background.primary,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border.primary}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:i,children:s,onRefresh:a,refreshing:d=!1,footer:c,footerStyle:f,scroll:u=!0,list:p,edges:m=DEFAULT_EDGES,keyboardToolbar:h=!0,contentContainerStyle:y,style:g,testID:b}=e,S=useTheme(),v=useSafeAreaInsets(),x=useMemo(()=>buildStyles(S),[S]),[T]=useState(()=>new Animated.Value(0)),[j,E]=useState(0),k=void 0!==n,A=useRef(n);A.current=n;const C=Boolean(t||o||n||i||l?.length),w=r&&void 0!==t,_=w&&(void 0!==p||u),B=_?j:0,L=void 0!==c,{refreshControl:R}=useRefreshControl({onRefresh:a??noop,refreshing:d}),V=a?cloneElement(R,{progressViewOffset:B}):void 0,K=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:T}}}],{useNativeDriver:!1}),[T]),D=useCallback(e=>{const{height:t}=e.nativeEvent.layout;E(e=>Math.max(e,t))},[]);useEffect(()=>{if(!k)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(A.current?.(),!0));return()=>e.remove()},[k]);const F=m.includes("left")?v.left:0,I=m.includes("right")?v.right:0,M=m.includes("bottom")?v.bottom:0,O=m.includes("top")&&!C?v.top:0,H=m.filter(e=>"top"!==e&&!("bottom"===e&&L)),G=C?_jsx(View,{style:_?x.overlay:void 0,onLayout:_?D:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:w?"large":"default",scrollY:_?T:void 0,onBack:n,rightActions:l,leading:i})}):null;let N;N=void 0!==p?_jsx(FlatList,{keyboardShouldPersistTaps:"handled",...p,refreshControl:V,onScroll:_?K:void 0,scrollEventThrottle:16,style:x.flex,contentContainerStyle:[{paddingTop:B,paddingLeft:F,paddingRight:I},{paddingBottom:L?0:M},p.contentContainerStyle,y]}):u?_jsx(KeyboardAwareScrollView,{refreshControl:V,onScroll:_?K:void 0,safeAreaEdges:H,style:x.flex,contentContainerStyle:[{paddingTop:B},y],children:s}):_jsx(View,{style:[x.flex,{paddingLeft:F,paddingRight:I,paddingBottom:L?0:M},y],children:s});const P=L?_jsx(KeyboardStickyView,{style:[x.footer,{paddingLeft:F,paddingRight:I,paddingBottom:M},f],children:c}):null;return _jsxs(View,{testID:b,style:[x.root,{paddingTop:O},g],children:[_?null:G,N,P,_?G:null,h?_jsx(KeyboardToolbar,{}):null]})}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";export{Screen}from"./Screen.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{formatDateTime}from"@webority/mobile-core";import{forwardRef,memo,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{AccessibilityInfo,PixelRatio,Platform,StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Svg,{Path,Rect,Text as SvgText}from"react-native-svg";import{lightTheme,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Input}from"../Input/index.js";import{Text}from"../Text/index.js";import{BASELINE_RATIO,buildSignatureSvg,distanceBetween,FALLBACK_WIDTH,pointOf,strokePath,typedFontSize}from"./signatureGeometry.js";import{writePng}from"./writePng";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pad:"Signature pad",padHint:"Draw with one finger. To sign without drawing, use the type your name action.",caption:"Sign above the line. To start with an up or down stroke, rest your finger a moment first.",typedCaption:"Your typed name is used as your signature.",undo:"Undo",clear:"Clear",typeInstead:"Type your name instead",drawInstead:"Draw instead",typedLabel:"Type your name",typedPlaceholder:"Your full name",empty:"Not signed",signed:"Signed",typingAnnouncement:"Signing by typing your name. Your typed name is used as your signature. Choose Draw instead to sign with your finger.",drawingAnnouncement:"Signing by drawing. Use one finger on the pad.",clearedAnnouncement:"Signature cleared",undoneAnnouncement:"Last stroke removed",emptyError:"Add a signature first."},STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,DEFAULT_NAME_LENGTH=100,MAX_EXPORT_SCALE=3,MIN_TARGET=44,BASELINE_OPACITY=.3,DISABLED_OPACITY=.5,TARGET_STYLE={minHeight:44},defaultScriptFont=()=>Platform.select({ios:"Snell Roundhand",default:"cursive"}),cssFontStack=e=>"cursive"===e?"cursive":`'${e}', cursive`,useScreenReader=()=>{const[e,t]=useState(!1);return useEffect(()=>{let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(n=>{e&&t(n)});const n=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,n.remove()}},[]),e},StrokePath=memo(({points:e,color:t})=>_jsx(Path,{d:strokePath(e),stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}));StrokePath.displayName="SignaturePadStroke";const Marks=({mode:e,strokes:t,name:n,color:r,fontFamily:a,width:o,height:i})=>"draw"===e?_jsx(_Fragment,{children:t.map(e=>_jsx(StrokePath,{points:e.points,color:r},e.id))}):n?_jsx(SvgText,{x:o/2,y:i*BASELINE_RATIO,fontSize:typedFontSize(o,n),fontFamily:a,textAnchor:"middle",fill:r,children:n}):null,SignaturePad=forwardRef((e,t)=>{const{initialStrokes:n,onChange:r,initialTypedName:a="",onTypedNameChange:o,defaultMode:i="draw",onModeChange:s,onEmptyChange:l,allowTyped:d=!0,signedBy:c,signedAt:u,height:m=DEFAULT_HEIGHT,maxNameLength:p=DEFAULT_NAME_LENGTH,inkColor:h,paperColor:g,scriptFontFamily:y,labels:f,haptic:S="selection",disabled:T=!1,style:w,testID:x}=e,b=useTheme(),_=void 0===h&&void 0===g,E=_?b.colors.text.primary:h??lightTheme.colors.text.primary,A=_?b.colors.background.elevated:g??lightTheme.colors.background.elevated,v=_?lightTheme.colors.text.primary:E,C=_?lightTheme.colors.background.elevated:A,I=v!==E||C!==A,R=y??defaultScriptFont(),L=useMemo(()=>({...DEFAULT_LABELS,...f}),[f]),k=useScreenReader(),j=useRef(null),P=useRef(null),[D,F]=useState(0),[M,N]=useState(()=>(n??[]).map((e,t)=>({id:t+1,points:[...e]}))),B=useRef(M),O=useRef(M.length),G=useRef(null),H=useRef(null),[Y,U]=useState(d?i:"draw"),[W,$]=useState(a),[z,V]=useState(null),K=useRef(!1),X=useRef({onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l});useEffect(()=>{X.current={onChange:r,onTypedNameChange:o,onModeChange:s,onEmptyChange:l}});const J="draw"===Y&&!T,q="draw"===Y?0===M.length:0===W.trim().length,Q=useRef(null);useEffect(()=>{Q.current!==q&&(Q.current=q,X.current.onEmptyChange?.(q))},[q]);const Z=useCallback(e=>{B.current=e,N(e)},[]),ee=useCallback(()=>{V(Date.now()),X.current.onChange?.(B.current.map(e=>e.points))},[]),te=useMemo(()=>{const pan=e=>Gesture.Pan().enabled(J).runOnJS(!0).onBegin(e=>{G.current=pointOf(e.x,e.y)}).onStart(t=>{H.current=e,O.current+=1;const n=pointOf(t.x,t.y);Z([...B.current,{id:O.current,points:[G.current??n,n]}])}).onUpdate(t=>{if(H.current!==e)return;const n=B.current[B.current.length-1],r=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],r)<.8||Z([...B.current.slice(0,-1),{...n,points:[...n.points,r]}])}).onFinalize(()=>{H.current===e&&(H.current=null,ee())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[J,Z,ee]),ne=useCallback(e=>{U(e),X.current.onModeChange?.(e),announce("type"===e?L.typingAnnouncement:L.drawingAnnouncement)},[L.typingAnnouncement,L.drawingAnnouncement]);useEffect(()=>{k&&d&&!K.current&&"draw"===Y&&0===B.current.length&&ne("type")},[k,d,Y,ne]);const re=useCallback(()=>{K.current=!0,ne("draw"===Y?"type":"draw")},[Y,ne]),ae=useCallback(e=>{$(e),V(Date.now()),X.current.onTypedNameChange?.(e)},[]),oe=useCallback(()=>{"type"===Y?ae(""):(Z([]),ee()),announce(L.clearedAnnouncement)},[Y,ae,Z,ee,L.clearedAnnouncement]),ie=useCallback(()=>{"draw"===Y&&0!==B.current.length&&(Z(B.current.slice(0,-1)),ee(),announce(L.undoneAnnouncement))},[Y,Z,ee,L.undoneAnnouncement]),se=D||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(q)return void t(new Error(L.emptyError));const n=I?P.current:j.current;if(!n)return void t(new Error("The signature pad is not on screen."));const r=Math.min(3,Math.max(1,PixelRatio.get()));n.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:se*r,height:m*r})}),toSvg:()=>buildSignatureSvg({width:se,height:m,mode:Y,strokes:M.map(e=>e.points),typedName:W,ink:v,paper:C,strokeWidth:2.5,fontFamily:cssFontStack(R)}),clear:oe,undo:ie,isEmpty:()=>q}),[q,L.emptyError,se,m,Y,M,W,I,v,C,R,oe,ie]);const le=useMemo(()=>[{name:"undo",label:L.undo},{name:"clear",label:L.clear},...d?[{name:"toggleMode",label:"draw"===Y?L.typeInstead:L.drawInstead}]:[]],[L.undo,L.clear,L.typeInstead,L.drawInstead,d,Y]),de=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?ie():"clear"===t?oe():"toggleMode"===t&&d&&re()},[T,ie,oe,re,d]),ce=useCallback(e=>{F(e.nativeEvent.layout.width)},[]),ue=useMemo(()=>StyleSheet.create({root:{gap:b.spacing.sm},pad:{height:m,borderWidth:b.colors.border.width,borderColor:b.colors.border.primary,borderRadius:b.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:A,opacity:T?.5:1},baseline:{position:"absolute",left:b.spacing.md,right:b.spacing.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:E,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:b.spacing.xs},trailing:{flexDirection:"row",alignItems:"center",gap:b.spacing.xs}}),[b,m,A,E,T]),me=W.trim(),pe=u??z,he=c&&!q?`Signed by ${c}${pe?`, ${formatDateTime(pe)}`:""}`:null,ge="type"===Y&&me?`${L.pad}. ${me}`:L.pad;return _jsxs(View,{style:[ue.root,w],testID:x,children:[_jsx(GestureDetector,{gesture:te,children:_jsxs(View,{style:ue.pad,onLayout:ce,accessible:!0,accessibilityRole:"image",accessibilityLabel:ge,accessibilityHint:"draw"===Y?L.padHint:void 0,accessibilityValue:{text:q?L.empty:L.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:le,onAccessibilityAction:de,children:[I?_jsxs(Svg,{ref:P,style:StyleSheet.absoluteFill,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:C}),_jsx(Marks,{mode:Y,strokes:M,name:me,color:v,fontFamily:R,width:se,height:m})]}):null,_jsxs(Svg,{ref:j,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:A}),_jsx(Marks,{mode:Y,strokes:M,name:me,color:E,fontFamily:R,width:se,height:m})]}),_jsx(View,{pointerEvents:"none",style:ue.baseline})]})}),"type"===Y?_jsx(Input,{label:L.typedLabel,placeholder:L.typedPlaceholder,value:W,onChangeText:ae,maxLength:p,disabled:T,autoComplete:"name",textContentType:"name",autoCapitalize:"words",autoCorrect:!1,returnKeyType:"done",testID:x?`${x}-name`:void 0}):null,_jsx(Text,{variant:"caption",color:"tertiary",children:"draw"===Y?L.caption:L.typedCaption}),_jsxs(View,{style:ue.actions,children:[d?_jsx(Button,{title:"draw"===Y?L.typeInstead:L.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:re,testID:x?`${x}-mode`:void 0}):_jsx(View,{}),"draw"===Y&&M.length>0?_jsxs(View,{style:ue.trailing,children:[_jsx(Button,{title:L.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:ie,testID:x?`${x}-undo`:void 0}),_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:oe,testID:x?`${x}-clear`:void 0})]}):null,"type"===Y&&me?_jsx(Button,{title:L.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:S,disabled:T,onPress:oe,testID:x?`${x}-clear`:void 0}):null]}),he?_jsx(Text,{variant:"caption",color:"secondary",children:he}):null]})});SignaturePad.displayName="SignaturePad";export{SignaturePad};export default SignaturePad;
|
|
1
|
+
"use strict";import{formatDateTime}from"@webority/mobile-core";import{forwardRef,memo,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Modal,PixelRatio,Platform,StyleSheet,useWindowDimensions,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import Svg,{Path,Rect,Text as SvgText}from"react-native-svg";import{lightTheme,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Input}from"../Input/index.js";import{Text}from"../Text/index.js";import{BASELINE_RATIO,buildSignatureSvg,distanceBetween,FALLBACK_WIDTH,pointOf,strokePath,typedFontSize}from"./signatureGeometry.js";import{writePng}from"./writePng";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pad:"Signature pad",padHint:"Draw with one finger. To sign without drawing, use the type your name action.",caption:"Sign above the line. To start with an up or down stroke, rest your finger a moment first.",typedCaption:"Your typed name is used as your signature.",undo:"Undo",clear:"Clear",typeInstead:"Type your name instead",drawInstead:"Draw instead",typedLabel:"Type your name",typedPlaceholder:"Your full name",empty:"Not signed",signed:"Signed",typingAnnouncement:"Signing by typing your name. Your typed name is used as your signature. Choose Draw instead to sign with your finger.",drawingAnnouncement:"Signing by drawing. Use one finger on the pad.",clearedAnnouncement:"Signature cleared",undoneAnnouncement:"Last stroke removed",emptyError:"Add a signature first.",expand:"Expand",done:"Done",close:"Close"},STROKE_WIDTH=2.5,SIDEWAYS_TO_DRAW=6,UPRIGHT_TO_SCROLL=8,REST_TO_DRAW_MS=200,MIN_POINT_GAP=.8,DEFAULT_HEIGHT=180,EXPANDED_CHROME=200,DEFAULT_NAME_LENGTH=100,MAX_EXPORT_SCALE=3,MIN_TARGET=44,BASELINE_OPACITY=.3,DISABLED_OPACITY=.5,TARGET_STYLE={minHeight:44},defaultScriptFont=()=>Platform.select({ios:"Snell Roundhand",default:"cursive"}),cssFontStack=e=>"cursive"===e?"cursive":`'${e}', cursive`,useScreenReader=()=>{const[e,t]=useState(!1);return useEffect(()=>{let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(n=>{e&&t(n)});const n=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,n.remove()}},[]),e},StrokePath=memo(({points:e,color:t})=>_jsx(Path,{d:strokePath(e),stroke:t,strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}));StrokePath.displayName="SignaturePadStroke";const Marks=({mode:e,strokes:t,name:n,color:a,fontFamily:r,width:o,height:i})=>"draw"===e?_jsx(_Fragment,{children:t.map(e=>_jsx(StrokePath,{points:e.points,color:a},e.id))}):n?_jsx(SvgText,{x:o/2,y:i*BASELINE_RATIO,fontSize:typedFontSize(o,n),fontFamily:r,textAnchor:"middle",fill:a,children:n}):null,SignaturePadSurface=forwardRef((e,t)=>{const{expandable:n,initialStrokes:a,onChange:r,initialTypedName:o="",onTypedNameChange:i,defaultMode:s="draw",onModeChange:l,onEmptyChange:d,allowTyped:c=!0,signedBy:u,signedAt:p,height:m=DEFAULT_HEIGHT,maxNameLength:g=DEFAULT_NAME_LENGTH,inkColor:h,paperColor:y,scriptFontFamily:f,labels:S,haptic:x="selection",disabled:T=!1,style:w,testID:_}=e,b=useTheme(),E=void 0===h&&void 0===y,A=E?b.colors.text.primary:h??lightTheme.colors.text.primary,C=E?b.colors.background.elevated:y??lightTheme.colors.background.elevated,v=E?lightTheme.colors.text.primary:A,R=E?lightTheme.colors.background.elevated:C,I=v!==A||R!==C,j=f??defaultScriptFont(),k=useMemo(()=>({...DEFAULT_LABELS,...S}),[S]),L=useScreenReader(),P=useRef(null),D=useRef(null),[F,M]=useState(0),[B,G]=useState(()=>(a??[]).map((e,t)=>({id:t+1,points:[...e]}))),N=useRef(B),H=useRef(B.length),O=useRef(null),Y=useRef(null),[$,W]=useState(c?s:"draw"),[z,U]=useState(o),[V,K]=useState(null),X=useRef(!1),{height:q}=useWindowDimensions(),[J,Q]=useState(!1),[Z,ee]=useState([]),te=useRef({onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d});useEffect(()=>{te.current={onChange:r,onTypedNameChange:i,onModeChange:l,onEmptyChange:d}});const ne="draw"===$&&!T,ae="draw"===$?0===B.length:0===z.trim().length,re=useRef(null);useEffect(()=>{re.current!==ae&&(re.current=ae,te.current.onEmptyChange?.(ae))},[ae]);const oe=useCallback(e=>{N.current=e,G(e)},[]),ie=useCallback(()=>{K(Date.now()),te.current.onChange?.(N.current.map(e=>e.points))},[]),se=useMemo(()=>{const pan=e=>Gesture.Pan().enabled(ne).runOnJS(!0).onBegin(e=>{O.current=pointOf(e.x,e.y)}).onStart(t=>{Y.current=e,H.current+=1;const n=pointOf(t.x,t.y);oe([...N.current,{id:H.current,points:[O.current??n,n]}])}).onUpdate(t=>{if(Y.current!==e)return;const n=N.current[N.current.length-1],a=pointOf(t.x,t.y);distanceBetween(n.points[n.points.length-1],a)<.8||oe([...N.current.slice(0,-1),{...n,points:[...n.points,a]}])}).onFinalize(()=>{Y.current===e&&(Y.current=null,ie())}),e=pan("sideways").activeOffsetX([-6,6]).failOffsetY([-8,8]),t=pan("rested").activateAfterLongPress(200);return Gesture.Race(e,t)},[ne,oe,ie]),le=useCallback(e=>{W(e),te.current.onModeChange?.(e),announce("type"===e?k.typingAnnouncement:k.drawingAnnouncement)},[k.typingAnnouncement,k.drawingAnnouncement]);useEffect(()=>{L&&c&&!X.current&&"draw"===$&&0===N.current.length&&le("type")},[L,c,$,le]);const de=useCallback(()=>{X.current=!0,le("draw"===$?"type":"draw")},[$,le]),ce=useCallback(e=>{U(e),K(Date.now()),te.current.onTypedNameChange?.(e)},[]),ue=useCallback(()=>{"type"===$?ce(""):(oe([]),ie()),announce(k.clearedAnnouncement)},[$,ce,oe,ie,k.clearedAnnouncement]),pe=useCallback(()=>{"draw"===$&&0!==N.current.length&&(oe(N.current.slice(0,-1)),ie(),announce(k.undoneAnnouncement))},[$,oe,ie,k.undoneAnnouncement]),me=useCallback(()=>{ee(N.current.map(e=>e.points)),Q(!0)},[]),ge=useCallback(()=>{Q(!1)},[]),he=useCallback(()=>{oe(Z.map(e=>(H.current+=1,{id:H.current,points:[...e]}))),ie(),Q(!1)},[Z,oe,ie]),ye=F||FALLBACK_WIDTH;useImperativeHandle(t,()=>({toFile:()=>new Promise((e,t)=>{if(ae)return void t(new Error(k.emptyError));const n=I?D.current:P.current;if(!n)return void t(new Error("The signature pad is not on screen."));const a=Math.min(3,Math.max(1,PixelRatio.get()));n.toDataURL(n=>{try{e(writePng(n))}catch(e){t(e)}},{width:ye*a,height:m*a})}),toSvg:()=>buildSignatureSvg({width:ye,height:m,mode:$,strokes:B.map(e=>e.points),typedName:z,ink:v,paper:R,strokeWidth:2.5,fontFamily:cssFontStack(j)}),clear:ue,undo:pe,isEmpty:()=>ae}),[ae,k.emptyError,ye,m,$,B,z,I,v,R,j,ue,pe]);const fe=useMemo(()=>[{name:"undo",label:k.undo},{name:"clear",label:k.clear},...c?[{name:"toggleMode",label:"draw"===$?k.typeInstead:k.drawInstead}]:[]],[k.undo,k.clear,k.typeInstead,k.drawInstead,c,$]),Se=useCallback(e=>{if(T)return;const{actionName:t}=e.nativeEvent;"undo"===t?pe():"clear"===t?ue():"toggleMode"===t&&c&&de()},[T,pe,ue,de,c]),xe=useCallback(e=>{M(e.nativeEvent.layout.width)},[]),Te=useMemo(()=>StyleSheet.create({root:{gap:b.spacing.sm},pad:{height:m,borderWidth:b.colors.border.width,borderColor:b.colors.border.primary,borderRadius:b.radius.md,...smoothCorners,overflow:"hidden",backgroundColor:C,opacity:T?.5:1},baseline:{position:"absolute",left:b.spacing.md,right:b.spacing.md,top:m*BASELINE_RATIO,height:StyleSheet.hairlineWidth,backgroundColor:A,opacity:.3},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:b.spacing.xs},trailing:{flexDirection:"row",alignItems:"center",gap:b.spacing.xs},expandedRoot:{flex:1,padding:b.spacing.md,gap:b.spacing.sm,backgroundColor:b.colors.background.primary},expandedBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}),[b,m,C,A,T]),we=z.trim(),be=p??V,Ee=u&&!ae?`Signed by ${u}${be?`, ${formatDateTime(be)}`:""}`:null,Ae="type"===$&&we?`${k.pad}. ${we}`:k.pad;return _jsxs(View,{style:[Te.root,w],testID:_,children:[_jsx(GestureDetector,{gesture:se,children:_jsxs(View,{style:Te.pad,onLayout:xe,accessible:!0,accessibilityRole:"image",accessibilityLabel:Ae,accessibilityHint:"draw"===$?k.padHint:void 0,accessibilityValue:{text:ae?k.empty:k.signed},accessibilityState:{disabled:T},"aria-disabled":T,accessibilityActions:fe,onAccessibilityAction:Se,children:[I?_jsxs(Svg,{ref:D,style:StyleSheet.absoluteFill,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:R}),_jsx(Marks,{mode:$,strokes:B,name:we,color:v,fontFamily:j,width:ye,height:m})]}):null,_jsxs(Svg,{ref:P,width:"100%",height:m,children:[_jsx(Rect,{x:"0",y:"0",width:"100%",height:"100%",fill:C}),_jsx(Marks,{mode:$,strokes:B,name:we,color:A,fontFamily:j,width:ye,height:m})]}),_jsx(View,{pointerEvents:"none",style:Te.baseline})]})}),"type"===$?_jsx(Input,{label:k.typedLabel,placeholder:k.typedPlaceholder,value:z,onChangeText:ce,maxLength:g,disabled:T,autoComplete:"name",textContentType:"name",autoCapitalize:"words",autoCorrect:!1,returnKeyType:"done",testID:_?`${_}-name`:void 0}):null,_jsx(Text,{variant:"caption",color:"tertiary",children:"draw"===$?k.caption:k.typedCaption}),_jsxs(View,{style:Te.actions,children:[c?_jsx(Button,{title:"draw"===$?k.typeInstead:k.drawInstead,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:de,testID:_?`${_}-mode`:void 0}):_jsx(View,{}),"draw"===$?_jsxs(View,{style:Te.trailing,children:[B.length>0?_jsxs(_Fragment,{children:[_jsx(Button,{title:k.undo,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:pe,testID:_?`${_}-undo`:void 0}),_jsx(Button,{title:k.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:_?`${_}-clear`:void 0})]}):null,n?_jsx(Button,{title:k.expand,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:me,testID:_?`${_}-expand`:void 0}):null]}):null,"type"===$&&we?_jsx(Button,{title:k.clear,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,disabled:T,onPress:ue,testID:_?`${_}-clear`:void 0}):null]}),Ee?_jsx(Text,{variant:"caption",color:"secondary",children:Ee}):null,n?_jsx(Modal,{visible:J,animationType:"slide",presentationStyle:"fullScreen",onRequestClose:ge,children:_jsxs(ExpandedRoot,{style:Te.expandedRoot,children:[_jsxs(View,{style:Te.expandedBar,children:[_jsx(Button,{title:k.close,variant:"ghost",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:ge,testID:_?`${_}-close`:void 0}),_jsx(Button,{title:k.done,variant:"solid",tone:"primary",size:"md",style:TARGET_STYLE,haptic:x,onPress:he,testID:_?`${_}-done`:void 0})]}),J?_jsx(SignaturePadSurface,{expandable:!1,defaultMode:"draw",allowTyped:!1,initialStrokes:Z,onChange:ee,height:Math.max(DEFAULT_HEIGHT,q-200),inkColor:h,paperColor:y,scriptFontFamily:f,labels:S,haptic:x,testID:_?`${_}-expanded`:void 0}):null]})}):null]})});SignaturePadSurface.displayName="SignaturePadSurface";const ExpandedRoot="android"===Platform.OS?GestureHandlerRootView:View,SignaturePad=forwardRef((e,t)=>_jsx(SignaturePadSurface,{...e,expandable:!0,ref:t}));SignaturePad.displayName="SignaturePad";export{SignaturePad};export default SignaturePad;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useMemo,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useTheme}from"../../theme/index.js";import{toBackgroundImage}from"../../theme/Gradient.js";import{useScreenDimensions}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{useSkeletonClock}from"./SkeletonClock.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,s,o,i)=>{if(void 0!==i)return resolveRadius(e,i);switch(t){case"circle":return"number"==typeof s?Math.min(s,o)/2:o/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=({shape:e="rect",width:t="100%",height:s=16,radius:o,variant:i,speed:
|
|
1
|
+
"use strict";import{useMemo,useState}from"react";import{Animated,StyleSheet,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{toBackgroundImage}from"../../theme/Gradient.js";import{useScreenDimensions}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{useSkeletonClock}from"./SkeletonClock.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{jsx as _jsx}from"react/jsx-runtime";const resolveRadius=(e,t)=>"number"==typeof t?t:e.radius[t],resolveWidth=e=>void 0===e?"100%":e,radiusForShape=(e,t,s,o,i)=>{if(void 0!==i)return resolveRadius(e,i);switch(t){case"circle":return"number"==typeof s?Math.min(s,o)/2:o/2;case"rounded":return e.radius.md;default:return e.radius.sm}},Skeleton=({shape:e="rect",width:t="100%",height:s=16,radius:o,variant:i,speed:n,colors:r,style:a,testID:l})=>{const u=useTheme(),m=useSkeletonDefaults(),d=useSkeletonClock(),c=useReducedMotion(),h=i??m.variant??"shimmer",p=c&&"auto"===(m.animation??"auto");let S=h;d.enabled?p&&"shimmer"===h&&(S="pulse"):S="none";const k=r?.background??m.colors?.background??u.colors.skeleton.background,g=r?.highlight??m.colors?.highlight??u.colors.skeleton.highlight,{responsive:y}=useScreenDimensions(),b=useMemo(()=>buildStyles(),[]),x=resolveWidth(t),f=y.size(s),v=radiusForShape(u,e,x,f,o),[j,w]=useState(0),R=useMemo(()=>j<=0?0:Math.max(48,.7*j),[j]),C=useMemo(()=>j<=0?0:d.shimmer.interpolate({inputRange:[0,1],outputRange:[-R,j]}),[d.shimmer,R,j]),M=useMemo(()=>"none"===S?null:"pulse"===S?_jsx(Animated.View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{backgroundColor:g,opacity:d.pulse.interpolate({inputRange:[0,1],outputRange:[0,.55]})}]}):j<=0?null:_jsx(Animated.View,{pointerEvents:"none",style:[b.shimmerBand,{width:R,transform:[{translateX:C}],experimental_backgroundImage:[toBackgroundImage({colors:["transparent",g,"transparent"],locations:[0,.5,1],start:{x:0,y:.5},end:{x:1,y:.5}})]}]}),[S,g,d.pulse,j,b.shimmerBand,R,C]);return _jsx(View,{onLayout:e=>{const t=e.nativeEvent.layout.width;t!==j&&w(t)},accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",testID:l,style:[b.base,{width:x,height:f,borderRadius:v,...smoothCorners,backgroundColor:k},a],children:M})};Skeleton.displayName="Skeleton";const SkeletonCircle=({size:e,style:t,...s})=>{const{responsive:o}=useScreenDimensions(),i=o.size(e);return _jsx(Skeleton,{...s,shape:"circle",width:i,height:e,style:t})};SkeletonCircle.displayName="SkeletonCircle";const SkeletonText=({lines:e=3,lastLineWidth:t="60%",spacing:s,fontSize:o=14,variant:i,speed:n,radius:r="sm",width:a="100%",style:l,testID:u})=>{const m=useTheme(),d=s??m.spacing.xs,c=Math.max(1,e);return _jsx(View,{style:l,testID:u,children:Array.from({length:c}).map((e,s)=>_jsx(Skeleton,{shape:"text",width:s===c-1&&c>1?t:a,height:o,radius:r,variant:i,speed:n,style:s<c-1?{marginBottom:d}:void 0},s))})};SkeletonText.displayName="SkeletonText";const buildStyles=()=>StyleSheet.create({base:{overflow:"hidden"},shimmerBand:{position:"absolute",top:0,bottom:0,left:0}});export{Skeleton,SkeletonCircle,SkeletonText};export default Skeleton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{Children,cloneElement,isValidElement,useEffect,useRef}from"react";import{Animated,Image,StyleSheet,Text,View}from"react-native";import{createAnimatedValue}from"../../theme/index.js";import{Skeleton}from"./Skeleton.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{SkeletonSkip}from"./SkeletonSkip.js";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";const flattenStyle=e=>{if(!e)return{};return StyleSheet.flatten(e)??{}},resolveWidth=(e,t)=>"number"==typeof e?e:"string"!=typeof e||"auto"!==e&&"100%"!==e&&!/^\d+(\.\d+)?%$/.test(e)?t:e,resolveRadius=(e,t)=>"number"==typeof e?e:t,skeletonizeNode=(e,t,i,r,n="r")=>{if(null==e||"boolean"==typeof e)return null;if("string"==typeof e||"number"==typeof e)return _jsx(Skeleton,{shape:"text",width:"60%",height:14,variant:t,speed:i,colors:r},`${n}-text`);if(Array.isArray(e))return Children.map(e,(e,s)=>skeletonizeNode(e,t,i,r,`${n}-${s}`));if(!isValidElement(e))return null;const s=e,o=s.props??{},l=s.type;if(l===SkeletonSkip)return cloneElement(s,{key:`${n}-skip`});if("function"==typeof l||"object"==typeof l){const e=l.Skeleton;if(e){return _jsx(e,{...o},`${n}-self`)}}if(l===Image){const e=flattenStyle(o.style),s=resolveWidth(e.width,"100%"),l="number"==typeof e.height?e.height:120,a=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:s,height:l,radius:a,variant:t,speed:i,colors:r,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${n}-img`)}if(l===Text){const e=flattenStyle(o.style),s="number"==typeof e.fontSize?e.fontSize:14,l=resolveWidth(e.width,"85%");return _jsx(Skeleton,{shape:"text",width:l,height:Math.round(1.15*s),variant:t,speed:i,colors:r,style:{marginVertical:2}},`${n}-txt`)}if(null!=o.children)return cloneElement(s,{key:`${n}-w`},skeletonizeNode(o.children,t,i,r,`${n}-c`));if(l===View){const e=flattenStyle(o.style);if(null!=e.width||null!=e.height){const s=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:20,l=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:s,height:o,radius:l,variant:t,speed:i,colors:r},`${n}-vw`)}}return cloneElement(s,{key:`${n}-leaf`})},SkeletonContent=({loading:e,children:t,placeholder:i,variant:r,speed:n,count:s=1,colors:o,fadeDuration:l,style:a,testID:
|
|
1
|
+
"use strict";import React,{Children,cloneElement,isValidElement,useEffect,useRef}from"react";import{Animated,Image,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue}from"../../theme/index.js";import{Skeleton}from"./Skeleton.js";import{useSkeletonDefaults}from"./SkeletonProvider.js";import{SkeletonSkip}from"./SkeletonSkip.js";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_REVEAL_FADE_MS=300,flattenStyle=e=>{if(!e)return{};return StyleSheet.flatten(e)??{}},resolveWidth=(e,t)=>"number"==typeof e?e:"string"!=typeof e||"auto"!==e&&"100%"!==e&&!/^\d+(\.\d+)?%$/.test(e)?t:e,resolveRadius=(e,t)=>"number"==typeof e?e:t,skeletonizeNode=(e,t,i,r,n="r")=>{if(null==e||"boolean"==typeof e)return null;if("string"==typeof e||"number"==typeof e)return _jsx(Skeleton,{shape:"text",width:"60%",height:14,variant:t,speed:i,colors:r},`${n}-text`);if(Array.isArray(e))return Children.map(e,(e,s)=>skeletonizeNode(e,t,i,r,`${n}-${s}`));if(!isValidElement(e))return null;const s=e,o=s.props??{},l=s.type;if(l===SkeletonSkip)return cloneElement(s,{key:`${n}-skip`});if("function"==typeof l||"object"==typeof l){const e=l.Skeleton;if(e){return _jsx(e,{...o},`${n}-self`)}}if(l===Image){const e=flattenStyle(o.style),s=resolveWidth(e.width,"100%"),l="number"==typeof e.height?e.height:120,a=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:s,height:l,radius:a,variant:t,speed:i,colors:r,style:{margin:"number"==typeof e.margin?e.margin:void 0}},`${n}-img`)}if(l===Text){const e=flattenStyle(o.style),s="number"==typeof e.fontSize?e.fontSize:14,l=resolveWidth(e.width,"85%");return _jsx(Skeleton,{shape:"text",width:l,height:Math.round(1.15*s),variant:t,speed:i,colors:r,style:{marginVertical:2}},`${n}-txt`)}if(null!=o.children)return cloneElement(s,{key:`${n}-w`},skeletonizeNode(o.children,t,i,r,`${n}-c`));if(l===View){const e=flattenStyle(o.style);if(null!=e.width||null!=e.height){const s=resolveWidth(e.width,"100%"),o="number"==typeof e.height?e.height:20,l=resolveRadius(e.borderRadius,"sm");return _jsx(Skeleton,{width:s,height:o,radius:l,variant:t,speed:i,colors:r},`${n}-vw`)}}return cloneElement(s,{key:`${n}-leaf`})},SkeletonContent=({loading:e,children:t,placeholder:i,variant:r,speed:n,count:s=1,colors:o,fadeDuration:l,style:a,testID:u})=>{const c=useSkeletonDefaults(),d=usePresenceMotion(),f=l??c.fadeDuration??(d.reduced?d.duration("normal"):300),m=useRef(e),h=useRef(createAnimatedValue(e?0:1)).current;if(useEffect(()=>{let t;return m.current&&!e?(h.setValue(0),t=Animated.timing(h,{toValue:1,duration:f,useNativeDriver:!0}),t.start()):!m.current&&e&&h.setValue(1),m.current=e,()=>t?.stop()},[e,h,f]),!e)return f<=0?_jsx(_Fragment,{children:t}):_jsx(Animated.View,{style:[a,{opacity:h}],testID:u,children:t});if(void 0!==i){const e=s>1?Array.from({length:s},(e,t)=>_jsx(React.Fragment,{children:i},`sk-ph-${t}`)):i;return _jsx(View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:e})}const y=s>1?Array.from({length:s},(e,i)=>_jsx(React.Fragment,{children:t},`sk-rep-${i}`)):t;return _jsx(View,{style:a,testID:u,accessible:!0,accessibilityLabel:"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,accessibilityLiveRegion:"polite",children:skeletonizeNode(y,r,n,o)})};SkeletonContent.displayName="SkeletonContent";export{SkeletonContent};export default SkeletonContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{createContext,useContext,
|
|
1
|
+
"use strict";import{createContext,useContext,useMemo}from"react";import{SkeletonClockProvider}from"./SkeletonClock.js";import{jsx as _jsx}from"react/jsx-runtime";const SkeletonDefaultsContext=createContext({});export const SkeletonProvider=({children:e,variant:t,speed:o,placeholderCount:r,radius:n,colors:a,fadeDuration:s,animation:l="auto"})=>{const i="never"!==l,d=o??"normal",u=t??"shimmer",c=useMemo(()=>({variant:t,speed:o,placeholderCount:r,radius:n,colors:a,fadeDuration:s,animation:l}),[t,o,r,n,a,s,l]);return _jsx(SkeletonDefaultsContext.Provider,{value:c,children:_jsx(SkeletonClockProvider,{speed:d,variant:u,enabled:i,children:e})})};SkeletonProvider.displayName="SkeletonProvider";export const useSkeletonDefaults=()=>useContext(SkeletonDefaultsContext);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";export{default,Skeleton,SkeletonCircle,SkeletonText}from"./Skeleton.js";export{SkeletonClockProvider,useSkeletonClock}from"./SkeletonClock.js";export{SkeletonContent}from"./SkeletonContent.js";export{SkeletonList}from"./SkeletonList.js";export{SkeletonProvider,
|
|
1
|
+
"use strict";export{default,Skeleton,SkeletonCircle,SkeletonText}from"./Skeleton.js";export{SkeletonClockProvider,useSkeletonClock}from"./SkeletonClock.js";export{SkeletonContent}from"./SkeletonContent.js";export{SkeletonList}from"./SkeletonList.js";export{SkeletonProvider,useSkeletonDefaults}from"./SkeletonProvider.js";export{SkeletonSkip}from"./SkeletonSkip.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{squircleHostRadius}from"../../utils/squircle.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:20,md:32,lg:48},CONTAINER_RATIO=1.5,DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,Dot=({size:e,color:t,delay:i,duration:n})=>{const
|
|
1
|
+
"use strict";import{forwardRef,useEffect,useMemo,useRef}from"react";import{ActivityIndicator,Animated,Easing,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{squircleHostRadius}from"../../utils/squircle.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:20,md:32,lg:48},CONTAINER_RATIO=1.5,DOT_COUNT=3,DOT_STAGGER_MS=150,DOT_CYCLE_MS=600,DOT_GROW_SCALE=1.4,DOT_PULSE_MIN_OPACITY=.4,Dot=({size:e,color:t,delay:i,duration:n,reduced:r})=>{const o=useRef(createAnimatedValue(0)).current;useEffect(()=>{const e=Animated.loop(Animated.sequence([Animated.delay(i),Animated.timing(o,{toValue:1,duration:n/2,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(o,{toValue:0,duration:n/2,easing:Easing.in(Easing.quad),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[o,i,n]);const s=useMemo(()=>({grow:o.interpolate({inputRange:[0,1],outputRange:[1,1.4]}),fade:o.interpolate({inputRange:[0,1],outputRange:[.4,1]})}),[o]);return _jsx(Animated.View,{style:{width:e,height:e,borderRadius:e/2,...smoothCorners,backgroundColor:t,...r?{opacity:s.fade}:{transform:[{scale:s.grow}]}}})},Spinner=forwardRef((e,t)=>{const{size:i="md",color:n,message:r,overlay:o=!1,backdropColor:s,variant:a="circular",accessibilityLabel:l,style:c,testID:u}=e,d="contained"===a,m=o&&!d,g=useTheme(),y=usePresenceMotion(),f=y.duration("normal"),p=useRef(createAnimatedValue(0)).current;useEffect(()=>{Animated.timing(p,{toValue:1,duration:f,easing:Easing.bezier(...g.motion.easing.standard),useNativeDriver:!0}).start()},[p,g,f]);const h=useMemo(()=>buildStyles(g),[g]),b=sizeMap[i],j=n??g.colors.primary,x=s??g.colors.background.overlay,C=useMemo(()=>{if("contained"===a){const e=Math.round(1.5*b);return _jsx(View,{style:[h.container,{width:e,height:e,borderRadius:e/2,backgroundColor:blendOf(j,.14,g.colors.background.elevated,g.colors.background.secondary)}],children:_jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})})}if("dots"===a){const e=Math.max(6,Math.round(b/4));return _jsx(View,{style:[h.dotsRow,{gap:Math.round(e/2)}],children:Array.from({length:3}).map((t,i)=>_jsx(Dot,{size:e,color:j,delay:150*i,duration:600,reduced:y.reduced},i))})}return _jsx(ActivityIndicator,{color:j,size:"sm"===i?"small":"large",style:{width:b,height:b}})},[a,i,b,j,h.dotsRow,h.container,y.reduced,g.colors.background.elevated,g.colors.background.secondary]),S=l??r??"Loading",v=useRef(S);v.current=S,useEffect(()=>{d&&announce(v.current)},[d]);const R=useSquircle(m,g.radius.lg),_=R.active&&R.size?{borderRadius:squircleHostRadius(R.size.width,R.size.height,g.radius.lg)}:null;let w=h.inlineContent;m?w=h.overlayContent:d&&(w=h.containedContent);const A=_jsxs(Animated.View,{ref:t,accessible:!0,accessibilityRole:"progressbar",accessibilityLiveRegion:d?"none":"polite",accessibilityLabel:S,accessibilityState:{busy:!0},"aria-busy":!0,testID:u,onLayout:R.onLayout,style:[w,_,{opacity:p}],children:[R.active&&R.size?_jsx(SquircleFill,{width:R.size.width,height:R.size.height,radius:g.radius.lg,fill:g.colors.background.elevated}):null,C,r?_jsx(Text,{style:[h.message,{color:g.colors.text.primary,fontSize:g.typography.fontSize.base,fontWeight:g.typography.fontWeight.medium,marginTop:g.spacing.md}],numberOfLines:2,children:r}):null]});return _jsx(View,m?{pointerEvents:"auto",style:[h.overlay,{backgroundColor:x},c],children:A}:{style:[d?h.containedFill:h.inline,c],children:A})});Spinner.displayName="Spinner";const buildStyles=e=>StyleSheet.create({inline:{alignItems:"center",justifyContent:"center"},inlineContent:{alignItems:"center",justifyContent:"center"},containedFill:{flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",minHeight:Math.round(1.5*sizeMap.lg)+2*e.spacing.xl},containedContent:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.spacing.lg},container:{alignItems:"center",justifyContent:"center"},overlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3},overlayContent:{alignItems:"center",justifyContent:"center",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,paddingHorizontal:e.spacing.xl,paddingVertical:e.spacing.xl,minWidth:140,...e.shadows.lg},dotsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center"},message:{textAlign:"center"}});export{Spinner};export default Spinner;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:o}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:o.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:o.warning};case"error":return{base:e.colors.error,on:e.colors.onError,ink:o.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:o.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:o.primary};default:return{base:e.colors.text.secondary,on:e.colors.
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:o}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:o.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:o.warning};case"error":return{base:e.colors.error,on:e.colors.onError,ink:o.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:o.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:o.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,o,r)=>{const s=isHex(r),{base:n,on:a,ink:i}=s?{base:r,on:e.colors.text.inverse,ink:r}:toneFor(e,t),l=!s&&"neutral"===t,d=l?e.colors.background.tertiary:tintOf(n,.14,e.colors.background.secondary),c=l?e.colors.border.primary:tintOf(n,.4,n);switch(o){case"solid":return{fill:n,border:n,text:a,dot:a};case"outline":return{fill:"transparent",border:l?c:n,text:i,dot:n};default:return{fill:d,border:c,text:i,dot:n}}},StatusBadge=forwardRef((e,t)=>{const{label:o,tone:r="neutral",variant:s="soft",size:n="md",dot:a=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:u,testID:g}=e,f=useTheme(),m=sizeMap[n],b=useMemo(()=>paletteFor(f,r,s,i),[f,r,s,i]);return l?_jsx(StatusBadgeSkeleton,{...e}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??o,testID:g,style:[styles.base,{minHeight:m.height,paddingHorizontal:m.paddingH,borderRadius:f.radius.full,...smoothCorners,backgroundColor:b.fill,borderColor:b.border,borderWidth:1},c],children:[a?_jsx(View,{testID:"status-badge-dot",style:{width:m.dot,height:m.dot,borderRadius:m.dot/2,marginRight:m.gap,backgroundColor:b.dot}}):null,_jsx(Text,{style:[styles.label,{color:b.text,fontSize:m.fontSize,...fontFor(f,"semibold")},u],numberOfLines:1,maxFontSizeMultiplier:f.maxFontSizeMultiplier,children:o})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:o,style:r})=>{const s=sizeMap[t],n=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(o?s.dot+s.gap:0);return _jsx(Skeleton,{width:n,height:s.height,radius:s.height/2,style:[styles.skeleton,r]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{StatusBadge};export default StatusBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText}from"../FieldBase/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase,FieldLabel,FieldMessage,hasFieldText,RequiredPlaceholder}from"../FieldBase/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:l,placeholder:i,label:a,helperText:o,error:n,required:u,disabled:c=!1,size:d="md",variant:p,maxTags:f,unique:m=!0,transform:x,separators:h=[","],haptic:g,style:b,testID:y}=e,j=useTheme(),C=useMemo(()=>buildStyles(j),[j]),[S,v]=useControllableState({value:r,defaultValue:s??[],onChange:l}),[T,w]=useState(""),[F,_]=useState(!1),k=useRef(null),I=useMemo(()=>mergeRefs(k,t),[t]),z=useCallback(()=>{c||k.current?.focus()},[c]),B="number"==typeof f&&S.length>=f,R=!0===n||hasFieldText(n),V=u&&!a&&0===S.length&&0===T.length&&Boolean(i),H=useCallback(e=>{const t=x?x(e.trim()):e.trim();if(!t)return;if(B)return;if(m&&S.some(e=>e.toLowerCase()===t.toLowerCase()))return void w("");v([...S,t]),w("");const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[B,g,v,S,x,m]),q=useCallback(e=>{const t=S.filter((t,r)=>r!==e);v(t);const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[g,v,S]),L=useCallback(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void H(r)}w(e)},[H,h]),M=useCallback(e=>{c||"Backspace"===e.nativeEvent.key&&""===T&&S.length>0&&q(S.length-1)},[c,T,q,S.length]),D=_jsx(FieldBase,{size:d,variant:p,focused:F,disabled:c,error:R,filled:S.length>0||T.length>0,onPress:z,pressFeedback:!1,style:b,children:_jsxs(View,{style:C.wrap,children:[S.map((e,t)=>_jsx(Chip,{label:e,size:"sm",onClose:c?void 0:()=>q(t),haptic:g},`${e}-${t}`)),_jsxs(View,{style:C.inputBox,children:[_jsx(TextInput,{ref:I,value:T,onChangeText:L,onKeyPress:M,onSubmitEditing:()=>H(T),onFocus:()=>_(!0),onBlur:()=>{_(!1),H(T)},editable:!c&&!B,placeholder:B||V?void 0:i,placeholderTextColor:j.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",accessibilityLabel:a??i,style:[C.input,{color:j.colors.text.primary,fontSize:j.typography.fontSize.base}],testID:y?`${y}-input`:void 0}),V?_jsx(RequiredPlaceholder,{text:i??"",color:j.colors.text.tertiary,fontSize:j.typography.fontSize.base,weightStyle:fontFor(j,"normal")}):null]})]})});return _jsxs(View,{testID:y,children:[a?_jsx(FieldLabel,{size:d,required:u,children:a}):null,D,_jsx(FieldMessage,{size:d,error:R,text:R?n:o})]})});TagInput.displayName="TagInput";const buildStyles=e=>StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},inputBox:{flexGrow:1,minWidth:80},input:{...fontFor(e,"normal"),padding:0}});export default TagInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"tight",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"normal",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"normal",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"normal",color:"secondary"},caption:{size:"xs",weight:"normal",line:"normal",color:"tertiary"},label:{size:"sm",weight:"medium",line:"normal",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"normal",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLES={primary:!0,secondary:!0,tertiary:!0,inverse:!0,disabled:!0,link:!0,textStrong:!0},TEXT_ROLE_KEY={textStrong:"strong"},SEMANTIC={success:!0,warning:!0,error:!0,info:!0};export const resolveColor=(e,i)=>TEXT_ROLES[i]?e.colors.text[TEXT_ROLE_KEY[i]??i]:SEMANTIC[i]?e.colors.toneText[i]:i;const Text=forwardRef((e,i)=>{const{variant:t="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:c,children:m,...p}=e,d=useTheme(),y=Object.hasOwn(VARIANTS,t),g=d.textVariants,h=!y&&g&&Object.hasOwn(g,t)?g[t]:void 0,f=useMemo(()=>{if(h){const{typography:e}=d,i="number"==typeof h.size?h.size:e.fontSize[h.size],t="number"==typeof n?n:n?e.fontSize[n]:i,c=h.lineHeight,m=h.letterSpacing;return{fontSize:t,lineHeight:"number"==typeof c?c:c?Math.round(t*e.lineHeight[c]):void 0,color:resolveColor(d,o??h.color??"primary"),textAlign:l,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:"number"!=typeof m&&m?e.letterSpacing[m]:m,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(d,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[y?t:"body"],i="number"==typeof n?n:d.typography.fontSize[n??e.size];return{fontSize:i,lineHeight:Math.round(i*d.typography.lineHeight[e.line]),color:resolveColor(d,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?d.typography.letterSpacing[e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(d,r??e.weight,e.fontFamily)}},[d,h,y,t,o,r,n,l,a,s]),x
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{Text as RNText}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const VARIANTS={display:{size:"4xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h1:{size:"3xl",weight:"bold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h2:{size:"2xl",weight:"semibold",line:"tight",color:"primary",heading:!0,fontFamily:"display"},h3:{size:"xl",weight:"semibold",line:"tight",color:"primary",heading:!0},title:{size:"lg",weight:"semibold",line:"normal",color:"primary",fontFamily:"display"},body:{size:"base",weight:"normal",line:"normal",color:"primary"},bodySmall:{size:"sm",weight:"normal",line:"normal",color:"secondary"},caption:{size:"xs",weight:"normal",line:"normal",color:"tertiary"},label:{size:"sm",weight:"medium",line:"normal",color:"secondary"},overline:{size:"xs",weight:"semibold",line:"normal",color:"secondary",uppercase:!0,letterSpacing:"wide"}},TEXT_ROLES={primary:!0,secondary:!0,tertiary:!0,inverse:!0,disabled:!0,link:!0,textStrong:!0},TEXT_ROLE_KEY={textStrong:"strong"},SEMANTIC={success:!0,warning:!0,error:!0,info:!0};export const resolveColor=(e,i)=>TEXT_ROLES[i]?e.colors.text[TEXT_ROLE_KEY[i]??i]:SEMANTIC[i]?e.colors.toneText[i]:i;const Text=forwardRef((e,i)=>{const{variant:t="body",color:o,weight:r,size:n,align:l,italic:a,underline:s,style:c,children:m,...p}=e,d=useTheme(),y=Object.hasOwn(VARIANTS,t),g=d.textVariants,h=!y&&g&&Object.hasOwn(g,t)?g[t]:void 0,f=useMemo(()=>{if(h){const{typography:e}=d,i="number"==typeof h.size?h.size:e.fontSize[h.size],t="number"==typeof n?n:n?e.fontSize[n]:i,c=h.lineHeight,m=h.letterSpacing;return{fontSize:t,lineHeight:"number"==typeof c?c:c?Math.round(t*e.lineHeight[c]):void 0,color:resolveColor(d,o??h.color??"primary"),textAlign:l,textTransform:h.uppercase?"uppercase":void 0,letterSpacing:"number"!=typeof m&&m?e.letterSpacing[m]:m,fontStyle:a||h.italic?"italic":void 0,fontVariant:h.fontVariant,textDecorationLine:s?"underline":void 0,...fontFor(d,r??h.weight??"normal",h.fontFamily)}}const e=VARIANTS[y?t:"body"],i="number"==typeof n?n:d.typography.fontSize[n??e.size];return{fontSize:i,lineHeight:Math.round(i*d.typography.lineHeight[e.line]),color:resolveColor(d,o??e.color),textAlign:l,textTransform:e.uppercase?"uppercase":void 0,letterSpacing:e.letterSpacing?d.typography.letterSpacing[e.letterSpacing]:void 0,fontStyle:a?"italic":void 0,textDecorationLine:s?"underline":void 0,...fontFor(d,r??e.weight,e.fontFamily)}},[d,h,y,t,o,r,n,l,a,s]),x=y?VARIANTS[t].heading:h?.heading;return _jsx(RNText,{ref:i,style:[f,c],maxFontSizeMultiplier:d.maxFontSizeMultiplier,accessibilityRole:x?"header":p.accessibilityRole,...p,children:m})});Text.displayName="Text";export{Text};export default Text;
|
|
@@ -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{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:
|
|
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{usePresenceMotion}from"../../hooks/usePresenceMotion.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 AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),transparentOf=e=>{const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return"transparent";const[i,a,r]=t[1].split(",").map(e=>e.trim());return`rgba(${i}, ${a}, ${r}, 0)`},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:v,size:M,variant:k,clearable:A,onClear:S,formatValue:j,triggerStyle:T,haptic:w}=e,D=void 0!==e.visible,[P,V]=useState(!1),C=D?t:P,H=D?m:m?`${m}-modal`:void 0,R=useTheme(),_=usePresenceMotion(),[N,$]=useModalInsets(),B=useMemo(()=>buildStyles(R),[R]),I=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(0)).current,L=useRef(createAnimatedValue(40)).current,z=useRef(createAnimatedValue(0)).current,F=useRef(0),W=useCallback(()=>{D?r?.():V(!1)},[D,r]),E=useCallback(()=>{const e=Animated.timing(I,{toValue:0,duration:_.duration("fast"),easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0}),t=Animated.timing(O,{toValue:0,duration:_.duration("normal"),useNativeDriver:!1});(_.reduced?Animated.parallel([e,t]):Animated.parallel([e,t,Animated.timing(L,{toValue:40,duration:R.motion.duration.fast,easing:Easing.bezier(...R.motion.easing.accelerate),useNativeDriver:!0})])).start(()=>W())},[O,W,I,_,L,R.motion.duration.fast,R.motion.easing.accelerate]),{handleGesture:G,opacity:q}=useDragToDismiss({drag:z,travel:()=>F.current||320,onDismiss:E}),U=useMemo(()=>Animated.multiply(I,q),[I,q]),Y=useMemo(()=>O.interpolate({inputRange:[0,1],outputRange:[transparentOf(R.colors.background.overlay),R.colors.background.overlay]}),[O,R.colors.background.overlay]),J=useMemo(()=>"24h"===s?range(0,23):range(1,12),[s]),K=useMemo(()=>range(0,59,o),[o]),Q=useMemo(()=>["AM","PM"],[]),X=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]),[Z,ee]=useState(()=>{const e=J.indexOf(X.displayHour);return e>=0?e:0}),[te,ie]=useState(()=>{const e=K.indexOf(X.minute);return e>=0?e:0}),[ae,re]=useState(()=>"PM"===X.period?1:0);useEffect(()=>{if(!C)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=J.indexOf(r);ee(l>=0?l:0);const u=K.indexOf(a);ie(u>=0?u:0),re("PM"===n?1:0)},[C,i,s,o,J,K]),useEffect(()=>{let e;if(C){const t=Animated.timing(I,{toValue:1,duration:_.duration("normal"),easing:Easing.out(Easing.cubic),useNativeDriver:!0}),i=Animated.timing(O,{toValue:1,duration:_.duration("normal"),useNativeDriver:!1});_.reduced?(setNativeValue(L,0),e=Animated.parallel([t,i])):e=Animated.parallel([t,i,Animated.spring(L,{toValue:0,damping:R.motion.spring.snappy.damping,stiffness:R.motion.spring.snappy.stiffness,mass:R.motion.spring.snappy.mass,useNativeDriver:!0})]),e.start()}else I.setValue(0),O.setValue(0),setNativeValue(L,40),setNativeValue(z,0),setNativeValue(q,1);return()=>e?.stop()},[C,I,O,_,L,z,q,R.motion]);const se=useCallback((e,t)=>{"hour"===e?ee(Math.max(0,J.indexOf(Number(t)))):"minute"===e?ie(Math.max(0,K.indexOf(Number(t)))):re("PM"===t?1:0)},[J,K]),oe=useCallback(()=>{!1!==w&&triggerHaptic("selection"),E()},[E,w]),ne=useCallback(()=>{const e=J[Z]??0,t=Q[ae]??"AM",i=to24h(e,t,s),r=K[te]??0;!1!==w&&triggerHaptic("notificationSuccess"),a?.({hour:i,minute:r}),E()},[J,Z,Q,ae,K,te,s,a,E,w]),le=useMemo(()=>{const e=J[Z]??0,t=K[te]??0;if("24h"===s)return`${pad2(e)}:${pad2(t)}`;const i=Q[ae]??"AM";return`${pad2(e)}:${pad2(t)} ${i}`},[J,Z,K,te,Q,ae,s]),ue=useMemo(()=>J.map(e=>({value:e,label:pad2(e),accessibilityLabel:`Hour ${e}`})),[J]),me=useMemo(()=>K.map(e=>({value:e,label:pad2(e),accessibilityLabel:`${e} minutes`})),[K]),ce=useMemo(()=>Q.map(e=>({value:e,label:e})),[Q]),de=useMemo(()=>{const e=[{key:"hour",label:"Hour",items:ue,value:J[Z]??0,separator:":",testID:"time-picker-hour"},{key:"minute",label:"Minute",items:me,value:K[te]??0,gapAfter:"12h"===s?R.spacing.md:void 0,testID:"time-picker-minute"}];return"12h"===s&&e.push({key:"period",label:"Period",items:ce,value:Q[ae]??"AM",testID:"time-picker-period"}),e},[ue,me,ce,J,Z,K,te,Q,ae,s,R.spacing.md]),pe=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]),ge=!D&&i&&Number.isFinite(i.hour)&&Number.isFinite(i.minute)?(j??pe)(i):void 0,he=_jsx(Modal,{visible:C,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:E,testID:H,children:_jsx(ModalSafeArea,{onInsets:$,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,style:[B.backdrop,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:E,accessibilityLabel:"Close time picker",accessibilityRole:"button"}),_jsx(Animated.View,{style:_.reduced?{opacity:U}:void 0,children:_jsxs(Animated.View,{style:[B.sheet,{paddingBottom:Math.max(N.bottom,R.spacing.lg),transform:[{translateY:Animated.add(L,z)}]},c,d],onLayout:e=>{F.current=e.nativeEvent.layout.height},accessibilityViewIsModal:!0,accessible:!0,accessibilityRole:"none",accessibilityLabel:n,children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:B.handle}),_jsx(Text,{style:[B.title,p],accessibilityRole:"header",children:n})]})}),_jsx(View,{style:B.summaryWrap,accessibilityLiveRegion:"polite",accessibilityLabel:`Selected ${le}`,children:_jsx(Text,{style:B.summary,children:le})}),_jsx(WheelPicker,{columns:de,onChange:se,haptic:w,style:B.wheels}),_jsxs(View,{style:B.footer,children:[_jsx(Button,{title:u,haptic:!1,variant:"ghost",tone:"neutral",onPress:oe,style:[B.footerBtn,g],accessibilityHint:"Dismiss without changes",testID:"time-picker-cancel"}),_jsx(Button,{title:l,variant:"solid",tone:"primary",haptic:!1,onPress:ne,style:[B.footerBtn,g],accessibilityHint:"Confirm selected time",testID:"time-picker-confirm"})]})]})}),_jsx(ToastHost,{})]})})});return D?he:_jsxs(_Fragment,{children:[_jsx(PickerTrigger,{label:h,placeholder:f,helperText:y,error:b,required:x,disabled:v,size:M,variant:k,clearable:A,onClear:S,value:ge,onPress:()=>V(!0),triggerStyle:T,testID:m}),he]})},buildStyles=e=>{const t=e.shadows.xl;return StyleSheet.create({backdrop:{flex:1,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{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,PanResponder,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,PanResponder,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_SWIPE_DISMISS_THRESHOLD=80,DEFAULT_SWIPE_VELOCITY_THRESHOLD=.5,DEFAULT_STACK_OFFSET=8,DEFAULT_STACK_SCALE_STEP=.04,DEFAULT_AUTO_DISMISS_MS=3e3,WEB_ACTION_MIN_DURATION_MS=8e3,COUNTDOWN_BAR_HEIGHT=3,ACTION_HIT_SLOP={top:8,bottom:8,left:8,right:8},DISMISS_ACTIONS=[{name:"dismiss",label:"Dismiss"}],Toast=({toast:e,index:t,onDismiss:n,shownAt:i,runtime:r})=>{const a=useTheme(),s=usePresenceMotion(),o=s.duration("fast"),l=e.variant??"default",c=e.position??"bottom",u=useMemo(()=>buildStyles(a),[a]),d=useMemo(()=>tintFor(a,l),[a,l]),m=useMemo(()=>inkFor(a,l),[a,l]),p=a.components.toast,g=p?.iconCircleSize??28,h=p?.iconCircleBorderRadius??14,f=p?.iconGlyphFontSize??16,b=p?.tintBarWidth??0,S=p?.swipeDismissThreshold??80,A=p?.swipeVelocityThreshold??.5,v=p?.stackOffset??8,y=p?.stackScaleStep??.04,x=p?.stackMinScale??.9,w=p?.defaultDurationMs??3e3,T=p?.enableSwipeDismiss??!0,M=p?.enterSpringDamping??18,D=p?.enterSpringStiffness??180,_=p?.enterSpringMass??1,V="top"===c?-120:120,C=useRef(createAnimatedValue(s.reduced?0:V)).current,R=useRef(createAnimatedValue(0)).current,E=useRef(createAnimatedValue(0)).current,N=useRef(!1),I="top"===c?t*v:-t*v,k=Math.max(1-t*y,x),P=useRef(createAnimatedValue(I)).current;useEffect(()=>{setNativeValue(P,I)},[I,P]);const j=useMemo(()=>Animated.add(C,P),[C,P]),O=void 0!==e.action,L=e.duration??w,F=L>0&&O&&"web"===Platform.OS?Math.max(L,8e3):L,B=F<=0||O&&!0===r?.screenReaderOn,H=!0===e.countdown&&!B,z=useRef(createAnimatedValue(1)).current,U=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),G=useRef({touch:!1,pan:!1,hover:!1}),W=useRef(()=>{}),$=useRef({id:e.id,totalMs:F,shownAt:i,runtime:r,persistent:B,animateBar:!1});$.current={id:e.id,totalMs:F,shownAt:i,runtime:r,persistent:B,animateBar:H&&!s.reduced};const K=useCallback(()=>{const e=U.current,t=$.current,n=G.current;if(!e.initialised){e.initialised=!0;const n=t.runtime?.readRemaining(t.id),i=void 0===t.shownAt?0:Date.now()-t.shownAt;e.remaining=n??(t.totalMs>0?Math.max(t.totalMs-i,0):0),t.totalMs>0&&e.remaining<t.totalMs&&setNativeValue(z,e.remaining/t.totalMs)}const i=!(t.persistent||N.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,W.current()},e.remaining),t.animateBar&&Animated.timing(z,{toValue:0,duration:e.remaining,easing:Easing.linear,useNativeDriver:!0}).start()):i||null===e.timer||(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0),z.stopAnimation())},[z]),dismiss=()=>{if(N.current)return;N.current=!0,K();const t=[Animated.timing(E,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.easing.accelerate),useNativeDriver:!0})];s.reduced||t.push(Animated.timing(C,{toValue:V,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.easing.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};W.current=dismiss,useEffect(()=>{const e=s.reduced?Animated.timing(E,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(C,{toValue:0,damping:M,stiffness:D,mass:_,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{K()},[B,K]),useEffect(()=>()=>{const e=U.current,t=$.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),z.stopAnimation(),e.initialised&&t.totalMs>0&&!N.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[z]);const X=useCallback((e,t)=>{G.current[e]=t,K()},[K]),Y=useCallback(()=>X("touch",!0),[X]),q=useCallback(e=>X("touch",(e.nativeEvent.touches?.length??0)>0),[X]),J=useCallback(()=>X("hover",!0),[X]),Q=useCallback(()=>X("hover",!1),[X]),Z=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>X("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(R,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(E,n)},onPanResponderTerminate:()=>{if(X("pan",!1),s.reduced)return setNativeValue(R,0),void Animated.timing(E,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(R,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(E,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>S||Math.abs(i.vx)>A){const t=i.dx>=0?1:-1;N.current=!0,X("pan",!1);const r=[Animated.timing(E,{toValue:0,duration:o,useNativeDriver:!0})];s.reduced||r.push(Animated.timing(R,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(r).start(()=>n(e.id))}else X("pan",!1),s.reduced?(setNativeValue(R,0),Animated.timing(E,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(R,{toValue:0,useNativeDriver:!0}),Animated.spring(E,{toValue:1,useNativeDriver:!0})]).start()}}),[R,E,X,S,A,o,s.reduced,a.motion.duration.fast,a.motion.spring.snappy.damping,a.motion.spring.snappy.stiffness,a.motion.spring.snappy.mass,n,e.id]),ee={accessibilityActions:DISMISS_ACTIONS,onAccessibilityAction:e=>{"dismiss"===e.nativeEvent.actionName&&dismiss()}},[te,ne]=useState(0),ie=useMemo(()=>z.interpolate({inputRange:[0,1],outputRange:[-te,0]}),[z,te]),re=e.description?`${e.message}. ${e.description}`:e.message,ae=e.action&&H?`${e.action.label}, ${Math.ceil(F/1e3)} seconds`:e.action?.label;return _jsxs(Animated.View,{...T?Z.panHandlers:{},...O?{}:{accessible:!0,...ee},..."web"===Platform.OS?{onPointerEnter:J,onPointerLeave:Q}:{},onTouchStart:Y,onTouchEnd:q,onTouchCancel:q,accessibilityLabel:re,testID:e.testID,style:[u.container,{backgroundColor:a.colors.background.elevated,borderRadius:a.radius.lg,...smoothCorners,padding:a.spacing.md,...a.shadows.md,shadowColor:a.shadows.md.shadowColor,opacity:E,transform:[{translateY:j},{translateX:R},{scale:k}]},e.style,e.containerStyle],children:[b>0?_jsx(View,{style:[u.tintBar,{width:b,backgroundColor:d}]}):null,_jsxs(View,{style:u.row,children:[(()=>{if(e.icon)return e.icon;const t=defaultGlyph(l);return t?_jsx(View,{style:[u.iconCircle,{width:g,height:g,borderRadius:h,...smoothCorners,backgroundColor:d+"22"},e.iconCircleStyle],children:_jsx(Text,{style:[u.iconGlyph,{color:m,fontSize:f}],accessible:!1,children:t})}):null})(),_jsxs(View,{style:u.textBlock,children:[_jsx(Text,{style:[u.message,{color:a.colors.text.primary,fontSize:a.typography.fontSize.base,...fontFor(a,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?_jsx(Text,{style:[u.description,{color:a.colors.text.secondary,fontSize:a.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]}),e.action?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:ae,hitSlop:ACTION_HIT_SLOP,...ee,onPress:()=>{e.action?.onPress(),dismiss()},style:({pressed:t})=>[u.actionBtn,{backgroundColor:t?a.colors.surface.pressed:"transparent"},e.actionButtonStyle],children:_jsx(Text,{style:{color:d,fontSize:a.typography.fontSize.sm,...fontFor(a,"semibold")},numberOfLines:1,children:e.action.label})}):null]}),H?_jsxs(View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",onLayout:e=>ne(e.nativeEvent.layout.width),testID:"toast-countdown",style:[u.countdownTrack,{backgroundColor:d+"22"}],children:[s.reduced?_jsx(View,{style:[u.countdownFill,{backgroundColor:d}]}):null,!s.reduced&&te>0?_jsx(Animated.View,{style:[u.countdownFill,{backgroundColor:d,transform:[{translateX:ie}]}]}):null]}):null]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"error":return e.colors.error;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors.text.primary}},inkFor=(e,t)=>{switch(t){case"success":return e.colors.toneText.success;case"error":return e.colors.toneText.error;case"warning":return e.colors.toneText.warning;case"info":return e.colors.toneText.info;default:return e.colors.text.primary}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"error":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>StyleSheet.create({container:{overflow:"hidden",marginVertical:4},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:8},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:12},iconGlyph:{fontWeight:"700",lineHeight:18},textBlock:{flex:1,paddingRight:8},message:{lineHeight:20},description:{marginTop:2,lineHeight:18},countdownTrack:{position:"absolute",left:0,right:0,bottom:0,height:3,overflow:"hidden"},countdownFill:{position:"absolute",left:0,right:0,top:0,bottom:0},actionBtn:{paddingHorizontal:10,paddingVertical:6,borderRadius:8,...smoothCorners,marginLeft:8}});export{Toast};export default Toast;
|
|
@@ -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{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(),[
|
|
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{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.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(),S=usePresenceMotion(),R=useSafeAreaInsets(),[w,x]=useModalInsets(),v=useMemo(()=>({...R,top:w.top,bottom:w.bottom}),[R,w]),E=useWindowDimensions(),P=useMemo(()=>buildStyles(A),[A]),j=A.components.tooltip,C=j?.gap??8,D=j?.screenPadding??8,L=j?.pressAutoHideMs??4e3,M=j?.arrowHalfWidth??4,H=j?.arrowHeight??6,I=j?.arrowCornerPadding??12,F=j?.lineHeight??18,W=c??(T?280:j?.maxWidth??240),O="press"===_&&!T,V=(j?.enableScaleAnimation??!1)&&!S.reduced,k=j?.exitDurationMs??150,N="manual"===_||"boolean"==typeof a,[U,B]=useState(!1),z=N?Boolean(a):U,[G,X]=useState(null),[Y,q]=useState({width:0,height:0}),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(null),ee=useRef(!1),te=useRef(!1),oe=useRef(createAnimatedValue(z||!V?1:.85)).current,re=useRef(createAnimatedValue(z?1:0)).current,se=useRef(null),ne=useRef(!1),[ie,ae]=useState(z),le=useCallback(e=>{N||B(e),l?.(e)},[N,l]),ue=useCallback(()=>{J.current&&J.current.measureInWindow((e,t,o,r)=>{X({x:e,y:t,width:o,height:r})})},[]),ce=useCallback(e=>{ue(),le(!0)},[ue,le]),me=useCallback(()=>{le(!1)},[le]),de=useRef(me);de.current=me;const fe=useCallback(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():T&&focusHost(K.current??J.current)},[T]);useEffect(()=>{if(z)return te.current=!0,ee.current=!1,claimAnchoredSurface(()=>de.current());te.current&&(te.current=!1,ee.current=!0)},[z]),useEffect(()=>{z&&ae(!0)},[z]);const pe=useRef(ie);useEffect(()=>{pe.current&&!ie&&"ios"!==Platform.OS&&fe(),pe.current=ie},[ie,fe]);const he=useCallback(()=>{$.current=n?.onPress??null,me()},[n,me]);useEffect(()=>{if(!ne.current)return ne.current=!0,z&&(ue(),O&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))),()=>{se.current&&(clearTimeout(se.current),se.current=null)};let e;if(z){ue();const t=[Animated.timing(re,{toValue:1,duration:S.duration("fast"),useNativeDriver:!0})];V?t.push(Animated.spring(oe,{toValue:1,damping:A.motion.spring.snappy.damping,stiffness:A.motion.spring.snappy.stiffness,mass:A.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(oe,1),e=Animated.parallel(t),e.start(),O&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))}else{const t=[Animated.timing(re,{toValue:0,duration:S.reduced?S.duration("fast"):k,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})];V&&t.push(Animated.timing(oe,{toValue:.85,duration:k,easing:Easing.bezier(...A.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ae(!1)}),se.current&&(clearTimeout(se.current),se.current=null)}return()=>{e?.stop(),se.current&&(clearTimeout(se.current),se.current=null)}},[z]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===Y.width&&o===Y.height||q({width:t,height:o})},ge=useMemo(()=>resolveTooltipPosition({anchor:G,size:Y,placement:i,rich:T,viewport:{width:E.width,height:E.height,insets:v},maxWidth:W,gap:C,padding:D,arrowCornerPadding:I}),[G,Y,i,T,E.width,E.height,v,W,C,D,I]),be=null!==G&&Y.width>0,ye=z&&be;useEffect(()=>{if(!T||!ye)return;const e="web"===Platform.OS?Z:Q,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[T,ye]),useEffect(()=>{!T&&ye&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[T,ye,t]);const Te=o.props,Ae=useMemo(()=>mergeRefs(Te.ref,K),[Te.ref]),Se={};"longPress"!==_||Te.contextMenu?"press"===_&&(Se.onPress=e=>{Te.onPress?.(e),ce(e)}):(Se.onLongPress=ce,Se.accessibilityHint="Long press for more info"),T&&(Se.ref=Ae);const Re=React.cloneElement(o,Se),we=d??("string"==typeof t?t:"Tooltip"),xe=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:M,borderRightWidth:M,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-M,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-M}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-M,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-M,transform:[{rotate:"-90deg"}]}},[m,ge,A,T,M,H]),ve={position:"absolute",top:ge.top,left:ge.left,maxWidth:W,opacity:z&&!be?0:re,transform:[{scale:oe}]},Ee=xe?_jsx(View,{style:[xe,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:J,collapsable:!1,onLayout:ue,testID:y,children:Re}),_jsx(Modal,{visible:ie,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:me,onDismiss:fe,children:_jsxs(ModalSafeArea,{onInsets:x,children:[T?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button"}),ie?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:he,focusRef:Q,actionRef:Z,messageStyle:g}),Ee]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button",children:ie?_jsxs(Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:we,onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(View,{style:[P.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:F},g],children:t}):t}),Ee]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_GAP=8,DEFAULT_SCREEN_PADDING=8,MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,o,
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{Button}from"../Button/index.js";import{Modal}from"../Modal/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_GAP=8,DEFAULT_SCREEN_PADDING=8,MAX_CARD_WIDTH=360,HIGHLIGHT_BORDER_WIDTH=2,measureInWindow=e=>new Promise(t=>{const i=e.current;i?i.measureInWindow((e,i,o,s)=>t({x:e,y:i,width:o,height:s})):t(null)}),isOnScreen=(e,t)=>e.width>0&&e.height>0&&e.x<t.width&&e.y<t.height&&e.x+e.width>0&&e.y+e.height>0,Tour=({tourId:e,steps:t,visible:i,onClose:o,seenStore:s,labels:n,haptic:r,testID:a})=>{const l=useTheme(),c=usePresenceMotion().duration("fast"),u=useMemo(()=>buildStyles(l),[l]),d=useWindowDimensions(),h=useRef(d);h.current=d;const p=l.components.tooltip?.gap??8,m=l.components.tooltip?.screenPadding??8,[g,x]=useState(null),[y,f]=useState(0),b=useRef(createAnimatedValue(0)).current,w=useRef(t);w.current=t;const S=useRef(o);S.current=o;const j=useRef(s);j.current=s;const k=useCallback(async(e,t)=>{for(let i=e;i>=0&&i<w.current.length;i+=t){const e=await measureInWindow(w.current[i].target);if(e&&isOnScreen(e,h.current))return{index:i,rect:e}}return null},[]);useEffect(()=>{if(!i)return void x(null);let t=!1;return(async()=>{const i=j.current;if(i&&await i.isSeen(e))return void(t||S.current("alreadySeen"));const o=await k(0,1);t||(o?(f(o.index),x(o)):S.current("noTargets"))})(),()=>{t=!0}},[i,e,k]),useEffect(()=>{if(!g)return;const e=w.current[g.index],t=`Step ${g.index+1} of ${w.current.length}`;AccessibilityInfo.announceForAccessibility([t,e.title,e.description].filter(Boolean).join(". ")),b.setValue(0);const i=Animated.timing(b,{toValue:1,duration:c,useNativeDriver:!0});return i.start(),()=>i.stop()},[g,b,c]);const _=useCallback(async t=>{x(null),await(j.current?.markSeen(e)),S.current(t)},[e]),C=useCallback(async()=>{if(!g)return;const e=await k(g.index+1,1);e?x(e):await _("finished")},[g,k,_]),v=useCallback(async()=>{if(!g)return;const e=await k(g.index-1,-1);e&&x(e)},[g,k]),D=useCallback(()=>{_("skipped")},[_]),I=g?t[g.index]:void 0,T=!!g&&g.index===t.length-1,M=l.spacing.xs,R=g?{x:g.rect.x-M,y:g.rect.y-M,width:g.rect.width+2*M,height:g.rect.height+2*M}:null,A=Math.min(d.width-2*m,360),V=R?(()=>{const e=R.x+R.width/2,t=Math.max(m,Math.min(e-A/2,d.width-A-m)),i=R.y,o=d.height-(R.y+R.height);return o>=i?{left:t,top:R.y+R.height+p,maxHeight:Math.max(o-p-m,0)}:{left:t,bottom:d.height-R.y+p,maxHeight:Math.max(i-p-m,0)}})():null,P=l.colors.background.overlay;return _jsx(Modal,{visible:null!==g,onRequestClose:D,presentation:"fullScreen",backdropPressClose:!1,backdropStyle:u.transparent,contentStyle:u.transparent,accessibilityLabel:I?.title??I?.description,haptic:r,testID:a,children:R&&V&&I?_jsxs(View,{style:StyleSheet.absoluteFill,children:[_jsx(View,{style:[u.dim,{backgroundColor:P,top:0,left:0,right:0,height:Math.max(R.y,0)}]}),_jsx(View,{style:[u.dim,{backgroundColor:P,top:R.y+R.height,left:0,right:0,bottom:0}]}),_jsx(View,{style:[u.dim,{backgroundColor:P,top:R.y,left:0,width:Math.max(R.x,0),height:R.height}]}),_jsx(View,{style:[u.dim,{backgroundColor:P,top:R.y,left:R.x+R.width,right:0,height:R.height}]}),_jsx(View,{pointerEvents:"none",style:[u.highlight,{top:R.y,left:R.x,width:R.width,height:R.height}]}),_jsxs(Animated.View,{accessibilityLiveRegion:"polite",style:[u.card,V,{width:A,opacity:b}],testID:a?`${a}-card`:void 0,children:[_jsx(Text,{style:u.position,children:`Step ${(g?.index??0)+1} of ${t.length}`}),I.title?_jsx(Text,{style:u.title,accessibilityRole:"header",children:I.title}):null,_jsx(Text,{style:u.description,children:I.description}),_jsxs(View,{style:u.actions,children:[_jsx(Button,{title:n?.skip??"Skip",variant:"ghost",size:"sm",haptic:r,onPress:D,testID:a?`${a}-skip`:void 0}),_jsxs(View,{style:u.navigation,children:[g&&g.index>y?_jsx(Button,{title:n?.back??"Back",variant:"outline",size:"sm",haptic:r,onPress:()=>{v()},testID:a?`${a}-back`:void 0}):null,_jsx(Button,{title:T?n?.done??"Done":n?.next??"Next",size:"sm",haptic:r,onPress:()=>{C()},testID:a?`${a}-next`:void 0})]})]})]})]}):null})};Tour.displayName="Tour";const buildStyles=e=>StyleSheet.create({transparent:{backgroundColor:"transparent"},dim:{position:"absolute"},highlight:{position:"absolute",borderWidth:2,borderColor:e.colors.primary,borderRadius:e.radius.md,...smoothCorners},card:{position:"absolute",backgroundColor:e.colors.background.elevated,borderRadius:e.radius.lg,...smoothCorners,padding:e.spacing.lg,gap:e.spacing.sm,...e.shadows.lg},position:{color:e.colors.text.tertiary,fontSize:e.typography.fontSize.xs},title:{color:e.colors.text.primary,fontSize:e.typography.fontSize.lg,fontWeight:e.typography.fontWeight.semibold},description:{color:e.colors.text.secondary,fontSize:e.typography.fontSize.sm},actions:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:e.spacing.xs},navigation:{flexDirection:"row",gap:e.spacing.sm}});export{Tour};export default Tour;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{memo,useCallback,useEffect,useMemo,useRef}from"react";import{Animated,Platform,Pressable,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,setNativeValue}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const WHEEL_VISIBLE_ITEMS=5;export const WHEEL_CENTER_OFFSET=Math.floor(2.5);const HAPTIC_DEBOUNCE_MS=35,WEB_SETTLE_MS=120,SCALE_STOPS=[-2,-1,0,1,2],WheelRow=memo(({label:e,index:t,scrollY:n,itemHeight:a,selected:
|
|
1
|
+
"use strict";import{memo,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Platform,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{createAnimatedValue,setNativeValue}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const WHEEL_VISIBLE_ITEMS=5;export const WHEEL_CENTER_OFFSET=Math.floor(2.5);const HAPTIC_DEBOUNCE_MS=35,WEB_SETTLE_MS=120,SCALE_STOPS=[-2,-1,0,1,2],WheelRow=memo(({label:e,index:t,scrollY:n,itemHeight:a,selected:r,theme:i,reducedMotion:s,onPress:l,editor:o})=>{const{opacity:c,scale:u}=useMemo(()=>{const e=Animated.subtract(Animated.divide(n,a),t);return{opacity:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.3,.6,1,.6,.3],extrapolate:"clamp"}),scale:e.interpolate({inputRange:SCALE_STOPS,outputRange:[.85,.95,1.05,.95,.85],extrapolate:"clamp"})}},[n,a,t]),m=_jsx(Text,{numberOfLines:1,maxFontSizeMultiplier:1.5,style:{fontSize:i.typography.fontSize.xl,color:r?i.colors.text.primary:i.colors.text.secondary,fontWeight:r?i.typography.fontWeight.semibold:i.typography.fontWeight.medium,letterSpacing:i.typography.letterSpacing.normal},children:e});return _jsx(Animated.View,{style:[styles.row,{height:a},s?{opacity:c}:{opacity:c,transform:[{scale:u}]}],accessible:!1,importantForAccessibility:"no",children:o??(l?_jsx(Pressable,{focusable:!1,accessible:!1,onPress:()=>l(t),style:styles.rowPress,children:m}):m)})});export const Wheel=({label:e,items:t,selectedIndex:n,onIndexChange:a,itemHeight:r,width:i,theme:s,haptic:l,disabled:o,reducedMotion:c,typeable:u,testID:m})=>{const d="web"===Platform.OS,[f,y]=useState(null),p=useRef(!1),b=useRef(null),h=useRef(createAnimatedValue(n*r)).current,x=useRef(n*r),g=useRef(n*r),S=useRef(n),E=useRef(0),v=useRef(null),T=useRef(()=>{}),M=s.components.timePicker?.hapticDebounceMs??35,w=t.length-1;useEffect(()=>{S.current=n;const e=n*r;if(g.current===e)return;if(g.current=e,Math.abs(x.current-e)<1)return;x.current=e,d||setNativeValue(h,e);const t=requestAnimationFrame(()=>{b.current?.scrollToOffset({offset:e,animated:!1})});return()=>cancelAnimationFrame(t)},[n,r,h,d]),useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const A=useCallback((e,r)=>{if(!(e===n||e<0||e>w)){if("accessibility"===r){const e=resolveHaptic(l,"denseTick");e&&triggerHaptic(e)}if("keyboard"!==r){const n=t[e];n&&announce(n.accessibilityLabel??n.label)}a(e)}},[n,w,t,l,a]),_=useCallback(()=>{!o&&u&&(p.current=!0,y(String(t[n]?.value??"")))},[o,u,t,n]),C=useCallback(e=>{if(!p.current)return;p.current=!1,y(null);const n=e.trim();if(!/^\d+$/.test(n))return;const a=Number(n),r=t.findIndex(e=>e.value===a);r>=0&&A(r,"keyboard")},[t,A]);T.current=()=>{v.current=null;const e=Math.max(0,Math.min(w,Math.round(x.current/r))),t=e*r;Math.abs(x.current-t)>=1&&b.current?.scrollToOffset({offset:t,animated:!c}),A(e,"scroll")};const R=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:h}}}],{useNativeDriver:!d,listener:e=>{const t=e.nativeEvent.contentOffset.y;x.current=t;const n=Math.round(t/r);if(n!==S.current&&n>=0&&n<=w){const e=Date.now();if(e-E.current>=M){const t=resolveHaptic(l,"denseTick");t&&triggerHaptic(t),E.current=e}S.current=n}d&&(v.current&&clearTimeout(v.current),v.current=setTimeout(()=>T.current(),120))}}),[h,r,w,l,M,d]),j=useCallback(e=>{const t=e.nativeEvent.contentOffset.y;A(Math.max(0,Math.min(w,Math.round(t/r))),"scroll")},[A,w,r]),k=useCallback(e=>{if(o)return;const t=e.nativeEvent.actionName;"increment"===t?A(Math.min(w,n+1),"accessibility"):"decrement"===t&&A(Math.max(0,n-1),"accessibility")},[o,A,w,n]),I=useCallback(e=>{o||b.current?.scrollToOffset({offset:e*r,animated:!c})},[o,r,c]),L=useCallback(({item:t,index:a})=>{const i=a===n,l=i&&null!==f;return _jsx(WheelRow,{label:t.label,index:a,scrollY:h,itemHeight:r,selected:i,theme:s,reducedMotion:c,onPress:i&&u?_:d?I:void 0,editor:l?_jsx(TextInput,{autoFocus:!0,selectTextOnFocus:!0,keyboardType:"number-pad",returnKeyType:"done",accessibilityLabel:e,value:f,onChangeText:y,onSubmitEditing:()=>C(f),onBlur:()=>C(f),style:{width:"100%",padding:0,textAlign:"center",fontSize:s.typography.fontSize.xl,color:s.colors.text.primary,fontWeight:s.typography.fontWeight.semibold,letterSpacing:s.typography.letterSpacing.normal}}):void 0})},[h,r,n,s,c,d,I,u,_,f,C,e]),P=useCallback((e,t)=>`${String(e.value)}-${t}`,[]),F=useCallback((e,t)=>({length:r,offset:r*t,index:t}),[r]),O=t[n]?t[n].accessibilityLabel??t[n].label:"",H=d?{focusable:!0,role:"spinbutton","aria-label":e,"aria-valuetext":O,"aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":w,"aria-disabled":o,onKeyDown:e=>{if(o)return;const t={ArrowDown:Math.min(w,n+1),PageDown:Math.min(w,n+1),ArrowUp:Math.max(0,n-1),PageUp:Math.max(0,n-1),Home:0,End:w}[e.key];void 0!==t&&(e.preventDefault?.(),A(t,"keyboard"))}}:void 0;return _jsxs(View,{style:[void 0===i?styles.columnFlex:{width:i},{height:5*r},styles.column,o?styles.disabled:null],testID:m,...H,children:[d?null:_jsx(View,{pointerEvents:"none",style:styles.a11yLayer,accessible:!0,accessibilityRole:"adjustable",accessibilityLabel:e,accessibilityValue:{text:O},accessibilityState:{disabled:Boolean(o)},"aria-disabled":Boolean(o),accessibilityActions:[{name:"increment"},{name:"decrement"}],onAccessibilityAction:k}),_jsx(Animated.FlatList,{ref:b,data:t,keyExtractor:P,renderItem:L,getItemLayout:F,showsVerticalScrollIndicator:!1,snapToInterval:r,snapToAlignment:"start",decelerationRate:"fast",bounces:!1,scrollEnabled:!o,nestedScrollEnabled:!0,scrollEventThrottle:16,onScroll:R,onMomentumScrollEnd:j,contentContainerStyle:{paddingVertical:r*WHEEL_CENTER_OFFSET},initialScrollIndex:n,style:[styles.list,{height:5*r}],importantForAccessibility:"no-hide-descendants","aria-hidden":!0})]})};const styles=StyleSheet.create({column:{overflow:"hidden"},columnFlex:{flex:1},disabled:{opacity:.5},list:{flexGrow:0},row:{alignItems:"center",justifyContent:"center"},rowPress:{alignItems:"center",justifyContent:"center",alignSelf:"stretch",flex:1},a11yLayer:{...StyleSheet.absoluteFill,zIndex:2}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{Fragment,useCallback,useMemo}from"react";import{StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{WHEEL_CENTER_OFFSET,WHEEL_VISIBLE_ITEMS,Wheel}from"./Wheel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const BASE_ITEM_HEIGHT=40,MAX_FONT_SCALE=1.5,DEFAULT_COLUMN_WIDTH=64,MAX_DURATION_MINUTES=1439,range=(e,t,i=1)=>{const o=[];for(let
|
|
1
|
+
"use strict";import{Fragment,useCallback,useMemo}from"react";import{StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{Chip}from"../Chip/index.js";import{WHEEL_CENTER_OFFSET,WHEEL_VISIBLE_ITEMS,Wheel}from"./Wheel.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const BASE_ITEM_HEIGHT=40,MAX_FONT_SCALE=1.5,DEFAULT_COLUMN_WIDTH=64,MAX_DURATION_MINUTES=1439,range=(e,t,i=1)=>{const o=[];for(let s=e;s<=t;s+=i)o.push(s);return o},plural=(e,t,i)=>`${e} ${1===e?t:i}`,formatPreset=(e,t,i)=>{const o=Math.floor(e/60),s=e%60;return 0===o?`${s} ${i}`:0===s?`${o} ${t}`:`${o} ${t} ${s} ${i}`},toItem=e=>"object"==typeof e?e:{value:e,label:String(e)},WheelPicker=e=>{const{haptic:t,disabled:i,testID:o,style:s}=e,n=useTheme(),r=useReducedMotion(),{fontScale:a}=useWindowDimensions(),l=Math.min(Math.max(a,1),1.5),u=Math.round(40*l),m=useMemo(()=>buildStyles(n,u),[n,u]),d="list"===e.mode?e.items:void 0,h=useMemo(()=>d?.map(toItem),[d]),c="duration"===e.mode?e.minuteStep??1:1,p="duration"===e.mode?Math.max(0,Math.min(1439,Math.floor(e.maxMinutes??1/0))):0,f=Math.floor(p/60),b="duration"===e.mode?e.labels:void 0,x=b?.hours??"Hours",g=b?.minutes??"Minutes",y=b?.hourUnit??"hr",M=b?.minuteUnit??"min",_="duration"===e.mode?e.presets:void 0;for(const e of _??[])if(!Number.isInteger(e)||e<0||e>p||e%c!==0)throw new Error(`WheelPicker preset ${e} must be a whole number of minutes from 0 to ${p} in steps of ${c}.`);const S=useCallback(e=>{const t=e===f?p%60:59;return Math.floor(t/c)*c},[f,p,c]),E="duration"===e.mode?e.value:0,j=useMemo(()=>{const e=Number.isFinite(E)?E:0,t=Math.max(0,Math.min(p,e)),i=Math.floor(t/60),o=Math.round(t%60/c)*c;return{hour:i,minute:Math.min(S(i),o)}},[E,p,c,S]),w=useMemo(()=>"duration"===e.mode?range(0,f).map(e=>({value:e,label:String(e),accessibilityLabel:plural(e,"hour","hours")})):[],[e.mode,f]),I=S(j.hour),v=useMemo(()=>"duration"===e.mode?range(0,I,c).map(e=>({value:e,label:String(e).padStart(2,"0"),accessibilityLabel:plural(e,"minute","minutes")})):[],[e.mode,I,c]),W=useMemo(()=>"list"===e.mode?[{key:"list",label:e.label??"Value",items:h??[],value:e.value??"",width:e.width}]:"duration"===e.mode?[{key:"hours",label:x,items:w,value:j.hour,unit:y,gapAfter:n.spacing.md},{key:"minutes",label:g,items:v,value:j.minute,unit:M}]:e.columns,[e,h,w,v,j,x,g,y,M,n.spacing.md]),{onChange:T}=e,C=useCallback((t,i)=>{const o=t.items[i];if(o&&T)if("list"===e.mode)T(o.value);else if("duration"===e.mode){const e=Number(o.value),i=T;"hours"===t.key?i(60*e+Math.min(j.minute,S(e))):i(60*j.hour+e)}else T(t.key,o.value)},[T,e.mode,j,S]),k=useCallback(e=>{T?.(e)},[T]),L=60*j.hour+j.minute,F=_jsxs(View,{style:[m.wheels,s],testID:o,children:[_jsxs(View,{pointerEvents:"none",style:m.selectionBand,children:[_jsx(View,{style:m.bandLine}),_jsx(View,{style:m.bandLine})]}),W.map(o=>{if(0===o.items.length)return null;const s=o.items.findIndex(e=>e.value===o.value);return _jsxs(Fragment,{children:[_jsx(Wheel,{label:o.label,items:o.items,selectedIndex:Math.max(0,s),onIndexChange:e=>C(o,e),itemHeight:u,width:o.width??("list"===e.mode?void 0:64),theme:n,haptic:t,disabled:i,reducedMotion:r,typeable:"duration"===e.mode,testID:o.testID}),o.unit?_jsx(Text,{style:m.unit,maxFontSizeMultiplier:1.5,numberOfLines:1,accessible:!1,importantForAccessibility:"no","aria-hidden":!0,children:o.unit}):null,o.separator?_jsx(Text,{style:m.separator,maxFontSizeMultiplier:1.5,accessible:!1,importantForAccessibility:"no","aria-hidden":!0,children:o.separator}):null,o.gapAfter?_jsx(View,{style:{width:o.gapAfter}}):null]},o.key)})]});return _&&0!==_.length?_jsxs(View,{children:[F,_jsx(View,{style:m.presets,children:_.map(e=>_jsx(Chip,{label:formatPreset(e,y,M),size:"sm",selected:e===L,disabled:i,onPress:()=>k(e)},e))})]}):F},buildStyles=(e,t)=>StyleSheet.create({wheels:{flexDirection:"row",alignItems:"center",justifyContent:"center",height:t*WHEEL_VISIBLE_ITEMS,position:"relative"},selectionBand:{position:"absolute",left:0,right:0,top:t*WHEEL_CENTER_OFFSET,height:t,justifyContent:"space-between"},bandLine:{height:2*StyleSheet.hairlineWidth,backgroundColor:e.colors.primary,opacity:.85},separator:{fontSize:e.typography.fontSize["2xl"],fontWeight:e.typography.fontWeight.bold,color:e.colors.text.primary,paddingHorizontal:e.spacing.xs},unit:{fontSize:e.typography.fontSize.base,fontWeight:e.typography.fontWeight.semibold,color:e.colors.text.secondary,paddingLeft:e.spacing.xs},presets:{flexDirection:"row",flexWrap:"wrap",justifyContent:"center",gap:e.spacing.xs,paddingTop:e.spacing.sm}});export{WheelPicker};export default WheelPicker;
|