@ainias42/react-bootstrap-mobile 0.1.9 → 0.1.11

package/dist/src/Components/FormElements/CheckBox/Checkbox.d.ts

@@ -1,10 +1,12 @@
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { InputHTMLAttributes } from 'react';
-export type CheckboxProps = RbmComponentProps<{
+import { Override } from '@ainias42/js-helper';
+import { OptionalListener } from '../../Hooks/useListener';
+export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps<Override<InputHTMLAttributes<HTMLInputElement>, {
     label?: string;
     children?: string;
     isLabelBeforeCheckbox?: boolean;
-} & InputHTMLAttributes<HTMLInputElement>>;
-declare function Checkbox({ children, label, isLabelBeforeCheckbox, id, className, style, ...props }: CheckboxProps): JSX.Element;
+} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeChecked', OnChangeCheckedData, boolean>>>;
+declare function Checkbox<OnChangeData, OnChangeCheckedData>({ children, label, isLabelBeforeCheckbox, id, className, style, ...props }: CheckboxProps<OnChangeData, OnChangeCheckedData>): JSX.Element;
 declare const tmp: typeof Checkbox;
 export { tmp as Checkbox };

package/dist/src/Components/FormElements/ImageInput/MultipleFileInput.d.ts

@@ -0,0 +1,20 @@
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { InputHTMLAttributes } from 'react';
+import { Listener } from '../../Hooks/useListener';
+export type FileType = {
+    name: string;
+    url: string;
+    mimeType: string;
+    uploaded?: boolean;
+    blob?: Blob;
+};
+export type MultipleImageInputProps<OnChangeFilesData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange'>, {
+    value: FileType[];
+    label?: string;
+    mimeTypes?: string[];
+    maxFiles?: number;
+    maxSizePerFile?: number;
+    onError?: (error: string) => void;
+} & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>>>;
+export declare const MultipleFileInput: <OnChangeData>({ className, style, value, label, mimeTypes, maxFiles, maxSizePerFile, onError, ...otherProps }: MultipleImageInputProps<OnChangeData>) => JSX.Element;

package/dist/src/Components/FormElements/Textarea/Textarea.d.ts

@@ -7,6 +7,6 @@ export type TextareaProps<OnChangeData> = RbmComponentProps<Override<TextareaHTM
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
 } & OptionalListener<'onChange', OnChangeData>>>;
-declare function Textarea<OnChangeData>({ label, className, style, onKeyPress, onChangeText, onEnter, ...otherProps }: TextareaProps<OnChangeData>): JSX.Element;
+declare function Textarea<OnChangeData>({ label, className, style, onKeyUp, onChangeText, onEnter, ...otherProps }: TextareaProps<OnChangeData>): JSX.Element;
 declare const TextareaMemo: typeof Textarea;
 export { TextareaMemo as Textarea };

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

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { Override } from '../../TypeHelpers';
-export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<Override<ComponentPropsWithoutRef<AsType>, {
+import { RbmComponentProps } from '../RbmComponentProps';
+export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<Override<ComponentPropsWithoutRef<AsType>, {
     as?: AsType;
     fullscreenKey?: string;
     onEnterFullscreen?: () => void;
     onLeaveFullscreen?: () => void;
 }>>;
-declare function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({ children, as, fullscreenKey, onEnterFullscreen, onLeaveFullscreen, ...otherProps }: FullScreenProps<AsTag>): React.ReactElement<Omit<FullScreenProps<AsTag>, "children" | "as" | "fullscreenKey" | "onEnterFullscreen" | "onLeaveFullscreen"> & {
-    ref: React.RefObject<React.ComponentRef<AsTag>>;
-}, string | React.JSXElementConstructor<any>>;
+declare function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({ children, as, fullscreenKey, onEnterFullscreen, onLeaveFullscreen, ...otherProps }: FullScreenProps<AsTag>): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 declare const FullScreenMemo: typeof FullScreen;
 export { FullScreenMemo as FullScreen };

package/dist/src/Components/Layout/Grid/GridItem.d.ts

@@ -7,19 +7,22 @@ export type GridItemProps = RbmComponentProps<{
     lg?: number;
     xl?: number;
     xxl?: number;
+    print?: number;
     startXs?: number;
     startSm?: number;
     startMd?: number;
     startLg?: number;
     startXl?: number;
     startXxl?: number;
+    startPrint?: number;
     orderXs?: number;
     orderSm?: number;
     orderMd?: number;
     orderLg?: number;
     orderXl?: number;
     orderXxl?: number;
+    orderPrint?: number;
 }>;
-declare function GridItem({ style, children, className, __allowChildren, size, sm, md, lg, xl, xxl, startXs, startMd, startSm, startLg, startXl, startXxl, orderXs, orderSm, orderMd, orderLg, orderXxl, orderXl, }: GridItemProps): JSX.Element;
+declare function GridItem({ style, children, className, __allowChildren, size, sm, md, lg, xl, xxl, print, startXs, startMd, startSm, startLg, startXl, startXxl, startPrint, orderXs, orderSm, orderMd, orderLg, orderXxl, orderXl, orderPrint, }: GridItemProps): JSX.Element;
 declare const GridItemMemo: typeof GridItem;
 export { GridItemMemo as GridItem };

package/package.json

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

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -1,20 +1,26 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
-import { InputHTMLAttributes } from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
 
 import styles from './checkbox.scss';
 import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
+import { Override } from '@ainias42/js-helper';
+import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
 
-export type CheckboxProps = RbmComponentProps<
-    {
-        label?: string;
-        children?: string;
-        isLabelBeforeCheckbox?: boolean;
-    } & InputHTMLAttributes<HTMLInputElement>
+export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps<
+    Override<
+        InputHTMLAttributes<HTMLInputElement>,
+        {
+            label?: string;
+            children?: string;
+            isLabelBeforeCheckbox?: boolean;
+        } & OptionalListener<'onChange', OnChangeData> &
+            OptionalListener<'onChangeChecked', OnChangeCheckedData, boolean>
+    >
 >;
 
-function Checkbox({
+function Checkbox<OnChangeData, OnChangeCheckedData>({
     children,
     label = '',
     isLabelBeforeCheckbox = false,
@@ -22,7 +28,7 @@ function Checkbox({
     className,
     style,
     ...props
-}: CheckboxProps) {
+}: CheckboxProps<OnChangeData, OnChangeCheckedData>) {
     // Variables
 
     // States
@@ -30,6 +36,23 @@ function Checkbox({
     // Refs
 
     // Callbacks
+    const [onChange, otherPropsWithoutChange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        props
+    );
+
+    const [onChangeChecked, otherPropsWithoutData] = useListenerWithExtractedProps<
+        'onChangeChecked',
+        OnChangeCheckedData
+    >('onChangeChecked', otherPropsWithoutChange);
+
+    const onChangeInner = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => {
+            onChangeChecked(e.target.checked);
+            onChange(e);
+        },
+        [onChange, onChangeChecked]
+    );
 
     // Effects
 
@@ -49,7 +72,13 @@ function Checkbox({
         <span className={classNames(styles.checkbox, className)} style={style}>
             <label htmlFor={id} key={id}>
                 <span className={styles.label}>{preLabel}</span>
-                <input {...props} type="checkbox" id={id} className={styles.input} />
+                <input
+                    {...otherPropsWithoutData}
+                    type="checkbox"
+                    id={id}
+                    className={styles.input}
+                    onChange={onChangeInner}
+                />
                 <span className={styles.checkmark} />
                 <span className={styles.label}>{label}</span>
             </label>

package/src/Components/FormElements/CheckBox/checkbox.scss

@@ -39,6 +39,7 @@
 
     @include design($material) {
       width: 18px;
+      min-width: 18px;
       height: 18px;
       margin: 2px;
 
@@ -51,6 +52,7 @@
     }
     @include design($flat) {
       width: 22px;
+      min-width: 22px;
       height: 22px;
 
       &::before {

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useRef, useState, MouseEvent } from 'react';
+import { useCallback, useRef, useState, MouseEvent, useEffect, useLayoutEffect } from 'react';
 import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 import { withMemo } from '../../../helper/withMemo';
@@ -50,6 +50,7 @@ function ColorInput<OnChangeData>({
 
     // Refs
     const containerRef = useRef<HTMLDivElement>(null);
+    const modalRef = useRef<HTMLDivElement>(null);
 
     // States
     const [color, setColor] = useState<string>(value ?? defaultValue ?? '#000000FF');
@@ -89,7 +90,6 @@ function ColorInput<OnChangeData>({
         (e: MouseEvent) => {
             if (e.target === containerRef?.current) {
                 setIsOpen(false);
-                console.log('onContainerClick', colVal);
                 addColor(colVal);
                 onClose?.(colVal);
             }
@@ -107,6 +107,19 @@ function ColorInput<OnChangeData>({
     );
 
     // Effects
+    useLayoutEffect(() => {
+        if (!modalRef.current) {
+            return;
+        }
+        const dimension = modalRef.current.getBoundingClientRect();
+        if (dimension.right > window.innerWidth || dimension.bottom > window.innerHeight) {
+            const newPosition = {
+                x: Math.max(0, Math.min(window.innerWidth - dimension.width, position.x)),
+                y: Math.max(0, Math.min(window.innerHeight - dimension.height, position.y)),
+            };
+            setPosition(newPosition);
+        }
+    }, [position]);
 
     // Other
 
@@ -115,7 +128,7 @@ function ColorInput<OnChangeData>({
         <span className={styles.colorInput}>
             {isOpen ? (
                 <div onClick={onContainerClick} className={styles.modalContainer} ref={containerRef}>
-                    <div className={styles.modal} style={{ top: position.y, left: position.x }}>
+                    <div className={styles.modal} style={{ top: position.y, left: position.x }} ref={modalRef}>
                         <SketchPicker
                             color={colVal}
                             onChange={onChange}

package/src/Components/FormElements/ImageInput/ImageInput.tsx

@@ -23,6 +23,7 @@ export type ImageInputProps<OnChangeData> = RbmComponentProps<
     >
 >;
 
+// TODO use MultipleFileInput internal
 function ImageInput<OnChangeData>({
     className,
     style,
@@ -79,7 +80,7 @@ function ImageInput<OnChangeData>({
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.imageInput, className)} style={style}>
+        <label className={classNames(styles.fileInput, className)} style={style}>
             {label ? <span>{label}</span> : null}
             <img
                 src={(value ?? image)?.url}

package/src/Components/FormElements/ImageInput/MultipleFileInput.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { ChangeEventHandler, DragEvent, DragEventHandler, InputHTMLAttributes, useCallback, useRef } from 'react';
+import { Listener, useListenerWithExtractedProps } from '../../Hooks/useListener';
+
+import styles from './imageInput.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 { faPlus, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { Image } from '../../Image/Image';
+import { Clickable } from '../../Clickable/Clickable';
+import { Inline } from '../../Layout/Inline';
+
+export type FileType = { name: string; url: string; mimeType: string; uploaded?: boolean; blob?: Blob };
+
+export type MultipleImageInputProps<OnChangeFilesData> = RbmComponentProps<
+    Override<
+        Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange'>,
+        {
+            value: FileType[];
+            label?: string;
+            mimeTypes?: string[];
+            maxFiles?: number;
+            maxSizePerFile?: number;
+            onError?: (error: string) => void;
+        } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
+    >
+>;
+
+export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeData>({
+    className,
+    style,
+    value,
+    label,
+    mimeTypes = ['image/*'],
+    maxFiles = 1,
+    maxSizePerFile = 1024 * 1024 * 10,
+    onError,
+    ...otherProps
+}: MultipleImageInputProps<OnChangeData>) {
+    // Variables
+
+    // Refs
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    // 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[]) => {
+            if (newFiles.length + value.length > maxFiles) {
+                onError?.(`Es sind nur ${maxFiles} Dateien erlaubt.`);
+                return;
+            }
+
+            if (newFiles.some((file) => file.size > maxSizePerFile)) {
+                onError?.(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
+                return;
+            }
+
+            if (newFiles.some((file) => !checkMimeType(file.type))) {
+                onError?.('Eine Datei ist im falschen Format');
+                return;
+            }
+
+            const newUrls = await getBase64(newFiles);
+            const newValue = newFiles.map((file, index) => ({
+                name: file.name,
+                url: newUrls[index],
+                mimeType: file.type,
+                blob: file,
+            }));
+
+            onChangeFiles([...value, ...newValue]);
+        },
+        [checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value]
+    );
+
+    const onInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        async (e) => {
+            if (!e.target.files || e.target.files.length === 0) {
+                return;
+            }
+
+            const newFiles = Array.from(e.target.files);
+            await onNewFiles(newFiles);
+        },
+        [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<DragEventHandler>(
+        async (event) => {
+            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);
+        },
+        [onNewFiles]
+    );
+
+    const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    const renderFile = (file: FileType) => {
+        if (file.mimeType.startsWith('image/')) {
+            return (
+                <Image
+                    key={file.url}
+                    src={file.url}
+                    alt={file.name}
+                    className={classNames(styles.previewImage, file.url)}
+                />
+            );
+        }
+        // TODO style
+        return (
+            <Block>
+                <Text>{file.name}</Text>
+            </Block>
+        );
+    };
+
+    return (
+        <label
+            className={classNames(styles.fileInput, className)}
+            style={style}
+            onDrop={onDrop}
+            onDragOver={onDragOver}
+        >
+            <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.url}>
+                        {renderFile(file)}
+                        <Clickable className={styles.previewRemove} onClick={removeFile} onClickData={index}>
+                            <Icon icon={faTimesCircle} />
+                        </Clickable>
+                    </Grow>
+                ))}
+                {value.length < maxFiles && (
+                    <Grow className={styles.addFile} center={true} __allowChildren="html">
+                        <Icon icon={faPlus} />
+                        <input
+                            {...props}
+                            ref={inputRef}
+                            className={styles.value}
+                            onChange={onInputChange}
+                            type="file"
+                            multiple={maxFiles > 1}
+                            accept={mimeTypes.join(', ')}
+                        />
+                    </Grow>
+                )}
+            </Flex>
+        </label>
+    );
+},
+styles);

package/src/Components/FormElements/ImageInput/imageInput.scss

@@ -1,18 +1,53 @@
-.imageInput {
+.fileInput {
   display: flex;
   flex-direction: column;
   position: relative;
   cursor: pointer;
 
-  .preview {
-    flex: 1;
-    object-fit: contain;
+  .previewContainer {
+    align-items: stretch;
+    flex-grow: 1;
 
-    &.empty {
-      background-color: #d3d3d3;
+    .preview {
+      position: relative;
+      border: 1px solid var(--border-light);
+
+      .previewRemove {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        opacity: 0;
+        font-size: 1.5rem;
+
+        svg {
+          background: white;
+        }
+      }
+
+      &:hover .previewRemove {
+        opacity: 0.7;
+      }
+    }
+
+    .previewImage {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .addFile {
+      position: relative;
+      border-radius: 3px;
+      background-color: var(--border-light);
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2rem;
     }
   }
 
+
   .value {
     position: absolute;
     top: 0;

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -23,7 +23,7 @@ function Textarea<OnChangeData>({
     label,
     className,
     style,
-    onKeyPress,
+    onKeyUp,
     onChangeText,
     onEnter,
     ...otherProps
@@ -48,14 +48,14 @@ function Textarea<OnChangeData>({
 
     const realOnKeyPress = useCallback(
         (e: KeyboardEvent<HTMLTextAreaElement>) => {
-            if (onKeyPress) {
-                onKeyPress(e);
+            if (onKeyUp) {
+                onKeyUp(e);
             }
             if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                 onEnter((e.target as HTMLTextAreaElement).value);
             }
         },
-        [onEnter, onKeyPress]
+        [onEnter, onKeyUp]
     );
 
     // Effects
@@ -67,7 +67,7 @@ function Textarea<OnChangeData>({
     return (
         <label className={classNames(styles.container, className)} style={style}>
             {label ? <span className={styles.label}>{label}</span> : null}
-            <textarea {...otherProps} onKeyPress={realOnKeyPress} className={styles.textarea} onChange={onChange} />
+            <textarea {...otherProps} onKeyUp={realOnKeyPress} className={styles.textarea} onChange={onChange} />
         </label>
     );
 }

package/src/Components/FullScreen/FullScreen.tsx

@@ -1,18 +1,11 @@
 import * as React from 'react';
-import {
-    ComponentPropsWithoutRef,
-    ComponentRef,
-    PropsWithChildren,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
+import { ComponentPropsWithoutRef, ComponentRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Override } from '../../TypeHelpers';
 import { withMemo } from '../../helper/withMemo';
 import { useWindow } from '../../WindowContext/WindowContext';
+import { RbmComponentProps } from '../RbmComponentProps';
 
-export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
+export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
     Override<
         ComponentPropsWithoutRef<AsType>,
         { as?: AsType; fullscreenKey?: string; onEnterFullscreen?: () => void; onLeaveFullscreen?: () => void }
@@ -81,6 +74,8 @@ function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
     // Render Functions
     const element = as ?? 'span';
     const props = useMemo(() => ({ ...otherProps, ref: containerRef }), [otherProps]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     return React.createElement(element, props, children);
 }