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

package/src/components/composites/Transitions/Transition.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { forwardRef } from 'react';
+import { Animated } from 'react-native';
+import type {
+  ISupportedTransitions,
+  ITransitionConfig,
+  ITransitionProps,
+} from './types';
+
+const transformStylesMap = {
+  translateY: true,
+  translateX: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  rotate: true,
+};
+
+const defaultStyles = {
+  opacity: 1,
+  translateY: 0,
+  translateX: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: '0deg',
+};
+
+const getAnimatedStyles = (animateValue: any) => (
+  initial: ISupportedTransitions,
+  to: ISupportedTransitions
+) => {
+  const styles: any = {
+    transform: [],
+  };
+  for (let key in initial) {
+    if (key === 'transition') {
+      continue;
+    }
+
+    if (key in transformStylesMap) {
+      styles.transform?.push({
+        [key]: animateValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [(initial as any)[key], (to as any)[key]],
+        }),
+      } as any);
+    } else {
+      styles[key] = animateValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [(initial as any)[key], (to as any)[key]],
+      });
+    }
+  }
+
+  return styles;
+};
+
+const defaultTransitionConfig: ITransitionConfig = {
+  type: 'timing',
+  useNativeDriver: true,
+  duration: 250,
+  delay: 0,
+};
+
+export const Transition = forwardRef(
+  (
+    {
+      children,
+      onTransitionComplete,
+      visible = false,
+      initial,
+      animate,
+      exit,
+      style,
+      as,
+      ...rest
+    }: ITransitionProps,
+    ref: any
+  ) => {
+    const animateValue = React.useRef(new Animated.Value(0)).current;
+
+    const Component = React.useMemo(() => {
+      if (as) {
+        return Animated.createAnimatedComponent(as);
+      }
+      return Animated.View;
+    }, [as]);
+
+    const [animationState, setAnimationState] = React.useState('');
+
+    const prevVisible = React.useRef(visible);
+
+    React.useEffect(() => {
+      if (animationState === 'entering' || animationState === 'exiting') {
+        const entryTransition = {
+          ...defaultTransitionConfig,
+          ...animate?.transition,
+        };
+        const exitTransition = {
+          ...defaultTransitionConfig,
+          ...exit?.transition,
+        };
+
+        const startAnimation = animationState === 'entering' ? 1 : 0;
+
+        const transition = startAnimation ? entryTransition : exitTransition;
+
+        Animated.sequence([
+          // @ts-ignore - delay is present in defaultTransitionConfig
+          Animated.delay(transition.delay),
+          Animated[transition.type ?? 'timing'](animateValue, {
+            toValue: startAnimation,
+            useNativeDriver: true,
+            ...transition,
+          }),
+        ]).start(() => {
+          if (animationState === 'entering') {
+            setAnimationState('entered');
+          } else if (animationState === 'exiting') {
+            setAnimationState('exited');
+          }
+        });
+        // });
+      }
+
+      if (animationState === 'exited') {
+        onTransitionComplete && onTransitionComplete('exited');
+      } else if (animationState === 'entered') {
+        onTransitionComplete && onTransitionComplete('entered');
+      }
+      // if (animationState === 'entering') {
+      //   //
+      // }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationState, onTransitionComplete]);
+
+    React.useEffect(() => {
+      // if (!visible) {
+      if (prevVisible.current !== visible && !visible) {
+        setAnimationState('exiting');
+      }
+
+      if (visible) {
+        setAnimationState('entering');
+      }
+      prevVisible.current = visible;
+      // }
+    }, [visible]);
+
+    // If exit animation is present and state is exiting, we replace 'initial' with 'exit' animation
+
+    //  const initialState = { ...defaultStyles, ...initial };
+    const initialState =
+      animationState === 'exited' && exit
+        ? { ...defaultStyles, ...exit }
+        : { ...defaultStyles, ...initial };
+    // const initialState = { ...defaultStyles, ...initial };
+
+    // initial =
+    //   animationState === 'exited'
+    //     ? { ...defaultStyles, ...exit }
+    //     : { ...defaultStyles, ...initial };
+
+    const animateState = { ...defaultStyles, ...animate };
+
+    // const [initialState, setInitialState] = React.useState({
+    //   ...defaultStyles,
+    //   ...initial,
+    // });
+    // console.log('Initial state ', initial);
+
+    // const [animateState] = React.useState({ ...defaultStyles, ...animate });
+    const styles = React.useMemo(() => {
+      // console.log('display state here', initial);
+      return [
+        getAnimatedStyles(animateValue)(
+          initialState as ISupportedTransitions,
+          animateState as ISupportedTransitions
+        ),
+        style,
+      ];
+    }, [animateValue, initial, animate, style]);
+
+    return (
+      <Component
+        // pointerEvents="box-none"
+        pointerEvents={!visible ? 'none' : 'box-none'}
+        // https://github.com/facebook/react-native/issues/23090#issuecomment-710803743
+        // needsOffscreenAlphaCompositing
+        // style={[styles]}
+        style={[styles]}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);

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

@@ -0,0 +1,12 @@
+export { default as Fade } from './Fade';
+export { default as ScaleFade } from './ScaleFade';
+export { default as Slide } from './Slide';
+export { default as SlideFade } from './SlideFade';
+export { default as Stagger } from './Stagger';
+export { default as PresenceTransition } from './PresenceTransition';
+export type {
+  IFadeProps,
+  IScaleFadeProps,
+  ISlideProps,
+  ISlideFadeProps,
+} from './types';

package/src/components/composites/Transitions/types.tsx

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type { CustomProps } from '../../../components/types';
+import type { InterfaceBoxProps } from '../../primitives/Box';
+import type { IOverlayProps } from '../../primitives/Overlay';
+export type IFadeProps = InterfaceBoxProps<IFadeProps> & {
+  in?: boolean;
+  entryDuration?: number;
+  exitDuration?: number;
+  delay?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
+};
+export type IScaleFadeProps = InterfaceBoxProps<IScaleFadeProps> & {
+  in?: boolean;
+  duration?: number;
+  delay?: number;
+  initialScale?: number;
+  initial?: ISupportedTransitions;
+  animate?: ITransitionStyleProps;
+  exit?: ITransitionStyleProps;
+};
+export type ISlideProps = InterfaceBoxProps<ISlideProps> & {
+  in?: boolean;
+  duration?: number;
+  delay?: number;
+  placement?: 'top' | 'bottom' | 'right' | 'left';
+  overlay?: boolean;
+  /**
+   * Props to be passed to the Overlay used inside of Slide when overlay is true.
+   */
+  _overlay?: IOverlayProps;
+};
+export type ISlideFadeProps = InterfaceBoxProps<ISlideFadeProps> & {
+  in?: boolean;
+  delay?: number;
+  duration?: number;
+  offsetX?: number;
+  offsetY?: number;
+} & CustomProps<'Slide'>;
+
+export interface ISupportedTransitions {
+  opacity?: number;
+  translateY?: number;
+  translateX?: number;
+  scale?: number;
+  scaleX?: number;
+  scaleY?: number;
+  rotate?: string;
+}
+
+export interface ITransitionConfig {
+  type?: 'timing' | 'spring';
+  easing?: (value: number) => number;
+  overshootClamping?: boolean;
+  restDisplacementThreshold?: number;
+  restSpeedThreshold?: number;
+  velocity?: number | { x: number; y: number };
+  bounciness?: number;
+  speed?: number;
+  tension?: number;
+  friction?: number;
+  stiffness?: number;
+  mass?: number;
+  damping?: number;
+  delay?: number;
+  duration?: number;
+  useNativeDriver?: boolean;
+}
+
+export interface ITransitionStyleProps extends ISupportedTransitions {
+  transition?: ITransitionConfig;
+}
+export interface ITransitionProps extends ViewProps {
+  /**
+   * Callback invoked when the transition is completed.
+   */
+  onTransitionComplete?: (s: 'entered' | 'exited') => any;
+  /**
+   * Styles before the transition starts
+   */
+  initial?: ISupportedTransitions;
+  /**
+   * Entry animation styles
+   */
+  animate?: ITransitionStyleProps;
+  /**
+   * Exit animation styles
+   */
+  exit?: ITransitionStyleProps;
+  /**
+   * Determines whether to start the animation
+   */
+  visible?: boolean;
+
+  animationExited?: boolean;
+  children?: any;
+  as?: any;
+}
+
+export interface IPresenceTransitionProps extends ViewProps {
+  /**
+   * Callback invoked when the transition is completed.
+   */
+  onTransitionComplete?: (s: 'entered' | 'exited') => any;
+  /**
+   * Styles before the transition starts.
+   */
+  initial?: ISupportedTransitions;
+  /**
+   * Entry animation styles.
+   */
+  animate?: ITransitionStyleProps;
+  /**
+   * Exit animation styles.
+   */
+  exit?: ITransitionStyleProps;
+  /**
+   * Determines whether to start the animation.
+   */
+  visible?: boolean;
+  children?: ReactNode;
+  /**
+   * Accepts a Component to be rendered as Wrapper. Defaults to `View`.
+   */
+  as?: ReactNode;
+}

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

@@ -0,0 +1,240 @@
+import React from 'react';
+import { useButton } from '@react-native-aria/button';
+import { ComboBoxState, useComboBoxState } from '@react-stately/combobox';
+import { useComboBox } from '@react-native-aria/combobox';
+import { useListBox, useOption } from '@react-native-aria/listbox';
+import { ScrollView, findNodeHandle, Platform } from 'react-native';
+import { Item } from '@react-stately/collections';
+import Box from '../../primitives/Box';
+import { Pressable } from '../../primitives/Pressable';
+import Text from '../../primitives/Text';
+import { extractInObject } from '../../../theme/tools';
+import { ITypeaheadProps, IComboBoxProps, layoutPropsList } from './types';
+import { Input } from '../../primitives/Input';
+import { useThemeProps } from '../../../hooks';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+export const Typeahead = React.forwardRef(
+  (
+    {
+      onSelectedItemChange,
+      options,
+      renderItem,
+      getOptionLabel,
+      getOptionKey,
+      onChange,
+      numberOfItems,
+      ...rest
+    }: ITypeaheadProps,
+    ref?: any
+  ) => {
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(rest)) {
+      return null;
+    }
+    return (
+      <ComboBoxImplementation
+        {...rest}
+        onSelectionChange={onSelectedItemChange}
+        items={
+          numberOfItems !== undefined
+            ? options.slice(0, numberOfItems)
+            : options
+        }
+        onInputChange={onChange}
+        ref={ref}
+      >
+        {(item: any) => {
+          if (typeof item !== 'string' && getOptionLabel === undefined) {
+            throw new Error('Please use getOptionLabel prop');
+          }
+
+          if (item.id === undefined && getOptionKey === undefined) {
+            throw new Error('Please use getOptionKey prop');
+          }
+
+          const optionLabel = getOptionLabel ? getOptionLabel(item) : item;
+          const optionKey = getOptionKey
+            ? getOptionKey(item)
+            : item.id !== undefined
+            ? item.id
+            : optionLabel;
+
+          return (
+            <Item textValue={optionLabel} key={optionKey}>
+              {renderItem ? (
+                renderItem(item)
+              ) : (
+                <Box p={2} justifyContent="center">
+                  <Text>{optionLabel}</Text>
+                </Box>
+              )}
+            </Item>
+          );
+        }}
+      </ComboBoxImplementation>
+    );
+  }
+);
+
+const ComboBoxImplementation = React.forwardRef(
+  (props: IComboBoxProps, ref?: any) => {
+    const [layoutProps] = extractInObject(props, layoutPropsList);
+    let state = useComboBoxState(props);
+
+    let triggerRef = React.useRef(null);
+    let inputRef = React.useRef(null);
+    let listBoxRef = React.useRef(null);
+    let popoverRef = React.useRef(null);
+
+    let {
+      buttonProps: triggerProps,
+      inputProps,
+      listBoxProps,
+      labelProps,
+    } = useComboBox(
+      {
+        ...props,
+        inputRef,
+        buttonRef: triggerRef,
+        listBoxRef,
+        popoverRef,
+        menuTrigger: 'input',
+      },
+      state
+    );
+
+    const toggleIconSetter = () => {
+      if (typeof props.toggleIcon === 'function')
+        return props.toggleIcon({
+          isOpen: state.isOpen,
+        });
+      return props.toggleIcon;
+    };
+
+    let { buttonProps } = useButton(triggerProps);
+
+    return (
+      <Box flexDirection="row" {...layoutProps} ref={ref}>
+        <Box flex={1}>
+          {props.label && (
+            <Text {...labelProps} pb={1}>
+              {props.label}
+            </Text>
+          )}
+          <Input
+            {...inputProps}
+            ref={inputRef}
+            InputRightElement={
+              // @ts-ignore - RN has hitSlop type inconsistent for View and Pressable!
+              <Pressable {...buttonProps} ref={triggerRef}>
+                {toggleIconSetter()}
+              </Pressable>
+            }
+          />
+
+          {state.isOpen && (
+            <ListBoxPopup
+              {...listBoxProps}
+              listBoxRef={listBoxRef}
+              popoverRef={popoverRef}
+              state={state}
+              label={props.label}
+            />
+          )}
+        </Box>
+      </Box>
+    );
+  }
+);
+
+type IListBoxProps = {
+  popoverRef: any;
+  listBoxRef: any;
+  state: ComboBoxState<any>;
+  dropdownHeight: number;
+  label: string;
+};
+
+function ListBoxPopup(props: IListBoxProps) {
+  let { popoverRef, listBoxRef, state, dropdownHeight, label } = props;
+
+  let { listBoxProps } = useListBox(
+    {
+      label,
+      autoFocus: state.focusStrategy,
+      disallowEmptySelection: true,
+    },
+    state,
+    listBoxRef
+  );
+
+  return (
+    <Box ref={popoverRef}>
+      <Box position="absolute" width="100%" maxHeight={dropdownHeight ?? 200}>
+        <ScrollView
+          {...listBoxProps}
+          keyboardShouldPersistTaps="handled"
+          ref={(node) => {
+            if (Platform.OS === 'web') {
+              listBoxRef.current = findNodeHandle(node);
+            } else {
+              listBoxRef.current = node;
+            }
+          }}
+        >
+          {[...state.collection].map((item) => (
+            <Option key={item.key} item={item} state={state} />
+          ))}
+        </ScrollView>
+      </Box>
+    </Box>
+  );
+}
+
+function Option({ item, state }: { item: any; state: ComboBoxState<any> }) {
+  const searchItemStyle = useThemeProps('TypeAheadSearchItem', {});
+
+  let ref = React.useRef(null);
+  let isDisabled = state.disabledKeys.has(item.key);
+  let isSelected = state.selectionManager.isSelected(item.key);
+  let isFocused = state.selectionManager.focusedKey === item.key;
+
+  let { optionProps } = useOption(
+    {
+      key: item.key,
+      isDisabled,
+      isSelected,
+      shouldFocusOnHover: true,
+      shouldUseVirtualFocus: true,
+    },
+    state,
+    ref
+  );
+
+  let backgroundColor = searchItemStyle.backgroundColor;
+  let opacity = 1;
+
+  if (isSelected) {
+    backgroundColor = searchItemStyle._focus.backgroundColor;
+  } else if (isFocused) {
+    backgroundColor = searchItemStyle._focus.backgroundColor;
+  } else if (isDisabled) {
+    opacity = 0.6;
+    backgroundColor = searchItemStyle._disabled.backgroundColor;
+  }
+
+  return (
+    <Pressable
+      {...optionProps}
+      opacity={opacity}
+      cursor={
+        isDisabled ? (Platform.OS === 'web' ? 'not-allowed' : null) : null
+      }
+      backgroundColor={backgroundColor}
+      ref={ref}
+    >
+      {item.rendered}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { useTypeahead } from './useTypeahead';
+export { Typeahead } from './Typeahead';

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

@@ -0,0 +1,68 @@
+import type { InterfaceBoxProps } from '../../primitives/Box/types';
+
+export type ITypeaheadProps = InterfaceBoxProps<ITypeaheadProps> & {
+  options: any[];
+  renderItem?: (item: any) => any;
+  onChange?: (value: string) => void;
+  toggleIcon?: any;
+  dropdownHeight?: number | string;
+  inputValue?: string;
+  onSelectedItemChange?: (value: any) => void;
+  numberOfItems?: number;
+  getOptionLabel?: (item: any) => string;
+  getOptionKey?: (item: any) => any;
+  disabledKeys?: Array<any>;
+  label?: string;
+};
+
+export type IComboBoxProps = {
+  items: any[];
+  renderItem?: (item: any) => any;
+  onInputChange?: (value: string) => void;
+  toggleIcon?: any;
+  dropdownHeight?: number | string;
+  inputValue?: string;
+  onSelectionChange?: (value: any) => void;
+  children: any;
+  disabledKeys?: Array<any>;
+  label?: string;
+};
+
+export const layoutPropsList = [
+  'm',
+  'mt',
+  'mb',
+  'ml',
+  'mr',
+  'position',
+  'flex',
+  'zIndex',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'h',
+  'w',
+  'minW',
+  'maxW',
+  'minH',
+  'maxH',
+  'height',
+  'width',
+  'minWidth',
+  'maxWidth',
+  'minHeight',
+  'maxHeight',
+  'flexBasis',
+  'flexDirection',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'direction',
+  'justify',
+  'justifyContent',
+  'align',
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+];

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

@@ -0,0 +1 @@
+export { useTypeahead } from './useTypeahead';