@webority/mobile-ui 0.98.0 → 0.100.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas-kit/kit.js +6169 -6148
- package/dist/canvas-kit/manifest.json +2 -2
- package/dist/canvas-kit/release.json +6 -6
- package/lib/commonjs/components/Banner/Banner.js +1 -1
- package/lib/commonjs/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/commonjs/components/Card/Card.js +1 -1
- package/lib/commonjs/components/DatePicker/DatePicker.js +1 -1
- package/lib/commonjs/components/FieldBase/FieldBase.js +1 -1
- package/lib/commonjs/components/FilePicker/FilePicker.js +1 -1
- package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +1 -1
- package/lib/commonjs/components/ListItem/ListItem.js +1 -1
- package/lib/commonjs/components/MessageList/MessageList.js +1 -1
- package/lib/commonjs/components/Modal/Modal.js +1 -1
- package/lib/commonjs/components/OTPInput/OTPInput.js +1 -1
- package/lib/commonjs/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/commonjs/components/Swipeable/Swipeable.js +1 -1
- package/lib/commonjs/components/Toast/Toast.js +1 -1
- package/lib/commonjs/form/path.js +1 -1
- package/lib/commonjs/utils/announce.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/Card/Card.js +1 -1
- package/lib/module/components/DatePicker/DatePicker.js +1 -1
- package/lib/module/components/FieldBase/FieldBase.js +1 -1
- package/lib/module/components/FilePicker/FilePicker.js +1 -1
- package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js +1 -1
- package/lib/module/components/ListItem/ListItem.js +1 -1
- package/lib/module/components/MessageList/MessageList.js +1 -1
- package/lib/module/components/Modal/Modal.js +1 -1
- package/lib/module/components/OTPInput/OTPInput.js +1 -1
- package/lib/module/components/OptionSheet/OptionSheet.js +1 -1
- package/lib/module/components/Swipeable/Swipeable.js +1 -1
- package/lib/module/components/Toast/Toast.js +1 -1
- package/lib/module/form/path.js +1 -1
- package/lib/module/utils/announce.js +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{hasFieldText}from"../FieldBase/index.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,s=0;for(;r>=1024&&s<t.length-1;)r/=1024,s+=1;return`${r>=10||0===s?Math.round(r):Math.round(10*r)/10} ${t[s]}`};export const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,t)=>{const{files:r,defaultFiles:s,onChange:i,sources:o,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:h,renderTrigger:g,disabled:m=!1,helperText:p,error:x,labels:b,haptic:f,onPick:y,onRemove:T,onError:S,onFilePress:j,onRetry:C,style:w,accessibilityLabel:F,testID:_}=e,v=useTheme(),z=useMemo(()=>buildStyles(v),[v]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),k=v.radius.md,R=v.colors.primary,[I,V]=useControllableState({value:r,defaultValue:s??[],onChange:i}),M=useRef(I);M.current=I;const O=useCallback(e=>{M.current=e,V(e)},[V]),[B,L]=useState(null),[H,$]=useState(!1),A=x??B??void 0,E="number"==typeof l&&I.length>=l,W=useCallback((e,t)=>{0!==e.length&&(L(e[0]),e.forEach(e=>S?.(e,t)),!1!==f&&triggerHaptic("notificationError"))},[S,f]),D=useCallback(async e=>{let t;try{t=await e.pick()}catch(e){return void W([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let s=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-M.current.length);s.length>e&&(r.push(P.errorTooMany(l)),s=s.slice(0,e))}const i=[];for(const e of s){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){r.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):i.push(e)}if(W(r),0===i.length)return;if(!d){O([...M.current,...i]),L(r.length>0?r[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void y?.(i)}const o=i.map(e=>({...e,status:"processing"}));O([...M.current,...o]);const u=[];for(const e of o)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};O(M.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){O(M.current.filter(t=>t.id!==e.id)),W([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&L(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),y?.(u)}},[l,n,a,c,d,P,W,O,y,f]),U=useCallback(e=>{if(m||E)return;const t=e?o.find(t=>t.key===e):1===o.length?o[0]:void 0;t?D(t):o.length>1&&$(!0)},[m,E,o,D]),G=useCallback(e=>{if(m)return;O(M.current.filter(t=>t.id!==e.id)),L(null);const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),T?.(e)},[m,O,T,f]),N=useCallback(()=>{O([]),L(null)},[O]);useImperativeHandle(t,()=>({open:U,clear:N}),[U,N]);const q=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,K=F??`Attachments. ${q}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Y=v.settings.icons.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return _jsxs(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:[_jsx(Text,{style:[z.tileOverlayText,{color:v.colors["on-scrim"]}],children:`${t}%`}),_jsx(View,{style:[z.tileProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.tileProgressFill,{width:`${t}%`,backgroundColor:v.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[z.doneBadge,{backgroundColor:v.colors.success}],children:_jsx(Text,{style:[z.doneBadgeText,{color:v.colors["on-success"]}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?_jsx(Image,{source:{uri:t},style:z.thumbnailImage}):_jsx(View,{style:[z.extensionTile,{backgroundColor:v.colors["bg-subtle"]}],children:_jsx(Text,{style:[z.extensionText,{color:v.colors["text-muted"],...fontFor(v,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>G(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[z.removeButton,{backgroundColor:v.colors.scrim}],children:_jsx(Text,{style:[z.removeButtonText,{color:v.colors["on-scrim"]}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[z.retryText,{color:v.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:m,remove:()=>G(e),retry:C?()=>C(e):void 0},s=h?h(r):"card"===u?(e=>{const{file:t}=e;return _jsxs(View,{style:[z.tile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return _jsxs(View,{style:[z.listRow,{borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border,backgroundColor:v.colors.bg}],children:[_jsxs(View,{style:[z.listThumb,{borderRadius:v.radius.sm,...smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:z.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[z.listName,{color:v.colors["text-body"],fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:t.name}),_jsx(Text,{numberOfLines:1,style:[z.listSubtitle,{color:"error"===t.status?v.colors["danger-text"]:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?_jsx(View,{style:[z.listProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:v.colors.primary}]})}):null]}),retryButton(t),_jsx(Pressable,{onPress:()=>G(t),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:_jsx(Text,{style:[z.listRemoveText,{color:v.colors["text-subtle"]}],children:"×"})})]})})(r);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:m||!j,accessibilityLabel:fileA11yLabel(e),children:s},e.id)},J={open:U,disabled:m||E,fileCount:I.length,atCapacity:E},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:K,accessibilityState:{disabled:m||E},"aria-disabled":m||E,style:({pressed:t})=>[z.trigger,e?z.triggerCompact:null,{borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:t?v.colors["surface-pressed"]:v.colors.bg,opacity:m||E?.55:1}],children:[_jsxs(View,{style:z.triggerRow,children:[Y?Y({size:16,color:v.colors.primary}):null,_jsx(Text,{style:[z.triggerText,{color:v.colors.primary,fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&p?_jsx(Text,{style:[z.helperText,{color:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:p}):null]}),Q=_jsx(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[z.tile,z.addTile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:e?v.colors["surface-pressed"]:"transparent",opacity:m||E?.55:1}],children:_jsx(Text,{style:[z.addTileText,{color:v.colors.primary}],children:"+"})});return _jsxs(View,{style:[z.container,w],testID:_,accessibilityLabel:K,children:["card"===u?0===I.length?g?g(J):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[z.strip,{columnGap:v.space.sm}],children:[I.map(renderOneFile),g?g(J):E||m?null:Q]}):_jsxs(View,{style:{rowGap:v.space.sm},children:[g?g(J):E?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),hasFieldText(A)?_jsx(Text,{accessibilityLiveRegion:"polite",style:[z.errorText,{color:v.colors["danger-text"],fontSize:v.text.xs.size,marginTop:v.space.xxs}],children:A}):null,_jsx(OptionSheet,{open:H,onClose:()=>$(!1),title:P.sheetTitle,options:o,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{$(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",minHeight:48,paddingVertical:e.space.md,paddingHorizontal:e.space.lg},triggerCompact:{minHeight:40,paddingVertical:e.space.sm},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:e.space.xs,textAlign:"center"},strip:{paddingVertical:e.space.xxs},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:e.text["3xl"].size,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:e.text.sm.size,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:e.text.sm.size,includeFontPadding:!1,marginBottom:e.space.xs},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:e.text.xs.size,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:e.text.sm.size,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:e.text.xl.size,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:e.space.sm,columnGap:e.space.sm},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:e.space.xxs},listProgressTrack:{height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden",marginTop:e.space.xs},listProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},listRemoveText:{fontSize:e.text["2xl"].size,includeFontPadding:!1,paddingHorizontal:e.space.xs},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{hasFieldText}from"../FieldBase/index.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,t)=>`${e} is larger than ${t} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const t=["B","KB","MB","GB"];let r=e,s=0;for(;r>=1024&&s<t.length-1;)r/=1024,s+=1;return`${r>=10||0===s?Math.round(r):Math.round(10*r)/10} ${t[s]}`};export const matchesAccept=(e,t)=>!t||0===t.length||!!e&&t.some(t=>"*/*"===t||"*"===t||(t.endsWith("/*")?e.startsWith(t.slice(0,t.length-1)):e===t));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const t=e.lastIndexOf(".");return t<=0||t===e.length-1?"FILE":e.slice(t+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,t)=>{const{files:r,defaultFiles:s,onChange:i,sources:o,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:h,renderTrigger:g,disabled:m=!1,helperText:p,error:x,labels:b,haptic:f,onPick:y,onRemove:T,onError:S,onFilePress:j,onRetry:C,style:w,accessibilityLabel:F,testID:_}=e,v=useTheme(),z=useMemo(()=>buildStyles(v),[v]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),k=v.radius.md,R=v.colors.primary,[I,V]=useControllableState({value:r,defaultValue:s??[],onChange:i}),M=useRef(I);M.current=I;const O=useCallback(e=>{M.current=e,V(e)},[V]),[B,L]=useState(null),[H,$]=useState(!1),A=x??B??void 0,E="number"==typeof l&&I.length>=l,W=useCallback((e,t)=>{0!==e.length&&(L(e[0]),e.forEach(e=>{S?.(e,t)}),!1!==f&&triggerHaptic("notificationError"))},[S,f]),D=useCallback(async e=>{let t;try{t=await e.pick()}catch(e){return void W([e instanceof Error?e.message:String(e)])}if(!t||0===t.length)return;const r=[];let s=t.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-M.current.length);s.length>e&&(r.push(P.errorTooMany(l)),s=s.slice(0,e))}const i=[];for(const e of s){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){r.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){r.push(P.errorWrongType(e.name));continue}const t=c?.(e);t?r.push(t):i.push(e)}if(W(r),0===i.length)return;if(!d){O([...M.current,...i]),L(r.length>0?r[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void y?.(i)}const o=i.map(e=>({...e,status:"processing"}));O([...M.current,...o]);const u=[];for(const e of o)try{const t=await d({...e,status:"idle"}),r={...t,id:e.id,status:t.status??"idle"};O(M.current.map(t=>t.id===e.id?r:t)),u.push(r)}catch(t){O(M.current.filter(t=>t.id!==e.id)),W([t instanceof Error?t.message:String(t)],e)}if(u.length>0){0===r.length&&L(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),y?.(u)}},[l,n,a,c,d,P,W,O,y,f]),U=useCallback(e=>{if(m||E)return;const t=e?o.find(t=>t.key===e):1===o.length?o[0]:void 0;t?D(t):o.length>1&&$(!0)},[m,E,o,D]),G=useCallback(e=>{if(m)return;O(M.current.filter(t=>t.id!==e.id)),L(null);const t=resolveHaptic(f,"selection");t&&triggerHaptic(t),T?.(e)},[m,O,T,f]),N=useCallback(()=>{O([]),L(null)},[O]);useImperativeHandle(t,()=>({open:U,clear:N}),[U,N]);const q=0===I.length?P.trigger:`${I.length} file${1===I.length?"":"s"} attached`,K=F??`Attachments. ${q}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Y=v.settings.icons.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const t=Math.round(100*(e.progress??0));return _jsxs(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:[_jsx(Text,{style:[z.tileOverlayText,{color:v.colors["on-scrim"]}],children:`${t}%`}),_jsx(View,{style:[z.tileProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.tileProgressFill,{width:`${t}%`,backgroundColor:v.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[z.doneBadge,{backgroundColor:v.colors.success}],children:_jsx(Text,{style:[z.doneBadgeText,{color:v.colors["on-success"]}],children:"✓"})}):null},renderThumbnail=e=>{const t=imageSourceOf(e);return t?_jsx(Image,{source:{uri:t},style:z.thumbnailImage}):_jsx(View,{style:[z.extensionTile,{backgroundColor:v.colors["bg-subtle"]}],children:_jsx(Text,{style:[z.extensionText,{color:v.colors["text-muted"],...fontFor(v,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>G(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[z.removeButton,{backgroundColor:v.colors.scrim}],children:_jsx(Text,{style:[z.removeButtonText,{color:v.colors["on-scrim"]}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[z.retryText,{color:v.colors.primary}],children:"↻"})}):null,renderOneFile=(e,t)=>{const r={file:e,index:t,disabled:m,remove:()=>G(e),retry:C?()=>C(e):void 0},s=h?h(r):"card"===u?(e=>{const{file:t}=e;return _jsxs(View,{style:[z.tile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border}],children:[renderThumbnail(t),renderStatusOverlay(t),"error"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:retryButton(t)}):null,removeButton(t)]})})(r):(e=>{const{file:t}=e,r=statusText(t);return _jsxs(View,{style:[z.listRow,{borderRadius:k,...smoothCorners,borderColor:"error"===t.status?v.colors.danger:v.colors.border,backgroundColor:v.colors.bg}],children:[_jsxs(View,{style:[z.listThumb,{borderRadius:v.radius.sm,...smoothCorners}],children:[renderThumbnail(t),"processing"===t.status?_jsx(View,{style:[z.tileOverlay,{backgroundColor:v.colors.scrim}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:z.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[z.listName,{color:v.colors["text-body"],fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:t.name}),_jsx(Text,{numberOfLines:1,style:[z.listSubtitle,{color:"error"===t.status?v.colors["danger-text"]:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:[formatFileSize(t.size),r].filter(Boolean).join(" · ")}),"uploading"===t.status?_jsx(View,{style:[z.listProgressTrack,{backgroundColor:v.colors.border}],children:_jsx(View,{style:[z.listProgressFill,{width:`${Math.round(100*(t.progress??0))}%`,backgroundColor:v.colors.primary}]})}):null]}),retryButton(t),_jsx(Pressable,{onPress:()=>G(t),disabled:m,hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:P.removeFile(t.name),children:_jsx(Text,{style:[z.listRemoveText,{color:v.colors["text-subtle"]}],children:"×"})})]})})(r);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:m||!j,accessibilityLabel:fileA11yLabel(e),children:s},e.id)},J={open:U,disabled:m||E,fileCount:I.length,atCapacity:E},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:K,accessibilityState:{disabled:m||E},"aria-disabled":m||E,style:({pressed:t})=>[z.trigger,e?z.triggerCompact:null,{borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:t?v.colors["surface-pressed"]:v.colors.bg,opacity:m||E?.55:1}],children:[_jsxs(View,{style:z.triggerRow,children:[Y?Y({size:16,color:v.colors.primary}):null,_jsx(Text,{style:[z.triggerText,{color:v.colors.primary,fontSize:v.text.sm.size,...fontFor(v,"medium")}],children:0===I.length?P.trigger:P.addMore})]}),!e&&p?_jsx(Text,{style:[z.helperText,{color:v.colors["text-subtle"],fontSize:v.text.xs.size}],children:p}):null]}),Q=_jsx(Pressable,{onPress:()=>U(),disabled:m||E,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[z.tile,z.addTile,{width:84,height:84,borderRadius:k,...smoothCorners,borderColor:R,backgroundColor:e?v.colors["surface-pressed"]:"transparent",opacity:m||E?.55:1}],children:_jsx(Text,{style:[z.addTileText,{color:v.colors.primary}],children:"+"})});return _jsxs(View,{style:[z.container,w],testID:_,accessibilityLabel:K,children:["card"===u?0===I.length?g?g(J):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[z.strip,{columnGap:v.space.sm}],children:[I.map(renderOneFile),g?g(J):E||m?null:Q]}):_jsxs(View,{style:{rowGap:v.space.sm},children:[g?g(J):E?null:dashedTrigger(I.length>0),I.map(renderOneFile)]}),hasFieldText(A)?_jsx(Text,{accessibilityLiveRegion:"polite",style:[z.errorText,{color:v.colors["danger-text"],fontSize:v.text.xs.size,marginTop:v.space.xxs}],children:A}):null,_jsx(OptionSheet,{open:H,onClose:()=>$(!1),title:P.sheetTitle,options:o,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{$(!1),D(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",minHeight:48,paddingVertical:e.space.md,paddingHorizontal:e.space.lg},triggerCompact:{minHeight:40,paddingVertical:e.space.sm},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:e.space.sm},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:e.space.xs,textAlign:"center"},strip:{paddingVertical:e.space.xxs},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:e.text["3xl"].size,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:e.text.sm.size,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:e.text.sm.size,includeFontPadding:!1,marginBottom:e.space.xs},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:e.text.xs.size,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:e.radius.pill,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:e.text.sm.size,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:e.text.xl.size,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:e.space.sm,columnGap:e.space.sm},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:e.space.xxs},listProgressTrack:{height:3,borderRadius:e.radius.pill,...smoothCorners,overflow:"hidden",marginTop:e.space.xs},listProgressFill:{height:"100%",borderRadius:e.radius.pill,...smoothCorners},listRemoveText:{fontSize:e.text["2xl"].size,includeFontPadding:!1,paddingHorizontal:e.space.xs},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef}from"react";import{Keyboard,Pressable,RefreshControl}from"react-native";import{KeyboardAwareScrollView as ControllerScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=forwardRef((e,r)=>{const{children:o,bottomOffset:t=24,extraKeyboardSpace:s=0,safeAreaEdges:a=["bottom"],refreshing:l=!1,onRefresh:i,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...f}=e,m=useTheme(),p=useSafeAreaInsets(),b=a.includes("bottom"),y={paddingBottom:b?p.bottom:0,...a.includes("top")?{paddingTop:p.top}:null,...a.includes("left")?{paddingLeft:p.left}:null,...a.includes("right")?{paddingRight:p.right}:null},u=c??(i?_jsx(RefreshControl,{refreshing:l,onRefresh:i,tintColor:m.colors.primary,colors:[m.colors.primary],progressBackgroundColor:m.colors.surface,titleColor:m.colors["text-muted"]}):void 0);return _jsx(ControllerScrollView,{ref:r,bottomOffset:t,extraKeyboardSpace:s-(b?p.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,y],refreshControl:u,...f,children:n?_jsx(Pressable,{accessible:!1,onPress:Keyboard.dismiss,style:tapAreaStyle,children:o}):o})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";export{KeyboardAwareScrollView};export default KeyboardAwareScrollView;
|
|
1
|
+
"use strict";import{forwardRef}from"react";import{Keyboard,Pressable,RefreshControl}from"react-native";import{KeyboardAwareScrollView as ControllerScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=forwardRef((e,r)=>{const{children:o,bottomOffset:t=24,extraKeyboardSpace:s=0,safeAreaEdges:a=["bottom"],refreshing:l=!1,onRefresh:i,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...f}=e,m=useTheme(),p=useSafeAreaInsets(),b=a.includes("bottom"),y={paddingBottom:b?p.bottom:0,...a.includes("top")?{paddingTop:p.top}:null,...a.includes("left")?{paddingLeft:p.left}:null,...a.includes("right")?{paddingRight:p.right}:null},u=c??(i?_jsx(RefreshControl,{refreshing:l,onRefresh:i,tintColor:m.colors.primary,colors:[m.colors.primary],progressBackgroundColor:m.colors.surface,titleColor:m.colors["text-muted"]}):void 0);return _jsx(ControllerScrollView,{ref:r,bottomOffset:t,extraKeyboardSpace:s-(b?p.bottom:0),disableScrollOnKeyboardHide:!0,keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,y],refreshControl:u,...f,children:n?_jsx(Pressable,{accessible:!1,onPress:Keyboard.dismiss,style:tapAreaStyle,children:o}):o})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";export{KeyboardAwareScrollView};export default KeyboardAwareScrollView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveCheckboxSize,resolveListItemSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.settings.icons.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,SelectionBox=({checked:e,disabled:t})=>{const s=useTheme(),i=resolveCheckboxSize(s,"md")["box-size"],o=Math.round(.72*i);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:i,height:i,alignItems:"center",justifyContent:"center",borderWidth:s.size.border,borderRadius:s.radius.sm,...smoothCorners,borderColor:e?s.colors.primary:s.colors.border,backgroundColor:e?s.colors.primary:t?s.colors["surface-disabled"]:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:s.colors["on-primary"],strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:s,loading:i=!1,subtitle:o,description:l,children:r,titleLines:n=1,subtitleLines:c=1,left:d,icon:a,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:x=!1,checked:p=!1,onCheckedChange:g,actions:b,onPress:f,haptic:y,selected:j=!1,disabled:S=!1,size:w="md",divider:_=!1,chevron:v=!1,leftActions:I,rightActions:L,contextMenu:k,accessibilityLabel:C,accessibilityHint:V,style:A,containerStyle:R,titleStyle:B,subtitleStyle:z,descriptionStyle:D,leftSlotStyle:F,rightSlotStyle:P,testID:T}=e,H=useTheme(),M=useMemo(()=>resolveListItemSize(H,w),[H,w]),W=stylesFor(H),{fontScale:E}=useWindowDimensions(),O=!!h&&("below"===u||"auto"===u&&E>1.2),G=useContextMenu(S?void 0:k,{haptic:y||!1,testID:T}),N=useMemo(()=>mergeRefs(t,G.hostRef),[t,G.hostRef]),Z=x||!!f,U=Z||G.enabled,q=U&&!S,{style:J,pressIn:K,pressOut:Q}=usePressAnimation({enabled:q}),X=useFlickGuard(),Y=C??("string"==typeof s?s:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=d??(void 0===a?null:_jsx(IconBadge,{icon:a,tone:m,size:BADGE_SIZE[w]})),ee=x?_jsxs(View,{style:W.selectionLead,children:[_jsx(SelectionBox,{checked:p,disabled:S}),$?_jsx(View,{style:W.selectionLeadContent,children:$}):null]}):$,te=null!=b&&!1!==b&&!(Array.isArray(b)&&0===b.length),se=_&&!te,ie=_jsxs(View,{style:[W.row,{paddingVertical:M["padding-y"],minHeight:M["min-height"],backgroundColor:j?H.colors["surface-selected"]:"transparent"},se?W.divider:null,S?W.disabled:null,R],children:[ee?_jsx(View,{style:[W.leftSlot,F],children:ee}):null,_jsxs(View,{style:W.middle,children:[null==s||isText(s)?_jsx(Text,{style:[W.title,{fontSize:M["title-text"],...fontFor(H,"medium"),color:S?H.colors["text-disabled"]:H.colors["text-body"]},B],numberOfLines:n,children:s??" "}):s,null==o||""===o?null:isText(o)?_jsx(Text,{style:[W.subtitle,{fontSize:M["subtitle-text"],color:S?H.colors["text-disabled"]:H.colors["text-muted"]},z],numberOfLines:c,children:o}):o,l?_jsx(Text,{style:[W.description,{fontSize:M["subtitle-text"],color:S?H.colors["text-disabled"]:H.colors["text-subtle"]},D],numberOfLines:2,children:l}):null,null!=r&&!1!==r?_jsx(View,{style:W.body,children:r}):null,O?_jsx(View,{style:[W.rightBelow,P],children:h}):null]}),h&&!O||v?_jsxs(View,{style:[W.rightSlot,O?null:P],children:[O?null:h,v?_jsx(View,{style:h&&!O?W.chevronWithRight:null,children:_jsx(Chevron,{color:S?H.colors["text-disabled"]:H.colors["text-subtle"]})}):null]}):null]}),oe=U?_jsx(
|
|
1
|
+
"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import Svg,{Path}from"react-native-svg";import{useFlickGuard}from"../../hooks/useFlickGuard.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,resolveCheckboxSize,resolveListItemSize,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{themeStyles}from"../../utils/themeStyles.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{Button}from"../Button/index.js";import{IconBadge}from"../IconBadge/index.js";import{useContextMenu}from"../Menu/useContextMenu.js";import{Skeleton}from"../Skeleton/index.js";import{Swipeable}from"../Swipeable/index.js";import{Fragment as _Fragment,jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const Chevron=({color:e})=>{const t=useTheme();return _jsx(_Fragment,{children:(t.settings.icons.chevronRight??defaultIcons.chevronRight)({size:20,color:e})})},BADGE_SIZE={sm:"sm",md:"md",lg:"lg"},RIGHT_BELOW_FONT_SCALE=1.2,SelectionBox=({checked:e,disabled:t})=>{const s=useTheme(),i=resolveCheckboxSize(s,"md")["box-size"],o=Math.round(.72*i);return _jsx(View,{accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",pointerEvents:"none",style:{width:i,height:i,alignItems:"center",justifyContent:"center",borderWidth:s.size.border,borderRadius:s.radius.sm,...smoothCorners,borderColor:e?s.colors.primary:s.colors.border,backgroundColor:e?s.colors.primary:t?s.colors["surface-disabled"]:"transparent"},children:e?_jsx(Svg,{width:o,height:o,viewBox:"0 0 24 24",children:_jsx(Path,{d:"M5 12.5l4.5 4.5L19 7.5",stroke:s.colors["on-primary"],strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}):null})},isActionList=e=>Array.isArray(e)&&e.length>0&&e.every(e=>null!=e&&"object"==typeof e&&!React.isValidElement(e)&&"label"in e),renderActions=e=>isActionList(e)?e.map(e=>_jsx(Button,{size:"sm",variant:e.variant??"outline",tone:e.tone,leftIcon:e.icon,disabled:e.disabled,testID:e.testID,title:e.label,onPress:e.onPress},e.label)):e,ListItem=React.memo(forwardRef((e,t)=>{const{title:s,loading:i=!1,subtitle:o,description:l,children:r,titleLines:n=1,subtitleLines:c=1,left:d,icon:a,iconTone:m="primary",right:h,rightPlacement:u="auto",selectable:x=!1,checked:p=!1,onCheckedChange:g,actions:b,onPress:f,haptic:y,selected:j=!1,disabled:S=!1,size:w="md",divider:_=!1,chevron:v=!1,leftActions:I,rightActions:L,contextMenu:k,accessibilityLabel:C,accessibilityHint:V,style:A,containerStyle:R,titleStyle:B,subtitleStyle:z,descriptionStyle:D,leftSlotStyle:F,rightSlotStyle:P,testID:T}=e,H=useTheme(),M=useMemo(()=>resolveListItemSize(H,w),[H,w]),W=stylesFor(H),{fontScale:E}=useWindowDimensions(),O=!!h&&("below"===u||"auto"===u&&E>1.2),G=useContextMenu(S?void 0:k,{haptic:y||!1,testID:T}),N=useMemo(()=>mergeRefs(t,G.hostRef),[t,G.hostRef]),Z=x||!!f,U=Z||G.enabled,q=U&&!S,{style:J,pressIn:K,pressOut:Q}=usePressAnimation({enabled:q}),X=useFlickGuard(),Y=C??("string"==typeof s?s:void 0),isText=e=>"string"==typeof e||"number"==typeof e,$=d??(void 0===a?null:_jsx(IconBadge,{icon:a,tone:m,size:BADGE_SIZE[w]})),ee=x?_jsxs(View,{style:W.selectionLead,children:[_jsx(SelectionBox,{checked:p,disabled:S}),$?_jsx(View,{style:W.selectionLeadContent,children:$}):null]}):$,te=null!=b&&!1!==b&&!(Array.isArray(b)&&0===b.length),se=_&&!te,ie=_jsxs(View,{style:[W.row,{paddingVertical:M["padding-y"],minHeight:M["min-height"],backgroundColor:j?H.colors["surface-selected"]:"transparent"},se?W.divider:null,S?W.disabled:null,R],children:[ee?_jsx(View,{style:[W.leftSlot,F],children:ee}):null,_jsxs(View,{style:W.middle,children:[null==s||isText(s)?_jsx(Text,{style:[W.title,{fontSize:M["title-text"],...fontFor(H,"medium"),color:S?H.colors["text-disabled"]:H.colors["text-body"]},B],numberOfLines:n,children:s??" "}):s,null==o||""===o?null:isText(o)?_jsx(Text,{style:[W.subtitle,{fontSize:M["subtitle-text"],color:S?H.colors["text-disabled"]:H.colors["text-muted"]},z],numberOfLines:c,children:o}):o,l?_jsx(Text,{style:[W.description,{fontSize:M["subtitle-text"],color:S?H.colors["text-disabled"]:H.colors["text-subtle"]},D],numberOfLines:2,children:l}):null,null!=r&&!1!==r?_jsx(View,{style:W.body,children:r}):null,O?_jsx(View,{style:[W.rightBelow,P],children:h}):null]}),h&&!O||v?_jsxs(View,{style:[W.rightSlot,O?null:P],children:[O?null:h,v?_jsx(View,{style:h&&!O?W.chevronWithRight:null,children:_jsx(Chevron,{color:S?H.colors["text-disabled"]:H.colors["text-subtle"]})}):null]}):null]}),oe=U?_jsx(Pressable,{ref:N,onPress:e=>{q&&Z&&!X.isFlick(e)&&(y&&triggerHaptic(y),x?g?.(!p):f?.(e))},onPressIn:e=>{X.onPressIn(e),K()},onPressOut:Q,disabled:!q,accessibilityRole:x?"checkbox":f?"button":void 0,accessibilityLabel:Y,accessibilityHint:V,accessibilityState:x?{checked:p,disabled:!q}:{selected:j,disabled:!q},"aria-disabled":!q,...x?{"aria-checked":p}:{"aria-selected":j},testID:T,android_ripple:{color:H.colors["surface-pressed"],borderless:!1},style:({pressed:e})=>[A,e?W.pressed:null],...G.hostProps,children:_jsx(Animated.View,{style:J,children:ie})}):_jsx(View,{ref:t,accessibilityRole:"none",accessibilityLabel:Y,accessibilityHint:V,accessibilityState:{selected:j,disabled:S},"aria-selected":j,"aria-disabled":S,testID:T,style:A,children:ie}),le=I&&I.length>0||L&&L.length>0,re=te?_jsxs(View,{style:[j?{backgroundColor:H.colors["surface-selected"]}:null,_?W.divider:null],children:[oe,_jsx(View,{style:W.actions,children:renderActions(b)})]}):oe,ne=le?_jsx(Swipeable,{leftActions:I,rightActions:L,accessibilityLabel:Y,children:re}):re;return i?_jsx(ListItemSkeleton,{...e}):G.enabled?_jsxs(_Fragment,{children:[ne,G.renderSurface(_jsx(View,{style:W.preview,children:ie}))]}):ne}));ListItem.displayName="ListItem";const ListItemSkeleton=({subtitle:e,description:t,left:s,icon:i,right:o,chevron:l,size:r="md",containerStyle:n,style:c})=>{const d=useTheme(),a=resolveListItemSize(d,r),m=Math.round(1.15*a["title-text"]),h=Math.round(1.15*a["subtitle-text"]);return _jsxs(View,{style:[{flexDirection:"row",alignItems:"center",paddingHorizontal:d.space.md,paddingVertical:a["padding-y"],minHeight:a["min-height"]},n,c],children:[void 0!==s||void 0!==i?_jsx(View,{style:{marginRight:d.space.sm},children:_jsx(Skeleton,{shape:"circle",width:40,height:40})}):null,_jsxs(View,{style:{flex:1},children:[_jsx(Skeleton,{shape:"text",width:"70%",height:m,style:{marginBottom:d.space.xs}}),void 0!==e?_jsx(Skeleton,{shape:"text",width:"50%",height:h,style:void 0!==t?{marginBottom:d.space.xs}:void 0}):null,void 0!==t?_jsx(Skeleton,{shape:"text",width:"85%",height:h}):null]}),void 0!==o||l?_jsx(View,{style:{marginLeft:d.space.sm},children:_jsx(Skeleton,{width:20,height:20,radius:"sm"})}):null]})};ListItemSkeleton.displayName="ListItemSkeleton",ListItem.Skeleton=ListItemSkeleton;const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.space.md},divider:{borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:e.colors.border},pressed:{backgroundColor:e.colors["surface-pressed"]},disabled:{opacity:.55},leftSlot:{marginRight:e.space.md,alignItems:"center",justifyContent:"center"},middle:{flex:1,flexDirection:"column",justifyContent:"center"},selectionLead:{flexDirection:"row",alignItems:"center"},selectionLeadContent:{marginLeft:e.space.sm},body:{marginTop:e.space.xs},rightBelow:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",marginTop:e.space.xs},rightSlot:{marginLeft:e.space.md,alignItems:"center",justifyContent:"center",flexDirection:"row"},actions:{flexDirection:"row",flexWrap:"wrap",gap:e.space.sm,paddingHorizontal:e.space.md,paddingBottom:e.space.md},chevronWithRight:{marginLeft:e.space.xs},preview:{flex:1,backgroundColor:e.colors.surface,borderRadius:e.radius.md,...smoothCorners,overflow:"hidden"},title:{letterSpacing:e["letter-spacing"].normal},subtitle:{marginTop:e.space.xxs,...fontFor(e,"normal")},description:{marginTop:e.space.xxs,...fontFor(e,"normal")}}),stylesFor=themeStyles(buildStyles);export{ListItem};export default ListItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{formatDate}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{FlatList,StyleSheet,View}from"react-native";import{KeyboardChatScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Badge}from"../Badge/index.js";import{DateSeparator,dayLabel}from"../DateSeparator/index.js";import{IconButton}from"../IconButton/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_LIST_LABELS=Object.freeze({today:"Today",yesterday:"Yesterday",jumpToLatest:"Jump to the latest message",newMessages:e=>1===e?"1 new message":`${e} new messages`,unread:"New messages",loadingOlder:"Loading earlier messages"});const JUMP_AT=160,KEEP_POSITION={minIndexForVisible:0,autoscrollToTopThreshold:160},positionOf=(e,t)=>e?t?"middle":"last":t?"first":"single";export function MessageList({messages:e,keyExtractor:t,renderMessage:o,getAuthorKey:s,getDate:n,firstUnreadKey:r,onLoadOlder:a,loadingOlder:l=!1,hasOlder:i=!0,typing:d,empty:u,getAnnouncement:c,followNew:m,keyboardAware:p=!0,keyboardOffset:f,labels:g,now:y,onScroll:x,contentContainerStyle:b,style:j,testID:S,...h}){const _=useTheme(),w=useSafeAreaInsets(),L=useReducedMotion(),E=useMemo(()=>buildStyles(_),[_]),C=useMemo(()=>({...DEFAULT_MESSAGE_LIST_LABELS,...g}),[g]),v=f??w.bottom,I=useRef(null),T=useRef(!1),[k,M]=useState(!1),[O,D]=useState(0),A=useMemo(()=>{const o=n?e.map(e=>formatDate(n(e))):null,a=s?e.map(s):null,l=void 0===r?-1:e.findIndex(e=>t(e)===r);return e.map((t,s)=>{const r=s===e.length-1,i=null!==o&&(r||o[s]!==o[s+1]),d=null!==a&&!r&&a[s+1]===a[s]&&!i&&s!==l,u=null!==a&&s>0&&a[s-1]===a[s]&&(null===o||o[s-1]===o[s])&&s-1!==l;return{groupPosition:positionOf(d,u),day:i&&n?dayLabel(n(t),{now:y,labels:C}):null,unread:s===l}})},[e,n,s,r,t,y,C]),V=useCallback(()=>{I.current?.scrollToOffset({offset:0,animated:!L}),D(0)},[L]),
|
|
1
|
+
"use strict";import{formatDate}from"@webority/mobile-core";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{FlatList,StyleSheet,View}from"react-native";import{KeyboardChatScrollView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useReducedMotion}from"../../hooks/useReducedMotion.js";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{Badge}from"../Badge/index.js";import{DateSeparator,dayLabel}from"../DateSeparator/index.js";import{IconButton}from"../IconButton/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_MESSAGE_LIST_LABELS=Object.freeze({today:"Today",yesterday:"Yesterday",jumpToLatest:"Jump to the latest message",newMessages:e=>1===e?"1 new message":`${e} new messages`,unread:"New messages",loadingOlder:"Loading earlier messages"});const JUMP_AT=160,KEEP_POSITION={minIndexForVisible:0,autoscrollToTopThreshold:160},positionOf=(e,t)=>e?t?"middle":"last":t?"first":"single";export function MessageList({messages:e,keyExtractor:t,renderMessage:o,getAuthorKey:s,getDate:n,firstUnreadKey:r,onLoadOlder:a,loadingOlder:l=!1,hasOlder:i=!0,typing:d,empty:u,getAnnouncement:c,followNew:m,keyboardAware:p=!0,keyboardOffset:f,labels:g,now:y,onScroll:x,contentContainerStyle:b,style:j,testID:S,...h}){const _=useTheme(),w=useSafeAreaInsets(),L=useReducedMotion(),E=useMemo(()=>buildStyles(_),[_]),C=useMemo(()=>({...DEFAULT_MESSAGE_LIST_LABELS,...g}),[g]),v=f??w.bottom,I=useRef(null),T=useRef(!1),[k,M]=useState(!1),[O,D]=useState(0),A=useMemo(()=>{const o=n?e.map(e=>formatDate(n(e))):null,a=s?e.map(s):null,l=void 0===r?-1:e.findIndex(e=>t(e)===r);return e.map((t,s)=>{const r=s===e.length-1,i=null!==o&&(r||o[s]!==o[s+1]),d=null!==a&&!r&&a[s+1]===a[s]&&!i&&s!==l,u=null!==a&&s>0&&a[s-1]===a[s]&&(null===o||o[s-1]===o[s])&&s-1!==l;return{groupPosition:positionOf(d,u),day:i&&n?dayLabel(n(t),{now:y,labels:C}):null,unread:s===l}})},[e,n,s,r,t,y,C]),V=useCallback(()=>{I.current?.scrollToOffset({offset:0,animated:!L}),D(0)},[L]),P=e.length>0?t(e[0]):null,F=useRef(P);useEffect(()=>{const o=F.current;if(F.current=P,null===o||null===P||o===P)return;const s=e.findIndex(e=>t(e)===o);if(-1===s)return void D(0);const n=e.slice(0,s).reverse();for(const e of n){const t=c?.(e);t&&announce(t)}m&&n.some(m)?V():T.current&&D(e=>e+n.length)},[P]);const R=useCallback(e=>{const t=e.nativeEvent.contentOffset.y>160;t!==T.current&&(T.current=t,M(t),t||D(0)),x?.(e)},[x]),B=useCallback(()=>{i&&!l&&a?.()},[i,l,a]),K=useCallback(({item:e,index:t})=>{const s=A[t];return _jsxs(_Fragment,{children:[s?.day?_jsx(DateSeparator,{label:s.day}):null,s?.unread?_jsx(DateSeparator,{label:C.unread,emphasis:!0}):null,o({item:e,index:t,groupPosition:s?.groupPosition??"single"})]})},[A,C.unread,o]),z=useCallback(e=>t(e),[t]),N=useCallback(e=>_jsx(KeyboardChatScrollView,{...e,inverted:!0,offset:v}),[v]),U=O>0?`${C.newMessages(O)}. ${C.jumpToLatest}`:C.jumpToLatest;return _jsxs(View,{style:[E.root,j],children:[_jsx(FlatList,{keyboardShouldPersistTaps:"handled",maintainVisibleContentPosition:KEEP_POSITION,...h,ref:I,data:e,renderItem:K,keyExtractor:z,inverted:!0,onScroll:R,onEndReached:a?B:void 0,ListHeaderComponent:d?_jsx(View,{children:d}):null,ListFooterComponent:l?_jsx(Spinner,{size:"sm",accessibilityLabel:C.loadingOlder,style:E.older}):null,ListEmptyComponent:u?_jsx(View,{style:E.fill,children:u}):null,renderScrollComponent:p?N:void 0,contentContainerStyle:[E.content,0===e.length?E.grow:null,b],testID:S}),k?_jsxs(View,{style:E.jump,pointerEvents:"box-none",children:[_jsx(View,{style:E.jumpDisc,children:_jsx(IconButton,{icon:"arrow-down",accessibilityLabel:U,variant:"ghost",tone:"neutral",onPress:V,testID:S?`${S}-jump`:void 0})}),O>0?_jsx(View,{style:E.count,pointerEvents:"none",importantForAccessibility:"no-hide-descendants",accessibilityElementsHidden:!0,children:_jsx(Badge,{value:O,max:99,tone:"primary",size:"sm"})}):null]}):null]})}const buildStyles=e=>StyleSheet.create({root:{flex:1},content:{paddingHorizontal:e.space.md,paddingVertical:e.space.sm},grow:{flexGrow:1},fill:{flex:1},older:{paddingVertical:e.space.md},jump:{position:"absolute",right:e.space.md,bottom:e.space.md},jumpDisc:{borderRadius:e.radius.pill,...smoothCorners,backgroundColor:e.colors.surface,...e.shadow.elevated},count:{position:"absolute",top:-e.space.xs,right:-e.space.xs}});export default MessageList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Dimensions,Easing,Platform,Pressable,Modal as RNModal,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{transparentOf,withAlpha}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{squircleHostRadius}from"../../utils/squircle.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const MODAL_DISMISS_GRACE_MS=300;const SCALE_START_VALUE=.9,Modal=forwardRef((e,t)=>{const{visible:s,onRequestClose:r,presentation:i="centered",backdropOpacity:o,backdropPressClose:a=!0,animationDuration:n,animateMount:l=!0,accessibilityLabel:u,hardwareBackPress:c=!0,children:d,contentStyle:m,backdropStyle:f,restoreFocusRef:p,onDismissed:g,haptic:b,testID:h}=e,S=useTheme(),
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,Dimensions,Easing,Keyboard,Platform,Pressable,Modal as RNModal,StyleSheet,View}from"react-native";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{transparentOf,withAlpha}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{squircleHostRadius}from"../../utils/squircle.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const MODAL_DISMISS_GRACE_MS=300;const SCALE_START_VALUE=.9,Modal=forwardRef((e,t)=>{const{visible:s,onRequestClose:r,presentation:i="centered",backdropOpacity:o,backdropPressClose:a=!0,animationDuration:n,animateMount:l=!0,accessibilityLabel:u,hardwareBackPress:c=!0,children:d,contentStyle:m,backdropStyle:f,restoreFocusRef:p,onDismissed:g,haptic:b,testID:h}=e,S=useTheme(),y=usePresenceMotion(),[A,v]=useModalInsets(),x=n??y.duration("default"),M=Dimensions.get("window").height,R=useRef(!l&&s),C=R.current,V=useRef(createAnimatedValue(C?1:.9)).current,j=useRef(createAnimatedValue(C?1:0)).current,w=useRef(createAnimatedValue(C?0:M)).current,T=useRef(createAnimatedValue(C?1:0)).current,D=useRef(null),_=useRef(!1),[E,k]=useState(s),I=useMemo(()=>buildStyles(S),[S]),N=useMemo(()=>{const e=S.colors.scrim;return"number"!=typeof o?e:withAlpha(e,o)??e},[S.colors.scrim,o]),q=useMemo(()=>T.interpolate({inputRange:[0,1],outputRange:[transparentOf(N),N]}),[T,N]);useEffect(()=>{s&&(Keyboard.dismiss(),k(!0))},[s]),useEffect(()=>{const e=[];if(s&&E&&R.current)R.current=!1;else if(s&&E){const t=Animated.timing(T,{toValue:1,duration:y.duration("default"),useNativeDriver:!1});if(t.start(),e.push(t),y.reduced){j.setValue(0),w.setValue(0),V.setValue(1);const t=Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0});t.start(),e.push(t)}else if("bottom"===i){j.setValue(1);const t=Animated.spring(w,{toValue:0,damping:S.motion.spring.gentle.damping,stiffness:S.motion.spring.gentle.stiffness,mass:S.motion.spring.gentle.mass,useNativeDriver:!0});t.start(),e.push(t)}else{const t=Animated.parallel([Animated.spring(V,{toValue:1,damping:S.motion.spring.gentle.damping,stiffness:S.motion.spring.gentle.stiffness,mass:S.motion.spring.gentle.mass,useNativeDriver:!0}),Animated.timing(j,{toValue:1,duration:x,useNativeDriver:!0})]);t.start(),e.push(t)}}else if(E){const t=y.duration("fast"),s=Easing.bezier(...S.motion.ease.accelerate),r=Animated.timing(j,{toValue:0,duration:t,easing:s,useNativeDriver:!0}),o=y.reduced?r:"bottom"===i?Animated.timing(w,{toValue:M,duration:t,easing:s,useNativeDriver:!0}):Animated.parallel([Animated.timing(V,{toValue:.9,duration:t,easing:s,useNativeDriver:!0}),r]),a=Animated.parallel([o,Animated.timing(T,{toValue:0,duration:y.duration("default"),useNativeDriver:!1})]);a.start(({finished:e})=>{e&&(w.setValue(M),k(!1))}),e.push(a)}return()=>e.forEach(e=>{e.stop()})},[s,E,i,x,V,j,T,w,M,S.motion.spring.gentle.damping,S.motion.spring.gentle.stiffness,S.motion.spring.gentle.mass,y,S.motion.ease.accelerate]),useEffect(()=>{if("web"===Platform.OS)return;let e,t;return s?(e=setTimeout(()=>{D.current&&AccessibilityInfo.sendAccessibilityEvent(D.current,"focus")},150),_.current=!0):_.current&&(_.current=!1,p?.current&&(t=setTimeout(()=>{const e=p.current;e&&AccessibilityInfo.sendAccessibilityEvent(e,"focus")},x))),()=>{e&&clearTimeout(e),t&&clearTimeout(t)}},[s,x,p]);const P=useRef(!1);useEffect(()=>{if(s)return void(P.current=!0);if(!P.current)return;if(P.current=!1,!g)return;const e=setTimeout(g,300);return()=>clearTimeout(e)},[s,g]);const z=useCallback(()=>{if(!a)return;const e=resolveHaptic(b,"selection");e&&triggerHaptic(e),r()},[a,r,b]),H=useCallback(()=>{c&&r()},[c,r]),L=useSquircle("bottom"!==i&&"fullScreen"!==i,S.radius.xl),F=useMemo(()=>"fullScreen"===i?[I.fullScreenContent,{backgroundColor:S.colors.surface}]:"bottom"===i?[I.bottomContent,{backgroundColor:S.colors.surface,borderTopLeftRadius:S.radius.xl,borderTopRightRadius:S.radius.xl,...smoothCorners,paddingTop:S.space.lg,paddingHorizontal:S.space.lg,paddingBottom:S.space.lg+A.bottom},S.shadow.modal]:[I.centeredContent,{backgroundColor:S.colors.surface,borderRadius:L.active&&L.size?squircleHostRadius(L.size.width,L.size.height,S.radius.xl):S.radius.xl,...smoothCorners,padding:S.space.xl},S.shadow.modal],[i,S,I,A.bottom,L.active,L.size]),W=useMemo(()=>"bottom"===i?I.bottomWrapper:"fullScreen"===i?I.fullScreenWrapper:I.centeredWrapper,[i,I]),O=useMemo(()=>"bottom"===i?{opacity:j,transform:[{translateY:w}]}:"fullScreen"===i?{opacity:j}:{opacity:j,transform:[{scale:V}]},[i,V,j,w]);return _jsx(RNModal,{visible:E,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:H,testID:h,children:_jsx(View,{ref:e=>{D.current=e,"function"==typeof t?t(e):t&&(t.current=e)},style:I.root,accessible:!1,accessibilityViewIsModal:!0,accessibilityRole:"alert",accessibilityLabel:u,children:_jsxs(ModalSafeArea,{onInsets:v,children:[_jsxs(Animated.View,{collapsable:!1,style:[StyleSheet.absoluteFill,W,{backgroundColor:q},f],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:z,accessibilityRole:"button",accessibilityLabel:"Close modal",disabled:!a}),_jsxs(Animated.View,{style:[F,O,m],onLayout:L.onLayout,pointerEvents:"auto",needsOffscreenAlphaCompositing:!0,children:[L.active&&L.size?_jsx(SquircleFill,{width:L.size.width,height:L.size.height,radius:S.radius.xl,fill:S.colors.surface}):null,d]})]}),_jsx(ToastHost,{})]})})})});Modal.displayName="Modal";const buildStyles=e=>StyleSheet.create({root:{flex:1},centeredWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:e.space.lg},centeredContent:{maxWidth:"90%",width:"90%"},bottomWrapper:{flex:1,justifyContent:"flex-end"},bottomContent:{width:"100%"},fullScreenWrapper:{flex:1},fullScreenContent:{flex:1}});export{Modal};export default Modal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState,useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveOtpInputSize,setNativeValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldMessage,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:s,onChange:i,onComplete:r,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:p=!1,haptic:f,onFocus:g,accessibilityLabel:h,style:b,cellStyle:x,textStyle:y,testID:j}=e,[v,C]=useControllableState({value:n,defaultValue:s??"",onChange:i}),T=useTheme(),V=useMemo(()=>buildStyles(T),[T]),S=resolveOtpInputSize(T,m),k=useRef([]),[F,w]=useState(-1),E=useRef(null),A=useRef(createAnimatedValue(0)).current,I=useRef(new Map),R=useMemo(()=>{const e=I.current,t=[];for(let n=0;n<o;n+=1){let s=e.get(n);s||(s=new Animated.Value(0),e.set(n,s)),t.push(s)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),O=useRef(-1),_=T.settings.components["otp-input"]?.shakeOnError??!1,z=useReducedMotion(),M=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===E.current||!M||E.current||(f&&triggerHaptic("notificationError"),_&&!z&&(setNativeValue(A,0),e=Animated.sequence([Animated.timing(A,{toValue:1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:-1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:0,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),E.current=M,()=>e?.stop()},[M,A,_,f,z,T.motion.duration.instant]),useEffect(()=>{const e=O.current;if(O.current=F,e===F)return;if(-1===e&&-1===F)return;const t=[];return R.forEach((n,s)=>{const i=s===F?1:0;if(s!==F&&s!==e)return;const r=Animated.timing(n,{toValue:i,duration:T.motion.duration.fast,easing:Easing.bezier(...T.motion.ease["in-out"]),useNativeDriver:!0});r.start(),t.push(r)}),()=>t.forEach(e=>e.stop())},[F,R,T]);const D=useCallback(e=>{const t=k.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=k.current[F>=0?F:0];e?.blur()},clear:()=>{C(""),D(0)}}),[D,F,C]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>D(0),u);return()=>clearTimeout(e)}},[l,u,c,D]);const P=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),H=useCallback(e=>{const t=e.slice(0,o);t!==v&&(C(t),t.length===o&&r&&r(t))},[o,C,r,v]),N=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),s=sanitizeChar(n,a);if(!s){const t=P.slice(),n=(t[e]??"").length>0;if(t[e]="",H(t.join("").slice(0,o)),!n&&e>0){const t=P.slice();t[e-1]="",H(t.join("")),D(e-1)}return}const i=P[e]??"",r=i&&s.length>o&&s.startsWith(i)?s.slice(i.length):s;if(r.length>=o){const t=r.slice(0,o),n=v.length;return H(t),t.length!==n&&f&&triggerHaptic(f),void k.current[e]?.blur()}const l=P.slice();let u=e;for(let e=0;e<s.length&&u<o;e+=1)l[u]=s[e]??"",u+=1;const c=l.join("").slice(0,o),d=v.length;H(c),c.length!==d&&f&&triggerHaptic(f);const m=Math.min(u,o-1);u>=o?k.current[e]?.blur():D(m)},[P,D,a,o,f,H,v]),B=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(P[e]??"").length){if(e>0){const t=P.slice();t[e-1]="",H(t.join("")),D(e-1)}}else{const t=P.slice();t[e]="",H(t.join(""))}},[P,D,H]),W=useCallback((e,t)=>{w(e),g?.(t)},[g]),L=useCallback(()=>{w(-1)},[]),$=useCallback(()=>{if(c)return;const e=P.indexOf("");D(-1===e?o-1:e)},[P,c,D,o]),q=h??`Enter ${o}-digit code`,G=A.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:b,accessible:!0,accessibilityRole:"none",accessibilityLabel:q,accessibilityValue:{text:n},accessibilityState:{disabled:c},"aria-disabled":c,testID:j,children:[_jsx(Pressable,{onPress:$,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[V.row,{columnGap:S.gap,transform:[{translateX:G}]}],children:P.map((e,t)=>{const n=F===t,s=e.length>0,i=M?T.colors["danger-border"]:T.colors["focus-ring"],r=R[t];if(!r)return null;const l=p&&s?"●":e;return _jsxs(View,{style:V.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:S.cell,height:S.cell,borderRadius:S.radius,borderWidth:1.5,focused:n,error:M,filled:s,disabled:c,paddingHorizontal:T.space.none,paddingVertical:T.space.none,gap:T.space.none,style:x,children:[_jsx(TextInput,{ref:e=>{k.current[t]=e},value:(p&&s?"":e)||"",onChangeText:e=>N(t,e),onKeyPress:e=>B(t,e),onFocus:e=>W(t,e),onBlur:L,keyboardType:a,editable:!c,selectTextOnFocus:!0,caretHidden:s,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[V.input,{fontSize:S.text,color:T.colors["text-body"],...fontFor(T,"semibold")},y]}),p&&s?_jsx(View,{pointerEvents:"none",style:V.maskOverlay,children:_jsx(Text,{style:[{fontSize:S.text,color:T.colors["text-body"],...fontFor(T,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[V.underline,{backgroundColor:i,opacity:r}]})]},`otp-cell-${t}`)})})}),_jsx(FieldMessage,{size:m,error:!0,text:d})]})});OTPInput.displayName="OTPInput";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:e.space.none},maskOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:e.space.xs,height:2,width:"60%",borderRadius:e.radius.pill,...smoothCorners}});export{OTPInput};export default OTPInput;
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState,useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,resolveOtpInputSize,setNativeValue,useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase,FieldMessage,hasFieldText}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:s,onChange:i,onComplete:r,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:u=0,disabled:c=!1,error:d,size:m="md",secure:p=!1,haptic:f,onFocus:g,accessibilityLabel:h,style:b,cellStyle:x,textStyle:y,testID:j}=e,[v,C]=useControllableState({value:n,defaultValue:s??"",onChange:i}),T=useTheme(),V=useMemo(()=>buildStyles(T),[T]),S=resolveOtpInputSize(T,m),k=useRef([]),[F,w]=useState(-1),E=useRef(null),A=useRef(createAnimatedValue(0)).current,I=useRef(new Map),R=useMemo(()=>{const e=I.current,t=[];for(let n=0;n<o;n+=1){let s=e.get(n);s||(s=new Animated.Value(0),e.set(n,s)),t.push(s)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),O=useRef(-1),_=T.settings.components["otp-input"]?.shakeOnError??!1,z=useReducedMotion(),M=!0===d||hasFieldText(d);useEffect(()=>{let e;return null===E.current||!M||E.current||(f&&triggerHaptic("notificationError"),_&&!z&&(setNativeValue(A,0),e=Animated.sequence([Animated.timing(A,{toValue:1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:-1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:1,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(A,{toValue:0,duration:T.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),E.current=M,()=>e?.stop()},[M,A,_,f,z,T.motion.duration.instant]),useEffect(()=>{const e=O.current;if(O.current=F,e===F)return;if(-1===e&&-1===F)return;const t=[];return R.forEach((n,s)=>{const i=s===F?1:0;if(s!==F&&s!==e)return;const r=Animated.timing(n,{toValue:i,duration:T.motion.duration.fast,easing:Easing.bezier(...T.motion.ease["in-out"]),useNativeDriver:!0});r.start(),t.push(r)}),()=>t.forEach(e=>{e.stop()})},[F,R,T]);const D=useCallback(e=>{const t=k.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=k.current[F>=0?F:0];e?.blur()},clear:()=>{C(""),D(0)}}),[D,F,C]),useEffect(()=>{if(l&&!c){const e=setTimeout(()=>D(0),u);return()=>clearTimeout(e)}},[l,u,c,D]);const P=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),H=useCallback(e=>{const t=e.slice(0,o);t!==v&&(C(t),t.length===o&&r&&r(t))},[o,C,r,v]),N=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),s=sanitizeChar(n,a);if(!s){const t=P.slice(),n=(t[e]??"").length>0;if(t[e]="",H(t.join("").slice(0,o)),!n&&e>0){const t=P.slice();t[e-1]="",H(t.join("")),D(e-1)}return}const i=P[e]??"",r=i&&s.length>o&&s.startsWith(i)?s.slice(i.length):s;if(r.length>=o){const t=r.slice(0,o),n=v.length;return H(t),t.length!==n&&f&&triggerHaptic(f),void k.current[e]?.blur()}const l=P.slice();let u=e;for(let e=0;e<s.length&&u<o;e+=1)l[u]=s[e]??"",u+=1;const c=l.join("").slice(0,o),d=v.length;H(c),c.length!==d&&f&&triggerHaptic(f);const m=Math.min(u,o-1);u>=o?k.current[e]?.blur():D(m)},[P,D,a,o,f,H,v]),B=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(P[e]??"").length){if(e>0){const t=P.slice();t[e-1]="",H(t.join("")),D(e-1)}}else{const t=P.slice();t[e]="",H(t.join(""))}},[P,D,H]),W=useCallback((e,t)=>{w(e),g?.(t)},[g]),L=useCallback(()=>{w(-1)},[]),$=useCallback(()=>{if(c)return;const e=P.indexOf("");D(-1===e?o-1:e)},[P,c,D,o]),q=h??`Enter ${o}-digit code`,G=A.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:b,accessible:!0,accessibilityRole:"none",accessibilityLabel:q,accessibilityValue:{text:n},accessibilityState:{disabled:c},"aria-disabled":c,testID:j,children:[_jsx(Pressable,{onPress:$,disabled:c,accessible:!1,children:_jsx(Animated.View,{style:[V.row,{columnGap:S.gap,transform:[{translateX:G}]}],children:P.map((e,t)=>{const n=F===t,s=e.length>0,i=M?T.colors["danger-border"]:T.colors["focus-ring"],r=R[t];if(!r)return null;const l=p&&s?"●":e;return _jsxs(View,{style:V.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:S.cell,height:S.cell,borderRadius:S.radius,borderWidth:1.5,focused:n,error:M,filled:s,disabled:c,paddingHorizontal:T.space.none,paddingVertical:T.space.none,gap:T.space.none,style:x,children:[_jsx(TextInput,{ref:e=>{k.current[t]=e},value:(p&&s?"":e)||"",onChangeText:e=>N(t,e),onKeyPress:e=>B(t,e),onFocus:e=>W(t,e),onBlur:L,keyboardType:a,editable:!c,selectTextOnFocus:!0,caretHidden:s,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[V.input,{fontSize:S.text,color:T.colors["text-body"],...fontFor(T,"semibold")},y]}),p&&s?_jsx(View,{pointerEvents:"none",style:V.maskOverlay,children:_jsx(Text,{style:[{fontSize:S.text,color:T.colors["text-body"],...fontFor(T,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[V.underline,{backgroundColor:i,opacity:r}]})]},`otp-cell-${t}`)})})}),_jsx(FieldMessage,{size:m,error:!0,text:d})]})});OTPInput.displayName="OTPInput";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:e.space.none},maskOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:e.space.xs,height:2,width:"60%",borderRadius:e.radius.pill,...smoothCorners}});export{OTPInput};export default OTPInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:s,onAfterClose:o,onOpenChange:i,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:b,descriptionOf:f,iconOf:x,isSelected:y,onSelect:S,multi:j=!1,searchable:T=!1,searchSelectionColor:w,accessibilityLabel:C,optionStyle:R,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,M=useTheme(),v=usePresenceMotion(),[z,D]=useModalInsets(),A=useMemo(()=>buildStyles(M),[M]),[L,P]=useState(""),H=Dimensions.get("window").height,O=Math.round(.7*H),[E,W]=useState(t),B=useRef(createAnimatedValue(0)).current,F=useRef(createAnimatedValue(O)).current,N=useRef(createAnimatedValue(0)).current,G=useMemo(()=>v.reduced?N:Animated.add(F,N),[v.reduced,F,N]),$=useMemo(()=>v.reduced?F.interpolate({inputRange:[0,O],outputRange:[1,0],extrapolate:"clamp"}):1,[v.reduced,F,O]),{handleGesture:J,opacity:K}=useDragToDismiss({drag:N,travel:O,onDismiss:s}),U=useMemo(()=>Animated.multiply($,K),[$,K]),Y=useMemo(()=>{const e=M.colors.scrim;return B.interpolate({inputRange:[0,1],outputRange:[transparentOf(e),e]})},[B,M.colors.scrim]);useEffect(()=>{t&&W(!0)},[t]);const Z=useRef(i);Z.current=i;const q=useRef(!1);useEffect(()=>{q.current!==t&&(q.current=t,Z.current?.(t))},[t]);const Q=useRef(o);Q.current=o;const X=useRef(E);useEffect(()=>{X.current&&!E&&"ios"!==Platform.OS&&Q.current?.(),X.current=E},[E]),useEffect(()=>{if(!E)return;t&&(setNativeValue(N,0),setNativeValue(K,1));const e=t?Animated.parallel([Animated.timing(B,{toValue:1,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),v.reduced?Animated.timing(F,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!0}):Animated.spring(F,{toValue:0,damping:M.motion.spring.snappy.damping,stiffness:M.motion.spring.snappy.stiffness,mass:M.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(B,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),Animated.timing(F,{toValue:O,duration:v.duration("fast"),easing:Easing.bezier(...M.motion.ease.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,E,B,F,N,K,O,v,M.motion.ease["in-out"],M.motion.ease.accelerate,M.motion.spring.snappy]);const ee=useMemo(()=>Gesture.Native(),[]),[te,se]=useState(0),oe=useKeyboardState(e=>e.height),ie=E?Math.max(0,Math.round(oe)):0,re=Math.max(z.top,StatusBar.currentHeight??0)+M.space.sm,ne=ie>0,ae=ne?Math.max(0,Math.min(O,(te>0?te:H)-ie-re)):O;useEffect(()=>{t||P("")},[t]);const le=useMemo(()=>{const e=T?L.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(f(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,s)=>{const o=e.options.filter(matches);if(0!==o.length){t.push({kind:"header",title:e.title});for(const e of o)t.push({kind:"option",option:e,section:s})}}),t},[T,L,n,a,m,f]),ce=useCallback(()=>{s()},[s]),de=useRef(null),ue=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=le.length-1;e>=0;e-=1)if("header"===le[e].kind){t=e+1;break}for(let s=t;s<le.length;s+=1){const t=le[s];if("option"!==t.kind)continue;const o=m(t.option).trim().charAt(0).toUpperCase(),i=/^[A-Z]$/.test(o)?o:"#";e.has(i)||e.set(i,s)}return e},[d,le,a,m]),pe=d&&ue.size>0&&0===L.trim().length,me=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ue.has("#")?["#"]:[]],[ue]),he=useCallback(e=>{const t=ue.get(e);void 0!==t&&de.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ue]),ge=useRef(null),be=useCallback(()=>{null!==ge.current&&(clearTimeout(ge.current),ge.current=null)},[]),fe=useCallback(e=>{de.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),be(),ge.current=setTimeout(()=>{ge.current=null,de.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[be]);useEffect(()=>(E||be(),be),[E,be]);return _jsx(Modal,{visible:E,transparent:!0,animationType:"none",onRequestClose:ce,onDismiss:()=>Q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsx(ModalSafeArea,{onInsets:D,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,onLayout:e=>se(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ce,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:C??r??"Options",style:[A.sheet,{maxHeight:ae,bottom:ie,paddingBottom:ne?M.space.lg:z.bottom+M.space.lg,backgroundColor:M.colors.surface,borderTopLeftRadius:M.radius.xl,borderTopRightRadius:M.radius.xl,...smoothCorners,opacity:U,transform:[{translateY:G}],...M.shadow.modal}],children:[_jsx(GestureDetector,{gesture:J,children:_jsxs(View,{children:[_jsx(View,{style:A.sheetHandleRow,children:_jsx(View,{style:[A.sheetHandle,{backgroundColor:M.colors.border}]})}),r?_jsx(Text,{style:[A.sheetTitle,{color:M.colors["text-body"],fontSize:M.text.lg.size,fontWeight:M.weight.semibold,paddingHorizontal:M.space.lg,marginBottom:M.space.sm}],children:r}):null]})}),T?_jsx(View,{style:[A.searchWrap,{marginHorizontal:M.space.lg,marginBottom:M.space.sm}],children:_jsxs(View,{style:[A.searchBox,{backgroundColor:M.colors["bg-subtle"],borderColor:M.colors.border,borderRadius:M.radius.md,...smoothCorners,paddingHorizontal:M.space.md,gap:M.space.sm}],children:[(M.settings.icons.search??defaultIcons.search)({size:18,color:M.colors["text-subtle"]}),_jsx(TextInput,{value:L,onChangeText:P,placeholder:u,placeholderTextColor:M.colors["text-subtle"],selectionColor:w??M.colors["focus-ring"],accessibilityLabel:"Search options",style:[A.searchInput,{color:M.colors["text-body"],fontSize:M.text.base.size,paddingVertical:M.space.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>P(""),hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:"Clear search",children:(M.settings.icons.close??defaultIcons.close)({size:18,color:M.colors["text-muted"]})}):null]})}):null,_jsxs(View,{style:[A.listWrap,pe?A.listRow:null],children:[_jsx(GestureDetector,{gesture:ee,children:_jsx(FlatList,{ref:de,data:le,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[A.sectionHeader,{paddingHorizontal:M.space.lg,paddingTop:M.space.md}],children:l?l(e.title):_jsx(Text,{style:[A.sectionTitle,{color:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold}],children:e.title.toUpperCase()})});const t=e.option,s=m(t),o=h(t),i=f(t),r=x(t),n=y(o),a=g(t),d=b?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:M.colors["surface-pressed"],borderless:!1},accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[A.optionRow,{backgroundColor:n?M.colors["surface-selected"]:e?M.colors["surface-pressed"]:"transparent",opacity:a?.5:1,paddingHorizontal:M.space.lg,paddingVertical:M.space.md},R,n?_:null],children:[c?_jsx(View,{style:A.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:A.optionIcon,children:r}):null,_jsxs(View,{style:A.optionTextWrap,children:[_jsx(Text,{style:[A.optionLabel,{color:d?M.colors["danger-text"]:n?M.colors.primary:M.colors["text-body"],fontSize:M.text.base.size,fontWeight:n?M.weight.semibold:M.weight.medium},V,n?k:null],children:s}),i?_jsx(Text,{style:[A.optionDescription,{color:M.colors["text-subtle"],fontSize:M.text.sm.size}],numberOfLines:2,children:i}):null]})]}),j?_jsx(View,{style:[A.checkbox,{borderColor:n?M.colors.primary:M.colors.border,backgroundColor:n?M.colors.primary:"transparent"}],children:n?_jsx(View,{style:A.checkboxTick}):null}):n?"icon"===M.settings.components["option-sheet"]?.selectedMarker?_jsx(View,{style:A.singleSelectedIcon,children:(M.settings.icons.selectedTick??defaultIcons.selectedTick)({size:20,color:M.colors.primary})}):_jsx(View,{style:[A.singleSelectedDot,{backgroundColor:M.colors.primary}]}):null]})},onScrollToIndexFailed:fe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!pe,style:pe?A.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[A.empty,{color:M.colors["text-subtle"],fontSize:M.text.sm.size,paddingVertical:M.space.xl}],children:p})})}),pe?_jsx(View,{style:[A.rail,{paddingRight:M.space.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:me.map(e=>{const t=ue.has(e);return _jsx(Pressable,{onPress:()=>he(e),disabled:!t,hitSlop:{left:8,right:8},...hitSlopMarker({left:8,right:8}),accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:A.railLetter,children:_jsx(Text,{style:[A.railLetterText,{color:t?M.colors.primary:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),j?_jsx(View,{style:[A.sheetFooter,{borderTopColor:M.colors["border-subtle"],paddingHorizontal:M.space.lg,paddingVertical:M.space.md}],children:_jsx(Pressable,{onPress:ce,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[A.doneButton,{backgroundColor:e?M.colors["primary-pressed"]:M.colors.primary,borderRadius:M.radius.md,...smoothCorners,paddingVertical:M.space.sm,paddingHorizontal:M.space.lg}],children:_jsx(Text,{style:{color:M.colors["on-primary"],fontSize:M.text.base.size,fontWeight:M.weight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:e.space.lg,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:e.space.sm,paddingBottom:e.space.sm},sheetHandle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:e.space.xs},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:e.space.xs},railLetter:{paddingHorizontal:e.space.xs,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:e.space.md},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:e.space.xxs},checkbox:{width:22,height:22,borderRadius:e.radius.sm,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:e.space.md},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors["on-primary"],transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:e.radius.pill,...smoothCorners,marginLeft:e.space.md},singleSelectedIcon:{marginLeft:e.space.md},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Keyboard,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";import{useDragToDismiss}from"../../hooks/useDragToDismiss.js";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{transparentOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const AnimatedGestureRoot=Animated.createAnimatedComponent(GestureHandlerRootView),SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:s,onAfterClose:o,onOpenChange:i,title:r,options:n,sections:a,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:b,descriptionOf:f,iconOf:x,isSelected:y,onSelect:S,multi:j=!1,searchable:T=!1,searchSelectionColor:w,accessibilityLabel:C,optionStyle:R,selectedOptionStyle:_,optionTextStyle:V,selectedOptionTextStyle:k,testID:I}=e,M=useTheme(),v=usePresenceMotion(),[z,D]=useModalInsets(),A=useMemo(()=>buildStyles(M),[M]),[L,P]=useState(""),H=Dimensions.get("window").height,O=Math.round(.7*H),[E,W]=useState(t),B=useRef(createAnimatedValue(0)).current,F=useRef(createAnimatedValue(O)).current,N=useRef(createAnimatedValue(0)).current,G=useMemo(()=>v.reduced?N:Animated.add(F,N),[v.reduced,F,N]),K=useMemo(()=>v.reduced?F.interpolate({inputRange:[0,O],outputRange:[1,0],extrapolate:"clamp"}):1,[v.reduced,F,O]),{handleGesture:$,opacity:J}=useDragToDismiss({drag:N,travel:O,onDismiss:s}),U=useMemo(()=>Animated.multiply(K,J),[K,J]),Y=useMemo(()=>{const e=M.colors.scrim;return B.interpolate({inputRange:[0,1],outputRange:[transparentOf(e),e]})},[B,M.colors.scrim]);useEffect(()=>{t&&(Keyboard.dismiss(),W(!0))},[t]);const Z=useRef(i);Z.current=i;const q=useRef(!1);useEffect(()=>{q.current!==t&&(q.current=t,Z.current?.(t))},[t]);const Q=useRef(o);Q.current=o;const X=useRef(E);useEffect(()=>{X.current&&!E&&"ios"!==Platform.OS&&Q.current?.(),X.current=E},[E]),useEffect(()=>{if(!E)return;t&&(setNativeValue(N,0),setNativeValue(J,1));const e=t?Animated.parallel([Animated.timing(B,{toValue:1,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),v.reduced?Animated.timing(F,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!0}):Animated.spring(F,{toValue:0,damping:M.motion.spring.snappy.damping,stiffness:M.motion.spring.snappy.stiffness,mass:M.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(B,{toValue:0,duration:v.duration("default"),easing:Easing.bezier(...M.motion.ease["in-out"]),useNativeDriver:!1}),Animated.timing(F,{toValue:O,duration:v.duration("fast"),easing:Easing.bezier(...M.motion.ease.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&W(!1)}),()=>e.stop()},[t,E,B,F,N,J,O,v,M.motion.ease["in-out"],M.motion.ease.accelerate,M.motion.spring.snappy]);const ee=useMemo(()=>Gesture.Native(),[]),[te,se]=useState(0),oe=useKeyboardState(e=>e.height),ie=E?Math.max(0,Math.round(oe)):0,re=Math.max(z.top,StatusBar.currentHeight??0)+M.space.sm,ne=ie>0,ae=ne?Math.max(0,Math.min(O,(te>0?te:H)-ie-re)):O;useEffect(()=>{t||P("")},[t]);const le=useMemo(()=>{const e=T?L.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(f(t)??"").toLowerCase().includes(e);if(!a)return n.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return a.forEach((e,s)=>{const o=e.options.filter(matches);if(0!==o.length){t.push({kind:"header",title:e.title});for(const e of o)t.push({kind:"option",option:e,section:s})}}),t},[T,L,n,a,m,f]),ce=useCallback(()=>{s()},[s]),de=useRef(null),ue=useMemo(()=>{const e=new Map;if(!d)return e;let t=0;if(a)for(let e=le.length-1;e>=0;e-=1)if("header"===le[e].kind){t=e+1;break}for(let s=t;s<le.length;s+=1){const t=le[s];if("option"!==t.kind)continue;const o=m(t.option).trim().charAt(0).toUpperCase(),i=/^[A-Z]$/.test(o)?o:"#";e.has(i)||e.set(i,s)}return e},[d,le,a,m]),pe=d&&ue.size>0&&0===L.trim().length,me=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ue.has("#")?["#"]:[]],[ue]),he=useCallback(e=>{const t=ue.get(e);void 0!==t&&de.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ue]),ge=useRef(null),be=useCallback(()=>{null!==ge.current&&(clearTimeout(ge.current),ge.current=null)},[]),fe=useCallback(e=>{de.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),be(),ge.current=setTimeout(()=>{ge.current=null,de.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[be]);useEffect(()=>(E||be(),be),[E,be]);return _jsx(Modal,{visible:E,transparent:!0,animationType:"none",onRequestClose:ce,onDismiss:()=>Q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsx(ModalSafeArea,{onInsets:D,children:_jsxs(AnimatedGestureRoot,{collapsable:!1,onLayout:e=>se(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:Y}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ce,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:I,accessibilityViewIsModal:!0,accessibilityLabel:C??r??"Options",style:[A.sheet,{maxHeight:ae,bottom:ie,paddingBottom:ne?M.space.lg:z.bottom+M.space.lg,backgroundColor:M.colors.surface,borderTopLeftRadius:M.radius.xl,borderTopRightRadius:M.radius.xl,...smoothCorners,opacity:U,transform:[{translateY:G}],...M.shadow.modal}],children:[_jsx(GestureDetector,{gesture:$,children:_jsxs(View,{children:[_jsx(View,{style:A.sheetHandleRow,children:_jsx(View,{style:[A.sheetHandle,{backgroundColor:M.colors.border}]})}),r?_jsx(Text,{style:[A.sheetTitle,{color:M.colors["text-body"],fontSize:M.text.lg.size,fontWeight:M.weight.semibold,paddingHorizontal:M.space.lg,marginBottom:M.space.sm}],children:r}):null]})}),T?_jsx(View,{style:[A.searchWrap,{marginHorizontal:M.space.lg,marginBottom:M.space.sm}],children:_jsxs(View,{style:[A.searchBox,{backgroundColor:M.colors["bg-subtle"],borderColor:M.colors.border,borderRadius:M.radius.md,...smoothCorners,paddingHorizontal:M.space.md,gap:M.space.sm}],children:[(M.settings.icons.search??defaultIcons.search)({size:18,color:M.colors["text-subtle"]}),_jsx(TextInput,{value:L,onChangeText:P,placeholder:u,placeholderTextColor:M.colors["text-subtle"],selectionColor:w??M.colors["focus-ring"],accessibilityLabel:"Search options",style:[A.searchInput,{color:M.colors["text-body"],fontSize:M.text.base.size,paddingVertical:M.space.sm}]}),L.length>0?_jsx(Pressable,{onPress:()=>P(""),hitSlop:8,...hitSlopMarker(8),accessibilityRole:"button",accessibilityLabel:"Clear search",children:(M.settings.icons.close??defaultIcons.close)({size:18,color:M.colors["text-muted"]})}):null]})}):null,_jsxs(View,{style:[A.listWrap,pe?A.listRow:null],children:[_jsx(GestureDetector,{gesture:ee,children:_jsx(FlatList,{ref:de,data:le,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[A.sectionHeader,{paddingHorizontal:M.space.lg,paddingTop:M.space.md}],children:l?l(e.title):_jsx(Text,{style:[A.sectionTitle,{color:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold}],children:e.title.toUpperCase()})});const t=e.option,s=m(t),o=h(t),i=f(t),r=x(t),n=y(o),a=g(t),d=b?.(t)??!1;return _jsxs(Pressable,{onPress:()=>S(t),disabled:a,android_ripple:{color:M.colors["surface-pressed"],borderless:!1},accessibilityRole:"button",accessibilityLabel:s,accessibilityState:{selected:n,disabled:a},"aria-selected":n,"aria-disabled":a,style:({pressed:e})=>[A.optionRow,{backgroundColor:n?M.colors["surface-selected"]:e?M.colors["surface-pressed"]:"transparent",opacity:a?.5:1,paddingHorizontal:M.space.lg,paddingVertical:M.space.md},R,n?_:null],children:[c?_jsx(View,{style:A.optionTextWrap,children:c(t,{selected:n,disabled:a})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:A.optionIcon,children:r}):null,_jsxs(View,{style:A.optionTextWrap,children:[_jsx(Text,{style:[A.optionLabel,{color:d?M.colors["danger-text"]:n?M.colors.primary:M.colors["text-body"],fontSize:M.text.base.size,fontWeight:n?M.weight.semibold:M.weight.medium},V,n?k:null],children:s}),i?_jsx(Text,{style:[A.optionDescription,{color:M.colors["text-subtle"],fontSize:M.text.sm.size}],numberOfLines:2,children:i}):null]})]}),j?_jsx(View,{style:[A.checkbox,{borderColor:n?M.colors.primary:M.colors.border,backgroundColor:n?M.colors.primary:"transparent"}],children:n?_jsx(View,{style:A.checkboxTick}):null}):n?"icon"===M.settings.components["option-sheet"]?.selectedMarker?_jsx(View,{style:A.singleSelectedIcon,children:(M.settings.icons.selectedTick??defaultIcons.selectedTick)({size:20,color:M.colors.primary})}):_jsx(View,{style:[A.singleSelectedDot,{backgroundColor:M.colors.primary}]}):null]})},onScrollToIndexFailed:fe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!pe,style:pe?A.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[A.empty,{color:M.colors["text-subtle"],fontSize:M.text.sm.size,paddingVertical:M.space.xl}],children:p})})}),pe?_jsx(View,{style:[A.rail,{paddingRight:M.space.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:me.map(e=>{const t=ue.has(e);return _jsx(Pressable,{onPress:()=>he(e),disabled:!t,hitSlop:{left:8,right:8},...hitSlopMarker({left:8,right:8}),accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:A.railLetter,children:_jsx(Text,{style:[A.railLetterText,{color:t?M.colors.primary:M.colors["text-subtle"],fontSize:M.text.xs.size,fontWeight:M.weight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),j?_jsx(View,{style:[A.sheetFooter,{borderTopColor:M.colors["border-subtle"],paddingHorizontal:M.space.lg,paddingVertical:M.space.md}],children:_jsx(Pressable,{onPress:ce,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[A.doneButton,{backgroundColor:e?M.colors["primary-pressed"]:M.colors.primary,borderRadius:M.radius.md,...smoothCorners,paddingVertical:M.space.sm,paddingHorizontal:M.space.lg}],children:_jsx(Text,{style:{color:M.colors["on-primary"],fontSize:M.text.base.size,fontWeight:M.weight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:e.space.lg,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:e.space.sm,paddingBottom:e.space.sm},sheetHandle:{width:36,height:4,borderRadius:e.radius.pill,...smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:e.space.xs},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:e.space.xs},railLetter:{paddingHorizontal:e.space.xs,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:e.space.md},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:e.space.xxs},checkbox:{width:22,height:22,borderRadius:e.radius.sm,...smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:e.space.md},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors["on-primary"],transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:e.radius.pill,...smoothCorners,marginLeft:e.space.md},singleSelectedIcon:{marginLeft:e.space.md},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.neutral}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors["on-primary"];case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-neutral"]}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:i,threshold:s,fullSwipeThreshold:o,onSwipeOpen:r,onSwipeClose:l,disabled:a=!1,haptic:c,containerStyle:u,contentStyle:d,actionStyle:h,accessibilityLabel:m,testID:S}=e,p=useTheme(),g=s??80,w=o??200,b=useMemo(()=>buildStyles(p),[p]),f=useMemo(()=>buildActionStyles(p),[p]),y=!!n&&n.length>0,x=!!i&&i.length>0,v=Dimensions.get("window").width,A=y?g*(n?.length??0):0,_=x?g*(i?.length??0):0,C=useSharedValue(0),I=useSharedValue(0),O=useRef(null);useEffect(()=>()=>{cancelAnimation(C),cancelAnimation(I)},[C,I]);const G=useCallback(e=>{O.current!==e&&(O.current=e,r?.(e))},[r]),j=useCallback(()=>{null!==O.current&&(O.current=null,l?.())},[l]),N=useCallback(e=>{const t="left"===e?n:i,s=t?.[0];s&&(!1!==c&&triggerHaptic("notificationSuccess"),s.onPress(),C.value=withSpring(0,SPRING_CONFIG),O.current=null,l?.())},[n,i,C,l,c]),R=useCallback(()=>{C.value=withSpring(0,SPRING_CONFIG),j()},[C,j]),k=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),R()},[R,c]),P=useMemo(()=>{const e=A,t=_,n=w,i=-w,s=v,o=-v,r=g,l=y,c=x;return Gesture.Pan().enabled(!a).withTestId(S?`${S}-gesture`:"swipeable-gesture").activeOffsetX([-10,10]).failOffsetY([-15,15]).onStart(()=>{"worklet";I.value=C.value}).onUpdate(n=>{"worklet";const i=I.value+n.translationX;C.value=i>0&&!l||i<0&&!c?0:i>e&&l?e+.35*(i-e):i<-t&&c?.35*(i+t)-t:i}).onEnd(()=>{"worklet";const a=C.value;return l&&a>=n?(C.value=withSpring(s,SPRING_CONFIG),void runOnJS(N)("left")):c&&a<=i?(C.value=withSpring(o,SPRING_CONFIG),void runOnJS(N)("right")):l&&a>=r?(C.value=withSpring(e,SPRING_CONFIG),void runOnJS(G)("left")):c&&a<=-r?(C.value=withSpring(-t,SPRING_CONFIG),void runOnJS(G)("right")):(C.value=withSpring(0,SPRING_CONFIG),void runOnJS(j)())})},[a,I,N,w,y,x,A,j,G,_,v,g,C,S]),T=useAnimatedStyle(()=>({transform:[{translateX:C.value}]})),F=useAnimatedStyle(()=>({opacity:A>0?Math.min(1,Math.max(0,C.value/A)):0})),E=useAnimatedStyle(()=>({opacity:_>0?Math.min(1,Math.max(0,-C.value/_)):0})),V=useMemo(()=>{const e=[];return n?.forEach(t=>e.push({name:t.key,label:t.label})),i?.forEach(t=>e.push({name:t.key,label:t.label})),e},[n,i]),D=useCallback(e=>{const t=e.nativeEvent.actionName,s=[...n??[],...i??[]].find(e=>e.key===t);s&&(!1!==c&&triggerHaptic("selection"),s.onPress())},[n,i,c]);return y||x?_jsxs(View,{style:[b.root,u],testID:S,accessibilityLabel:m,accessibilityActions:V,onAccessibilityAction:D,children:[y?_jsx(Animated.View,{style:[b.actionsRow,b.actionsLeft,{width:A},h,F],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,x?_jsx(Animated.View,{style:[b.actionsRow,b.actionsRight,{width:_},h,E],pointerEvents:"box-none",children:i?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,_jsx(GestureDetector,{gesture:P,children:_jsx(Animated.View,{style:[b.content,d,T],children:t})})]}):_jsx(View,{style:u,testID:S,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:i,onPress:s})=>{const o=e.tone??"neutral",r=toneToBg(t,o);return _jsxs(Pressable,{onPress:()=>s(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:i,backgroundColor:r,paddingHorizontal:t.space.sm}],children:[e.icon?_jsx(View,{style:n.icon,children:e.icon}):null,_jsx(Text,{style:[n.label,{color:toneToOnColor(t,o),fontSize:t.text.sm.size,fontWeight:t.weight.semibold}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.space.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;
|
|
1
|
+
"use strict";import{useCallback,useEffect,useMemo,useRef}from"react";import{Dimensions,Pressable,StyleSheet,Text,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,runOnJS,useAnimatedStyle,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SPRING_CONFIG={damping:22,stiffness:260,mass:1},DRAG_ACTIVATION_OFFSET=10,RUBBER_BAND_FACTOR=.35,FAIL_OFFSET_Y=15,toneToBg=(e,t)=>{switch(t){case"primary":return e.colors.primary;case"success":return e.colors.success;case"warning":return e.colors.warning;case"danger":return e.colors.danger;default:return e.colors.neutral}},toneToOnColor=(e,t)=>{switch(t){case"primary":return e.colors["on-primary"];case"success":return e.colors["on-success"];case"warning":return e.colors["on-warning"];case"danger":return e.colors["on-danger"];default:return e.colors["on-neutral"]}},Swipeable=e=>{const{children:t,leftActions:n,rightActions:i,threshold:s,fullSwipeThreshold:o,onSwipeOpen:r,onSwipeClose:l,disabled:a=!1,haptic:c,containerStyle:u,contentStyle:d,actionStyle:h,accessibilityLabel:m,testID:S}=e,p=useTheme(),g=s??80,w=o??200,b=useMemo(()=>buildStyles(p),[p]),f=useMemo(()=>buildActionStyles(p),[p]),y=!!n&&n.length>0,x=!!i&&i.length>0,v=Dimensions.get("window").width,A=y?g*(n?.length??0):0,_=x?g*(i?.length??0):0,C=useSharedValue(0),I=useSharedValue(0),O=useRef(null);useEffect(()=>()=>{cancelAnimation(C),cancelAnimation(I)},[C,I]);const G=useCallback(e=>{O.current!==e&&(O.current=e,r?.(e))},[r]),j=useCallback(()=>{null!==O.current&&(O.current=null,l?.())},[l]),N=useCallback(e=>{const t="left"===e?n:i,s=t?.[0];s&&(!1!==c&&triggerHaptic("notificationSuccess"),s.onPress(),C.value=withSpring(0,SPRING_CONFIG),O.current=null,l?.())},[n,i,C,l,c]),R=useCallback(()=>{C.value=withSpring(0,SPRING_CONFIG),j()},[C,j]),k=useCallback(e=>{const t=resolveHaptic(c,"selection");t&&triggerHaptic(t),e.onPress(),R()},[R,c]),P=useMemo(()=>{const e=A,t=_,n=w,i=-w,s=v,o=-v,r=g,l=y,c=x;return Gesture.Pan().enabled(!a).withTestId(S?`${S}-gesture`:"swipeable-gesture").activeOffsetX([-10,10]).failOffsetY([-15,15]).onStart(()=>{"worklet";I.value=C.value}).onUpdate(n=>{"worklet";const i=I.value+n.translationX;C.value=i>0&&!l||i<0&&!c?0:i>e&&l?e+.35*(i-e):i<-t&&c?.35*(i+t)-t:i}).onEnd(()=>{"worklet";const a=C.value;return l&&a>=n?(C.value=withSpring(s,SPRING_CONFIG),void runOnJS(N)("left")):c&&a<=i?(C.value=withSpring(o,SPRING_CONFIG),void runOnJS(N)("right")):l&&a>=r?(C.value=withSpring(e,SPRING_CONFIG),void runOnJS(G)("left")):c&&a<=-r?(C.value=withSpring(-t,SPRING_CONFIG),void runOnJS(G)("right")):(C.value=withSpring(0,SPRING_CONFIG),void runOnJS(j)())})},[a,I,N,w,y,x,A,j,G,_,v,g,C,S]),T=useAnimatedStyle(()=>({transform:[{translateX:C.value}]})),F=useAnimatedStyle(()=>({opacity:A>0?Math.min(1,Math.max(0,C.value/A)):0})),E=useAnimatedStyle(()=>({opacity:_>0?Math.min(1,Math.max(0,-C.value/_)):0})),V=useMemo(()=>{const e=[];return n?.forEach(t=>{e.push({name:t.key,label:t.label})}),i?.forEach(t=>{e.push({name:t.key,label:t.label})}),e},[n,i]),D=useCallback(e=>{const t=e.nativeEvent.actionName,s=[...n??[],...i??[]].find(e=>e.key===t);s&&(!1!==c&&triggerHaptic("selection"),s.onPress())},[n,i,c]);return y||x?_jsxs(View,{style:[b.root,u],testID:S,accessibilityLabel:m,accessibilityActions:V,onAccessibilityAction:D,children:[y?_jsx(Animated.View,{style:[b.actionsRow,b.actionsLeft,{width:A},h,F],pointerEvents:"box-none",children:n?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,x?_jsx(Animated.View,{style:[b.actionsRow,b.actionsRight,{width:_},h,E],pointerEvents:"box-none",children:i?.map(e=>_jsx(ActionButton,{action:e,theme:p,actionStyles:f,width:g,onPress:k},e.key))}):null,_jsx(GestureDetector,{gesture:P,children:_jsx(Animated.View,{style:[b.content,d,T],children:t})})]}):_jsx(View,{style:u,testID:S,children:t})};Swipeable.displayName="Swipeable";const ActionButton=({action:e,theme:t,actionStyles:n,width:i,onPress:s})=>{const o=e.tone??"neutral",r=toneToBg(t,o);return _jsxs(Pressable,{onPress:()=>s(e),accessibilityRole:"button",accessibilityLabel:e.label,style:[n.button,{width:i,backgroundColor:r,paddingHorizontal:t.space.sm}],children:[e.icon?_jsx(View,{style:n.icon,children:e.icon}):null,_jsx(Text,{style:[n.label,{color:toneToOnColor(t,o),fontSize:t.text.sm.size,fontWeight:t.weight.semibold}],numberOfLines:1,children:e.label})]})},buildActionStyles=e=>StyleSheet.create({button:{flexGrow:0,flexShrink:0,alignItems:"center",justifyContent:"center"},icon:{marginBottom:e.space.xxs},label:{textAlign:"center"}}),buildStyles=e=>StyleSheet.create({root:{position:"relative",overflow:"hidden"},content:{backgroundColor:"transparent"},actionsRow:{position:"absolute",top:0,bottom:0,flexDirection:"row"},actionsLeft:{left:0},actionsRight:{right:0,justifyContent:"flex-end"}});export{Swipeable};export default Swipeable;
|
|
@@ -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{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{hitSlopMarker}from"../../utils/hitSlop.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SWIPE_DISMISS_THRESHOLD=80,SWIPE_VELOCITY_THRESHOLD=.5,STACK_OFFSET=8,STACK_SCALE_STEP=.04,DEFAULT_AUTO_DISMISS_MS=3e3,WEB_ACTION_MIN_DURATION_MS=8e3,COUNTDOWN_BAR_HEIGHT=3,ACTION_HIT_SLOP={top:10,bottom:10,left:10,right:10},DISMISS_ACTIONS=[{name:"dismiss",label:"Dismiss"}],Toast=({toast:e,index:t,onDismiss:n,shownAt:i,runtime:s})=>{const a=useTheme(),r=usePresenceMotion(),o=r.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["icon-circle-size"],g=a.text[a.components.toast["icon-glyph-text"]].size,h=a.components.toast["tint-bar-width"],f=a.settings.components.toast?.defaultDurationMs??3e3,b=a.settings.components.toast?.enableSwipeDismiss??!0,x="top"===c?-120:120,v=useRef(createAnimatedValue(r.reduced?0:x)).current,A=useRef(createAnimatedValue(0)).current,S=useRef(createAnimatedValue(0)).current,y=useRef(!1),w="top"===c?8*t:8*-t,M=Math.max(1-.04*t,.9),T=useRef(createAnimatedValue(w)).current;useEffect(()=>{setNativeValue(T,w)},[w,T]);const V=useMemo(()=>Animated.add(v,T),[v,T]),_=void 0!==e.action,D=e.duration??f,C=D>0&&_&&"web"===Platform.OS?Math.max(D,8e3):D,R=C<=0||_&&!0===s?.screenReaderOn,N=!0===e.countdown&&!R,I=useRef(createAnimatedValue(1)).current,E=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),P=useRef({touch:!1,pan:!1,hover:!1}),j=useRef(()=>{}),k=useRef({id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:!1});k.current={id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:N&&!r.reduced};const O=useCallback(()=>{const e=E.current,t=k.current,n=P.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(I,e.remaining/t.totalMs)}const i=!(t.persistent||y.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,j.current()},e.remaining),t.animateBar&&Animated.timing(I,{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),I.stopAnimation())},[I]),dismiss=()=>{if(y.current)return;y.current=!0,O();const t=[Animated.timing(S,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})];r.reduced||t.push(Animated.timing(v,{toValue:x,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};j.current=dismiss,useEffect(()=>{const e=r.reduced?Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(v,{toValue:0,damping:18,stiffness:180,mass:1,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{O()},[R,O]),useEffect(()=>()=>{const e=E.current,t=k.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),I.stopAnimation(),e.initialised&&t.totalMs>0&&!y.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[I]);const L=useCallback((e,t)=>{P.current[e]=t,O()},[O]),H=useCallback(()=>L("touch",!0),[L]),F=useCallback(e=>L("touch",(e.nativeEvent.touches?.length??0)>0),[L]),z=useCallback(()=>L("hover",!0),[L]),B=useCallback(()=>L("hover",!1),[L]),G=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>L("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(A,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(S,n)},onPanResponderTerminate:()=>{if(L("pan",!1),r.reduced)return setNativeValue(A,0),void Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(A,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>80||Math.abs(i.vx)>.5){const t=i.dx>=0?1:-1;y.current=!0,L("pan",!1);const s=[Animated.timing(S,{toValue:0,duration:o,useNativeDriver:!0})];r.reduced||s.push(Animated.timing(A,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(s).start(()=>n(e.id))}else L("pan",!1),r.reduced?(setNativeValue(A,0),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(A,{toValue:0,useNativeDriver:!0}),Animated.spring(S,{toValue:1,useNativeDriver:!0})]).start()}}),[A,S,L,o,r.reduced,a.motion.duration.fast,a.motion.spring.snappy.damping,a.motion.spring.snappy.stiffness,a.motion.spring.snappy.mass,n,e.id])
|
|
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{hitSlopMarker}from"../../utils/hitSlop.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const SWIPE_DISMISS_THRESHOLD=80,SWIPE_VELOCITY_THRESHOLD=.5,STACK_OFFSET=8,STACK_SCALE_STEP=.04,DEFAULT_AUTO_DISMISS_MS=3e3,WEB_ACTION_MIN_DURATION_MS=8e3,COUNTDOWN_BAR_HEIGHT=3,ACTION_HIT_SLOP={top:10,bottom:10,left:10,right:10},DISMISS_ACTIONS=[{name:"dismiss",label:"Dismiss"}],Toast=({toast:e,index:t,onDismiss:n,shownAt:i,runtime:s})=>{const a=useTheme(),r=usePresenceMotion(),o=r.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["icon-circle-size"],g=a.text[a.components.toast["icon-glyph-text"]].size,h=a.components.toast["tint-bar-width"],f=a.settings.components.toast?.defaultDurationMs??3e3,b=a.settings.components.toast?.enableSwipeDismiss??!0,x="top"===c?-120:120,v=useRef(createAnimatedValue(r.reduced?0:x)).current,A=useRef(createAnimatedValue(0)).current,S=useRef(createAnimatedValue(0)).current,y=useRef(!1),w="top"===c?8*t:8*-t,M=Math.max(1-.04*t,.9),T=useRef(createAnimatedValue(w)).current;useEffect(()=>{setNativeValue(T,w)},[w,T]);const V=useMemo(()=>Animated.add(v,T),[v,T]),_=void 0!==e.action,D=e.duration??f,C=D>0&&_&&"web"===Platform.OS?Math.max(D,8e3):D,R=C<=0||_&&!0===s?.screenReaderOn,N=!0===e.countdown&&!R,I=useRef(createAnimatedValue(1)).current,E=useRef({initialised:!1,timer:null,remaining:0,startedAt:0}),P=useRef({touch:!1,pan:!1,hover:!1}),j=useRef(()=>{}),k=useRef({id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:!1});k.current={id:e.id,totalMs:C,shownAt:i,runtime:s,persistent:R,animateBar:N&&!r.reduced};const O=useCallback(()=>{const e=E.current,t=k.current,n=P.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(I,e.remaining/t.totalMs)}const i=!(t.persistent||y.current||n.touch||n.pan||n.hover);i&&null===e.timer?(e.startedAt=Date.now(),e.timer=setTimeout(()=>{e.timer=null,e.remaining=0,j.current()},e.remaining),t.animateBar&&Animated.timing(I,{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),I.stopAnimation())},[I]),dismiss=()=>{if(y.current)return;y.current=!0,O();const t=[Animated.timing(S,{toValue:0,duration:o,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})];r.reduced||t.push(Animated.timing(v,{toValue:x,duration:a.motion.duration.fast,easing:Easing.bezier(...a.motion.ease.accelerate),useNativeDriver:!0})),Animated.parallel(t).start(()=>n(e.id))};j.current=dismiss,useEffect(()=>{const e=r.reduced?Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}):Animated.parallel([Animated.spring(v,{toValue:0,damping:18,stiffness:180,mass:1,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]);return e.start(),()=>e.stop()},[]),useEffect(()=>{O()},[R,O]),useEffect(()=>()=>{const e=E.current,t=k.current;null!==e.timer&&(clearTimeout(e.timer),e.timer=null,e.remaining=Math.max(e.remaining-(Date.now()-e.startedAt),0)),I.stopAnimation(),e.initialised&&t.totalMs>0&&!y.current&&t.runtime?.writeRemaining(t.id,e.remaining)},[I]);const L=useCallback((e,t)=>{P.current[e]=t,O()},[O]),H=useCallback(()=>L("touch",!0),[L]),F=useCallback(e=>L("touch",(e.nativeEvent.touches?.length??0)>0),[L]),z=useCallback(()=>L("hover",!0),[L]),B=useCallback(()=>L("hover",!1),[L]),G=useMemo(()=>PanResponder.create({onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>Math.abs(t.dy)&&Math.abs(t.dx)>6,onPanResponderGrant:()=>L("pan",!0),onPanResponderMove:(e,t)=>{setNativeValue(A,t.dx);const n=1-.7*Math.min(Math.abs(t.dx)/200,1);setNativeValue(S,n)},onPanResponderTerminate:()=>{if(L("pan",!1),r.reduced)return setNativeValue(A,0),void Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start();Animated.parallel([Animated.spring(A,{toValue:0,damping:a.motion.spring.snappy.damping,stiffness:a.motion.spring.snappy.stiffness,mass:a.motion.spring.snappy.mass,useNativeDriver:!0}),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0})]).start()},onPanResponderRelease:(t,i)=>{if(Math.abs(i.dx)>80||Math.abs(i.vx)>.5){const t=i.dx>=0?1:-1;y.current=!0,L("pan",!1);const s=[Animated.timing(S,{toValue:0,duration:o,useNativeDriver:!0})];r.reduced||s.push(Animated.timing(A,{toValue:500*t,duration:a.motion.duration.fast,useNativeDriver:!0})),Animated.parallel(s).start(()=>n(e.id))}else L("pan",!1),r.reduced?(setNativeValue(A,0),Animated.timing(S,{toValue:1,duration:o,useNativeDriver:!0}).start()):Animated.parallel([Animated.spring(A,{toValue:0,useNativeDriver:!0}),Animated.spring(S,{toValue:1,useNativeDriver:!0})]).start()}}),[A,S,L,o,r.reduced,a.motion.duration.fast,a.motion.spring.snappy.damping,a.motion.spring.snappy.stiffness,a.motion.spring.snappy.mass,n,e.id]),$={accessibilityActions:DISMISS_ACTIONS,onAccessibilityAction:e=>{"dismiss"===e.nativeEvent.actionName&&dismiss()}},[W,U]=useState(0),K=useMemo(()=>I.interpolate({inputRange:[0,1],outputRange:[-W,0]}),[I,W]),X=e.description?`${e.message}. ${e.description}`:e.message,Y=e.action&&N?`${e.action.label}, ${Math.ceil(C/1e3)} seconds`:e.action?.label;return _jsxs(Animated.View,{...b?G.panHandlers:{},..._?{}:{accessible:!0,...$},..."web"===Platform.OS?{onPointerEnter:z,onPointerLeave:B}:{},onTouchStart:H,onTouchEnd:F,onTouchCancel:F,accessibilityLabel:X,testID:e.testID,style:[u.container,{backgroundColor:a.colors.surface,borderRadius:a.radius.lg,...smoothCorners,padding:a.space.md,...a.shadow.elevated,opacity:S,transform:[{translateY:V},{translateX:A},{scale:M}]},e.style,e.containerStyle],children:[h>0?_jsx(View,{style:[u.tintBar,{width:h,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:p,height:p,borderRadius:a.radius.pill,...smoothCorners,backgroundColor:`${d}22`},e.iconCircleStyle],children:_jsx(Text,{style:[u.iconGlyph,{color:m,fontSize:g}],accessible:!1,children:t})}):null})(),_jsxs(View,{style:u.textBlock,children:[_jsx(Text,{style:[u.message,{color:a.colors["text-body"],fontSize:a.text.base.size,...fontFor(a,"semibold")},e.textStyle,e.messageStyle],numberOfLines:2,children:e.message}),e.description?_jsx(Text,{style:[u.description,{color:a.colors["text-muted"],fontSize:a.text.sm.size}],numberOfLines:3,children:e.description}):null]}),e.action?_jsx(Pressable,{accessibilityRole:"button",accessibilityLabel:Y,hitSlop:ACTION_HIT_SLOP,...hitSlopMarker(ACTION_HIT_SLOP),...$,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.text.sm.size,...fontFor(a,"semibold")},numberOfLines:1,children:e.action.label})}):null]}),N?_jsxs(View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",onLayout:e=>U(e.nativeEvent.layout.width),testID:"toast-countdown",style:[u.countdownTrack,{backgroundColor:`${d}22`}],children:[r.reduced?_jsx(View,{style:[u.countdownFill,{backgroundColor:d}]}):null,!r.reduced&&W>0?_jsx(Animated.View,{style:[u.countdownFill,{backgroundColor:d,transform:[{translateX:K}]}]}):null]}):null]})},tintFor=(e,t)=>{switch(t){case"success":return e.colors.success;case"danger":return e.colors.danger;case"warning":return e.colors.warning;case"info":return e.colors.info;default:return e.colors["text-body"]}},inkFor=(e,t)=>{switch(t){case"success":return e.colors["success-text"];case"danger":return e.colors["danger-text"];case"warning":return e.colors["warning-text"];case"info":return e.colors["info-text"];default:return e.colors["text-body"]}},defaultGlyph=e=>{switch(e){case"success":return"✓";case"danger":return"×";case"warning":return"!";case"info":return"i";default:return""}},buildStyles=e=>StyleSheet.create({container:{overflow:"hidden",marginVertical:e.space.xs},tintBar:{position:"absolute",left:0,top:0,bottom:0},row:{flexDirection:"row",alignItems:"center",paddingLeft:e.space.sm},iconCircle:{alignItems:"center",justifyContent:"center",marginRight:e.space.md},iconGlyph:{fontWeight:"700",lineHeight:19},textBlock:{flex:1,paddingRight:e.space.sm},message:{lineHeight:20},description:{marginTop:e.space.xxs,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:e.space.sm,paddingVertical:e.space.xs,minHeight:e.components.toast["action-min-height"],borderRadius:e.radius.md,...smoothCorners,marginLeft:e.space.sm}});export{Toast};export default Toast;
|
package/lib/module/form/path.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const tokenize=t=>{const e=[],r=/[^.[\]]+/g;
|
|
1
|
+
"use strict";const tokenize=t=>{const e=[],r=/[^.[\]]+/g;for(const n of t.matchAll(r)){const t=n[0];e.push(/^\d+$/.test(t)?Number(t):t)}return e};export const getPath=(t,e)=>{const r=tokenize(e);let n=t;for(const t of r){if(null==n||"object"!=typeof n)return;n=n[t]}return n};export const setPath=(t,e,r)=>{const n=tokenize(e);if(0===n.length)return t;const o=Array.isArray(t)?[...t]:{...t};let s=o;for(let t=0;t<n.length-1;t++){const e=n[t],r=n[t+1],o=s[e],c=null!=o&&"object"==typeof o?Array.isArray(o)?[...o]:{...o}:"number"==typeof r?[]:{};s[e]=c,s=c}return s[n[n.length-1]]=r,o};export const deletePath=(t,e)=>{const r=tokenize(e);if(0===r.length)return t;const n=Array.isArray(t)?[...t]:{...t};let o=n;for(let t=0;t<r.length-1;t++){const e=r[t],s=o[e];if(null==s||"object"!=typeof s)return n;const c=Array.isArray(s)?[...s]:{...s};o[e]=c,o=c}const s=r[r.length-1];return Array.isArray(o)&&"number"==typeof s?o.splice(s,1):delete o[s],n};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{AccessibilityInfo,Platform}from"react-native";let webRegions=null;const webRegion=e=>{if("undefined"==typeof document)return null;if(!webRegions
|
|
1
|
+
"use strict";import{AccessibilityInfo,Platform}from"react-native";let webRegions=null;const webRegion=e=>{if("undefined"==typeof document)return null;if(!webRegions?.polite.isConnected){const make=e=>{const t=document.createElement("div");return t.setAttribute("aria-live",e),t.setAttribute("aria-atomic","true"),t.setAttribute("role","assertive"===e?"alert":"status"),Object.assign(t.style,{position:"absolute",width:"1px",height:"1px",overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap"}),document.body.appendChild(t),t};webRegions={polite:make("polite"),assertive:make("assertive")}}return e?webRegions.polite:webRegions.assertive};export const announce=(e,t)=>{if(!e)return;const i=!1!==t?.polite;if("web"===Platform.OS){const t=webRegion(i);return void(t&&(t.textContent="",setTimeout(()=>{t.textContent=e},50)))}"ios"!==Platform.OS?AccessibilityInfo.announceForAccessibility(e):AccessibilityInfo.announceForAccessibilityWithOptions(e,i?{queue:!0}:{queue:!1,priority:"high"})};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"react-native-safe-area-context": ">=5.4.0",
|
|
87
87
|
"react-native-svg": ">=15.0.0",
|
|
88
88
|
"react-native-worklets": ">=0.10.0",
|
|
89
|
-
"@webority/canvas-kit": "0.
|
|
90
|
-
"@webority/mobile-core": "0.
|
|
89
|
+
"@webority/canvas-kit": "0.100.0",
|
|
90
|
+
"@webority/mobile-core": "0.100.0"
|
|
91
91
|
},
|
|
92
92
|
"peerDependenciesMeta": {
|
|
93
93
|
"@webority/canvas-kit": {
|
|
@@ -148,10 +148,10 @@
|
|
|
148
148
|
"react-test-renderer": "19.2.8",
|
|
149
149
|
"rimraf": "6.1.3",
|
|
150
150
|
"typescript": "5.9.3",
|
|
151
|
-
"@webority/canvas-kit": "0.
|
|
152
|
-
"@webority/mobile-
|
|
153
|
-
"@webority/tokens": "0.
|
|
154
|
-
"@webority/mobile-
|
|
151
|
+
"@webority/canvas-kit": "0.100.0",
|
|
152
|
+
"@webority/mobile-dev": "0.0.0",
|
|
153
|
+
"@webority/tokens": "0.100.0",
|
|
154
|
+
"@webority/mobile-core": "0.100.0"
|
|
155
155
|
},
|
|
156
156
|
"scripts": {
|
|
157
157
|
"build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",
|