@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/Badge/Badge.js

@@ -1,294 +1 @@
-"use strict";
-
-import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
-import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { Skeleton } from "../Skeleton/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'primary':
-      return {
-        background: theme.colors.primary,
-        text: theme.colors.onPrimary
-      };
-    case 'success':
-      return {
-        background: theme.colors.success,
-        text: theme.colors.onSuccess
-      };
-    case 'warning':
-      return {
-        background: theme.colors.warning,
-        text: theme.colors.onWarning
-      };
-    case 'info':
-      return {
-        background: theme.colors.info,
-        text: theme.colors.onInfo
-      };
-    case 'neutral':
-      return {
-        background: theme.colors.background.tertiary,
-        text: theme.colors.text.primary
-      };
-    case 'error':
-    default:
-      return {
-        background: theme.colors.error,
-        text: theme.colors.onError
-      };
-  }
-};
-const sizeMap = {
-  sm: {
-    fontSize: 10,
-    minWidth: 16,
-    height: 16,
-    paddingH: 5,
-    dot: 8
-  },
-  md: {
-    fontSize: 11,
-    minWidth: 20,
-    height: 20,
-    paddingH: 6,
-    dot: 10
-  }
-};
-const anchorPosition = (anchor, offset) => {
-  const o = -offset;
-  switch (anchor) {
-    case 'topLeft':
-      return {
-        top: o,
-        left: o
-      };
-    case 'bottomRight':
-      return {
-        bottom: o,
-        right: o
-      };
-    case 'bottomLeft':
-      return {
-        bottom: o,
-        left: o
-      };
-    case 'topRight':
-    default:
-      return {
-        top: o,
-        right: o
-      };
-  }
-};
-const formatValue = (value, max) => {
-  if (value === undefined || value === null) {
-    return null;
-  }
-  if (typeof value === 'number') {
-    if (value <= 0) {
-      return null;
-    }
-    return value > max ? `${max}+` : String(value);
-  }
-  const str = String(value);
-  return str.length === 0 ? null : str;
-};
-const Badge = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value,
-    max = 99,
-    variant = 'standard',
-    tone = 'error',
-    size = 'sm',
-    invisible = false,
-    loading = false,
-    children,
-    anchor = 'topRight',
-    pulse = false,
-    accessibilityLabel,
-    style,
-    badgeStyle,
-    textStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const tones = useMemo(() => toneFor(theme, tone), [theme, tone]);
-  const overrides = theme.components.badge?.[size];
-  const sz = {
-    fontSize: overrides?.fontSize ?? sizeMap[size].fontSize,
-    minWidth: overrides?.minWidth ?? sizeMap[size].minWidth,
-    height: overrides?.height ?? sizeMap[size].height,
-    paddingH: overrides?.paddingHorizontal ?? sizeMap[size].paddingH,
-    dot: overrides?.dotSize ?? sizeMap[size].dot
-  };
-  const badgeBorderWidth = theme.components.badge?.borderWidth ?? 1.5;
-  const badgeAnchorOffset = theme.components.badge?.anchorOffset ?? 4;
-  const formatted = variant === 'dot' ? null : formatValue(value, max);
-  const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
-  const pulseScale = useRef(createAnimatedValue(1)).current;
-  useEffect(() => {
-    if (!pulse || !shouldRender) {
-      setNativeValue(pulseScale, 1);
-      return;
-    }
-    const loop = Animated.loop(Animated.sequence([Animated.timing(pulseScale, {
-      toValue: 1.15,
-      duration: theme.motion.duration.slow,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }), Animated.timing(pulseScale, {
-      toValue: 1,
-      duration: theme.motion.duration.slow,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    })]));
-    loop.start();
-    return () => {
-      loop.stop();
-    };
-  }, [pulse, shouldRender, pulseScale, theme]);
-  const isDot = variant === 'dot';
-  const a11yRole = isDot ? 'image' : 'text';
-  const a11yLabel = accessibilityLabel ?? (isDot ? 'Notification indicator' : formatted ? `${formatted} unread` : undefined);
-  const badgeContent = shouldRender ? /*#__PURE__*/_jsx(Animated.View, {
-    style: [styles.badge, isDot ? {
-      width: sz.dot,
-      height: sz.dot,
-      borderRadius: sz.dot / 2,
-      ...smoothCorners,
-      paddingHorizontal: 0
-    } : {
-      minWidth: sz.minWidth,
-      height: sz.height,
-      borderRadius: theme.radius.full,
-      ...smoothCorners,
-      paddingHorizontal: sz.paddingH
-    }, {
-      backgroundColor: tones.background,
-      transform: [{
-        scale: pulseScale
-      }]
-    }, children ? {
-      position: 'absolute',
-      borderWidth: badgeBorderWidth,
-      borderColor: theme.colors.background.elevated,
-      ...anchorPosition(anchor, badgeAnchorOffset)
-    } : null, badgeStyle],
-    accessible: true,
-    accessibilityRole: a11yRole,
-    accessibilityLabel: a11yLabel,
-    children: !isDot && formatted !== null ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: tones.text,
-        fontSize: sz.fontSize,
-        ...fontFor(theme, 'bold')
-      }, textStyle],
-      numberOfLines: 1,
-      allowFontScaling: false,
-      children: formatted ?? ' '
-    }) : null
-  }) : null;
-  const rendered = children ? /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [styles.wrapper, style],
-    testID: testID,
-    children: [children, badgeContent]
-  }) : /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: style,
-    testID: testID,
-    children: badgeContent
-  });
-  if (loading) {
-    return /*#__PURE__*/_jsx(BadgeSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Badge.displayName = 'Badge';
-
-/**
- * Placeholder shape for `<Badge>`. Dot variant renders a small circle at
- * the dot size; standard variant renders a pill shape at the badge's
- * resolved height. Anchored badges (with `children`) overlay the badge
- * shape on a wrapper that hosts the children below.
- */
-const BadgeSkeleton = ({
-  variant = 'standard',
-  size = 'md',
-  children,
-  anchor,
-  style,
-  badgeStyle
-}) => {
-  const sz = sizeMap[size];
-  if (variant === 'dot') {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      shape: "circle",
-      width: sz.dot,
-      height: sz.dot,
-      style: [badgeStyle, style]
-    });
-  }
-  const pillRadius = sz.height / 2;
-  // Anchored badge: render the children underneath, overlay the badge.
-  if (children !== undefined) {
-    const offsetStyle = anchor === 'topLeft' ? {
-      top: -sz.height / 2,
-      left: -sz.height / 2
-    } : anchor === 'bottomRight' ? {
-      bottom: -sz.height / 2,
-      right: -sz.height / 2
-    } : anchor === 'bottomLeft' ? {
-      bottom: -sz.height / 2,
-      left: -sz.height / 2
-    } : {
-      top: -sz.height / 2,
-      right: -sz.height / 2
-    };
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.wrapper, style],
-      children: [children, /*#__PURE__*/_jsx(View, {
-        style: [{
-          position: 'absolute'
-        }, offsetStyle],
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          width: sz.minWidth + sz.paddingH,
-          height: sz.height,
-          radius: pillRadius,
-          style: badgeStyle
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(Skeleton, {
-    width: sz.minWidth + sz.paddingH,
-    height: sz.height,
-    radius: pillRadius,
-    style: [badgeStyle, style]
-  });
-};
-BadgeSkeleton.displayName = 'BadgeSkeleton';
-Badge.Skeleton = BadgeSkeleton;
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-    alignSelf: 'flex-start'
-  },
-  badge: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row'
-  },
-  text: {
-    textAlign: 'center',
-    includeFontPadding: false
-  }
-});
-export { Badge };
-export default Badge;
-//# sourceMappingURL=Badge.js.map
+import t,{forwardRef as e,useEffect as i,useMemo as o,useRef as r}from"react";import{Animated as n,Easing as a,StyleSheet as s,Text as d,View as l}from"react-native";import{createAnimatedValue as c,fontFor as h,setNativeValue as g,useTheme as u}from"../../theme/index.js";import{smoothCorners as m}from"../../utils/corners.js";import{Skeleton as p}from"../Skeleton/index.js";import{jsx as f,jsxs as b}from"react/jsx-runtime";const y={sm:{fontSize:10,minWidth:16,height:16,paddingH:5,dot:8},md:{fontSize:11,minWidth:20,height:20,paddingH:6,dot:10}},anchorPosition=(t,e)=>{const i=-e;switch(t){case"topLeft":return{top:i,left:i};case"bottomRight":return{bottom:i,right:i};case"bottomLeft":return{bottom:i,left:i};default:return{top:i,right:i}}},x=e((t,e)=>{const{value:s,max:p=99,variant:x="standard",tone:z="error",size:w="sm",invisible:v=!1,loading:k=!1,children:W,anchor:H="topRight",pulse:j=!1,accessibilityLabel:L,style:D,badgeStyle:R,textStyle:I,testID:N}=t,C=u(),F=o(()=>((t,e)=>{switch(e){case"primary":return{background:t.colors.primary,text:t.colors.onPrimary};case"success":return{background:t.colors.success,text:t.colors.onSuccess};case"warning":return{background:t.colors.warning,text:t.colors.onWarning};case"info":return{background:t.colors.info,text:t.colors.onInfo};case"neutral":return{background:t.colors.background.tertiary,text:t.colors.text.primary};default:return{background:t.colors.error,text:t.colors.onError}}})(C,z),[C,z]),V=C.components.badge?.[w],B={fontSize:V?.fontSize??y[w].fontSize,minWidth:V?.minWidth??y[w].minWidth,height:V?.height??y[w].height,paddingH:V?.paddingHorizontal??y[w].paddingH,dot:V?.dotSize??y[w].dot},M=C.components.badge?.borderWidth??1.5,O=C.components.badge?.anchorOffset??4,P="dot"===x?null:((t,e)=>{if(null==t)return null;if("number"==typeof t)return t<=0?null:t>e?`${e}+`:String(t);const i=String(t);return 0===i.length?null:i})(s,p),$=!v&&("dot"===x||null!==P),q=r(c(1)).current;i(()=>{if(!j||!$)return void g(q,1);const t=n.loop(n.sequence([n.timing(q,{toValue:1.15,duration:C.motion.duration.slow,easing:a.bezier(...C.motion.easing.standard),useNativeDriver:!0}),n.timing(q,{toValue:1,duration:C.motion.duration.slow,easing:a.bezier(...C.motion.easing.standard),useNativeDriver:!0})]));return t.start(),()=>{t.stop()}},[j,$,q,C]);const A="dot"===x,E=A?"image":"text",G=L??(A?"Notification indicator":P?`${P} unread`:void 0),J=$?f(n.View,{style:[S.badge,A?{width:B.dot,height:B.dot,borderRadius:B.dot/2,...m,paddingHorizontal:0}:{minWidth:B.minWidth,minHeight:B.height,borderRadius:C.radius.full,...m,paddingHorizontal:B.paddingH},{backgroundColor:F.background,transform:[{scale:q}]},W?{position:"absolute",borderWidth:M,borderColor:C.colors.background.elevated,...anchorPosition(H,O)}:null,R],accessible:!0,accessibilityRole:E,accessibilityLabel:G,children:A||null===P?null:f(d,{style:[S.text,{color:F.text,fontSize:B.fontSize,...h(C,"bold")},I],numberOfLines:1,maxFontSizeMultiplier:C.maxFontSizeMultiplier,children:P??" "})}):null,K=W?b(l,{ref:e,style:[S.wrapper,D],testID:N,children:[W,J]}):f(l,{ref:e,style:D,testID:N,children:J});return k?f(BadgeSkeleton,{...t}):K});x.displayName="Badge";const BadgeSkeleton=({variant:t="standard",size:e="md",children:i,anchor:o,style:r,badgeStyle:n})=>{const a=y[e];if("dot"===t)return f(p,{shape:"circle",width:a.dot,height:a.dot,style:[n,r]});const s=a.height/2;if(void 0!==i){const t="topLeft"===o?{top:-a.height/2,left:-a.height/2}:"bottomRight"===o?{bottom:-a.height/2,right:-a.height/2}:"bottomLeft"===o?{bottom:-a.height/2,left:-a.height/2}:{top:-a.height/2,right:-a.height/2};return b(l,{style:[S.wrapper,r],children:[i,f(l,{style:[{position:"absolute"},t],children:f(p,{width:a.minWidth+a.paddingH,height:a.height,radius:s,style:n})})]})}return f(p,{width:a.minWidth+a.paddingH,height:a.height,radius:s,style:[n,r]})};BadgeSkeleton.displayName="BadgeSkeleton",x.Skeleton=BadgeSkeleton;const S=s.create({wrapper:{position:"relative",alignSelf:"flex-start"},badge:{alignItems:"center",justifyContent:"center",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1}});export{x as Badge};export default x;

package/lib/module/components/Badge/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { Badge, default } from "./Badge.js";
-//# sourceMappingURL=index.js.map
+export{Badge,default}from"./Badge.js";