@ainias42/react-bootstrap-mobile 0.1.8 → 0.1.10

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

@@ -1,4 +1,4 @@
-import { Override } from '../../../TypeHelpers';
+import { Override } from '@ainias42/js-helper';
 import { OptionalListener } from '../../Hooks/useListener';
 import { HTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';

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/Layout/Container.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RbmComponentProps } from '../RbmComponentProps';
 export declare const CONTAINER_CLASSES: {
     sm: string;
@@ -10,6 +9,4 @@ export declare const CONTAINER_CLASSES: {
 export type ContainerProps = RbmComponentProps<{
     fluid?: boolean | keyof typeof CONTAINER_CLASSES;
 }>;
-declare function Container({ fluid, className, children, style }: ContainerProps): JSX.Element;
-declare const ContainerMemo: typeof Container;
-export { ContainerMemo as Container };
+export declare const Container: ({ fluid, className, children, style }: ContainerProps) => JSX.Element;

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

@@ -1,15 +1,15 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
-type Child = Recursive<JSX.Element | undefined | null | Child[]> | false;
+export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps = {
-    children?: Child;
+    children?: RbmChildWithoutString;
     __allowChildren?: 'html';
 } | {
     children?: ReactNode;
     __allowChildren: 'text' | 'all';
 };
 export type WithNoStringAndChildrenProps = {
-    children: Child;
+    children: RbmChildWithoutString;
     __allowChildren?: 'html';
 } | {
     children: ReactNode;
@@ -28,4 +28,3 @@ export type RbmComponentProps<SpecialProps, ChildrenProps = WithNoStringProps> =
     className?: string;
     style?: CSSProperties;
 } & SpecialProps;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -81,7 +81,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "classnames": "^2.3.1",
     "isomorphic-style-loader": "^5.3.2",
-    "@ainias42/js-helper": ">=0.7.12",
+    "@ainias42/js-helper": ">=0.8.1",
     "react-color": "^2.19.3",
     "react-table": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.7",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Override } from '../../../TypeHelpers';
+import { Override } from '@ainias42/js-helper';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 
 import styles from './button.scss';

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/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/Layout/Container.tsx

@@ -17,7 +17,7 @@ export type ContainerProps = RbmComponentProps<{
     fluid?: boolean | keyof typeof CONTAINER_CLASSES;
 }>;
 
-function Container({ fluid, className, children, style }: ContainerProps) {
+export const Container = withMemo(function Container({ fluid, className, children, style }: ContainerProps) {
     // Variables
 
     // Refs
@@ -50,8 +50,4 @@ function Container({ fluid, className, children, style }: ContainerProps) {
             {children}
         </div>
     );
-}
-
-// Need ContainerMemo for autocompletion of phpstorm
-const ContainerMemo = withMemo(Container, styles);
-export { ContainerMemo as Container };
+}, styles);

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

@@ -13,18 +13,21 @@ 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;
 }>;
 
 function GridItem({
@@ -38,18 +41,21 @@ function GridItem({
     lg,
     xl,
     xxl,
+    print,
     startXs,
     startMd,
     startSm,
     startLg,
     startXl,
     startXxl,
+    startPrint,
     orderXs,
     orderSm,
     orderMd,
     orderLg,
     orderXxl,
     orderXl,
+    orderPrint,
 }: GridItemProps) {
     // Variables
 
@@ -69,6 +75,9 @@ function GridItem({
     if (xxl) {
         classes.push(`item-xxl-${xxl}`);
     }
+    if (print) {
+        classes.push(`item-print-${print}`);
+    }
 
     if (startXs) {
         classes.push(`start-xs-${startXs}`);
@@ -88,6 +97,9 @@ function GridItem({
     if (startXxl) {
         classes.push(`start-xxl-${startXxl}`);
     }
+    if (startPrint) {
+        classes.push(`start-print-${startPrint}`);
+    }
 
     if (orderXs) {
         classes.push(`order-xs-${orderXs}`);
@@ -107,6 +119,9 @@ function GridItem({
     if (orderXxl) {
         classes.push(`order-xxl-${orderXxl}`);
     }
+    if (orderPrint) {
+        classes.push(`order-print-${orderPrint}`);
+    }
 
     // Refs