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

package/src/components/primitives/Icon/Icons/ThreeDots.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { G, Path } from '../nbSvg';
+
+export const ThreeDotsIcon = createIcon({
+  viewBox: '0 0 32.055 32.055',
+  path: [
+    <G>
+      <Path d="M3.968,12.061C1.775,12.061,0,13.835,0,16.027c0,2.192,1.773,3.967,3.968,3.967c2.189,0,3.966-1.772,3.966-3.967   C7.934,13.835,6.157,12.061,3.968,12.061z M16.233,12.061c-2.188,0-3.968,1.773-3.968,3.965c0,2.192,1.778,3.967,3.968,3.967   s3.97-1.772,3.97-3.967C20.201,13.835,18.423,12.061,16.233,12.061z M28.09,12.061c-2.192,0-3.969,1.774-3.969,3.967   c0,2.19,1.774,3.965,3.969,3.965c2.188,0,3.965-1.772,3.965-3.965S30.278,12.061,28.09,12.061z" />
+    </G>,
+  ],
+});

package/src/components/primitives/Icon/Icons/Warning.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createIcon } from '../createIcon';
+import { G, Path } from '../nbSvg';
+
+export const WarningIcon = createIcon({
+  viewBox: '0 0 24 24',
+  d:
+    'M11.9836 0.00267822C8.77744 0.0551662 5.72075 1.36728 3.47427 3.65538C2.35024 4.77447 1.46338 6.10869 0.866705 7.57831C0.270027 9.04793 -0.0242179 10.6228 0.00155827 12.2087C-0.000286057 13.7583 0.303697 15.2931 0.896087 16.7251C1.48848 18.1571 2.35763 19.458 3.45373 20.5535C4.54983 21.6489 5.85133 22.5173 7.28365 23.1089C8.71596 23.7004 10.2509 24.0035 11.8006 24.0007H12.0146C15.2217 23.9677 18.2847 22.6638 20.5316 20.3751C22.7785 18.0864 24.0257 14.9999 23.9996 11.7927C24.0033 10.2243 23.6933 8.6709 23.0879 7.22398C22.4825 5.77706 21.5939 4.4658 20.4744 3.36731C19.3548 2.26882 18.0269 1.40527 16.5688 0.827453C15.1106 0.249636 13.5517 -0.0307856 11.9836 0.00267822ZM10.5007 16.5433C10.4935 16.3473 10.5254 16.1517 10.5947 15.9682C10.6639 15.7846 10.7691 15.6167 10.904 15.4742C11.0389 15.3318 11.2009 15.2177 11.3804 15.1386C11.5599 15.0594 11.7534 15.0169 11.9496 15.0135H11.9766C12.3712 15.0142 12.7501 15.1677 13.034 15.4417C13.3179 15.7157 13.4847 16.089 13.4995 16.4833C13.5068 16.6794 13.4749 16.875 13.4057 17.0586C13.3365 17.2423 13.2314 17.4102 13.0965 17.5527C12.9615 17.6952 12.7995 17.8093 12.6199 17.8884C12.4403 17.9674 12.2468 18.0099 12.0506 18.0132H12.0236C11.6291 18.0119 11.2505 17.8583 10.9667 17.5844C10.6829 17.3105 10.5159 16.9375 10.5007 16.5433ZM11.0007 12.5017V6.50215C11.0007 6.23695 11.106 5.98262 11.2935 5.7951C11.481 5.60758 11.7354 5.50223 12.0006 5.50223C12.2658 5.50223 12.5201 5.60758 12.7076 5.7951C12.8951 5.98262 13.0005 6.23695 13.0005 6.50215V12.5017C13.0005 12.7669 12.8951 13.0212 12.7076 13.2087C12.5201 13.3962 12.2658 13.5016 12.0006 13.5016C11.7354 13.5016 11.481 13.3962 11.2935 13.2087C11.106 13.0212 11.0007 12.7669 11.0007 12.5017Z',
+});
+
+export const WarningTwoIcon = createIcon({
+  viewBox: '0 0 24 24',
+  path: (
+    <G>
+      <Path
+        d="M13.9193 18.4271C13.8992 17.9392 13.6816 17.4813 13.3178 17.1478C12.9545 16.8148 12.4731 16.631 11.975 16.6304H11.9746H11.945V16.6304L11.9392 16.6305C11.6898 16.6348 11.4434 16.6864 11.2142 16.7827L11.333 17.0655L11.2142 16.7827C10.9851 16.879 10.7773 17.0183 10.6035 17.1931C10.4296 17.368 10.2932 17.5751 10.2031 17.8026C10.113 18.0302 10.0712 18.2732 10.0806 18.5171L10.0807 18.5176C10.1001 19.0055 10.3169 19.4638 10.6802 19.7979C11.043 20.1315 11.5241 20.3162 12.0222 20.3177H12.0233H12.0529V20.3178L12.058 20.3177C12.3081 20.3138 12.5552 20.2624 12.785 20.1661C13.0148 20.0698 13.2232 19.9303 13.3974 19.7549C13.5716 19.5795 13.7081 19.3718 13.7981 19.1436C13.8881 18.9153 13.9295 18.6716 13.9193 18.4271ZM13.9193 18.4271L13.5863 18.4408M13.9193 18.4271C13.9193 18.4271 13.9193 18.4271 13.9193 18.427L13.5863 18.4408M13.5863 18.4408C13.5945 18.6386 13.5611 18.836 13.488 19.0213C13.415 19.2066 13.3037 19.3762 13.1609 19.52C13.018 19.6638 12.8464 19.779 12.6561 19.8587C12.4658 19.9385 12.2607 19.9812 12.0529 19.9844H12.0233C11.6062 19.9831 11.2058 19.8284 10.9059 19.5525C10.6059 19.2767 10.4296 18.9011 10.4137 18.5043C10.4061 18.3069 10.4399 18.1101 10.513 17.9254C10.5862 17.7406 10.6973 17.5715 10.8399 17.4281C10.9824 17.2847 11.1536 17.1698 11.3434 17.09C11.5331 17.0103 11.7376 16.9674 11.945 16.9638H11.9746C12.3916 16.9642 12.7922 17.1182 13.0926 17.3936C13.393 17.6689 13.5699 18.0442 13.5863 18.4408ZM23.4665 20.2125L23.4665 20.2125C23.6068 20.4676 23.6751 20.7517 23.6658 21.0376C23.6566 21.3234 23.57 21.6033 23.4131 21.8501C23.2562 22.097 23.0337 22.3031 22.7658 22.4469C22.4978 22.5907 22.1942 22.6667 21.8847 22.6667H21.8846H2.11538H2.11533C1.80576 22.6667 1.50222 22.5907 1.23422 22.4469C0.96631 22.3031 0.743845 22.097 0.586879 21.8501L0.305565 22.0289L0.586879 21.8501C0.429998 21.6033 0.343434 21.3234 0.334166 21.0376C0.324898 20.7517 0.393165 20.4676 0.533517 20.2125L0.53353 20.2125L10.4192 2.23977C10.5681 1.96911 10.7933 1.74021 11.0721 1.5796C11.3511 1.41893 11.6722 1.33333 12.0005 1.33333C12.3289 1.33333 12.65 1.41893 12.9289 1.5796C13.2078 1.74021 13.4329 1.96911 13.5819 2.23977L23.4665 20.2125ZM11.0224 7.44182C10.7599 7.69176 10.6091 8.03434 10.6091 8.39521V14.4365C10.6091 14.7974 10.7599 15.1399 11.0224 15.3899C11.2843 15.6393 11.6363 15.7767 12 15.7767C12.3637 15.7767 12.7157 15.6393 12.9776 15.3899C13.2401 15.1399 13.3909 14.7974 13.3909 14.4365V8.39521C13.3909 8.03434 13.2401 7.69176 12.9776 7.44182C12.7157 7.19242 12.3637 7.05499 12 7.05499C11.6363 7.05499 11.2843 7.19242 11.0224 7.44182Z"
+        stroke="currentColor"
+        strokeWidth="0.666667"
+      />
+    </G>
+  ),
+});

package/src/components/primitives/Icon/Icons/WarningOutline.tsx

@@ -0,0 +1,7 @@
+import { createIcon } from '../createIcon';
+
+export const WarningOutlineIcon = createIcon({
+  viewBox: '0 0 16 16',
+  d:
+    'M8 16C6.41775 16 4.87103 15.5308 3.55544 14.6518C2.23985 13.7727 1.21447 12.5233 0.608967 11.0615C0.00346627 9.59966 -0.15496 7.99113 0.153721 6.43928C0.462403 4.88743 1.22433 3.46197 2.34315 2.34315C3.46197 1.22433 4.88743 0.462403 6.43928 0.153721C7.99113 -0.15496 9.59966 0.00346627 11.0615 0.608967C12.5233 1.21447 13.7727 2.23985 14.6518 3.55544C15.5308 4.87103 16 6.41775 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16ZM8 14.4C9.2658 14.4 10.5032 14.0246 11.5556 13.3214C12.6081 12.6182 13.4284 11.6186 13.9128 10.4492C14.3972 9.27973 14.524 7.9929 14.277 6.75142C14.0301 5.50995 13.4205 4.36958 12.5255 3.47452C11.6304 2.57946 10.4901 1.96992 9.24858 1.72298C8.0071 1.47603 6.72028 1.60277 5.55083 2.08717C4.38138 2.57158 3.38184 3.39188 2.6786 4.44435C1.97536 5.49683 1.6 6.7342 1.6 8C1.6 9.69739 2.27429 11.3253 3.47452 12.5255C4.67475 13.7257 6.30262 14.4 8 14.4ZM7.2 10.4H8.8V12H7.2V10.4ZM7.2 4H8.8V8.8H7.2V4Z',
+});

package/src/components/primitives/Icon/Icons/index.tsx

@@ -0,0 +1,20 @@
+export * from './Add';
+export * from './Arrow';
+export * from './Check';
+export * from './Chevron';
+export * from './Circle';
+export * from './Close';
+export * from './Hamburger';
+export * from './Info';
+export * from './Minus';
+export * from './Moon';
+export * from './Question';
+export * from './Search';
+export * from './Sun';
+export * from './Warning';
+export * from './WarningOutline';
+export * from './ThreeDots';
+export * from './Share';
+export * from './Play';
+export * from './Delete';
+export * from './Favourite';

package/src/components/primitives/Icon/Icons/questionIconPath.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { G, Path } from '../nbSvg';
+
+export const questionOutlineIconPath = (
+  <G>
+    <Path d="M12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75ZM12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2C9.34784 2 6.8043 3.05357 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C6.8043 20.9464 9.34784 22 12 22Z" />
+    <Path d="M8.70533 9.34281C8.70369 9.38156 8.70999 9.42024 8.72385 9.45647C8.73771 9.4927 8.75883 9.52571 8.78592 9.55347C8.81301 9.58123 8.84549 9.60316 8.88136 9.6179C8.91724 9.63265 8.95575 9.6399 8.99453 9.63921H9.98453C10.1501 9.63921 10.2821 9.50361 10.3037 9.33921C10.4117 8.55201 10.9517 7.97841 11.9141 7.97841C12.7373 7.97841 13.4909 8.39001 13.4909 9.38001C13.4909 10.142 13.0421 10.4924 12.3329 11.0252C11.5253 11.612 10.8857 12.2972 10.9313 13.4096L10.9349 13.67C10.9362 13.7487 10.9684 13.8238 11.0245 13.879C11.0806 13.9343 11.1562 13.9652 11.2349 13.9652H12.2081C12.2877 13.9652 12.364 13.9336 12.4203 13.8773C12.4765 13.8211 12.5081 13.7448 12.5081 13.6652V13.5392C12.5081 12.6776 12.8357 12.4268 13.7201 11.756C14.4509 11.2004 15.2129 10.5836 15.2129 9.28881C15.2129 7.47561 13.6817 6.59961 12.0053 6.59961C10.4849 6.59961 8.81933 7.30761 8.70533 9.34281ZM10.5737 16.2584C10.5737 16.898 11.0837 17.3708 11.7857 17.3708C12.5165 17.3708 13.0193 16.898 13.0193 16.2584C13.0193 15.596 12.5153 15.1304 11.7845 15.1304C11.0837 15.1304 10.5737 15.596 10.5737 16.2584Z" />
+  </G>
+);

package/src/components/primitives/Icon/SVGIcon.tsx

@@ -0,0 +1,75 @@
+import React, { memo, forwardRef } from 'react';
+import { useToken, usePropsResolution } from '../../../hooks';
+import { makeStyledComponent } from '../../../utils/styled';
+import { Svg, G } from './nbSvg';
+import type { IIconProps } from './types';
+import { questionOutlineIconPath } from './Icons/questionIconPath';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+
+const SVG = makeStyledComponent(Svg);
+
+const SVGIcon = ({ children, ...props }: IIconProps, ref: any) => {
+  const {
+    focusable,
+    stroke,
+    color,
+    size,
+    ...resolvedProps
+  } = usePropsResolution('Icon', props);
+  const strokeHex = useToken('colors', stroke || '');
+  const colorHex = useToken('colors', color || '');
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+  return (
+    <SVG
+      {...resolvedProps}
+      // height={
+      //   newProps.size
+      //     ? parseInt(newProps.size, 10)
+      //     : parseInt(newProps.height, 10)
+      // }
+      // width={
+      //   newProps.size
+      //     ? parseInt(newProps.size, 10)
+      //     : parseInt(newProps.width, 10)
+      // }
+      size={size}
+      color={colorHex}
+      stroke={strokeHex}
+      focusable={focusable}
+      accessibilityRole="image"
+      // style={style}
+      ref={ref}
+    >
+      {React.Children.count(children) > 0 ? (
+        <G>
+          {React.Children.map(children, (child, i) => (
+            <ChildPath
+              key={child?.key ?? i}
+              element={child}
+              {...child?.props}
+            />
+          ))}
+        </G>
+      ) : (
+        questionOutlineIconPath
+      )}
+    </SVG>
+  );
+};
+const ChildPath = ({ element, fill, stroke: pathStroke }: any) => {
+  const pathStrokeColor = useToken('colors', pathStroke || '');
+  const fillColor = useToken('colors', fill || '');
+
+  if (!element) {
+    return null;
+  }
+
+  return React.cloneElement(element, {
+    fill: fillColor ? fillColor : 'currentColor',
+    stroke: pathStrokeColor,
+  });
+};
+export default memo(forwardRef(SVGIcon));

package/src/components/primitives/Icon/createIcon.tsx

@@ -0,0 +1,18 @@
+import React, { memo, forwardRef } from 'react';
+import SVGIcon from './SVGIcon';
+import { Path } from './nbSvg';
+import type { IcreateIconProps } from './types';
+import isEmpty from 'lodash.isempty';
+
+export const createIcon = ({ path, d, ...initialProps }: IcreateIconProps) => {
+  const createdIcon = (props: any, ref: any) => {
+    let children = path;
+    if (d && (!path || isEmpty(path))) {
+      children = <Path fill="currentColor" d={d} />;
+    }
+    return (
+      <SVGIcon children={children} {...initialProps} {...props} ref={ref} />
+    );
+  };
+  return memo(forwardRef(createdIcon));
+};

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

@@ -0,0 +1,3 @@
+export { default as Icon } from './Icon';
+export { createIcon } from './createIcon';
+export type { IIconProps } from './types';

package/src/components/primitives/Icon/nbSvg.tsx

@@ -0,0 +1 @@
+export { Svg, G, Path, Polygon, Line, Circle, Rect } from 'react-native-svg';

package/src/components/primitives/Icon/nbSvg.web.tsx

@@ -0,0 +1,25 @@
+//@ts-ignore
+import { unstable_createElement } from 'react-native-web';
+import { forwardRef } from 'react';
+
+export const Svg = forwardRef((props: any, ref: any) =>
+  unstable_createElement('svg', { ...props, ref })
+);
+export const G = forwardRef((props: any, ref: any) =>
+  unstable_createElement('g', { ...props, ref })
+);
+export const Path = forwardRef((props: any, ref: any) =>
+  unstable_createElement('path', { ...props, ref })
+);
+export const Polygon = forwardRef((props: any, ref: any) =>
+  unstable_createElement('polygon', { ...props, ref })
+);
+export const Line = forwardRef((props: any, ref: any) =>
+  unstable_createElement('line', { ...props, ref })
+);
+export const Circle = forwardRef((props: any, ref: any) =>
+  unstable_createElement('circle', { ...props, ref })
+);
+export const Rect = forwardRef((props: any, ref: any) =>
+  unstable_createElement('rect', { ...props, ref })
+);

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

@@ -0,0 +1,73 @@
+import type { PlatformProps } from '../../types';
+import type { StyledProps } from '../../../theme/types';
+import type { ResponsiveValue } from '../../types/responsiveValue';
+import type { SvgProps } from 'react-native-svg';
+import type { IColors } from '../../../theme/base/colors';
+
+import type { CustomProps, ThemeComponentSizeType } from '../../types/utils';
+
+export interface InterfaceIconProps
+  extends Omit<
+      SvgProps,
+      'opacity' | 'stroke' | 'height' | 'width' | 'transform' | 'color'
+    >,
+    StyledProps,
+    PlatformProps<IIconProps> {
+  // name?: IconNameType;
+  // type?: IconType;
+  /**
+   * Use <a href='https://github.com/expo/vector-icons'>@expo/vector-icons</a>
+   */
+  as?: any;
+  /**
+   * The viewBox of the icon.
+   */
+  // viewBox?: string;
+  /**
+   * The size of the icon.
+   */
+  size?: ThemeComponentSizeType<'Icon'>;
+
+  /**
+   * The color of the icon.
+   */
+  // color?: string;
+  color?: ResponsiveValue<IColors | (string & {})>;
+  /**
+   *
+   */
+  // focusable?: boolean;
+  /**
+   *
+   */
+  children?: JSX.Element[] | JSX.Element;
+  /**
+   *
+   */
+  name?: string;
+  /**
+   *
+   */
+  // stroke?: string;
+  /**
+   *
+   */
+  // strokeWidth?: string;
+}
+
+export interface IcreateIconProps {
+  /**
+   * The viewBox of the icon.
+   */
+  viewBox?: string;
+  /**
+   * Path element of the icon.
+   */
+  path?: JSX.Element[] | JSX.Element;
+  /**
+   * The path of the SVG icon.
+   */
+  d?: string;
+}
+
+export type IIconProps = InterfaceIconProps & CustomProps<'Icon'>;

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

@@ -0,0 +1,113 @@
+import React, { useState, memo, forwardRef, useCallback, useRef } from 'react';
+import { Image as RNImage } from 'react-native';
+import Text from '../Text';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import type { IImageProps } from './types';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { makeStyledComponent } from '../../../utils/styled';
+
+const StyledImage = makeStyledComponent(RNImage);
+
+const Image = memo(
+  forwardRef((props: IImageProps, ref: any) => {
+    const {
+      source,
+      src,
+      fallbackElement,
+      alt,
+      fallbackSource,
+      ignoreFallback,
+      _alt,
+      ...resolvedProps
+    } = usePropsResolution('Image', props);
+
+    const finalSource: any = useRef(null);
+    const getSource = useCallback(() => {
+      if (source) {
+        finalSource.current = source;
+      } else if (src) {
+        finalSource.current = { uri: src };
+      }
+      return finalSource.current;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source?.uri, src]);
+
+    const [renderedSource, setSource] = useState(getSource());
+    const [alternate, setAlternate] = useState(false);
+    const [fallbackSourceFlag, setfallbackSourceFlag] = useState(true);
+
+    React.useEffect(() => {
+      setSource(getSource());
+      return () => {
+        finalSource.current = null;
+      };
+    }, [source?.uri, src, getSource]);
+
+    const onImageLoadError = useCallback(
+      (event: any) => {
+        props.onError && props.onError(event);
+        console.warn(event.nativeEvent.error);
+        if (
+          !ignoreFallback &&
+          fallbackSource &&
+          fallbackSource !== renderedSource &&
+          fallbackSourceFlag
+        ) {
+          setfallbackSourceFlag(false);
+          setSource(fallbackSource);
+        } else {
+          setAlternate(true);
+        }
+      },
+      [
+        fallbackSource,
+        fallbackSourceFlag,
+        ignoreFallback,
+        props,
+        renderedSource,
+      ]
+    );
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+
+    if (typeof alt !== 'string') {
+      console.warn('Please pass alt prop to Image component');
+    }
+
+    if (alternate) {
+      if (fallbackElement) {
+        if (React.isValidElement(fallbackElement)) {
+          return fallbackElement;
+        }
+      } else return <Text {..._alt}>{alt}</Text>;
+    }
+    return (
+      <StyledImage
+        source={renderedSource}
+        accessibilityLabel={alt}
+        alt={alt}
+        {...resolvedProps}
+        onError={onImageLoadError}
+        ref={ref}
+      />
+    );
+  })
+);
+
+interface ImageStatics {
+  getSize: typeof RNImage.prefetch;
+  prefetch: typeof RNImage.prefetch;
+  queryCache: typeof RNImage.queryCache;
+}
+const ImageWithStatics: typeof Image & ImageStatics = {
+  ...Image,
+  //@ts-ignore
+  getSize: RNImage.getSize,
+  prefetch: RNImage.prefetch,
+  queryCache: RNImage.queryCache,
+};
+
+export default ImageWithStatics;
+export type { IImageProps };

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

@@ -0,0 +1,50 @@
+import type { ImageProps, ImageSourcePropType } from 'react-native';
+import type { StyledProps } from '../../../theme/types';
+import type { ITextProps } from '../../primitives';
+import type { CustomProps, PlatformProps } from '../../types';
+
+export interface InterfaceImageProps
+  extends PlatformProps<IImageProps>,
+    Omit<
+      ImageProps,
+      | 'borderRadius'
+      | 'borderTopLeftRadius'
+      | 'borderTopRightRadius'
+      | 'borderBottomLeftRadius'
+      | 'borderBottomRightRadius'
+      | 'height'
+      | 'width'
+      | 'source'
+    >,
+    StyledProps {
+  /**
+   * specify a source for image.
+   */
+  source?: ImageSourcePropType;
+  /**
+   * The alt text that describes the image. This will be added as accessibilityLabel in android/iOS and alt on web.
+   */
+  alt?: string;
+  /**
+   * In the event of an error loading the src, specify a fallback source.
+   */
+  fallbackSource?: ImageSourcePropType;
+  /**
+   * Opt out of the fallbackSource logic and show alternative text.
+   */
+  ignoreFallback?: boolean;
+  /**
+   * Text styling for alt.
+   */
+  _alt?: Partial<ITextProps>;
+  /**
+   * In the event of an error loading the src, specify a fallback JSX Element.
+   */
+  fallbackElement?: JSX.Element | JSX.Element[];
+  /**
+   * specify a source for image.
+   */
+  src?: string;
+}
+
+export type IImageProps = InterfaceImageProps & CustomProps<'Image'>;

package/src/components/primitives/Input/Input.tsx

@@ -0,0 +1,183 @@
+import React, { memo, forwardRef } from 'react';
+import type { IInputProps } from './types';
+import { TextInput } from 'react-native';
+import { useToken } from '../../../hooks';
+import { useFormControl } from '../../composites/FormControl';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { useHover } from '@react-native-aria/interactions';
+import { extractInObject, stylingProps } from '../../../theme/tools/utils';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { mergeRefs, resolveStackStyleInput } from '../../../utils';
+import { Stack } from '../Stack';
+import { makeStyledComponent } from '../../../utils/styled';
+import { useResolvedFontFamily } from '../../../hooks/useResolvedFontFamily';
+
+const StyledInput = makeStyledComponent(TextInput);
+
+const Input = (
+  {
+    isHovered: isHoveredProp,
+    isFocused: isFocusedProp,
+    onKeyPress,
+    InputLeftElement,
+    InputRightElement,
+    leftElement,
+    rightElement,
+    ...props
+  }: IInputProps,
+  ref: any
+) => {
+  const inputProps = useFormControl({
+    isDisabled: props.isDisabled,
+    isInvalid: props.isInvalid,
+    isReadOnly: props.isReadOnly,
+    isRequired: props.isRequired,
+    nativeID: props.nativeID,
+  });
+  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 inputThemeProps = {
+    isDisabled: inputProps.disabled,
+    isInvalid: inputProps.accessibilityInvalid,
+    isReadOnly: inputProps.accessibilityReadOnly,
+    isRequired: inputProps.required,
+  };
+
+  const {
+    ariaLabel,
+    accessibilityLabel,
+    type,
+    isFullWidth,
+    isDisabled,
+    isReadOnly,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    placeholderTextColor,
+    selectionColor,
+    underlineColorAndroid,
+    onFocus,
+    onBlur,
+    wrapperRef,
+    _stack,
+    _input,
+
+    ...resolvedProps
+  } = usePropsResolution(
+    'Input',
+    {
+      ...inputThemeProps,
+      ...props,
+    },
+    {
+      isDisabled: inputThemeProps.isDisabled,
+      isHovered: isHoveredProp || isHovered,
+      isFocused: isFocusedProp || isFocused,
+      isInvalid: inputThemeProps.isInvalid,
+      isReadOnly: inputThemeProps.isReadOnly,
+    }
+  );
+
+  const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
+    ...stylingProps.margin,
+    ...stylingProps.border,
+    ...stylingProps.layout,
+    ...stylingProps.flexbox,
+    ...stylingProps.position,
+    ...stylingProps.background,
+    'shadow',
+    'opacity',
+  ]);
+
+  const resolvedFontFamily = useResolvedFontFamily({
+    fontFamily,
+    fontWeight: fontWeight ?? 400,
+    fontStyle: fontStyle ?? 'normal',
+  });
+  const resolvedPlaceholderTextColor = useToken('colors', placeholderTextColor);
+  const resolvedSelectionColor = useToken('colors', selectionColor);
+  const resolvedUnderlineColorAndroid = useToken(
+    'colors',
+    underlineColorAndroid
+  );
+
+  /**Converting into Hash Color Code */
+  //@ts-ignore
+  resolvedProps.focusOutlineColor = useToken(
+    'colors',
+    resolvedProps.focusOutlineColor
+  );
+  //@ts-ignore
+  resolvedProps.invalidOutlineColor = useToken(
+    'colors',
+    resolvedProps.invalidOutlineColor
+  );
+  //TODO: refactor for responsive prop
+  if (useHasResponsiveProps(props)) {
+    return null;
+  }
+
+  if (resolvedProps.focusOutlineColor && isFocused) {
+    layoutProps.borderColor = resolvedProps.focusOutlineColor;
+    _stack.style = resolveStackStyleInput(
+      props.variant,
+      resolvedProps.focusOutlineColor
+    );
+  }
+
+  if (resolvedProps.invalidOutlineColor && props.isInvalid) {
+    layoutProps.borderColor = resolvedProps.invalidOutlineColor;
+    _stack.style = resolveStackStyleInput(
+      props.variant,
+      resolvedProps.invalidOutlineColor
+    );
+  }
+
+  return (
+    <Stack
+      {..._stack}
+      {...layoutProps}
+      ref={mergeRefs([_ref, wrapperRef])}
+      isFocused={isFocused}
+    >
+      {InputLeftElement || leftElement ? InputLeftElement || leftElement : null}
+      <StyledInput
+        {...inputProps}
+        secureTextEntry={type === 'password'}
+        accessible
+        accessibilityLabel={ariaLabel || accessibilityLabel}
+        editable={isDisabled || isReadOnly ? false : true}
+        w={isFullWidth ? '100%' : undefined}
+        {...nonLayoutProps}
+        {...resolvedFontFamily}
+        placeholderTextColor={resolvedPlaceholderTextColor}
+        selectionColor={resolvedSelectionColor}
+        underlineColorAndroid={resolvedUnderlineColorAndroid}
+        onKeyPress={(e: any) => {
+          e.persist();
+          onKeyPress && onKeyPress(e);
+        }}
+        onFocus={(e: any) => {
+          handleFocus(true, onFocus ? () => onFocus(e) : () => {});
+        }}
+        onBlur={(e: any) => {
+          handleFocus(false, onBlur ? () => onBlur(e) : () => {});
+        }}
+        {..._input}
+        ref={mergeRefs([ref, _ref, wrapperRef])}
+      />
+      {InputRightElement || rightElement
+        ? InputRightElement || rightElement
+        : null}
+    </Stack>
+  );
+};
+
+export default memo(forwardRef(Input));

package/src/components/primitives/Input/InputAddons.tsx

@@ -0,0 +1,34 @@
+import React, { memo, forwardRef } from 'react';
+import { default as Box, IBoxProps } from '../Box';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { usePropsResolution } from '../../../hooks/useThemeProps/usePropsResolution';
+
+export const InputLeftAddon = memo(
+  //@r
+  forwardRef((props: IBoxProps, ref?: any) => {
+    const resolvedProps = usePropsResolution('InputLeftAddon', props);
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    return (
+      <Box {...resolvedProps} ref={ref}>
+        {props.children}
+      </Box>
+    );
+  })
+);
+export const InputRightAddon = memo(
+  forwardRef((props: IBoxProps, ref?: any) => {
+    const resolvedProps = usePropsResolution('InputRightAddon', props);
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
+    return (
+      <Box {...resolvedProps} ref={ref}>
+        {props.children}
+      </Box>
+    );
+  })
+);