@ainias42/react-bootstrap-mobile 0.1.15 → 0.1.17

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

@@ -0,0 +1,281 @@
+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 styles from './fileInput.scss';
+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";
+
+
+export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
+    Override<
+        Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'>,
+        {
+            value: FileType[];
+            label?: string;
+            mimeTypes?: string[];
+            maxFiles?: number;
+            maxSizePerFile?: number;
+            onError?: (error: string) => void;
+            allowOverride?: boolean
+            showDeleteButton?: boolean
+        } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
+    >
+>;
+
+export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeData>({
+                                                                                        className,
+                                                                                        style,
+                                                                                        value,
+                                                                                        label,
+                                                                                        mimeTypes = ['image/*'],
+                                                                                        maxFiles = 1,
+                                                                                        maxSizePerFile = 1024 * 1024 * 10,
+                                                                                        allowOverride = maxFiles === 1,
+                                                                                        onError,
+                                                                                        showDeleteButton = true,
+                                                                                        ...otherProps
+                                                                                    }: MultipleFileInputProps<OnChangeData>) {
+        // Variables
+
+        // Refs
+        const inputRef = useRef<HTMLInputElement>(null);
+        const indexRef = useRef<number | undefined>(undefined);
+
+        // States
+
+        // Selectors
+
+        // Callbacks
+
+
+        const checkMimeType = useCallback(
+            (fileType: string) => {
+                return mimeTypes.some((type) => {
+                    if (type === '*/*' || type === '*') {
+                        return true;
+                    }
+                    if (type.endsWith('/*')) {
+                        return fileType.startsWith(type.substring(0, type.length - 2));
+                    }
+                    return fileType === type;
+                });
+            },
+            [mimeTypes]
+        );
+
+        const [onChangeFiles, ...props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
+        const getBase64 = useCallback((inputFiles: Blob[]) => {
+            const promises = inputFiles.map(
+                (file) =>
+                    new Promise<string>((resolve, reject) => {
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            resolve(reader.result as string);
+                        };
+                        reader.onerror = reject;
+                        reader.readAsDataURL(file);
+                    })
+            );
+            return Promise.all(promises);
+        }, []);
+
+        const onNewFiles = useCallback(
+            async (newFiles: File[], index?: number) => {
+                if (newFiles.some((file) => !checkMimeType(file.type))) {
+                    onError?.('Eine Datei ist im falschen Format');
+                    return;
+                }
+
+                if (newFiles.length + value.length > maxFiles && (!allowOverride || index === undefined || index + newFiles.length > maxFiles)) {
+                    onError?.(`Es sind nur ${maxFiles} Dateien erlaubt.`);
+                    return;
+                }
+
+                if (maxSizePerFile && newFiles.some((file) => file.size > maxSizePerFile)) {
+                    onError?.(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
+                    return;
+                }
+
+                const newUrls = await getBase64(newFiles);
+                const newValue = newFiles.map((file, fileIndex) => ({
+                    name: file.name,
+                    data: newUrls[fileIndex],
+                    mimeType: file.type,
+                    blob: file,
+                }));
+
+                if (newFiles.length + value.length > maxFiles && index !== undefined) {
+                    const onChangeFilesValue = [...value];
+                    onChangeFilesValue.splice(index, newFiles.length, ...newValue);
+                    onChangeFiles(onChangeFilesValue);
+                } else {
+                    onChangeFiles([...value, ...newValue]);
+                }
+            },
+            [allowOverride, checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value]
+        );
+
+        const onInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+            async (e) => {
+                const index = indexRef.current;
+                indexRef.current = undefined;
+
+                if (!e.target.files || e.target.files.length === 0) {
+                    return;
+                }
+
+                const newFiles = Array.from(e.target.files);
+                await onNewFiles(newFiles, index);
+            },
+            [onNewFiles]
+        );
+
+        const removeFile = useCallback(
+            (_: any, index: number) => {
+                if (index >= 0 && index < value.length) {
+                    const newData = [...value];
+                    newData.splice(index, 1);
+                    onChangeFiles(newData);
+                }
+            },
+            [onChangeFiles, value]
+        );
+
+        const onDrop = useCallback(
+            async (event: DragEvent, index: number) => {
+                event.preventDefault();
+
+                const files: File[] = [];
+                if (event.dataTransfer.items) {
+                    for (let i = 0; i < event.dataTransfer.items.length; i++) {
+                        if (event.dataTransfer.items[i].kind === 'file') {
+                            const file = event.dataTransfer.items[i].getAsFile();
+                            if (file) {
+                                files.push(file);
+                            }
+                        }
+                    }
+                } else {
+                    for (let i = 0; i < event.dataTransfer.files.length; i++) {
+                        files.push(event.dataTransfer.files[i]);
+                    }
+                }
+
+                await onNewFiles(files, index);
+            },
+            [onNewFiles]
+        );
+
+        const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);
+
+        const clickOnFile = useCallback((_: any, index?: number) => {
+            if (!allowOverride || !inputRef.current) {
+                return;
+            }
+
+            indexRef.current = index;
+            inputRef.current.dispatchEvent(new MouseEvent("click"));
+        }, [allowOverride]);
+
+        // Effects
+
+        // Other
+
+        // Render Functions
+        const renderFile = (file: FileType) => {
+            if (file.mimeType.startsWith('image/')) {
+                return (
+                    <Image
+                        key={file.data}
+                        src={file.data}
+                        alt={file.name}
+                        className={classNames(styles.previewImage, file.data)}
+                    />
+                );
+            }
+            // TODO style
+            return (
+                <Block className={styles.previewText}>
+                    <Icon icon={faFile} className={styles.previewTextIcon}/><Text>{file.name}</Text>
+                </Block>
+            );
+        };
+
+        return (
+            <span
+                className={classNames(styles.fileInput, className)}
+                style={style}
+            >
+                <Flex horizontal={true}>
+                    {!!label && (
+                        <Grow>
+                            <Text>{label}</Text>
+                        </Grow>
+                    )}
+                    {maxFiles > 1 && (
+                        <Inline>
+                            <Text>
+                                {value.length}/{maxFiles}
+                            </Text>
+                        </Inline>
+                    )}
+                </Flex>
+                <Flex horizontal={true} className={styles.previewContainer}>
+                    {value?.map((file, index) => (
+                        <Grow className={styles.preview} center={true} key={file.data}>
+                            <Clickable
+                                onDrop={onDrop}
+                                onDragOver={onDragOver}
+                                onDropData={index}
+
+                                onClick={clickOnFile}
+                                onClickData={index}
+                            >
+                                {renderFile(file)}
+                                {showDeleteButton &&
+                                    <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}>
+                        <Clickable
+                            className={styles.addFileButton}
+                            onDrop={onDrop}
+                            onDragOver={onDragOver}
+                            onDropData={maxFiles}
+                            onClick={clickOnFile}
+                            __allowChildren="html"
+                        >
+                            <Icon icon={faPlus}/>
+                            <input
+                                {...props}
+                                ref={inputRef}
+                                className={styles.value}
+                                onChange={onInputChange}
+                                value=''
+                                type="file"
+                                multiple={maxFiles > 1}
+                                accept={mimeTypes.join(', ')}
+                            />
+                        </Clickable>
+                    </Grow>
+                </Flex>
+            </span>
+        );
+    },
+    styles);

package/src/Components/FormElements/{ImageInput/imageInput.scss → Input/FileInput/fileInput.scss}

@@ -20,7 +20,7 @@
         font-size: 1.5rem;
 
         svg {
-          background: white;
+          background: rgba(255, 255, 255, 0.2);
         }
       }
 
@@ -35,6 +35,21 @@
       object-fit: contain;
     }
 
+    .previewText {
+      width: 100%;
+      height: 100%;
+      min-height: 4rem;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .previewTextIcon {
+      padding-right: 4px;
+    }
+
+
     .addFile {
       position: relative;
       border-radius: 3px;
@@ -44,16 +59,31 @@
       justify-content: center;
       align-items: center;
       font-size: 2rem;
+
+      .addFileButton {
+        width: 100%;
+        height: 100%;
+        min-height: 4rem;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &.hidden {
+        display: none;
+      }
     }
   }
 
 
   .value {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
+    display: none;
+    //position: absolute;
+    //top: 0;
+    //left: 0;
+    //right: 0;
+    //bottom: 0;
+    //opacity: 0;
   }
 }

package/src/Components/FormElements/Input/input.scss

@@ -31,7 +31,7 @@
       }
 
       &:focus {
-        background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
+        background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
         linear-gradient(to top, transparent 1px, #afafaf 1px);
       }
     }

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -128,9 +128,9 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
         }
 
         return (
-            <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value].key}>
+            <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value]?.key}>
                 <InlineBlock className={styles.tag}>
-                    <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value].label}</Text>
+                    <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
                 </InlineBlock>
             </Clickable>
         );

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.scss

@@ -21,7 +21,7 @@
     padding-bottom: 2px;
 
     &:focus {
-      background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
+      background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)),
       linear-gradient(to top, transparent 1px, #afafaf 1px);
     }
   }

package/src/Components/FormElements/Select/Select.tsx

@@ -22,6 +22,7 @@ export type SelectProps<OnChangeData> = RbmComponentProps<
             options: SelectOption[];
             onChangeValue?: (newValue: string) => void;
             inline?: boolean;
+            small?: boolean;
         } & OptionalListener<'onChange', OnChangeData>
     >
 >;
@@ -33,10 +34,10 @@ export const Select = withMemo(function Select<OnChangeData>({
     style,
     onChangeValue,
     inline = false,
+    small = false,
     ...otherProps
 }: SelectProps<OnChangeData>) {
     // Variables
-    console.log('LOG-d inline', inline);
 
     // Refs
 
@@ -62,7 +63,7 @@ export const Select = withMemo(function Select<OnChangeData>({
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.select, { [styles.inline]: inline }, className)} style={style}>
+        <label className={classNames(styles.select, { [styles.inline]: inline, [styles.small]: small }, className)} style={style}>
             {label ? <span className={styles.label}>{label}</span> : null}
             <select {...otherProps} className={styles.input} onChange={onChange}>
                 {options.map((option) => (

package/src/Components/FormElements/Select/select.scss

@@ -48,4 +48,9 @@
       flex: 1;
     }
   }
+
+  &.small .input {
+    height: initial;
+    line-height: 1.5rem;
+  }
 }

package/src/Components/FormElements/Switch/Switch.tsx

@@ -6,8 +6,9 @@ import classNames from 'classnames';
 
 import styles from './switch.scss';
 import { withMemo } from '../../../helper/withMemo';
+import {OptionalListener, useListenerWithExtractedProps} from "../../Hooks/useListener";
 
-export type SwitchProps = RbmComponentProps<
+export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
     Override<
         InputHTMLAttributes<HTMLInputElement>,
         {
@@ -16,12 +17,11 @@ export type SwitchProps = RbmComponentProps<
             children?: string;
             isLabelBeforeSwitch?: boolean;
             isDual?: boolean;
-            onChangeChecked?(isChecked: boolean): void;
-        }
+        } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>
     >
 >;
 
-export const Switch = withMemo(function Switch({
+export const Switch = withMemo(function Switch<OnChangeCheckedData>({
     children,
     label = '',
     preLabel = '',
@@ -31,9 +31,8 @@ export const Switch = withMemo(function Switch({
     className,
     style,
     onChange,
-    onChangeChecked,
     ...props
-}: SwitchProps) {
+}: SwitchProps<OnChangeCheckedData>) {
     // Variables
 
     // States
@@ -41,10 +40,12 @@ export const Switch = withMemo(function Switch({
     // Refs
 
     // Callbacks
+    const [onChangeChecked, otherProps] = useListenerWithExtractedProps("onChangeChecked", props);
+
     const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
         (e) => {
             onChange?.(e);
-            onChangeChecked?.(e.target.checked);
+            onChangeChecked(e.target.checked);
         },
         [onChange, onChangeChecked]
     );
@@ -70,7 +71,7 @@ export const Switch = withMemo(function Switch({
         <span className={classNames(styles.switch, { [styles.dual]: isDual }, className)} style={style}>
             <label htmlFor={id} key={id}>
                 <span className={styles.label}>{preLabel}</span>
-                <input {...props} type="checkbox" id={id} onChange={realOnChange} />
+                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange} />
                 <div className={styles.toggle}>
                     <span className={styles.handle} />
                 </div>

package/src/Components/FormElements/Switch/switch.scss

@@ -9,6 +9,7 @@
   > label {
     display: flex;
     cursor: pointer;
+    align-items: center;
   }
 
   .label {

package/src/Components/Hooks/useMousePosition.ts

@@ -0,0 +1,13 @@
+import {useLayoutEffect, useRef} from "react";
+
+export function useMousePosition() {
+    const position = useRef({ x: 0, y: 0 });
+    useLayoutEffect(() => {
+        const setFromEvent = (e: MouseEvent) => {
+            position.current = { x: e.clientX, y: e.clientY };
+        };
+        window.addEventListener('mousemove', setFromEvent);
+        return () => window.removeEventListener('mousemove', setFromEvent);
+    }, []);
+    return position;
+}

package/src/Components/Hooks/useWindowDimensions.ts

@@ -0,0 +1,17 @@
+import {useWindow} from "../../WindowContext/WindowContext";
+import {useEffect, useReducer} from "react";
+
+
+export function useWindowDimensions() {
+	const [, redraw] = useReducer((x) => x + 1, 0);
+	const window = useWindow();
+
+	useEffect(() => {
+		window?.addEventListener('resize', redraw);
+		return () => {
+			window?.removeEventListener('resize', redraw);
+		};
+	}, [window]);
+
+    return {x: window?.innerWidth ?? 0, y: window?.innerHeight ?? 0};
+}

package/src/Components/Icon/Icon.tsx

@@ -1,10 +1,13 @@
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome';
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { Override } from '../../TypeHelpers';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { withMemo } from '../../helper/withMemo';
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import {RbmComponentProps} from '../RbmComponentProps';
+import {Override} from '../../TypeHelpers';
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+import {withMemo} from '../../helper/withMemo';
+import {IconDefinition} from '@fortawesome/free-regular-svg-icons';
+import classNames from "classnames";
+
+import styles from "./icon.scss";
 
 export type IconSource = IconProp | string | IconDefinition;
 
@@ -12,13 +15,14 @@ export type IconProps = RbmComponentProps<
     Override<
         FontAwesomeIconProps,
         {
+            noMargin?: boolean
             icon: IconSource;
             alt?: string;
         }
     >
 >;
 
-function Icon({ icon, alt, className, style, title, ...props }: IconProps) {
+export const Icon = withMemo(function Icon({icon, alt, className, noMargin = true, style, title, ...props}: IconProps) {
     // Variables
 
     // States
@@ -36,11 +40,11 @@ function Icon({ icon, alt, className, style, title, ...props }: IconProps) {
 
     // Render Functions
 
-    if (typeof icon === 'string' && icon.indexOf('.') !== -1) {
-        return <img src={icon} alt={alt} className={className} style={style} title={title} />;
+    if (typeof icon === 'string' && (icon.indexOf('.') !== -1 || icon.startsWith("data:"))) {
+        return <img src={icon} alt={alt} className={classNames(styles.imgIcon, className, {[styles.margin]: !noMargin})}
+                    style={style} title={title}/>;
     }
-    return <FontAwesomeIcon {...props} icon={icon as IconProp} className={className} style={style} title={title} />;
-}
-
-const IconMemo = withMemo(Icon);
-export { IconMemo as Icon };
+    return <FontAwesomeIcon {...props} icon={icon as IconProp}
+                            className={classNames(className, {[styles.margin]: !noMargin})} style={style}
+                            title={title}/>;
+}, styles);

package/src/Components/Icon/icon.scss

@@ -0,0 +1,9 @@
+.margin {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}
+.imgIcon {
+  width: calc(1em + 4px);
+  height: calc(1em + 4px);
+  object-fit: contain;
+}

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

@@ -10,9 +10,10 @@ import { useMemo } from 'react';
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
+    useContainerWidth?: boolean;
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, className, __allowChildren }: GridProps) {
+function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -40,7 +41,7 @@ function Grid({ style, children, columns = 12, rows = 1, className, __allowChild
     return (
         <Block
             style={appliedStyle}
-            className={classNames(styles.grid, className)}
+            className={classNames(styles.grid, className, {[styles.useContainerWidth]: useContainerWidth})}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}