@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/FormElements/Switch/switch.scss

@@ -0,0 +1,149 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  > label {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .label {
+    &:not(:empty) {
+      margin-left: 0.2rem;
+      margin-right: 0.2rem;
+    }
+  }
+
+  input {
+    display: none;
+  }
+
+  .toggle {
+    width: 40px;
+    display: inline-block;
+    position: relative;
+    transition-property: all;
+    transition-duration: 0.35s;
+    transition-timing-function: ease-out;
+    border-radius: 30px;
+
+    .handle {
+      transition-property: all;
+      transition-duration: 0.35s;
+      transition-timing-function: cubic-bezier(.59, .01, .5, .99);
+      border-radius: 100%;
+      background-clip: padding-box;
+      position: absolute;
+      content: '';
+    }
+  }
+
+  %dual-handle-material {
+    background-color: var(--flavor-accent);
+    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
+  }
+
+  %dual-toggle-flat {
+    background-color: #44db5e;
+    box-shadow: inset 0 0 0 2px #44db5e;
+  }
+
+  %dual-handle-flat {
+    background-color: #ffffff;
+    top: 2px;
+    box-shadow: 0 3px 2px rgb(0 0 0 / 25%);
+  }
+
+  @include design($material) {
+    input:checked + {
+      .toggle {
+        //box-shadow: none;
+
+        .handle {
+          @extend %dual-handle-material;
+          left: 18px;
+        }
+      }
+    }
+
+    .toggle {
+      background-color: rgba(55, 71, 79, 0.5);
+
+      margin-top: 4px;
+      height: 15px;
+
+      .handle {
+        margin-top: -4px;
+        width: 22px;
+        height: 22px;
+        background-color: #f1f1f1;
+        left: 0;
+        box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
+
+        &:before {
+          background: transparent;
+          content: '';
+          display: block;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          z-index: 0;
+          box-shadow: 0 0 0 0 rgb(0 0 0 / 12%);
+          transition: box-shadow 0.1s linear;
+        }
+      }
+    }
+  }
+
+  @include design($flat) {
+    input:checked + {
+      .toggle {
+        @extend %dual-toggle-flat;
+
+        .handle {
+          @extend %dual-handle-flat;
+          left: 19px
+        }
+      }
+    }
+
+    .toggle {
+      height: 23px;
+
+      background-color: white;
+      box-shadow: inset 0 0 0 2px #e5e5e5;
+
+      .handle {
+        height: 19px;
+        width: 19px;
+        background-color: #ffffff;
+        left: 2px;
+        top: 2px;
+        box-shadow: 0 0 1px 0 rgb(0 0 0 / 25%), 0 3px 2px rgb(0 0 0 / 25%);
+      }
+    }
+  }
+
+  &.dual {
+    @include design($material) {
+      .toggle {
+        .handle {
+          @extend %dual-handle-material;
+        }
+      }
+    }
+    @include design($flat) {
+      .toggle {
+        @extend %dual-toggle-flat;
+
+        .handle {
+          @extend %dual-handle-flat;
+        }
+      }
+    }
+  }
+}

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { TextareaHTMLAttributes, useCallback, KeyboardEvent, ChangeEvent } from 'react';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+import { withMemo } from '../../../helper/withMemo';
+
+import styles from './textarea.scss';
+import classNames from 'classnames';
+
+export type TextareaProps<OnChangeData> = RbmComponentProps<
+    Override<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        {
+            label?: string;
+            onChangeText?: (newText: string) => void;
+            onEnter?: (newText: string) => void;
+        } & OptionalListener<'onChange', OnChangeData>
+    >
+>;
+
+function Textarea<OnChangeData>({
+    label,
+    className,
+    style,
+    onKeyPress,
+    onChangeText,
+    onEnter,
+    ...otherProps
+}: TextareaProps<OnChangeData>) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const onChange = useCallback(
+        (e: ChangeEvent<HTMLTextAreaElement>) => {
+            if (onChangeText) {
+                onChangeText(e.target.value);
+            }
+            onChangeWithData(e);
+        },
+        [onChangeWithData, onChangeText]
+    );
+
+    const realOnKeyPress = useCallback(
+        (e: KeyboardEvent<HTMLTextAreaElement>) => {
+            if (onKeyPress) {
+                onKeyPress(e);
+            }
+            if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+                onEnter((e.target as HTMLTextAreaElement).value);
+            }
+        },
+        [onEnter, onKeyPress]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <label className={classNames(styles.container, className)} style={style}>
+            {label ? <span className={styles.label}>{label}</span> : null}
+            <textarea {...otherProps} onKeyPress={realOnKeyPress} className={styles.textarea} onChange={onChange} />
+        </label>
+    );
+}
+
+// Need TextareaMemo for autocompletion of phpstorm
+const TextareaMemo = withMemo(Textarea, styles);
+export { TextareaMemo as Textarea };

package/src/Components/FormElements/Textarea/textarea.scss

@@ -0,0 +1,22 @@
+.container {
+  width: 100%;
+  height: 10rem;
+
+  .label {
+    display: block;
+  }
+
+  textarea {
+    background-color: #efeff4;
+    color: #1f1f21;
+    box-shadow: none;
+    appearance: none;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    outline: none;
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid var(--border-light);
+  }
+}

package/src/Components/FormElements/hooks/useOnChangeDone.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement | null>) {
+    const innerRef = useRef<HTMLInputElement>(null);
+    const usedRef = ref ?? innerRef;
+
+    useEffect(() => {
+        const elem = usedRef.current;
+        elem?.addEventListener('change', onChangeDone);
+        return () => {
+            elem?.removeEventListener('change', onChangeDone);
+        };
+    }, [ref, onChangeDone, usedRef]);
+
+    return usedRef;
+}

package/src/Components/FullScreen/FullScreen.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {
+    ComponentPropsWithoutRef,
+    ComponentRef,
+    PropsWithChildren,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
+import { Override } from '../../TypeHelpers';
+import { withMemo } from '../../helper/withMemo';
+import { useWindow } from '../../WindowContext/WindowContext';
+
+export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
+    Override<
+        ComponentPropsWithoutRef<AsType>,
+        { as?: AsType; fullscreenKey?: string; onEnterFullscreen?: () => void; onLeaveFullscreen?: () => void }
+    >
+>;
+
+function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
+    children,
+    as,
+    fullscreenKey,
+    onEnterFullscreen,
+    onLeaveFullscreen,
+    ...otherProps
+}: FullScreenProps<AsTag>) {
+    // Variables
+
+    // Refs
+    const containerRef = useRef<ComponentRef<AsTag>>(null);
+    const window = useWindow();
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const toggleFullscreen = useCallback(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (document.fullscreenElement || document.webkitFullscreenElement) {
+            if ('exitFullscreen' in document) {
+                document.exitFullscreen();
+            } else {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                document.webkitCancelFullScreen();
+            }
+            onLeaveFullscreen?.();
+            return;
+        }
+        if ('webkitRequestFullscreen' in document.body) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            containerRef.current?.webkitRequestFullscreen();
+        } else {
+            containerRef.current?.requestFullscreen();
+        }
+        onEnterFullscreen?.();
+    }, [onEnterFullscreen, onLeaveFullscreen]);
+
+    // Effects
+    useEffect(() => {
+        if (!fullscreenKey) {
+            return undefined;
+        }
+        const listener = (e: KeyboardEvent) => {
+            if (e.key === fullscreenKey) {
+                toggleFullscreen();
+            }
+        };
+        window?.addEventListener('keyup', listener);
+        return () => window?.removeEventListener('keyup', listener);
+    }, [fullscreenKey, toggleFullscreen, window]);
+
+    // Other
+
+    // Render Functions
+    const element = as ?? 'span';
+    const props = useMemo(() => ({ ...otherProps, ref: containerRef }), [otherProps]);
+    return React.createElement(element, props, children);
+}
+
+// Need FullScreenMemo for autocompletion of phpstorm
+const FullScreenMemo = withMemo(FullScreen);
+export { FullScreenMemo as FullScreen };

package/src/Components/Hooks/useBreakpoint.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useWindow } from '../../WindowContext/WindowContext';
+
+export const BreakpointNames = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+export enum Breakpoints {
+    XS = 0,
+    SM = 576,
+    MD = 768,
+    LG = 992,
+    XL = 1200,
+    XXL = 1400,
+}
+
+const resolveBreakpoint = (width: number) => {
+    if (width >= Breakpoints.XXL) {
+        return Breakpoints.XXL;
+    }
+    if (width >= Breakpoints.XL) {
+        return Breakpoints.XL;
+    }
+    if (width >= Breakpoints.LG) {
+        return Breakpoints.LG;
+    }
+    if (width >= Breakpoints.MD) {
+        return Breakpoints.MD;
+    }
+    if (width >= Breakpoints.SM) {
+        return Breakpoints.SM;
+    }
+    return Breakpoints.XS;
+};
+
+export const useBreakpoint = () => {
+    const [size, setSize] = useState(Breakpoints.SM);
+    const window = useWindow();
+
+    useEffect(() => {
+        setSize(resolveBreakpoint(window?.innerWidth ?? 1024));
+        const calcInnerWidth = () => setTimeout(() => setSize(resolveBreakpoint(window?.innerWidth ?? 1024)), 200);
+
+        window?.addEventListener('resize', calcInnerWidth);
+        return () => window?.removeEventListener('resize', calcInnerWidth);
+    }, [window]);
+
+    return size;
+};
+
+export function useBreakpointSelect<T1, T2, T3, T4, T5, T6>(breakpointValues: [T1, T2, T3, T4, T5, T6]) {
+    const size = useBreakpoint();
+
+    switch (size) {
+        case Breakpoints.XS:
+            return breakpointValues[0];
+        case Breakpoints.SM:
+            return breakpointValues[1];
+        case Breakpoints.MD:
+            return breakpointValues[2];
+        case Breakpoints.LG:
+            return breakpointValues[3];
+        case Breakpoints.XL:
+            return breakpointValues[4];
+        default:
+            return breakpointValues[5];
+    }
+}

package/src/Components/Hooks/useComposedRef.ts

@@ -0,0 +1,17 @@
+import { ForwardedRef, useEffect, useRef } from 'react';
+
+export const useComposedRef = <T>(ref: ForwardedRef<T>, initialValue: T | null = null) => {
+    const targetRef = useRef<T>(initialValue);
+
+    useEffect(() => {
+        if (!ref) return;
+
+        if (typeof ref === 'function') {
+            ref(targetRef.current);
+        } else {
+            ref.current = targetRef.current;
+        }
+    }, [ref]);
+
+    return targetRef;
+};

package/src/Components/Hooks/useDebounced.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from 'react';
+
+export function useDebounced<Args extends any[]>(
+    callback: (...args: Args) => void | Promise<void>,
+    dependencies: any[],
+    delay = 100
+) {
+    const [shared] = useState({ timeout: undefined as undefined | any });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const realCB = useCallback(callback, dependencies);
+
+    return useCallback(
+        (...newArgs: Args) => {
+            if (shared.timeout === undefined) {
+                realCB(...newArgs);
+                shared.timeout = setTimeout(() => (shared.timeout = undefined), delay);
+            }
+        },
+        [delay, realCB, shared]
+    );
+}

package/src/Components/Hooks/useDelayed.ts

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from 'react';
+
+export function useDelayed<Args extends any[]>(
+    callback: (...args: Args) => void | Promise<void>,
+    dependencies: any[],
+    delay = 100,
+    maxDelay?: number
+) {
+    const argsRef = useRef<Args | undefined>(undefined);
+    const timeoutRef = useRef<any>(undefined);
+    const mayDelayTimeoutRef = useRef<any>(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const realCB = useCallback(callback, dependencies);
+    const func = useCallback(
+        (...newArgs: Args) => {
+            argsRef.current = newArgs;
+
+            const triggerFunc = () => {
+                clearTimeout(mayDelayTimeoutRef.current);
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = undefined;
+                maxDelayTimeout.current = undefined;
+
+                if (argsRef.current !== undefined) {
+                    realCB(...argsRef.current);
+                }
+            };
+
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(triggerFunc, delay);
+
+            if (maxDelay && maxDelayTimeout.current === undefined) {
+                maxDelayTimeout.current = setTimeout(() => {
+                    triggerFunc();
+                }, maxDelay);
+            }
+        },
+        [delay, maxDelay, realCB]
+    );
+    const maxDelayTimeout = useRef<any>();
+
+    return func;
+}

package/src/Components/Hooks/useInViewport.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject, useEffect, useState } from 'react';
+
+export const useInViewport = (element: MutableRefObject<Element | null>, rootMargin = '0px') => {
+    const [isVisible, setState] = useState(false);
+
+    useEffect(() => {
+        const savedElement = element.current;
+        if (!savedElement) {
+            return undefined;
+        }
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setState(entry.isIntersecting);
+            },
+            { rootMargin }
+        );
+        observer.observe(savedElement);
+        return () => observer.unobserve(savedElement);
+    }, [element, rootMargin]);
+
+    return isVisible;
+};

package/src/Components/Hooks/useKeyListener.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { useWindow } from '../../WindowContext/WindowContext';
+
+function isFormElement(element: EventTarget | null) {
+    return (
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLSelectElement ||
+        element instanceof HTMLTextAreaElement
+    );
+}
+
+export function useKeyListener(
+    key: KeyboardEvent['key'],
+    listener: (e: KeyboardEvent) => void,
+    dependencies: any[] = [],
+    ignoreFormElements = true
+) {
+    const window = useWindow();
+
+    useEffect(() => {
+        const lowercaseKey = key.toLowerCase();
+        const keyListener = (e: KeyboardEvent) => {
+            if (e.key.toLowerCase() === lowercaseKey && (!ignoreFormElements || !isFormElement(e.target))) {
+                listener(e);
+            }
+        };
+        window?.addEventListener('keydown', keyListener);
+        return () => window?.removeEventListener('keydown', keyListener);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [window, key, ...dependencies]);
+}
+
+export function useKeyUpListener(
+    key: KeyboardEvent['key'],
+    listener: (e: KeyboardEvent) => void,
+    dependencies: any[] = [],
+    ignoreFormElements = true
+) {
+    useEffect(() => {
+        const lowercaseKey = key.toLowerCase();
+        const keyListener = (e: KeyboardEvent) => {
+            if (e.key.toLowerCase() === lowercaseKey && (!ignoreFormElements || !isFormElement(e.target))) {
+                listener(e);
+            }
+        };
+        window.addEventListener('keyup', keyListener);
+        return () => window.removeEventListener('keyup', keyListener);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, ...dependencies]);
+}
+
+export function useKeyPressed(key: KeyboardEvent['key'], ignoreFormElements = true, preventDefault = true) {
+    const [isPressed, setIsPressed] = useState(false);
+    useKeyListener(
+        key,
+        (e) => {
+            setIsPressed(true);
+            if (preventDefault) {
+                e.preventDefault();
+            }
+        },
+        [isPressed],
+        ignoreFormElements
+    );
+    useKeyUpListener(
+        key,
+        (e) => {
+            setIsPressed(false);
+            if (preventDefault) {
+                e.preventDefault();
+            }
+        },
+        [],
+        false
+    );
+    return isPressed;
+}

package/src/Components/Hooks/useListener.ts

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+export type ListenerWithData<DataType, Event = void | any, ReturnType = void> = (
+    eventData: Event,
+    extraData: DataType
+) => ReturnType;
+export type ListenerWithoutData<Event = void | any, ReturnType = void> = (eventData: Event) => ReturnType;
+
+export type Listener<ListenerProperty extends string, DataType, Event = any | void, ReturnType = void> =
+    | ({ [Property in ListenerProperty]: ListenerWithData<DataType, Event, ReturnType> } & {
+          [Property in `${ListenerProperty}Data`]: DataType;
+      })
+    | {
+          [Property in ListenerProperty]: ListenerWithoutData<Event, ReturnType>;
+      };
+
+export type OptionalListener<ListenerProperty extends string, DataType, Event = any | void, ReturnType = void> =
+    | ({ [Property in ListenerProperty]: ListenerWithData<DataType, Event, ReturnType> } & {
+          [Property in `${ListenerProperty}Data`]: DataType;
+      })
+    | {
+          [Property in ListenerProperty]?: ListenerWithoutData<Event, ReturnType>;
+      };
+
+export function useListener<ListenerName extends string, DataType, EventType = any, ReturnType = void>(
+    listener: ListenerName,
+    listenerProps: OptionalListener<ListenerName, DataType, EventType, ReturnType>
+) {
+    const listenerDataName = `${listener}Data` as keyof typeof listenerProps;
+    const listenerName = listener as keyof typeof listenerProps;
+
+    const hasExtraData = listenerDataName in listenerProps;
+
+    const extraData = hasExtraData ? (listenerProps[listenerDataName] as DataType) : undefined;
+    const callback = listenerProps[listenerName] as
+        | ListenerWithoutData<EventType, ReturnType>
+        | ListenerWithData<DataType, EventType, ReturnType>
+        | undefined;
+
+    return useCallback(
+        (e: EventType) => {
+            let res: ReturnType | undefined;
+            if (extraData !== undefined) {
+                res = (callback as ListenerWithData<DataType, EventType, ReturnType>)(e, extraData);
+            } else if (callback) {
+                res = (callback as ListenerWithoutData<EventType, ReturnType>)(e);
+            }
+            return res as ReturnType;
+        },
+        [callback, extraData]
+    );
+}
+
+export function useListenerWithExtractedProps<
+    ListenerName extends string,
+    DataType,
+    EventType = any,
+    ReturnType = void,
+    PropTypes extends OptionalListener<ListenerName, DataType, EventType, ReturnType> = OptionalListener<
+        ListenerName,
+        DataType,
+        EventType,
+        ReturnType
+    >
+>(listener: ListenerName, listenerProps: PropTypes) {
+    const {
+        [`${listener}Data` as keyof typeof listenerProps]: _,
+        [listener as keyof typeof listenerProps]: __,
+        ...otherProps
+    } = listenerProps;
+
+    return [useListener<ListenerName, DataType, EventType, ReturnType>(listener, listenerProps), otherProps] as const;
+}

package/src/Components/Hooks/useOnMount.ts

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react';
+
+export function useOnMount(cb: () => void | Promise<void>) {
+    const called = useRef(false);
+    useEffect(() => {
+        if (!called.current) {
+            called.current = true;
+            cb();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}