@digigov/react-core 1.2.0-mobile → 1.2.0-mobile-1

package/src/Base/mapping.tsx

@@ -4,31 +4,20 @@ import BaseInput from "./compat/Input";
 import CompatDetails from "./compat/details";
 import Svg, { Path, Circle, Rect, G, Polygon } from "react-native-svg";
 import { Link } from "expo-router";
-import { FormContext } from '@digigov/form/FormContext';
 import {Li} from "./compat/li";
 import {Ol} from "./compat/ol";
+import { Button } from "./compat/button";
 export type MapProps<T extends keyof JSX.IntrinsicElements> =
   React.ComponentPropsWithoutRef<T>;
 export type MappingType = {
   [K in keyof JSX.IntrinsicElements]?: (props: MapProps<K>) => JSX.Element;
 };
 
-const Button = (props) => {
-  return <Pressable onPress={props.onClick} hitSlop={10} {...props} />;
-};
-const SubmitButton = (props) => {
-  const formContext = useContext(FormContext)
-  return <Button {...props} onClick={formContext?.submit} />;
-};
+
 export const mapping: MappingType = {
   a: Link,
   img: Image,
-  button: React.forwardRef(function CompatButton(props,ref) {
-    if(props.type === 'submit') {
-      return <SubmitButton ref={ref} {...props} />
-    }
-    return <Button ref={ref} {...props} />
-  }),
+  button: Button,
   input: BaseInput,
   textarea: React.forwardRef(function TextAreaInput(props,ref) {
     return <TextInput ref={ref} multiline={true} scrollEnabled={true} {...props} />

package/src/Base/{utils.ts → utils.tsx}

@@ -1,4 +1,6 @@
 import clsx from 'clsx';
+import React, { useContext, useMemo, useState } from 'react';
+import { View } from 'react-native';
 
 export const basePropGenerator = ({
   margin,
@@ -81,4 +83,64 @@ export const basePropGenerator = ({
   'ds-hidden-md': !!mdHidden,
   'ds-hidden-lg': !!lgHidden,
   'ds-hidden-xl': !!xlHidden,
-})
+})
+const WrapperContext = React.createContext((cls)=>{return cls});
+const Wrapper = ({children})=>{
+  const [className, setClassName] = useState('');
+  return <WrapperContext.Provider value={setClassName}>
+    <View className={className} focusable={false}>
+    {children}
+    </View>
+  </WrapperContext.Provider>
+}
+
+export const wrap = (Component) => {
+  // @ts-ignore
+  const WrappedComponent = React.forwardRef(({className, onBlur, onFocus, ...props}, ref)=>{
+    const setClassName = useContext(WrapperContext);
+    const wrapperClassNames: string[] = [];
+    const beforeClassNames: string[] = [];
+    const afterClassNames: string[] = [];
+    const focusedWrapperClassNames: string[] = []
+    const classNames = useMemo(() => (className?.split(' ') || []).filter((cls) => {
+      if (
+        cls.endsWith('__wrapper')
+      ) {
+        wrapperClassNames.push(cls);
+        focusedWrapperClassNames.push(`${cls}--focus`);
+        return false;
+      } else if (cls.endsWith('__before')) {
+        beforeClassNames.push(cls);
+        return false;
+      } else if (cls.endsWith('__after')) {
+        afterClassNames.push(cls);
+        return false;
+      }
+      return true;
+    }), []);
+    return <>
+      {beforeClassNames.length ? <View focusable={false} className={beforeClassNames.join(' ')} />: ''}
+      <Component
+        onFocus={(e) => {
+          setClassName(focusedWrapperClassNames.join(' '));
+          onFocus && onFocus(e);
+        }}
+        onBlur={(e) => {
+          setClassName(wrapperClassNames.join(' '));
+          onBlur && onBlur(e);
+        }}
+        className={classNames.join(' ')}
+        {...props}
+      />
+      {afterClassNames.length ? <View focusable={false} className={afterClassNames.join(' ')} />: ''}
+
+    </>
+  })
+  return React.forwardRef(function Wrapped({ ...props }, ref) {
+    return (
+      <Wrapper>
+        <WrappedComponent {...props}  ref={ref}/>
+      </Wrapper>
+    );
+  });
+};

package/src/CheckboxItem/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
+import CheckboxItemInput from '@digigov/react-core/CheckboxItemInput';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface CheckboxItemProps extends BaseProps<'input'> {
@@ -39,18 +40,7 @@ export const CheckboxItem = React.forwardRef<
           })}
         >
           {children}
-          <Base
-            as="input"
-            ref={ref}
-            type="checkbox"
-            name={name}
-            value={value}
-            className={clsx({
-              'ds-checkboxes__input': true,
-            })}
-            disabled={disabled}
-            {...props}
-          />
+          <CheckboxItemInput ref={ref} name={name} value={value} disabled={disabled} {...props} />
         </LabelContainer>
       </Base>
     </>

package/src/CheckboxItemInput/index.native.tsx

@@ -0,0 +1,10 @@
+import extend from '@digigov/react-core/utils/extend';
+import CoreCheckboxItemInput from '@digigov/react-core/CheckboxItemInput/index.web';
+import clsx from 'clsx';
+export const CheckboxItemInput = extend(CoreCheckboxItemInput, ({ className, ...props }) => ({
+    ...props,
+    className: clsx(className, {
+        'ds-checkboxes__input__wrapper': true
+    })
+}))
+export default CheckboxItemInput;

package/src/CheckboxItemInput/index.tsx

@@ -0,0 +1,2 @@
+export * from '@digigov/react-core/CheckboxItemInput/index.web';
+export { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';

package/src/CheckboxItemInput/index.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CheckboxItemInputProps extends BaseProps<'input'> { }
+/**
+ * Details for the CheckboxItem.
+ * CheckboxItemInput component is the input component for CheckboxItem.
+ */
+export const CheckboxItemInput = React.forwardRef<
+  HTMLInputElement,
+  CheckboxItemInputProps
+>(function CheckboxItemInput(
+  { name, value, className, disabled, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="input"
+      ref={ref}
+      type="checkbox"
+      name={name}
+      value={value}
+      className={clsx({
+        'ds-checkboxes__input': true,
+      })}
+      disabled={disabled}
+      {...props}
+    />
+
+  );
+});
+
+export default CheckboxItemInput;

package/src/CopyToClipboardContainer/index.tsx

@@ -1,74 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
-  /**
-   * @value 'tooltip' is used when you want to show the message inside a tooltip.
-   * @value 'banner' is used when you want to show the message inside a banner.
-   * @default 'tooltip'
-   */
-  variant?: 'tooltip' | 'banner';
-  /**
-   * tooltipAlign is optional.
-   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
-   * @value 'right'
-   * @value 'left'
-   * @default 'right'
-   */
-  tooltipAlign?: 'right' | 'left';
-  /**
-   * dense is optional.
-   * affects only the density of the tooltip.
-   * @value true tooltip will be dense.
-   * @value false
-   * @default false
-   * */
-  dense?: boolean;
-}
-/**
- * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
- */
-export const CopyToClipboardContainer = React.forwardRef<
-  HTMLDivElement,
-  CopyToClipboardContainerProps
->(function CopyToClipboardContainer(
-  {
-    variant = 'tooltip',
-    tooltipAlign = 'right',
-    className,
-    dense,
-    children,
-    ...props
-  },
-  ref
-) {
-  return (
-    <Base
-      as="div"
-      ref={ref}
-      {...props}
-      className={clsx(className, {
-        'ds-copy-to-clipboard': true,
-      })}
-      {...props}
-    >
-      <div
-        className={clsx(className, {
-          'ds-copy-to-clipboard__tooltip': variant === 'tooltip',
-          'ds-copy-to-clipboard__tooltip--dense':
-            variant === 'tooltip' && dense,
-          'ds-copy-to-clipboard__tooltip--left':
-            variant === 'tooltip' && tooltipAlign === 'left',
-          'ds-copy-to-clipboard__tooltip--right':
-            variant === 'tooltip' && tooltipAlign === 'right',
-          'ds-copy-to-clipboard__banner': variant === 'banner',
-        })}
-      >
-        {children}
-      </div>
-    </Base>
-  );
-});
-
-export default CopyToClipboardContainer;
+export * from '@digigov/react-core/CopyToClipboardContainer/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardContainer/index.web';

package/src/CopyToClipboardContainer/index.web.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
+  /**
+   * @value 'tooltip' is used when you want to show the message inside a tooltip.
+   * @value 'banner' is used when you want to show the message inside a banner.
+   * @default 'tooltip'
+   */
+  variant?: 'tooltip' | 'banner';
+  /**
+   * tooltipAlign is optional.
+   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
+   * @value 'right'
+   * @value 'left'
+   * @default 'right'
+   */
+  tooltipAlign?: 'right' | 'left';
+  /**
+   * dense is optional.
+   * affects only the density of the tooltip.
+   * @value true tooltip will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
+/**
+ * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
+ */
+export const CopyToClipboardContainer = React.forwardRef<
+  HTMLDivElement,
+  CopyToClipboardContainerProps
+>(function CopyToClipboardContainer(
+  {
+    variant = 'tooltip',
+    tooltipAlign = 'right',
+    className,
+    dense,
+    children,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      {...props}
+      className={clsx(className, {
+        'ds-copy-to-clipboard': true,
+      })}
+      {...props}
+    >
+      <Base
+        as="div"
+        className={clsx(className, {
+          'ds-copy-to-clipboard__tooltip': variant === 'tooltip',
+          'ds-copy-to-clipboard__tooltip--dense':
+            variant === 'tooltip' && dense,
+          'ds-copy-to-clipboard__tooltip--left':
+            variant === 'tooltip' && tooltipAlign === 'left',
+          'ds-copy-to-clipboard__tooltip--right':
+            variant === 'tooltip' && tooltipAlign === 'right',
+          'ds-copy-to-clipboard__banner': variant === 'banner',
+        })}
+      >
+        {children}
+      </Base>
+    </Base>
+  );
+});
+
+export default CopyToClipboardContainer;

package/src/CopyToClipboardMessage/index.native.tsx

@@ -0,0 +1,24 @@
+import CoreCopyToClipboardMessage, {
+  CopyToClipboardMessageProps,
+} from '@digigov/react-core/CopyToClipboardMessage/index.web';
+import { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
+import { extend } from '@digigov/react-core/utils/extend';
+import clsx from 'clsx';
+
+export const CopyToClipboardMessage = extend<
+  CopyToClipboardMessageProps,
+  CopyToClipboardContainerProps
+>(
+  CoreCopyToClipboardMessage,
+  ({ dense, className, ...props }) => {
+    return {
+      className: clsx(className, {
+        'ds-copy-to-clipboard__before': true,
+        'ds-copy-to-clipboard__message--dense': dense,
+      }),
+      ...props,
+    };
+  }
+);
+
+export default CopyToClipboardMessage;

package/src/CopyToClipboardMessage/index.tsx

@@ -1,41 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
-  /**
-   * enabled is a boolean prop passed from the CopyToClipboard component.
-   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
-   * When it's false it resets the animations of the CopyToClipboardMessage.
-   * @value true
-   * @value false
-   */
-  enabled?: boolean;
-}
-/**
- * CopyToClipboardMessage is used to show a message that a text is being copied.
- * This component is used inside the CopyToClipboard component that lies inside the digigov/ui library
- */
-export const CopyToClipboardMessage = React.forwardRef<
-  HTMLDivElement,
-  CopyToClipboardMessageProps
->(function CopyToClipboardMessage(
-  { enabled, className, children, ...props },
-  ref
-) {
-  return (
-    <Base
-      as="div"
-      ref={ref}
-      className={clsx(className, {
-        'ds-copy-to-clipboard__message': true,
-        'ds-copy-to-clipboard--hidden': !enabled,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default CopyToClipboardMessage;
+export * from '@digigov/react-core/CopyToClipboardMessage/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardMessage/index.web';

package/src/CopyToClipboardMessage/index.web.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
+  /**
+   * enabled is a boolean prop passed from the CopyToClipboard component.
+   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
+   * When it's false it resets the animations of the CopyToClipboardMessage.
+   * @value true
+   * @value false
+   */
+  enabled?: boolean;
+}
+/**
+ * CopyToClipboardMessage is used to show a message that a text is being copied.
+ * This component is used inside the CopyToClipboard component that lies inside the digigov/ui library
+ */
+export const CopyToClipboardMessage = React.forwardRef<
+  HTMLDivElement,
+  CopyToClipboardMessageProps
+>(function CopyToClipboardMessage(
+  { enabled, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-copy-to-clipboard__message': true,
+        'ds-copy-to-clipboard--hidden': !enabled,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default CopyToClipboardMessage;

package/src/TextInput/index.native.tsx

@@ -0,0 +1,10 @@
+import extend from '@digigov/react-core/utils/extend';
+import CoreTextInput from '@digigov/react-core/TextInput/index.web';
+import clsx from 'clsx';
+export const TextInput = extend(CoreTextInput, ({ className, ...props }) => ({
+    ...props,
+    className: clsx(className, {
+        'ds-input__wrapper': true
+    })
+}))
+export default TextInput;

package/src/TextInput/index.tsx

@@ -1,87 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface TextInputProps extends BaseProps<'input'> {
-  /**
-   * maxWidth is optional.
-   * @value '2-char';
-   * @value '3-char';
-   * @value '4-char';
-   * @value '5-char';
-   * @value '10-char';
-   * @value '20-char';
-   */
-  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
-
-  /**
-   * width is optional.
-   * Use width prop to define a custom width in your component.
-   * @value '25%';
-   * @value '33.3%';
-   * @value '50%';
-   * @value '66.6%';
-   * @value '75%';
-   * @value '100%';
-   * @value 'full';
-   */
-  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
-
-  /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   * @value true
-   * @value false
-   */
-  error?: boolean;
-  /**
-   * dense is optional.
-   * @value true TextInput will be dense.
-   * @value false
-   * @default false
-   */
-  dense?: boolean;
-}
-/**
- * TextInput component when you need to let users enter text that’s no
- * longer than a single line, such as their name or phone number.
- */
-export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
-  function TextInput(
-    {
-      type = 'text',
-      maxWidth,
-      width,
-      error,
-      dense,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <Base
-        as="input"
-        type={type}
-        ref={ref}
-        className={clsx(className, {
-          'ds-input': true,
-          'ds-input--error': error,
-          'ds-input--dense': dense,
-          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
-          'ds-!-width-one-quarter': width === '25%',
-          'ds-!-width-one-third': width === '33.3%',
-          'ds-!-width-one-half': width === '50%',
-          'ds-!-width-two-thirds': width === '66.6%',
-          'ds-!-width-three-quarters': width === '75%',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default TextInput;
+export * from '@digigov/react-core/TextInput/index.web';
+export { default as default } from '@digigov/react-core/TextInput/index.web';

package/src/TextInput/index.web.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface TextInputProps extends BaseProps<'input'> {
+  /**
+   * maxWidth is optional.
+   * @value '2-char';
+   * @value '3-char';
+   * @value '4-char';
+   * @value '5-char';
+   * @value '10-char';
+   * @value '20-char';
+   */
+  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
+
+  /**
+   * width is optional.
+   * Use width prop to define a custom width in your component.
+   * @value '25%';
+   * @value '33.3%';
+   * @value '50%';
+   * @value '66.6%';
+   * @value '75%';
+   * @value '100%';
+   * @value 'full';
+   */
+  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
+
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   * @value true
+   * @value false
+   */
+  error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextInput will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
+}
+/**
+ * TextInput component when you need to let users enter text that’s no
+ * longer than a single line, such as their name or phone number.
+ */
+export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
+  function TextInput(
+    {
+      type = 'text',
+      maxWidth,
+      width,
+      error,
+      dense,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="input"
+        type={type}
+        ref={ref}
+        className={clsx(className, {
+          'ds-input': true,
+          'ds-input--error': error,
+          'ds-input--dense': dense,
+          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,
+          'ds-!-width-one-quarter': width === '25%',
+          'ds-!-width-one-third': width === '33.3%',
+          'ds-!-width-one-half': width === '50%',
+          'ds-!-width-two-thirds': width === '66.6%',
+          'ds-!-width-three-quarters': width === '75%',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TextInput;