@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/Hooks/useOnce.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function useOnce(cb: () => void | Promise<void>, condition: boolean) {
+    const called = useRef(false);
+    useEffect(() => {
+        if (!called.current && condition) {
+            called.current = true;
+            cb();
+        }
+    });
+}

package/src/Components/Icon/Icon.tsx

@@ -0,0 +1,45 @@
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { Override } from '../../TypeHelpers';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { withMemo } from '../../helper/withMemo';
+
+export type IconSource = IconProp | string;
+
+export type IconProps = RbmComponentProps<
+    Override<
+        FontAwesomeIconProps,
+        {
+            icon: IconSource;
+            alt?: string;
+        }
+    >
+>;
+
+function Icon({ icon, alt, className, style, title, ...props }: IconProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+    if (!alt && typeof icon === 'string') {
+        alt = icon;
+    }
+
+    // Render Functions
+
+    if (typeof icon === 'string' && icon.indexOf('.') !== -1) {
+        return <img src={icon} alt={alt} className={className} style={style} title={title} />;
+    }
+    return <FontAwesomeIcon {...props} icon={icon as IconProp} className={className} style={style} title={title} />;
+}
+
+const IconMemo = withMemo(Icon);
+export { IconMemo as Icon };

package/src/Components/Image/Image.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { CSSProperties, DOMAttributes } from 'react';
+import { Override } from '../../TypeHelpers';
+
+import styles from './image.scss';
+import classNames from 'classnames';
+
+export type ImageProps = RbmComponentProps<
+    Override<
+        Omit<React.ComponentPropsWithoutRef<'img'>, keyof DOMAttributes<'img'>>,
+        {
+            src: string;
+            style?: CSSProperties;
+            alt?: string;
+        }
+    >,
+    WithNoChildren
+>;
+
+function Image({ src, alt = '', className, style, ...otherProps }: ImageProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return <img src={src} alt={alt} className={classNames(styles.image, className)} style={style} {...otherProps} />;
+}
+
+// Need ImageMemo for autocompletion of phpstorm
+const ImageMemo = withMemo(Image, styles);
+export { ImageMemo as Image };

package/src/Components/Image/image.scss

@@ -0,0 +1,3 @@
+.image {
+  max-width: 100%;
+}

package/src/Components/InViewport/InViewport.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { useEffect, useRef, useState } from 'react';
+
+import styles from './inViewport.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+
+export type InViewportProps = RbmComponentProps<{
+    threshold?: number;
+    onInViewportChange: (isInViewport: boolean) => void;
+    root?: HTMLElement;
+    rootMargin?: string;
+}>;
+
+function InViewport({
+    threshold = 0,
+    root,
+    rootMargin,
+    onInViewportChange,
+    className,
+    style,
+    children,
+}: InViewportProps) {
+    // Variables
+
+    // States
+    const [intersectionObserver, setIntersectionObserver] = useState<IntersectionObserver>();
+
+    // Refs
+    const viewportElement = useRef<HTMLSpanElement>(null);
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        setIntersectionObserver((oldObserver) => {
+            oldObserver?.disconnect();
+
+            return new IntersectionObserver(
+                (entries) => {
+                    onInViewportChange(entries[0].isIntersecting);
+                },
+                {
+                    threshold: [threshold],
+                    root,
+                    rootMargin,
+                }
+            );
+        });
+    }, [onInViewportChange, threshold, root, rootMargin]);
+
+    useEffect(() => {
+        if (intersectionObserver && viewportElement.current) {
+            intersectionObserver.observe(viewportElement.current);
+        }
+    }, [intersectionObserver, viewportElement]);
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <span ref={viewportElement} className={classNames(styles.inViewport, className)} style={style}>
+            {children}
+        </span>
+    );
+}
+
+const InViewportMemo = withMemo(InViewport, styles);
+export { InViewportMemo as InViewport };

package/src/Components/InViewport/inViewport.scss

@@ -0,0 +1,3 @@
+.inViewport {
+  display: inline-block;
+}

package/src/Components/Layout/Block.tsx

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

package/src/Components/Layout/Container.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { RbmComponentProps } from '../RbmComponentProps';
+import classNames from 'classnames';
+
+import styles from './container.scss';
+
+export const CONTAINER_CLASSES = {
+    sm: styles['container-sm'],
+    md: styles['container-md'],
+    lg: styles['container-lg'],
+    xl: styles['container-xl'],
+    xxl: styles['container-xxl'],
+};
+
+export type ContainerProps = RbmComponentProps<{
+    fluid?: boolean | keyof typeof CONTAINER_CLASSES;
+}>;
+
+function Container({ fluid, className, children, style }: ContainerProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    const containerClass = typeof fluid === 'string' ? CONTAINER_CLASSES[fluid] : '';
+    return (
+        <div
+            className={classNames(
+                {
+                    [styles.container]: fluid === false,
+                    [styles.containerFluid]: fluid === true,
+                },
+                containerClass,
+                className
+            )}
+            style={style}
+        >
+            {children}
+        </div>
+    );
+}
+
+// Need ContainerMemo for autocompletion of phpstorm
+const ContainerMemo = withMemo(Container, styles);
+export { ContainerMemo as Container };

package/src/Components/Layout/Flex.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './layout.scss';
+import classNames from 'classnames';
+import { ComponentRef, ForwardedRef } from 'react';
+import { withForwardRef } from '../../helper/withForwardRef';
+import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
+
+export type FlexProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+    ViewWithoutListenersProps<AsType> & {
+        horizontal?: boolean;
+        grow?: boolean;
+    }
+>;
+
+function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
+    { children, as = 'div' as AsType, className, horizontal = false, grow = false, ...props }: FlexProps<AsType>,
+    ref?: ForwardedRef<ComponentRef<AsType>>
+) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <ViewWithoutListeners
+            className={classNames(className, styles.flex, {
+                [styles.horizontal]: horizontal,
+                [styles.grow]: grow,
+            })}
+            as={as as AsType}
+            ref={ref}
+            {...(props as ViewWithoutListenersProps<AsType>)}
+        >
+            {children}
+        </ViewWithoutListeners>
+    );
+}
+
+const tmp = withForwardRef(Flex, styles);
+export { tmp as Flex };

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Block } from '../Block';
+import classNames from 'classnames';
+
+import styles from './grid.scss';
+import { useMemo } from 'react';
+
+export type GridProps = RbmComponentProps<{
+    columns?: number;
+    rows?: number;
+}>;
+
+function Grid({ style, children, columns = 12, rows = 1, className, __allowChildren }: GridProps) {
+    // Variables
+    const appliedStyle = useMemo(
+        () => ({
+            ...style,
+            '--grid-columns': columns,
+            '--grid-rows': rows,
+        }),
+        [style, columns, rows]
+    );
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Block
+            style={appliedStyle}
+            className={classNames(styles.grid, className)}
+            __allowChildren={__allowChildren as 'all'}
+        >
+            {children}
+        </Block>
+    );
+}
+
+// Need RowMemo for autocompletion of phpstorm
+const GridMemo = withMemo(Grid, styles);
+export { GridMemo as Grid };

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

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { InlineBlock } from '../InlineBlock';
+import classNames from 'classnames';
+
+import styles from './grid.scss';
+
+export type GridItemProps = RbmComponentProps<{
+    size: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+    startXs?: number;
+    startSm?: number;
+    startMd?: number;
+    startLg?: number;
+    startXl?: number;
+    startXxl?: number;
+    orderXs?: number;
+    orderSm?: number;
+    orderMd?: number;
+    orderLg?: number;
+    orderXl?: number;
+    orderXxl?: number;
+}>;
+
+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) {
+    // Variables
+
+    const classes = [`item-xs-${size}`];
+    if (sm) {
+        classes.push(`item-sm-${sm}`);
+    }
+    if (md) {
+        classes.push(`item-md-${md}`);
+    }
+    if (lg) {
+        classes.push(`item-lg-${lg}`);
+    }
+    if (xl) {
+        classes.push(`item-xl-${xl}`);
+    }
+    if (xxl) {
+        classes.push(`item-xxl-${xxl}`);
+    }
+
+    if (startXs) {
+        classes.push(`start-xs-${startXs}`);
+    }
+    if (startSm) {
+        classes.push(`start-sm-${startSm}`);
+    }
+    if (startMd) {
+        classes.push(`start-md-${startMd}`);
+    }
+    if (startLg) {
+        classes.push(`start-lg-${startLg}`);
+    }
+    if (startXl) {
+        classes.push(`start-xl-${startXl}`);
+    }
+    if (startXxl) {
+        classes.push(`start-xxl-${startXxl}`);
+    }
+
+    if (orderXs) {
+        classes.push(`order-xs-${orderXs}`);
+    }
+    if (orderSm) {
+        classes.push(`order-sm-${orderSm}`);
+    }
+    if (orderMd) {
+        classes.push(`order-md-${orderMd}`);
+    }
+    if (orderLg) {
+        classes.push(`order-lg-${orderLg}`);
+    }
+    if (orderXl) {
+        classes.push(`order-xl-${orderXl}`);
+    }
+    if (orderXxl) {
+        classes.push(`order-xxl-${orderXxl}`);
+    }
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <InlineBlock
+            style={style}
+            className={classNames(...classes.map((name) => styles[name]), styles.item, className)}
+            __allowChildren={__allowChildren as 'all'}
+        >
+            {children}
+        </InlineBlock>
+    );
+}
+
+// Need GridItemMemo for autocompletion of phpstorm
+const GridItemMemo = withMemo(GridItem, styles);
+export { GridItemMemo as GridItem };

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

@@ -0,0 +1,43 @@
+@import "../../../scss/variables";
+@import "bootstrap/scss/mixins/breakpoints";
+
+$columns: 12;
+$breakpoints: $grid-breakpoints;
+
+.grid {
+  display: grid;
+  grid-template-rows: repeat(var(--grid-rows, 1), 1fr);
+  grid-template-columns: repeat(var(--grid-columns, $columns), 1fr);
+  gap: var(--grid-gap, 0);
+
+  .item {
+    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;
+        }
+      }
+
+      // 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
+    @include media-breakpoint-only($breakpoint, $breakpoints) {
+      @for $i from -10 through 10 {
+        .order-#{$breakpoint}-#{$i} {
+          order: $i;
+        }
+      }
+    }
+  }
+}

package/src/Components/Layout/Grow.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './layout.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+
+export type GrowProps = RbmComponentProps<{
+    center?: boolean;
+    weight?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+
+function Grow({ className, children, center = false, style, weight = 1 }: GrowProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <div
+            className={classNames(
+                styles.grow,
+                {
+                    [styles.center]: center,
+                    [styles.weight0]: weight === 0,
+                    [styles.weight1]: weight === 1,
+                    [styles.weight2]: weight === 2,
+                    [styles.weight3]: weight === 3,
+                    [styles.weight4]: weight === 4,
+                    [styles.weight5]: weight === 5,
+                    [styles.weight6]: weight === 6,
+                },
+                className
+            )}
+            style={style}
+        >
+            {children}
+        </div>
+    );
+}
+
+const tmp = withMemo(Grow, styles);
+export { tmp as Grow };

package/src/Components/Layout/Inline.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 { withForwardRef } from '../../helper/withForwardRef';
+import { ComponentRef, ForwardedRef } from 'react';
+
+export type InlineProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+    ViewWithoutListenersProps<AsType>
+>;
+
+function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+    { children, as = 'span' as AsType, className, ...props }: InlineProps<AsType>,
+    ref?: ForwardedRef<ComponentRef<AsType>>
+) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <ViewWithoutListeners
+            className={classNames(styles.inline, className)}
+            as={as as AsType}
+            {...(props as ViewWithoutListenersProps<AsType>)}
+            ref={ref}
+        >
+            {children}
+        </ViewWithoutListeners>
+    );
+}
+
+// Need InlineMemo for autocompletion of phpstorm
+const InlineMemo = withForwardRef(Inline, styles);
+export { InlineMemo as Inline };