@webority/mobile-ui 0.16.2 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js +1 -1
- package/lib/commonjs/components/Radio/Radio.js +1 -1
- package/lib/commonjs/components/Toast/ToastProvider.js +1 -1
- package/lib/module/components/FloatingActionButton/FloatingActionButton.js +1 -1
- package/lib/module/components/Radio/Radio.js +1 -1
- package/lib/module/components/Toast/ToastProvider.js +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.FloatingActionButtonGroup=exports.FloatingActionButton=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?r:n){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(o,t,a):o[t]=e[t]);return o})(e,t)}const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:_color.ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=exports.FloatingActionButton=(0,_react.forwardRef)((e,t)=>{const{icon:n,onPress:r,label:i,collapsed:a=!1,size:o="md",tone:s="primary",position:c,bottomOffset:l,disabled:u=!1,hideOnScroll:d=!1,isScrolling:m=!1,accessibilityLabel:_,accessibilityHint:p,haptic:g,style:f,containerStyle:b,labelStyle:h,testID:y}=e,v=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),R=sizeMap[o],j=(0,_react.useMemo)(()=>buildStyles(v),[v]),{scale:w,opacity:N,pressIn:S,pressOut:A}=(0,_usePressAnimation.usePressAnimation)({enabled:!u}),P=(0,_usePresenceMotion.usePresenceMotion)(),C=v.components.floatingActionButton,E=C?.edgeOffset??24,k=C?.bottomOffset??24,I=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current,F=P.duration("normal");(0,_react.useEffect)(()=>{if(!d)return void(0,_index.setNativeValue)(I,1);const e=_reactNative.Animated.timing(I,{toValue:m?0:1,duration:F,easing:_reactNative.Easing.bezier(...v.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[d,m,I,F,v.motion.easing.standard]);const M=R.diameter+(l??k)+x.bottom+E,V=I.interpolate({inputRange:[0,1],outputRange:P.range(M,0)}),z=(0,_react.useMemo)(()=>_reactNative.Animated.multiply(I,N),[I,N]),O=n,D="string"==typeof i&&i.length>0,B=D&&a,T=P.reduced,L=v.spacing.sm,q=R.labelPaddingHorizontal,H=v.motion.duration.fast,W=v.motion.easing.standard,$=(0,_reactNativeReanimated.useSharedValue)(B?1:0),[G,U]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{const e=B?1:0;return $.value=T?e:(0,_reactNativeReanimated.withTiming)(e,{duration:H,easing:_reactNativeReanimated.Easing.bezier(...W)}),()=>(0,_reactNativeReanimated.cancelAnimation)($)},[B,T,$,H,W]);const Y=(0,_react.useCallback)(e=>{const t=Math.ceil(e);U(e=>e===t?e:t)},[]),Q=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({paddingHorizontal:q*(1-$.value)})),X=(0,_reactNativeReanimated.useAnimatedStyle)(()=>{const e=Math.max(0,1-2*$.value);return null===G?$.value>=1?{opacity:e,width:0}:{opacity:e}:{opacity:e,width:(G+L)*(1-$.value)}}),J=u?v.colors.surface.disabled:toneBackground(v,s),K=u?v.colors.text.disabled:toneForeground(v,s),Z=(0,_react.useMemo)(()=>{if(!c)return null;const e=(l??k)+x.bottom;switch(c){case"bottomLeft":return{position:"absolute",bottom:e,left:E};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:E}}},[c,l,x.bottom,k,E]);return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[Z,{transform:[{translateY:V},{scale:w}],opacity:z},b,f],pointerEvents:d&&m?"none":"auto",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:e=>{if(u)return;const t=(0,_hapticUtils.resolveHaptic)(g,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),r()},onPressIn:S,onPressOut:A,disabled:u,accessibilityRole:"button",accessibilityLabel:_,accessibilityHint:p,accessibilityState:{disabled:u},"aria-disabled":u,testID:y,style:[j.base,D?{height:R.diameter,minWidth:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners}:{width:R.diameter,height:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners},v.shadows.lg,{backgroundColor:J,opacity:u?.55:1}],children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e&&!u?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[j.pressedTint,{backgroundColor:pressedTintFor(v,s),borderRadius:R.diameter/2,..._corners.smoothCorners}]}):null,D?(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[j.extendedRow,Q],children:[O,(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[j.labelClip,X],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{onLayout:e=>Y(e.nativeEvent.layout.width),style:[j.label,{color:K,fontSize:R.fontSize,fontWeight:v.typography.fontWeight.semibold,marginLeft:L},h],numberOfLines:1,children:i})})]}):O]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>_reactNative.StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},extendedRow:{flexDirection:"row",alignItems:"center"},labelClip:{flexDirection:"row",overflow:"hidden"},label:{includeFontPadding:!1,flexShrink:0}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:n,actions:r,open:i,defaultOpen:a=!1,onOpenChange:o,position:s="bottomRight",bottomOffset:c,size:l="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:_=!1,containerStyle:p,secondaryActionStyle:g,labelPillStyle:f,labelStyle:b,testID:h}=e,y=(0,_index.useTheme)(),v=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),x=sizeMap[l],R=(0,_react.useMemo)(()=>buildGroupStyles(y),[y]),j=(0,_usePresenceMotion.usePresenceMotion)(),w=j.duration("normal"),N=y.components.floatingActionButton,S=N?.edgeOffset??24,A=N?.bottomOffset??24,P=N?.secondaryGap??16,C=N?.staggerMs??50,E=(0,_react.useMemo)(()=>r.slice(0,6),[r]),k=E.length,I=(0,_react.useMemo)(()=>E.map((e,t)=>({action:e,index:t})).reverse(),[E]),F=__DEV__?describeActionProblem(r):"";(0,_react.useEffect)(()=>{__DEV__&&F&&console.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${F}`)},[F]);const M="boolean"==typeof i,[V,z]=(0,_react.useState)(a),O=M?i:V,D=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;(0,_react.useEffect)(()=>{if(!m)return void(0,_index.setNativeValue)(D,1);const e=_reactNative.Animated.timing(D,{toValue:_?0:1,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,_,D,w,y.motion.easing.standard]);const B=m&&_;(0,_react.useEffect)(()=>{B&&O&&(M||z(!1),o?.(!1))},[B,O,M,o]);const T=x.diameter+(c??A)+v.bottom+S,L=D.interpolate({inputRange:[0,1],outputRange:j.range(T,0)}),q=D,H=(0,_react.useRef)((0,_index.createAnimatedValue)(O?1:0)).current,W=(0,_react.useRef)([]),[$,G]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const e=W.current;if(e.length!==k){if(e.length<k){const t=e.slice();for(let n=e.length;n<k;n+=1)t.push(new _reactNative.Animated.Value(O?1:0));W.current=t}else W.current=e.slice(0,k);G(e=>e+1)}},[k]),(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(H,{toValue:O?1:0,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});e.start();const t=W.current.map(e=>_reactNative.Animated.timing(e,{toValue:O?1:0,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0})),n=O?t:[...t].reverse(),r=_reactNative.Animated.stagger(C,n);return r.start(),()=>{e.stop(),r.stop()}},[O,H,w,y.motion.easing.standard,k,$,C]);const U=(0,_react.useCallback)(e=>{const t=(0,_hapticUtils.resolveHaptic)(d,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),M||z(e),o?.(e)},[M,o,d]),Y=(0,_react.useRef)(null),Q=(0,_react.useRef)(O),X=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(Q.current===O)return;Q.current=O;const e=X.current;if(X.current=!1,B||e)return;const t=Y.current;t&&("web"===_reactNative.Platform.OS?t.focus?.():_reactNative.AccessibilityInfo.sendAccessibilityEvent(t,"focus"));const n=1===k?"action":"actions";(0,_announce.announce)(O?`${u}, expanded, ${k} ${n}`:`${u}, collapsed`)},[O,B,u,k]);const J=(0,_react.useCallback)(()=>{U(!O)},[O,U]),K=(0,_react.useCallback)(e=>{!1!==d&&(0,_hapticUtils.triggerHaptic)("selection"),X.current=!0,e.onPress(),M||z(!1),o?.(!1)},[M,o,d]),Z=(0,_react.useCallback)(()=>{O&&U(!1)},[O,U]);(0,_react.useEffect)(()=>{if(!O)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(U(!1),!0));return()=>e.remove()},[O,U]),(0,_react.useEffect)(()=>{if(!O||"web"!==_reactNative.Platform.OS)return;const onKeyDown=e=>{"Escape"===e.key&&U(!1)};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[O,U]);const ee=(0,_react.useMemo)(()=>{const e=(c??A)+v.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:S,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:S,alignItems:"flex-end"}}},[s,c,v.bottom,A,S]),slotOffset=e=>-(x.diameter+P)*(e+1),te=(0,_react.useMemo)(()=>{switch(s){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[s]),ne=.78*x.diameter,re=(0,_react.useMemo)(()=>{const e=ne+y.spacing.sm;switch(s){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:x.diameter/2+ne/2+y.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[s,ne,x.diameter,y.spacing.sm]),ie=H.interpolate({inputRange:[0,1],outputRange:[0,.4]}),ae=H.interpolate(j.reduced?{inputRange:[0,.5,.5001,1],outputRange:["0deg","0deg","45deg","45deg"]}:{inputRange:[0,1],outputRange:["0deg","45deg"]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[O?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:y.colors.background.overlay,opacity:ie}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:Z,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:h?`${h}-backdrop`:void 0})}):null,(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:B?"none":"box-none",style:[ee,{transform:[{translateY:L}],opacity:q},p],accessibilityRole:"menu",testID:h,children:[I.map(({action:e,index:t})=>{const n=W.current[t];if(!n)return null;const r=n.interpolate({inputRange:[0,1],outputRange:j.range(0,slotOffset(t))}),i=n.interpolate({inputRange:[0,1],outputRange:j.range(.6,1)}),a=toneBackground(y,e.tone??"primary"),o=toneForeground(y,e.tone??"primary"),s=e.label?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[R.labelSlot,re],testID:h?`${h}-label-${e.key}`:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.labelPill,y.shadows.sm,{backgroundColor:y.colors.background.elevated,paddingHorizontal:y.spacing.sm,paddingVertical:y.spacing.xs,borderRadius:y.radius.sm,..._corners.smoothCorners},f],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:y.colors.text.primary,fontSize:y.typography.fontSize.sm,fontWeight:y.typography.fontWeight.medium},b],numberOfLines:1,children:e.label})})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",accessibilityElementsHidden:!O,importantForAccessibility:O?"auto":"no-hide-descendants","aria-hidden":!O,style:[R.secondaryRow,te,{position:"absolute",bottom:0,opacity:n,transform:[{translateY:r},{scale:i}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>K(e),focusable:O,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[R.fabBase,y.shadows.md,{width:ne,height:ne,borderRadius:ne/2,..._corners.smoothCorners,backgroundColor:a},g],testID:h?`${h}-action-${e.key}`:void 0,children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,e.tone??"primary"),borderRadius:ne/2,..._corners.smoothCorners}]}):null,_react.default.isValidElement(e.icon)?e.icon:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:o},children:String(e.icon??"")})]})}),s]},e.key)}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:Y,onPress:J,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:O},"aria-expanded":O,style:[R.fabBase,y.shadows.lg,{width:x.diameter,height:x.diameter,borderRadius:x.diameter/2,..._corners.smoothCorners,backgroundColor:y.colors.primary}],testID:h?`${h}-primary`:void 0,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:_color.ACCENT_PRESSED_TINT,borderRadius:x.diameter/2,..._corners.smoothCorners}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:n?void 0:{transform:[{rotate:ae}]},children:O&&n?n:t})]})})]})]})};exports.FloatingActionButtonGroup=FloatingActionButtonGroup;const buildGroupStyles=e=>_reactNative.StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});var _default=exports.default=FloatingActionButton;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.FloatingActionButtonGroup=exports.FloatingActionButton=void 0;var _mobileCore=require("@webority/mobile-core"),_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?n:r){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(o,t,a):o[t]=e[t]);return o})(e,t)}const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:_color.ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=exports.FloatingActionButton=(0,_react.forwardRef)((e,t)=>{const{icon:r,onPress:n,label:i,collapsed:a=!1,size:o="md",tone:s="primary",position:c,bottomOffset:l,disabled:u=!1,hideOnScroll:d=!1,isScrolling:m=!1,accessibilityLabel:_,accessibilityHint:p,haptic:g,style:f,containerStyle:b,labelStyle:h,testID:y}=e,v=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),R=sizeMap[o],j=(0,_react.useMemo)(()=>buildStyles(v),[v]),{scale:w,opacity:N,pressIn:S,pressOut:A}=(0,_usePressAnimation.usePressAnimation)({enabled:!u}),C=(0,_usePresenceMotion.usePresenceMotion)(),P=v.components.floatingActionButton,E=P?.edgeOffset??24,k=P?.bottomOffset??24,I=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current,F=C.duration("normal");(0,_react.useEffect)(()=>{if(!d)return void(0,_index.setNativeValue)(I,1);const e=_reactNative.Animated.timing(I,{toValue:m?0:1,duration:F,easing:_reactNative.Easing.bezier(...v.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[d,m,I,F,v.motion.easing.standard]);const M=R.diameter+(l??k)+x.bottom+E,V=I.interpolate({inputRange:[0,1],outputRange:C.range(M,0)}),z=(0,_react.useMemo)(()=>_reactNative.Animated.multiply(I,N),[I,N]),O=r,D="string"==typeof i&&i.length>0,B=D&&a,T=C.reduced,L=v.spacing.sm,q=R.labelPaddingHorizontal,H=v.motion.duration.fast,W=v.motion.easing.standard,$=(0,_reactNativeReanimated.useSharedValue)(B?1:0),[G,U]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{const e=B?1:0;return $.value=T?e:(0,_reactNativeReanimated.withTiming)(e,{duration:H,easing:_reactNativeReanimated.Easing.bezier(...W)}),()=>(0,_reactNativeReanimated.cancelAnimation)($)},[B,T,$,H,W]);const Y=(0,_react.useCallback)(e=>{const t=Math.ceil(e);U(e=>e===t?e:t)},[]),Q=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({paddingHorizontal:q*(1-$.value)})),X=(0,_reactNativeReanimated.useAnimatedStyle)(()=>{const e=Math.max(0,1-2*$.value);return null===G?$.value>=1?{opacity:e,width:0}:{opacity:e}:{opacity:e,width:(G+L)*(1-$.value)}}),J=u?v.colors.surface.disabled:toneBackground(v,s),K=u?v.colors.text.disabled:toneForeground(v,s),Z=(0,_react.useMemo)(()=>{if(!c)return null;const e=(l??k)+x.bottom;switch(c){case"bottomLeft":return{position:"absolute",bottom:e,left:E};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:E}}},[c,l,x.bottom,k,E]);return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[Z,{transform:[{translateY:V},{scale:w}],opacity:z},b,f],pointerEvents:d&&m?"none":"auto",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:e=>{if(u)return;const t=(0,_hapticUtils.resolveHaptic)(g,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),n()},onPressIn:S,onPressOut:A,disabled:u,accessibilityRole:"button",accessibilityLabel:_,accessibilityHint:p,accessibilityState:{disabled:u},"aria-disabled":u,testID:y,style:[j.base,D?{height:R.diameter,minWidth:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners}:{width:R.diameter,height:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners},v.shadows.lg,{backgroundColor:J,opacity:u?.55:1}],children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e&&!u?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[j.pressedTint,{backgroundColor:pressedTintFor(v,s),borderRadius:R.diameter/2,..._corners.smoothCorners}]}):null,D?(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[j.extendedRow,Q],children:[O,(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[j.labelClip,X],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{onLayout:e=>Y(e.nativeEvent.layout.width),style:[j.label,{color:K,fontSize:R.fontSize,fontWeight:v.typography.fontWeight.semibold,marginLeft:L},h],numberOfLines:1,children:i})})]}):O]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>_reactNative.StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},extendedRow:{flexDirection:"row",alignItems:"center"},labelClip:{flexDirection:"row",overflow:"hidden"},label:{includeFontPadding:!1,flexShrink:0}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:r,actions:n,open:i,defaultOpen:a=!1,onOpenChange:o,position:s="bottomRight",bottomOffset:c,size:l="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:_=!1,containerStyle:p,secondaryActionStyle:g,labelPillStyle:f,labelStyle:b,testID:h}=e,y=(0,_index.useTheme)(),v=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),x=sizeMap[l],R=(0,_react.useMemo)(()=>buildGroupStyles(y),[y]),j=(0,_usePresenceMotion.usePresenceMotion)(),w=j.duration("normal"),N=y.components.floatingActionButton,S=N?.edgeOffset??24,A=N?.bottomOffset??24,C=N?.secondaryGap??16,P=N?.staggerMs??50,E=(0,_react.useMemo)(()=>n.slice(0,6),[n]),k=E.length,I=(0,_react.useMemo)(()=>E.map((e,t)=>({action:e,index:t})).reverse(),[E]),F=__DEV__?describeActionProblem(n):"";(0,_react.useEffect)(()=>{__DEV__&&F&&_mobileCore.Logger.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${F}`)},[F]);const M="boolean"==typeof i,[V,z]=(0,_react.useState)(a),O=M?i:V,D=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;(0,_react.useEffect)(()=>{if(!m)return void(0,_index.setNativeValue)(D,1);const e=_reactNative.Animated.timing(D,{toValue:_?0:1,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,_,D,w,y.motion.easing.standard]);const B=m&&_;(0,_react.useEffect)(()=>{B&&O&&(M||z(!1),o?.(!1))},[B,O,M,o]);const T=x.diameter+(c??A)+v.bottom+S,L=D.interpolate({inputRange:[0,1],outputRange:j.range(T,0)}),q=D,H=(0,_react.useRef)((0,_index.createAnimatedValue)(O?1:0)).current,W=(0,_react.useRef)([]),[$,G]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const e=W.current;if(e.length!==k){if(e.length<k){const t=e.slice();for(let r=e.length;r<k;r+=1)t.push(new _reactNative.Animated.Value(O?1:0));W.current=t}else W.current=e.slice(0,k);G(e=>e+1)}},[k]),(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(H,{toValue:O?1:0,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});e.start();const t=W.current.map(e=>_reactNative.Animated.timing(e,{toValue:O?1:0,duration:w,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0})),r=O?t:[...t].reverse(),n=_reactNative.Animated.stagger(P,r);return n.start(),()=>{e.stop(),n.stop()}},[O,H,w,y.motion.easing.standard,k,$,P]);const U=(0,_react.useCallback)(e=>{const t=(0,_hapticUtils.resolveHaptic)(d,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),M||z(e),o?.(e)},[M,o,d]),Y=(0,_react.useRef)(null),Q=(0,_react.useRef)(O),X=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(Q.current===O)return;Q.current=O;const e=X.current;if(X.current=!1,B||e)return;const t=Y.current;t&&("web"===_reactNative.Platform.OS?t.focus?.():_reactNative.AccessibilityInfo.sendAccessibilityEvent(t,"focus"));const r=1===k?"action":"actions";(0,_announce.announce)(O?`${u}, expanded, ${k} ${r}`:`${u}, collapsed`)},[O,B,u,k]);const J=(0,_react.useCallback)(()=>{U(!O)},[O,U]),K=(0,_react.useCallback)(e=>{!1!==d&&(0,_hapticUtils.triggerHaptic)("selection"),X.current=!0,e.onPress(),M||z(!1),o?.(!1)},[M,o,d]),Z=(0,_react.useCallback)(()=>{O&&U(!1)},[O,U]);(0,_react.useEffect)(()=>{if(!O)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(U(!1),!0));return()=>e.remove()},[O,U]),(0,_react.useEffect)(()=>{if(!O||"web"!==_reactNative.Platform.OS)return;const onKeyDown=e=>{"Escape"===e.key&&U(!1)};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[O,U]);const ee=(0,_react.useMemo)(()=>{const e=(c??A)+v.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:S,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:S,alignItems:"flex-end"}}},[s,c,v.bottom,A,S]),slotOffset=e=>-(x.diameter+C)*(e+1),te=(0,_react.useMemo)(()=>{switch(s){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[s]),re=.78*x.diameter,ne=(0,_react.useMemo)(()=>{const e=re+y.spacing.sm;switch(s){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:x.diameter/2+re/2+y.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[s,re,x.diameter,y.spacing.sm]),ie=H.interpolate({inputRange:[0,1],outputRange:[0,.4]}),ae=H.interpolate(j.reduced?{inputRange:[0,.5,.5001,1],outputRange:["0deg","0deg","45deg","45deg"]}:{inputRange:[0,1],outputRange:["0deg","45deg"]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[O?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:y.colors.background.overlay,opacity:ie}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:Z,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:h?`${h}-backdrop`:void 0})}):null,(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:B?"none":"box-none",style:[ee,{transform:[{translateY:L}],opacity:q},p],accessibilityRole:"menu",testID:h,children:[I.map(({action:e,index:t})=>{const r=W.current[t];if(!r)return null;const n=r.interpolate({inputRange:[0,1],outputRange:j.range(0,slotOffset(t))}),i=r.interpolate({inputRange:[0,1],outputRange:j.range(.6,1)}),a=toneBackground(y,e.tone??"primary"),o=toneForeground(y,e.tone??"primary"),s=e.label?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[R.labelSlot,ne],testID:h?`${h}-label-${e.key}`:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.labelPill,y.shadows.sm,{backgroundColor:y.colors.background.elevated,paddingHorizontal:y.spacing.sm,paddingVertical:y.spacing.xs,borderRadius:y.radius.sm,..._corners.smoothCorners},f],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:y.colors.text.primary,fontSize:y.typography.fontSize.sm,fontWeight:y.typography.fontWeight.medium},b],numberOfLines:1,children:e.label})})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",accessibilityElementsHidden:!O,importantForAccessibility:O?"auto":"no-hide-descendants","aria-hidden":!O,style:[R.secondaryRow,te,{position:"absolute",bottom:0,opacity:r,transform:[{translateY:n},{scale:i}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>K(e),focusable:O,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[R.fabBase,y.shadows.md,{width:re,height:re,borderRadius:re/2,..._corners.smoothCorners,backgroundColor:a},g],testID:h?`${h}-action-${e.key}`:void 0,children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,e.tone??"primary"),borderRadius:re/2,..._corners.smoothCorners}]}):null,_react.default.isValidElement(e.icon)?e.icon:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:o},children:String(e.icon??"")})]})}),s]},e.key)}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:Y,onPress:J,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:O},"aria-expanded":O,style:[R.fabBase,y.shadows.lg,{width:x.diameter,height:x.diameter,borderRadius:x.diameter/2,..._corners.smoothCorners,backgroundColor:y.colors.primary}],testID:h?`${h}-primary`:void 0,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:_color.ACCENT_PRESSED_TINT,borderRadius:x.diameter/2,..._corners.smoothCorners}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:r?void 0:{transform:[{rotate:ae}]},children:O&&r?r:t})]})})]})]})};exports.FloatingActionButtonGroup=FloatingActionButtonGroup;const buildGroupStyles=e=>_reactNative.StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});var _default=exports.default=FloatingActionButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useRadioGroup=exports.default=exports.RadioGroupContext=exports.Radio=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_index2=require("../FieldBase/index.js"),_ChoiceText=require("../FieldBase/ChoiceText.js"),_RadioDot=require("./RadioDot.js"),_jsxRuntime=require("react/jsx-runtime");const RadioGroupContext=exports.RadioGroupContext=(0,_react.createContext)(null),useRadioGroup=()=>(0,_react.useContext)(RadioGroupContext);exports.useRadioGroup=useRadioGroup;const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=exports.Radio=(0,_react.forwardRef)((e,t)=>{const{value:i,selected:r,onChange:o,disabled:s=!1,label:a,description:l,error:c,size:d="md",tone:n="primary",accessibilityLabel:u,haptic:p,style:x,containerStyle:_,circleStyle:b,dotStyle:h,labelStyle:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useRadioGroup=exports.default=exports.RadioGroupContext=exports.Radio=void 0;var _mobileCore=require("@webority/mobile-core"),_react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_index2=require("../FieldBase/index.js"),_ChoiceText=require("../FieldBase/ChoiceText.js"),_RadioDot=require("./RadioDot.js"),_jsxRuntime=require("react/jsx-runtime");const RadioGroupContext=exports.RadioGroupContext=(0,_react.createContext)(null),useRadioGroup=()=>(0,_react.useContext)(RadioGroupContext);exports.useRadioGroup=useRadioGroup;const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=exports.Radio=(0,_react.forwardRef)((e,t)=>{const{value:i,selected:r,onChange:o,disabled:s=!1,label:a,description:l,error:c,size:d="md",tone:n="primary",accessibilityLabel:u,haptic:p,style:x,containerStyle:_,circleStyle:b,dotStyle:h,labelStyle:y,testID:R,...m}=e,C=(0,_index.useTheme)(),f=(0,_react.useMemo)(()=>buildStyles(C),[C]),g=useRadioGroup();__DEV__&&void 0===i&&_mobileCore.Logger.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const w=g?g.selectedValue===i:!!r,S=g&&g.disabled||s,j=toneColor(C,n),v=C.components.radio?.labelGap??10,T=u??(0,_index2.fieldTextAsString)(a),G=!0===g?.error||!0===c||(0,_index2.hasFieldText)(c);return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:t,onPress:e=>{if(S)return;const t=(0,_hapticUtils.resolveHaptic)(p,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),g?g.onChange(i):o?.(i)},disabled:S,accessibilityRole:"radio",accessibilityLabel:T,accessibilityHint:m.accessibilityHint??(0,_index2.fieldTextAsString)(l),accessibilityState:{checked:w,disabled:S},"aria-checked":w,"aria-disabled":S,testID:R,hitSlop:6,...m,style:({pressed:e})=>[f.row,(0,_ChoiceText.hasChoiceDetail)(l,c)?f.rowTop:null,{opacity:S?.55:e?.85:1},x,_],children:[(0,_jsxRuntime.jsx)(_RadioDot.RadioDot,{selected:w,color:j,disabled:S&&!w,size:d,style:[!G||w||S?null:{borderColor:C.colors.field.borderError},b],dotStyle:h}),(0,_jsxRuntime.jsx)(_ChoiceText.ChoiceText,{label:a,description:l,error:c,disabled:S,labelLines:2,style:{marginLeft:v},labelStyle:y})]})});Radio.displayName="Radio";const buildStyles=e=>_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});var _default=exports.default=Radio;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToast=exports.toast=exports.ToastProvider=exports.ToastHost=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Toast=_interopRequireDefault(require("./Toast.js")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=(0,_react.createContext)(null),ToastHostContext=(0,_react.createContext)(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const r=e?.[t??"default"];return void 0===r?defaultHaptic(t):r};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=(0,_react.useState)(!1);return(0,_react.useEffect)(()=>{if("web"===_reactNative.Platform.OS)return;let e=!0;_reactNative.AccessibilityInfo.isScreenReaderEnabled().then(r=>{e&&t(r)});const r=_reactNative.AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,r.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi,ToastProvider=({children:e,maxVisible:t=3,topOffset:r,bottomOffset:o,defaultDuration:s,haptics:n})=>{const a=(0,_react.useRef)({defaultDuration:s,haptics:n});a.current={defaultDuration:s,haptics:n};const[i,u]=(0,_react.useState)([]),[c,d]=(0,_react.useState)([]),l=useScreenReaderEnabled(),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToast=exports.toast=exports.ToastProvider=exports.ToastHost=void 0;var _mobileCore=require("@webority/mobile-core"),_react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_Toast=_interopRequireDefault(require("./Toast.js")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=(0,_react.createContext)(null),ToastHostContext=(0,_react.createContext)(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const r=e?.[t??"default"];return void 0===r?defaultHaptic(t):r};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=(0,_react.useState)(!1);return(0,_react.useEffect)(()=>{if("web"===_reactNative.Platform.OS)return;let e=!0;_reactNative.AccessibilityInfo.isScreenReaderEnabled().then(r=>{e&&t(r)});const r=_reactNative.AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,r.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi,ToastProvider=({children:e,maxVisible:t=3,topOffset:r,bottomOffset:o,defaultDuration:s,haptics:n})=>{const a=(0,_react.useRef)({defaultDuration:s,haptics:n});a.current={defaultDuration:s,haptics:n};const[i,u]=(0,_react.useState)([]),[c,d]=(0,_react.useState)([]),l=useScreenReaderEnabled(),_=(0,_react.useRef)(new Map),p=(0,_react.useRef)(new Map);(0,_react.useEffect)(()=>{const e=new Set(i.map(e=>e.id));for(const[t,r]of[..._.current])e.has(t)||(_.current.delete(t),r());for(const t of[...p.current.keys()])e.has(t)||p.current.delete(t)},[i]),(0,_react.useEffect)(()=>{const e=_.current;return()=>{for(const[t,r]of[...e])e.delete(t),r()}},[]);const f=(0,_react.useMemo)(()=>({screenReaderOn:l,readRemaining:e=>p.current.get(e),writeRemaining:(e,t)=>{p.current.set(e,t)}}),[l]),m=(0,_react.useCallback)(e=>{u(t=>t.filter(t=>t.id!==e))},[]),x=(0,_react.useCallback)(()=>{u([])},[]),v=(0,_react.useCallback)(e=>{const r=makeId(),{defaultDuration:o,haptics:s}=a.current,n={...e,duration:e.duration??o,id:r,shownAt:Date.now()},i=void 0!==e.haptic?e.haptic:resolveHaptics(s,e.variant);return!1!==i&&(0,_hapticUtils.triggerHaptic)(i),(0,_announce.announce)(e.description?`${e.message}. ${e.description}`:e.message,{polite:"error"!==e.variant}),u(r=>{const o=[...void 0===e.key?r:r.filter(t=>t.key!==e.key),n];return o.length>t?o.slice(o.length-t):o}),r},[t]),h=(0,_react.useCallback)((e,t)=>{const{onUndo:r,onCommit:o,undoLabel:s,duration:n,...a}=t,i={id:""},u=v({...a,message:e,duration:0===n?0:Math.max(n??6e3,6e3),countdown:!0,action:{label:s??"Undo",onPress:()=>{_.current.delete(i.id),r()}}});return i.id=u,o&&_.current.set(u,o),u},[v]),g=(0,_react.useMemo)(()=>({show:v,undo:h,hide:m,hideAll:x}),[v,h,m,x]);(0,_react.useEffect)(()=>(providerCount+=1,setActiveApi(g),()=>{providerCount-=1,providerCount<=0&&(providerCount=0,setActiveApi(null))}),[g]);const w=(0,_react.useCallback)(e=>{d(t=>[...t,e])},[]),b=(0,_react.useCallback)(e=>{d(t=>t.filter(t=>t!==e))},[]),T=c.length>0?c[c.length-1]:null,y=(0,_react.useMemo)(()=>({register:w,unregister:b,activeHostId:T,queue:i,hide:m,topOffset:r,bottomOffset:o,runtime:f}),[w,b,T,i,m,r,o,f]);return(0,_jsxRuntime.jsx)(ToastContext.Provider,{value:g,children:(0,_jsxRuntime.jsxs)(ToastHostContext.Provider,{value:y,children:[e,null===T?(0,_jsxRuntime.jsx)(ToastLayers,{queue:i,onDismiss:m,topOffset:r,bottomOffset:o,runtime:f}):null]})})};exports.ToastProvider=ToastProvider;let warnedHost=!1;const warnHostWithoutProvider=()=>{warnedHost||(warnedHost=!0,"undefined"!=typeof __DEV__&&__DEV__&&_mobileCore.Logger.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))},ToastHost=()=>{const e=(0,_react.useContext)(ToastHostContext),[t]=(0,_react.useState)(makeHostId),r=e?.register,o=e?.unregister;return(0,_react.useEffect)(()=>{if(r&&o)return r(t),()=>o(t);warnHostWithoutProvider()},[r,o,t]),e&&e.activeHostId===t?(0,_jsxRuntime.jsx)(ToastLayers,{queue:e.queue,onDismiss:e.hide,topOffset:e.topOffset,bottomOffset:e.bottomOffset,runtime:e.runtime}):null};exports.ToastHost=ToastHost;const ToastLayers=({queue:e,onDismiss:t,topOffset:r,bottomOffset:o,runtime:s})=>{const n=(0,_index.useTheme)(),a=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),i=(0,_react.useMemo)(()=>buildStyles(),[]),u=e.filter(e=>"top"===(e.position??"bottom")),c=e.filter(e=>"bottom"===(e.position??"bottom"));return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"toast-layer-top",pointerEvents:"box-none",style:[i.layer,i.top,{top:(r??a.top)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:u.map((e,r)=>(0,_jsxRuntime.jsx)(_Toast.default,{toast:e,index:u.length-1-r,shownAt:e.shownAt,runtime:s,onDismiss:t},e.id))}),(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[i.layer,i.bottom,{bottom:(o??a.bottom)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:c.map((e,r)=>(0,_jsxRuntime.jsx)(_Toast.default,{toast:e,index:c.length-1-r,shownAt:e.shownAt,runtime:s,onDismiss:t},e.id))})]})},useToast=()=>{const e=(0,_react.useContext)(ToastContext);if(!e)throw new Error("useToast must be used within a <ToastProvider>.");return e};exports.useToast=useToast;let warned=!1;const warnNoProvider=()=>{warned||(warned=!0,"undefined"!=typeof __DEV__&&__DEV__&&_mobileCore.Logger.warn("[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root."))},proxy=e=>{const t=getActiveApi();return t?e(t):(warnNoProvider(),"")},toast=exports.toast={show:e=>proxy(t=>t.show(e)),undo:(e,t)=>proxy(r=>r.undo(e,t)),success:(e,t)=>proxy(r=>r.show({...t,message:e,variant:"success"})),error:(e,t)=>proxy(r=>r.show({...t,message:e,variant:"error"})),warning:(e,t)=>proxy(r=>r.show({...t,message:e,variant:"warning"})),info:(e,t)=>proxy(r=>r.show({...t,message:e,variant:"info"})),hideAll:()=>{const e=getActiveApi();e?e.hideAll():warnNoProvider()}},buildStyles=()=>_reactNative.StyleSheet.create({layer:{position:"absolute",left:0,right:0},top:{alignItems:"stretch"},bottom:{alignItems:"stretch"}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,BackHandler,Easing,Platform,Pressable,StyleSheet,Text,View}from"react-native";import Reanimated,{cancelAnimation,Easing as ReanimatedEasing,useAnimatedStyle,useSharedValue,withTiming}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{ACCENT_PRESSED_TINT}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=forwardRef((e,t)=>{const{icon:n,onPress:o,label:s,collapsed:i=!1,size:r="md",tone:a="primary",position:l,bottomOffset:c,disabled:u=!1,hideOnScroll:d=!1,isScrolling:m=!1,accessibilityLabel:g,accessibilityHint:f,haptic:b,style:p,containerStyle:h,labelStyle:y,testID:S}=e,w=useTheme(),x=useSafeAreaInsets(),v=sizeMap[r],A=useMemo(()=>buildStyles(w),[w]),{scale:R,opacity:_,pressIn:E,pressOut:C}=usePressAnimation({enabled:!u}),j=usePresenceMotion(),P=w.components.floatingActionButton,I=P?.edgeOffset??24,k=P?.bottomOffset??24,V=useRef(createAnimatedValue(1)).current,F=j.duration("normal");useEffect(()=>{if(!d)return void setNativeValue(V,1);const e=Animated.timing(V,{toValue:m?0:1,duration:F,easing:Easing.bezier(...w.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[d,m,V,F,w.motion.easing.standard]);const T=v.diameter+(c??k)+x.bottom+I,z=V.interpolate({inputRange:[0,1],outputRange:j.range(T,0)}),D=useMemo(()=>Animated.multiply(V,_),[V,_]),B=n,M="string"==typeof s&&s.length>0,O=M&&i,H=j.reduced,L=w.spacing.sm,N=v.labelPaddingHorizontal,$=w.motion.duration.fast,G=w.motion.easing.standard,W=useSharedValue(O?1:0),[U,Y]=useState(null);useEffect(()=>{const e=O?1:0;return W.value=H?e:withTiming(e,{duration:$,easing:ReanimatedEasing.bezier(...G)}),()=>cancelAnimation(W)},[O,H,W,$,G]);const Q=useCallback(e=>{const t=Math.ceil(e);Y(e=>e===t?e:t)},[]),X=useAnimatedStyle(()=>({paddingHorizontal:N*(1-W.value)})),q=useAnimatedStyle(()=>{const e=Math.max(0,1-2*W.value);return null===U?W.value>=1?{opacity:e,width:0}:{opacity:e}:{opacity:e,width:(U+L)*(1-W.value)}}),J=u?w.colors.surface.disabled:toneBackground(w,a),K=u?w.colors.text.disabled:toneForeground(w,a),Z=useMemo(()=>{if(!l)return null;const e=(c??k)+x.bottom;switch(l){case"bottomLeft":return{position:"absolute",bottom:e,left:I};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:I}}},[l,c,x.bottom,k,I]);return _jsx(Animated.View,{style:[Z,{transform:[{translateY:z},{scale:R}],opacity:D},h,p],pointerEvents:d&&m?"none":"auto",children:_jsx(Pressable,{ref:t,onPress:e=>{if(u)return;const t=resolveHaptic(b,"impactLight");t&&triggerHaptic(t),o()},onPressIn:E,onPressOut:C,disabled:u,accessibilityRole:"button",accessibilityLabel:g,accessibilityHint:f,accessibilityState:{disabled:u},"aria-disabled":u,testID:S,style:[A.base,M?{height:v.diameter,minWidth:v.diameter,borderRadius:v.diameter/2,...smoothCorners}:{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,...smoothCorners},w.shadows.lg,{backgroundColor:J,opacity:u?.55:1}],children:({pressed:e})=>_jsxs(_Fragment,{children:[e&&!u?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[A.pressedTint,{backgroundColor:pressedTintFor(w,a),borderRadius:v.diameter/2,...smoothCorners}]}):null,M?_jsxs(Reanimated.View,{style:[A.extendedRow,X],children:[B,_jsx(Reanimated.View,{style:[A.labelClip,q],children:_jsx(Text,{onLayout:e=>Q(e.nativeEvent.layout.width),style:[A.label,{color:K,fontSize:v.fontSize,fontWeight:w.typography.fontWeight.semibold,marginLeft:L},y],numberOfLines:1,children:s})})]}):B]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},extendedRow:{flexDirection:"row",alignItems:"center"},labelClip:{flexDirection:"row",overflow:"hidden"},label:{includeFontPadding:!1,flexShrink:0}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:n,actions:o,open:s,defaultOpen:i=!1,onOpenChange:r,position:a="bottomRight",bottomOffset:l,size:c="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:g=!1,containerStyle:f,secondaryActionStyle:b,labelPillStyle:p,labelStyle:h,testID:y}=e,S=useTheme(),w=useSafeAreaInsets(),x=sizeMap[c],v=useMemo(()=>buildGroupStyles(S),[S]),A=usePresenceMotion(),R=A.duration("normal"),_=S.components.floatingActionButton,E=_?.edgeOffset??24,C=_?.bottomOffset??24,j=_?.secondaryGap??16,P=_?.staggerMs??50,I=useMemo(()=>o.slice(0,6),[o]),k=I.length,V=useMemo(()=>I.map((e,t)=>({action:e,index:t})).reverse(),[I]),F=__DEV__?describeActionProblem(o):"";useEffect(()=>{__DEV__&&F&&console.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${F}`)},[F]);const T="boolean"==typeof s,[z,D]=useState(i),B=T?s:z,M=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!m)return void setNativeValue(M,1);const e=Animated.timing(M,{toValue:g?0:1,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,g,M,R,S.motion.easing.standard]);const O=m&&g;useEffect(()=>{O&&B&&(T||D(!1),r?.(!1))},[O,B,T,r]);const H=x.diameter+(l??C)+w.bottom+E,L=M.interpolate({inputRange:[0,1],outputRange:A.range(H,0)}),N=M,$=useRef(createAnimatedValue(B?1:0)).current,G=useRef([]),[W,U]=useState(0);useEffect(()=>{const e=G.current;if(e.length!==k){if(e.length<k){const t=e.slice();for(let n=e.length;n<k;n+=1)t.push(new Animated.Value(B?1:0));G.current=t}else G.current=e.slice(0,k);U(e=>e+1)}},[k]),useEffect(()=>{const e=Animated.timing($,{toValue:B?1:0,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});e.start();const t=G.current.map(e=>Animated.timing(e,{toValue:B?1:0,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0})),n=B?t:[...t].reverse(),o=Animated.stagger(P,n);return o.start(),()=>{e.stop(),o.stop()}},[B,$,R,S.motion.easing.standard,k,W,P]);const Y=useCallback(e=>{const t=resolveHaptic(d,"impactLight");t&&triggerHaptic(t),T||D(e),r?.(e)},[T,r,d]),Q=useRef(null),X=useRef(B),q=useRef(!1);useEffect(()=>{if(X.current===B)return;X.current=B;const e=q.current;if(q.current=!1,O||e)return;const t=Q.current;t&&("web"===Platform.OS?t.focus?.():AccessibilityInfo.sendAccessibilityEvent(t,"focus"));announce(B?`${u}, expanded, ${k} ${1===k?"action":"actions"}`:`${u}, collapsed`)},[B,O,u,k]);const J=useCallback(()=>{Y(!B)},[B,Y]),K=useCallback(e=>{!1!==d&&triggerHaptic("selection"),q.current=!0,e.onPress(),T||D(!1),r?.(!1)},[T,r,d]),Z=useCallback(()=>{B&&Y(!1)},[B,Y]);useEffect(()=>{if(!B)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(Y(!1),!0));return()=>e.remove()},[B,Y]),useEffect(()=>{if(!B||"web"!==Platform.OS)return;const onKeyDown=e=>{"Escape"===e.key&&Y(!1)};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[B,Y]);const ee=useMemo(()=>{const e=(l??C)+w.bottom;switch(a){case"bottomLeft":return{position:"absolute",bottom:e,left:E,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:E,alignItems:"flex-end"}}},[a,l,w.bottom,C,E]),slotOffset=e=>-(x.diameter+j)*(e+1),te=useMemo(()=>{switch(a){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[a]),ne=.78*x.diameter,oe=useMemo(()=>{const e=ne+S.spacing.sm;switch(a){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:x.diameter/2+ne/2+S.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[a,ne,x.diameter,S.spacing.sm]),se=$.interpolate({inputRange:[0,1],outputRange:[0,.4]}),ie=$.interpolate(A.reduced?{inputRange:[0,.5,.5001,1],outputRange:["0deg","0deg","45deg","45deg"]}:{inputRange:[0,1],outputRange:["0deg","45deg"]});return _jsxs(_Fragment,{children:[B?_jsx(Animated.View,{pointerEvents:B?"auto":"none",style:[StyleSheet.absoluteFill,{backgroundColor:S.colors.background.overlay,opacity:se}],children:_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:Z,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:y?`${y}-backdrop`:void 0})}):null,_jsxs(Animated.View,{pointerEvents:O?"none":"box-none",style:[ee,{transform:[{translateY:L}],opacity:N},f],accessibilityRole:"menu",testID:y,children:[V.map(({action:e,index:t})=>{const n=G.current[t];if(!n)return null;const o=n.interpolate({inputRange:[0,1],outputRange:A.range(0,slotOffset(t))}),s=n.interpolate({inputRange:[0,1],outputRange:A.range(.6,1)}),i=toneBackground(S,e.tone??"primary"),r=toneForeground(S,e.tone??"primary"),a=e.label?_jsx(View,{pointerEvents:"none",style:[v.labelSlot,oe],testID:y?`${y}-label-${e.key}`:void 0,children:_jsx(View,{style:[v.labelPill,S.shadows.sm,{backgroundColor:S.colors.background.elevated,paddingHorizontal:S.spacing.sm,paddingVertical:S.spacing.xs,borderRadius:S.radius.sm,...smoothCorners},p],children:_jsx(Text,{style:[{color:S.colors.text.primary,fontSize:S.typography.fontSize.sm,fontWeight:S.typography.fontWeight.medium},h],numberOfLines:1,children:e.label})})}):null;return _jsxs(Animated.View,{pointerEvents:B?"auto":"none",accessibilityElementsHidden:!B,importantForAccessibility:B?"auto":"no-hide-descendants","aria-hidden":!B,style:[v.secondaryRow,te,{position:"absolute",bottom:0,opacity:n,transform:[{translateY:o},{scale:s}]}],children:[_jsx(Pressable,{onPress:()=>K(e),focusable:B,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[v.fabBase,S.shadows.md,{width:ne,height:ne,borderRadius:ne/2,...smoothCorners,backgroundColor:i},b],testID:y?`${y}-action-${e.key}`:void 0,children:({pressed:t})=>_jsxs(_Fragment,{children:[t?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[v.pressedTint,{backgroundColor:pressedTintFor(S,e.tone??"primary"),borderRadius:ne/2,...smoothCorners}]}):null,React.isValidElement(e.icon)?e.icon:_jsx(Text,{style:{color:r},children:String(e.icon??"")})]})}),a]},e.key)}),_jsx(Pressable,{ref:Q,onPress:J,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:B},"aria-expanded":B,style:[v.fabBase,S.shadows.lg,{width:x.diameter,height:x.diameter,borderRadius:x.diameter/2,...smoothCorners,backgroundColor:S.colors.primary}],testID:y?`${y}-primary`:void 0,children:({pressed:e})=>_jsxs(_Fragment,{children:[e?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[v.pressedTint,{backgroundColor:ACCENT_PRESSED_TINT,borderRadius:x.diameter/2,...smoothCorners}]}):null,_jsx(Animated.View,{style:n?void 0:{transform:[{rotate:ie}]},children:B&&n?n:t})]})})]})]})},buildGroupStyles=e=>StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});export{FloatingActionButton,FloatingActionButtonGroup};export default FloatingActionButton;
|
|
1
|
+
"use strict";import{Logger}from"@webority/mobile-core";import React,{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Animated,BackHandler,Easing,Platform,Pressable,StyleSheet,Text,View}from"react-native";import Reanimated,{cancelAnimation,Easing as ReanimatedEasing,useAnimatedStyle,useSharedValue,withTiming}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{ACCENT_PRESSED_TINT}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=forwardRef((e,t)=>{const{icon:n,onPress:o,label:i,collapsed:s=!1,size:r="md",tone:a="primary",position:l,bottomOffset:c,disabled:u=!1,hideOnScroll:d=!1,isScrolling:m=!1,accessibilityLabel:g,accessibilityHint:b,haptic:f,style:p,containerStyle:h,labelStyle:y,testID:S}=e,w=useTheme(),x=useSafeAreaInsets(),v=sizeMap[r],A=useMemo(()=>buildStyles(w),[w]),{scale:R,opacity:_,pressIn:E,pressOut:C}=usePressAnimation({enabled:!u}),j=usePresenceMotion(),P=w.components.floatingActionButton,I=P?.edgeOffset??24,k=P?.bottomOffset??24,V=useRef(createAnimatedValue(1)).current,F=j.duration("normal");useEffect(()=>{if(!d)return void setNativeValue(V,1);const e=Animated.timing(V,{toValue:m?0:1,duration:F,easing:Easing.bezier(...w.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[d,m,V,F,w.motion.easing.standard]);const T=v.diameter+(c??k)+x.bottom+I,z=V.interpolate({inputRange:[0,1],outputRange:j.range(T,0)}),D=useMemo(()=>Animated.multiply(V,_),[V,_]),B=n,M="string"==typeof i&&i.length>0,L=M&&s,O=j.reduced,H=w.spacing.sm,N=v.labelPaddingHorizontal,$=w.motion.duration.fast,G=w.motion.easing.standard,W=useSharedValue(L?1:0),[U,Y]=useState(null);useEffect(()=>{const e=L?1:0;return W.value=O?e:withTiming(e,{duration:$,easing:ReanimatedEasing.bezier(...G)}),()=>cancelAnimation(W)},[L,O,W,$,G]);const Q=useCallback(e=>{const t=Math.ceil(e);Y(e=>e===t?e:t)},[]),X=useAnimatedStyle(()=>({paddingHorizontal:N*(1-W.value)})),q=useAnimatedStyle(()=>{const e=Math.max(0,1-2*W.value);return null===U?W.value>=1?{opacity:e,width:0}:{opacity:e}:{opacity:e,width:(U+H)*(1-W.value)}}),J=u?w.colors.surface.disabled:toneBackground(w,a),K=u?w.colors.text.disabled:toneForeground(w,a),Z=useMemo(()=>{if(!l)return null;const e=(c??k)+x.bottom;switch(l){case"bottomLeft":return{position:"absolute",bottom:e,left:I};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:I}}},[l,c,x.bottom,k,I]);return _jsx(Animated.View,{style:[Z,{transform:[{translateY:z},{scale:R}],opacity:D},h,p],pointerEvents:d&&m?"none":"auto",children:_jsx(Pressable,{ref:t,onPress:e=>{if(u)return;const t=resolveHaptic(f,"impactLight");t&&triggerHaptic(t),o()},onPressIn:E,onPressOut:C,disabled:u,accessibilityRole:"button",accessibilityLabel:g,accessibilityHint:b,accessibilityState:{disabled:u},"aria-disabled":u,testID:S,style:[A.base,M?{height:v.diameter,minWidth:v.diameter,borderRadius:v.diameter/2,...smoothCorners}:{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,...smoothCorners},w.shadows.lg,{backgroundColor:J,opacity:u?.55:1}],children:({pressed:e})=>_jsxs(_Fragment,{children:[e&&!u?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[A.pressedTint,{backgroundColor:pressedTintFor(w,a),borderRadius:v.diameter/2,...smoothCorners}]}):null,M?_jsxs(Reanimated.View,{style:[A.extendedRow,X],children:[B,_jsx(Reanimated.View,{style:[A.labelClip,q],children:_jsx(Text,{onLayout:e=>Q(e.nativeEvent.layout.width),style:[A.label,{color:K,fontSize:v.fontSize,fontWeight:w.typography.fontWeight.semibold,marginLeft:H},y],numberOfLines:1,children:i})})]}):B]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},extendedRow:{flexDirection:"row",alignItems:"center"},labelClip:{flexDirection:"row",overflow:"hidden"},label:{includeFontPadding:!1,flexShrink:0}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:n,actions:o,open:i,defaultOpen:s=!1,onOpenChange:r,position:a="bottomRight",bottomOffset:l,size:c="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:g=!1,containerStyle:b,secondaryActionStyle:f,labelPillStyle:p,labelStyle:h,testID:y}=e,S=useTheme(),w=useSafeAreaInsets(),x=sizeMap[c],v=useMemo(()=>buildGroupStyles(S),[S]),A=usePresenceMotion(),R=A.duration("normal"),_=S.components.floatingActionButton,E=_?.edgeOffset??24,C=_?.bottomOffset??24,j=_?.secondaryGap??16,P=_?.staggerMs??50,I=useMemo(()=>o.slice(0,6),[o]),k=I.length,V=useMemo(()=>I.map((e,t)=>({action:e,index:t})).reverse(),[I]),F=__DEV__?describeActionProblem(o):"";useEffect(()=>{__DEV__&&F&&Logger.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${F}`)},[F]);const T="boolean"==typeof i,[z,D]=useState(s),B=T?i:z,M=useRef(createAnimatedValue(1)).current;useEffect(()=>{if(!m)return void setNativeValue(M,1);const e=Animated.timing(M,{toValue:g?0:1,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,g,M,R,S.motion.easing.standard]);const L=m&&g;useEffect(()=>{L&&B&&(T||D(!1),r?.(!1))},[L,B,T,r]);const O=x.diameter+(l??C)+w.bottom+E,H=M.interpolate({inputRange:[0,1],outputRange:A.range(O,0)}),N=M,$=useRef(createAnimatedValue(B?1:0)).current,G=useRef([]),[W,U]=useState(0);useEffect(()=>{const e=G.current;if(e.length!==k){if(e.length<k){const t=e.slice();for(let n=e.length;n<k;n+=1)t.push(new Animated.Value(B?1:0));G.current=t}else G.current=e.slice(0,k);U(e=>e+1)}},[k]),useEffect(()=>{const e=Animated.timing($,{toValue:B?1:0,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});e.start();const t=G.current.map(e=>Animated.timing(e,{toValue:B?1:0,duration:R,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0})),n=B?t:[...t].reverse(),o=Animated.stagger(P,n);return o.start(),()=>{e.stop(),o.stop()}},[B,$,R,S.motion.easing.standard,k,W,P]);const Y=useCallback(e=>{const t=resolveHaptic(d,"impactLight");t&&triggerHaptic(t),T||D(e),r?.(e)},[T,r,d]),Q=useRef(null),X=useRef(B),q=useRef(!1);useEffect(()=>{if(X.current===B)return;X.current=B;const e=q.current;if(q.current=!1,L||e)return;const t=Q.current;t&&("web"===Platform.OS?t.focus?.():AccessibilityInfo.sendAccessibilityEvent(t,"focus"));announce(B?`${u}, expanded, ${k} ${1===k?"action":"actions"}`:`${u}, collapsed`)},[B,L,u,k]);const J=useCallback(()=>{Y(!B)},[B,Y]),K=useCallback(e=>{!1!==d&&triggerHaptic("selection"),q.current=!0,e.onPress(),T||D(!1),r?.(!1)},[T,r,d]),Z=useCallback(()=>{B&&Y(!1)},[B,Y]);useEffect(()=>{if(!B)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(Y(!1),!0));return()=>e.remove()},[B,Y]),useEffect(()=>{if(!B||"web"!==Platform.OS)return;const onKeyDown=e=>{"Escape"===e.key&&Y(!1)};return window.addEventListener("keydown",onKeyDown),()=>window.removeEventListener("keydown",onKeyDown)},[B,Y]);const ee=useMemo(()=>{const e=(l??C)+w.bottom;switch(a){case"bottomLeft":return{position:"absolute",bottom:e,left:E,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:E,alignItems:"flex-end"}}},[a,l,w.bottom,C,E]),slotOffset=e=>-(x.diameter+j)*(e+1),te=useMemo(()=>{switch(a){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[a]),ne=.78*x.diameter,oe=useMemo(()=>{const e=ne+S.spacing.sm;switch(a){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:x.diameter/2+ne/2+S.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[a,ne,x.diameter,S.spacing.sm]),ie=$.interpolate({inputRange:[0,1],outputRange:[0,.4]}),se=$.interpolate(A.reduced?{inputRange:[0,.5,.5001,1],outputRange:["0deg","0deg","45deg","45deg"]}:{inputRange:[0,1],outputRange:["0deg","45deg"]});return _jsxs(_Fragment,{children:[B?_jsx(Animated.View,{pointerEvents:B?"auto":"none",style:[StyleSheet.absoluteFill,{backgroundColor:S.colors.background.overlay,opacity:ie}],children:_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:Z,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:y?`${y}-backdrop`:void 0})}):null,_jsxs(Animated.View,{pointerEvents:L?"none":"box-none",style:[ee,{transform:[{translateY:H}],opacity:N},b],accessibilityRole:"menu",testID:y,children:[V.map(({action:e,index:t})=>{const n=G.current[t];if(!n)return null;const o=n.interpolate({inputRange:[0,1],outputRange:A.range(0,slotOffset(t))}),i=n.interpolate({inputRange:[0,1],outputRange:A.range(.6,1)}),s=toneBackground(S,e.tone??"primary"),r=toneForeground(S,e.tone??"primary"),a=e.label?_jsx(View,{pointerEvents:"none",style:[v.labelSlot,oe],testID:y?`${y}-label-${e.key}`:void 0,children:_jsx(View,{style:[v.labelPill,S.shadows.sm,{backgroundColor:S.colors.background.elevated,paddingHorizontal:S.spacing.sm,paddingVertical:S.spacing.xs,borderRadius:S.radius.sm,...smoothCorners},p],children:_jsx(Text,{style:[{color:S.colors.text.primary,fontSize:S.typography.fontSize.sm,fontWeight:S.typography.fontWeight.medium},h],numberOfLines:1,children:e.label})})}):null;return _jsxs(Animated.View,{pointerEvents:B?"auto":"none",accessibilityElementsHidden:!B,importantForAccessibility:B?"auto":"no-hide-descendants","aria-hidden":!B,style:[v.secondaryRow,te,{position:"absolute",bottom:0,opacity:n,transform:[{translateY:o},{scale:i}]}],children:[_jsx(Pressable,{onPress:()=>K(e),focusable:B,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[v.fabBase,S.shadows.md,{width:ne,height:ne,borderRadius:ne/2,...smoothCorners,backgroundColor:s},f],testID:y?`${y}-action-${e.key}`:void 0,children:({pressed:t})=>_jsxs(_Fragment,{children:[t?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[v.pressedTint,{backgroundColor:pressedTintFor(S,e.tone??"primary"),borderRadius:ne/2,...smoothCorners}]}):null,React.isValidElement(e.icon)?e.icon:_jsx(Text,{style:{color:r},children:String(e.icon??"")})]})}),a]},e.key)}),_jsx(Pressable,{ref:Q,onPress:J,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:B},"aria-expanded":B,style:[v.fabBase,S.shadows.lg,{width:x.diameter,height:x.diameter,borderRadius:x.diameter/2,...smoothCorners,backgroundColor:S.colors.primary}],testID:y?`${y}-primary`:void 0,children:({pressed:e})=>_jsxs(_Fragment,{children:[e?_jsx(View,{pointerEvents:"none",testID:"fab-pressed",style:[v.pressedTint,{backgroundColor:ACCENT_PRESSED_TINT,borderRadius:x.diameter/2,...smoothCorners}]}):null,_jsx(Animated.View,{style:n?void 0:{transform:[{rotate:se}]},children:B&&n?n:t})]})})]})]})},buildGroupStyles=e=>StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});export{FloatingActionButton,FloatingActionButtonGroup};export default FloatingActionButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{RadioDot}from"./RadioDot.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RadioGroupContext=createContext(null);export const useRadioGroup=()=>useContext(RadioGroupContext);const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:r,onChange:i,disabled:s=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:
|
|
1
|
+
"use strict";import{Logger}from"@webority/mobile-core";import{createContext,forwardRef,useContext,useMemo}from"react";import{Pressable,StyleSheet}from"react-native";import{useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{fieldTextAsString,hasFieldText}from"../FieldBase/index.js";import{ChoiceText,hasChoiceDetail}from"../FieldBase/ChoiceText.js";import{RadioDot}from"./RadioDot.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const RadioGroupContext=createContext(null);export const useRadioGroup=()=>useContext(RadioGroupContext);const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},Radio=forwardRef((e,t)=>{const{value:o,selected:r,onChange:i,disabled:s=!1,label:a,description:l,error:c,size:n="md",tone:d="primary",accessibilityLabel:p,haptic:u,style:m,containerStyle:b,circleStyle:x,dotStyle:h,labelStyle:y,testID:f,...g}=e,S=useTheme(),w=useMemo(()=>buildStyles(S),[S]),C=useRadioGroup();__DEV__&&void 0===o&&Logger.warn("[@webority/mobile-ui] Radio was rendered without a `value`. Selection compares against it, so the group cannot track which option is chosen.");const R=C?C.selectedValue===o:!!r,j=C&&C.disabled||s,T=toneColor(S,d),D=S.components.radio?.labelGap??10,_=p??fieldTextAsString(a),v=!0===C?.error||!0===c||hasFieldText(c);return _jsxs(Pressable,{ref:t,onPress:e=>{if(j)return;const t=resolveHaptic(u,"selection");t&&triggerHaptic(t),C?C.onChange(o):i?.(o)},disabled:j,accessibilityRole:"radio",accessibilityLabel:_,accessibilityHint:g.accessibilityHint??fieldTextAsString(l),accessibilityState:{checked:R,disabled:j},"aria-checked":R,"aria-disabled":j,testID:f,hitSlop:6,...g,style:({pressed:e})=>[w.row,hasChoiceDetail(l,c)?w.rowTop:null,{opacity:j?.55:e?.85:1},m,b],children:[_jsx(RadioDot,{selected:R,color:T,disabled:j&&!R,size:n,style:[!v||R||j?null:{borderColor:S.colors.field.borderError},x],dotStyle:h}),_jsx(ChoiceText,{label:a,description:l,error:c,disabled:j,labelLines:2,style:{marginLeft:D},labelStyle:y})]})});Radio.displayName="Radio";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},rowTop:{alignItems:"flex-start"}});export{Radio};export default Radio;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Platform,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Toast from"./Toast.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=createContext(null),ToastHostContext=createContext(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const o=e?.[t??"default"];return void 0===o?defaultHaptic(t):o};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=useState(!1);return useEffect(()=>{if("web"===Platform.OS)return;let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(o=>{e&&t(o)});const o=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,o.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi;export const ToastProvider=({children:e,maxVisible:t=3,topOffset:o,bottomOffset:s,defaultDuration:r,haptics:n})=>{const
|
|
1
|
+
"use strict";import{Logger}from"@webority/mobile-core";import{createContext,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";import{AccessibilityInfo,Platform,StyleSheet,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{triggerHaptic}from"../../utils/hapticUtils.js";import Toast from"./Toast.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const MAX_VISIBLE=3,UNDO_DEFAULT_DURATION_MS=6e3,UNDO_MIN_DURATION_MS=6e3,ToastContext=createContext(null),ToastHostContext=createContext(null);let nextId=0;const makeId=()=>(nextId+=1,`toast-${Date.now().toString(36)}-${nextId.toString(36)}`),defaultHaptic=e=>{switch(e){case"error":return"notificationError";case"success":return"notificationSuccess";case"warning":return"notificationWarning";default:return"selection"}},resolveHaptics=(e,t)=>{if(!1===e)return!1;const o=e?.[t??"default"];return void 0===o?defaultHaptic(t):o};let nextHostId=0;const makeHostId=()=>(nextHostId+=1,nextHostId),useScreenReaderEnabled=()=>{const[e,t]=useState(!1);return useEffect(()=>{if("web"===Platform.OS)return;let e=!0;AccessibilityInfo.isScreenReaderEnabled().then(o=>{e&&t(o)});const o=AccessibilityInfo.addEventListener("screenReaderChanged",t);return()=>{e=!1,o.remove()}},[]),e};let providerCount=0,activeApi=null;const setActiveApi=e=>{activeApi=e},getActiveApi=()=>activeApi;export const ToastProvider=({children:e,maxVisible:t=3,topOffset:o,bottomOffset:s,defaultDuration:r,haptics:n})=>{const i=useRef({defaultDuration:r,haptics:n});i.current={defaultDuration:r,haptics:n};const[a,u]=useState([]),[c,d]=useState([]),l=useScreenReaderEnabled(),f=useRef(new Map),m=useRef(new Map);useEffect(()=>{const e=new Set(a.map(e=>e.id));for(const[t,o]of[...f.current])e.has(t)||(f.current.delete(t),o());for(const t of[...m.current.keys()])e.has(t)||m.current.delete(t)},[a]),useEffect(()=>{const e=f.current;return()=>{for(const[t,o]of[...e])e.delete(t),o()}},[]);const p=useMemo(()=>({screenReaderOn:l,readRemaining:e=>m.current.get(e),writeRemaining:(e,t)=>{m.current.set(e,t)}}),[l]),h=useCallback(e=>{u(t=>t.filter(t=>t.id!==e))},[]),g=useCallback(()=>{u([])},[]),x=useCallback(e=>{const o=makeId(),{defaultDuration:s,haptics:r}=i.current,n={...e,duration:e.duration??s,id:o,shownAt:Date.now()},a=void 0!==e.haptic?e.haptic:resolveHaptics(r,e.variant);return!1!==a&&triggerHaptic(a),announce(e.description?`${e.message}. ${e.description}`:e.message,{polite:"error"!==e.variant}),u(o=>{const s=[...void 0===e.key?o:o.filter(t=>t.key!==e.key),n];return s.length>t?s.slice(s.length-t):s}),o},[t]),v=useCallback((e,t)=>{const{onUndo:o,onCommit:s,undoLabel:r,duration:n,...i}=t,a={id:""},u=x({...i,message:e,duration:0===n?0:Math.max(n??6e3,6e3),countdown:!0,action:{label:r??"Undo",onPress:()=>{f.current.delete(a.id),o()}}});return a.id=u,s&&f.current.set(u,s),u},[x]),w=useMemo(()=>({show:x,undo:v,hide:h,hideAll:g}),[x,v,h,g]);useEffect(()=>(providerCount+=1,setActiveApi(w),()=>{providerCount-=1,providerCount<=0&&(providerCount=0,setActiveApi(null))}),[w]);const b=useCallback(e=>{d(t=>[...t,e])},[]),_=useCallback(e=>{d(t=>t.filter(t=>t!==e))},[]),y=c.length>0?c[c.length-1]:null,A=useMemo(()=>({register:b,unregister:_,activeHostId:y,queue:a,hide:h,topOffset:o,bottomOffset:s,runtime:p}),[b,_,y,a,h,o,s,p]);return _jsx(ToastContext.Provider,{value:w,children:_jsxs(ToastHostContext.Provider,{value:A,children:[e,null===y?_jsx(ToastLayers,{queue:a,onDismiss:h,topOffset:o,bottomOffset:s,runtime:p}):null]})})};let warnedHost=!1;const warnHostWithoutProvider=()=>{warnedHost||(warnedHost=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] <ToastHost /> rendered outside a <ToastProvider />; it renders nothing. Mount a provider near your app root."))};export const ToastHost=()=>{const e=useContext(ToastHostContext),[t]=useState(makeHostId),o=e?.register,s=e?.unregister;return useEffect(()=>{if(o&&s)return o(t),()=>s(t);warnHostWithoutProvider()},[o,s,t]),e&&e.activeHostId===t?_jsx(ToastLayers,{queue:e.queue,onDismiss:e.hide,topOffset:e.topOffset,bottomOffset:e.bottomOffset,runtime:e.runtime}):null};const ToastLayers=({queue:e,onDismiss:t,topOffset:o,bottomOffset:s,runtime:r})=>{const n=useTheme(),i=useSafeAreaInsets(),a=useMemo(()=>buildStyles(),[]),u=e.filter(e=>"top"===(e.position??"bottom")),c=e.filter(e=>"bottom"===(e.position??"bottom"));return _jsxs(_Fragment,{children:[_jsx(View,{testID:"toast-layer-top",pointerEvents:"box-none",style:[a.layer,a.top,{top:(o??i.top)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:u.map((e,o)=>_jsx(Toast,{toast:e,index:u.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))}),_jsx(View,{testID:"toast-layer-bottom",pointerEvents:"box-none",style:[a.layer,a.bottom,{bottom:(s??i.bottom)+n.spacing.sm,paddingHorizontal:n.spacing.md}],children:c.map((e,o)=>_jsx(Toast,{toast:e,index:c.length-1-o,shownAt:e.shownAt,runtime:r,onDismiss:t},e.id))})]})};export const useToast=()=>{const e=useContext(ToastContext);if(!e)throw new Error("useToast must be used within a <ToastProvider>.");return e};let warned=!1;const warnNoProvider=()=>{warned||(warned=!0,"undefined"!=typeof __DEV__&&__DEV__&&Logger.warn("[toast] No <ToastProvider /> mounted; toast() calls are no-ops. Mount a provider near your app root."))},proxy=e=>{const t=getActiveApi();return t?e(t):(warnNoProvider(),"")};export const toast={show:e=>proxy(t=>t.show(e)),undo:(e,t)=>proxy(o=>o.undo(e,t)),success:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"success"})),error:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"error"})),warning:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"warning"})),info:(e,t)=>proxy(o=>o.show({...t,message:e,variant:"info"})),hideAll:()=>{const e=getActiveApi();e?e.hideAll():warnNoProvider()}};const buildStyles=()=>StyleSheet.create({layer:{position:"absolute",left:0,right:0},top:{alignItems:"stretch"},bottom:{alignItems:"stretch"}});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.3",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
|
-
"@webority/mobile-core": "0.16.
|
|
110
|
+
"@webority/mobile-core": "0.16.3"
|
|
111
111
|
},
|
|
112
112
|
"scripts": {
|
|
113
113
|
"build": "bob build && node ../../scripts/minify-lib.mjs",
|