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

package/src/components/composites/Typeahead/useTypeahead/reducer.tsx

@@ -0,0 +1,80 @@
+import * as stateChangeTypes from './types';
+import { getDefaultValue } from './utils';
+
+type IState = {
+  isOpen: boolean;
+  selectedItem: any;
+  inputValue: string;
+};
+
+export function useTypeaheadReducer(state: IState, action: any) {
+  const { type, props } = action;
+  let changes;
+
+  switch (type) {
+    case stateChangeTypes.ItemClick:
+      changes = {
+        isOpen: getDefaultValue(props, 'isOpen'),
+        selectedItem: props.items[action.index],
+        inputValue: props.itemToString(props.items[action.index]),
+      };
+      break;
+    case stateChangeTypes.InputBlur:
+      if (state.isOpen) {
+        changes = {
+          isOpen: false,
+        };
+      }
+      break;
+    case stateChangeTypes.InputChange:
+      changes = {
+        isOpen: true,
+        inputValue: action.inputValue,
+      };
+      break;
+
+    case stateChangeTypes.ToggleButtonClick:
+    case stateChangeTypes.FunctionToggleMenu:
+      changes = {
+        isOpen: !state.isOpen,
+      };
+      break;
+    case stateChangeTypes.FunctionOpenMenu:
+      changes = {
+        isOpen: true,
+      };
+      break;
+    case stateChangeTypes.FunctionCloseMenu:
+      changes = {
+        isOpen: false,
+      };
+      break;
+
+    case stateChangeTypes.FunctionSelectItem:
+      changes = {
+        selectedItem: action.selectedItem,
+        inputValue: props.itemToString(action.selectedItem),
+      };
+      break;
+    case stateChangeTypes.ControlledPropUpdatedSelectedItem:
+    case stateChangeTypes.FunctionSetInputValue:
+      changes = {
+        inputValue: action.inputValue,
+      };
+      break;
+    case stateChangeTypes.FunctionReset:
+      changes = {
+        isOpen: getDefaultValue(props, 'isOpen'),
+        selectedItem: getDefaultValue(props, 'selectedItem'),
+        inputValue: getDefaultValue(props, 'inputValue'),
+      };
+      break;
+    default:
+      throw new Error('Reducer called without proper action type.');
+  }
+
+  return {
+    ...state,
+    ...changes,
+  };
+}

package/src/components/composites/Typeahead/useTypeahead/types.tsx

@@ -0,0 +1,27 @@
+export const InputChange = '__input_change__';
+export const InputBlur = '__input_blur__';
+
+export const ItemClick = '__item_click__';
+
+export const ToggleButtonClick = '__togglebutton_click__';
+
+export const FunctionToggleMenu = '__function_toggle_menu__';
+export const FunctionOpenMenu = '__function_open_menu__';
+export const FunctionCloseMenu = '__function_close_menu__';
+
+export const FunctionSelectItem = '__function_select_item__';
+export const FunctionSetInputValue = '__function_set_input_value__';
+
+export const FunctionReset = '__function_reset__';
+export const ControlledPropUpdatedSelectedItem =
+  '__controlled_prop_updated_selected_item__';
+
+export type IItem = any;
+export type IUseTypeaheadProps = {
+  isOpen?: boolean;
+  items: IItem[];
+  itemToString: (item?: any) => string;
+  selectedItem?: IItem;
+  onInputValueChange?: ({ inputValue }: { inputValue: string }) => any;
+  onSelectedItemChange?: (item: IItem) => any;
+};

package/src/components/composites/Typeahead/useTypeahead/useTypeahead.ts

@@ -0,0 +1,102 @@
+import { useTypeaheadReducer } from './reducer';
+import React, { useEffect } from 'react';
+import * as stateChangeTypes from './types';
+import type { AccessibilityRole } from 'react-native';
+import { Keyboard } from 'react-native';
+import { dropdownDefaultStateValues, getDefaultValue } from './utils';
+
+function isControlledProp(props: any, key: string) {
+  return props[key] !== undefined;
+}
+
+import type { IUseTypeaheadProps } from './types';
+
+export function useTypeahead(props: IUseTypeaheadProps) {
+  let defaultValues = { ...dropdownDefaultStateValues };
+  defaultValues.isOpen = getDefaultValue(props, 'isOpen');
+
+  const [state, dispatch] = React.useReducer(
+    useTypeaheadReducer,
+    defaultValues
+  );
+
+  const dispatchWithProps = (object: any) => {
+    dispatch({ ...object, props });
+  };
+
+  const { inputValue, isOpen } = state;
+
+  const {
+    items,
+    onInputValueChange,
+    onSelectedItemChange,
+    selectedItem,
+    itemToString,
+  } = props;
+
+  const isControlled = isControlledProp(props, 'selectedItem');
+
+  useEffect(() => {
+    if (isControlled) {
+      dispatch({
+        type: stateChangeTypes.ControlledPropUpdatedSelectedItem,
+        inputValue: itemToString(selectedItem),
+      });
+    }
+  }, [selectedItem, isControlled, itemToString]);
+
+  const onChangeText = (text: string) => {
+    onInputValueChange?.({ inputValue: text });
+    dispatchWithProps({ type: stateChangeTypes.InputChange, inputValue: text });
+  };
+
+  const handleItemSelect = (item: any, index: number) => {
+    onSelectedItemChange?.(item);
+    dispatchWithProps({ type: stateChangeTypes.ItemClick, index });
+    Keyboard.dismiss();
+  };
+
+  const getMenuItemProps = (item: any, index: number) => {
+    return {
+      onPress: () => handleItemSelect(item, index),
+      accessible: true,
+      accessiblityRole: 'menuitem' as AccessibilityRole,
+    };
+  };
+
+  const getMenuProps = () => {
+    return {
+      accessible: true,
+      accessibilityRole: 'menu' as AccessibilityRole,
+      accessibilityHint: `Showing ${items.length} records`,
+    };
+  };
+
+  const getToggleButtonProps = () => {
+    return {
+      onPress: () => {
+        dispatchWithProps({ type: stateChangeTypes.ToggleButtonClick });
+      },
+    };
+  };
+
+  const getInputProps = (propInputVal?: any, propOnchangeText?: any) => {
+    return {
+      onChangeText: propInputVal ? propOnchangeText : onChangeText,
+      value: propInputVal ? propInputVal : inputValue,
+      accessibilityRole: 'combobox' as AccessibilityRole,
+      accessibilityLabel: 'Typeahead input',
+      accessibilityState: {
+        expanded: isOpen,
+      },
+    };
+  };
+
+  return {
+    getInputProps,
+    getMenuItemProps,
+    getMenuProps,
+    getToggleButtonProps,
+    isOpen,
+  };
+}

package/src/components/composites/Typeahead/useTypeahead/utils.ts

@@ -0,0 +1,24 @@
+export const dropdownDefaultStateValues = {
+  highlightedIndex: -1,
+  isOpen: false,
+  selectedItem: null,
+  inputValue: '',
+};
+
+export function capitalizeString(string: string) {
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
+}
+
+export function getDefaultValue(
+  props: any,
+  propKey: any,
+  defaultStateValues = dropdownDefaultStateValues
+) {
+  const defaultPropKey = `default${capitalizeString(propKey)}`;
+
+  if (defaultPropKey in props) {
+    return props[defaultPropKey];
+  }
+  //@ts-ignore
+  return defaultStateValues[propKey];
+}

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

@@ -0,0 +1,32 @@
+import isNil from 'lodash.isnil';
+import React from 'react';
+import Flex from '../../primitives/Flex';
+import type { IWrapProps } from './types';
+import { useThemeProps } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const Wrap = ({ children, ...props }: IWrapProps, ref?: any) => {
+  const { space, ...newProps } = useThemeProps('Wrap', props);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Flex wrap="wrap" {...newProps} ref={ref}>
+      {isNil(space)
+        ? children
+        : React.Children.map(children, (child: any) => {
+            return React.cloneElement(
+              child,
+              { ...props, style: { margin: space } },
+              child.props.children
+            );
+          })}
+    </Flex>
+  );
+};
+
+export default React.memo(React.forwardRef(Wrap));
+export type { IWrapProps };

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

@@ -0,0 +1,5 @@
+import type { IFlexProps } from './../../primitives/Flex/types';
+
+export type IWrapProps = IFlexProps & {
+  space?: number;
+};

package/src/components/composites/index.ts

@@ -0,0 +1,154 @@
+export { default as AspectRatio } from './AspectRatio';
+export type { IAspectRatioProps } from './AspectRatio/types';
+
+export { default as Badge } from './Badge';
+export type { IBadgeProps } from './Badge';
+
+export { default as Card } from './Card';
+export type { ICardProps } from './Card';
+
+export { default as IconButton } from './IconButton';
+export type { IIconButtonProps } from './IconButton';
+
+export { Alert } from './Alert';
+export type { IAlertProps } from './Alert';
+
+export { Avatar } from './Avatar';
+export type { IAvatarProps } from './Avatar';
+
+export { Breadcrumb } from './Breadcrumb';
+export type { IBreadcrumbProps } from './Breadcrumb';
+
+export { default as Backdrop } from './Backdrop';
+
+export { default as Container } from './Container';
+export type { IContainerProps } from './Container';
+
+export { Modal } from './Modal';
+export type { IModalProps } from './Modal';
+export { default as Drawer } from './Drawer';
+export type { IDrawerProps } from './Drawer';
+
+export { useToast, Toast } from './Toast';
+export type { IToastProps } from './Toast';
+
+export { default as Divider } from './Divider';
+export type { IDividerProps } from './Divider/types';
+
+export { default as Progress } from './Progress';
+export type { IProgressProps } from './Progress';
+
+// export { default as Stat } from './Stat';
+
+export { Skeleton } from './Skeleton';
+export type { ISkeletonProps, ISkeletonTextProps } from './Skeleton';
+
+export { Accordion } from './Accordion';
+export type {
+  IAccordionProps,
+  IAccordionDetailsProps,
+  IAccordionSummaryProps,
+  IAccordionItemProps,
+  IAccordionIconProps,
+  IAccordionContextProps,
+  IAccordionItemContextProps,
+} from './Accordion';
+
+export { FormControl, useFormControlContext } from './FormControl';
+export type {
+  IFormControlProps,
+  IFormControlLabelProps,
+  IFormControlErrorMessageProps,
+  IFormControlHelperTextProps,
+  IFormControlContext,
+} from './FormControl';
+
+export {
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from './NumberInput';
+export type {
+  INumberInputProps,
+  INumberInputFieldProps,
+  INumberInputSteppersProps,
+  INumberInputStepperProps,
+  INumberInputContext,
+} from './NumberInput';
+
+export { default as Tag } from './Tag';
+export type { ITagProps } from './Tag';
+
+export { default as Kbd } from './KBD';
+export type { IKbdProps } from './KBD';
+
+export { default as Code } from './Code';
+
+export { Center, Square, Circle } from './Center';
+export type { ICenterProps, ICircleProps, ISquareProps } from './Center';
+
+export { default as Wrap } from './Wrap';
+export type { IWrapProps } from './Wrap';
+
+// export type { IToastProps } from './Toast';
+
+export { PinInput } from './PinInput';
+export type { IPinInputProps, IPinInputFieldProps } from './PinInput';
+
+export * from './Transitions';
+export type {
+  IFadeProps,
+  IScaleFadeProps,
+  ISlideProps,
+  ISlideFadeProps,
+} from './Transitions';
+
+export { default as Collapse } from './Collapse';
+export { default as CircularProgress } from './CircularProgress';
+
+export { Popover } from './Popover';
+export { Tooltip } from './Tooltip';
+export type { ITooltipProps } from './Tooltip';
+
+export type { IPopoverProps } from './Popover';
+
+export { AlertDialog } from './AlertDialog';
+export type { IAlertDialogProps } from './AlertDialog';
+
+export { Menu } from './Menu';
+export type {
+  IMenuProps,
+  IMenuItemProps,
+  IMenuItemOptionProps,
+  IMenuGroupProps,
+  IMenuOptionGroupProps,
+} from './Menu';
+
+export { SimpleGrid } from './SimpleGrid';
+export type { ISimpleGridProps } from './SimpleGrid';
+
+// export { Tabs } from './Tabs';
+// export type {
+//   ITabsProps,
+//   ITabBarProps,
+//   ITabProps,
+//   ITabViewsProps,
+//   ITabViewProps,
+//   ITabsContextProps,
+// } from './Tabs';
+export { TextField } from './TextField';
+export type { ITextFieldProps } from './TextField';
+
+export { Actionsheet } from './Actionsheet';
+export type {
+  IActionsheetProps,
+  IActionsheetContentProps,
+  IActionsheetItemProps,
+} from './Actionsheet';
+
+// export { AppBar } from './AppBar';
+export { Fab } from './Fab';
+export type { IFabProps } from './Fab';
+export { Typeahead, useTypeahead } from './Typeahead';

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

@@ -0,0 +1,118 @@
+import React, { memo, forwardRef } from 'react';
+import { View } from 'react-native';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { getColor } from '../../../theme';
+import { useTheme } from '../../../hooks';
+import { makeStyledComponent } from '../../../utils/styled';
+import { wrapStringChild } from '../../../utils/wrapStringChild';
+import type { IBoxProps, InterfaceBoxProps } from './types';
+import { useSafeArea } from '../../../hooks/useSafeArea';
+import { useNativeBaseConfig } from '../../../core/NativeBaseContext';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const StyledBox = makeStyledComponent(View);
+
+let MemoizedGradient: any;
+
+const Box = ({ children, ...props }: IBoxProps, ref: any) => {
+  // const { _text, ...resolvedProps } = useThemeProps('Box', props);
+  const theme = useTheme();
+  const { _text, ...resolvedProps } = usePropsResolution('Box', props);
+  let Gradient = useNativeBaseConfig('NativeBaseConfigProvider').config
+    .dependencies?.['linear-gradient'];
+
+  const safeAreaProps = useSafeArea(resolvedProps);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  if (
+    resolvedProps.bg?.linearGradient ||
+    resolvedProps.background?.linearGradient ||
+    resolvedProps.bgColor?.linearGradient ||
+    resolvedProps.backgroundColor?.linearGradient
+  ) {
+    const lgrad =
+      resolvedProps.bg?.linearGradient ||
+      resolvedProps.background?.linearGradient ||
+      resolvedProps.bgColor?.linearGradient ||
+      resolvedProps.backgroundColor?.linearGradient;
+
+    if (Gradient) {
+      if (!MemoizedGradient) {
+        MemoizedGradient = makeStyledComponent(Gradient);
+      }
+
+      Gradient = MemoizedGradient;
+
+      lgrad.colors = lgrad.colors?.map((color: string) => {
+        return getColor(color, theme.colors, theme);
+      });
+      let startObj = { x: 0, y: 0 };
+      let endObj = { x: 0, y: 1 };
+      if (lgrad.start && lgrad.start.length === 2) {
+        startObj = {
+          x: lgrad.start[0],
+          y: lgrad.start[1],
+        };
+      }
+      if (lgrad.end && lgrad.end.length === 2) {
+        endObj = {
+          x: lgrad.end[0],
+          y: lgrad.end[1],
+        };
+      }
+      const backgroundColorProps = [
+        'bg',
+        'bgColor',
+        'background',
+        'backgroundColor',
+      ];
+      backgroundColorProps.forEach((backgroundColorProp) => {
+        if (backgroundColorProp in safeAreaProps)
+          delete safeAreaProps[backgroundColorProp];
+      });
+
+      return (
+        <Gradient
+          ref={ref}
+          {...safeAreaProps}
+          colors={lgrad.colors}
+          start={startObj}
+          end={endObj}
+          locations={lgrad.locations}
+        >
+          {/* {React.Children.map(children, (child) =>
+            typeof child === 'string' || typeof child === 'number' ? (
+              <Text {..._text}>{child}</Text>
+            ) : (
+              child
+            )
+          )} */}
+          {wrapStringChild(children, _text)}
+        </Gradient>
+      );
+    }
+  }
+  return (
+    <StyledBox ref={ref} {...safeAreaProps}>
+      {/* {React.Children.map(children, (child) => {
+        return typeof child === 'string' ||
+          typeof child === 'number' ||
+          (child?.type === React.Fragment &&
+            (typeof child.props?.children === 'string' ||
+              typeof child.props?.children === 'number')) ? (
+          <Text {..._text}>{child}</Text>
+        ) : (
+          child
+        );
+      })} */}
+      {wrapStringChild(children, _text)}
+    </StyledBox>
+  );
+};
+
+export type { IBoxProps, InterfaceBoxProps };
+export default memo(forwardRef(Box));

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

@@ -0,0 +1,49 @@
+import type { ViewProps } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type {
+  SafeAreaProps,
+  PlatformProps,
+  ResponsiveValue,
+  ColorType,
+  CustomProps,
+} from '../../types';
+import type { ITextProps } from './../Text/types';
+
+export interface ILinearGradientProps {
+  linearGradient?: {
+    colors: Array<string>;
+    start?: Array<number>;
+    end?: Array<number>;
+    locations?: Array<number>;
+  };
+}
+
+export interface InterfaceBoxProps<T = null>
+  extends ViewProps,
+    SafeAreaProps,
+    PlatformProps<T extends null ? IBoxProps<any> : T>,
+    Omit<StyledProps, 'bgColor' | 'background' | 'bg' | 'backgroundColor'> {
+  /**
+   * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */
+  children?: JSX.Element | JSX.Element[] | string | any;
+  // /**
+  //  * Applies box shadow and accepts a number from 0 to 9
+  //  * @default 0
+  //  */
+  // shadow?: number;
+  /**
+   * For providing props to Text inside Box
+   */
+  _text?: Partial<ITextProps>;
+  bg?: ResponsiveValue<ColorType | (string & {}) | ILinearGradientProps>;
+  background?: ResponsiveValue<
+    ColorType | (string & {}) | ILinearGradientProps
+  >;
+  bgColor?: ResponsiveValue<ColorType | (string & {}) | ILinearGradientProps>;
+  backgroundColor?: ResponsiveValue<
+    ColorType | (string & {}) | ILinearGradientProps
+  >;
+  // gap?: ResponsiveValue<number | string>;
+}
+
+export type IBoxProps<T = null> = InterfaceBoxProps<T> & CustomProps<'Box'>;