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

package/src/components/primitives/Text/__test__/Text.test.tsx

@@ -0,0 +1,233 @@
+/** * @jest-environment jsdom */
+//@ts-nocheck
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import Text from '../../Text';
+import { NativeBaseProvider } from '../../../../core/NativeBaseProvider';
+import { theme as defaultTheme } from '../../../../theme';
+import { Platform } from 'react-native';
+
+jest.useFakeTimers();
+
+const theme = {
+  ...defaultTheme,
+  fontConfig: {
+    Roboto: {
+      100: 'Roboto-Light',
+      200: 'Roboto-Light',
+      300: 'Roboto-Light',
+      400: {
+        normal: 'Roboto-Regular',
+        italic: 'Roboto-Italic',
+      },
+      500: 'Roboto-Medium',
+      600: 'Roboto-Medium',
+      700: {
+        normal: 'Roboto-Bold',
+        italic: 'Roboto-BoldItalic',
+      },
+      800: 'Roboto-Bold',
+      900: 'Roboto-Black',
+    },
+  },
+  fonts: {
+    ...defaultTheme.fonts,
+    heading: 'Roboto',
+    body: 'Roboto',
+  },
+};
+
+const Provider = (props: any) => {
+  return (
+    <NativeBaseProvider
+      theme={theme}
+      {...props}
+      initialWindowMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    />
+  );
+};
+
+describe('Text component', () => {
+  it('resolves default custom fonts', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text">hello world</Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Roboto-Regular');
+  });
+
+  it('resolves custom font variants', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontStyle="italic">
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Roboto-Italic');
+  });
+
+  it('resolves to bold italic font', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontWeight="bold" fontStyle="italic">
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Roboto-BoldItalic');
+  });
+
+  it('resolves to medium font when fontWeight is 500', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontWeight={500}>
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Roboto-Medium');
+  });
+
+  it('resolves to medium font when fontWeight is medium', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontWeight={'medium'}>
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Roboto-Medium');
+  });
+
+  it('respects fontFamily property', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontFamily="Merriweather-Italic">
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe('Merriweather-Italic');
+  });
+
+  it("doesn't break if custom font is not specified", () => {
+    const newTheme = JSON.parse(JSON.stringify(defaultTheme));
+    delete newTheme.fontConfig;
+    const { getByTestId } = render(
+      <Provider theme={newTheme}>
+        <Text testID="my-text" fontWeight={400}>
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontFamily).toBe(undefined);
+  });
+
+  it("doesn't pass fontWeight and fontStyle if a custom fontFamily is resolved", () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text testID="my-text" fontWeight={400}>
+          hello world
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('my-text');
+    expect(text.props.style.fontWeight).toBe(undefined);
+    expect(text.props.style.fontStyle).toBe(undefined);
+    expect(text.props.style.fontFamily).toBe('Roboto-Regular');
+  });
+
+  it('tests lineHeight from token in text ', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text lineHeight="md" testID="test">
+          This is a text
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('test');
+    expect(text.props.style.lineHeight).toBe(
+      defaultTheme.fontSizes.sm * parseFloat(defaultTheme.lineHeights.md)
+    );
+  });
+
+  it('tests absolute lineHeight in text ', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text lineHeight={5} testID="test">
+          This is a text
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('test');
+    expect(text.props.style.lineHeight).toBe(5);
+  });
+
+  it('tests em non token lineHeight in text ', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text lineHeight="13em" testID="test">
+          This is a text
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('test');
+    expect(text.props.style.lineHeight).toBe(defaultTheme.fontSizes.sm * 13);
+  });
+
+  it('tests letterSpacing from token in text ', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text letterSpacing="2xl" testID="test">
+          This is a text
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('test');
+    expect(text.props.style.letterSpacing).toBe(
+      defaultTheme.fontSizes.sm * parseFloat(defaultTheme.letterSpacings['2xl'])
+    );
+  });
+
+  it('tests letterSpacing in em from token in text ', () => {
+    Platform.OS = 'web';
+    try {
+      render(
+        <Provider>
+          <Text letterSpacing="2xl" testID="test">
+            This is a text
+          </Text>
+        </Provider>
+      );
+    } catch (e) {
+      expect(e.message).toContain(`"letterSpacing": "0.1em"`);
+    } finally {
+      Platform.OS = 'ios';
+    }
+  });
+
+  it('tests lineHeight and letterSpacing in px', () => {
+    const { getByTestId } = render(
+      <Provider>
+        <Text lineHeight="24px" letterSpacing="12px" testID="test">
+          This is a text
+        </Text>
+      </Provider>
+    );
+    const text = getByTestId('test');
+    expect(text.props.style.lineHeight).toBe(24);
+    expect(text.props.style.letterSpacing).toBe(12);
+  });
+});

package/src/components/primitives/Text/index.tsx

@@ -0,0 +1,114 @@
+import React, { memo, forwardRef, useRef } from 'react';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { ITextProps } from './types';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils/mergeRefs';
+import { makeStyledComponent } from '../../../utils/styled';
+import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';
+import { Platform, Text as NativeText } from 'react-native';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const StyledText = makeStyledComponent(NativeText);
+// To have a RN compatible behaviour, we'll inherit parent text styles as base style
+const TextAncestorContext = React.createContext(false);
+
+const Text = ({ children, ...props }: ITextProps, ref: any) => {
+  const hasTextAncestor = React.useContext(TextAncestorContext);
+
+  const {
+    isTruncated,
+    noOfLines,
+    bold,
+    italic,
+    sub,
+    highlight,
+    underline,
+    strikeThrough,
+    fontFamily: propFontFamily,
+    fontWeight: propFontWeight,
+    fontStyle: propFontStyle,
+    _hover,
+    fontSize,
+    numberOfLines,
+    ...resolvedProps
+  } = usePropsResolution(
+    'Text',
+    props,
+    {},
+    {
+      resolveResponsively: ['noOfLines', 'numberOfLines'],
+      // We override the component base theme if text has an ancestor.
+      componentTheme: hasTextAncestor ? {} : undefined,
+    }
+  );
+
+  const _ref = useRef(null);
+  // TODO: might have to add this condition
+  const { isHovered } = useHover({}, _hover ? _ref : null);
+  // const { isHovered } = useHover({}, _ref);
+  let fontFamily = propFontFamily;
+  const fontStyle = italic ? 'italic' : propFontStyle;
+  const fontWeight = bold ? 'bold' : propFontWeight;
+  let resolvedFontFamily;
+
+  resolvedFontFamily = useResolvedFontFamily({
+    fontFamily,
+    fontWeight: fontWeight ?? (hasTextAncestor ? undefined : 400),
+    fontStyle: fontStyle ?? (hasTextAncestor ? undefined : 'normal'),
+  });
+
+  if (resolvedFontFamily) {
+    fontFamily = resolvedFontFamily;
+  }
+  // Need to apply fontWeight & fontStyle on web
+  if (Platform.OS === 'web') {
+    if (resolvedFontFamily) {
+      fontFamily = resolvedFontFamily.fontFamily;
+    }
+
+    resolvedFontFamily = {
+      fontFamily,
+      fontWeight: fontWeight ?? (hasTextAncestor ? undefined : 400),
+      fontStyle: fontStyle ?? (hasTextAncestor ? undefined : 'normal'),
+    };
+  }
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  const propsToSpread = {
+    ...resolvedProps,
+    numberOfLines:
+      numberOfLines || noOfLines
+        ? numberOfLines || noOfLines
+        : isTruncated
+        ? 1
+        : undefined,
+    ...resolvedFontFamily,
+    bg: highlight ? 'warning.300' : resolvedProps.bg,
+    textDecorationLine:
+      underline && strikeThrough
+        ? 'underline line-through'
+        : underline
+        ? 'underline'
+        : strikeThrough
+        ? 'line-through'
+        : resolvedProps.textDecorationLine,
+    fontSize: sub ? 10 : fontSize,
+    ref: mergeRefs([ref, _ref]),
+    ...(isHovered && _hover),
+  };
+
+  return hasTextAncestor ? (
+    <StyledText {...propsToSpread}>{children}</StyledText>
+  ) : (
+    <TextAncestorContext.Provider value={true}>
+      <StyledText {...propsToSpread}>{children}</StyledText>
+    </TextAncestorContext.Provider>
+  );
+};
+
+export default memo(forwardRef(Text));
+export type { ITextProps };

package/src/components/primitives/Text/types.tsx

@@ -0,0 +1,82 @@
+import type { TextProps } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type {
+  IFont,
+  IFontSize,
+  IFontWeight,
+  ILetterSpacing,
+  ILineHeight,
+} from '../../../theme/base/typography';
+import type { CustomProps, PlatformProps, ResponsiveValue } from '../../types';
+
+export interface InterfaceTextProps<T = ITextProps>
+  extends PlatformProps<T>,
+    StyledProps,
+    TextProps {
+  /**
+   *  Renders components as Text children. Accepts a JSX.Element or an array of JSX.Element.
+   */
+  children?: React.ReactNode | string;
+  /**
+   * The size of font
+   */
+
+  fontSize?: ResponsiveValue<IFontSize | number | (string & {})>;
+
+  /**
+   * Letter spacing
+   */
+
+  letterSpacing?: ResponsiveValue<ILetterSpacing | number | (string & {})>;
+
+  /**
+   * Line height
+   */
+
+  lineHeight?: ResponsiveValue<ILineHeight | number | (string & {})>;
+  /**
+   * Font weight
+   */
+
+  fontWeight?: ResponsiveValue<IFontWeight | number | (string & {})>;
+  /**
+   * Fonts
+   */
+
+  font?: ResponsiveValue<IFont>;
+
+  /**
+   * Used to truncate text at a specific number of lines
+   */
+  noOfLines?: number;
+  /**
+   * Used to make the text bold.
+   */
+  bold?: boolean;
+  /**
+   * If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.
+   */
+  isTruncated?: boolean;
+  /**
+   * Used to make the text italic.
+   */
+  italic?: boolean;
+  /**
+   * Used to underline the text.
+   */
+  underline?: boolean;
+  /**
+   * A horizontal line through the center of the text.
+   */
+  strikeThrough?: boolean;
+  /**
+   * Text will have smaller font size.
+   */
+  sub?: boolean;
+  /**
+   * Used to highlight the text with a yellow background.
+   */
+  highlight?: boolean;
+}
+
+export type ITextProps = InterfaceTextProps & CustomProps<'Text'>;

package/src/components/primitives/TextArea/index.tsx

@@ -0,0 +1,76 @@
+import React, { memo, forwardRef } from 'react';
+import { Input } from '../Input';
+import type { InterfaceInputProps } from '../Input/types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import type { PlatformProps } from '../../../components/types';
+export interface ITextAreaProps
+  extends Omit<
+      InterfaceInputProps,
+      '_web' | '_android' | '_ios' | '_light' | '_dark' | '_important'
+    >,
+    PlatformProps<ITextAreaProps> {
+  /**
+   * Maps to react-native TextInput's numberOfLines.
+   */
+  totalLines?: number;
+}
+
+const TextArea = (
+  {
+    wrapperRef,
+    isDisabled,
+    isInvalid,
+    isReadOnly,
+    isFocused: isFocusedProp,
+    isHovered: isHoveredProp,
+    ...props
+  }: ITextAreaProps,
+  ref: any
+) => {
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+  const [isFocused, setIsFocused] = React.useState(isFocusedProp);
+  const handleFocus = (focusState: boolean, callback: any) => {
+    setIsFocused(focusState);
+    callback();
+  };
+  const { totalLines, onFocus, onBlur, ...newProps } = usePropsResolution(
+    'TextArea',
+    props,
+    {
+      isHovered: isHoveredProp || isHovered,
+      isDisabled,
+      isFocused,
+      isInvalid,
+      isReadOnly,
+    },
+    { extendTheme: ['Input'] }
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Input
+      {...newProps}
+      INTERNAL_notResolveThemeAndPseudoProps
+      numberOfLines={totalLines}
+      wrapperRef={wrapperRef}
+      ref={mergeRefs([_ref, ref])}
+      onFocus={(e) => {
+        handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+      }}
+      onBlur={(e) => {
+        handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+      }}
+      isDisabled={isDisabled}
+      isInvalid={isInvalid}
+      isReadOnly={isReadOnly}
+    />
+  );
+};
+
+export default memo(forwardRef(TextArea));

package/src/components/primitives/TouchableItem/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { makeStyledComponent } from '../../../utils/styled';
+import { TouchableHighlight } from 'react-native';
+
+const TouchableItem = makeStyledComponent(TouchableHighlight);
+export default React.memo(TouchableItem);

package/src/components/primitives/View/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { makeStyledComponent } from '../../../utils/styled';
+import { View as RNView } from 'react-native';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useThemeProps } from '../../../hooks/useThemeProps';
+import { useSafeArea } from '../../../hooks/useSafeArea';
+import type { IViewProps } from './types';
+const StyledView: any = makeStyledComponent(RNView);
+
+const View = (props: IViewProps, ref: any) => {
+  const viewProps = useThemeProps('View', props);
+  const safeAreaProps = useSafeArea(viewProps);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <StyledView {...safeAreaProps} ref={ref} />;
+};
+export default React.memo(React.forwardRef(View));
+export type { IViewProps };

package/src/components/primitives/View/types.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from 'react-native';
+import type { CustomProps, SafeAreaProps } from '../../../components/types';
+import type { StyledProps } from '../../../theme/types';
+
+export type IViewProps = (ViewProps &
+  StyledProps &
+  SafeAreaProps & {
+    children?: any;
+  }) &
+  CustomProps<'View'>;

package/src/components/primitives/VisuallyHidden/index.tsx

@@ -0,0 +1,12 @@
+import type React from 'react';
+import { useScreenReaderEnabled } from '../../../hooks';
+
+export function VisuallyHidden({
+  children,
+}: {
+  children: React.ReactElement;
+}): React.ReactElement | null {
+  const screenReaderEnabled = useScreenReaderEnabled();
+
+  return screenReaderEnabled ? children : null;
+}

package/src/components/primitives/ZStack/index.tsx

@@ -0,0 +1,29 @@
+import React, { memo, forwardRef } from 'react';
+import { default as Box, InterfaceBoxProps } from '../Box';
+import { getAbsoluteChildren } from '../../../utils';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { CustomProps } from '../../../components/types';
+
+export interface InterfaceZStackProps extends InterfaceBoxProps<IZStackProps> {
+  /**
+   * The direction to stack the elements.
+   */
+  reversed?: boolean;
+}
+
+export type IZStackProps = InterfaceZStackProps & CustomProps<'ZStack'>;
+const ZStack = ({ children, reversed, ...props }: IZStackProps, ref?: any) => {
+  const resolvedProps = usePropsResolution('ZStack', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Box {...resolvedProps} ref={ref}>
+      {getAbsoluteChildren(children, reversed)}
+    </Box>
+  );
+};
+
+export default memo(forwardRef(ZStack));

package/src/components/primitives/index.ts

@@ -0,0 +1,79 @@
+export { default as Box } from './Box';
+export type { IBoxProps } from './Box';
+
+export { default as Text } from './Text';
+export type { ITextProps } from './Text';
+
+export { Input, InputGroup, InputLeftAddon, InputRightAddon } from './Input';
+export type { IInputProps } from './Input';
+
+// export { default as View } from './View';
+
+export { Checkbox } from './Checkbox';
+export type { ICheckboxProps, ICheckboxGroupProps } from './Checkbox';
+
+export { Radio, RadioContext } from './Radio';
+export type {
+  IRadioProps,
+  IRadioGroupProps,
+  IRadioValue,
+  IRadioContext,
+  IRadioComponentType,
+} from './Radio';
+
+export { Icon, createIcon } from './Icon';
+export type { IIconProps } from './Icon';
+
+export { Column } from './Column';
+export { Row } from './Row';
+
+export { Button } from './Button';
+export type { IButtonProps } from './Button';
+
+export { Slider } from './Slider';
+export type { ISliderProps } from './Slider';
+
+export { Stack, VStack, HStack } from './Stack';
+export type { IStackProps } from './Stack';
+
+export { default as Image } from './Image';
+export type { IImageProps } from './Image';
+
+export { default as Select } from './Select';
+export type { ISelectProps, ISelectItemProps } from './Select';
+
+export { default as Spinner } from './Spinner';
+export type { ISpinnerProps } from './Spinner';
+
+export { default as Heading } from './Heading';
+export type { IHeadingProps } from './Heading';
+
+export { useFocus, useHover, useIsPressed, Pressable } from './Pressable';
+export type { IPressableProps } from './Pressable';
+
+export { default as Flex, Spacer } from './Flex';
+export type { IFlexProps } from './Flex';
+
+export { default as Switch } from './Switch';
+export type { ISwitchProps } from './Switch';
+
+export { default as TextArea } from './TextArea';
+export type { ITextAreaProps } from './TextArea';
+
+export { default as Link } from './Link';
+export type { ILinkProps } from './Link';
+
+export { List } from './List';
+export type { IListProps, IListItemProps } from './List';
+
+export { Hidden } from './Hidden';
+export type { IHiddenProps } from './Hidden';
+
+export { VisuallyHidden } from './VisuallyHidden';
+
+export { default as ZStack } from './ZStack';
+export type { IZStackProps } from './ZStack';
+
+export { Overlay } from './Overlay';
+
+export type { IOverlayProps } from './Overlay';

package/src/components/types/ExtraProps.ts

@@ -0,0 +1,9 @@
+export interface SafeAreaProps {
+  safeArea?: boolean | number;
+  safeAreaX?: boolean | number;
+  safeAreaY?: boolean | number;
+  safeAreaTop?: boolean | number;
+  safeAreaBottom?: boolean | number;
+  safeAreaLeft?: boolean | number;
+  safeAreaRight?: boolean | number;
+}