@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/hooks/usePressAnimation.js

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+export function usePressAnimation(factor) {
+  if (factor === void 0) {
+    factor = 0.02;
+  }
+  const value = useRef(new Animated.Value(1)).current;
+  const down = useCallback(() => {
+    Animated.spring(value, {
+      toValue: 1 - factor,
+      useNativeDriver: true
+    }).start();
+  }, [value, factor]);
+  const up = useCallback(() => {
+    Animated.spring(value, {
+      friction: 3,
+      tension: 5,
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, [value]);
+  return useMemo(() => [down, up, value], [down, up, value]);
+}

package/esm/hooks/useSafeBottomPadding.js

@@ -0,0 +1,11 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from './useTheme';
+export const useSafeBottomPadding = () => {
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  const theme = useTheme();
+  // For gesture based navigation on Android the bottom safe area is
+  // basically nonexistent. This ensures we have minimal padding.
+  return Math.max(bottom, theme.space[1]);
+};

package/esm/hooks/useScreenReaderStatus.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Hook to track screen reader status and update when changed.
+ *
+ * @returns {boolean} isScreenReaderEnabled - Whether screen reader is enabled
+ */
+
+export const useScreenReaderStatus = () => {
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
+
+  // initialize accessibility info on mount
+  useEffect(() => {
+    const initScreenReaderStatus = async () => {
+      const enabled = await AccessibilityInfo.isScreenReaderEnabled();
+      if (enabled) setIsScreenReaderEnabled(true);
+      AccessibilityInfo.addEventListener('screenReaderChanged', _isScreenReaderEnabled => {
+        if (_isScreenReaderEnabled) setIsScreenReaderEnabled(true);else setIsScreenReaderEnabled(false);
+      });
+    };
+    void initScreenReaderStatus();
+  }, []);
+  return isScreenReaderEnabled;
+};

package/esm/hooks/useScrollOffset.js

@@ -0,0 +1,36 @@
+import { useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+export function useScrollOffset() {
+  const xOffset = useRef(new Animated.Value(0));
+  const yOffset = useRef(new Animated.Value(0));
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const handleScroll = event => {
+    const {
+      contentOffset,
+      layoutMeasurement
+    } = event.nativeEvent;
+    // Prevent negative offsets on android
+    const normalizedXOffset = contentOffset.x < 0 ? 0 : contentOffset.x;
+    const index = Math.floor(normalizedXOffset / layoutMeasurement.width);
+    setCurrentIndex(index);
+  };
+  const onScroll = Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        x: xOffset.current,
+        y: yOffset.current
+      }
+    }
+  }], {
+    useNativeDriver: true,
+    listener: handleScroll
+  });
+  return useMemo(() => {
+    return {
+      onScroll,
+      xOffset: xOffset.current,
+      yOffset: yOffset.current,
+      currentIndex
+    };
+  }, [onScroll, currentIndex]);
+}

package/esm/hooks/useScrollTo.js

@@ -0,0 +1,32 @@
+import { useCallback, useRef } from 'react';
+import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
+export const useScrollTo = ref => {
+  const internalRef = useRef();
+  const scrollRef = useMergeRefs(ref, internalRef);
+  const scrollTo = useCallback(_ref => {
+    var _internalRef$current;
+    let {
+      x = 0,
+      y = 0,
+      animated = true
+    } = _ref;
+    (_internalRef$current = internalRef.current) == null || _internalRef$current.scrollTo({
+      x,
+      y,
+      animated
+    });
+  }, []);
+  const scrollToEnd = useCallback(function (_temp) {
+    var _internalRef$current2;
+    let {
+      animated = true
+    } = _temp === void 0 ? {} : _temp;
+    (_internalRef$current2 = internalRef.current) == null || _internalRef$current2.scrollToEnd({
+      animated
+    });
+  }, []);
+  return [scrollRef, {
+    scrollTo,
+    scrollToEnd
+  }];
+};

package/esm/hooks/useSelectionCellBorderStyle.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { animateInputBorderInConfig, animateInputBorderOutConfig } from '@coinbase/cds-common/animation/border';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { useTheme } from './useTheme';
+
+// Animating opacity of 2nd Layer Input Border.
+// This is the focused border styling
+const borderInConfig = convertMotionConfig(animateInputBorderInConfig);
+const borderOutConfig = convertMotionConfig(animateInputBorderOutConfig);
+export const useSelectionCellBorderStyle = _ref => {
+  let {
+    pressed,
+    pressedBorderColor = 'bgPrimary',
+    borderColor = 'bgLine',
+    pressedBorderWidth = 200,
+    borderWidth = 100
+  } = _ref;
+  const theme = useTheme();
+  const pressedBorderOpacity = useRef(new Animated.Value(0)).current;
+  const unpressedBorderRgba = theme.color[borderColor];
+  const pressedBorderRgba = theme.color[pressedBorderColor];
+  const animateInputBorderIn = Animated.timing(pressedBorderOpacity, borderInConfig);
+  const animateInputBorderOut = Animated.timing(pressedBorderOpacity, borderOutConfig);
+  const pressedStyle = useMemo(() => {
+    return {
+      borderColor: 'transparent',
+      borderWidth: theme.borderWidth[borderWidth]
+    };
+  }, [theme.borderWidth, borderWidth]);
+  const unpressedStyle = useMemo(() => {
+    return {
+      borderColor: unpressedBorderRgba,
+      borderWidth: theme.borderWidth[borderWidth]
+    };
+  }, [theme.borderWidth, unpressedBorderRgba, borderWidth]);
+  const focusRingStyle = useMemo(() => {
+    return {
+      opacity: pressedBorderOpacity,
+      borderColor: pressedBorderRgba,
+      borderWidth: theme.borderWidth[pressedBorderWidth]
+    };
+  }, [pressedBorderOpacity, pressedBorderRgba, pressedBorderWidth, theme.borderWidth]);
+  useEffect(() => {
+    if (pressed) {
+      animateInputBorderOut.stop();
+      animateInputBorderIn.start();
+    } else {
+      animateInputBorderIn.stop();
+      animateInputBorderOut.start();
+    }
+  }, [animateInputBorderIn, animateInputBorderOut, pressed]);
+  return {
+    focusRingStyle,
+    pressedStyle,
+    unpressedStyle
+  };
+};

package/esm/hooks/useStatusBarHeight.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { NativeEventEmitter, NativeModules, Platform, StatusBar } from 'react-native';
+const {
+  StatusBarManager
+} = NativeModules;
+/**
+ * StatusBar api returns weird incorrect values for iOS.
+ * This implementation is based off of the implementation identified in this article. https://blog.expo.dev/the-status-bar-manager-in-react-native-6226058ecba
+ */
+export const useStatusBarHeight = () => {
+  const [statusBarHeight, setStatusBarHeight] = useState();
+  useEffect(() => {
+    if (Platform.OS === 'ios' && StatusBarManager !== undefined) {
+      const statusBarManager = StatusBarManager;
+      const emitter = new NativeEventEmitter(statusBarManager);
+      statusBarManager.getHeight(_ref => {
+        let {
+          height
+        } = _ref;
+        return setStatusBarHeight(height);
+      });
+      const subscription = emitter.addListener('statusBarFrameWillChange', _ref2 => {
+        let {
+          frame: {
+            height
+          }
+        } = _ref2;
+        setStatusBarHeight(height);
+      });
+      return () => subscription.remove();
+    }
+    setStatusBarHeight(StatusBar.currentHeight);
+    return () => {};
+  }, []);
+  return statusBarHeight;
+};

package/esm/hooks/useTextAlign.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { I18nManager } from 'react-native';
+export const useTextAlign = align => {
+  return useMemo(() => {
+    if (align === 'start') {
+      return {
+        textAlign: I18nManager.isRTL ? 'right' : 'left'
+      };
+    }
+    if (align === 'end') {
+      return {
+        textAlign: I18nManager.isRTL ? 'left' : 'right'
+      };
+    }
+    return {
+      textAlign: align
+    };
+  }, [align]);
+};

package/esm/hooks/useTheme.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../system/ThemeProvider';
+
+/** Returns the currently active Theme, determined by the ThemeProvider's `activeColorScheme`. */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw Error('useTheme must be used within a ThemeProvider');
+  return context;
+};

package/esm/hooks/useWebBrowserOpener.js

@@ -0,0 +1,27 @@
+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); }
+import { useCallback } from 'react';
+import { Linking } from 'react-native';
+import { openWebBrowser } from '../utils/openWebBrowser';
+import { useTheme } from './useTheme';
+export const useWebBrowserOpener = () => {
+  const theme = useTheme();
+  return useCallback(async (url, options) => {
+    if (url.startsWith('https://') || url.startsWith('http://')) {
+      var _options$theme;
+      // Use custom handling for web URLs
+      await openWebBrowser(url, _extends({
+        theme: (_options$theme = options == null ? void 0 : options.theme) != null ? _options$theme : theme
+      }, options));
+      return;
+    }
+
+    // Handle other schemes such as mailto, tel, and sms
+    try {
+      await Linking.openURL(url);
+    } catch (err) {
+      // TODO: replace these with Bugsnag one day
+
+      console.error("Cannot open URL " + url, err);
+    }
+  }, [theme]);
+};

package/esm/icons/Icon.js

@@ -0,0 +1,86 @@
+import React, { memo, useMemo } from 'react';
+import { Animated, Text, useWindowDimensions } from 'react-native';
+import { glyphMap } from '@coinbase/cds-icons/glyphMap';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getIconSourceSize = iconSize => {
+  if (iconSize <= 12) return 12;
+  if (iconSize <= 16) return 16;
+  return 24;
+};
+export const Icon = /*#__PURE__*/memo(function Icon(_ref) {
+  let {
+    accessibilityLabel,
+    accessibilityHint,
+    animated = false,
+    color = 'fgPrimary',
+    dangerouslySetColor,
+    style,
+    styles,
+    fallback = null,
+    name,
+    size = 'm',
+    testID,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingEnd,
+    paddingBottom,
+    paddingStart,
+    active
+  } = _ref;
+  const TextComponent = animated ? Animated.Text : Text;
+  const theme = useTheme();
+  const {
+    fontScale
+  } = useWindowDimensions();
+
+  // Scale according to device a11y font size settings
+  const iconSize = theme.iconSize[size] * fontScale;
+  const sourceSize = getIconSourceSize(iconSize);
+  const iconColor = theme.color[color];
+  const finalColor = dangerouslySetColor != null ? dangerouslySetColor : iconColor;
+  const rootStyle = useMemo(() => {
+    var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+    return [{
+      paddingTop: theme.space[(_ref2 = (_ref3 = paddingTop != null ? paddingTop : paddingY) != null ? _ref3 : padding) != null ? _ref2 : 0],
+      paddingEnd: theme.space[(_ref4 = (_ref5 = paddingEnd != null ? paddingEnd : paddingX) != null ? _ref5 : padding) != null ? _ref4 : 0],
+      paddingBottom: theme.space[(_ref6 = (_ref7 = paddingBottom != null ? paddingBottom : paddingY) != null ? _ref7 : padding) != null ? _ref6 : 0],
+      paddingStart: theme.space[(_ref8 = (_ref9 = paddingStart != null ? paddingStart : paddingX) != null ? _ref9 : padding) != null ? _ref8 : 0]
+    }, style, styles == null ? void 0 : styles.root];
+  }, [style, theme.space, padding, paddingX, paddingY, paddingTop, paddingEnd, paddingBottom, paddingStart, styles == null ? void 0 : styles.root]);
+  const iconStyle = useMemo(() => [{
+    fontFamily: 'CoinbaseIcons',
+    fontSize: iconSize,
+    height: iconSize,
+    width: iconSize,
+    lineHeight: iconSize,
+    color: finalColor
+  }, styles == null ? void 0 : styles.icon], [finalColor, iconSize, styles == null ? void 0 : styles.icon]);
+  const iconName = name + "-" + sourceSize + "-" + (active ? 'active' : 'inactive');
+  const glyph = glyphMap[iconName];
+  if (glyph === undefined) {
+    if (isDevelopment()) {
+      console.error("Unable to find glyph for icon name \"" + name + "\" with glyph key \"" + iconName + "\"");
+    }
+    return fallback;
+  }
+  return /*#__PURE__*/_jsx(Box, {
+    animated: animated,
+    style: rootStyle,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(TextComponent, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "image",
+      accessible: !!accessibilityLabel,
+      allowFontScaling: false,
+      style: iconStyle,
+      children: glyph
+    })
+  });
+});
+export { getIconSourceSize };

package/esm/icons/LogoMark.js

@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { useLogoMark } from '@coinbase/cds-common/hooks/useLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LogoMark = /*#__PURE__*/memo(_ref => {
+  let {
+    size,
+    foreground
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    viewBox,
+    width,
+    height,
+    path,
+    color
+  } = useLogoMark({
+    size,
+    foreground,
+    colorScheme: activeColorScheme
+  });
+  return /*#__PURE__*/_jsx(Svg, {
+    height: height,
+    viewBox: viewBox,
+    width: width,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: path,
+      fill: color
+    })
+  });
+});
+LogoMark.displayName = 'LogoMark';

package/esm/icons/LogoWordmark.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { useLogoWordmark } from '@coinbase/cds-common/hooks/useLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LogoWordmark = /*#__PURE__*/memo(_ref => {
+  let {
+    foreground
+  } = _ref;
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    viewBox,
+    path,
+    color
+  } = useLogoWordmark({
+    foreground,
+    colorScheme: activeColorScheme
+  });
+  return /*#__PURE__*/_jsx(Svg, {
+    viewBox: viewBox,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: path,
+      fill: color
+    })
+  });
+});
+LogoWordmark.displayName = 'LogoWordmark';

package/esm/icons/SubBrandLogoMark.js

@@ -0,0 +1,33 @@
+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); }
+import React, { memo } from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+import { useSubBrandLogoMark } from '@coinbase/cds-common/hooks/useSubBrandLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SubBrandLogoMark = /*#__PURE__*/memo(props => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    logoColor,
+    typeColor,
+    viewBox,
+    logoPath,
+    typePath
+  } = useSubBrandLogoMark(_extends({}, props, {
+    colorScheme: activeColorScheme
+  }));
+  return /*#__PURE__*/_jsx(Svg, {
+    viewBox: viewBox,
+    children: /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: logoPath,
+        fill: logoColor
+      }), /*#__PURE__*/_jsx(Path, {
+        d: typePath,
+        fill: typeColor
+      })]
+    })
+  });
+});
+SubBrandLogoMark.displayName = 'SubBrandLogoMark';

package/esm/icons/SubBrandLogoWordmark.js

@@ -0,0 +1,33 @@
+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); }
+import React, { memo } from 'react';
+import { G, Path, Svg } from 'react-native-svg';
+import { useSubBrandLogoWordmark } from '@coinbase/cds-common/hooks/useSubBrandLogo';
+import { useTheme } from '../hooks/useTheme';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SubBrandLogoWordmark = /*#__PURE__*/memo(props => {
+  const {
+    activeColorScheme
+  } = useTheme();
+  const {
+    logoColor,
+    typeColor,
+    viewBox,
+    logoPath,
+    typePath
+  } = useSubBrandLogoWordmark(_extends({}, props, {
+    colorScheme: activeColorScheme
+  }));
+  return /*#__PURE__*/_jsx(Svg, {
+    viewBox: viewBox,
+    children: /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Path, {
+        d: logoPath,
+        fill: logoColor
+      }), /*#__PURE__*/_jsx(Path, {
+        d: typePath,
+        fill: typeColor
+      })]
+    })
+  });
+});
+SubBrandLogoWordmark.displayName = 'SubBrandLogoWordmark';

package/esm/icons/TextIcon.js

@@ -0,0 +1,48 @@
+import React, { memo, useMemo } from 'react';
+import { Animated, Text } from 'react-native';
+import { glyphMap } from '@coinbase/cds-icons/glyphMap';
+import { isDevelopment } from '@coinbase/cds-utils';
+import { useTheme } from '../hooks/useTheme';
+import { getIconSourceSize } from './Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ * This is a simplified, text-only version of the Icon component.
+ * Nested text components need to all be RN Text and the Icon component has a box wrapper to handle border and badges.
+ * Adheres to all the requirements for Nested Text on react native. https://reactnative.dev/docs/text#nested-text
+ */
+export const TextIcon = /*#__PURE__*/memo(function TextIcon(_ref) {
+  let {
+    name,
+    size = 'm',
+    active,
+    color = 'fgPrimary',
+    animated,
+    testID,
+    style
+  } = _ref;
+  const theme = useTheme();
+  const Component = animated ? Animated.Text : Text;
+  const iconSize = theme.iconSize[size];
+  const sourceSize = getIconSourceSize(iconSize);
+  const iconColor = theme.color[color];
+  const styles = useMemo(() => [{
+    fontFamily: 'CoinbaseIcons',
+    fontSize: iconSize,
+    color: iconColor
+  }, style], [style, iconColor, iconSize]);
+  const iconName = name + "-" + sourceSize + "-" + (active ? 'active' : 'inactive');
+  const glyph = glyphMap[iconName];
+  if (glyph === undefined) {
+    if (isDevelopment()) {
+      console.error("Unable to find glyph for icon name \"" + name + "\" with glyph key \"" + iconName + "\"");
+    }
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Component, {
+    accessibilityRole: "image",
+    style: styles,
+    testID: testID,
+    children: glyph
+  });
+});