@ainias42/react-bootstrap-mobile 0.1.15 → 0.1.17

package/src/Components/Menu/Submenu.tsx

@@ -0,0 +1,101 @@
+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;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}, WithNoStringAndChildrenProps>;
+
+export const Submenu = withMemo(function Submenu({
+                                                     children,
+                                                     label,
+                                                     icon,
+                                                     iconColor,
+                                                     className,
+                                                     style,
+                                                     disabled = false,
+                                                     onMouseEnter,
+                                                     onMouseLeave,
+                                                 }: 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);
+        onMouseEnter?.();
+    }, [onMouseEnter, window?.innerHeight, window?.innerWidth]);
+
+    const closeSubmenu = useCallback(() => {
+        setIsOpen(false);
+        onMouseLeave?.();
+    }, [onMouseLeave]);
+
+    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,110 @@
-
 .menu {
   position: fixed;
   background: #ffffff;
   border: 1px solid var(--border-light);
+  border-radius: 2px;
+  z-index: 1000;
+
+  &.hidden {
+    visibility: hidden;
+  }
+}
+
+.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;
+  }
 
-  .item {
-    display: block;
-    border-top: 1px solid var(--border-light);
-    padding: 8px;
-    margin: 0 4px;
+  .itemChildren {
+    flex: 1;
+    padding: 1px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    //border-top: 1px solid var(--border-light);
+    white-space: nowrap;
 
-    &:hover {
-      background-color: #f5f5f5;
+    .icon {
+      margin-right: 4px;
     }
+  }
+
+  &.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/Components/Text/Text.tsx

@@ -11,6 +11,7 @@ import { ViewProps } from '../Layout/View';
 export const TEXT_PRIO = {
     primary: styles.primary,
     secondary: styles.secondary,
+    tertiary: styles.tertiary,
     heading: styles.heading,
 };
 

package/src/Components/Text/text.scss

@@ -1,8 +1,12 @@
-$primaryColor: #000000;
-$secondaryColor: #717171;
+$primaryColor: #18181B; // Gray-900
+$secondaryColor: #71717a; // Gray-500
+$tertiaryColor: #A1A1AA; // Gray-400
 
 :root {
-  --text-primary-default-color: $primaryColor;
+  --text-primary-default-color: #{$primaryColor};
+  --text-prmary: #{$primaryColor};
+  --text-secondary: #{$secondaryColor};
+  --text-tertiary: #{$tertiaryColor};
 }
 
 .text {
@@ -21,11 +25,15 @@ $secondaryColor: #717171;
   }
 
   &.primary {
-    color: $primaryColor
+    color: var(--text-primary)
   }
 
   &.secondary {
-    color: $secondaryColor;
+    color: var(--text-secondary);
+  }
+
+  &.tertiary {
+    color: var(--text-tertiary);
   }
 
   &.xsmall {

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/_colors.scss

@@ -1,11 +1,11 @@
 @include design($material) {
   --flavor-accent: #37474f;
-  --flavor-focus: var(--flavor-accent);
 }
 
 :root {
   --border-light: #cecece;
   --border-strong: #717171;
+  --flavor-basic: #000000
 }
 
 @include design($flat) {

package/src/scss/_flavorMixin.scss

@@ -0,0 +1,10 @@
+@use 'sass:selector';
+
+@mixin flavorSelection($varName) {
+  &:global(.flavor-accent) {
+    #{$varName}: var(--flavor-accent);
+  }
+  &:global(.flavor-basic) {
+    #{$varName}: var(--flavor-basic);
+  }
+}

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