@digigov/react-core 2.0.0-rc.17 → 2.0.0-rc.18

package/src/Base/compat/Input/StringInput.native.tsx

@@ -0,0 +1,115 @@
+import React, {
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useEffect,
+  useMemo,
+} from 'react';
+import { TextInput } from 'react-native';
+
+export interface StringInputProps
+  extends Omit<
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    'ref'
+  > {
+  'data-type'?: string;
+  multiline?: boolean;
+  rows?: number;
+}
+
+export const StringInput = React.forwardRef<HTMLInputElement, StringInputProps>(
+  function StringInput(
+    {
+      'data-type': dataType,
+      onChange,
+      onBlur,
+      onFocus,
+      value,
+      maxLength,
+      multiline,
+      rows,
+      disabled,
+      ...props
+    }: StringInputProps,
+    ref
+  ) {
+    const [currentValue, setValue] = React.useState(value);
+
+    const keyboardType = useMemo(() => {
+      switch (dataType) {
+        case 'afm':
+          return 'number-pad';
+        case 'phone_number':
+          return 'phone-pad';
+        case 'mobile_phone':
+          return 'phone-pad';
+        case 'postal_code':
+          return 'number-pad';
+        case 'int':
+          return 'numeric';
+        case 'email':
+          return 'email-address';
+        default:
+          return 'default';
+      }
+    }, [dataType]);
+
+    useEffect(() => {
+      if (currentValue !== value) {
+        handleChange();
+      }
+    }, [currentValue]);
+    useEffect(() => {
+      if (currentValue !== value) {
+        setValue(value);
+      }
+    }, [value]);
+
+    const handleChange = () => {
+      if (onChange) {
+        const syntheticEvent = {
+          target: {
+            value: currentValue,
+          },
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(syntheticEvent);
+      }
+    };
+
+    const handleBlur = () => {
+      if (onBlur) {
+        const syntheticEvent = {
+          target: {
+            value: currentValue,
+          },
+        } as React.FocusEvent<HTMLInputElement>;
+        onBlur(syntheticEvent);
+      }
+    };
+
+    const handleFocus = () => {
+      if (onFocus) {
+        const syntheticEvent = {
+          target: {
+            value: currentValue,
+          },
+        } as React.FocusEvent<HTMLInputElement>;
+        onFocus(syntheticEvent);
+      }
+    };
+    return (
+      <TextInput
+        ref={ref}
+        onChangeText={setValue}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        value={currentValue}
+        multiline={multiline}
+        rows={rows}
+        editable={!disabled}
+        maxLength={Number(maxLength) || undefined}
+        keyboardType={keyboardType}
+        {...(props as any)}
+      />
+    );
+  }
+);

package/src/Base/compat/Input/index.native.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import CheckboxInput, {
+  CheckboxInputProps,
+} from '@digigov/react-core/Base/compat/Input/CheckboxInput.native';
+import RadioInput, {
+  RadioInputProps,
+} from '@digigov/react-core/Base/compat/Input/RadioInput.native';
+import {
+  StringInput,
+  StringInputProps,
+} from '@digigov/react-core/Base/compat/Input/StringInput.native';
+
+type InputProps = RadioInputProps | CheckboxInputProps | StringInputProps;
+
+export const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(
+  function BaseInput(props, ref) {
+    switch (props.type) {
+      case 'radio':
+        return <RadioInput ref={ref} {...props} />;
+      case 'checkbox':
+        return <CheckboxInput ref={ref} {...props} />;
+      default:
+        return <StringInput ref={ref} {...props} />;
+    }
+  }
+);
+
+export default BaseInput;

package/src/Base/compat/button.native.tsx

@@ -0,0 +1,53 @@
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  useContext,
+} from 'react';
+import { Pressable } from 'react-native';
+// @ts-expect-error - `@digigov/form` is to be removed as a dependency
+import { FormContext } from '@digigov/form/FormContext';
+
+// TODO: Fix `ButtonProps` type
+export type ButtonProps = Omit<
+  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'ref'
+>;
+
+export const FormButton = React.forwardRef<unknown, ButtonProps>(
+  function FormButton({ onClick, ...props }, ref) {
+    const formContext = useContext(FormContext);
+    return (
+      <CompatButton
+        ref={ref}
+        {...props}
+        onClick={() => {
+          onClick && onClick({} as React.MouseEvent<HTMLButtonElement>);
+          if (props.type) formContext?.[props.type]();
+        }}
+      />
+    );
+  }
+);
+
+// TODO: Fix `ref` type
+export const CompatButton = React.forwardRef<unknown, ButtonProps>(
+  function CompatButton({ onClick, ...props }, ref) {
+    return (
+      <Pressable
+        onPress={onClick as any}
+        ref={ref as any}
+        hitSlop={10}
+        {...(props as any)}
+      />
+    );
+  }
+);
+
+export const Button = React.forwardRef<unknown, ButtonProps>(
+  function Button(props, ref) {
+    if (props.type && ['submit', 'reset'].includes(props.type)) {
+      return <FormButton ref={ref} {...props} />;
+    }
+    return <CompatButton ref={ref} {...props} />;
+  }
+);

package/src/Base/compat/details.native.tsx

@@ -0,0 +1,68 @@
+import React, {
+  useEffect,
+  useState,
+  Children,
+  DetailedHTMLProps,
+  DetailsHTMLAttributes,
+} from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+type HTMLElementProps = Omit<
+  DetailedHTMLProps<
+    DetailsHTMLAttributes<HTMLDetailsElement>,
+    HTMLDetailsElement
+  >,
+  'ref'
+> & {
+  closeIcon?: string;
+  openIcon?: string;
+  placement?: 'before' | 'after';
+};
+
+const CompatDetails = ({
+  children,
+  open = false,
+  placement,
+  closeIcon,
+  openIcon,
+  ...props
+}: HTMLElementProps) => {
+  const [isExpanded, setIsExpanded] = useState(open);
+
+  useEffect(() => {
+    setIsExpanded(open);
+  }, [open]);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const [summaryContent, ...detailsContent] = Children.toArray(children);
+
+  const toggleIcon =
+    closeIcon && openIcon ? (
+      <Text>{isExpanded ? openIcon : closeIcon}</Text>
+    ) : null;
+
+  return (
+    // TODO: Fix `props` type
+    // @ts-expect-error - `props` type is not compatible with `View` props
+    <View {...props}>
+      <TouchableOpacity onPress={toggleExpand} style={styles.summaryContainer}>
+        {placement === 'before' && toggleIcon}
+        {summaryContent}
+        {placement === 'after' && toggleIcon}
+      </TouchableOpacity>
+      {isExpanded && <View>{detailsContent}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  summaryContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default CompatDetails;

package/src/Base/compat/li.native.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+
+// TODO: Fix `props` type
+interface LiProps {
+  [key: string]: any;
+}
+
+export const Li = (props: LiProps) => {
+  return <View {...props} />;
+};

package/src/Base/compat/ol.native.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+export const Ol = ({ children, className, ...props }) => {
+  let listStyle = 'none';
+  if (className.includes('ds-list--bullet')) {
+    listStyle = 'bullet';
+  }
+  if (className.includes('ds-list--number')) {
+    listStyle = 'number';
+  }
+  return (
+    <View {...props} className={className}>
+      {Array.isArray(children)
+        ? children.map((child, index) => {
+            const counter =
+              listStyle === 'number'
+                ? index + 1
+                : listStyle === 'bullet'
+                  ? '•'
+                  : null;
+            return (
+              <View
+                key={index}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  flexWrap: 'nowrap',
+                  gap: 8,
+                  width: '100%',
+                }}
+              >
+                <Text>{counter}</Text>
+                {child}
+              </View>
+            );
+          })
+        : children}
+    </View>
+  );
+};

package/src/Base/index.native.tsx

@@ -0,0 +1,185 @@
+import React, { useMemo } from 'react';
+import { Text, View, ViewProps } from 'react-native';
+import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
+import { mapping } from '@digigov/react-core/Base/mapping.native';
+import { basePropGenerator } from '@digigov/react-core/Base/utils';
+import { wrap } from '@digigov/react-core/Base/wrap.native';
+
+export type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &
+  ViewProps;
+export type BaseComponent = <C extends React.ElementType = 'span'>(
+  props: BaseProps<C>
+) => React.ReactNode | null;
+
+const BooleanMapper = {
+  true: true,
+  false: false,
+  undefined: false,
+  null: false,
+  '': false,
+};
+export const Base: BaseComponent = React.forwardRef(function Base<
+  C extends React.ElementType = 'span',
+>(
+  {
+    as,
+    display,
+    children,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+    className,
+    'aria-expanded': ariaExpanded,
+    ...props
+  }: BaseProps<C>,
+  ref: React.ComponentPropsWithRef<C>['ref']
+) {
+  const classNames = className?.split(' ') || [];
+  if (typeof children === 'string') {
+    children = [children];
+  }
+  if (Array.isArray(children)) {
+    const textClassNames = classNames
+      ?.map((className) => `${className}__text`)
+      .join(' ');
+    children = children.map((child, index) => {
+      if (Array.isArray(child)) {
+        return child.map((child, index) => {
+          if (typeof child === 'string') {
+            return (
+              <Text key={index} className={textClassNames}>
+                {child}
+              </Text>
+            );
+          }
+          return child;
+        });
+      } else if (typeof child === 'string') {
+        return (
+          <Text
+            key={index}
+            className={textClassNames}
+            {...(props.onClick && {
+              onPress: props.onClick,
+            })}
+          >
+            {child}
+          </Text>
+        );
+      }
+      return child;
+    });
+  }
+  const Component = useMemo(() => {
+    const C = mapping[as as keyof JSX.IntrinsicElements] || View;
+    if (
+      classNames.find((className) =>
+        className.match(/__wrapper|__before|__after$/)
+      )
+    ) {
+      return wrap(C);
+    }
+    return C;
+  }, [className]);
+
+  Object.keys(props).forEach((k) => {
+    if (k.startsWith('aria')) {
+      if (BooleanMapper[props[k as keyof typeof props]] !== undefined) {
+        props[k as keyof typeof props] =
+          BooleanMapper[props[k as keyof typeof props]];
+      }
+    }
+  });
+  return (
+    <Component
+      {...props}
+      ref={ref}
+      aria-expanded={
+        (ariaExpanded as unknown as string) === 'false'
+          ? false
+          : ariaExpanded === true
+            ? true
+            : undefined
+      }
+      className={basePropGenerator({
+        display,
+        margin,
+        marginTop,
+        marginBottom,
+        marginLeft,
+        marginRight,
+        m,
+        mt,
+        mb,
+        ml,
+        mr,
+        mx,
+        my,
+        padding,
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight,
+        p,
+        pt,
+        pb,
+        pr,
+        pl,
+        px,
+        py,
+        printHidden,
+        printVisible,
+        hidden,
+        xsUpHidden,
+        smUpHidden,
+        mdUpHidden,
+        lgUpHidden,
+        xlUpHidden,
+        xsHidden,
+        smHidden,
+        mdHidden,
+        lgHidden,
+        xlHidden,
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default Base;