@react-native-ohos/native-base 3.4.29-rc.1

package/src/hooks/useThemeProps/usePropsResolution.tsx

@@ -0,0 +1,485 @@
+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;
+};