@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/sticky-footer/__stories__/StickyFooterWithTray.stories.js

@@ -0,0 +1,103 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { FlatList, ScrollView } from 'react-native';
+import { prices } from '@coinbase/cds-common/internal/data/prices';
+import { Button } from '../../buttons/Button';
+import { Menu } from '../../controls/Menu';
+import { SelectOption } from '../../controls/SelectOption';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box, HStack } from '../../layout';
+import { Tray, TrayStickyFooter } from '../../overlays';
+import { StickyFooter } from '../StickyFooter';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const options = prices.slice(0, 20);
+const StickyFooterWithTray = _ref => {
+  let {
+    title
+  } = _ref;
+  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
+  const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
+  const [value, setValue] = useState();
+  const trayRef = useRef(null);
+  const handleTrayClose = useCallback(() => {
+    var _trayRef$current;
+    (_trayRef$current = trayRef.current) == null || _trayRef$current.handleClose();
+  }, []);
+  const renderItem = useCallback(_ref2 => {
+    let {
+      index,
+      item
+    } = _ref2;
+    return /*#__PURE__*/_jsx(SelectOption, {
+      description: "BTC",
+      onPress: handleTrayClose,
+      title: item,
+      value: item
+    }, index);
+  }, [handleTrayClose]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: setIsTrayVisibleToTrue,
+      children: "Open"
+    }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
+      ref: trayRef,
+      disableCapturePanGestureToDismiss: true,
+      onCloseComplete: setIsTrayVisibleToFalse,
+      title: title,
+      verticalDrawerPercentageOfView: 0.75,
+      children: _ref3 => {
+        let {
+          handleClose
+        } = _ref3;
+        return /*#__PURE__*/_jsxs(TrayStickyFooter, {
+          children: [/*#__PURE__*/_jsx(ScrollView, {
+            children: /*#__PURE__*/_jsx(Menu, {
+              onChange: setValue,
+              value: value,
+              children: /*#__PURE__*/_jsx(FlatList, {
+                data: options,
+                renderItem: renderItem,
+                scrollEnabled: false
+              })
+            })
+          }), /*#__PURE__*/_jsx(StickyFooter, {
+            elevated: true,
+            children: /*#__PURE__*/_jsxs(HStack, {
+              alignContent: "center",
+              alignItems: "center",
+              gap: 1,
+              justifyContent: "center",
+              width: "100%",
+              children: [/*#__PURE__*/_jsx(Box, {
+                flexGrow: 1,
+                children: /*#__PURE__*/_jsx(Button, {
+                  block: true,
+                  variant: "secondary",
+                  children: "Secondary"
+                })
+              }), /*#__PURE__*/_jsx(Box, {
+                flexGrow: 1,
+                children: /*#__PURE__*/_jsx(Button, {
+                  block: true,
+                  onPress: handleClose,
+                  children: "Primary"
+                })
+              })]
+            })
+          })]
+        });
+      }
+    })]
+  });
+};
+const StickyFooterWithTrayScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "StickyFooter with Tray",
+      children: /*#__PURE__*/_jsx(StickyFooterWithTray, {
+        title: "StickyFooter with Tray"
+      })
+    })
+  });
+};
+export default StickyFooterWithTrayScreen;

package/esm/styles/fallbackShimmer.js

@@ -0,0 +1,4 @@
+export const fallbackShimmer = {
+  light: ['rgba(91,97,110,0.05)', 'rgba(91,97,110,0)', 'rgba(91,97,110,0.1)'],
+  dark: ['rgba(138,145,158,0.05)', 'rgba(138,145,158,0)', 'rgba(138,145,158,0.1)']
+};

package/esm/styles/getBorderStyles.js

@@ -0,0 +1,60 @@
+export const getBorderStyles = _ref => {
+  let {
+    bordered,
+    borderedTop,
+    borderedBottom,
+    borderedStart,
+    borderedEnd,
+    borderedHorizontal,
+    borderedVertical,
+    borderRadius,
+    borderColor,
+    borderWidth,
+    theme,
+    elevation
+  } = _ref;
+  const styles = {};
+  if (borderRadius) {
+    styles.borderRadius = theme.borderRadius[borderRadius];
+  }
+  if (bordered !== undefined) {
+    styles.borderWidth = bordered ? 1 : 0;
+  }
+  if (borderedVertical !== undefined) {
+    styles.borderTopWidth = borderedVertical ? 1 : 0;
+    styles.borderBottomWidth = borderedVertical ? 1 : 0;
+  }
+  if (borderedHorizontal !== undefined) {
+    styles.borderStartWidth = borderedHorizontal ? 1 : 0;
+    styles.borderEndWidth = borderedHorizontal ? 1 : 0;
+  }
+  if (borderedTop !== undefined) {
+    styles.borderTopWidth = borderedTop ? 1 : 0;
+  }
+  if (borderedBottom !== undefined) {
+    styles.borderBottomWidth = borderedBottom ? 1 : 0;
+  }
+  if (borderedStart !== undefined) {
+    styles.borderStartWidth = borderedStart ? 1 : 0;
+  }
+  if (borderedEnd !== undefined) {
+    styles.borderEndWidth = borderedEnd ? 1 : 0;
+  }
+  if (Object.keys(styles).length > (borderRadius ? 1 : 0)) {
+    styles.borderColor = theme.color.bgLine;
+  }
+  if (borderColor) {
+    styles.borderColor = theme.color[borderColor];
+  }
+  if (borderWidth) {
+    styles.borderStyle = 'solid';
+    styles.borderWidth = theme.borderWidth[borderWidth];
+  }
+
+  // When elevating, always apply a border
+  if (elevation) {
+    styles.borderColor = theme.color[borderColor != null ? borderColor : 'bgLine'];
+    styles.borderWidth = theme.borderWidth[borderWidth != null ? borderWidth : 100];
+  }
+  return styles;
+};

package/esm/styles/getFlushStyles.js

@@ -0,0 +1,18 @@
+import { I18nManager } from 'react-native';
+export const getFlushStyles = _ref => {
+  var _spacing$paddingLeft, _spacing$paddingRight;
+  let {
+    flush,
+    spacing
+  } = _ref;
+  let offsetDirection = flush === 'start' ? 'left' : 'right';
+  // We need to invert the setup for RTL
+  if (I18nManager.isRTL) {
+    offsetDirection = flush === 'start' ? 'right' : 'left';
+  }
+  const style = {
+    marginLeft: offsetDirection === 'left' ? Number((_spacing$paddingLeft = spacing.paddingLeft) != null ? _spacing$paddingLeft : 0) * -1 : 0,
+    marginRight: offsetDirection === 'right' ? Number((_spacing$paddingRight = spacing.paddingRight) != null ? _spacing$paddingRight : 0) * -1 : 0
+  };
+  return flush ? style : {};
+};

package/esm/styles/getInteractableStyles.js

@@ -0,0 +1,60 @@
+import { getBlendedColor } from '@coinbase/cds-common/color/getBlendedColor';
+import { accessibleOpacityDisabled, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
+export const getInteractableStyles = _ref => {
+  let {
+    theme,
+    background,
+    pressedBackground,
+    disabledBackground,
+    borderColor,
+    pressedBorderColor,
+    disabledBorderColor
+  } = _ref;
+  /**
+   * Apply an interactive background style. Blend the color with the background or backgroundInverse values
+   */
+  const wrapperStyles = {
+    base: {
+      backgroundColor: background,
+      borderColor: borderColor
+    },
+    pressed: {
+      backgroundColor: getBlendedColor({
+        overlayColor: pressedBackground != null ? pressedBackground : background,
+        blendOpacity: opacityPressed,
+        colorScheme: theme.activeColorScheme
+      }),
+      borderColor: getBlendedColor({
+        overlayColor: pressedBorderColor != null ? pressedBorderColor : borderColor,
+        blendOpacity: opacityPressed,
+        colorScheme: theme.activeColorScheme
+      })
+    },
+    disabled: {
+      backgroundColor: getBlendedColor({
+        overlayColor: disabledBackground != null ? disabledBackground : background,
+        blendOpacity: accessibleOpacityDisabled,
+        colorScheme: theme.activeColorScheme,
+        skipContrastOptimization: true
+      }),
+      borderColor: getBlendedColor({
+        overlayColor: disabledBorderColor != null ? disabledBorderColor : borderColor,
+        blendOpacity: accessibleOpacityDisabled,
+        colorScheme: theme.activeColorScheme,
+        skipContrastOptimization: true
+      })
+    }
+  };
+  const contentStyles = {
+    pressed: {
+      opacity: opacityPressed
+    },
+    disabled: {
+      opacity: accessibleOpacityDisabled
+    }
+  };
+  return {
+    wrapperStyles,
+    contentStyles
+  };
+};

package/esm/styles/pinStyles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+export const pinStyles = StyleSheet.create({
+  top: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  bottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  right: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0
+  },
+  all: StyleSheet.absoluteFillObject
+});

package/esm/styles/styleProps.js

@@ -0,0 +1,89 @@
+// TO DO: If possible, refactor DimensionValue to ViewStyle['width'] etc
+
+/** StyleProps that get their values from the theme. */
+export const themedStyleProps = {
+  color: 'color',
+  background: 'color',
+  borderColor: 'color',
+  borderWidth: 'borderWidth',
+  borderTopWidth: 'borderWidth',
+  borderEndWidth: 'borderWidth',
+  borderBottomWidth: 'borderWidth',
+  borderStartWidth: 'borderWidth',
+  borderRadius: 'borderRadius',
+  borderTopLeftRadius: 'borderRadius',
+  borderTopRightRadius: 'borderRadius',
+  borderBottomLeftRadius: 'borderRadius',
+  borderBottomRightRadius: 'borderRadius',
+  fontFamily: 'fontFamily',
+  fontSize: 'fontSize',
+  fontWeight: 'fontWeight',
+  lineHeight: 'lineHeight',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  padding: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingTop: 'space',
+  paddingBottom: 'space',
+  paddingStart: 'space',
+  paddingEnd: 'space',
+  margin: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginTop: 'space',
+  marginBottom: 'space',
+  marginStart: 'space',
+  marginEnd: 'space'
+};
+
+/** For StyleProps whose names are not keys of ViewStyle & TextStyle, this maps those StyleProp names to their ViewStyle & TextStyle keys. */
+const stylePropAliases = {
+  background: ['backgroundColor'],
+  paddingX: ['paddingStart', 'paddingEnd'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  marginX: ['marginStart', 'marginEnd'],
+  marginY: ['marginTop', 'marginBottom']
+};
+export const getStyles = (styleProps, theme) => {
+  const style = {};
+  for (const styleProp in styleProps) {
+    const value = styleProps[styleProp];
+    if (typeof value === 'undefined') continue;
+
+    // If there are no stylePropAliases for this styleProp...
+    if (typeof stylePropAliases[styleProp] === 'undefined') {
+      // If it's not themed...
+      if (typeof themedStyleProps[styleProp] === 'undefined') {
+        style[styleProp] = value;
+      }
+      // If it is themed and it is margin* prop
+      else if (styleProp.startsWith('margin')) {
+        style[styleProp] = -theme[themedStyleProps[styleProp]][-value];
+      }
+      // If it is themed...
+      else {
+        style[styleProp] = theme[themedStyleProps[styleProp]][value];
+      }
+    } else {
+      for (const propAlias of stylePropAliases[styleProp]) {
+        // If it's not themed...
+        if (typeof themedStyleProps[styleProp] === 'undefined') {
+          style[propAlias] = value;
+        }
+        // If it is themed and it is margin* prop
+        else if (styleProp.startsWith('margin')) {
+          style[propAlias] = -theme[themedStyleProps[styleProp]][-value];
+        }
+        // If it is themed...
+        else {
+          style[propAlias] = theme[themedStyleProps[styleProp]][value];
+        }
+      }
+    }
+  }
+  return style;
+};
+export const getViewStyles = getStyles;
+export const getTextStyles = getStyles;

package/esm/system/AndroidNavigationBar.js

@@ -0,0 +1,42 @@
+import { memo, useCallback, useLayoutEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+import changeNavigationBarColor from 'react-native-navigation-bar-color';
+import { colorToHex } from '@coinbase/cds-common/color/colorToHex';
+import { useTheme } from '../hooks/useTheme';
+import { useStatusBarStyle } from './StatusBar';
+export const useAndroidNavigationBarUpdater = function (_temp) {
+  var _theme$color;
+  let {
+    theme
+  } = _temp === void 0 ? {} : _temp;
+  const statusBarStyle = useStatusBarStyle({
+    theme
+  });
+  const contextTheme = useTheme();
+  const {
+    bg
+  } = (_theme$color = theme == null ? void 0 : theme.color) != null ? _theme$color : contextTheme.color;
+  return useCallback(() => {
+    // Don't change the navigation bar color on Android 7 (API 25) or lower.
+    // On these versions, Android doesn't support changing the color of the navigation bar icons, meaning
+    // we risk having a light colored navigation bar with the default white icons.
+    if (Platform.OS === 'android' && Platform.Version > 25) {
+      return changeNavigationBarColor(
+      // All palette values are in rgba and color has to be converted to hex.
+      colorToHex(bg),
+      // dark-content means light background
+      statusBarStyle === 'dark-content', true);
+    }
+    return undefined;
+  }, [bg, statusBarStyle]);
+};
+export const AndroidNavigationBar = /*#__PURE__*/memo(props => {
+  const updateAndroidNavigationBar = useAndroidNavigationBarUpdater(props);
+  const hasRun = useRef(false);
+  useLayoutEffect(() => {
+    if (hasRun.current || Platform.OS === 'ios') return;
+    updateAndroidNavigationBar();
+  }, [updateAndroidNavigationBar]);
+  return null;
+});
+AndroidNavigationBar.displayName = 'AndroidNavigationBar';

package/esm/system/EventHandlerProvider.js

@@ -0,0 +1,7 @@
+/**
+ * Avoid having to deal with transitive version issues.
+ * CDS common is dep of cds-mobile.
+ * This allows consumers to pull directly from cds-mobile.
+ */
+
+export { EventHandlerProvider } from '@coinbase/cds-common/system/EventHandlerProvider';

package/esm/system/Interactable.js

@@ -0,0 +1,64 @@
+const _excluded = ["background", "borderColor", "borderWidth", "block", "children", "disabled", "pressed", "style", "contentStyle", "wrapperStyles", "blendStyles", "transparentWhileInactive", "transparentWhilePressed"];
+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 React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../hooks/useTheme';
+import { Box } from '../layout/Box';
+import { getInteractableStyles } from '../styles/getInteractableStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Interactable = /*#__PURE__*/memo(function Interactable(_ref) {
+  let {
+      background = 'transparent',
+      borderColor = background,
+      borderWidth = 100,
+      block,
+      children,
+      disabled,
+      pressed,
+      style,
+      contentStyle,
+      wrapperStyles,
+      blendStyles,
+      transparentWhileInactive,
+      transparentWhilePressed
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const isTransparent = transparentWhileInactive && !pressed;
+  const isPressedAndTransparent = transparentWhilePressed && pressed;
+  const {
+    wrapperStyles: defaultWrapperStyles,
+    contentStyles
+  } = useMemo(() => {
+    var _blendStyles$backgrou, _blendStyles$borderCo, _blendStyles$pressedB, _blendStyles$disabled, _blendStyles$pressedB2, _blendStyles$disabled2;
+    const backgroundColor = (_blendStyles$backgrou = blendStyles == null ? void 0 : blendStyles.background) != null ? _blendStyles$backgrou : theme.color[background];
+    const borderColorValue = (_blendStyles$borderCo = blendStyles == null ? void 0 : blendStyles.borderColor) != null ? _blendStyles$borderCo : theme.color[borderColor];
+    return getInteractableStyles({
+      theme,
+      background: isTransparent ? 'transparent' : backgroundColor,
+      pressedBackground: isTransparent || isPressedAndTransparent ? 'transparent' : (_blendStyles$pressedB = blendStyles == null ? void 0 : blendStyles.pressedBackground) != null ? _blendStyles$pressedB : backgroundColor,
+      disabledBackground: isTransparent ? 'transparent' : (_blendStyles$disabled = blendStyles == null ? void 0 : blendStyles.disabledBackground) != null ? _blendStyles$disabled : backgroundColor,
+      borderColor: isTransparent ? 'transparent' : borderColorValue,
+      pressedBorderColor: isTransparent || isPressedAndTransparent ? 'transparent' : (_blendStyles$pressedB2 = blendStyles == null ? void 0 : blendStyles.pressedBorderColor) != null ? _blendStyles$pressedB2 : borderColorValue,
+      disabledBorderColor: isTransparent ? 'transparent' : (_blendStyles$disabled2 = blendStyles == null ? void 0 : blendStyles.disabledBorderColor) != null ? _blendStyles$disabled2 : borderColorValue
+    });
+  }, [theme, background, isTransparent, isPressedAndTransparent, blendStyles, borderColor]);
+  const mergedWrapperStyles = useMemo(() => [block && {
+    flexGrow: 1
+  }, defaultWrapperStyles.base, wrapperStyles == null ? void 0 : wrapperStyles.base, isTransparent && {
+    borderColor: 'transparent'
+  }, pressed && defaultWrapperStyles.pressed, pressed && (wrapperStyles == null ? void 0 : wrapperStyles.pressed), disabled && defaultWrapperStyles.disabled, disabled && (wrapperStyles == null ? void 0 : wrapperStyles.disabled), style], [block, defaultWrapperStyles, wrapperStyles, isTransparent, style, pressed, disabled]);
+  const mergedContentStyles = useMemo(() => [contentStyle, pressed && contentStyles.pressed, disabled && contentStyles.disabled], [contentStyle, contentStyles.disabled, contentStyles.pressed, disabled, pressed]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    animated: true,
+    borderColor: borderColor,
+    borderWidth: borderWidth,
+    style: mergedWrapperStyles
+  }, props, {
+    children: /*#__PURE__*/_jsx(View, {
+      style: mergedContentStyles,
+      children: children
+    })
+  }));
+});