@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Badge/Badge.js

@@ -1,298 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Badge = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _index2 = require("../Skeleton/index.js");
-var _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 o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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 = exports.Badge = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const tones = (0, _react.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
-  (0, _react.useEffect)(() => {
-    if (!pulse || !shouldRender) {
-      (0, _index.setNativeValue)(pulseScale, 1);
-      return;
-    }
-    const loop = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
-      toValue: 1.15,
-      duration: theme.motion.duration.slow,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(pulseScale, {
-      toValue: 1,
-      duration: theme.motion.duration.slow,
-      easing: _reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [styles.badge, isDot ? {
-      width: sz.dot,
-      height: sz.dot,
-      borderRadius: sz.dot / 2,
-      ..._corners.smoothCorners,
-      paddingHorizontal: 0
-    } : {
-      minWidth: sz.minWidth,
-      height: sz.height,
-      borderRadius: theme.radius.full,
-      ..._corners.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.text, {
-        color: tones.text,
-        fontSize: sz.fontSize,
-        ...(0, _index.fontFor)(theme, 'bold')
-      }, textStyle],
-      numberOfLines: 1,
-      allowFontScaling: false,
-      children: formatted ?? ' '
-    }) : null
-  }) : null;
-  const rendered = children ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    style: [styles.wrapper, style],
-    testID: testID,
-    children: [children, badgeContent]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    style: style,
-    testID: testID,
-    children: badgeContent
-  });
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_index2.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.wrapper, style],
-      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [{
-          position: 'absolute'
-        }, offsetStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-          width: sz.minWidth + sz.paddingH,
-          height: sz.height,
-          radius: pillRadius,
-          style: badgeStyle
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-    width: sz.minWidth + sz.paddingH,
-    height: sz.height,
-    radius: pillRadius,
-    style: [badgeStyle, style]
-  });
-};
-BadgeSkeleton.displayName = 'BadgeSkeleton';
-Badge.Skeleton = BadgeSkeleton;
-const styles = _reactNative.StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-    alignSelf: 'flex-start'
-  },
-  badge: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row'
-  },
-  text: {
-    textAlign: 'center',
-    includeFontPadding: false
-  }
-});
-var _default = exports.default = Badge;
-//# sourceMappingURL=Badge.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Badge=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(n=t?r:i){if(n.has(e))return n.get(e);n.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?n(a,t,o):a[t]=e[t]);return a})(e,t)}const toneFor=(e,t)=>{switch(t){case"primary":return{background:e.colors.primary,text:e.colors.onPrimary};case"success":return{background:e.colors.success,text:e.colors.onSuccess};case"warning":return{background:e.colors.warning,text:e.colors.onWarning};case"info":return{background:e.colors.info,text:e.colors.onInfo};case"neutral":return{background:e.colors.background.tertiary,text:e.colors.text.primary};default:return{background:e.colors.error,text:e.colors.onError}}},sizeMap={sm:{fontSize:10,minWidth:16,height:16,paddingH:5,dot:8},md:{fontSize:11,minWidth:20,height:20,paddingH:6,dot:10}},anchorPosition=(e,t)=>{const i=-t;switch(e){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}}},formatValue=(e,t)=>{if(null==e)return null;if("number"==typeof e)return e<=0?null:e>t?`${t}+`:String(e);const i=String(e);return 0===i.length?null:i},Badge=exports.Badge=(0,_react.forwardRef)((e,t)=>{const{value:i,max:r=99,variant:n="standard",tone:o="error",size:a="sm",invisible:s=!1,loading:d=!1,children:l,anchor:c="topRight",pulse:u=!1,accessibilityLabel:g,style:h,badgeStyle:m,textStyle:p,testID:f}=e,x=(0,_index.useTheme)(),_=(0,_react.useMemo)(()=>toneFor(x,o),[x,o]),b=x.components.badge?.[a],y={fontSize:b?.fontSize??sizeMap[a].fontSize,minWidth:b?.minWidth??sizeMap[a].minWidth,height:b?.height??sizeMap[a].height,paddingH:b?.paddingHorizontal??sizeMap[a].paddingH,dot:b?.dotSize??sizeMap[a].dot},v=x.components.badge?.borderWidth??1.5,j=x.components.badge?.anchorOffset??4,S="dot"===n?null:formatValue(i,r),w=!s&&("dot"===n||null!==S),z=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;(0,_react.useEffect)(()=>{if(!u||!w)return void(0,_index.setNativeValue)(z,1);const e=_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(z,{toValue:1.15,duration:x.motion.duration.slow,easing:_reactNative.Easing.bezier(...x.motion.easing.standard),useNativeDriver:!0}),_reactNative.Animated.timing(z,{toValue:1,duration:x.motion.duration.slow,easing:_reactNative.Easing.bezier(...x.motion.easing.standard),useNativeDriver:!0})]));return e.start(),()=>{e.stop()}},[u,w,z,x]);const k="dot"===n,R=k?"image":"text",N=g??(k?"Notification indicator":S?`${S} unread`:void 0),W=w?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[styles.badge,k?{width:y.dot,height:y.dot,borderRadius:y.dot/2,..._corners.smoothCorners,paddingHorizontal:0}:{minWidth:y.minWidth,minHeight:y.height,borderRadius:x.radius.full,..._corners.smoothCorners,paddingHorizontal:y.paddingH},{backgroundColor:_.background,transform:[{scale:z}]},l?{position:"absolute",borderWidth:v,borderColor:x.colors.background.elevated,...anchorPosition(c,j)}:null,m],accessible:!0,accessibilityRole:R,accessibilityLabel:N,children:k||null===S?null:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:_.text,fontSize:y.fontSize,...(0,_index.fontFor)(x,"bold")},p],numberOfLines:1,maxFontSizeMultiplier:x.maxFontSizeMultiplier,children:S??" "})}):null,M=l?(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[styles.wrapper,h],testID:f,children:[l,W]}):(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,style:h,testID:f,children:W});return d?(0,_jsxRuntime.jsx)(BadgeSkeleton,{...e}):M});Badge.displayName="Badge";const BadgeSkeleton=({variant:e="standard",size:t="md",children:i,anchor:r,style:n,badgeStyle:o})=>{const a=sizeMap[t];if("dot"===e)return(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"circle",width:a.dot,height:a.dot,style:[o,n]});const s=a.height/2;if(void 0!==i){const e="topLeft"===r?{top:-a.height/2,left:-a.height/2}:"bottomRight"===r?{bottom:-a.height/2,right:-a.height/2}:"bottomLeft"===r?{bottom:-a.height/2,left:-a.height/2}:{top:-a.height/2,right:-a.height/2};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.wrapper,n],children:[i,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{position:"absolute"},e],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:a.minWidth+a.paddingH,height:a.height,radius:s,style:o})})]})}return(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:a.minWidth+a.paddingH,height:a.height,radius:s,style:[o,n]})};BadgeSkeleton.displayName="BadgeSkeleton",Badge.Skeleton=BadgeSkeleton;const styles=_reactNative.StyleSheet.create({wrapper:{position:"relative",alignSelf:"flex-start"},badge:{alignItems:"center",justifyContent:"center",flexDirection:"row"},text:{textAlign:"center",includeFontPadding:!1}});var _default=exports.default=Badge;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.Badge;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Badge.default;
-  }
-});
-var _Badge = _interopRequireWildcard(require("./Badge.js"));
-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 o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Badge",{enumerable:!0,get:function(){return _Badge.Badge}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _Badge.default}});var _Badge=_interopRequireWildcard(require("./Badge.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,u,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((u=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(u.get||u.set)?o(a,r,u):a[r]=e[r]);return a})(e,r)}