react-native-acoustic-connect-beta 17.0.2 → 18.0.8

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

@@ -1,485 +0,0 @@
-import get from 'lodash.get';
-import merge from 'lodash.merge';
-import isEmpty from 'lodash.isempty';
-import { Platform } from 'react-native';
-import { useNativeBase } from '../useNativeBase';
-import { useColorMode } from '../../core/color-mode';
-import { omitUndefined, extractInObject } from '../../theme/tools';
-import { useBreakpointResolvedProps } from '../useBreakpointResolvedProps';
-import {
-  propsFlattener,
-  compareSpecificity,
-  IStateProps,
-} from './propsFlattener';
-import { useResponsiveSSRProps } from '../useResponsiveSSRProps';
-import React from 'react';
-import { ResponsiveQueryContext } from '../../utils/useResponsiveQuery/ResponsiveQueryProvider';
-import type { ComponentTheme } from '../../theme';
-
-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 usePropsResolution(
-  component: string,
-  incomingProps: any,
-  state?: IStateProps,
-  config?: {
-    componentTheme?: any;
-    resolveResponsively?: string[];
-    ignoreProps?: string[];
-    cascadePseudoProps?: boolean;
-    extendTheme?: string[];
-  }
-) {
-  const { theme } = useNativeBase();
-  const componentTheme =
-    config?.componentTheme ?? get(theme, `components.${component}`, {});
-
-  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {
-    /* eslint-disable-next-line */
-    console.log(
-      `%c${component}`,
-      'background: #d97706; color: #111; font-weight: 700; padding: 2px 8px;'
-    );
-    /* eslint-disable-next-line */
-    console.log(
-      `%cusePropsResolution`,
-      'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;'
-    );
-    /* eslint-disable-next-line */
-    console.log(
-      '%c incomingProps: ',
-      'color: #4ade80; font-weight: 700;',
-      incomingProps
-    );
-    /* eslint-disable-next-line */
-    console.log('%c state: ', 'color: #4ade80; font-weight: 700;', state);
-    /* eslint-disable-next-line */
-    console.log(
-      '%c componentTheme: ',
-      'color: #4ade80; font-weight: 700;',
-      componentTheme
-    );
-  }
-
-  const resolvedProps = usePropsResolutionWithComponentTheme(
-    componentTheme,
-    incomingProps,
-    state,
-    config
-  );
-
-  // Not Resolve theme props and pseudo props
-  if (incomingProps?.INTERNAL_notResolveThemeAndPseudoProps) {
-    delete incomingProps.INTERNAL_notResolveThemeAndPseudoProps;
-    return incomingProps;
-  }
-
-  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {
-    /* eslint-disable-next-line */
-    console.log(
-      '%c resolvedProps: ',
-      'color: #22d3ee; font-weight: 700;',
-      resolvedProps
-    );
-  }
-  return resolvedProps;
-}
-
-export const usePropsResolutionWithComponentTheme = (
-  componentTheme: ComponentTheme,
-  incomingProps: any,
-  state?: IStateProps,
-  config?: {
-    componentTheme?: any;
-    resolveResponsively?: string[];
-    ignoreProps?: string[];
-    cascadePseudoProps?: boolean;
-    extendTheme?: string[];
-  }
-) => {
-  const modifiedPropsForSSR = useResponsiveSSRProps(incomingProps);
-
-  const [ignoredProps, cleanIncomingProps] = extractInObject(
-    modifiedPropsForSSR,
-    ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat(
-      config?.ignoreProps || []
-    )
-  );
-  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
-  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
-  const resolveResponsively = [
-    'colorScheme',
-    'size',
-    'variant',
-    ...(config?.resolveResponsively || []),
-  ];
-
-  const { theme } = useNativeBase();
-  const colorModeProps = useColorMode();
-
-  const extendedTheme: Array<any> = [];
-  if (config?.extendTheme) {
-    config?.extendTheme.map((componentName: string) => {
-      extendedTheme.push(get(theme, `components.${componentName}`, {}));
-    });
-  }
-  if (!isEmpty(componentTheme)) extendedTheme.push(componentTheme);
-
-  const resolveComponentTheme = (
-    themeType: Array<string>,
-    providedTheme: any
-  ): any => {
-    try {
-      if (themeType[1]) {
-        return typeof providedTheme[themeType[0]][themeType[1]] !== 'function'
-          ? providedTheme[themeType[0]][themeType[1]]
-          : providedTheme[themeType[0]][themeType[1]]({
-              theme,
-              ...incomingWithDefaultProps,
-              ...colorModeProps,
-            });
-      } else {
-        return typeof providedTheme[themeType[0]] !== 'function'
-          ? providedTheme[themeType[0]]
-          : providedTheme[themeType[0]]({
-              theme,
-              ...incomingWithDefaultProps,
-              ...colorModeProps,
-            });
-      }
-    } catch {
-      return {};
-    }
-  };
-  const callPropsFlattener = (
-    targetProps = {},
-    latestSpecifictyMap = {},
-    specificity = 1
-  ): any => {
-    return propsFlattener(
-      {
-        props:
-          process.env.NODE_ENV === 'development' && cleanIncomingProps.debug
-            ? { ...targetProps, debug: true }
-            : targetProps,
-        platform: Platform.OS,
-        colormode: colorModeProps.colorMode,
-        state: state || {},
-        currentSpecificityMap: latestSpecifictyMap,
-        previouslyFlattenProps: flattenProps || {},
-        cascadePseudoProps: config?.cascadePseudoProps,
-      },
-      specificity
-    );
-  };
-
-  // STEP 1: combine default props and incoming props
-
-  const incomingWithDefaultProps = merge(
-    {},
-    componentTheme.defaultProps || {},
-    cleanIncomingProps
-  );
-
-  // STEP 1.5: resolving component theme
-  let combinedBaseStyle = {};
-  let combinedVariantStyle = {};
-  let combinedSizeStyle = {};
-  extendedTheme.map((extededComponentTheme: any) => {
-    if (extededComponentTheme.baseStyle) {
-      combinedBaseStyle = {
-        ...combinedBaseStyle,
-        ...resolveComponentTheme(['baseStyle'], extededComponentTheme),
-      };
-    }
-    if (incomingWithDefaultProps.variant) {
-      if (extededComponentTheme.variants) {
-        combinedVariantStyle = {
-          ...combinedVariantStyle,
-          ...resolveComponentTheme(
-            ['variants', incomingWithDefaultProps.variant],
-            extededComponentTheme
-          ),
-        };
-      }
-    }
-    if (
-      incomingWithDefaultProps.size &&
-      extededComponentTheme?.sizes &&
-      extededComponentTheme?.sizes[incomingWithDefaultProps.size]
-    ) {
-      if (
-        typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===
-          'string' ||
-        typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] ===
-          'number'
-      ) {
-        incomingWithDefaultProps.size =
-          extededComponentTheme.sizes[incomingWithDefaultProps.size];
-      } else {
-        combinedSizeStyle = {
-          ...combinedSizeStyle,
-          ...resolveComponentTheme(
-            ['sizes', incomingWithDefaultProps.size],
-            extededComponentTheme
-          ),
-        };
-        incomingWithDefaultProps.size = undefined;
-      }
-    }
-  });
-
-  // STEP 2: flatten them
-  if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
-    /* eslint-disable-next-line */
-    console.log(
-      `%cFlattening incoming and Default`,
-      'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
-    );
-  }
-  //TODO: hack
-  let flattenProps: any, specificityMap;
-  [flattenProps, specificityMap] = callPropsFlattener(
-    incomingWithDefaultProps,
-    {},
-    2
-  );
-  const responsiveProps = {};
-  if (disableCSSMediaQueries) {
-    // STEP 2.5: resolving responsive props
-    resolveResponsively.map((propsName) => {
-      if (flattenProps[propsName]) {
-        // @ts-ignore
-        responsiveProps[propsName] = flattenProps[propsName];
-      }
-    });
-  }
-  if (resolveResponsively.includes('direction')) {
-    const propName = 'direction';
-    if (flattenProps[propName]) {
-      // @ts-ignore
-      responsiveProps[propName] = flattenProps[propName];
-    }
-  }
-  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 flattenBaseStyle, baseSpecificityMap;
-  if (combinedBaseStyle) {
-    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
-      /* eslint-disable-next-line */
-      console.log(
-        `%cFlattening baseStyle`,
-        'background: #4b5563; color: #eee; font-weight: 700; padding: 2px 8px;'
-      );
-    }
-    [flattenBaseStyle, baseSpecificityMap] = callPropsFlattener(
-      combinedBaseStyle,
-      specificityMap
-    );
-  }
-
-  // NOTE: Resolving variants
-  let flattenVariantStyle, variantSpecificityMap;
-  // Extracting props from variant
-  if (combinedVariantStyle) {
-    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
-      /* eslint-disable-next-line */
-      console.log(
-        `%cFlattening variantStyle`,
-        'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
-      );
-    }
-    [flattenVariantStyle, variantSpecificityMap] = callPropsFlattener(
-      combinedVariantStyle,
-      baseSpecificityMap || specificityMap
-    );
-
-    // We remove variant from original props if we found it in the componentTheme
-    //@ts-ignore
-    flattenProps.variant = undefined;
-  }
-
-  // NOTE: Resolving size
-
-  let flattenSizeStyle, sizeSpecificityMap;
-  // Extracting props from size
-  if (combinedSizeStyle) {
-    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
-      /* eslint-disable-next-line */
-      console.log(
-        `%cFlattening sizeStyle`,
-        'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;'
-      );
-    }
-    [flattenSizeStyle, sizeSpecificityMap] = callPropsFlattener(
-      combinedSizeStyle,
-      variantSpecificityMap || baseSpecificityMap || specificityMap
-    );
-  }
-
-  // STEP 4: merge
-  const defaultStyles = merge(
-    {},
-    flattenBaseStyle,
-    flattenVariantStyle,
-    flattenSizeStyle
-  );
-
-  /*Resolve all the internal used Pseudo Props*/
-  const resolvePseudoProps = (
-    flatPseudoProp: any /** Props coming from Pseudo inside flattenProps */,
-    baseStylePseudoProp: any /** Props coming from Pseudo inside defaultStyles(baseStyle) */
-  ) => {
-    for (const prop in flatPseudoProp) {
-      baseStylePseudoProp[prop] =
-        flatPseudoProp[
-          prop
-        ]; /* Replace all the similar prop from from internal props */
-    }
-    return baseStylePseudoProp;
-  };
-
-  for (const prop in defaultStyles) {
-    if (prop.startsWith('_') && flattenProps.hasOwnProperty(prop)) {
-      /*Resolve all the internal used Pseudo Props*/
-      defaultStyles[prop] = resolvePseudoProps(
-        flattenProps[prop],
-        defaultStyles[prop]
-      );
-    }
-    delete flattenProps[prop];
-  }
-
-  const defaultSpecificity = merge(
-    {},
-    specificityMap,
-    baseSpecificityMap,
-    variantSpecificityMap,
-    sizeSpecificityMap
-  );
-
-  flattenProps = propsSpreader(
-    { ...defaultStyles, ...flattenProps },
-    defaultSpecificity
-  );
-
-  const resolvedProps = omitUndefined({
-    ...flattenProps,
-    ...ignoredProps,
-  });
-
-  // STEP 5: Return
-  return resolvedProps;
-};