@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/Layout/InlineBlock.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import classNames from 'classnames';
+
+import styles from './layout.scss';
+import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
+import { ComponentRef, ForwardedRef } from 'react';
+import { withForwardRef } from '../../helper/withForwardRef';
+
+export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+    ViewWithoutListenersProps<AsType>
+>;
+
+function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+    { children, as = 'span' as AsType, className, ...props }: InlineBlockProps<AsType>,
+    ref?: ForwardedRef<ComponentRef<AsType>>
+) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <ViewWithoutListeners
+            {...(props as ViewWithoutListenersProps<AsType>)}
+            className={classNames(styles.inlineBlock, className)}
+            as={as as AsType}
+            ref={ref}
+        >
+            {children}
+        </ViewWithoutListeners>
+    );
+}
+
+// Need InlineMemo for autocompletion of phpstorm
+const InlineBlockMemo = withForwardRef(InlineBlock, styles);
+export { InlineBlockMemo as InlineBlock };

package/src/Components/Layout/View.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentRef, ForwardedRef, PropsWithChildren, ReactElement, RefAttributes } from 'react';
+import { Override } from '../../TypeHelpers';
+
+export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
+    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode }>
+>;
+
+function View<AsType extends keyof JSX.IntrinsicElements>(
+    { children, as, ...otherProps }: ViewProps<AsType>,
+    ref?: ForwardedRef<ComponentRef<AsType>>
+) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    const element = (as as keyof JSX.IntrinsicElements) ?? 'span';
+    const props = {
+        ...otherProps,
+        ref,
+    };
+    return React.createElement(element, props, children);
+}
+
+// Need ViewMemo for autocompletion of phpstorm
+const ViewMemo: <AsType extends keyof JSX.IntrinsicElements>(
+    props: ViewProps<AsType> & RefAttributes<ComponentRef<AsType>>
+) => ReactElement | null = React.memo(React.forwardRef(View));
+export { ViewMemo as View };

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentRef, DOMAttributes, ForwardedRef, ReactElement, RefAttributes } from 'react';
+import { View, ViewProps } from './View';
+
+export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
+    ViewProps<AsType>,
+    keyof DOMAttributes<AsType>
+> & { children?: React.ReactNode };
+
+function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
+    { children, ...props }: ViewWithoutListenersProps<AsType>,
+    ref?: ForwardedRef<ComponentRef<AsType>>
+) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <View {...props} ref={ref}>
+            {children}
+        </View>
+    );
+}
+
+// Need ViewWithoutListenersMemo for autocompletion of phpstorm
+const ViewWithoutListenersMemo: <AsType extends keyof JSX.IntrinsicElements>(
+    props: ViewWithoutListenersProps<AsType> & RefAttributes<ComponentRef<AsType>>
+) => ReactElement | null = React.memo(React.forwardRef(ViewWithoutListeners));
+export { ViewWithoutListenersMemo as ViewWithoutListeners };

package/src/Components/Layout/container.scss

@@ -0,0 +1,12 @@
+@import "../../scss/variables";
+@import "bootstrap/scss/mixins/container";
+@import "bootstrap/scss/mixins/breakpoints";
+
+@import "bootstrap/scss/containers";
+
+
+@media (min-width: 1400px) {
+  .container-xxl {
+    max-width: 1400px;
+  }
+}

package/src/Components/Layout/layout.scss

@@ -0,0 +1,56 @@
+.flex {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+}
+
+.grow {
+  &.weight0 {
+    flex: 0
+  }
+
+  &.weight1 {
+    flex: 1
+  }
+
+  &.weight2 {
+    flex: 2
+  }
+
+  &.weight3 {
+    flex: 3
+  }
+
+  &.weight4 {
+    flex: 4
+  }
+
+  &.weight5 {
+    flex: 5
+  }
+
+  &.weight6 {
+    flex: 6
+  }
+
+  &.center {
+    text-align: center;
+  }
+}
+
+.block {
+  display: block;
+}
+
+.inlineBlock {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}

package/src/Components/List/BulletList/BulletList.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import { RbmComponentProps } from '../../RbmComponentProps';
+
+export type BulletListProps = RbmComponentProps<{ numbered?: boolean }>;
+
+function BulletList({ numbered = false, className, children, style }: BulletListProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+    const props = { className, style };
+
+    // Render Functions
+    if (numbered) {
+        return <ol {...props}>{children}</ol>;
+    }
+
+    return <ul {...props}>{children}</ul>;
+}
+
+// Need BulletListMemo for autocompletion of phpstorm
+const BulletListMemo = withMemo(BulletList);
+export { BulletListMemo as BulletList };

package/src/Components/List/BulletList/ListItem.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { EmptyProps } from '../../../helper/EmptyProps';
+
+export type ListItemProps = RbmComponentProps<EmptyProps>;
+
+function ListItem({ className, children, style }: ListItemProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <li className={className} style={style}>
+            {children}
+        </li>
+    );
+}
+
+// Need ListItemMemo for autocompletion of phpstorm
+const ListItemMemo = withMemo(ListItem);
+export { ListItemMemo as ListItem };

package/src/Components/List/List.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { ComponentType, CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './list.scss';
+import { withMemo } from '../../helper/withMemo';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
+
+export type ListProps<ItemType> = RbmComponentProps<{
+    renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
+    itemHeight?: number;
+    items: ItemType[];
+    renderBefore?: (item: ItemType, index: number) => ReactNode;
+    keyExtractor?: (item: ItemType, index: number) => string;
+}>;
+
+export const List = withMemo(function List<ItemType>({
+    items,
+    renderItem,
+    itemHeight: initialItemHeight = 0,
+    className,
+    style,
+}: ListProps<ItemType>) {
+    // Variables
+
+    // States
+    const [itemHeight, setItemHeight] = useState(initialItemHeight);
+
+    // Refs
+
+    // Callbacks
+    const renderItemInner = useCallback<ComponentType<ListChildComponentProps>>(
+        ({ index, style: itemStyle }) => {
+            return renderItem(items[index], itemStyle, index);
+        },
+        [items, renderItem]
+    );
+
+    const setHeight = useCallback<SizeCalculatorProps['onSize']>((_, height) => {
+        setItemHeight(height);
+    }, []);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <AutoSizer>
+            {({ height, width }) => {
+                return (
+                    <>
+                        {initialItemHeight === 0 && items.length > 0 && (
+                            <SizeCalculator onSize={setHeight} absolute={true}>
+                                {renderItem(
+                                    items[0],
+                                    {
+                                        position: 'relative',
+                                        top: '0px',
+                                        left: '0px',
+                                        width: '100%',
+                                        zIndex: -1,
+                                    },
+                                    0
+                                )}
+                            </SizeCalculator>
+                        )}
+                        <FixedSizeList
+                            height={height}
+                            itemCount={items.length}
+                            width={width}
+                            itemSize={itemHeight}
+                            style={style}
+                            className={className}
+                            itemData={items}
+                        >
+                            {renderItemInner}
+                        </FixedSizeList>
+                    </>
+                );
+            }}
+        </AutoSizer>
+    );
+},
+styles);

package/src/Components/List/list.scss

@@ -0,0 +1,30 @@
+.list {
+  width: 100%;
+  background-color: white;
+  list-style-type: none;
+  background-image: linear-gradient(var(--border-light), var(--border-light)),
+  linear-gradient(var(--border-light), var(--border-light));
+  background-size: 100% 1px, 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom, top;
+  padding: 0;
+  margin: 0;
+
+  .item {
+    position: relative;
+    width: 100%;
+    list-style: none;
+    display: flex;
+    padding: 0 0 0 0.9rem;
+
+    .itemMain {
+      flex-grow: 1;
+      display: flex;
+      background-image: linear-gradient(0deg, var(--border-light), var(--border-light) 100%);
+      background-size: 100% 1px;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      padding: 0.75rem 0 0.75rem 0;
+    }
+  }
+}

package/src/Components/LoadingArea/LoadingArea.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { LoadingCircle } from '../LoadingCircle/LoadingCircle';
+
+import styles from './loadingArea.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+
+export type LoadingAreaProps = RbmComponentProps<{
+    opacity?: number;
+    loading: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fullSize?: boolean;
+}>;
+
+function LoadingArea({
+    loading,
+    fullWidth = false,
+    fullSize = false,
+    fullHeight = false,
+    opacity = 0.65,
+    className,
+    style,
+    children,
+}: LoadingAreaProps) {
+    // Variables
+    if (fullSize) {
+        fullHeight = true;
+        fullWidth = true;
+    }
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <span
+            className={classNames(styles.loadingArea, className, {
+                'full-height': fullHeight,
+                'full-width': fullWidth,
+            })}
+            style={style}
+        >
+            {children}
+            {loading ? (
+                <span className={styles.curtain} style={{ opacity }}>
+                    <LoadingCircle />
+                </span>
+            ) : null}
+        </span>
+    );
+}
+
+const LoadingAreaMemo = withMemo(LoadingArea, styles);
+export { LoadingAreaMemo as LoadingArea };

package/src/Components/LoadingArea/loadingArea.scss

@@ -0,0 +1,19 @@
+.loadingArea {
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  display: contents;
+
+  .curtain {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #efeff4;
+  }
+}

package/src/Components/LoadingCircle/LoadingCircle.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './loadingCircle.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+
+export type LoadingCircleProps = RbmComponentProps<{
+    size?: number;
+}>;
+
+function LoadingCircle({ size = 32, className, style }: LoadingCircleProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <svg
+            className={classNames(styles.loadingCircle, className)}
+            viewBox={`0 0 ${size} ${size}`}
+            width={size}
+            height={size}
+            style={style}
+        >
+            <circle cx="50%" cy="50%" r="40%" fill="none" className={styles.spinner} />
+        </svg>
+    );
+}
+
+const LoadingCircleMemo = withMemo(LoadingCircle, styles);
+export { LoadingCircleMemo as LoadingCircle };

package/src/Components/LoadingCircle/loadingCircle.scss

@@ -0,0 +1,42 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+@keyframes loadingCircle {
+  0% {
+    stroke-dasharray: 10%, 241.32%;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 201%, 50.322%;
+    stroke-dashoffset: -100%;
+  }
+  100% {
+    stroke-dasharray: 10%, 241.32%;
+    stroke-dashoffset: -251.32%;
+  }
+}
+
+@keyframes loadingCircleRotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loadingCircle {
+  .spinner {
+    stroke-miterlimit: 10;
+    transform-origin: 50%;
+    animation: loadingCircle 2s ease-in-out infinite, loadingCircleRotate 1.5s linear infinite;
+    stroke: var(--flavor-accent);
+
+    @include design($material) {
+      stroke-width: 9%;
+    }
+    @include design($flat) {
+      stroke-width: 5%;
+    }
+  }
+}

package/src/Components/Menu/Menu.tsx

@@ -0,0 +1,113 @@
+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 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';
+
+export type MenuItem = {
+    label: string;
+    callback: () => void;
+    icon?: IconSource;
+    key: string;
+};
+
+export type MenuProps = RbmComponentProps<
+    { items: MenuItem[]; x: number; y: number; isOpen: boolean; onClose: () => void },
+    WithNoChildren
+>;
+
+export const Menu = withMemo(
+    withRenderBrowserOnly(function Menu({ className, style, items, y, x, isOpen, onClose }: MenuProps) {
+        // Variables
+
+        // Refs
+        const menuRef = useRef<HTMLDivElement>(null);
+        const window = useWindow();
+
+        // States
+        const [innerX, setInnerX] = useState(x);
+        const [innerY, setInnerY] = useState(y);
+
+        // Selectors
+
+        // Callbacks
+        const callItemCallback = useCallback(
+            (_: any, cb: () => void) => {
+                onClose();
+                cb();
+            },
+            [onClose]
+        );
+
+        // Effects
+        useEffect(() => {
+            if (isOpen) {
+                const listener = (e: MouseEvent) => {
+                    if (!menuRef.current?.contains(e.target as Node)) {
+                        onClose();
+                    }
+                };
+                window?.addEventListener('mousedown', listener, { capture: true });
+                return () => window?.removeEventListener('mousedown', listener, { capture: true });
+            }
+            return undefined;
+        }, [isOpen, onClose, window]);
+
+        useLayoutEffect(() => {
+            if (!menuRef.current) {
+                return;
+            }
+            const { width } = getComputedStyle(menuRef.current);
+            const newX = Math.min(x, (window?.innerWidth ?? 0) - parseFloat(width));
+            setInnerX(newX);
+        }, [window?.innerWidth, x]);
+
+        useLayoutEffect(() => {
+            if (!menuRef.current) {
+                return;
+            }
+            const height = parseFloat(getComputedStyle(menuRef.current).height);
+            let newY = y;
+            if (newY > (window?.innerHeight ?? 0) - height) {
+                newY -= height;
+            }
+            setInnerY(newY);
+        }, [window?.innerHeight, y]);
+
+        // Other
+
+        // Render Functions
+        if (!isOpen) {
+            return null;
+        }
+
+        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>
+        );
+    }),
+    styles
+);

package/src/Components/Menu/menu.scss

@@ -0,0 +1,21 @@
+
+.menu {
+  position: fixed;
+  background: #ffffff;
+  border: 1px solid var(--border-light);
+
+  .item {
+    display: block;
+    border-top: 1px solid var(--border-light);
+    padding: 8px;
+    margin: 0 4px;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &:first-child {
+      border-top: none;
+    }
+  }
+}