@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/numbers/RollingNumber/RollingNumber.js

@@ -0,0 +1,270 @@
+const _excluded = ["value", "color", "colorPulseOnUpdate", "positivePulseColor", "negativePulseColor", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "tabularNumbers", "testID", "accessibilityLiveRegion", "locale", "format", "style", "prefix", "suffix", "styles", "enableSubscriptNotation", "transition", "formattedValue", "accessibilityLabel", "accessibilityLabelPrefix", "accessibilityLabelSuffix", "RollingNumberMaskComponent", "RollingNumberAffixSectionComponent", "RollingNumberValueSectionComponent", "RollingNumberDigitComponent", "RollingNumberSymbolComponent"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { Easing } from 'react-native-reanimated';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+import { IntlNumberFormat } from '@coinbase/cds-common/numbers/IntlNumberFormat';
+import { useLocale } from '@coinbase/cds-common/system/LocaleProvider';
+import { HStack } from '../../layout/HStack';
+import { Text } from '../../typography/Text';
+import { DefaultRollingNumberAffixSection } from './DefaultRollingNumberAffixSection';
+import { DefaultRollingNumberDigit } from './DefaultRollingNumberDigit';
+import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';
+import { DefaultRollingNumberSymbol } from './DefaultRollingNumberSymbol';
+import { DefaultRollingNumberValueSection } from './DefaultRollingNumberValueSection';
+import { useColorPulse } from './useColorPulse';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const digits = new Array(10).fill(null).map((_, digit) => digit);
+const baseStylesheet = StyleSheet.create({
+  hide: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    opacity: 0
+  },
+  screenReaderOnly: {
+    position: 'absolute',
+    // Snap to parent size so a11y hit area matches visible content
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    // Use color: transparent instead of opacity: 0 to avoid issues with screen readers
+    color: 'transparent'
+  }
+});
+
+/**
+ * Defines transition overrides for RollingNumber animations.
+ */
+
+export const defaultTransitionConfig = {
+  y: {
+    type: 'timing',
+    duration: durations.moderate3,
+    easing: Easing.bezier(...curves.global)
+  },
+  color: {
+    type: 'timing',
+    duration: durations.slow4,
+    easing: Easing.bezier(...curves.global)
+  }
+};
+
+// Subcomponent prop and component type declarations
+
+export const RollingNumber = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      value,
+      color: colorProp = 'fg',
+      colorPulseOnUpdate,
+      positivePulseColor = 'fgPositive',
+      negativePulseColor = 'fgNegative',
+      font = 'inherit',
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      // default to fontSize since lineHeight changes depending on the fontSize
+      lineHeight = fontSize,
+      tabularNumbers = true,
+      testID,
+      accessibilityLiveRegion = 'polite',
+      locale: localeProp,
+      format,
+      style,
+      prefix,
+      suffix,
+      styles,
+      enableSubscriptNotation,
+      transition = defaultTransitionConfig,
+      formattedValue,
+      accessibilityLabel,
+      accessibilityLabelPrefix,
+      accessibilityLabelSuffix,
+      RollingNumberMaskComponent = DefaultRollingNumberMask,
+      RollingNumberAffixSectionComponent = DefaultRollingNumberAffixSection,
+      RollingNumberValueSectionComponent = DefaultRollingNumberValueSection,
+      RollingNumberDigitComponent = DefaultRollingNumberDigit,
+      RollingNumberSymbolComponent = DefaultRollingNumberSymbol
+    } = _ref,
+    restTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    locale: defaultLocale
+  } = useLocale();
+  const locale = localeProp != null ? localeProp : defaultLocale;
+  const [digitHeight, setDigitHeight] = useState();
+  const handleMeasureDigits = e => {
+    const {
+      layout
+    } = e.nativeEvent;
+    setDigitHeight(layout.height);
+  };
+  const textProps = useMemo(() => _extends({
+    font,
+    fontSize,
+    fontWeight,
+    fontFamily,
+    lineHeight,
+    tabularNumbers,
+    color: colorProp
+  }, restTextProps), [font, fontSize, fontWeight, fontFamily, lineHeight, tabularNumbers, colorProp, restTextProps]);
+  const transitionConfig = useMemo(() => _extends({}, defaultTransitionConfig, transition), [transition]);
+  const intlNumberFormatter = useMemo(() => new IntlNumberFormat({
+    value,
+    format,
+    locale
+  }), [value, format, locale]);
+  const formatted = useMemo(() => formattedValue != null ? formattedValue : intlNumberFormatter.format(), [formattedValue, intlNumberFormatter]);
+  const animatedColorStyle = useColorPulse({
+    value,
+    defaultColor: colorProp,
+    colorPulseOnUpdate: !!colorPulseOnUpdate,
+    positivePulseColor,
+    negativePulseColor,
+    transitionConfig,
+    formatted
+  });
+  const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const invisibleMeasuredDigits = useMemo(() => /*#__PURE__*/_jsx(Text, _extends({
+    accessibilityElementsHidden: true,
+    accessibilityLabel: "",
+    importantForAccessibility: "no-hide-descendants",
+    onLayout: handleMeasureDigits,
+    style: [baseStylesheet.hide, styles == null ? void 0 : styles.text]
+  }, textProps, {
+    children: "0"
+  })), [textProps, styles == null ? void 0 : styles.text]);
+  const prefixSection = useMemo(() =>
+  /*#__PURE__*/
+  // prefix from props
+  _jsx(RollingNumberAffixSectionComponent, {
+    justifyContent: "flex-end",
+    style: styles == null ? void 0 : styles.prefix,
+    styles: {
+      text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+    },
+    textProps: textProps,
+    children: prefix
+  }), [RollingNumberAffixSectionComponent, animatedColorStyle, styles == null ? void 0 : styles.prefix, textProps, prefix, styles == null ? void 0 : styles.text]);
+  const suffixSection = useMemo(() =>
+  /*#__PURE__*/
+  // suffix from props
+  _jsx(RollingNumberAffixSectionComponent, {
+    justifyContent: "flex-start",
+    style: styles == null ? void 0 : styles.suffix,
+    styles: {
+      text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+    },
+    textProps: textProps,
+    children: suffix
+  }), [RollingNumberAffixSectionComponent, animatedColorStyle, styles == null ? void 0 : styles.suffix, textProps, suffix, styles == null ? void 0 : styles.text]);
+  const intlPartsValueSection = useMemo(() => {
+    const {
+      pre,
+      integer,
+      fraction,
+      post
+    } = intlNumberFormatter.formatToParts({
+      enableSubscriptNotation
+    });
+    return /*#__PURE__*/_jsxs(HStack, {
+      style: styles == null ? void 0 : styles.formattedValueSection,
+      children: [/*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
+        RollingNumberDigitComponent: RollingNumberDigitComponent,
+        RollingNumberMaskComponent: RollingNumberMaskComponent,
+        RollingNumberSymbolComponent: RollingNumberSymbolComponent,
+        digitHeight: digitHeight,
+        intlNumberParts: pre,
+        justifyContent: "flex-end",
+        style: styles == null ? void 0 : styles.i18nPrefix,
+        styles: {
+          text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+        },
+        textProps: textProps,
+        transitionConfig: transitionConfig
+      }), /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
+        RollingNumberDigitComponent: RollingNumberDigitComponent,
+        RollingNumberMaskComponent: RollingNumberMaskComponent,
+        RollingNumberSymbolComponent: RollingNumberSymbolComponent,
+        digitHeight: digitHeight,
+        intlNumberParts: integer,
+        justifyContent: "flex-end",
+        style: styles == null ? void 0 : styles.integer,
+        styles: {
+          text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+        },
+        textProps: textProps,
+        transitionConfig: transitionConfig
+      }), /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
+        RollingNumberDigitComponent: RollingNumberDigitComponent,
+        RollingNumberMaskComponent: RollingNumberMaskComponent,
+        RollingNumberSymbolComponent: RollingNumberSymbolComponent,
+        digitHeight: digitHeight,
+        intlNumberParts: fraction,
+        justifyContent: "flex-start",
+        style: styles == null ? void 0 : styles.fraction,
+        styles: {
+          text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+        },
+        textProps: textProps,
+        transitionConfig: transitionConfig
+      }), /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
+        RollingNumberDigitComponent: RollingNumberDigitComponent,
+        RollingNumberMaskComponent: RollingNumberMaskComponent,
+        RollingNumberSymbolComponent: RollingNumberSymbolComponent,
+        digitHeight: digitHeight,
+        intlNumberParts: post,
+        justifyContent: "flex-start",
+        style: styles == null ? void 0 : styles.i18nSuffix,
+        styles: {
+          text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+        },
+        textProps: textProps,
+        transitionConfig: transitionConfig
+      })]
+    });
+  }, [intlNumberFormatter, enableSubscriptNotation, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.i18nPrefix, styles == null ? void 0 : styles.text, styles == null ? void 0 : styles.integer, styles == null ? void 0 : styles.fraction, styles == null ? void 0 : styles.i18nSuffix, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberMaskComponent, RollingNumberSymbolComponent, digitHeight, animatedColorStyle, textProps, transitionConfig]);
+  const formattedValueValueSection = useMemo(() => /*#__PURE__*/_jsx(RollingNumberValueSectionComponent, {
+    RollingNumberDigitComponent: RollingNumberDigitComponent,
+    RollingNumberMaskComponent: RollingNumberMaskComponent,
+    RollingNumberSymbolComponent: RollingNumberSymbolComponent,
+    digitHeight: digitHeight,
+    formattedValue: formattedValue,
+    intlNumberParts: [],
+    justifyContent: "flex-start",
+    style: styles == null ? void 0 : styles.formattedValueSection,
+    styles: {
+      text: [animatedColorStyle, styles == null ? void 0 : styles.text]
+    },
+    textProps: textProps,
+    transitionConfig: transitionConfig
+  }), [RollingNumberMaskComponent, styles == null ? void 0 : styles.formattedValueSection, styles == null ? void 0 : styles.text, RollingNumberValueSectionComponent, RollingNumberDigitComponent, RollingNumberSymbolComponent, formattedValue, digitHeight, animatedColorStyle, textProps, transitionConfig]);
+  const screenReaderOnlySection = useMemo(() => {
+    const prefixString = typeof prefix === 'string' ? prefix : '';
+    const suffixString = typeof suffix === 'string' ? suffix : '';
+    const formattedWithPrefixSuffix = "" + prefixString + formatted + suffixString;
+    return /*#__PURE__*/_jsx(Text, _extends({
+      allowFontScaling: true,
+      accessibilityLiveRegion: accessibilityLiveRegion,
+      importantForAccessibility: "yes",
+      style: [baseStylesheet.screenReaderOnly, styles == null ? void 0 : styles.text]
+    }, textProps, {
+      children: (accessibilityLabelPrefix != null ? accessibilityLabelPrefix : '') + "\n            " + (accessibilityLabel != null ? accessibilityLabel : formattedWithPrefixSuffix) + "\n            " + (accessibilityLabelSuffix != null ? accessibilityLabelSuffix : '')
+    }));
+  }, [accessibilityLiveRegion, textProps, accessibilityLabelPrefix, accessibilityLabel, formatted, prefix, suffix, accessibilityLabelSuffix, styles == null ? void 0 : styles.text]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    ref: ref,
+    alignSelf: "flex-start",
+    style: rootStyle,
+    testID: testID,
+    children: [invisibleMeasuredDigits, screenReaderOnlySection, /*#__PURE__*/_jsxs(HStack, {
+      accessibilityElementsHidden: true,
+      flexWrap: "wrap",
+      importantForAccessibility: "no-hide-descendants",
+      style: styles == null ? void 0 : styles.visibleContent,
+      children: [prefixSection, formattedValue ? formattedValueValueSection : intlPartsValueSection, suffixSection]
+    })]
+  });
+}));

package/esm/numbers/RollingNumber/index.js

@@ -0,0 +1,6 @@
+export * from './DefaultRollingNumberAffixSection';
+export * from './DefaultRollingNumberDigit';
+export * from './DefaultRollingNumberMask';
+export * from './DefaultRollingNumberSymbol';
+export * from './DefaultRollingNumberValueSection';
+export * from './RollingNumber';

package/esm/numbers/RollingNumber/useColorPulse.js

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import { cancelAnimation, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../../hooks/useTheme';
+import { defaultTransitionConfig } from './RollingNumber';
+export function useColorPulse(_ref) {
+  let {
+    value,
+    formatted,
+    defaultColor,
+    colorPulseOnUpdate,
+    positivePulseColor,
+    negativePulseColor,
+    transitionConfig
+  } = _ref;
+  const theme = useTheme();
+  const baseColor = theme.color[defaultColor];
+  const previousValue = useRef(Number(value));
+  const previousStringValue = useRef(formatted);
+  const animatedColor = useSharedValue(baseColor);
+  useEffect(() => {
+    if (!baseColor) return;
+    // this make sure if base color changes it reflects that change even tought when colorPulseOnUpdate is false
+    animatedColor.value = baseColor;
+    if (!colorPulseOnUpdate) return;
+    const prev = previousValue.current;
+    const next = Number(value);
+    const hasMeaningfulChange = !Number.isNaN(prev) && !Number.isNaN(next) && prev !== next &&
+    // a change from 125,000 to 125,001 should not pulse if it's being formatted as 125K, since the displayed value is the same
+    previousStringValue.current !== formatted;
+    const pulseColor = hasMeaningfulChange ? theme.color[next > prev ? positivePulseColor : negativePulseColor] : undefined;
+    if (hasMeaningfulChange && pulseColor) {
+      var _transitionConfig$col;
+      cancelAnimation(animatedColor);
+      animatedColor.value = pulseColor;
+      if ((transitionConfig == null || (_transitionConfig$col = transitionConfig.color) == null ? void 0 : _transitionConfig$col.type) === 'spring') {
+        animatedColor.value = withSpring(baseColor, transitionConfig == null ? void 0 : transitionConfig.color);
+      } else {
+        var _transitionConfig$col2;
+        animatedColor.value = withTiming(baseColor, (_transitionConfig$col2 = transitionConfig == null ? void 0 : transitionConfig.color) != null ? _transitionConfig$col2 : defaultTransitionConfig.color);
+      }
+    }
+    previousValue.current = next;
+    previousStringValue.current = formatted;
+  }, [value, colorPulseOnUpdate, transitionConfig == null ? void 0 : transitionConfig.color, baseColor, positivePulseColor, negativePulseColor, animatedColor, theme.color, formatted]);
+  return useAnimatedStyle(() => ({
+    color: animatedColor.value
+  }));
+}