@ainias42/react-bootstrap-mobile 0.2.1 → 0.2.3

package/dist/src/Components/Dialog/ButtonDialog.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { Flavor } from "../Flavor";
 export type ButtonDialogProps = RbmComponentProps<{
     title?: string;
     message: string;
     buttons: {
         text: string;
         callback: () => void;
+        flavor?: Flavor;
     }[];
+    extraContent?: ReactElement | null;
 }, WithNoChildren>;
-declare function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps): React.JSX.Element;
+declare function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps): React.JSX.Element;
 declare const ButtonDialogMemo: typeof ButtonDialog;
 export { ButtonDialogMemo as ButtonDialog };

package/dist/src/Components/Flavor.d.ts

@@ -1,4 +1,6 @@
 export declare enum Flavor {
     Accent = "flavor-accent",
-    Basic = "flavor-basic"
+    Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive"
 }

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/dist/src/Components/Layout/Grid/Grid.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
 }>;
-declare function Grid({ style, children, columns, rows, useContainerWidth, className, __allowChildren }: GridProps): React.JSX.Element;
-declare const GridMemo: typeof Grid;
+declare const GridMemo: import("../../../helper/withForwardRef").RefComponent<GridProps, HTMLDivElement>;
 export { GridMemo as Grid };

package/dist/src/Components/List/InfiniteList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListProps } from "./List";
+export type InfiniteListProps<ItemType> = ListProps<ItemType> & {
+    hasNextPage: boolean;
+    loadNextPage: () => unknown | Promise<unknown>;
+};
+export declare const InfiniteList: <ItemType>({ renderItem, itemHeight, items, renderBefore, keyExtractor, hasNextPage, loadNextPage, style, className }: InfiniteListProps<ItemType>) => React.JSX.Element;

package/dist/src/Components/List/List.d.ts

@@ -1,11 +1,13 @@
-import * as React from 'react';
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
+import { FixedSizeList, FixedSizeListProps } from 'react-window';
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
     itemHeight?: number;
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
-export declare const List: <ItemType>({ items, renderItem, itemHeight: initialItemHeight, className, style, }: ListProps<ItemType>) => React.JSX.Element;
+export declare const List: import("../../helper/withForwardRef").RefComponent<ListProps<unknown>, FixedSizeList<unknown>>;

package/package.json

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

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,19 +1,27 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { Block } from '../Layout/Block';
-import { Text } from '../Text/Text';
+import { Text, TEXT_SIZE } from '../Text/Text';
 import { Clickable } from '../Clickable/Clickable';
 
 import styles from './buttonDialog.scss';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import classNames from 'classnames';
+import { Flavor } from "../Flavor";
+import { Size } from "../../Size";
 
 export type ButtonDialogProps = RbmComponentProps<
-    { title?: string; message: string; buttons: { text: string; callback: () => void }[] },
+    {
+        title?: string;
+        message: string;
+        buttons: { text: string; callback: () => void, flavor?: Flavor }[]
+        extraContent?: ReactElement|null
+    },
     WithNoChildren
 >;
 
-function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps) {
+function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps) {
     // Variables
 
     // Refs
@@ -31,20 +39,21 @@ function ButtonDialog({ title, message, buttons, style, className }: ButtonDialo
     // Render Functions
 
     return (
-        <Block className={classNames(styles.buttonDialog, className)} style={style}>
+        <Block className={classNames(styles.buttonDialog, className)} style={style} >
             {!!title && (
-                <Block className={styles.title}>
-                    <Text>{title}</Text>
+                <Block>
+                    <Text size={TEXT_SIZE.large} className={styles.title}>{title}</Text>
                 </Block>
             )}
-            <Block className={styles.message}>
-                <Text>{message}</Text>
+            <Block>
+                <Text className={styles.message}>{message}</Text>
             </Block>
+            {extraContent}
             <Block className={styles.buttonContainer}>
                 {buttons.map((b, i) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <Clickable onClick={b.callback} className={styles.button} key={i + b.text}>
-                        <Text>{b.text}</Text>
+                    <Clickable onClick={b.callback} className={classNames(styles.button)} key={i + b.text}>
+                        <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.Accent)}>{b.text}</Text>
                     </Clickable>
                 ))}
             </Block>

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -11,6 +11,7 @@ export type ConfirmDialogProps = {
     confirmText?: string;
 };
 
+// TODO Translation
 function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmText = 'OK' }: ConfirmDialogProps) {
     // Variables
     const buttons = useMemo(

package/src/Components/Dialog/buttonDialog.scss

@@ -1,5 +1,6 @@
 @import "../../scss/variables";
 @import "../../scss/designMixin";
+@import "../../scss/flavorMixin";
 
 .buttonDialog {
   font-weight: 400;
@@ -18,8 +19,13 @@
     width: 100%;
 
     .button {
-      color: var(--flavor-accent);
       padding: 0 8px;
+
+      .buttonText {
+        @include flavorSelection(--text-primary-default-color);
+
+      }
+
     }
   }
 
@@ -51,15 +57,18 @@
         display: block;
         border-left: 1px solid var(--border-light);
         border-top: 1px solid var(--border-light);
-        text-overflow: ellipsis;
-        letter-spacing: 0;
         vertical-align: middle;
-        font-size: 16px;
         text-align: center;
         height: 44px;
-        line-height: 44px;
         overflow: hidden;
 
+        .buttonText {
+          line-height: 44px;
+          text-overflow: ellipsis;
+          letter-spacing: 0;
+          font-size: 16px;
+        }
+
         &:first-child {
           border-left: none;
         }
@@ -102,12 +111,15 @@
         width: auto;
         float: right;
         border-radius: 2px;
-        font-size: 14px;
-        font-weight: 500;
         height: 36px;
-        line-height: 36px;
         margin: 8px 8px 8px 0;
         min-width: 50px;
+
+        .buttonText {
+          line-height: 36px;
+          font-size: 14px;
+          font-weight: 500;
+        }
       }
     }
   }

package/src/Components/Flavor.ts

@@ -1,4 +1,6 @@
 export enum Flavor {
     Accent = "flavor-accent",
     Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive",
 }

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

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Block } from '../Block';
 import classNames from 'classnames';
 import styles from './grid.scss';
-import { useMemo } from 'react';
+import { ForwardedRef, useMemo } from 'react';
+import { withForwardRef } from "../../../helper/withForwardRef";
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
@@ -12,7 +12,7 @@ export type GridProps = RbmComponentProps<{
     useContainerWidth?: boolean;
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps) {
+function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps, ref?:ForwardedRef<HTMLDivElement>) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -39,6 +39,7 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 
     return (
         <Block
+            ref={ref}
             style={appliedStyle}
             className={classNames(styles.grid, className, {[styles.useContainerWidth]: useContainerWidth})}
             __allowChildren={__allowChildren as 'all'}
@@ -49,5 +50,5 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 }
 
 // Need RowMemo for autocompletion of phpstorm
-const GridMemo = withMemo(Grid, styles);
+const GridMemo = withForwardRef(Grid, styles);
 export { GridMemo as Grid };

package/src/Components/List/InfiniteList.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import InfiniteLoader from "react-window-infinite-loader";
+import { RbmComponentProps } from "../RbmComponentProps";
+import { List, ListProps } from "./List";
+import { withMemo } from "../../helper/withMemo";
+
+export type InfiniteListProps<ItemType> = ListProps<ItemType> &{
+    hasNextPage: boolean,
+    loadNextPage: () => unknown | Promise<unknown>,
+};
+
+export const InfiniteList = withMemo(function InfiniteList<ItemType>({
+                                                                         renderItem,
+                                                                         itemHeight,
+                                                                         items,
+                                                                         renderBefore,
+                                                                         keyExtractor,
+                                                                         hasNextPage,
+                                                                         loadNextPage,
+                                                                         style,
+                                                                         className
+                                                                     }: InfiniteListProps<ItemType>) {
+    // Refs
+
+    // States/Variables/Selectors
+    const [isPageLoading, setIsPageLoading] = useState(false);
+
+    // Dispatch
+
+    // Callbacks
+    const isItemLoaded = useCallback((index: number) => !hasNextPage || index < items.length, [hasNextPage, items]);
+
+    const loadMore = useCallback(async () => {
+        if (!isPageLoading) {
+            setIsPageLoading(true);
+            try {
+                loadNextPage()
+            } finally {
+                setIsPageLoading(false);
+            }
+        }
+    }, [isPageLoading, loadNextPage])
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <InfiniteLoader isItemLoaded={isItemLoaded} loadMoreItems={loadMore}
+                           itemCount={hasNextPage ? items.length + 1 : items.length}>{({onItemsRendered, ref}) => (
+        <List
+            items={items} renderItem={renderItem} style={style} className={className} itemHeight={itemHeight}
+            renderBefore={renderBefore} keyExtractor={keyExtractor} ref={ref} onItemsRendered={onItemsRendered}/>
+    )}
+    </InfiniteLoader>;
+});

package/src/Components/List/List.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { ComponentType, CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import { ComponentType, CSSProperties, ForwardedRef, ReactElement, ReactNode, useCallback, useState } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 
 import styles from './list.scss';
 import { withMemo } from '../../helper/withMemo';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
@@ -14,15 +15,19 @@ export type ListProps<ItemType> = RbmComponentProps<{
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
 
-export const List = withMemo(function List<ItemType>({
+export const List = withForwardRef(function List<ItemType>({
     items,
     renderItem,
     itemHeight: initialItemHeight = 0,
     className,
     style,
-}: ListProps<ItemType>) {
+    onItemsRendered,
+    autoSizeClassName,
+}: ListProps<ItemType>, ref: ForwardedRef<FixedSizeList<ItemType>>) {
     // Variables
 
     // States
@@ -45,7 +50,7 @@ export const List = withMemo(function List<ItemType>({
     // Render Functions
 
     return (
-        <AutoSizer>
+        <AutoSizer className={autoSizeClassName}>
             {({ height, width }: { height?: number; width?: number }) => {
                 return (
                     <>
@@ -54,6 +59,8 @@ export const List = withMemo(function List<ItemType>({
                                 {renderItem(
                                     items[0],
                                     {
+                                        visibility: 'hidden',
+                                        pointerEvents: 'none',
                                         position: 'relative',
                                         top: '0px',
                                         left: '0px',
@@ -66,6 +73,8 @@ export const List = withMemo(function List<ItemType>({
                         )}
                         {height !== undefined && width !== undefined && (
                             <FixedSizeList
+                                onItemsRendered={onItemsRendered}
+                                ref={ref}
                                 height={height}
                                 itemCount={items.length}
                                 width={width}

package/src/scss/_flavorMixin.scss

@@ -7,4 +7,10 @@
   &:global(.flavor-basic) {
     #{$varName}: var(--flavor-basic);
   }
+  &:global(.flavor-destructive) {
+    #{$varName}: var(--flavor-destructive);
+  }
+  &:global(.flavor-constructive) {
+    #{$varName}: var(--flavor-constructive);
+  }
 }