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

package/src/components/primitives/Slider/Slider.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import { useSliderState } from '@react-stately/slider';
+import { useLayout } from '../../../hooks';
+import { usePropsResolution } from '../../../hooks';
+import type { ISliderProps } from './types';
+import Box from '../Box';
+import { SliderContext } from './Context';
+import { useSlider } from '@react-native-aria/slider';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+function Slider({ isDisabled, isReadOnly, ...props }: ISliderProps, ref?: any) {
+  const newProps = {
+    ...props,
+    'aria-label': props.accessibilityLabel ?? 'Slider',
+  };
+
+  if (typeof props.value === 'number') {
+    //@ts-ignore - React Native Aria slider accepts array of values
+    newProps.value = [props.value];
+  }
+
+  if (typeof props.defaultValue === 'number') {
+    //@ts-ignore - React Native Aria slider accepts array of values
+    newProps.defaultValue = [props.defaultValue];
+  }
+
+  props = newProps;
+
+  const { onLayout, layout: trackLayout } = useLayout();
+  const updatedProps: ISliderProps = Object.assign({}, props);
+
+  if (isReadOnly || isDisabled) {
+    updatedProps.isDisabled = true;
+  }
+
+  const state = useSliderState({
+    ...updatedProps,
+    //@ts-ignore
+    numberFormatter: { format: (e) => e },
+    minValue: props.minValue,
+    maxValue: props.maxValue,
+    onChange: (val: any) => {
+      props.onChange && props.onChange(val[0]);
+    },
+    onChangeEnd: (val: any) => {
+      props.onChangeEnd && props.onChangeEnd(val[0]);
+    },
+  });
+
+  const resolvedProps = usePropsResolution('Slider', props, {
+    isDisabled,
+    isReadOnly,
+  });
+
+  const { trackProps } = useSlider(
+    (props as unknown) as any,
+    state,
+    trackLayout
+  );
+
+  const contextValue = React.useMemo(() => {
+    return {
+      trackLayout,
+      state,
+      orientation: props.orientation,
+      isDisabled: isDisabled,
+      isReversed: props.isReversed,
+      colorScheme: props.colorScheme,
+      trackProps,
+      isReadOnly: isReadOnly,
+      onTrackLayout: onLayout,
+      thumbSize: resolvedProps.thumbSize,
+      sliderSize: resolvedProps.sliderTrackHeight,
+      _interactionBox: resolvedProps._interactionBox,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    trackLayout,
+    state,
+    props.orientation,
+    isDisabled,
+    props.isReversed,
+    props.colorScheme,
+    isReadOnly,
+    onLayout,
+    resolvedProps.thumbSize,
+    resolvedProps.sliderTrackHeight,
+  ]);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <SliderContext.Provider value={contextValue}>
+      <Box {...resolvedProps} ref={ref}>
+        {React.Children.map(props.children, (child, index) => {
+          if (child.displayName === 'SliderThumb') {
+            return React.cloneElement(child as React.ReactElement, {
+              index,
+            });
+          }
+
+          return child;
+        })}
+      </Box>
+    </SliderContext.Provider>
+  );
+}
+
+export default forwardRef(Slider);

package/src/components/primitives/Slider/SliderFilledTrack.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { SliderContext } from './Context';
+import Box from '../Box';
+import type { ISliderTrackFilledProps } from './types';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const SliderFilledTrack = (props: ISliderTrackFilledProps, ref?: any) => {
+  const {
+    isReversed,
+    colorScheme,
+    state,
+    trackLayout,
+    orientation,
+    isDisabled,
+    sliderSize,
+    isReadOnly,
+  } = React.useContext(SliderContext);
+
+  const sliderTrackPosition = isReversed
+    ? orientation === 'vertical'
+      ? trackLayout.height - trackLayout.height * state.getThumbPercent(0)
+      : trackLayout.width - trackLayout.width * state.getThumbPercent(0)
+    : state.getThumbPercent(0) * 100 + '%';
+
+  const resolvedProps = usePropsResolution(
+    'SliderFilledTrack',
+    {
+      size: sliderSize,
+      colorScheme,
+      isReversed,
+      orientation,
+      sliderTrackPosition,
+      ...props,
+    },
+    { isDisabled, isReadOnly }
+  );
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Box
+      position="absolute"
+      {...resolvedProps}
+      ref={ref}
+      // {...(isReadOnly && _readOnly)}
+      // {...(isDisabled && _disabled)}
+    />
+  );
+};
+
+export default React.forwardRef(SliderFilledTrack);

package/src/components/primitives/Slider/SliderThumb.tsx

@@ -0,0 +1,154 @@
+import React, { forwardRef } from 'react';
+import { Platform } from 'react-native';
+import { useSliderThumb } from '@react-native-aria/slider';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useToken } from '../../../hooks';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { ISliderThumbProps } from './types';
+import Box from '../Box';
+import { SliderContext } from './Context';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useHover } from '@react-native-aria/interactions';
+import { mergeRefs } from '../../../utils';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { Stack } from '../Stack';
+import { Center } from '../../composites/Center';
+
+function SliderThumb(props: ISliderThumbProps, ref: any) {
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  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 {
+    state,
+    trackLayout,
+    orientation,
+    colorScheme,
+    thumbSize,
+    isReadOnly,
+    isDisabled,
+    _interactionBox: interactionBoxContext,
+  } = React.useContext(SliderContext);
+  const {
+    onFocus,
+    onBlur,
+    _stack,
+    _interactionBox,
+    ...resolvedProps
+  } = usePropsResolution(
+    'SliderThumb',
+    {
+      size: thumbSize,
+      _interactionBox: interactionBoxContext,
+      colorScheme,
+      ...props,
+    },
+    {
+      isDisabled,
+      isReadOnly,
+      isPressed,
+      isFocused,
+      isHovered,
+    }
+  );
+
+  const inputRef = React.useRef(null);
+  const { thumbProps, inputProps } = useSliderThumb(
+    {
+      index: 0,
+      trackLayout,
+      inputRef,
+      orientation,
+    },
+    state
+  );
+
+  React.useEffect(() => {
+    setIsPressed(state.isThumbDragging(0));
+  }, [state]);
+
+  const thumbAbsoluteSize = useToken('sizes', resolvedProps.size);
+
+  const thumbStyles: any = {
+    bottom:
+      orientation === 'vertical'
+        ? `${state.getThumbPercent(0) * 100}%`
+        : undefined,
+    left:
+      orientation !== 'vertical'
+        ? `${state.getThumbPercent(0) * 100}%`
+        : undefined,
+    transform:
+      orientation === 'vertical'
+        ? [{ translateY: parseInt(thumbAbsoluteSize) / 2 }]
+        : [{ translateX: -parseInt(thumbAbsoluteSize) / 2 }],
+  };
+
+  thumbStyles.transform.push({
+    scale: state.isThumbDragging(0) ? resolvedProps.scaleOnPressed : 1,
+  });
+
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    ...stylingProps.outline,
+  ]);
+
+  const [
+    accessibilityProps,
+    nonAccessibilityProps,
+  ] = extractInObject(nonLayoutProps, [
+    'accessibilityRole',
+    'accessibilityState',
+  ]);
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Box
+      position="absolute"
+      {...thumbProps}
+      {...resolvedProps}
+      {...accessibilityProps}
+      {...layoutProps}
+      style={[thumbStyles, resolvedProps.style]}
+      onFocus={(e: any) => {
+        handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+      }}
+      onBlur={(e: any) => {
+        handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+      }}
+      // {...(isReadOnly && _readOnly)}
+      // {...(isDisabled && _disabled)}
+      ref={mergeRefs([_ref, ref])}
+    >
+      <Stack {..._stack}>
+        <Box {..._interactionBox} />
+        <Center {...nonAccessibilityProps}>
+          {props.children}
+          {Platform.OS === 'web' && (
+            <VisuallyHidden>
+              <input ref={inputRef} {...inputProps} />
+            </VisuallyHidden>
+          )}
+        </Center>
+      </Stack>
+    </Box>
+  );
+}
+
+SliderThumb.displayName = 'SliderThumb';
+
+export default forwardRef(SliderThumb);

package/src/components/primitives/Slider/SliderTrack.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { Pressable } from '../Pressable';
+import Box from '../Box';
+import { SliderContext } from './Context';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { ISliderTrackProps } from './types';
+
+const SliderTrack = ({ children, ...props }: ISliderTrackProps, ref?: any) => {
+  const {
+    orientation,
+    trackProps,
+    onTrackLayout,
+    colorScheme,
+    sliderSize,
+    isReadOnly,
+    isDisabled,
+  } = React.useContext(SliderContext);
+
+  const isVertical = orientation === 'vertical';
+
+  const { _pressable, ...resolvedProps } = usePropsResolution(
+    'SliderTrack',
+    {
+      size: sliderSize,
+      colorScheme,
+      isVertical,
+      ...props,
+    },
+    { isReadOnly, isDisabled }
+  );
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      onLayout={onTrackLayout}
+      ref={ref}
+      {...trackProps}
+      {..._pressable}
+    >
+      <Box {...resolvedProps}>{children}</Box>
+    </Pressable>
+  );
+};
+
+export default React.forwardRef(SliderTrack);

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

@@ -0,0 +1,18 @@
+import SliderMain from './Slider';
+import SliderThumb from './SliderThumb';
+import SliderTrack from './SliderTrack';
+import SliderFilledTrack from './SliderFilledTrack';
+import type { ISliderComponentType } from './types';
+
+const SliderTemp: any = SliderMain;
+SliderTemp.Thumb = SliderThumb;
+SliderTemp.Track = SliderTrack;
+SliderTemp.FilledTrack = SliderFilledTrack;
+
+// To add typings
+const Slider = SliderTemp as ISliderComponentType;
+
+export { Slider };
+export { SliderContext } from './Context';
+
+export type { ISliderProps } from './types';

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

@@ -0,0 +1,134 @@
+import type { MutableRefObject } from 'react';
+import type { CustomProps } from '../../../components/types';
+import type { InterfaceBoxProps } from '../Box';
+import type { ColorSchemeType } from '../../../components/types';
+import type { ResponsiveValue } from '../../types';
+import type { ISizes } from '../../../theme/base/sizes';
+
+export interface InterfaceSliderProps extends InterfaceBoxProps<ISliderProps> {
+  /** The current value of the Slider */
+  value?: number;
+  /** The default value (uncontrolled). */
+  defaultValue?: number;
+  /** Handler that is called when the value changes. */
+  onChange?: (value: number) => void;
+  /**
+   * Color scheme of the slider
+   */
+  colorScheme?: ColorSchemeType;
+  /**
+   * Text description of slider. This will be announced by screen reader/
+   */
+  accessibilityLabel?: string;
+  /**
+   * If true, the value will be incremented or decremented in reverse.
+   */
+  isReversed?: boolean;
+  /**
+   * The orientation of the Slider.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /** Whether the whole Slider is disabled. */
+  isDisabled?: boolean;
+  /** Fired when the slider stops moving, due to being let go. */
+  onChangeEnd?: (value: number) => void;
+  /**
+   * The slider's minimum value.
+   * @default 0
+   */
+  minValue?: number;
+  /**
+   * The slider's maximum value.
+   * @default 100
+   */
+  maxValue?: number;
+  /**
+   * The slider's step value.
+   * @default 1
+   */
+  step?: number;
+  /** Whether the whole Slider is readonly. */
+  isReadOnly?: boolean;
+  /** Props applied if isDisabled is true. */
+  _disabled?: any;
+  /** Props applied if isReadOnly is true. */
+  _readOnly?: any;
+  /** Prop applied to change slider track height */
+  sliderTrackHeight?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**Prop applied to change size of slider thumb */
+  thumbSize?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**
+   * You can style interaction box around the checkbox using this.
+   */
+  _interactionBox?: Omit<Partial<ISliderThumbProps>, '_interactionBox'>;
+}
+
+export interface ISliderTrackProps
+  extends InterfaceBoxProps<ISliderTrackProps> {
+  /** Whether the whole Slider is readonly. */
+  isReadOnly?: boolean;
+  /** Props applied if isDisabled is true. */
+  _disabled?: any;
+  /** Props applied if isReadOnly is true. */
+  _readOnly?: any;
+  /** Wrapper style for SliderTrack */
+  _pressable?: {};
+}
+
+export interface ISliderTrackFilledProps
+  extends InterfaceBoxProps<ISliderTrackFilledProps> {
+  /** Whether the whole Slider is readonly. */
+  isReadOnly?: boolean;
+  /** Props applied if isDisabled is true. */
+  _disabled?: any;
+  /** Props applied if isReadOnly is true. */
+  _readOnly?: any;
+}
+
+export interface ISliderThumbProps
+  extends InterfaceBoxProps<ISliderThumbProps> {
+  /**
+   * The orientation of the Slider.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /** Whether the Thumb is disabled. */
+  isDisabled?: boolean;
+  /** Whether the whole Slider is readonly. */
+  isReadOnly?: boolean;
+  /** Props applied if isDisabled is true. */
+  _disabled?: any;
+  /** Props applied if isReadOnly is true. */
+  _readOnly?: any;
+  /**
+   * Props to be passed to the slider thumb when button is hovered.
+   */
+  _hover?: Omit<Partial<ISliderThumbProps>, '_hover'>;
+  /**
+   * Props to be passed to the slider thumb when button is pressed.
+   */
+  _pressed?: Omit<Partial<ISliderThumbProps>, '_pressed'>;
+  /**
+   * Props to be passed to the slider thumb when button is focused.
+   */
+  _focus?: Omit<Partial<ISliderThumbProps>, '_focus'>;
+}
+
+export type ISliderComponentType = ((
+  props: ISliderProps & { ref?: MutableRefObject<any> }
+) => JSX.Element) & {
+  Thumb: React.MemoExoticComponent<
+    (props: ISliderThumbProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  Track: React.MemoExoticComponent<
+    (props: ISliderTrackProps & { ref?: MutableRefObject<any> }) => JSX.Element
+  >;
+  FilledTrack: React.MemoExoticComponent<
+    (
+      props: ISliderTrackFilledProps & { ref?: MutableRefObject<any> }
+    ) => JSX.Element
+  >;
+};
+
+export type ISliderProps = InterfaceSliderProps & CustomProps<'Slider'>;

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

@@ -0,0 +1,38 @@
+import React, { memo, forwardRef } from 'react';
+import { ActivityIndicator } from 'react-native';
+import {
+  usePropsResolution,
+  useStyledSystemPropsResolver,
+} from '../../../hooks';
+import { getColor } from '../../../theme';
+import type { ISpinnerProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useTheme } from '../../../hooks';
+
+const Spinner = (props: ISpinnerProps, ref: any) => {
+  const { color, size, style, testID, ...resolvedProps } = usePropsResolution(
+    'Spinner',
+    props
+  );
+  const resolvedColor = getColor(color, useTheme().colors, useTheme());
+  const resolvedStyle = useStyledSystemPropsResolver(resolvedProps);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <ActivityIndicator
+      testID={testID}
+      accessible
+      accessibilityLabel="loading"
+      color={resolvedColor}
+      ref={ref}
+      size={size}
+      style={[resolvedStyle, style]}
+    />
+  );
+};
+
+export default memo(forwardRef(Spinner));
+export type { ISpinnerProps };

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

@@ -0,0 +1,25 @@
+import type { ActivityIndicatorProps } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+} from '../../../components/types';
+export interface InterfaceSpinnerProps
+  extends Omit<ActivityIndicatorProps, 'size'>,
+    Omit<StyledProps, 'size' | 'color'> {
+  /**
+   * Size of Spinner
+   */
+  size?: ThemeComponentSizeType<'Spinner'>;
+
+  // variant?:
+  //   | 'custom'
+  //   | 'dotted'
+  //   | 'multiColorDotted'
+  //   | 'stroked'
+  //   | 'squareDotted';
+  // duration?: number;
+  // renderProp?: JSX.Element | JSX.Element[];
+}
+
+export type ISpinnerProps = InterfaceSpinnerProps & CustomProps<'Spinner'>;

package/src/components/primitives/Spinner/useSpinner.tsx

@@ -0,0 +1,10 @@
+import type { ISpinnerProps } from './types';
+
+export function useSpinner(props: ISpinnerProps) {
+  return {
+    spinnerProps: {
+      accessible: true,
+      accessibilityLabel: props.accessibilityLabel ?? 'loading',
+    },
+  };
+}

package/src/components/primitives/Spinner/variants/default.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Icon } from '../../../primitives/Icon';
+import { Circle, G } from 'react-native-svg';
+
+export function Default(props: any) {
+  return (
+    <Icon color={props.color} viewBox="0 0 64 64" size={props.size}>
+      <G id="Group_182" data-name="Group 182" transform="translate(-258 -488)">
+        <G
+          id="Ellipse_8"
+          data-name="Ellipse 8"
+          transform="translate(258 488)"
+          fill="none"
+          stroke="#e8edfb"
+          strokeWidth="6"
+        >
+          <Circle cx="32" cy="32" r="32" stroke="none" />
+          <Circle cx="32" cy="32" r="29" fill="none" />
+        </G>
+        <G
+          id="Ellipse_10"
+          data-name="Ellipse 10"
+          transform="translate(258 488)"
+          fill="none"
+          stroke={props.color}
+          strokeLinecap="square"
+          strokeWidth="6"
+          strokeDasharray="90 10000"
+        >
+          <Circle cx="32" cy="32" r="32" stroke="none" />
+          <Circle cx="32" cy="32" r="29" fill="none" />
+        </G>
+      </G>
+    </Icon>
+  );
+}

package/src/components/primitives/Spinner/variants/dotted.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon } from '../../../primitives/Icon';
+import { Path } from 'react-native-svg';
+
+export function Dotted(props: any) {
+  return (
+    <Icon color={props.color} viewBox="0 0 66.238 69" size={props.size}>
+      <Path
+        id="Path_33"
+        data-name="Path 33"
+        d="M74.735,324.332a6.22,6.22,0,1,0,4.377,1.811A5.989,5.989,0,0,0,74.735,324.332Z"
+        transform="translate(-59.556 -275.343)"
+      />
+      <Path
+        id="Path_34"
+        data-name="Path 34"
+        d="M22.942,198.757a6.92,6.92,0,0,0-6.9-6.9,6.645,6.645,0,0,0-4.873,2.027,6.872,6.872,0,0,0,0,9.746,6.643,6.643,0,0,0,4.873,2.027,6.643,6.643,0,0,0,4.873-2.027A6.642,6.642,0,0,0,22.942,198.757Z"
+        transform="translate(-9.142 -162.878)"
+      />
+      <Path
+        id="Path_35"
+        data-name="Path 35"
+        d="M346.061,93.695a3.46,3.46,0,1,0-2.437-1.014A3.323,3.323,0,0,0,346.061,93.695Z"
+        transform="translate(-292.242 -73.684)"
+      />
+      <Path
+        id="Path_36"
+        data-name="Path 36"
+        d="M66.983,59.388a7.582,7.582,0,1,0,5.369,2.221A7.315,7.315,0,0,0,66.983,59.388Z"
+        transform="translate(-51.803 -50.418)"
+      />
+      <Path
+        id="Path_37"
+        data-name="Path 37"
+        d="M399.941,211.34a4.166,4.166,0,1,0,1.207,2.933A3.99,3.99,0,0,0,399.941,211.34Z"
+        transform="translate(-334.91 -178.393)"
+      />
+      <Path
+        id="Path_38"
+        data-name="Path 38"
+        d="M338.3,333.473a4.859,4.859,0,1,0,3.407,1.423A4.648,4.648,0,0,0,338.3,333.473Z"
+        transform="translate(-284.485 -283.104)"
+      />
+      <Path
+        id="Path_39"
+        data-name="Path 39"
+        d="M206.519,383.717a5.524,5.524,0,1,0,3.9,1.618A5.322,5.322,0,0,0,206.519,383.717Z"
+        transform="translate(-172.019 -325.759)"
+      />
+      <Path
+        id="Path_40"
+        data-name="Path 40"
+        d="M191.007,0a7.987,7.987,0,0,0-5.866,2.415,7.987,7.987,0,0,0-2.415,5.865,7.985,7.985,0,0,0,2.415,5.865,8.33,8.33,0,0,0,11.73,0,7.985,7.985,0,0,0,2.414-5.865,7.989,7.989,0,0,0-2.414-5.865A7.984,7.984,0,0,0,191.007,0Z"
+        transform="translate(-156.508 0)"
+      />
+    </Icon>
+  );
+}