@ainias42/react-bootstrap-mobile 0.1.14 → 0.1.16

package/src/Components/FormElements/Button/Button.tsx

@@ -7,19 +7,27 @@ import classNames from 'classnames';
 import { withMemo } from '../../../helper/withMemo';
 import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
+import {ButtonType} from "./ButtonType";
 
 export type ButtonProps<ClickData> = RbmComponentProps<
-    Override<HTMLAttributes<HTMLButtonElement>, OptionalListener<'onClick', ClickData>>
+    Override<HTMLAttributes<HTMLButtonElement>, {
+    type?: ButtonType,
+        disabled?: boolean;
+    } & OptionalListener<'onClick', ClickData>>
 >;
 
-function Button<ClickData>({ children, className, ...props }: ButtonProps<ClickData>) {
+export const Button = withMemo(function Button<ClickData>({ children, className, disabled, type=ButtonType.Primary, ...props }: ButtonProps<ClickData>) {
     const onClick = useListener<'onClick', ClickData>('onClick', props);
+
+    const classes = {
+        [styles.primary]: type === ButtonType.Primary,
+        [styles.secondary]: type === ButtonType.Secondary,
+        [styles.disabled]: disabled,
+    };
+
     return (
-        <button {...props} type="button" onClick={onClick} className={classNames(styles.button, className)}>
+        <button {...props} disabled={disabled} type="button" onClick={onClick} className={classNames(styles.button, classes, className)}>
             {children}
         </button>
     );
-}
-
-const ButtonMemo = withMemo(Button, styles);
-export { ButtonMemo as Button };
+}, styles);

package/src/Components/FormElements/Button/ButtonType.ts

@@ -0,0 +1,4 @@
+export enum ButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+}

package/src/Components/FormElements/Button/button.scss

@@ -1,5 +1,6 @@
 @import "../../../scss/variables";
 @import "../../../scss/designMixin";
+@import "../../../scss/flavorMixin";
 
 .button {
   cursor: pointer;
@@ -10,13 +11,11 @@
   overflow: hidden;
   text-decoration: none;
   letter-spacing: 0;
-  color: white;
   vertical-align: middle;
-  border: 0 solid currentColor;
   border-radius: 3px;
   transition: none;
 
-  --text-primary-default-color: white;
+  @include flavorSelection(--button-color);
 
   @include design($material) {
     box-shadow: $boxShadowMaterial;
@@ -26,7 +25,6 @@
     text-align: center;
     font-size: 14px;
     text-transform: uppercase;
-    background-color: var(--flavor-accent);
     font-weight: 500;
   }
 
@@ -34,6 +32,25 @@
     line-height: 32px;
     padding: 4px 18px;
     font-size: 17px;
-    background-color: var(--flavor-accent);
+  }
+
+  &.primary {
+    background-color: var(--button-color);
+    border: 0 solid currentColor;
+    color: white;
+    --text-primary-default-color: white;
+  }
+
+  &.secondary {
+    background-color: transparent;
+    border: 1px solid var(--button-color);
+    color: var(--button-color);
+    --text-primary-default-color: var(--button-color);
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    cursor: default;
+    pointer-events: none;
   }
 }

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

@@ -0,0 +1,55 @@
+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 styles from './fileInput.scss';
+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">, {
+        value?: FileType,
+        mimeType?: string,
+        required?: boolean,
+    } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>
+>;
+
+// TODO use MultipleFileInput internal
+export const FileInput = withMemo(function FileInput<OnChangeData>({
+                                                                       value,
+                                                                       mimeType,
+                                                                       required = false,
+                                                                       ...otherProps
+                                                                   }: FileInputProps<OnChangeData>) {
+    // Variables
+
+    // Refs
+
+    // States
+    const mimeTypes = useMemo(() => (mimeType ? [mimeType] : undefined), [mimeType]);
+    const innerValue = useMemo(() => value ? [value] : [], [value]);
+
+    // Selectors
+
+    // Callbacks
+    const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps<"onChangeFile", OnChangeData>("onChangeFile", otherProps);
+    const onChangeFiles = useCallback((files: FileType[]) => {
+        if (!required || files[0]) {
+            onChangeFile(files[0]);
+        }
+    }, [onChangeFile, required]);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return <MultipleFileInput maxFiles={1} value={innerValue} onChangeFiles={onChangeFiles}
+                              mimeTypes={mimeTypes} showDeleteButton={!required} {...multipleFileInputProps}/>;
+
+}, styles);

package/src/Components/FormElements/Input/FileInput/FileType.ts

@@ -0,0 +1 @@
+export type FileType = { name: string; data: string; mimeType: string; uploaded?: boolean; blob?: Blob };

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/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/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};
+}