@ainias42/react-bootstrap-mobile 0.2.2 → 0.2.4

package/dist/src/Components/FormElements/Controller/SwitchController.d.ts

@@ -0,0 +1,3 @@
+export declare const SwitchController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Switch/Switch").SwitchProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeChecked"> & {
+    name: string;
+}, never>;

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/Hooks/useDelayedState.d.ts

@@ -0,0 +1,5 @@
+export declare function useDelayedState<T>(initialState: T | (() => T), delay?: number, maxDelay?: number | undefined): {
+    state: T;
+    immediateState: T;
+    setState: (newValue: (T)) => void;
+};

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

@@ -3,6 +3,7 @@ import { ComponentType } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { IconSource } from '../Icon/Icon';
 export type TopBarActionButtonType = {
+    order?: number;
     title: string;
     icon?: IconSource;
     action: () => void;
@@ -21,6 +22,6 @@ export type TopBarProps = RbmComponentProps<{
     transparent?: boolean;
     drawBehind?: boolean;
 }>;
-declare function TopBar({ title, rightButtons, leftButtons, hiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): React.JSX.Element;
+declare function TopBar({ title, rightButtons: unsortedRightButtons, leftButtons: unsortedLeftButtons, hiddenButtons: unsortedHiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): React.JSX.Element;
 declare const TopBarMemo: typeof TopBar;
 export { TopBarMemo as TopBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -92,7 +92,7 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
-    "@ainias42/js-helper": ">=0.8.15",
+    "@ainias42/js-helper": ">=0.8.16",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",

package/src/Components/Clickable/Clickable.tsx

@@ -315,7 +315,7 @@ function Clickable<
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} className={classNames(styles.link, props.className)} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );

package/src/Components/Clickable/clickable.scss

@@ -1,3 +1,8 @@
 .clickable {
   cursor: pointer;
 }
+
+.link {
+  color: var(--link-color);
+  text-decoration: underline;
+}

package/src/Components/FormElements/Controller/SwitchController.ts

@@ -0,0 +1,4 @@
+import { Switch } from "../Switch/Switch";
+import { withHookController } from "./withHookController";
+
+export const SwitchController = withHookController(Switch, "onChangeChecked");

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -41,6 +41,7 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
                 {...field}
                 {...onChangeProps}
                 value={field.value ?? emptyValue}
+                checked={field.value ?? emptyValue}
                 ref={composedRef}
                 error={errorMessage}
             >

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/Hooks/useDelayedState.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+import { useDelayed } from "./useDelayed";
+
+export function useDelayedState<T>(initialState: T | (() => T), delay = 100, maxDelay: number | undefined = undefined) {
+    const [immediateState, setImmediateState] = useState(initialState);
+    const [state, setState] = useState(immediateState);
+
+    const setDelayedState = useDelayed((newState: (T)) => {
+        setState(newState);
+    }, [], delay, maxDelay);
+
+    const setValue = useCallback((newValue: (T)) => {
+        setImmediateState(newValue);
+        setDelayedState(newValue);
+    }, [setDelayedState]);
+
+    return {state, immediateState, setState: setValue};
+}

package/src/Components/Layout/Flex.tsx

@@ -37,6 +37,7 @@ function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
             className={classNames(className, styles.flex, {
                 [styles.horizontal]: horizontal,
                 [styles.grow]: grow,
+                [styles.weight1]: grow,
             })}
             as={as as AsType}
             ref={ref}

package/src/Components/Layout/Grid/grid.scss

@@ -18,7 +18,7 @@ $containerBreakpoints: $grid-breakpoints;
 @mixin printClasses {
   @media print {
     @for $i from 1 through $columns {
-      .item-print-#{$i} {
+      > .item-print-#{$i} {
         grid-column: auto / span $i;
       }
     }
@@ -26,14 +26,14 @@ $containerBreakpoints: $grid-breakpoints;
     // Start with `1` because `0` is and invalid value.
     // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
     @for $i from 1 through ($columns - 1) {
-      .start-print-#{$i} {
+      > .start-print-#{$i} {
         grid-column-start: $i;
       }
     }
 
     // Add classes for reordering
     @for $i from -10 through 10 {
-      .order-print-#{$i} {
+      > .order-print-#{$i} {
         order: $i;
       }
     }
@@ -42,7 +42,7 @@ $containerBreakpoints: $grid-breakpoints;
 
 @mixin contentMin($breakpointName) {
   @for $i from 1 through $columns {
-    .item-#{$breakpointName}-#{$i} {
+    > .item-#{$breakpointName}-#{$i} {
       grid-column: auto / span $i;
     }
   }
@@ -50,7 +50,7 @@ $containerBreakpoints: $grid-breakpoints;
   // Start with `1` because `0` is and invalid value.
   // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
   @for $i from 1 through ($columns - 1) {
-    .start-#{$breakpointName}-#{$i} {
+    > .start-#{$breakpointName}-#{$i} {
       grid-column-start: $i;
     }
   }
@@ -58,7 +58,7 @@ $containerBreakpoints: $grid-breakpoints;
 
 @mixin contentOnly($breakpointName) {
   @for $i from -10 through 10 {
-    .order-#{$breakpointName}-#{$i} {
+    > .order-#{$breakpointName}-#{$i} {
       order: $i;
     }
   }
@@ -110,7 +110,7 @@ $containerBreakpoints: $grid-breakpoints;
     @each $breakpoint in map-keys($breakpoints) {
       @include media-breakpoint-up($breakpoint, $breakpoints) {
         @for $i from 1 through $columns {
-          .item-#{$breakpoint}-#{$i} {
+          > .item-#{$breakpoint}-#{$i} {
             grid-column: auto / span $i;
           }
         }
@@ -118,7 +118,7 @@ $containerBreakpoints: $grid-breakpoints;
         // Start with `1` because `0` is and invalid value.
         // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
         @for $i from 1 through ($columns - 1) {
-          .start-#{$breakpoint}-#{$i} {
+          > .start-#{$breakpoint}-#{$i} {
             grid-column-start: $i;
           }
         }
@@ -127,7 +127,7 @@ $containerBreakpoints: $grid-breakpoints;
       // Add classes for reordering
       @include media-breakpoint-only($breakpoint, $breakpoints) {
         @for $i from -10 through 10 {
-          .order-#{$breakpoint}-#{$i} {
+          > .order-#{$breakpoint}-#{$i} {
             order: $i;
           }
         }

package/src/Components/TopBar/TopBar.tsx

@@ -18,6 +18,7 @@ import { Inline } from '../Layout/Inline';
 import { View } from '../Layout/View';
 
 export type TopBarActionButtonType = {
+    order?: number;
     title: string;
     icon?: IconSource;
     action: () => void;
@@ -45,11 +46,11 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
         const key = button.key ?? String(index);
         if ('component' in button) {
             const Component = button.component;
-            return <Component {...button} key={key} onClick={button.action} />;
+            return <Component {...button} key={key} onClick={button.action}/>;
         }
         let child: string | ReactElement | undefined = button.title;
         if (button.icon) {
-            child = <Icon icon={button.icon} />;
+            child = <Icon icon={button.icon}/>;
         }
         return (
             <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
@@ -60,15 +61,15 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
 }
 
 function TopBar({
-    title = '',
-    rightButtons = [],
-    leftButtons = [],
-    hiddenButtons = [],
-    className,
-    transparent = false,
-    drawBehind = false,
-    ...rbmProps
-}: TopBarProps) {
+                    title = '',
+                    rightButtons: unsortedRightButtons = [],
+                    leftButtons: unsortedLeftButtons = [],
+                    hiddenButtons: unsortedHiddenButtons = [],
+                    className,
+                    transparent = false,
+                    drawBehind = false,
+                    ...rbmProps
+                }: TopBarProps) {
     const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);
 
     if (isHiddenMenuOpen) {
@@ -76,6 +77,9 @@ function TopBar({
     }
 
     const actionSheetRef = useRef<React.ElementRef<typeof ActionSheet>>(null);
+    let rightButtons = useMemo(() => unsortedRightButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedRightButtons]);
+    const leftButtons = useMemo(() => unsortedLeftButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedLeftButtons]);
+    let hiddenButtons = useMemo(() => unsortedHiddenButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedHiddenButtons]);
 
     const toggleHiddenMenu = useCallback(() => {
         setIsHiddenMenuOpen((isOpen) => {
@@ -121,7 +125,7 @@ function TopBar({
 
     const rightButtonComponents = getButtonComponents(rightButtons);
     const leftButtonComponents = getButtonComponents(leftButtons);
-    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({ icon: _, ...button }) => button));
+    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({icon: _, ...button}) => button));
 
     const actions: ActionSheetAction<any>[] = useMemo(
         () =>
@@ -157,7 +161,7 @@ function TopBar({
                 </Flex>
                 {hiddenButtons.length > 0 && isHiddenMenuOpen ? (
                     <Inline className={styles.hiddenContainer}>
-                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu} />
+                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu}/>
                         <View className={styles.hiddenMenu}>{hiddenButtonComponents}</View>
                     </Inline>
                 ) : null}

package/src/Components/TopBar/topBar.scss

@@ -30,12 +30,12 @@
 
     display: block;
     padding: 0.5rem 1rem;
-    color: #0d3efd; // TODO change color
+    color: var(--top-bar-button, #0d3efd);
     text-decoration: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 
     &.disabled {
-      color: #6c757d; // TODO change color
+      color: var(--top-bar-button-disabled, #6c757d);
       pointer-events: none;
       cursor: default;
     }

package/src/scss/_colors.scss

@@ -1,5 +1,4 @@
 
-
 :root {
   --flavor-basic: #000000;
   --flavor-constructive: #15803D;
@@ -12,6 +11,10 @@
 
   --text-error: var(--flavor-destructive);
 
+  --top-bar-button: #0d3efd;
+  --top-bar-button-disabled: #6c757d;
+
+  --link-color: #0d6efd;
 }
 
 .#{$material} {