@ainias42/react-bootstrap-mobile 0.1.15 → 0.1.16

package/src/Components/Menu/Submenu.tsx

@@ -0,0 +1,95 @@
+import {RbmComponentProps, WithNoStringAndChildrenProps} from "../RbmComponentProps";
+import {Icon, IconSource} from "../Icon/Icon";
+import {Clickable} from "../Clickable/Clickable";
+import classNames from "classnames";
+import styles from "./menu.scss";
+import React, {useCallback, useRef, useState} from "react";
+import {Text} from "../Text/Text";
+import {withMemo} from "../../helper/withMemo";
+import {Block} from "../Layout/Block";
+import {useWindow} from "../../WindowContext/WindowContext";
+import {Flex} from "../Layout/Flex";
+import {Grow} from "../Layout/Grow";
+import {faChevronRight} from "@fortawesome/free-solid-svg-icons";
+import {MenuCloseContextProvider, useMenuClose} from "./MenuCloseContext";
+
+export type SubmenuProps = RbmComponentProps<{
+    label: string, icon?: IconSource;
+    iconColor?: string;
+    disabled?: boolean;
+}, WithNoStringAndChildrenProps>;
+
+export const Submenu = withMemo(function Submenu({
+                                                     children,
+                                                     label,
+                                                     icon,
+                                                     iconColor,
+                                                     className,
+                                                     style,
+                                                     disabled = false
+                                                 }: SubmenuProps) {
+    // Refs
+
+    // States/Variables/Selectors
+    const window = useWindow();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const submenuRef = useRef<HTMLDivElement>(null);
+
+    const [openLeft, setOpenLeft] = useState(false);
+    const [openTop, setOpenTop] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    // Dispatch
+
+    // Callbacks
+    const recalculateSubmenuPosition = useCallback(() => {
+        if (!submenuRef.current || !containerRef.current) {
+            return;
+        }
+        const {width, height} = getComputedStyle(containerRef.current);
+        const {right, top} = submenuRef.current.getBoundingClientRect();
+
+        setOpenLeft(right + parseFloat(width) >= (window?.innerWidth ?? 0));
+        setOpenTop(top + parseFloat(height) >= (window?.innerHeight ?? 0));
+        setIsOpen(true);
+    }, [window?.innerHeight, window?.innerWidth]);
+
+    const closeSubmenu = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const closeParent = useMenuClose();
+    const closeAllMenus = useCallback(() => {
+        closeSubmenu();
+        closeParent();
+    }, [closeParent, closeSubmenu]);
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <MenuCloseContextProvider value={closeAllMenus}>
+        <Clickable
+            onMouseEnter={recalculateSubmenuPosition}
+            onMouseLeave={closeSubmenu}
+            className={classNames(styles.item, styles.submenu, {
+                [styles.open]: isOpen,
+                [styles.openLeft]: openLeft,
+                [styles.openTop]: openTop,
+                [styles.disabled]: disabled
+            }, className)}
+            style={style}
+        >
+            <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
+                {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon}/>}
+                <Grow><Text>{label}</Text></Grow>
+                <Icon icon={faChevronRight}/>
+            </Flex>
+            <Block className={styles.container} __allowChildren="all" ref={containerRef}>
+                {children}
+            </Block>
+        </Clickable>
+    </MenuCloseContextProvider>;
+}, styles);

package/src/Components/Menu/menu.scss

@@ -1,21 +1,106 @@
-
 .menu {
   position: fixed;
   background: #ffffff;
   border: 1px solid var(--border-light);
+  border-radius: 2px;
+  z-index: 1000;
+}
+
+.divider {
+  margin-left: 4px;
+  margin-right: 4px;
+  padding-top: 1px;
+  margin-top: 1px;
+  border-top: 1px solid var(--border-light);
+}
+
+.item {
+  padding: 0 4px;
+  display: flex;
+  //background: #ffffff;
+
+  &.active {
+    background-color: #e1e1e1;
+  }
+
+  .itemChildren {
+    flex: 1;
+    padding: 1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    //border-top: 1px solid var(--border-light);
+    white-space: nowrap;
 
-  .item {
-    display: block;
-    border-top: 1px solid var(--border-light);
-    padding: 8px;
-    margin: 0 4px;
+    .icon {
+      padding-right: 4px;
+    }
+  }
 
-    &:hover {
-      background-color: #f5f5f5;
+  &.disabled {
+    pointer-events: none;
+    cursor: default;
+
+    > .itemChildren > * {
+      opacity: 0.3;
     }
+  }
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &:first-child > .itemChildren {
+    border-top: none;
+  }
+}
+
+.hoverMenu {
+  padding: 0;
+  display: inline;
+
+  .menu {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.open:hover {
+    .menu {
+      visibility: visible;
+      pointer-events: initial;
+    }
+  }
+}
+
+.submenu {
+  position: relative;
+
+  .container {
+    visibility: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: 3px;
+    left: calc(100% - 3px);
+    background: #ffffff;
+    border: 1px solid var(--border-light);
+    border-radius: 2px;
+    z-index: 10;
+  }
+
+  &.openLeft .container {
+    left: initial;
+    right: calc(100% - 3px);
+  }
+
+  &.openTop .container {
+    top: initial;
+    bottom: 3px;
+  }
 
-    &:first-child {
-      border-top: none;
+  &.open:hover {
+    .container {
+      visibility: visible;
+      pointer-events: initial;
     }
   }
 }

package/src/Components/Menu/useMenu.ts

@@ -9,7 +9,7 @@ export function useMenu() {
         setIsOpen(true);
     }, []);
 
-    const props: Omit<MenuProps, 'items'> = {
+    const props: Omit<MenuProps, 'items'|"children"> = {
         isOpen,
         x: position.x,
         y: position.y,

package/src/Components/RbmComponentProps.ts

@@ -26,6 +26,12 @@ export type WithStringProps = {
     children?: Recursive<string>;
 };
 
+export type WithChildren =
+    | {
+    children: ReactNode
+    __allowChildren?: "text"|"all"|"html";
+};
+
 export type WithStringAndChildrenProps = {
     children: Recursive<string>;
 };

package/src/ListRow/ListRow.tsx

@@ -0,0 +1,20 @@
+import {withMemo} from "../helper/withMemo";
+
+
+export const ListRow = withMemo(function ListRow() {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return null;
+});

package/src/WrongChildError.ts

@@ -13,7 +13,5 @@ export class WrongChildError extends Error {
         );
         this.name = 'WrongChildError';
         this.childValue = child;
-
-        console.log('LOG-d stack', this.stack);
     }
 }

package/src/scss/_flavorMixin.scss

@@ -0,0 +1,3 @@
+@mixin flavorSelection($varName) {
+  #{$varName}: var(--flavor-accent);
+}

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
-import { InputHTMLAttributes } from 'react';
-import { OptionalListener } from '../../Hooks/useListener';
-export type ImageType = {
-    name: string;
-    url: string;
-};
-export type ImageInputProps<OnChangeData> = RbmComponentProps<Override<InputHTMLAttributes<HTMLInputElement>, {
-    defaultValue?: ImageType;
-    value?: ImageType;
-    label?: string;
-    onChangeImage?: (image: ImageType, imageData: File) => void;
-} & OptionalListener<'onChange', OnChangeData>>>;
-declare function ImageInput<OnChangeData>({ className, style, value, defaultValue, onChangeImage, label, ...otherProps }: ImageInputProps<OnChangeData>): React.JSX.Element;
-declare const ImageInputMemo: typeof ImageInput;
-export { ImageInputMemo as ImageInput };

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

@@ -1,21 +0,0 @@
-import * as React from 'react';
-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>) => React.JSX.Element;

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

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
-import { ChangeEventHandler, InputHTMLAttributes, useCallback, useState } from 'react';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { Button } from '../Button/Button';
-
-import styles from './imageInput.scss';
-import { withMemo } from '../../../helper/withMemo';
-import classNames from 'classnames';
-
-export type ImageType = { name: string; url: string };
-
-export type ImageInputProps<OnChangeData> = RbmComponentProps<
-    Override<
-        InputHTMLAttributes<HTMLInputElement>,
-        {
-            defaultValue?: ImageType;
-            value?: ImageType;
-            label?: string;
-            onChangeImage?: (image: ImageType, imageData: File) => void;
-        } & OptionalListener<'onChange', OnChangeData>
-    >
->;
-
-// TODO use MultipleFileInput internal
-function ImageInput<OnChangeData>({
-    className,
-    style,
-    value,
-    defaultValue,
-    onChangeImage,
-    label,
-    ...otherProps
-}: ImageInputProps<OnChangeData>) {
-    // Variables
-    const [image, setImage] = useState(defaultValue);
-
-    // Refs
-
-    // States
-
-    // Selectors
-
-    // Callbacks
-    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
-    const getBase64 = useCallback((file: Blob) => {
-        return new Promise<string>((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-                resolve(reader.result as string);
-            };
-            reader.onerror = reject;
-            reader.readAsDataURL(file);
-        });
-    }, []);
-    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-        async (e) => {
-            if (!e.target.files || e.target.files.length === 0) {
-                return;
-            }
-
-            onChangeWithData(e);
-            const newUrl = await getBase64(e.target.files[0]);
-            const newValue = { name: e.target.files[0].name, url: newUrl };
-            setImage(newValue);
-
-            if (onChangeImage) {
-                onChangeImage(newValue, e.target.files[0]);
-            }
-        },
-        [onChangeWithData, onChangeImage, getBase64]
-    );
-
-    // Effects
-
-    // Other
-
-    // Render Functions
-
-    return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.fileInput, className)} style={style}>
-            {label ? <span>{label}</span> : null}
-            <img
-                src={(value ?? image)?.url}
-                alt={(value ?? image)?.name}
-                className={classNames(styles.preview, (value ?? image)?.url ? undefined : styles.empty)}
-            />
-            <Button __allowChildren="all">{(value ?? image)?.name ?? <i>Select Image</i>}</Button>
-            <input {...otherProps} className={styles.value} onChange={onChange} type="file" />
-        </label>
-    );
-}
-
-// Need ImageInputMemo for autocompletion of phpstorm
-const ImageInputMemo = withMemo(ImageInput, styles);
-export { ImageInputMemo as ImageInput };

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

@@ -1,240 +0,0 @@
-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);