react-native-acoustic-connect-beta 16.0.41 → 18.0.7

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useThemeProps/usePropsResolutionTest.tsx

@@ -1,367 +0,0 @@
-import get from 'lodash.get';
-import merge from 'lodash.merge';
-import { Platform } from 'react-native';
-import { useNativeBase } from '../useNativeBase';
-import { useColorMode } from '../../core/color-mode';
-import { omitUndefined, extractInObject } from '../../theme/tools';
-import { useContrastText } from '../useContrastText';
-import { useBreakpointResolvedProps } from '../useBreakpointResolvedProps';
-import { propsFlattener, compareSpecificity } from './propsFlattenerTest';
-
-const SPREAD_PROP_SPECIFICITY_ORDER = [
-  'p',
-  'padding',
-  'px',
-  'py',
-  'pt',
-  'pb',
-  'pl',
-  'pr',
-  'paddingTop',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingRight',
-  'm',
-  'margin',
-  'mx',
-  'my',
-  'mt',
-  'mb',
-  'ml',
-  'mr',
-  'marginTop',
-  'marginBottom',
-  'marginLeft',
-  'marginRight',
-];
-
-const FINAL_SPREAD_PROPS = [
-  'paddingTop',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingRight',
-  'marginTop',
-  'marginBottom',
-  'marginLeft',
-  'marginRight',
-];
-
-const MARGIN_MAP: any = {
-  mx: ['marginRight', 'marginLeft'],
-  my: ['marginTop', 'marginBottom'],
-  mt: ['marginTop'],
-  mb: ['marginBottom'],
-  mr: ['marginRight'],
-  ml: ['marginLeft'],
-};
-
-MARGIN_MAP.margin = [...MARGIN_MAP.mx, ...MARGIN_MAP.my];
-MARGIN_MAP.m = MARGIN_MAP.margin;
-MARGIN_MAP.marginTop = MARGIN_MAP.mt;
-MARGIN_MAP.marginBottom = MARGIN_MAP.mb;
-MARGIN_MAP.marginLeft = MARGIN_MAP.ml;
-MARGIN_MAP.marginRight = MARGIN_MAP.mr;
-
-const PADDING_MAP: any = {
-  px: ['paddingRight', 'paddingLeft'],
-  py: ['paddingTop', 'paddingBottom'],
-  pt: ['paddingTop'],
-  pb: ['paddingBottom'],
-  pr: ['paddingRight'],
-  pl: ['paddingLeft'],
-};
-
-PADDING_MAP.padding = [...PADDING_MAP.px, ...PADDING_MAP.py];
-PADDING_MAP.p = PADDING_MAP.padding;
-PADDING_MAP.paddingTop = PADDING_MAP.pt;
-PADDING_MAP.paddingBottom = PADDING_MAP.pb;
-PADDING_MAP.paddingLeft = PADDING_MAP.pl;
-PADDING_MAP.paddingRight = PADDING_MAP.pr;
-
-const SPREAD_PROP_SPECIFICITY_MAP: any = {
-  ...PADDING_MAP,
-  ...MARGIN_MAP,
-};
-
-function propsSpreader(incomingProps: any, incomingSpecifity: any) {
-  const flattenedDefaultProps: any = { ...incomingProps };
-  const specificity: any = {};
-
-  SPREAD_PROP_SPECIFICITY_ORDER.forEach((prop) => {
-    if (prop in flattenedDefaultProps) {
-      const val = incomingProps[prop] || flattenedDefaultProps[prop];
-      if (!FINAL_SPREAD_PROPS.includes(prop)) {
-        delete flattenedDefaultProps[prop];
-        specificity[prop] = incomingSpecifity[prop];
-      }
-
-      SPREAD_PROP_SPECIFICITY_MAP[prop].forEach((newProp: string) => {
-        if (compareSpecificity(specificity[newProp], specificity[prop])) {
-          specificity[newProp] = incomingSpecifity[prop];
-          flattenedDefaultProps[newProp] = val;
-        }
-      });
-    }
-  });
-
-  return merge({}, flattenedDefaultProps);
-}
-
-/**
- * @summary Combines provided porps with component's theme props and resloves them.
- * @arg {string} component - Name of the component.
- * @arg {object} incomingProps - Props passed by the user.
- * @arg {object} state - dependent states.
- * @arg {object} config - configuration for resolution. Accepts key like ignoreProps, resolveResponsively.
- * @returns {object} Resolved and flattened props.
- */
-export function usePropsResolutionTest(
-  component: string,
-  incomingProps: any,
-  state?: any,
-  config?: any
-) {
-  const [ignoredProps, cleanIncomingProps] = extractInObject(
-    incomingProps,
-    ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat(
-      config?.ignoreProps || []
-    )
-  );
-  const resolveResponsively = [
-    'colorScheme',
-    'size',
-    'variant',
-    ...(config?.resolveResponsively || []),
-  ];
-
-  const { theme } = useNativeBase();
-  const colorModeProps = useColorMode();
-
-  const componentTheme = get(theme, `components.${component}`, {});
-
-  // STEP 1: combine default props and incoming props
-
-  const incomingWithDefaultProps = merge(
-    {},
-    componentTheme.defaultProps || {},
-    cleanIncomingProps
-  );
-  // STEP 2: flatten them
-
-  let [flattenProps, specificityMap] = propsFlattener(
-    {
-      props: incomingWithDefaultProps,
-      platform: Platform.OS,
-      colormode: colorModeProps.colorMode,
-      state: state || {},
-      previouslyFlattenProps: {},
-    },
-    2
-  );
-
-  // STEP 2.5: resolving responsive props
-  const responsiveProps = {};
-  resolveResponsively.map((propsName) => {
-    if (flattenProps[propsName]) {
-      // @ts-ignore
-      responsiveProps[propsName] = flattenProps[propsName];
-    }
-  });
-
-  const responsivelyResolvedProps = useBreakpointResolvedProps(responsiveProps);
-
-  flattenProps = {
-    ...flattenProps,
-    ...responsivelyResolvedProps,
-  };
-  // STEP 3: Pass it to baseStyle, then variant and then size and resolve them.
-
-  // NOTE: Resoloving baseStyle
-  let componentBaseStyle = {},
-    flattenBaseStyle,
-    baseSpecificityMap;
-  if (componentTheme.baseStyle) {
-    componentBaseStyle =
-      typeof componentTheme.baseStyle !== 'function'
-        ? componentTheme.baseStyle
-        : componentTheme.baseStyle({
-            theme,
-            ...flattenProps,
-            ...colorModeProps,
-          });
-
-    [flattenBaseStyle, baseSpecificityMap] = propsFlattener(
-      {
-        props: componentBaseStyle,
-        platform: Platform.OS,
-        colormode: colorModeProps.colorMode,
-        state: state || {},
-        currentSpecificityMap: specificityMap,
-        previouslyFlattenProps: flattenProps,
-      },
-      1
-    );
-  }
-
-  // NOTE: Resolving variants
-
-  const variant = flattenProps.variant;
-
-  let componentVariantProps = {},
-    flattenVariantStyle,
-    variantSpecificityMap;
-  // Extracting props from variant
-  if (variant && componentTheme.variants && componentTheme.variants[variant]) {
-    componentVariantProps =
-      typeof componentTheme.variants[variant] !== 'function'
-        ? componentTheme.variants[variant]
-        : componentTheme.variants[variant]({
-            theme,
-            ...flattenProps,
-            ...colorModeProps,
-          });
-
-    [flattenVariantStyle, variantSpecificityMap] = propsFlattener(
-      {
-        props: componentVariantProps,
-        platform: Platform.OS,
-        colormode: colorModeProps.colorMode,
-        state: state || {},
-        currentSpecificityMap: baseSpecificityMap || specificityMap,
-        // NOTE: Ideally flattenBaseStyle and flattenProps should be deeply merged to create previouslyFlattenProps.
-        previouslyFlattenProps: flattenProps,
-      },
-      1
-    );
-
-    // We remove variant from original props if we found it in the componentTheme
-    //@ts-ignore
-    flattenProps.variant = undefined;
-  }
-
-  // NOTE: Resolving size
-
-  const size = flattenProps.size;
-
-  let componentSizeProps = {},
-    flattenSizeStyle,
-    sizeSpecificityMap;
-  // Extracting props from size
-  if (size && componentTheme.sizes && componentTheme.sizes[size]) {
-    // Type - sizes: {lg: 1}. Refer icon theme
-    if (
-      typeof componentTheme.sizes[size] === 'string' ||
-      typeof componentTheme.sizes[size] === 'number'
-    ) {
-      flattenProps.size = componentTheme.sizes[size];
-      //@ts-ignore
-      // componentSizeProps.size = componentTheme.sizes[size];
-    }
-    // Type - sizes: (props) => ({lg: {px: 1}}). Refer heading theme
-    else if (typeof componentTheme.sizes[size] === 'function') {
-      flattenProps.size = undefined;
-      componentSizeProps = componentTheme.sizes[size]({
-        theme,
-        ...flattenProps,
-        ...colorModeProps,
-      });
-    }
-    // Type - sizes: {lg: {px: 1}}. Refer button theme
-    else {
-      flattenProps.size = undefined;
-      componentSizeProps = componentTheme.sizes[size];
-    }
-
-    [flattenSizeStyle, sizeSpecificityMap] = propsFlattener(
-      {
-        props: componentSizeProps,
-        platform: Platform.OS,
-        colormode: colorModeProps.colorMode,
-        state: state || {},
-        currentSpecificityMap:
-          variantSpecificityMap || baseSpecificityMap || specificityMap,
-        previouslyFlattenProps: flattenProps,
-      },
-      1
-    );
-  }
-
-  // // STEP 4: merge
-  const defaultStyles = merge(
-    {},
-    flattenBaseStyle,
-    flattenVariantStyle,
-    flattenSizeStyle
-  );
-
-  for (const prop in defaultStyles) {
-    delete flattenProps[prop];
-  }
-
-  const defaultSpecificity = merge(
-    {},
-    specificityMap,
-    baseSpecificityMap,
-    variantSpecificityMap,
-    sizeSpecificityMap
-  );
-
-  flattenProps = propsSpreader(
-    { ...defaultStyles, ...flattenProps },
-    defaultSpecificity
-  );
-
-  // // STEP 5: linear Grad and contrastText
-  let ignore: any = [];
-  if (
-    flattenProps.bg?.linearGradient ||
-    flattenProps.background?.linearGradient ||
-    flattenProps.bgColor?.linearGradient ||
-    flattenProps.backgroundColor?.linearGradient
-  ) {
-    let bgProp = 'bg';
-    if (flattenProps.background?.linearGradient) {
-      bgProp = 'background';
-    } else if (flattenProps.bgColor?.linearGradient) {
-      bgProp = 'bgColor';
-    } else if (flattenProps.backgroundColor?.linearGradient) {
-      bgProp = 'backgroundColor';
-    }
-    flattenProps[bgProp].linearGradient.colors = flattenProps[
-      bgProp
-    ].linearGradient.colors.map((color: string) => {
-      return get(theme.colors, color, color);
-    });
-    ignore = ['bg', 'background', 'backgroundColor', 'bgColor'];
-  }
-  // // NOTE: seprating bg props when linearGardiant is available
-  const [gradientProps] = extractInObject(flattenProps, ignore);
-
-  const bgColor =
-    flattenProps.bg ?? flattenProps.backgroundColor ?? flattenProps.bgColor;
-
-  const contrastTextColor = useContrastText(
-    bgColor,
-    flattenProps?._text?.color
-  );
-
-  flattenProps._text =
-    contrastTextColor && flattenProps?._text?.color === undefined
-      ? {
-          color: contrastTextColor,
-          ...flattenProps._text,
-        }
-      : flattenProps._text;
-
-  const resolvedProps = omitUndefined({
-    ...flattenProps,
-    ...ignoredProps,
-    ...gradientProps,
-  });
-  // STEP 6: Return
-
-  // flattenProps = {};
-  // propertyDepth = {};
-
-  return resolvedProps;
-}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useThemeProps/usePropsWithComponentTheme.ts

@@ -1,9 +0,0 @@
-import { usePropsResolutionWithComponentTheme } from './usePropsResolution';
-import type { ComponentTheme } from '../../theme';
-
-export function usePropsWithComponentTheme(
-  localTheme: ComponentTheme,
-  propsReceived: any
-) {
-  return usePropsResolutionWithComponentTheme(localTheme, propsReceived);
-}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useThemeProps/utils.ts

@@ -1,289 +0,0 @@
-import get from 'lodash.get';
-import isNil from 'lodash.isnil';
-import mergeWith from 'lodash.mergewith';
-import cloneDeep from 'lodash.clonedeep';
-import { themePropertyMap } from './../../theme/base';
-import {
-  getClosestBreakpoint,
-  findLastValidBreakpoint,
-  hasValidBreakpointFormat,
-  extractInObject,
-} from './../../theme/tools';
-import { useContrastText } from '../useContrastText';
-
-/*
- Extract props from theme props and omit those from props
-*/
-/**
- *
- * @param props Props passed by the user
- * @param theme Theme object
- * @param colorModeProps `colorMode` object
- * @param componentTheme Theme for specific components
- * @param currentBreakpoint Current breakpoint values
- * @returns Extracting props from defaultProps while overriding the props that are already present
- */
-export function extractProps(
-  props: any,
-  theme: any,
-  {},
-  componentTheme: any,
-  currentBreakpoint: number
-) {
-  let newProps: any = {};
-  for (let property in props) {
-    // If the property exists in themePropertyMap then get its value
-    if (themePropertyMap[property]) {
-      let propValues = extractPropertyFromFunction(
-        property,
-        props,
-        theme,
-        componentTheme
-      );
-      if (typeof propValues === 'string' || typeof propValues === 'number') {
-        newProps[property] = propValues;
-      } else if (!isNil(propValues)) {
-        for (let nestedProp in propValues) {
-          newProps[nestedProp] = get(
-            theme,
-            `${themePropertyMap[nestedProp]}.${propValues[nestedProp]}`,
-            propValues[nestedProp]
-          );
-        }
-      } else if (property === 'shadow') {
-        let shadowProps = theme[themePropertyMap[property]][props[property]];
-        if (!isNil(shadowProps)) {
-          newProps = { ...newProps, ...shadowProps };
-        }
-      } else {
-        newProps[property] = resolveValueWithBreakpoint(
-          props[property],
-          theme.breakpoints,
-          currentBreakpoint,
-          property
-        );
-      }
-    } else {
-      newProps[property] = resolveValueWithBreakpoint(
-        props[property],
-        theme.breakpoints,
-        currentBreakpoint,
-        property
-      );
-    }
-  }
-  return cloneDeep(newProps);
-}
-
-/*
-Remove props from defaultProps that are already present in props
-*/
-function filterDefaultProps(props: any, defaultProps: any) {
-  let [, resultProps] = extractInObject(defaultProps, Object.keys(props));
-  return resultProps;
-}
-
-/**
- * If property is functional in componentTheme, get its returned object
- *
- * @param property : name of the prop
- * @param props : all props
- * @param theme : provided theme without components
- * @param componentTheme : component specific theme
- * @returns
- */
-export const extractPropertyFromFunction = (
-  property: string,
-  props: any,
-  theme: any,
-  componentTheme: any
-) => {
-  let propValues;
-  // Check if the entry in the theme is a function then calling it with all theme and props as params
-  if (
-    componentTheme &&
-    typeof componentTheme[themePropertyMap[property]] === 'function'
-  ) {
-    let funcProps = componentTheme[themePropertyMap[property]]({
-      theme,
-      ...props,
-    });
-    // Check if returned object from componentTheme is a nested object
-    let isNested: boolean = Object.keys(funcProps).some(function (key) {
-      return funcProps[key] && typeof funcProps[key] === 'object';
-    });
-    // If the returned value is nested object then find the property value in it, otherwise return the whole object
-    propValues = isNested
-      ? { ...get(funcProps, `${props[property]}`) }
-      : { ...funcProps };
-  } else {
-    // If the entry is any value other than function then return the whole object or value
-    propValues = get(
-      componentTheme,
-      `${themePropertyMap[property]}.${props[property]}`
-    );
-  }
-  return propValues;
-};
-
-/*
-Merge _props and apply contrastText color if not passed by theme or user
-*/
-export function mergeUnderscoreProps(newProps: any, props: any) {
-  const _props = Object.keys(newProps).filter((propName) =>
-    propName.startsWith('_')
-  );
-  _props.forEach((propName: string) => {
-    // Adding color based on bg contrast if no color is given
-    const bg = newProps.bg ?? newProps.backgroundColor;
-    const textColor = bg
-      ? {
-          color: useContrastText(
-            bg,
-            newProps[propName]?.color ?? props[propName]?.color
-          ),
-        }
-      : {};
-    // Overriding calculated props with user added props
-    newProps[propName] = {
-      ...textColor,
-      ...newProps[propName],
-      ...props[propName],
-    };
-  });
-  return newProps;
-}
-
-/**
- *
- * Checks the property and resolves it if it has breakpoints
- * @param values : value from props
- * @param currentBreakpoint : current value for which breakpoint will be calculated
- * @param property : property name
- * @returns
- */
-export const resolveValueWithBreakpoint = (
-  values: any,
-  breakpointTheme: any,
-  currentBreakpoint: number,
-  property: any
-) => {
-  if (hasValidBreakpointFormat(values, breakpointTheme, property)) {
-    // Check the last valid breakpoint value from all values
-    // If current breakpoint is `md` and we have `base` then `lg`, then last value will be taken(`base` in this case)
-    return findLastValidBreakpoint(values, breakpointTheme, currentBreakpoint);
-  } else {
-    return values;
-  }
-};
-
-/**
- * Takes all prop related data and returns the props that needs to be applied to the component
- *
- * @param theme Theme object
- * @param colorModeProps Color mode information
- * @param componentTheme Theme object for the specific component
- * @param props Props passed by the user
- * @param windowWidth Width of the current window
- * @returns props to be applied
- */
-export function calculateProps(
-  theme: any,
-  colorModeProps: any,
-  componentTheme: any,
-  props: any,
-  windowWidth: any
-) {
-  let currentBreakpoint = getClosestBreakpoint(theme.breakpoints, windowWidth);
-  if (!props) {
-    props = {};
-  }
-
-  let newProps: any;
-  if (componentTheme) {
-    // Extracting props from defaultProps
-    newProps = extractProps(
-      filterDefaultProps(props, componentTheme.defaultProps),
-      theme,
-      colorModeProps,
-      componentTheme,
-      currentBreakpoint
-    );
-    // Extracting props from base style
-    let componentBaseStyle =
-      typeof componentTheme.baseStyle !== 'function'
-        ? componentTheme.baseStyle
-        : componentTheme.baseStyle({
-            theme,
-            ...newProps,
-            ...props,
-            ...colorModeProps,
-          });
-    newProps = mergeWith(
-      newProps,
-      componentBaseStyle,
-      // @ts-ignore
-      (objValue, srcValue, key) => {
-        if (!isNil(objValue)) {
-          delete newProps[key];
-        }
-      }
-    );
-
-    const variant =
-      props.variant || get(componentTheme, 'defaultProps.variant');
-    // Extracting props from variant
-    if (
-      variant &&
-      componentTheme.variants &&
-      componentTheme.variants[variant]
-    ) {
-      const colorScheme =
-        props.colorScheme || get(componentTheme, 'defaultProps.colorScheme');
-      let variantProps = componentTheme.variants[variant]({
-        ...props,
-        ...newProps,
-        colorScheme,
-        theme,
-        ...colorModeProps,
-      });
-      variantProps = extractProps(
-        variantProps,
-        theme,
-        colorModeProps,
-        componentTheme,
-        currentBreakpoint
-      );
-      // added this to handle order of props
-      newProps = mergeWith(
-        newProps,
-        variantProps,
-        // @ts-ignore
-        (objValue, srcValue, key) => {
-          if (!isNil(objValue)) {
-            delete newProps[key];
-          }
-        }
-      );
-      delete newProps.variant;
-      delete newProps.colorScheme;
-    }
-  }
-  // Extracting props from normal props
-  let extractedProps = extractProps(
-    props,
-    theme,
-    colorModeProps,
-    componentTheme,
-    currentBreakpoint
-  );
-  // added this to handle order of props
-  // @ts-ignore
-  newProps = mergeWith(newProps, extractedProps, (objValue, srcValue, key) => {
-    if (!isNil(objValue)) {
-      delete newProps[key];
-    }
-  });
-  newProps = mergeUnderscoreProps(newProps, props);
-  return newProps;
-}

package/Example/nativebase-v3-kitchensink/src/nb/NativeBase/src/hooks/useToken.ts

@@ -1,23 +0,0 @@
-import { useTheme } from './useTheme';
-import get from 'lodash.get';
-
-export function useToken<T extends string | number>(
-  property: string,
-  token: T | T[],
-  fallback?: T | T[]
-) {
-  const theme = useTheme();
-  if (Array.isArray(token)) {
-    let fallbackArr: T[] = [];
-    if (fallback) {
-      fallbackArr = Array.isArray(fallback) ? fallback : [fallback];
-    }
-    return token.map((innerToken, index) => {
-      const path = `${property}.${innerToken}`;
-      return get(theme, path, fallbackArr[index] ?? innerToken);
-    });
-  }
-
-  const path = `${property}.${token}`;
-  return get(theme, path, fallback ?? token);
-}