@ainias42/react-bootstrap-mobile 0.2.11 → 0.2.13

package/dist/src/Components/FormElements/ColorInput/ColorInput.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ColorResult } from '@uiw/react-color';
 import { OptionalListener } from '../../Hooks/useListener';
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -6,7 +7,6 @@ export type ColorInputProps<OnChangeData> = {
     label?: string;
     onChangeColor?: (newColor: string) => void;
     onOpen?: (currentColor: string) => void;
-    onChangeColorComplete?: (newColor: string) => void;
     onClose?: (newColor: string) => void;
     disableAlpha?: boolean;
     presetColors?: string[];
@@ -14,7 +14,7 @@ export type ColorInputProps<OnChangeData> = {
     disabled?: boolean;
     error?: string;
     className?: string;
-} & OptionalListener<'onChange', OnChangeData>;
-declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, className, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
+} & OptionalListener<'onChange', OnChangeData, ColorResult>;
+declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, className, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
 declare const ColorInputMemo: typeof ColorInput;
 export { ColorInputMemo as ColorInput };

package/dist/src/Components/FormElements/ColorInput/sharedSelectedColor.d.ts

@@ -1,4 +1,4 @@
-export declare function useSharedSelectedColor(key?: string, numberSavedColors?: number): {
+export declare function useSharedSelectedColor(key: string | undefined, predefinedColors?: string[], numberSavedColors?: number): {
     colors: string[];
     addColor: (newColor: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -54,7 +54,6 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@types/react": ">=18.0.0",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-color": "^3.0.12",
     "@types/react-dom": ">=18.0.0",
     "@types/react-table": "^7.7.20",
     "@types/react-window": "^1.8.8",
@@ -95,6 +94,7 @@
   "dependencies": {
     "@ainias42/js-helper": ">=0.8.16",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "@uiw/react-color": "^2.5.5",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",
     "react-color": "^2.19.3",

package/src/Components/Clickable/Clickable.tsx

@@ -11,7 +11,7 @@ import {
     useEffect,
     MouseEvent,
     PointerEvent,
-    useRef, DragEventHandler
+    useRef
 } from 'react';
 import {withForwardRef} from '../../helper/withForwardRef';
 import {useComposedRef} from "../Hooks/useComposedRef";

package/src/Components/Dialog/ButtonDialog.tsx

@@ -4,12 +4,10 @@ import { withMemo } from '../../helper/withMemo';
 import { Block } from '../Layout/Block';
 import { Text, TEXT_SIZE } from '../Text/Text';
 import { Clickable } from '../Clickable/Clickable';
-
 import styles from './buttonDialog.scss';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import classNames from 'classnames';
 import { Flavor } from "../Flavor";
-import { Size } from "../../Size";
 
 export type ButtonDialogProps = RbmComponentProps<
     {

package/src/Components/Dialog/DialogBackground.tsx

@@ -40,7 +40,7 @@ export const DialogBackground = withMemo(function DialogBackground({
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
             {(!!title || !!onClose) && <Flex horizontal={true} className={styles.title}>{!!title &&
             <Grow><Heading >{title}</Heading></Grow>}{!!onClose &&
-            <Clickable onClick={onClose}><Icon size={"lg"} icon={faCircleXmark}/></Clickable>}</Flex>}
+            <Clickable onClick={onClose}><Icon size="lg" icon={faCircleXmark}/></Clickable>}</Flex>}
             {children}
         </Block>
     );

package/src/Components/Dialog/DialogContext.ts

@@ -14,7 +14,7 @@ export type ShowDialog = <
 
 const DialogContext = React.createContext<ShowDialog>(() => {
     console.error("DialogContext not initialized");
-    return Promise.reject("DialogContext not initialized")
+    return Promise.reject(new Error("DialogContext not initialized"));
 });
 export const DialogProvider = DialogContext.Provider;
 

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useCallback, useRef, useState, MouseEvent } from 'react';
-import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
+import { useCallback, useRef, useState, MouseEvent, useMemo } from 'react';
+import { ColorResult, Sketch, SwatchPresetColor } from '@uiw/react-color';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 import { withMemo } from '../../../helper/withMemo';
 import styles from './colorInput.scss';
@@ -16,7 +16,6 @@ export type ColorInputProps<OnChangeData> = {
     label?: string;
     onChangeColor?: (newColor: string) => void;
     onOpen?: (currentColor: string) => void;
-    onChangeColorComplete?: (newColor: string) => void;
     onClose?: (newColor: string) => void;
     disableAlpha?: boolean;
     presetColors?: string[];
@@ -24,26 +23,13 @@ export type ColorInputProps<OnChangeData> = {
     disabled?: boolean
     error?: string;
     className?: string;
-} & OptionalListener<'onChange', OnChangeData>;
-
-function convertToHex(color: { r: number; g: number; b: number; a?: number }, disableAlpha?: boolean) {
-    let newColor = `#${color.r.toString(16).padStart(2, '0')}${color.g.toString(16).padStart(2, '0')}${color.b
-        .toString(16)
-        .padStart(2, '0')}`;
-    if (color.a !== undefined && !disableAlpha) {
-        newColor += Math.round(color.a * 255)
-            .toString(16)
-            .padStart(2, '0');
-    }
-    return newColor;
-}
+} & OptionalListener<'onChange', OnChangeData, ColorResult>;
 
 function ColorInput<OnChangeData>({
                                       defaultValue,
                                       value,
                                       label,
                                       onChangeColor,
-                                      onChangeColorComplete,
                                       onOpen,
                                       onClose,
                                       disableAlpha,
@@ -65,34 +51,34 @@ function ColorInput<OnChangeData>({
     const [isOpen, setIsOpen] = useState(false);
     const [position, setPosition] = useState({x: 0, y: 0});
 
-    const {colors, addColor} = useSharedSelectedColor(sharedColorKey);
+    const {colors, addColor} = useSharedSelectedColor(sharedColorKey, presetColors);
     const realIsOpen = disabled !== true && isOpen;
 
-    const colVal: Color = value ?? color;
+    const colVal = useMemo(() => {
+        const newVal = value ?? color;
+        if (disableAlpha && newVal.length === 9) {
+            return newVal.substring(0, 7);
+        }
+        if (disableAlpha && newVal.length === 5) {
+            return newVal.substring(0,4);
+        }
+        return newVal;
+    }, [value, color, disableAlpha]);
+
     // Selectors
 
     // Callbacks
-    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
-    const onChange = useCallback<ColorChangeHandler>(
-        (newColor: ColorResult, e) => {
-            const hexColor = convertToHex(newColor.rgb, disableAlpha);
+    const onChangeWithData = useListener<'onChange', OnChangeData, ColorResult>('onChange', otherProps);
+    const onChange = useCallback(
+        (newColor: ColorResult) => {
+            const hexColor = newColor.hexa;
             setColor(hexColor);
             if (onChangeColor) {
                 onChangeColor(hexColor);
             }
-            onChangeWithData(e);
-        },
-        [disableAlpha, onChangeColor, onChangeWithData]
-    );
-    const onChangeComplete = useCallback(
-        (newColor: ColorResult) => {
-            const hexColor = convertToHex(newColor.rgb, disableAlpha);
-            setColor(hexColor);
-            if (onChangeColorComplete) {
-                onChangeColorComplete(hexColor);
-            }
+            onChangeWithData(newColor);
         },
-        [disableAlpha, onChangeColorComplete]
+        [onChangeColor, onChangeWithData]
     );
 
     const onMenuClose = useCallback(
@@ -141,10 +127,9 @@ function ColorInput<OnChangeData>({
         <>
         <span className={classNames(styles.colorInput, className)}>
             <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
-                        <SketchPicker
+                        <Sketch
                             color={colVal}
                             onChange={onChange}
-                            onChangeComplete={onChangeComplete}
                             disableAlpha={disableAlpha}
                             presetColors={presetColors ?? colors}
                         />

package/src/Components/FormElements/ColorInput/colorInput.scss

@@ -7,6 +7,22 @@
     height: 1rem;
     display: inline-block;
     border: 1px solid black;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+    }
+
   }
 
   .modalContainer {
@@ -31,3 +47,26 @@
     margin-right: 0.2rem;
   }
 }
+
+
+:global(.w-color-swatch) {
+  z-index: 0;
+
+  > div {
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+    }
+  }
+}

package/src/Components/FormElements/ColorInput/sharedSelectedColor.ts

@@ -1,9 +1,14 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Random } from '@ainias42/js-helper';
 
 const sharedSelectedColor: Record<string, { colors: string[]; updateFunctions: (() => void)[] }> = {};
 
-export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
+function localStorageKey (key: string) {
+    return `sharedSelectedColor-${key}`;
+};
+
+export function useSharedSelectedColor(key: string|undefined, predefinedColors: string[] = [], numberSavedColors = 16) {
+    const shouldSaveToLocalStorage = typeof window !== 'undefined' && window.localStorage !== undefined && !!key;
     const [, setVersion] = useState(1);
     const innerKey = useRef(Random.getStringRandom(12));
     const realKey = key ?? innerKey.current;
@@ -22,6 +27,10 @@ export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
 
     const addColor = useCallback(
         (newColor: string) => {
+            if (predefinedColors.includes(newColor)) {
+                return;
+            }
+
             sharedSelectedColor[realKey].colors = sharedSelectedColor[realKey].colors.filter(
                 (color) => color !== newColor
             );
@@ -29,12 +38,32 @@ export function useSharedSelectedColor(key?: string, numberSavedColors = 15) {
             if (sharedSelectedColor[realKey].colors.length > numberSavedColors) {
                 sharedSelectedColor[realKey].colors.splice(numberSavedColors, 1);
             }
+            if (shouldSaveToLocalStorage){
+                localStorage.setItem(localStorageKey(realKey), JSON.stringify(sharedSelectedColor[realKey].colors));
+            }
 
             // triggers rerender
             sharedSelectedColor[realKey].updateFunctions.forEach((u) => u());
         },
-        [numberSavedColors, realKey]
+        [numberSavedColors, realKey, shouldSaveToLocalStorage]
     );
 
-    return { colors: sharedSelectedColor[realKey]?.colors, addColor };
+    useLayoutEffect(() => {
+        if (shouldSaveToLocalStorage){
+            const savedColors = localStorage.getItem(localStorageKey(realKey));
+            if (savedColors) {
+                sharedSelectedColor[realKey].colors = JSON.parse(savedColors);
+                setVersion((old) => old + 1);
+            }
+        }
+    }, [realKey, shouldSaveToLocalStorage]);
+
+    const realColors = useMemo(() => {
+        if (predefinedColors.length > 0) {
+            return [...predefinedColors, ...sharedSelectedColor[realKey].colors.filter(color => !predefinedColors.includes(color))].slice(0, numberSavedColors);
+        }
+        return sharedSelectedColor[realKey].colors;
+    }, [numberSavedColors, predefinedColors, realKey]);
+
+    return { colors: realColors, addColor };
 }

package/src/Components/FormElements/Controller/FileInputController.tsx

@@ -16,7 +16,7 @@ export const FileInputController = withMemo(function FileInputController<Values
     const {field, fieldState} = useController({name});
     const {errors} = useFormState();
 
-    const {clearErrors} = useFormContext();
+    const {clearErrors, setError} = useFormContext();
     const errorMessage = fieldState.error?.message ?? errors[`${name}.src`]?.message as string|undefined ?? errors[`${name}.name`]?.message as string|undefined ?? errors[`${name}.type`]?.message as string|undefined;
 
     const internalOnChange = useCallback(
@@ -30,11 +30,18 @@ export const FileInputController = withMemo(function FileInputController<Values
         [clearErrors, field, name]
     );
 
+    const setErrorMessage = useCallback((error: string) => {
+        setError(name, {
+            message: error,
+        });
+    }, [name, setError]);
+
     return (
         <FileInput
             {...otherProps}
             {...field}
             onChangeFile={internalOnChange}
+            onError={setErrorMessage}
             value={field.value}
             error={errorMessage}
         />

package/src/Components/FormElements/Controller/HookForm.tsx

@@ -35,7 +35,7 @@ export const HookForm = withMemo(function HookForm<TFieldValues extends FieldVal
 
     return <FormProvider {...methods}>
         <SendFormContext.Provider value={innerOnSend}>
-            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren={"all"}>
+            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren="all">
                 {children}
             </LoadingArea>
         </SendFormContext.Provider>

package/src/Components/FormElements/FormError.tsx

@@ -25,5 +25,5 @@ export const FormError = withMemo(function FormError({error}: FormErrorProps) {
 		return null;
 	}
 
-	return <Block className={styles.error}><Text>{error}</Text></Block>
+	return <Block className={styles.error}><Text>{error}</Text></Block>;
 }, styles);

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -16,7 +16,6 @@ import { Image } from '../../../Image/Image';
 import { Clickable } from '../../../Clickable/Clickable';
 import { Inline } from '../../../Layout/Inline';
 import { FileType } from "./FileType";
-import { InlineBlock } from "../../../Layout/InlineBlock";
 import { FormError } from "../../FormError";
 
 

package/src/Components/FormElements/Select/Select.tsx

@@ -67,7 +67,7 @@ export const Select = withMemo(function Select<OnChangeData>({
             }
             onChangeWithData(e);
         },
-        [onChangeWithData, onChangeValue]
+        [onChangeWithData, onChangeValue, useNumericValues]
     );
 
     // Effects

package/src/Components/FullScreen/FullScreen.tsx

@@ -13,13 +13,13 @@ export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmCom
 >;
 
 export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
-    children,
-    as,
-    fullscreenKey,
-    onEnterFullscreen,
-    onLeaveFullscreen,
-    ...otherProps
-}: FullScreenProps<AsTag>) {
+                                                                                                               children,
+                                                                                                               as,
+                                                                                                               fullscreenKey,
+                                                                                                               onEnterFullscreen,
+                                                                                                               onLeaveFullscreen,
+                                                                                                               ...otherProps
+                                                                                                           }: FullScreenProps<AsTag>) {
     // Variables
 
     // Refs
@@ -34,7 +34,8 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
     const toggleFullscreen = useCallback(() => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        if (document.fullscreenElement || document.webkitFullscreenElement) {
+        const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
+        if (fullscreenElement === containerRef.current) {
             if ('exitFullscreen' in document) {
                 document.exitFullscreen();
             } else {
@@ -42,9 +43,9 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
                 // @ts-ignore
                 document.webkitCancelFullScreen();
             }
-            onLeaveFullscreen?.();
-            return;
+                return;
         }
+
         if ('webkitRequestFullscreen' in document.body) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -52,8 +53,7 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
         } else {
             containerRef.current?.requestFullscreen();
         }
-        onEnterFullscreen?.();
-    }, [onEnterFullscreen, onLeaveFullscreen]);
+    }, []);
 
     // Effects
     useEffect(() => {
@@ -69,11 +69,35 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
         return () => window?.removeEventListener('keyup', listener);
     }, [fullscreenKey, toggleFullscreen, window]);
 
+    useEffect(() => {
+        if (!containerRef.current) {
+            return undefined;
+        }
+
+        const container = containerRef.current;
+        const listener = () => {
+            // @ts-expect-error the typing is not completely correct
+            const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
+            if (fullscreenElement === container) {
+                onEnterFullscreen?.();
+            } else {
+                onLeaveFullscreen?.();
+            }
+        };
+        container.addEventListener('fullscreenchange', listener);
+        container.addEventListener('webkitfullscreenchange', listener);
+
+        return () => {
+            container.removeEventListener('fullscreenchange', listener);
+            container.removeEventListener('webkitfullscreenchange', listener);
+        };
+    }, [onEnterFullscreen, onLeaveFullscreen]);
+
     // Other
 
     // Render Functions
     const element = as ?? 'span';
-    const props = useMemo(() => ({ ...otherProps, ref: containerRef }), [otherProps]);
+    const props = useMemo(() => ({...otherProps, ref: containerRef}), [otherProps]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return React.createElement(element, props, children);

package/src/Components/Hooks/useComposedRef.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, useCallback, useEffect, useRef } from 'react';
+import { ForwardedRef, useCallback } from 'react';
 
 export function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]) {
     return useCallback((val: RefVal | null) => {

package/src/Components/Hooks/useDelayedEffect.ts

@@ -3,12 +3,13 @@ import { useEffect } from "react";
 export function useDelayedEffect(effect: () => void|(() => void), dependencies: any[], delay = 100){
     useEffect(() => {
         let cleanup: (() => void)|void | undefined;
-        let timeout = setTimeout(() => {
+        const timeout = setTimeout(() => {
             cleanup = effect();
         }, delay);
         return () => {
             clearTimeout(timeout);
-            cleanup?.()
+            cleanup?.();
         };
-    }, dependencies);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [delay, ...dependencies]);
 }

package/src/Components/Hooks/useRerender.ts

@@ -15,7 +15,7 @@ export function useRerender(defaultDelay = 0){
                 updateRenderCounter(old => old + 1);
             }, delay);
         }
-    }, [])
+    }, [defaultDelay]);
 
     return [update, renderCounter] as const;
 }

package/src/Components/List/InfiniteList.tsx

@@ -1,6 +1,5 @@
-import React, { CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import InfiniteLoader from "react-window-infinite-loader";
-import { RbmComponentProps } from "../RbmComponentProps";
 import { List, ListProps } from "./List";
 import { withMemo } from "../../helper/withMemo";
 
@@ -34,12 +33,12 @@ export const InfiniteList = withMemo(function InfiniteList<ItemType>({
         if (!isPageLoading) {
             setIsPageLoading(true);
             try {
-                loadNextPage()
+                loadNextPage();
             } finally {
                 setIsPageLoading(false);
             }
         }
-    }, [isPageLoading, loadNextPage])
+    }, [isPageLoading, loadNextPage]);
 
     // Effects
 

package/src/Components/List/List.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { ComponentType, CSSProperties, ForwardedRef, ReactElement, ReactNode, useCallback, useState } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-
 import styles from './list.scss';
-import { withMemo } from '../../helper/withMemo';
 import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';

package/src/scss/_default.scss

@@ -1,19 +1,21 @@
 @import "designMixin";
 
-* {
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 400;
-}
-
-.#{$material} {
+@layer rbm {
   * {
-    font-family: "Roboto", "Noto", sans-serif;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    font-weight: 400;
   }
-}
 
-.#{$flat} {
-  * {
-    font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+  .#{$material} {
+    * {
+      font-family: "Roboto", "Noto", sans-serif;
+    }
+  }
+
+  .#{$flat} {
+    * {
+      font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+    }
   }
 }