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

package/src/components/primitives/Input/InputAdvanced.tsx

@@ -0,0 +1,127 @@
+import React, { memo, forwardRef } from 'react';
+import InputBase from './InputBase';
+import Box from '../Box';
+import type { IInputProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const InputAdvance = (
+  {
+    InputLeftElement,
+    InputRightElement,
+    leftElement,
+    rightElement,
+    onFocus,
+    onBlur,
+    inputProps,
+    wrapperRef,
+    ...props
+  }: IInputProps & {
+    inputProps: any;
+  },
+  ref: any
+) => {
+  const inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required,
+  };
+
+  if (InputLeftElement) {
+    leftElement = InputLeftElement;
+  }
+  if (InputRightElement) {
+    rightElement = InputRightElement;
+  }
+
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = (focusState: boolean, callback: any) => {
+    setIsFocused(focusState);
+    callback();
+  };
+
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+
+  const resolvedProps = usePropsResolution(
+    'Input',
+    {
+      ...inputThemeProps,
+      ...props,
+    },
+    {
+      isDisabled: inputThemeProps.isDisabled,
+      isHovered,
+      isFocused,
+      isInvalid: inputThemeProps.isInvalid,
+      isReadOnly: inputThemeProps.isReadOnly,
+    }
+  );
+
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.border,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    ...stylingProps.background,
+    'shadow',
+    'opacity',
+  ]);
+
+  // Extracting baseInputProps from remaining props
+  const [, baseInputProps] = extractInObject(nonLayoutProps, ['variant']);
+
+  //TODO: refactor for responsive prop
+  if (
+    useHasResponsiveProps({
+      ...props,
+      InputLeftElement,
+      InputRightElement,
+      onFocus,
+      onBlur,
+      inputProps,
+      wrapperRef,
+    })
+  ) {
+    return null;
+  }
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="row"
+      alignItems="center"
+      justifyContent="space-between"
+      {...layoutProps}
+      ref={mergeRefs([_ref, wrapperRef])}
+    >
+      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}
+      <InputBase
+        inputProps={inputProps}
+        bg="transparent"
+        {...baseInputProps}
+        flex={1}
+        disableFocusHandling
+        ref={ref}
+        variant="unstyled"
+        onFocus={(e: any) => {
+          handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+        }}
+        onBlur={(e: any) => {
+          handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+        }}
+        shadow="none"
+      />
+      {InputRightElement || rightElement
+        ? InputRightElement || rightElement
+        : null}
+    </Box>
+  );
+};
+
+export default memo(forwardRef(InputAdvance));

package/src/components/primitives/Input/InputBase.tsx

@@ -0,0 +1,147 @@
+import React, { memo, forwardRef } from 'react';
+import { TextInput, Platform } from 'react-native';
+import type { IInputProps } from './types';
+import { useToken } from '../../../hooks';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import { makeStyledComponent } from '../../../utils/styled';
+import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const StyledInput = makeStyledComponent(TextInput);
+
+const InputBase = (
+  {
+    onKeyPress,
+    onFocus,
+    onBlur,
+    disableFocusHandling,
+    inputProps,
+    wrapperRef,
+    InputLeftElement,
+    InputRightElement,
+    leftElement,
+    rightElement,
+    isHovered: isHoveredProp,
+    isFocused: isFocusedProp,
+    ...props
+  }: IInputProps & {
+    disableFocusHandling?: boolean;
+    inputProps: any;
+  },
+  ref: any
+) => {
+  let passUnresolvedProps;
+  if (InputLeftElement || InputRightElement || leftElement || rightElement) {
+    passUnresolvedProps = true;
+  }
+
+  const [isFocused, setIsFocused] = React.useState(false);
+  const handleFocus = (focusState: boolean, callback: any) => {
+    !disableFocusHandling && setIsFocused(focusState);
+    callback();
+  };
+
+  const inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required,
+  };
+
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+
+  const {
+    isFullWidth,
+    isDisabled,
+    isReadOnly,
+    ariaLabel,
+    accessibilityLabel,
+    placeholderTextColor,
+    selectionColor,
+    underlineColorAndroid,
+    type,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    _webInputBase,
+    ...resolvedProps
+  } = usePropsResolution(
+    'Input',
+    {
+      ...inputThemeProps,
+      ...props,
+    },
+    {
+      isDisabled: inputThemeProps.isDisabled,
+      isHovered: isHoveredProp || isHovered,
+      isFocused: isFocusedProp || isFocused,
+      isInvalid: inputThemeProps.isInvalid,
+      isReadOnly: inputThemeProps.isReadOnly,
+    }
+  );
+
+  const resolvedFontFamily = useResolvedFontFamily({
+    fontFamily,
+    fontWeight: fontWeight ?? 400,
+    fontStyle: fontStyle ?? 'normal',
+  });
+  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);
+  const resolvedSelectionColor = useToken('colors', selectionColor);
+  const resolvedUnderlineColorAndroid = useToken(
+    'colors',
+    underlineColorAndroid
+  );
+  //TODO: refactor for responsive prop
+  if (
+    useHasResponsiveProps({
+      ...props,
+      onKeyPress,
+      onFocus,
+      onBlur,
+      disableFocusHandling,
+      inputProps,
+    })
+  ) {
+    return null;
+  }
+
+  return (
+    <StyledInput
+      {...inputProps}
+      secureTextEntry={type === 'password'}
+      accessible
+      accessibilityLabel={ariaLabel || accessibilityLabel}
+      editable={isDisabled || isReadOnly ? false : true}
+      w={isFullWidth ? '100%' : undefined}
+      {...(passUnresolvedProps ? props : resolvedProps)}
+      {...resolvedFontFamily}
+      placeholderTextColor={resolvedPlaceholderTextColor}
+      selectionColor={resolvedSelectionColor}
+      underlineColorAndroid={resolvedUnderlineColorAndroid}
+      onKeyPress={(e: any) => {
+        e.persist();
+        onKeyPress && onKeyPress(e);
+      }}
+      onFocus={(e: any) => {
+        handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+      }}
+      onBlur={(e: any) => {
+        handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+      }}
+      // TODO: this can be moved to baseStyle using _web
+      {...(Platform.OS === 'web'
+        ? {
+            disabled: isDisabled,
+            cursor: isDisabled ? 'not-allowed' : 'auto',
+          }
+        : {})}
+      ref={mergeRefs([ref, _ref, wrapperRef])}
+      style={Platform.OS === 'web' ? _webInputBase : {}}
+    />
+  );
+};
+
+export default memo(forwardRef(InputBase));

package/src/components/primitives/Input/InputGroup.tsx

@@ -0,0 +1,65 @@
+import React, { memo, forwardRef } from 'react';
+import type { IInputGroupProps } from './types';
+import { getAttachedChildren } from '../../../utils';
+import { HStack } from '../Stack';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const supplyPropsToChildren = (children: any, props: any) => {
+  if (children.length >= 2) {
+    const result = [];
+    const firstChild = children[0];
+    const firstChildProps = {
+      ...firstChild.props.children,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    };
+    result.push(
+      React.cloneElement(firstChild, firstChildProps, firstChild.props.children)
+    );
+    for (let i = 1; i < children.length - 1; i++) {
+      const child = children[i];
+      const newProps = { ...props, borderRadius: '0' };
+      result.push(React.cloneElement(child, newProps, child.props.children));
+    }
+    const lastChild = children[children.length - 1];
+    const lastChildProps = {
+      ...lastChild.props.children,
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    };
+    result.push(
+      React.cloneElement(lastChild, lastChildProps, lastChild.props.children)
+    );
+    return result;
+  }
+
+  return React.Children.map(children, (child: JSX.Element) => {
+    return React.cloneElement(child, props, child.props.children);
+  });
+};
+
+export const InputGroup = memo(
+  forwardRef(({ children, ...props }: IInputGroupProps, ref: any) => {
+    const [layoutProps, nonLayoutProps] = extractInObject(props, [
+      ...stylingProps.margin,
+      ...stylingProps.border,
+      ...stylingProps.layout,
+      ...stylingProps.flexbox,
+      ...stylingProps.position,
+      ...stylingProps.background,
+      'space',
+      'shadow',
+      'opacity',
+    ]);
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    return (
+      <HStack {...layoutProps} ref={ref}>
+        {supplyPropsToChildren(getAttachedChildren(children), nonLayoutProps)}
+      </HStack>
+    );
+  })
+);

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

@@ -0,0 +1,13 @@
+export { InputGroup } from './InputGroup';
+export { InputRightAddon, InputLeftAddon } from './InputAddons';
+export type { IInputGroupProps, IInputProps } from './types';
+
+import InputMain from './Input';
+import type { IInputComponentType } from './types';
+
+const InputTemp: any = InputMain;
+
+// To add typings
+const Input = InputTemp as IInputComponentType;
+
+export { Input };

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

@@ -0,0 +1,132 @@
+import type { TextInputProps } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type { PlatformProps } from '../../types';
+import type { InterfaceBoxProps } from '../Box';
+import type { ISizes } from '../../../theme/base/sizes';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+  VariantType,
+} from '../../types';
+import type { ResponsiveValue, ColorType } from '../../../components/types';
+import type { IStackProps } from '../Stack/Stack';
+import type { MutableRefObject, RefCallback } from 'react';
+
+export interface InterfaceInputProps
+  extends PlatformProps<IInputProps>,
+    Omit<TextInputProps, 'textAlign'>,
+    StyledProps {
+  /**
+   * If true, the input will indicate an error.
+   */
+  isInvalid?: boolean;
+  /**
+   * The variant of the input style to use.
+   * @default 'outline'
+   */
+  variant?: VariantType<'Input'>;
+  /**
+   * 	If true, the input will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * 	If true, the input will be hovered.
+   */
+  isHovered?: boolean;
+  /**
+   * 	If true, the input will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * The size of the input.
+   * @default 'md'
+   */
+  size?: ThemeComponentSizeType<'Input'>; // ResponsiveValue<ISizes | (string & {}) | number>;
+  /**
+   * This will set aria-required="true" on web when passed in formcontrol.
+   */
+  isRequired?: boolean;
+  /**
+   * If true, prevents the value of the input from being edited.
+   */
+  isReadOnly?: boolean;
+  /**
+   * If true, the input element will span the full width of its parent
+   */
+  isFullWidth?: boolean;
+  /**
+   * If given, adds the provided element to the left of the input.
+   */
+  InputLeftElement?: JSX.Element | JSX.Element[];
+  /**
+   * If given, adds the provided element to the left of the input.
+   */
+  leftElement?: JSX.Element | JSX.Element[];
+  /**
+   * If given, adds the provided element to the right of the input.
+   */
+  InputRightElement?: JSX.Element | JSX.Element[];
+  /**
+   * If given, adds the provided element to the right of the input.
+   */
+  rightElement?: JSX.Element | JSX.Element[];
+  /**
+   * Using the type password, user can mask the input.
+   */
+  type?: 'text' | 'password';
+  /**
+   * Ref to be passed to Icon's wrapper Box
+   */
+  wrapperRef?: any;
+  // Interaction Props
+  /**
+   * Passed props will be applied on hovered state.
+   */
+  _hover?: Partial<IInputProps>;
+  /**
+   * Passed props will be applied on focused state.
+   */
+  _focus?: Partial<IInputProps>;
+  /**
+   * Passed props will be applied on disabled state.
+   */
+  _disabled?: Partial<IInputProps>;
+  /**
+   * Passed props will be applied on readOnly state.
+   */
+  _readOnly?: Partial<IInputProps>;
+  /**
+   * Passed props will be applied on invalid state.
+   */
+  _invalid?: Partial<IInputProps>;
+  /**
+   * props are passed to InputBase component
+   */
+  _input?: Partial<IInputProps>;
+  /**
+   * Props to be passed to the Stack used inside.
+   */
+  _stack?: Partial<IStackProps>;
+  /** This prop allows you to change outlineColor when input is in the focused state*/
+  focusOutlineColor?: ColorType;
+  /** This prop allows you to change outlineColor when input is in invalid state*/
+  invalidOutlineColor?: ColorType;
+  ref?: MutableRefObject<any> | RefCallback<any>;
+}
+
+export interface IInputGroupProps extends InterfaceBoxProps<IInputGroupProps> {
+  /**
+   * The variant of the input style to use.
+   * @default 'outline'
+   */
+  variant?: string;
+  /**
+   * The size of the input.
+   * @default 'md'
+   */
+  size?: ResponsiveValue<ISizes | (string & {}) | number>;
+}
+
+export type IInputComponentType = (props: IInputProps) => JSX.Element;
+
+export type IInputProps = InterfaceInputProps & CustomProps<'Input'>;

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

@@ -0,0 +1,82 @@
+import React, { memo, forwardRef } from 'react';
+import { Platform } from 'react-native';
+import type { ILinkProps } from './types';
+import Box from '../Box';
+import Text from '../Text';
+import { usePropsResolution } from '../../../hooks';
+import { useLink } from './useLink';
+import { mergeRefs } from '../../../utils';
+import { Pressable } from '../Pressable';
+import { useHover } from '@react-native-aria/interactions';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Link = ({ isHovered: isHoveredProp, ...props }: ILinkProps, ref: any) => {
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+  const {
+    isUnderlined,
+    children,
+    _text,
+    href,
+    onPress,
+    isExternal,
+    ...resolvedProps
+  } = usePropsResolution('Link', props, {
+    isHovered: isHoveredProp || isHovered,
+  });
+  const { linkProps } = useLink({ href, onPress, isExternal, _ref });
+
+  const linkTextProps = {
+    textDecorationLine: isUnderlined ? 'underline' : 'none',
+    ..._text,
+  };
+  // function getHoverProps() {
+  //   let hoverTextProps = {
+  //     ...linkTextProps,
+  //     ..._hover?._text,
+  //   };
+  //   return {
+  //     ...hoverTextProps,
+  //   };
+  // }
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <>
+      {/* On web we render Link in anchor tag */}
+      {Platform.OS === 'web' ? (
+        <Box
+          {...linkProps}
+          {...resolvedProps}
+          _text={linkTextProps}
+          ref={mergeRefs([ref, _ref])}
+          flexDirection="row"
+        >
+          {children}
+        </Box>
+      ) : (
+        <Pressable
+          {...linkProps}
+          {...resolvedProps}
+          ref={ref}
+          flexDirection="row"
+        >
+          {React.Children.map(children, (child) =>
+            typeof child === 'string' || typeof child === 'number' ? (
+              <Text {...resolvedProps._text} {...linkTextProps}>
+                {child}
+              </Text>
+            ) : (
+              child
+            )
+          )}
+        </Pressable>
+      )}
+    </>
+  );
+};
+
+export default memo(forwardRef(Link));
+export type { ILinkProps };

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

@@ -0,0 +1,48 @@
+import type { MutableRefObject } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import type { CustomProps } from '../../types';
+import type { InterfaceBoxProps } from '../Box/types';
+
+export interface InterfaceLinkProps extends InterfaceBoxProps<ILinkProps> {
+  /**
+   * URL that should be opened on Link press
+   */
+  href?: string | undefined;
+  /**
+   * Size of the link
+   */
+  size?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xsm' | number;
+  /**
+   * Whether Link text should be underlined
+   */
+  isUnderlined?: boolean | undefined;
+  /**
+   * Whether Link text should be hovered
+   */
+  isHovered?: boolean;
+  /**
+   * Callback that will be invoked on Link press
+   */
+  onPress?: ((event?: GestureResponderEvent) => any) | null | undefined;
+  /**
+   * If true, link will be opened in new tab on web. It uses _target property to achieve this
+   */
+  isExternal?: boolean;
+  /**
+   * Hover props. Accepts all styled system props.
+   */
+  _hover?: Omit<Partial<ILinkProps>, '_hover'>;
+  /**
+   * Ref to be attached to the Link wrapper
+   */
+  wrapperRef?: MutableRefObject<any>;
+}
+
+export type IUseLinkProp = {
+  href?: string;
+  isExternal?: boolean;
+  onPress: ((event?: GestureResponderEvent) => any) | null | undefined;
+  _ref: MutableRefObject<any>;
+};
+
+export type ILinkProps = InterfaceLinkProps & CustomProps<'Link'>;

package/src/components/primitives/Link/useLink.ts

@@ -0,0 +1,43 @@
+import { Linking, Platform } from 'react-native';
+import type { IUseLinkProp } from './types';
+import type { AccessibilityRole } from 'react-native';
+
+const linkToHREF = (URL: string) => {
+  Linking.openURL(URL).catch((err) => console.error('An error occurred', err));
+};
+
+const addOnPressFunctionality = (href: string | any, callback: any) => {
+  href ? linkToHREF(href) : '';
+  callback ? callback() : () => {};
+};
+
+export function useLink(props: IUseLinkProp) {
+  const { href, isExternal, onPress, _ref } = props;
+
+  let platformLinkProps = {};
+
+  if (Platform.OS === 'web') {
+    platformLinkProps = {
+      href,
+      onClick: onPress,
+    };
+    // Adding target to a tag created by RN-Web
+    if (isExternal && _ref.current) {
+      _ref.current.target = '_blank';
+    }
+  } else {
+    platformLinkProps = {
+      onPress: () => {
+        addOnPressFunctionality(href, onPress);
+      },
+    };
+  }
+
+  return {
+    linkProps: {
+      ...platformLinkProps,
+      accessibilityRole: 'link' as AccessibilityRole,
+      accessible: true,
+    },
+  };
+}

package/src/components/primitives/List/List.tsx

@@ -0,0 +1,38 @@
+import React, { memo, forwardRef } from 'react';
+import { VStack } from '../Stack';
+import type { IListProps, IListItemProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const List = ({ children, divider, ...props }: IListProps, ref?: any) => {
+  const {
+    _text,
+    _hover,
+    _focus,
+    _pressed,
+    ...resolvedProps
+  } = usePropsResolution('List', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  // add props to children
+  children = React.Children.map(children, (child: any, ind: number) => {
+    return React.cloneElement(child, {
+      index: ind,
+      _text: { ..._text, ...child.props?._text },
+      _hover: { ..._hover, ...child.props?._hover },
+      _focus: { ..._focus, ...child.props?._focus },
+      _pressed: { ..._pressed, ...child.props?._pressed },
+    });
+  });
+
+  return (
+    <VStack divider={divider} ref={ref} {...resolvedProps}>
+      {children}
+    </VStack>
+  );
+};
+
+export type { IListProps, IListItemProps };
+export default memo(forwardRef(List));