@ainias42/react-bootstrap-mobile 0.2.2 → 0.2.3

package/dist/src/Components/FormElements/Input/FileInput/FileInput.d.ts

@@ -8,5 +8,6 @@ export type FileInputProps<OnChangeFileData> = RbmComponentProps<Override<Omit<M
     value?: FileType;
     mimeType?: string;
     required?: boolean;
+    "data-test-id"?: string;
 } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>>;
 export declare const FileInput: <OnChangeData>({ value, mimeType, required, ...otherProps }: FileInputProps<OnChangeData>) => React.JSX.Element;

package/dist/src/Components/FormElements/Input/FileInput/MultipleFileInput.d.ts

@@ -14,5 +14,6 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<Overri
     allowOverride?: boolean;
     showDeleteButton?: boolean;
     error?: string;
+    "data-test-id"?: string;
 } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>>>;
-export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, error, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;
+export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, allowOverride, onError, showDeleteButton, error, "data-test-id": testId, ...otherProps }: MultipleFileInputProps<OnChangeData>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/src/Components/FormElements/Input/FileInput/FileInput.tsx

@@ -1,25 +1,24 @@
 import * as React from 'react';
-import {RbmComponentProps} from '../../../RbmComponentProps';
-import {Override} from '../../../../TypeHelpers';
-import {useCallback, useMemo} from 'react';
-import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
-
+import { RbmComponentProps } from '../../../RbmComponentProps';
+import { Override } from '../../../../TypeHelpers';
+import { useCallback, useMemo } from 'react';
+import { Listener, useListenerWithExtractedProps } from '../../../Hooks/useListener';
 import styles from './fileInput.scss';
-import {withMemo} from '../../../../helper/withMemo';
-import {FileType} from "./FileType";
-import {MultipleFileInput, MultipleFileInputProps} from "./MultipleFileInput";
+import { withMemo } from '../../../../helper/withMemo';
+import { FileType } from "./FileType";
+import { MultipleFileInput, MultipleFileInputProps } from "./MultipleFileInput";
 
 
 export type FileInputProps<OnChangeFileData> = RbmComponentProps<
     Override<
-        Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes"|"showDeleteButton">, {
+        Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes" | "showDeleteButton">, {
         value?: FileType,
         mimeType?: string,
         required?: boolean,
+        "data-test-id"?: string;
     } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>
 >;
 
-// TODO use MultipleFileInput internal
 export const FileInput = withMemo(function FileInput<OnChangeData>({
                                                                        value,
                                                                        mimeType,

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import {RbmComponentProps} from '../../../RbmComponentProps';
-import {Override} from '../../../../TypeHelpers';
-import {ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef} from 'react';
-import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
+import { RbmComponentProps } from '../../../RbmComponentProps';
+import { Override } from '../../../../TypeHelpers';
+import { ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef } from 'react';
+import { Listener, useListenerWithExtractedProps } from '../../../Hooks/useListener';
 import styles from './fileInput.scss';
-import {withMemo} from '../../../../helper/withMemo';
+import { withMemo } from '../../../../helper/withMemo';
 import classNames from 'classnames';
-import {Block} from '../../../Layout/Block';
-import {Text} from '../../../Text/Text';
-import {Flex} from '../../../Layout/Flex';
-import {Grow} from '../../../Layout/Grow';
-import {Icon} from '../../../Icon/Icon';
-import {faFile, faPlus, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
-import {Image} from '../../../Image/Image';
-import {Clickable} from '../../../Clickable/Clickable';
-import {Inline} from '../../../Layout/Inline';
-import {FileType} from "./FileType";
+import { Block } from '../../../Layout/Block';
+import { Text } from '../../../Text/Text';
+import { Flex } from '../../../Layout/Flex';
+import { Grow } from '../../../Layout/Grow';
+import { Icon } from '../../../Icon/Icon';
+import { faFile, faPlus, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { Image } from '../../../Image/Image';
+import { Clickable } from '../../../Clickable/Clickable';
+import { Inline } from '../../../Layout/Inline';
+import { FileType } from "./FileType";
 import { InlineBlock } from "../../../Layout/InlineBlock";
 
 
@@ -32,6 +32,7 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
             allowOverride?: boolean
             showDeleteButton?: boolean
             error?: string,
+            "data-test-id"?: string;
         } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
     >
 >;
@@ -47,7 +48,8 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                                                                         allowOverride = maxFiles === 1,
                                                                                         onError,
                                                                                         showDeleteButton = true,
-    error,
+                                                                                        error,
+                                                                                        "data-test-id": testId,
                                                                                         ...otherProps
                                                                                     }: MultipleFileInputProps<OnChangeData>) {
         // Variables
@@ -78,7 +80,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
             [mimeTypes]
         );
 
-        const [onChangeFiles, ...props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
+        const [onChangeFiles, props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
         const getBase64 = useCallback((inputFiles: Blob[]) => {
             const promises = inputFiles.map(
                 (file) =>
@@ -220,6 +222,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
             <span
                 className={classNames(styles.fileInput, className)}
                 style={style}
+                data-test-id={testId}
             >
                 <Flex horizontal={true}>
                     {!!label && (
@@ -248,13 +251,15 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                             >
                                 {renderFile(file)}
                                 {showDeleteButton &&
-                                    <Clickable className={styles.previewRemove} onClick={removeFile} onClickData={index}>
+                                    <Clickable className={styles.previewRemove} onClick={removeFile}
+                                               onClickData={index}>
                                         <Icon icon={faTimesCircle}/>
                                     </Clickable>}
                             </Clickable>
                         </Grow>;
                     })}
-                    <Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})} center={true}>
+                    <Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})}
+                          center={true}>
                         <Clickable
                             className={styles.addFileButton}
                             onDrop={onDrop}

package/src/Components/FormElements/Input/Input.tsx

@@ -19,6 +19,7 @@ import { useOnChangeDone } from '../hooks/useOnChangeDone';
 import { InlineBlock } from "../../Layout/InlineBlock";
 import { Text } from "../../Text/Text";
 import { useSendFormContext } from "../Controller/SendFormContext";
+import { useDebounced } from "../../Hooks/useDebounced";
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -119,10 +120,12 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             otherPropsWithoutOnchange
         );
 
-        const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
+        const [onChangeDoneWithoutDeboune, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
             'onChangeDone',
             otherPropsWithoutBlur
         );
+        const onChangeDone = useDebounced(onChangeDoneWithoutDeboune, [onChangeDoneWithoutDeboune]);
+
 
         const realOnKeyDown = useCallback(
             (e: KeyboardEvent<HTMLInputElement>) => {
@@ -156,7 +159,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     }
                 }
             },
-            [onKeyDown, onChange, otherProps]
+            [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange]
         );
 
         // Effects