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

package/src/components/composites/FormControl/useFormControl.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { useId } from '@react-native-aria/utils';
+import omit from 'lodash.omit';
+import type { IFormControlProps } from './types';
+import { ariaAttr } from '../../../utils';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+import uniqueId from 'lodash.uniqueid';
+
+export type IFormControlContext = Omit<
+  ReturnType<typeof useFormControlProvider>,
+  'htmlProps'
+>;
+
+export const FormControlContext = React.createContext({});
+
+export function useFormControlProvider(props: IFormControlProps) {
+  const {
+    nativeID: idProp,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    isReadOnly,
+    ...htmlProps
+  } = props;
+
+  let id = uniqueId();
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    id = useId();
+  }
+
+  // const id = '';
+  // Generate all the required ids
+  const nativeID = idProp || `field-${id}`;
+
+  const labelId = `${nativeID}-label`;
+  const feedbackId = `${nativeID}-feedback`;
+  const helpTextId = `${nativeID}-helptext`;
+
+  /**
+   * Track whether the `FormErrorMessage` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasFeedbackText, setHasFeedbackText] = React.useState(false);
+
+  /**
+   * Track whether the `FormHelperText` has been rendered.
+   * We use this to append its id the the `aria-describedby` of the `input`.
+   */
+  const [hasHelpText, setHasHelpText] = React.useState(false);
+
+  const context = {
+    isRequired: !!isRequired,
+    isInvalid: !!isInvalid,
+    isReadOnly: !!isReadOnly,
+    isDisabled: !!isDisabled,
+    hasFeedbackText,
+    setHasFeedbackText,
+    hasHelpText,
+    setHasHelpText,
+    nativeID,
+    labelId,
+    feedbackId,
+    helpTextId,
+    htmlProps,
+  };
+
+  return context;
+}
+
+/**
+ * React hook that provides the props that should be spread on to
+ * input fields (`input`, `select`, `textarea`, etc.).
+ *
+ * It provides a convenient way to control a form fields, validation
+ * and helper text.
+ */
+export function useFormControl(props: IFormControlProps) {
+  const field = useFormControlContext();
+  const describedBy: any[] = [];
+
+  // Error message must be described first in all scenarios.
+  if (field?.hasFeedbackText) describedBy.push(field?.feedbackId);
+  if (field?.hasHelpText) describedBy.push(field?.helpTextId);
+  const ariaDescribedBy = describedBy.join(' ');
+
+  const cleanProps = omit(props, [
+    'isInvalid',
+    'isDisabled',
+    'isReadOnly',
+    'isRequired',
+  ]);
+
+  let nativeID = props?.nativeID;
+
+  if (!nativeID && field?.nativeID) {
+    nativeID = `${field?.nativeID}-input`;
+  }
+
+  return {
+    ...cleanProps,
+    nativeID: nativeID,
+    disabled: props.isDisabled || field?.isDisabled,
+    readOnly: props.isReadOnly || field?.isReadOnly,
+    required: props.isRequired || field?.isRequired,
+    accessibilityInvalid: ariaAttr(props.isInvalid || field?.isInvalid),
+    accessibilityRequired: ariaAttr(props.isRequired || field?.isRequired),
+    accessibilityReadOnly: ariaAttr(props.isReadOnly || field?.isReadOnly),
+    accessibilityDescribedBy: ariaDescribedBy || undefined,
+  };
+}
+
+export const useFormControlContext = () => {
+  return (React.useContext(
+    FormControlContext
+  ) as unknown) as IFormControlContext;
+};

package/src/components/composites/IconButton/index.tsx

@@ -0,0 +1,97 @@
+import React, { memo, forwardRef } from 'react';
+import { Pressable } from '../../primitives/Pressable';
+import { Icon } from '../../primitives/Icon';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { composeEventHandlers } from '../../../utils';
+import type { IIconButtonProps } from './types';
+import {
+  useHover,
+  useFocus,
+  useIsPressed,
+} from '../../primitives/Pressable/Pressable';
+import { useFocusRing } from '@react-native-aria/focus';
+import merge from 'lodash.merge';
+
+const IconButton = (
+  {
+    icon,
+    _icon: pseudoIconProp,
+    children,
+    isHovered: isHoveredProp,
+    isPressed: isPressedProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled,
+    ...props
+  }: IIconButtonProps,
+  ref: any
+) => {
+  const { hoverProps, isHovered } = useHover();
+  const { pressableProps, isPressed } = useIsPressed();
+  const { focusProps, isFocused } = useFocus();
+  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
+
+  const {
+    _icon,
+    onPressIn,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
+    ...resolvedProps
+  } = usePropsResolution(
+    'IconButton',
+    { ...props, _icon: merge({}, pseudoIconProp, icon?.props) },
+    {
+      isHovered: isHoveredProp || isHovered,
+      isPressed: isPressedProp || isPressed,
+      isFocused: isFocusedProp || isFocused,
+      isFocusVisible: isFocusVisibleProp || isFocusVisible,
+      isDisabled,
+    }
+  );
+
+  let clonedIcon;
+  if (icon) {
+    clonedIcon = React.cloneElement(icon, {
+      ..._icon,
+    });
+  }
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      accessibilityRole="button"
+      ref={ref}
+      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}
+      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}
+      // @ts-ignore - web only
+      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+      // @ts-ignore - web only
+      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+      // @ts-ignore - web only
+      onFocus={composeEventHandlers(
+        composeEventHandlers(onFocus, focusProps.onFocus),
+        focusRingProps.onFocus
+      )}
+      // @ts-ignore - web only
+      onBlur={composeEventHandlers(
+        composeEventHandlers(onBlur, focusProps.onBlur),
+        focusRingProps.onBlur
+      )}
+      {...resolvedProps}
+    >
+      {clonedIcon || <Icon {..._icon}>{children}</Icon>}
+    </Pressable>
+  );
+};
+
+export default memo(forwardRef(IconButton));
+export type { IIconButtonProps };

package/src/components/composites/IconButton/types.ts

@@ -0,0 +1,78 @@
+import type { InterfacePressableProps } from '../../primitives/Pressable/types';
+import type { IIconProps } from '../../primitives/Icon';
+import type { ColorSchemeType, PlatformProps } from '../../../components/types';
+
+import type { CustomProps, VariantType } from '../../types';
+import type { ThemeComponentSizeType } from '../../../components/types/utils';
+export interface InterfaceIconButtonProps
+  extends Omit<
+      InterfacePressableProps<InterfaceIconButtonProps>,
+      | 'children'
+      | 'color'
+      | '_light'
+      | '_dark'
+      | '_web'
+      | '_android'
+      | '_ios'
+      | '_important'
+    >,
+    Omit<
+      IIconProps,
+      | 'delayLongPress'
+      | 'disabled'
+      | 'hitSlop'
+      | 'onLongPress'
+      | 'onPress'
+      | 'onPressIn'
+      | 'onPressOut'
+      | 'style'
+      | 'size'
+      | '_light'
+      | '_dark'
+      | '_web'
+      | '_android'
+      | '_ios'
+      | '_important'
+    >,
+    PlatformProps<IIconButtonProps> {
+  /**
+   * The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").
+   * @default 'primary'
+   */
+  colorScheme?: ColorSchemeType;
+  /**
+   * The variant of the button style to use.
+   * @default 'ghost'
+   */
+  variant?: VariantType<'IconButton'>;
+  /**
+   * The size of the button.
+   */
+  size?: ThemeComponentSizeType<'IconButton'>;
+  /**
+   * If true, the button will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * The icon to be used. Refer to the Icon section of the docs for the available icon options.
+   */
+  icon?: JSX.Element;
+  /**
+   * Props to be passed to the icon used inside of IconButton.
+   */
+  _icon?: Partial<IIconProps>;
+  /**
+   *
+   */
+  _hover?: Omit<Partial<IIconButtonProps>, '_hover'>;
+  /**
+   *
+   */
+  _pressed?: Omit<Partial<IIconButtonProps>, '_pressed'>;
+  /**
+   *
+   */
+  _focus?: Omit<Partial<IIconButtonProps>, '_focus'>;
+}
+
+export type IIconButtonProps = InterfaceIconButtonProps & CustomProps<'Icon'>;

package/src/components/composites/KBD/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '../../primitives';
+import { useThemeProps } from '../../../hooks';
+import type { IKbdProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Kbd = ({ children, ...props }: IKbdProps, ref?: any) => {
+  const newProps = useThemeProps('Kbd', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <Box {...newProps} ref={ref}>
+      {children}
+    </Box>
+  );
+};
+
+export default React.memo(React.forwardRef(Kbd));
+export type { IKbdProps };

package/src/components/composites/KBD/types.ts

@@ -0,0 +1,3 @@
+import type { CustomProps } from '../../../components/types/utils';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+export type IKbdProps = InterfaceBoxProps<IKbdProps> & CustomProps<'Kbd'>;

package/src/components/composites/Menu/Menu.tsx

@@ -0,0 +1,132 @@
+import React, { memo, forwardRef } from 'react';
+import type { IMenuProps } from './types';
+import Box from '../../primitives/Box';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { Popper } from '../Popper';
+import { AccessibilityInfo, ScrollView } from 'react-native';
+import { useControllableState } from '../../../hooks';
+import { useMenuTrigger, useMenu, useMenuTypeahead } from './useMenu';
+import Backdrop from '../Backdrop';
+import { PresenceTransition } from '../Transitions';
+import { FocusScope } from '@react-native-aria/focus';
+import { MenuContext } from './MenuContext';
+import { Overlay } from '../../primitives/Overlay';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Menu = (
+  {
+    trigger,
+    closeOnSelect = true,
+    children,
+    onOpen,
+    onClose,
+    isOpen: isOpenProp,
+    defaultIsOpen,
+    placement = 'bottom left',
+    ...props
+  }: IMenuProps,
+  ref?: any
+) => {
+  const triggerRef = React.useRef(null);
+  const [isOpen, setIsOpen] = useControllableState({
+    value: isOpenProp,
+    defaultValue: defaultIsOpen,
+    onChange: (value) => {
+      value ? onOpen && onOpen() : onClose && onClose();
+    },
+  });
+
+  const {
+    _overlay,
+    _presenceTransition,
+    _backdrop,
+    useRNModal,
+    ...resolvedProps
+  } = usePropsResolution('Menu', props);
+  const handleOpen = React.useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  const handleClose = React.useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  const triggerProps = useMenuTrigger({
+    handleOpen,
+    isOpen,
+  });
+
+  const updatedTrigger = () => {
+    return trigger(
+      {
+        ...triggerProps,
+        ref: triggerRef,
+        onPress: handleOpen,
+      },
+      { open: isOpen }
+    );
+  };
+
+  React.useEffect(() => {
+    if (isOpen) {
+      AccessibilityInfo.announceForAccessibility('Popup window');
+    }
+  }, [isOpen]);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(resolvedProps)) {
+    return null;
+  }
+
+  return (
+    <>
+      {updatedTrigger()}
+      <Overlay
+        isOpen={isOpen}
+        onRequestClose={handleClose}
+        useRNModalOnAndroid
+        useRNModal={useRNModal}
+        {..._overlay}
+      >
+        <PresenceTransition visible={isOpen} {..._presenceTransition}>
+          <Popper
+            triggerRef={triggerRef}
+            onClose={handleClose}
+            placement={placement}
+            {...resolvedProps}
+          >
+            <Backdrop onPress={handleClose} {..._backdrop} />
+            <Popper.Content isOpen={isOpen}>
+              <MenuContext.Provider
+                value={{ closeOnSelect, onClose: handleClose }}
+              >
+                <FocusScope contain restoreFocus autoFocus>
+                  <MenuContent menuRef={ref} {...resolvedProps}>
+                    {children}
+                  </MenuContent>
+                </FocusScope>
+              </MenuContext.Provider>
+            </Popper.Content>
+          </Popper>
+        </PresenceTransition>
+      </Overlay>
+    </>
+  );
+};
+
+const MenuContent = ({
+  menuRef,
+  children,
+  ...props
+}: Omit<IMenuProps, 'trigger'> & { menuRef: any }) => {
+  const menuProps = useMenu();
+  const typeaheadProps = useMenuTypeahead(menuProps);
+
+  return (
+    <Box {...props} {...menuProps} {...typeaheadProps} ref={menuRef}>
+      <ScrollView>{children}</ScrollView>
+    </Box>
+  );
+};
+
+export default memo(forwardRef(Menu));

package/src/components/composites/Menu/MenuContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export const MenuContext = React.createContext({
+  closeOnSelect: true,
+  onClose: () => {},
+});

package/src/components/composites/Menu/MenuGroup.tsx

@@ -0,0 +1,30 @@
+import React, { memo, forwardRef } from 'react';
+import Text from '../../primitives/Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import Box from '../../primitives/Box';
+import type { IMenuGroupProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const MenuGroup = (
+  { title, children, ...props }: IMenuGroupProps,
+  ref: any
+) => {
+  const { _title, ...resolvedProps } = usePropsResolution('MenuGroup', props);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps({ ...props, title })) {
+    return null;
+  }
+
+  //TODO: Can be simplified
+  return (
+    <>
+      <Box {...resolvedProps} ref={ref}>
+        <Text {..._title}>{title}</Text>
+      </Box>
+      {children}
+    </>
+  );
+};
+
+export default memo(forwardRef(MenuGroup));

package/src/components/composites/Menu/MenuItem.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef, memo } from 'react';
+import Text from '../../primitives/Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { Pressable } from '../../primitives/Pressable';
+import type { IMenuItemProps } from './types';
+import { MenuContext } from './MenuContext';
+import { useMenuItem } from './useMenu';
+import { mergeRefs } from '../../../utils';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { HStack } from '../../primitives';
+
+const MenuItem = (
+  { children, isDisabled, onPress, textValue, ...props }: IMenuItemProps,
+  ref: any
+) => {
+  const { closeOnSelect, onClose } = React.useContext(MenuContext);
+  const menuItemRef = React.useRef<any>(null);
+  const mergedRef = mergeRefs([menuItemRef, ref]);
+  const { _text, _stack, ...resolvedProps } = usePropsResolution(
+    'MenuItem',
+    props,
+    {
+      isDisabled,
+    },
+    {
+      cascadePseudoProps: true,
+    }
+  );
+  const [textContent, setTextContent] = React.useState('');
+  React.useEffect(() => {
+    const menuItem = menuItemRef.current;
+    if (menuItem) {
+      setTextContent((menuItem.textContent ?? '').trim());
+    }
+  }, [children]);
+
+  const menuItemProps = useMenuItem({
+    textValue: textValue ?? textContent,
+    ref: menuItemRef,
+  });
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      {...menuItemProps}
+      {...resolvedProps}
+      ref={mergedRef}
+      disabled={isDisabled}
+      accessibilityState={{
+        disabled: isDisabled,
+      }}
+      onPress={(e: any) => {
+        if (!isDisabled) {
+          onPress && onPress(e);
+          if (closeOnSelect) {
+            onClose && onClose();
+          }
+        }
+      }}
+    >
+      <HStack {..._stack}>
+        {React.Children.map(children, (child, index: any) => {
+          if (typeof child === 'string' || typeof child === 'number') {
+            return (
+              <Text key={`menu-item-${index}`} {..._text}>
+                {child}
+              </Text>
+            );
+          } else {
+            return child;
+          }
+        })}
+      </HStack>
+    </Pressable>
+  );
+};
+
+export default memo(forwardRef(MenuItem));

package/src/components/composites/Menu/MenuItemOption.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, memo, useContext } from 'react';
+import { CheckIcon } from '../../primitives/Icon/Icons';
+import Text from '../../primitives/Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import MenuItem from './MenuItem';
+import type { IMenuItemOptionProps, IMenuOptionContextProps } from './types';
+import { MenuOptionContext } from './MenuOptionGroup';
+import { useMenuOptionItem } from './useMenu';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const MenuItemOption = (
+  { value, ...props }: IMenuItemOptionProps,
+  ref: any
+) => {
+  const { values, onChange, type }: IMenuOptionContextProps = useContext(
+    MenuOptionContext
+  );
+  const isChecked = values.includes(value);
+  const menuOptionProps = useMenuOptionItem({ isChecked, type });
+  const {
+    children,
+    onPress,
+    _icon,
+    _text,
+    ...resolvedProps
+  } = usePropsResolution('MenuItem', props, { isChecked });
+
+  const modifiedOnPress = (e: any) => {
+    onChange(value);
+    onPress && onPress(e);
+  };
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <MenuItem
+      {...resolvedProps}
+      {...menuOptionProps}
+      accessibilityRole="button"
+      onPress={modifiedOnPress}
+      ref={ref}
+    >
+      <CheckIcon {..._icon} />
+      {React.Children.map(children, (child, index: any) => {
+        if (typeof child === 'string' || typeof child === 'number') {
+          return (
+            <Text key={`menu-item-option-${index}`} {..._text}>
+              {child}
+            </Text>
+          );
+        } else {
+          return child;
+        }
+      })}
+    </MenuItem>
+  );
+};
+
+export default memo(forwardRef(MenuItemOption));

package/src/components/composites/Menu/MenuOptionGroup.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, memo } from 'react';
+import MenuGroup from './MenuGroup';
+import type { IMenuOptionGroupProps, IMenuOptionContextProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+export const MenuOptionContext = React.createContext<IMenuOptionContextProps>({
+  values: [],
+  onChange: (_val) => {},
+  type: 'checkbox',
+});
+
+const MenuOptionGroup = (
+  { type, defaultValue, value, onChange, ...props }: IMenuOptionGroupProps,
+  ref?: any
+) => {
+  const internalDefaultValue = defaultValue
+    ? Array.isArray(defaultValue)
+      ? defaultValue
+      : [defaultValue]
+    : [];
+
+  const [internalValues, setValues] = React.useState<Array<string | number>>(
+    internalDefaultValue
+  );
+  const _onChange = (newValue: string | number) => {
+    if (type === 'checkbox') {
+      const newValues = [...internalValues];
+      if (internalValues.includes(newValue)) {
+        newValues.splice(newValues.indexOf(newValue), 1);
+        setValues(newValues);
+      } else {
+        newValues.push(newValue);
+        setValues(newValues);
+      }
+      onChange && onChange(newValues);
+    } else if (type === 'radio') {
+      setValues([newValue]);
+      onChange && onChange(newValue);
+    }
+  };
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <MenuOptionContext.Provider
+      value={{
+        values: !value
+          ? internalValues
+          : Array.isArray(value)
+          ? value
+          : [value],
+        onChange: _onChange,
+        type,
+      }}
+    >
+      <MenuGroup {...props} ref={ref} />
+    </MenuOptionContext.Provider>
+  );
+};
+
+export default memo(forwardRef(MenuOptionGroup));