@ainias42/react-bootstrap-mobile 0.1.15 → 0.1.17

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

@@ -8,12 +8,14 @@ import styles from './grid.scss';
 
 export type GridItemProps = RbmComponentProps<{
     size: number;
+    xs?: number;
     sm?: number;
     md?: number;
     lg?: number;
     xl?: number;
     xxl?: number;
     print?: number;
+    startXxs?: number;
     startXs?: number;
     startSm?: number;
     startMd?: number;
@@ -21,6 +23,7 @@ export type GridItemProps = RbmComponentProps<{
     startXl?: number;
     startXxl?: number;
     startPrint?: number;
+    orderXxs?: number;
     orderXs?: number;
     orderSm?: number;
     orderMd?: number;
@@ -36,12 +39,14 @@ function GridItem({
     className,
     __allowChildren,
     size,
+    xs,
     sm,
     md,
     lg,
     xl,
     xxl,
     print,
+    startXxs,
     startXs,
     startMd,
     startSm,
@@ -49,6 +54,7 @@ function GridItem({
     startXl,
     startXxl,
     startPrint,
+    orderXxs,
     orderXs,
     orderSm,
     orderMd,
@@ -59,7 +65,10 @@ function GridItem({
 }: GridItemProps) {
     // Variables
 
-    const classes = [`item-xs-${size}`];
+    const classes = [`item-xxs-${size}`];
+    if (xs) {
+        classes.push(`item-xs-${xs}`);
+    }
     if (sm) {
         classes.push(`item-sm-${sm}`);
     }
@@ -79,6 +88,9 @@ function GridItem({
         classes.push(`item-print-${print}`);
     }
 
+    if (startXxs) {
+        classes.push(`start-xxs-${startXxs}`);
+    }
     if (startXs) {
         classes.push(`start-xs-${startXs}`);
     }
@@ -101,6 +113,9 @@ function GridItem({
         classes.push(`start-print-${startPrint}`);
     }
 
+    if (orderXxs) {
+        classes.push(`order-xxs-${orderXxs}`);
+    }
     if (orderXs) {
         classes.push(`order-xs-${orderXs}`);
     }

package/src/Components/Layout/Grid/grid.scss

@@ -1,8 +1,68 @@
 @import "../../../scss/variables";
 @import "bootstrap/scss/mixins/breakpoints";
 
+$grid-breakpoints: (
+        xxs: 0,
+        xs: 320px,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px,
+        xxl: 1400px
+);
+
 $columns: 12;
 $breakpoints: $grid-breakpoints;
+$containerBreakpoints: $grid-breakpoints;
+
+@mixin printClasses {
+  @media print {
+    @for $i from 1 through $columns {
+      .item-print-#{$i} {
+        grid-column: auto / span $i;
+      }
+    }
+
+    // Start with `1` because `0` is and invalid value.
+    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+    @for $i from 1 through ($columns - 1) {
+      .start-print-#{$i} {
+        grid-column-start: $i;
+      }
+    }
+
+    // Add classes for reordering
+    @for $i from -10 through 10 {
+      .order-print-#{$i} {
+        order: $i;
+      }
+    }
+  }
+}
+
+@mixin contentMin($breakpointName) {
+  @for $i from 1 through $columns {
+    .item-#{$breakpointName}-#{$i} {
+      grid-column: auto / span $i;
+    }
+  }
+
+  // Start with `1` because `0` is and invalid value.
+  // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+  @for $i from 1 through ($columns - 1) {
+    .start-#{$breakpointName}-#{$i} {
+      grid-column-start: $i;
+    }
+  }
+}
+
+@mixin contentOnly($breakpointName) {
+  @for $i from -10 through 10 {
+    .order-#{$breakpointName}-#{$i} {
+      order: $i;
+    }
+  }
+}
 
 .grid {
   display: grid;
@@ -14,53 +74,70 @@ $breakpoints: $grid-breakpoints;
     padding: 4px;
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @for $i from 1 through $columns {
-        .item-#{$breakpoint}-#{$i} {
-          grid-column: auto / span $i;
-        }
-      }
+  &.useContainerWidth {
+    container-type: inline-size;
 
-      // Start with `1` because `0` is and invalid value.
-      // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-      @for $i from 1 through ($columns - 1) {
-        .start-#{$breakpoint}-#{$i} {
-          grid-column-start: $i;
-        }
+    @each $breakpoint in map-keys($containerBreakpoints) {
+      $min: breakpoint-min($breakpoint, $containerBreakpoints);
+      @if $min {
+      @container (min-width: #{$min}) {
+        @include contentMin($breakpoint);
+      }
+      } @else {
+        @include contentMin($breakpoint);
       }
-    }
 
-    // Add classes for reordering
-    @include media-breakpoint-only($breakpoint, $breakpoints) {
-      @for $i from -10 through 10 {
-        .order-#{$breakpoint}-#{$i} {
-          order: $i;
-        }
+      // Add classes for reordering
+      $min: breakpoint-min($breakpoint, $containerBreakpoints);
+      $next: breakpoint-next($breakpoint, $containerBreakpoints);
+      $max: breakpoint-max($next, $containerBreakpoints);
+
+      @if $min != null and $max != null {
+      @container (min-width: #{$min}) and (max-width: #{$max}) {
+        @include contentOnly($breakpoint);
+      }
+      } @else if $max == null {
+      @container (min-width: #{$min}) {
+        @include contentOnly($breakpoint);
+      }
+      } @else if $min == null {
+      @container (max-width: #{$max}) {
+        @include contentOnly($breakpoint);
+      }
       }
     }
+
+    @include printClasses;
   }
 
-  @media print {
-    @for $i from 1 through $columns {
-      .item-print-#{$i} {
-        grid-column: auto / span $i;
-      }
-    }
+  &:not(.useContainerWidth) {
+    @each $breakpoint in map-keys($breakpoints) {
+      @include media-breakpoint-up($breakpoint, $breakpoints) {
+        @for $i from 1 through $columns {
+          .item-#{$breakpoint}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
 
-    // Start with `1` because `0` is and invalid value.
-    // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-    @for $i from 1 through ($columns - 1) {
-      .start-print-#{$i} {
-        grid-column-start: $i;
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .start-#{$breakpoint}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
       }
-    }
 
-    // Add classes for reordering
-    @for $i from -10 through 10 {
-      .order-print-#{$i} {
-        order: $i;
+      // Add classes for reordering
+      @include media-breakpoint-only($breakpoint, $breakpoints) {
+        @for $i from -10 through 10 {
+          .order-#{$breakpoint}-#{$i} {
+            order: $i;
+          }
+        }
       }
     }
+
+    @include printClasses;
   }
 }

package/src/Components/Menu/HoverMenu.tsx

@@ -0,0 +1,82 @@
+import {withMemo} from "../../helper/withMemo";
+import React, {useCallback, useRef, useState} from "react";
+import {Clickable} from "../Clickable/Clickable";
+import classNames from "classnames";
+import styles from "./menu.scss";
+import {RbmChildWithoutString, RbmComponentProps, WithNoStringAndChildrenProps} from "../RbmComponentProps";
+import {Menu} from "./Menu";
+
+export type HoverMenuProps = RbmComponentProps<{
+    items: RbmChildWithoutString,
+    openToSide?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+}, WithNoStringAndChildrenProps>;
+
+export const HoverMenu = withMemo(function HoverMenu({
+                                                         children,
+                                                         items,
+                                                         className,
+                                                         style,
+                                                         onClick,
+    onClose,
+                                                         openToSide
+                                                     }: HoverMenuProps) {
+    // Refs
+
+    // States/Variables/Selectors
+    const hoverItemRef = useRef<HTMLDivElement>(null);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({x: 0, y: 0});
+    const [offset, setOffset] = useState({x: 0, y: 0});
+
+    // Dispatch
+
+    // Callbacks
+    const recalculatePosition = useCallback(() => {
+        if (!hoverItemRef.current) {
+            return;
+        }
+        const {top, left, bottom, right, width, height} = hoverItemRef.current.getBoundingClientRect();
+        if (openToSide) {
+            setPosition({x: right, y: top});
+            setOffset({x: width, y: -height});
+        } else {
+            setPosition({x: left, y: bottom});
+            setOffset({x: -width, y: height});
+        }
+    }, [openToSide]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+        onClose?.();
+    }, [onClose]);
+
+    const open = useCallback(() => {
+        recalculatePosition();
+        setIsOpen(true);
+    }, [recalculatePosition]);
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <Clickable
+        onMouseEnter={open}
+        onMouseLeave={close}
+        useReactOnMouseLeave={true}
+        onClick={onClick}
+        className={classNames(styles.hoverMenu, {[styles.open]: isOpen}, className)}
+        style={style}
+        ref={hoverItemRef}
+        __allowChildren="all"
+    >
+        {children}
+        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y} className={classNames({[styles.hidden]: !isOpen})}>
+            {items}
+        </Menu>
+    </Clickable>;
+}, styles);

package/src/Components/Menu/Menu.tsx

@@ -1,31 +1,54 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { Icon, IconSource } from '../Icon/Icon';
-import { Block } from '../Layout/Block';
+import {withMemo} from '../../helper/withMemo';
+import {RbmComponentProps} from '../RbmComponentProps';
+import {IconSource} from '../Icon/Icon';
+import {Block} from '../Layout/Block';
 import classNames from 'classnames';
-
 import styles from './menu.scss';
-import { Text } from '../Text/Text';
-import { Clickable } from '../Clickable/Clickable';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { withRenderBrowserOnly } from '../../helper/withRenderBrowserOnly';
-import { useWindow } from '../../WindowContext/WindowContext';
+import {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {withRenderBrowserOnly} from '../../helper/withRenderBrowserOnly';
+import {useWindow} from '../../WindowContext/WindowContext';
+import {MenuItem} from "./MenuItem";
+import {MenuCloseContextProvider} from "./MenuCloseContext";
+import {createPortal} from "react-dom";
 
-export type MenuItem = {
+export type MenuItemType = {
     label: string;
-    callback: () => void;
-    icon?: IconSource;
+    icon?: IconSource | { icon: IconSource, color: string };
     key: string;
+    className?: string;
+    callback: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
 
 export type MenuProps = RbmComponentProps<
-    { items: MenuItem[]; x: number; y: number; isOpen: boolean; onClose: () => void },
-    WithNoChildren
+    {
+        items?: MenuItemType[];
+        x: number;
+        y: number;
+        isOpen: boolean;
+        onClose: () => void,
+        offsetX?: number,
+        offsetY?: number
+    }
 >;
 
+export const MENU_CONTAINER_CLASS = "rbm-menu-container";
+
 export const Menu = withMemo(
-    withRenderBrowserOnly(function Menu({ className, style, items, y, x, isOpen, onClose }: MenuProps) {
+    withRenderBrowserOnly(function Menu({
+                                            className,
+                                            style,
+                                            items,
+                                            y,
+                                            x,
+                                            isOpen,
+                                            onClose,
+                                            children,
+                                            offsetY = 0,
+                                            offsetX = 0,
+                                        }: MenuProps) {
         // Variables
 
         // Refs
@@ -33,19 +56,16 @@ export const Menu = withMemo(
         const window = useWindow();
 
         // States
+        const [portalContainer] = useState<HTMLDivElement>(() => {
+            return document.createElement('div');
+        });
+
         const [innerX, setInnerX] = useState(x);
         const [innerY, setInnerY] = useState(y);
 
         // Selectors
 
         // Callbacks
-        const callItemCallback = useCallback(
-            (_: any, cb: () => void) => {
-                onClose();
-                cb();
-            },
-            [onClose]
-        );
 
         // Effects
         useEffect(() => {
@@ -55,20 +75,40 @@ export const Menu = withMemo(
                         onClose();
                     }
                 };
-                window?.addEventListener('mousedown', listener, { capture: true });
-                return () => window?.removeEventListener('mousedown', listener, { capture: true });
+                window?.addEventListener('mousedown', listener, {capture: true});
+                return () => window?.removeEventListener('mousedown', listener, {capture: true});
             }
             return undefined;
         }, [isOpen, onClose, window]);
 
+        useLayoutEffect(() => {
+            if (!isOpen) {
+                return;
+            }
+            let elem = window?.document.body.querySelector("." + MENU_CONTAINER_CLASS);
+            if (!elem) {
+                elem = window?.document.body;
+            }
+            elem?.appendChild(portalContainer)
+        }, [isOpen, portalContainer, window?.document.body]);
+
+
         useLayoutEffect(() => {
             if (!menuRef.current) {
                 return;
             }
-            const { width } = getComputedStyle(menuRef.current);
-            const newX = Math.min(x, (window?.innerWidth ?? 0) - parseFloat(width));
+            const width = parseFloat(getComputedStyle(menuRef.current).width);
+            let newX = x;
+            if (newX > (window?.innerWidth ?? 0) - width) {
+                newX -= width + offsetX;
+            }
+
+            if (newX < 0) {
+                newX = 0;
+            }
+
             setInnerX(newX);
-        }, [window?.innerWidth, x]);
+        }, [offsetX, window?.innerWidth, x]);
 
         useLayoutEffect(() => {
             if (!menuRef.current) {
@@ -77,10 +117,15 @@ export const Menu = withMemo(
             const height = parseFloat(getComputedStyle(menuRef.current).height);
             let newY = y;
             if (newY > (window?.innerHeight ?? 0) - height) {
-                newY -= height;
+                newY -= height + offsetY;
+            }
+
+            if (newY < 0) {
+                newY = 0;
             }
+
             setInnerY(newY);
-        }, [window?.innerHeight, y]);
+        }, [offsetY, window?.innerHeight, y]);
 
         // Other
 
@@ -90,23 +135,32 @@ export const Menu = withMemo(
         }
 
         return (
-            <Block
-                className={classNames(className, styles.menu)}
-                style={{ ...style, top: innerY, left: innerX }}
-                ref={menuRef}
-            >
-                {items.map((item) => (
-                    <Clickable
-                        onClick={callItemCallback}
-                        onClickData={item.callback}
-                        className={styles.item}
-                        key={item.key}
-                    >
-                        {!!item.icon && <Icon icon={item.icon} />}
-                        <Text>{item.label}</Text>
-                    </Clickable>
-                ))}
-            </Block>
+            <>
+                {createPortal(
+                    <MenuCloseContextProvider value={onClose}>
+                        <Block
+                            className={classNames(className, styles.menu)}
+                            style={{...style, top: innerY, left: innerX}}
+                            ref={menuRef}
+                            __allowChildren="all"
+                        >
+                            {items?.map((item) => {
+                                const icon = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.icon : item.icon;
+                                const iconColor = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.color : undefined;
+
+                                return <MenuItem key={item.key}
+                                                 onClick={item.callback}
+                                                 className={classNames(styles.item, item.className)}
+                                                 onMouseEnter={item.onMouseEnter}
+                                                 icon={icon}
+                                                 iconColor={iconColor}
+                                                 onMouseLeave={item.onMouseLeave}>{item.label}</MenuItem>;
+                            })}
+                            {children}
+                        </Block>
+                    </MenuCloseContextProvider>
+                    , portalContainer)}
+            </>
         );
     }),
     styles

package/src/Components/Menu/MenuCloseContext.ts

@@ -0,0 +1,10 @@
+import React, {useContext} from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const MenuCloseContext = React.createContext<() => void>(() => {});
+
+export const MenuCloseContextProvider = MenuCloseContext.Provider;
+
+export function useMenuClose() {
+    return useContext(MenuCloseContext);
+}

package/src/Components/Menu/MenuDivider.tsx

@@ -0,0 +1,22 @@
+import {withMemo} from "../../helper/withMemo";
+import {Block} from "../Layout/Block";
+import styles from "./menu.scss";
+import React from "react";
+
+export const MenuDivider = withMemo(function MenuDivider() {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <Block className={styles.divider}/>;
+}, styles);

package/src/Components/Menu/MenuItem.tsx

@@ -0,0 +1,95 @@
+import {Icon, IconSource} from "../Icon/Icon";
+import {withMemo} from "../../helper/withMemo";
+import {Clickable} from "../Clickable/Clickable";
+import classNames from "classnames";
+import styles from "./menu.scss";
+import {Text} from "../Text/Text";
+import React, {ReactNode, useCallback} from "react";
+import {RbmComponentProps, WithChildren} from "../RbmComponentProps";
+import Element = React.JSX.Element;
+import {useMenuClose} from "./MenuCloseContext";
+import {Block} from "../Layout/Block";
+
+export type MenuItemProps<Item = undefined> = RbmComponentProps<{
+    icon?: IconSource;
+    iconColor?: string;
+    className?: string;
+    children: string | ReactNode
+    disabled?: boolean;
+    active?: boolean;
+} & ({
+    onClick: (item: Item) => void;
+    onMouseEnter?: (item: Item) => void;
+    onMouseLeave?: (item: Item) => void;
+    item?: undefined
+} | {
+    onClick: (item: Item) => void;
+    onMouseEnter?: (item: Item) => void;
+    onMouseLeave?: (item: Item) => void;
+    item: Item
+}), WithChildren>
+
+export const MenuItem = withMemo(function MenuItem<Item>({
+                                                             children,
+                                                             icon,
+                                                             iconColor,
+                                                             className,
+                                                             onClick,
+                                                             onMouseEnter,
+                                                             onMouseLeave,
+                                                             active,
+                                                             item,
+                                                             disabled = false,
+                                                             ...props
+                                                         }: MenuItemProps<Item>) {
+    // Refs
+
+    // States/Variables/Selectors
+    const close = useMenuClose();
+
+    // Dispatch
+
+    // Callbacks
+    const onClickInner = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        onClick(item as Item);
+        close();
+    }, [close, disabled, item, onClick]);
+
+    const onMouseEnterInner = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        onMouseEnter?.(item as Item);
+    }, [disabled, item, onMouseEnter]);
+
+    const onMouseLeaveInner = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        onMouseLeave?.(item as Item);
+    }, [disabled, item, onMouseLeave]);
+
+    // Effects
+
+    // Other
+    const childElements = typeof children === "string" ? <Text>{children}</Text> : children as Element;
+
+    // RenderFunctions
+
+    return <Clickable
+        className={classNames(styles.item, {[styles.disabled]: disabled, [styles.active]: active}, className)}
+        {...props}
+        onClick={onClickInner}
+        onMouseEnter={onMouseEnterInner}
+        onMouseLeave={onMouseLeaveInner}
+        __allowChildren="all"
+    >
+        <Block className={classNames(styles.itemChildren)}>
+            {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon}/>}
+            {childElements}
+        </Block>
+    </Clickable>;
+}, styles, "text");