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

package/src/factory/component.tsx

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import { usePropsWithComponentTheme } from '../hooks/useThemeProps/usePropsWithComponentTheme';
+import type { ComponentTheme } from '../theme';
+import type { FactoryComponentProps } from './types';
+import { makeStyledComponent } from '../utils/styled';
+
+export default function Factory<P>(
+  Component: React.ComponentType<P>,
+  componentTheme?: ComponentTheme
+) {
+  return React.forwardRef(
+    ({ children, _state, ...props }: P & FactoryComponentProps, ref: any) => {
+      const StyledComponent = useMemo(() => makeStyledComponent(Component), []);
+      const calculatedProps = usePropsWithComponentTheme(
+        componentTheme ?? {},
+        props,
+        _state
+      );
+      return (
+        <StyledComponent {...(calculatedProps as P)} ref={ref}>
+          {children}
+        </StyledComponent>
+      );
+    }
+  );
+}

package/src/factory/index.tsx

@@ -0,0 +1,2 @@
+export { default as Factory } from './component';
+export type { FactoryComponentProps } from './types';

package/src/factory/types.ts

@@ -0,0 +1,9 @@
+import type { PlatformProps } from '../components/types';
+import type { StyledProps } from '../theme/types';
+import type { IStateProps } from '../hooks/useThemeProps/propsFlattener';
+
+export type FactoryComponentProps = StyledProps &
+  PlatformProps<StyledProps> & {
+    children?: string | JSX.Element | JSX.Element[];
+    _state?: IStateProps;
+  };

package/src/hooks/index.ts

@@ -0,0 +1,28 @@
+export { useClipboard } from './useClipboard';
+export { useDisclose } from './useDisclose';
+export { useNativeBase } from './useNativeBase';
+export { useMediaQuery } from './useMediaQuery';
+export { useBreakpointValue } from './useBreakpointValue';
+export { useBreakpointResolvedProps } from './useBreakpointResolvedProps';
+export { usePlatformProps } from './usePlatformProps';
+export { useStyledSystemPropsResolver } from './useStyledSystemPropsResolver';
+export {
+  useControllableProp,
+  useControllableState,
+} from './useControllableProp';
+// TODO: Have to properly remove these as we're no longer using them internally.
+export { useThemeProps, usePropsWithComponentTheme } from './useThemeProps';
+// TODO: instead export only this.
+export { usePropsResolution } from './useThemeProps';
+export { usePropsResolutionTest } from './useThemeProps/usePropsResolutionTest';
+export { useTheme } from './useTheme';
+export { useToken } from './useToken';
+export { useSafeArea } from './useSafeArea';
+export { useContrastText } from './useContrastText';
+export { useScreenReaderEnabled } from './useScreenReaderEnabled';
+export {
+  useKeyboardDismissable,
+  keyboardDismissHandlerManager,
+} from './useKeyboardDismissable';
+export { useLayout } from './useLayout';
+export { useSx } from './useSx';

package/src/hooks/tests/useBreakpointValue.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useBreakpointValue } from '../../hooks/useBreakpointValue';
+import { NativeBaseProvider } from '../../core/NativeBaseProvider';
+import { renderHook } from '@testing-library/react-hooks';
+
+describe('useBreakpointValue', () => {
+  const wrapper = ({ children }: any) => (
+    <NativeBaseProvider
+      initialWindowMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      {children}
+    </NativeBaseProvider>
+  );
+  test('Empty array', () => {
+    const { result } = renderHook(() => useBreakpointValue([]), {
+      wrapper,
+    });
+    expect(result.current).toEqual([]);
+  });
+  test('Empty object', () => {
+    const { result } = renderHook(() => useBreakpointValue({}), {
+      wrapper,
+    });
+    expect(result.current).toEqual(undefined);
+  });
+  test('Basic array', () => {
+    const { result } = renderHook(() => useBreakpointValue([1, 2, 3]), {
+      wrapper,
+    });
+    expect(result.current).toEqual(2);
+  });
+  test('Basic Object', () => {
+    const { result } = renderHook(
+      () => useBreakpointValue({ base: 0, sm: 1, md: 2 }),
+      {
+        wrapper,
+      }
+    );
+    expect(result.current).toEqual(1);
+  });
+});

package/src/hooks/useBreakpointResolvedProps.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ResponsiveValue } from '../components/types';
+import { useNativeBaseConfig } from '../core/NativeBaseContext';
+import { resolveValueWithBreakpoint } from './useThemeProps/utils';
+import { useTheme } from './../hooks/useTheme';
+
+type IProps = {
+  [key: string]: ResponsiveValue<number | string>;
+};
+
+type INewProps = {
+  [key: string]: number | string;
+};
+
+export const useBreakpointResolvedProps = (props: IProps) => {
+  const currentBreakpoint = useNativeBaseConfig('useBreakpointResolvedProps')
+    .currentBreakpoint;
+  const theme = useTheme();
+  const newProps: INewProps = React.useMemo(() => {
+    let newProps: INewProps = {};
+    for (let key in props) {
+      const rawValue = props[key];
+      const value = resolveValueWithBreakpoint(
+        rawValue,
+        theme.breakpoints,
+        currentBreakpoint,
+        key
+      );
+      newProps[key] = value;
+    }
+    return newProps;
+  }, [props, currentBreakpoint, theme.breakpoints]);
+
+  return newProps;
+};

package/src/hooks/useBreakpointValue.ts

@@ -0,0 +1,31 @@
+import { useWindowDimensions } from 'react-native';
+import {
+  getClosestBreakpoint,
+  hasValidBreakpointFormat,
+  findLastValidBreakpoint,
+} from '../theme/tools';
+import { useTheme } from './../hooks/useTheme';
+import type { ITheme } from '../theme/index';
+
+type UseBreakpointValueParam =
+  | { [key in keyof ITheme['breakpoints']]?: any }
+  | Array<any>;
+
+export function useBreakpointValue(values: UseBreakpointValueParam) {
+  let windowWidth = useWindowDimensions()?.width;
+  const theme = useTheme();
+
+  if (hasValidBreakpointFormat(values, theme.breakpoints)) {
+    let currentBreakpoint = getClosestBreakpoint(
+      theme.breakpoints,
+      windowWidth
+    );
+    return findLastValidBreakpoint(
+      values,
+      theme.breakpoints,
+      currentBreakpoint
+    );
+  } else {
+    return values;
+  }
+}

package/src/hooks/useClipboard.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Clipboard } from 'react-native';
+
+export function useClipboard() {
+  const [hasCopied, setHasCopied] = React.useState(false);
+  const [value, setValue] = React.useState<string>('');
+  const onCopy = async (copiedValue: string) => {
+    if (Clipboard) {
+      await Clipboard.setString(copiedValue);
+    }
+    setValue(copiedValue);
+    setHasCopied(true);
+  };
+  return {
+    value,
+    onCopy,
+    hasCopied,
+  };
+}

package/src/hooks/useColorModeProps.ts

@@ -0,0 +1,18 @@
+import merge from 'lodash.merge';
+import { useColorMode } from '../core/color-mode';
+
+export const useColorModeProps = (props: any) => {
+  const { _light, _dark, ...remainingProps } = props;
+  const { colorMode } = useColorMode();
+  const colorModeProps = () => {
+    switch (colorMode) {
+      case 'light':
+        return _light;
+      case 'dark':
+        return _dark;
+      default:
+        return {};
+    }
+  };
+  return merge(remainingProps, colorModeProps());
+};

package/src/hooks/useContrastText.ts

@@ -0,0 +1,155 @@
+import Color from 'tinycolor2';
+import { useToken } from './useToken';
+import { useAccessibleColors } from '../core/color-mode/hooks';
+import { useNativeBaseConfig } from '../core/NativeBaseContext';
+
+export function useContrastText(bg: string, color?: string) {
+  const [
+    contrastThreshold,
+    trueDarkText,
+    trueLightText,
+    trueBg,
+    trueColor,
+  ] = useToken('colors', [
+    'contrastThreshold',
+    'darkText',
+    'lightText',
+    bg,
+    color ?? '',
+  ]);
+
+  const suppressColorAccessibilityWarning = useNativeBaseConfig(
+    'NativeBaseConfigProvider'
+  ).config.suppressColorAccessibilityWarning;
+
+  const [accessibleColors] = useAccessibleColors();
+
+  if (useNativeBaseConfig('NativeBaseConfigProvider').disableContrastText) {
+    return trueColor;
+  }
+  if (typeof bg !== 'string') {
+    return;
+  }
+
+  const [bgThemeColorVariant, bgShade] = bg.split('.');
+
+  const textColor =
+    !accessibleColors &&
+    bgThemeColorVariant &&
+    themeColorsThresholdShades[bgThemeColorVariant]
+      ? getContrastThemeColor(bgThemeColorVariant, bgShade)
+      : getAccessibleContrastColor(
+          contrastThreshold,
+          trueDarkText,
+          trueLightText,
+          trueBg,
+          trueColor,
+          bg,
+          color,
+          suppressColorAccessibilityWarning
+        );
+
+  return textColor;
+}
+
+function getContrastThemeColor(bgThemeColorVariant: string, bgShade: string) {
+  const shadeThreshold = themeColorsThresholdShades[bgThemeColorVariant];
+  if (
+    bgShade &&
+    shadeThreshold &&
+    ((bgShade >= shadeThreshold && bgThemeColorVariant !== 'dark') ||
+      (bgThemeColorVariant === 'dark' && bgShade < shadeThreshold))
+  ) {
+    return 'lightText';
+  }
+  return 'darkText';
+}
+function getAccessibleContrastColor(
+  contrastThreshold: number,
+  trueDarkText: string,
+  trueLightText: string,
+  trueBg: string,
+  trueColor: string,
+  bg: string,
+  color?: string,
+  suppressColorAccessibilityWarning?: boolean
+) {
+  if (typeof trueBg !== 'string') {
+    trueBg = bg;
+  }
+  let trueContrastColor;
+  let contrastColorToken;
+  const darkTextConstrast = getContrastRatio(trueBg, trueDarkText);
+  const lightTextConstrast = getContrastRatio(trueBg, trueLightText);
+
+  if (
+    darkTextConstrast >= contrastThreshold ||
+    darkTextConstrast > lightTextConstrast
+  ) {
+    trueContrastColor = trueDarkText;
+    contrastColorToken = 'darkText';
+  } else {
+    trueContrastColor = trueLightText;
+    contrastColorToken = 'lightText';
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    const contrast = getContrastRatio(
+      trueBg,
+      trueColor ? trueColor : trueContrastColor
+    );
+    if (contrast < 3 && !suppressColorAccessibilityWarning) {
+      console.warn(
+        [
+          `NativeBase: The contrast ratio of ${contrast}:1 for ${
+            color ? color : contrastColorToken
+          } on ${bg}`,
+          'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.',
+          'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast',
+        ].join('\n')
+      );
+    }
+  }
+  return contrastColorToken;
+}
+function getContrastRatio(foreground: string, background: string) {
+  const lumA = Color(foreground).getLuminance();
+  const lumB = Color(background).getLuminance();
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+
+const themeColorsThresholdShades: any = {
+  rose: 500,
+  pink: 500,
+  fuchsia: 800,
+  purple: 700,
+  violet: 600,
+  indigo: 500,
+  blue: 400,
+  lightBlue: 400,
+  cyan: 300,
+  teal: 300,
+  emerald: 300,
+  tertiary: 300,
+  green: 400,
+  lime: 600,
+  yellow: 800,
+  amber: 500,
+  orange: 500,
+  red: 500,
+  warmGray: 500,
+  trueGray: 500,
+  gray: 500,
+  coolGray: 500,
+  blueGray: 500,
+  dark: 500,
+  danger: 500,
+  error: 500,
+  success: 400,
+  warning: 500,
+  muted: 500,
+  primary: 500,
+  info: 400,
+  secondary: 500,
+  light: 500,
+};

package/src/hooks/useControllableProp.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+
+export function useControllableProp<T>(prop: T | undefined, state: T) {
+  const { current: isControlled } = React.useRef(prop !== undefined);
+  const value = isControlled && typeof prop !== 'undefined' ? prop : state;
+  return [isControlled, value] as const;
+}
+
+export interface UseControllableStateProps<T> {
+  /**
+   * The value to used in controlled mode
+   */
+  value?: T;
+  /**
+   * The initial value to be used, in uncontrolled mode
+   */
+  defaultValue?: T | (() => T);
+  /**
+   * The callback fired when the value changes
+   */
+  onChange?: (value: T) => void;
+  /**
+   * The component name (for warnings)
+   */
+  name?: string;
+}
+
+/**
+ * React hook for using controlling component state.
+ * @param props
+ */
+export function useControllableState<T>(props: UseControllableStateProps<T>) {
+  const { value: valueProp, defaultValue, onChange } = props;
+
+  const [valueState, setValue] = React.useState(defaultValue as T);
+  const isControlled = valueProp !== undefined;
+
+  const value = isControlled ? (valueProp as T) : valueState;
+
+  const updateValue = React.useCallback(
+    (next: any) => {
+      const nextValue = typeof next === 'function' ? next(value) : next;
+      if (!isControlled) {
+        setValue(nextValue);
+      }
+      onChange && onChange(nextValue);
+    },
+    [isControlled, onChange, value]
+  );
+
+  return [value, updateValue] as [T, React.Dispatch<React.SetStateAction<T>>];
+}

package/src/hooks/useDisclose.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function useDisclose(initState?: boolean) {
+  const [isOpen, setIsOpen] = React.useState(initState || false);
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+  };
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return {
+    isOpen,
+    onOpen,
+    onClose,
+    onToggle,
+  };
+}

package/src/hooks/useHasResponsiveProps.ts

@@ -0,0 +1,19 @@
+// import { useWindowDimensions } from 'react-native';
+// import { isResponsiveAnyProp } from '../theme/tools';
+
+//  @ts-ignore eslint-disable-next-line
+export function useHasResponsiveProps(props: any) {
+  if (props) {
+    //
+  }
+  return false;
+  //   const windowDimensions = useWindowDimensions();
+
+  //   if (!windowDimensions.width || !windowDimensions.height) {
+  //     const responsivePropsExists = isResponsiveAnyProp(props);
+  //     if (responsivePropsExists) {
+  //       return true;
+  //     }
+  //   }
+  //   return false;
+}

package/src/hooks/useKeyboardDismissable.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
+
+let nativeEventSubscription: NativeEventSubscription
+
+type IParams = {
+  enabled?: boolean;
+  callback: () => any;
+};
+
+let keyboardDismissHandlers: Array<() => any> = [];
+export const keyboardDismissHandlerManager = {
+  push: (handler: () => any) => {
+    keyboardDismissHandlers.push(handler);
+    return () => {
+      keyboardDismissHandlers = keyboardDismissHandlers.filter(
+        (h) => h !== handler
+      );
+    };
+  },
+  length: () => keyboardDismissHandlers.length,
+  pop: () => {
+    return keyboardDismissHandlers.pop();
+  },
+};
+
+/**
+ * Handles attaching callback for Escape key listener on web and Back button listener on Android
+ */
+export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
+  React.useEffect(() => {
+    let cleanupFn = () => { };
+    if (enabled) {
+      cleanupFn = keyboardDismissHandlerManager.push(callback);
+    } else {
+      cleanupFn();
+    }
+    return () => {
+      cleanupFn();
+    };
+  }, [enabled, callback]);
+
+  useBackHandler({ enabled, callback });
+};
+
+export function useBackHandler({ enabled, callback }: IParams) {
+  useEffect(() => {
+    let backHandler = () => {
+      callback();
+      return true;
+    };
+    if (enabled) {
+      nativeEventSubscription = BackHandler.addEventListener('hardwareBackPress', backHandler);
+    } else {
+      nativeEventSubscription.remove()
+    }
+    return () =>
+      nativeEventSubscription.remove()
+  }, [enabled, callback]);
+}

package/src/hooks/useLayout.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+export const useLayout = () => {
+  const [layout, setLayout] = React.useState({
+    width: 0,
+    height: 0,
+  });
+  return {
+    onLayout: (e: LayoutChangeEvent) => {
+      setLayout(e.nativeEvent.layout);
+    },
+    layout,
+  };
+};

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,85 @@
+import { useWindowDimensions } from 'react-native';
+import isNil from 'lodash.isnil';
+
+type QueryKeys =
+  | 'maxWidth'
+  | 'minWidth'
+  | 'maxHeight'
+  | 'minHeight'
+  | 'orientation';
+
+type SubQuery = {
+  [queryKey in QueryKeys]?: number | string;
+};
+type Query = Array<SubQuery>;
+
+export function useMediaQuery(query: SubQuery | Query) {
+  const dims = useWindowDimensions();
+  const height = dims?.height;
+  const width = dims?.width;
+
+  return iterateQuery(query, height, width);
+}
+
+function queryResolver(query: any, width?: number, height?: number) {
+  for (const queryKey in query) {
+    if (!calculateQuery(queryKey, query[queryKey], height, width)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function iterateQuery(
+  query: SubQuery | Query,
+  height?: number,
+  width?: number
+) {
+  const queryResults = [];
+  if (Array.isArray(query)) {
+    query.forEach((subQuery: SubQuery) => {
+      queryResults.push(queryResolver(subQuery, width, height));
+    });
+  } else {
+    queryResults.push(queryResolver(query, width, height));
+  }
+  return queryResults;
+}
+
+function calculateQuery(
+  key: string,
+  val?: number | string,
+  height?: number,
+  width?: number
+) {
+  let retval;
+  if (isNil(width) || isNil(height) || isNil(val)) {
+    return;
+  }
+  switch (key) {
+    case 'maxWidth':
+      retval = !isNil(val) ? width <= val : undefined;
+      break;
+    case 'minWidth':
+      retval = !isNil(val) ? width >= val : undefined;
+      break;
+    case 'maxHeight':
+      retval = !isNil(val) ? height <= val : undefined;
+      break;
+    case 'minHeight':
+      retval = !isNil(val) ? height >= val : undefined;
+      break;
+    case 'orientation':
+      if (!isNil(val)) {
+        if (width > height) {
+          retval = val === 'landscape';
+        } else {
+          retval = val === 'portrait';
+        }
+      }
+      break;
+    default:
+      break;
+  }
+  return retval;
+}

package/src/hooks/useNativeBase.tsx

@@ -0,0 +1,12 @@
+import { useColorMode } from './../core/color-mode';
+import { useTheme } from './useTheme';
+
+/**
+ *
+ * @returns object containing `colorMode` information and `theme` object
+ */
+export function useNativeBase() {
+  const colorModeResult = useColorMode();
+  const theme = useTheme();
+  return { ...colorModeResult, theme };
+}

package/src/hooks/usePlatformProps.ts

@@ -0,0 +1,19 @@
+import merge from 'lodash.merge';
+import { Platform } from 'react-native';
+
+export const usePlatformProps = (props: any) => {
+  const { _web, _ios, _android, ...remainingProps } = props;
+  const platformProps = () => {
+    switch (Platform.OS) {
+      case 'web':
+        return _web;
+      case 'ios':
+        return _ios;
+      case 'android':
+        return _android;
+      default:
+        return {};
+    }
+  };
+  return merge(remainingProps, platformProps());
+};