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

package/src/components/primitives/Spinner/variants/index.ts

@@ -0,0 +1,5 @@
+export * from './default';
+export * from './dotted';
+export * from './squareDotted';
+export * from './stroked';
+export * from './multiColorDotted';

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Icon } from '../../../primitives/Icon';
+import { Circle, Ellipse } from 'react-native-svg';
+
+export function MultiColorDotted(props: any) {
+  return (
+    <Icon color={props.color} viewBox="0 0 74.072 74.072" size={props.size}>
+      <Circle
+        id="Ellipse_24"
+        data-name="Ellipse 24"
+        cx="7.622"
+        cy="7.622"
+        r="7.622"
+        transform="translate(7.037 48.382)"
+        fillOpacity="0.7"
+      />
+      <Ellipse
+        id="Ellipse_25"
+        data-name="Ellipse 25"
+        cx="6.628"
+        cy="6.959"
+        rx="6.628"
+        ry="6.959"
+        transform="translate(58.733 43.08)"
+        fillOpacity="0.4"
+      />
+      <Circle
+        id="Ellipse_26"
+        data-name="Ellipse 26"
+        cx="5.634"
+        cy="5.634"
+        r="5.634"
+        transform="translate(53.431 11.267)"
+        fillOpacity="0.2"
+      />
+      <Ellipse
+        id="Ellipse_27"
+        data-name="Ellipse 27"
+        cx="8.383"
+        cy="8.178"
+        rx="8.383"
+        ry="8.178"
+        transform="translate(0 28.299)"
+        fillOpacity="0.8"
+      />
+      <Ellipse
+        id="Ellipse_28"
+        data-name="Ellipse 28"
+        cx="7.621"
+        cy="7.426"
+        rx="7.621"
+        ry="7.426"
+        transform="translate(24.843 59.221)"
+        fillOpacity="0.6"
+      />
+      <Ellipse
+        id="Ellipse_29"
+        data-name="Ellipse 29"
+        cx="7.24"
+        cy="7.049"
+        rx="7.24"
+        ry="7.049"
+        transform="translate(44.809 56.721)"
+        fillOpacity="0.5"
+      />
+      <Ellipse
+        id="Ellipse_30"
+        data-name="Ellipse 30"
+        cx="8.764"
+        cy="8.554"
+        rx="8.764"
+        ry="8.554"
+        transform="translate(8.688 8.554)"
+        fillOpacity="0.9"
+      />
+      <Ellipse
+        id="Ellipse_31"
+        data-name="Ellipse 31"
+        cx="6.478"
+        cy="6.357"
+        rx="6.478"
+        ry="6.357"
+        transform="translate(61.117 25.906)"
+        fillOpacity="0.3"
+      />
+      <Ellipse
+        id="Ellipse_32"
+        data-name="Ellipse 32"
+        cx="8.947"
+        cy="9.279"
+        rx="8.947"
+        ry="9.279"
+        transform="translate(30.234)"
+        fillOpacity="1"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Icon } from '../../../primitives/Icon';
+import { Circle, G } from 'react-native-svg';
+
+export function SquareDotted(props: any) {
+  return (
+    <Icon color={props.color} viewBox="0 0 50 50" size={props.size}>
+      <G id="Group_264" data-name="Group 264" transform="translate(-172 -330)">
+        <Circle
+          id="Ellipse_33"
+          data-name="Ellipse 33"
+          cx="9"
+          cy="9"
+          r="9"
+          transform="translate(172 330)"
+          fill={props.color}
+        />
+        <Circle
+          id="Ellipse_36"
+          data-name="Ellipse 36"
+          cx="9"
+          cy="9"
+          r="9"
+          transform="translate(204 330)"
+          fill={props.color}
+        />
+        <Circle
+          id="Ellipse_35"
+          data-name="Ellipse 35"
+          cx="9"
+          cy="9"
+          r="9"
+          transform="translate(172 362)"
+          fill={props.color}
+        />
+        <Circle
+          id="Ellipse_37"
+          data-name="Ellipse 37"
+          cx="9"
+          cy="9"
+          r="9"
+          transform="translate(204 362)"
+          fill={props.color}
+        />
+      </G>
+    </Icon>
+  );
+}

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Icon } from '../../../primitives/Icon';
+import { Path, G } from 'react-native-svg';
+
+export function Stroked(props: any) {
+  return (
+    <Icon color={props.color} viewBox="0 0 69.672 69.672" size={props.size}>
+      <G id="Group_252" data-name="Group 252" transform="translate(32.661)">
+        <Path
+          id="Path_17"
+          data-name="Path 17"
+          d="M242.194,8.958a2.175,2.175,0,0,1-2.175-2.175V2.175a2.175,2.175,0,1,1,4.349,0V6.783A2.175,2.175,0,0,1,242.194,8.958Z"
+          transform="translate(-240.019 0)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_18"
+          data-name="Path 18"
+          d="M242.194,455.127a2.175,2.175,0,0,1-2.175-2.175v-4.609a2.175,2.175,0,1,1,4.349,0v4.609A2.175,2.175,0,0,1,242.194,455.127Z"
+          transform="translate(-240.019 -385.455)"
+          fill={props.color}
+        />
+      </G>
+      <G
+        id="Group_253"
+        data-name="Group 253"
+        transform="translate(16.33 4.376)"
+      >
+        <Path
+          id="Path_19"
+          data-name="Path 19"
+          d="M125.574,40.2a2.175,2.175,0,0,1-2.971-.8l-2.3-3.991a2.175,2.175,0,0,1,3.766-2.175l2.3,3.991a2.174,2.174,0,0,1-.8,2.971Z"
+          transform="translate(-120.007 -32.155)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_20"
+          data-name="Path 20"
+          d="M348.658,426.6a2.175,2.175,0,0,1-2.971-.8l-2.3-3.991a2.175,2.175,0,1,1,3.767-2.175l2.3,3.991A2.174,2.174,0,0,1,348.658,426.6Z"
+          transform="translate(-312.735 -365.968)"
+          fill={props.color}
+        />
+      </G>
+      <G
+        id="Group_254"
+        data-name="Group 254"
+        transform="translate(4.375 16.33)"
+      >
+        <Path
+          id="Path_21"
+          data-name="Path 21"
+          d="M40.2,125.574a2.175,2.175,0,0,1-2.971.8l-3.991-2.3a2.175,2.175,0,0,1,2.175-3.767l3.991,2.3A2.175,2.175,0,0,1,40.2,125.574Z"
+          transform="translate(-32.154 -120.007)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_22"
+          data-name="Path 22"
+          d="M426.6,348.658a2.175,2.175,0,0,1-2.971.8l-3.991-2.3a2.175,2.175,0,1,1,2.175-3.766l3.991,2.3A2.174,2.174,0,0,1,426.6,348.658Z"
+          transform="translate(-365.968 -312.735)"
+          fill={props.color}
+        />
+      </G>
+      <G id="Group_255" data-name="Group 255" transform="translate(0 32.661)">
+        <Path
+          id="Path_23"
+          data-name="Path 23"
+          d="M8.958,242.194a2.175,2.175,0,0,1-2.175,2.175H2.175a2.175,2.175,0,1,1,0-4.349H6.783A2.175,2.175,0,0,1,8.958,242.194Z"
+          transform="translate(0 -240.019)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_24"
+          data-name="Path 24"
+          d="M455.127,242.194a2.175,2.175,0,0,1-2.175,2.175h-4.609a2.175,2.175,0,1,1,0-4.349h4.609A2.175,2.175,0,0,1,455.127,242.194Z"
+          transform="translate(-385.455 -240.019)"
+          fill={props.color}
+        />
+      </G>
+      <G
+        id="Group_256"
+        data-name="Group 256"
+        transform="translate(4.376 16.33)"
+      >
+        <Path
+          id="Path_25"
+          data-name="Path 25"
+          d="M40.2,344.179a2.175,2.175,0,0,1-.8,2.971l-3.991,2.3a2.175,2.175,0,0,1-2.175-3.766l3.991-2.3A2.175,2.175,0,0,1,40.2,344.179Z"
+          transform="translate(-32.155 -312.735)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_26"
+          data-name="Path 26"
+          d="M426.6,121.1a2.175,2.175,0,0,1-.8,2.971l-3.991,2.3a2.175,2.175,0,0,1-2.175-3.766l3.991-2.3A2.174,2.174,0,0,1,426.6,121.1Z"
+          transform="translate(-365.97 -120.007)"
+          fill={props.color}
+        />
+      </G>
+      <G
+        id="Group_257"
+        data-name="Group 257"
+        transform="translate(16.33 4.375)"
+      >
+        <Path
+          id="Path_27"
+          data-name="Path 27"
+          d="M125.574,418.839a2.175,2.175,0,0,1,.8,2.971l-2.3,3.991a2.175,2.175,0,0,1-3.767-2.175l2.3-3.991A2.175,2.175,0,0,1,125.574,418.839Z"
+          transform="translate(-120.007 -365.968)"
+          fill={props.color}
+        />
+        <Path
+          id="Path_28"
+          data-name="Path 28"
+          d="M348.658,32.445a2.175,2.175,0,0,1,.8,2.971l-2.3,3.991a2.175,2.175,0,1,1-3.766-2.175l2.3-3.991A2.174,2.174,0,0,1,348.658,32.445Z"
+          transform="translate(-312.735 -32.154)"
+          fill={props.color}
+        />
+      </G>
+    </Icon>
+  );
+}

package/src/components/primitives/Stack/HStack.tsx

@@ -0,0 +1,31 @@
+import React, { memo, forwardRef } from 'react';
+import StackMain, { InterfaceStackProps } from './Stack';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type {
+  CustomProps,
+  ResponsiveValue,
+  // ThemeComponentSizeType,
+} from '../../types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+export interface InterfaceHStackProps extends InterfaceStackProps {
+  /**
+   * The direction of the Stack Items.
+   * @default row
+   */
+  direction?: ResponsiveValue<
+    'column' | 'row' | 'column-reverse' | 'row-reverse'
+  >;
+}
+
+export type IHStackProps = InterfaceHStackProps & CustomProps<'HStack'>;
+
+const HStack = (props: IHStackProps, ref?: any) => {
+  const resolvedProps = usePropsResolution('HStack', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <StackMain ref={ref} direction="row" {...resolvedProps} />;
+};
+
+export default memo(forwardRef(HStack));

package/src/components/primitives/Stack/Stack.tsx

@@ -0,0 +1,104 @@
+import React, { memo, forwardRef } from 'react';
+import { default as Box, InterfaceBoxProps } from '../Box';
+import { getSpacedChildren } from '../../../utils';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import type { CustomProps, ResponsiveValue, SpaceType } from '../../types';
+import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+
+export interface InterfaceStackProps extends InterfaceBoxProps<IStackProps> {
+  /**
+   * The divider element to use between elements.
+   */
+  divider?: JSX.Element;
+  /**
+   * The space between each stack item. Accepts Responsive values
+   */
+  space?: ResponsiveValue<
+    'gutter' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | SpaceType
+  >;
+  /**
+   * Determines whether to reverse the direction of Stack Items.
+   */
+  reversed?: boolean;
+  /**
+   * The direction of the Stack Items.
+   * @default column
+   */
+  direction?: ResponsiveValue<
+    'column' | 'row' | 'column-reverse' | 'row-reverse'
+  >;
+  /**
+   * If true, the Stack will be in hovered state.
+   */
+  isHovered?: boolean;
+  /**
+   * If true, the Stack will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * If true, the Stack will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, the Stack will be invalid.
+   */
+  isInvalid?: boolean;
+  /**
+   * If true, prevents the value of the children from being edited. Used with FormControls.
+   */
+  isReadOnly?: boolean;
+}
+
+export type IStackProps = InterfaceStackProps & CustomProps<'Stack'>;
+
+const Stack = ({ space, ...props }: IStackProps, ref?: any) => {
+  const dir = props.direction;
+  const {
+    children,
+    direction,
+    reversed,
+    divider,
+    size,
+    ...resolvedProps
+  }: any = usePropsResolution(
+    'Stack',
+    { ...props, size: space },
+    {
+      isDisabled: props.isDisabled,
+      isHovered: props.isHovered,
+      isFocused: props.isFocused,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    },
+    { resolveResponsively: ['space', 'direction'] }
+  );
+
+  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  return (
+    <Box
+      flexDirection={dir}
+      {...resolvedProps}
+      ref={ref}
+      // @ts-ignore
+      gap={disableCSSMediaQueries ? undefined : size}
+    >
+      {getSpacedChildren(
+        children,
+        size,
+        direction === 'row' ? 'X' : 'Y',
+        reversed ? 'reverse' : 'normal',
+        divider
+      )}
+    </Box>
+  );
+};
+
+export default memo(forwardRef(Stack));

package/src/components/primitives/Stack/VStack.tsx

@@ -0,0 +1,27 @@
+import React, { memo, forwardRef } from 'react';
+import StackMain, { InterfaceStackProps } from './Stack';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { CustomProps, ResponsiveValue } from '../../types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+export interface InterfaceVStackProps extends InterfaceStackProps {
+  /**
+   * The direction of the Stack Items.
+   * @default column
+   */
+  direction?: ResponsiveValue<
+    'column' | 'row' | 'column-reverse' | 'row-reverse'
+  >;
+}
+
+export type IVStackProps = InterfaceVStackProps & CustomProps<'VStack'>;
+
+const VStack = (props: IVStackProps, ref?: any) => {
+  const resolvedProps = usePropsResolution('VStack', props);
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return <StackMain ref={ref} {...resolvedProps} />;
+};
+
+export default memo(forwardRef(VStack));

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

@@ -0,0 +1,5 @@
+export { default as Stack } from './Stack';
+export { default as HStack } from './HStack';
+export { default as VStack } from './VStack';
+
+export type { IStackProps } from './Stack';

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

@@ -0,0 +1,99 @@
+import React, { memo, forwardRef } from 'react';
+import { useToggleState } from '@react-stately/toggle';
+import { Switch as RNSwitch } from 'react-native';
+import isNil from 'lodash.isnil';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { useToken } from '../../../hooks';
+import { makeStyledComponent } from '../../../utils/styled';
+import type { ISwitchProps } from './types';
+import { mergeRefs } from '../../../utils';
+import { useHover } from '@react-native-aria/interactions';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useFormControlContext } from '../../composites/FormControl';
+import { combineContextAndProps } from '../../../utils';
+
+const StyledNBSwitch = makeStyledComponent(RNSwitch);
+
+// TODO: Needs proper refactor
+const Switch = (
+  {
+    disabled,
+    isDisabled,
+    isInvalid,
+    isChecked,
+    defaultIsChecked,
+    accessibilityLabel,
+    accessibilityHint,
+    onToggle,
+    value,
+    onValueChange,
+    isHovered: isHoveredProp,
+    ...props
+  }: ISwitchProps,
+  ref: any
+) => {
+  const formControlContext = useFormControlContext();
+
+  const combinedProps = combineContextAndProps(formControlContext, props);
+
+  const state = useToggleState({
+    defaultSelected: !isNil(defaultIsChecked) ? defaultIsChecked : false,
+  });
+  const checked = !isNil(isChecked) ? isChecked : state.isSelected;
+  const _ref = React.useRef(null);
+  const { isHovered } = useHover({}, _ref);
+
+  const {
+    onTrackColor: _onTrackColor,
+    offTrackColor: _offTrackColor,
+    onThumbColor: _onThumbColor,
+    offThumbColor: _offThumbColor,
+    ...resolvedProps
+  } = usePropsResolution('Switch', props, {
+    isHovered: isHoveredProp || isHovered,
+    isDisabled: disabled || isDisabled || combinedProps.isDisabled,
+    isInvalid: isInvalid || combinedProps.isInvalid,
+    isChecked: checked,
+  });
+
+  const onTrackColor = useToken('colors', _onTrackColor);
+  const offTrackColor = useToken('colors', _offTrackColor);
+  const onThumbColor = useToken('colors', _onThumbColor);
+  const offThumbColor = useToken('colors', _offThumbColor);
+
+  //TODO: refactor for responsive prop
+  if (
+    useHasResponsiveProps({
+      ...props,
+      isDisabled,
+      isInvalid,
+      isChecked,
+      defaultIsChecked,
+      accessibilityLabel,
+      accessibilityHint,
+    })
+  ) {
+    return null;
+  }
+  return (
+    <StyledNBSwitch
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      trackColor={{ false: offTrackColor, true: onTrackColor }}
+      thumbColor={checked ? onThumbColor : offThumbColor}
+      activeThumbColor={onThumbColor} // react-native-web prop for active thumbColor
+      ios_backgroundColor={offTrackColor}
+      {...resolvedProps}
+      disabled={disabled || isDisabled || combinedProps.isDisabled}
+      onValueChange={(val: boolean) => {
+        onValueChange && onValueChange(val);
+        onToggle ? onToggle(val) : state.toggle();
+      }}
+      value={value || checked}
+      ref={mergeRefs([ref, _ref])}
+    />
+  );
+};
+
+export default memo(forwardRef(Switch));
+export type { ISwitchProps };

package/src/components/primitives/Switch/test/switch.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { NativeBaseProvider } from '../../../../core/NativeBaseProvider';
+
+import Switch from '../index';
+
+jest.useFakeTimers();
+describe('Switch', () => {
+  it('can be default checked', () => {
+    let { getAllByRole } = render(
+      <NativeBaseProvider
+        initialWindowMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <Switch defaultIsChecked />
+      </NativeBaseProvider>
+    );
+    let switches = getAllByRole('switch');
+    expect(switches[0].props.value).toBe(true);
+  });
+
+  it('can be disabled', () => {
+    let { getAllByRole } = render(
+      <NativeBaseProvider
+        initialWindowMetrics={{
+          frame: { x: 0, y: 0, width: 0, height: 0 },
+          insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        }}
+      >
+        <Switch isDisabled />
+      </NativeBaseProvider>
+    );
+    let switches = getAllByRole('switch');
+    expect(switches[0].props.disabled).toBe(true);
+  });
+});

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

@@ -0,0 +1,73 @@
+import type { SwitchProps } from 'react-native';
+import type {
+  CustomProps,
+  ThemeComponentSizeType,
+  ResponsiveValue,
+} from '../../../components/types';
+import type { IColors } from '../../../theme/base/colors';
+import type { InterfaceBoxProps } from '../Box';
+import type { ColorSchemeType } from '../../../components/types';
+
+export interface InterfaceSwitchProps
+  extends Omit<SwitchProps, 'tintColor'>,
+    InterfaceBoxProps<ISwitchProps> {
+  /**
+   * The size (width and height) of the switch.
+   * @default md
+   */
+  size?: ThemeComponentSizeType<'Switch'>;
+  /**
+   * If true, set the disabled to the invalid state.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, set the hovered state.
+   */
+  isHovered?: boolean;
+  /**
+   * The input name of the Switch when used in a form.
+   */
+  name?: string;
+  /**
+   * Function called when the state of the Switch changes.
+   */
+  onToggle?: (...args: any) => void;
+  /**
+   * If true, set the Switch to the checked state.
+   */
+  isChecked?: boolean;
+  /**
+   * If true, the checkbox will be initially checked.
+   */
+  defaultIsChecked?: boolean;
+  /**
+   * If true, set the switch to the invalid state.
+   */
+  isInvalid?: boolean;
+  /**
+   * The track color of the Switch when on.
+   */
+  onTrackColor?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * The track color of the Switch when off.
+   */
+  offTrackColor?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * The thumb color of the Switch when on.
+   */
+  onThumbColor?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * The thumb color of the Switch when off.
+   */
+  offThumbColor?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   * Color scheme to be used for the Switch
+   */
+  colorScheme?: ColorSchemeType;
+  /**
+   * Props when Switch is hovered. Accepts all the Switch props.
+   */
+  _hover?: Omit<Partial<ISwitchProps>, '_hover'>;
+}
+
+export type ISwitchProps = InterfaceSwitchProps & CustomProps<'Switch'>;