@ainias42/react-bootstrap-mobile 0.2.12 → 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.12",
+  "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

@@ -33,8 +33,8 @@ export const FileInputController = withMemo(function FileInputController<Values
     const setErrorMessage = useCallback((error: string) => {
         setError(name, {
             message: error,
-        })
-    }, []);
+        });
+    }, [name, setError]);
 
     return (
         <FileInput

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

@@ -53,7 +53,7 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
         } else {
             containerRef.current?.requestFullscreen();
         }
-    }, [onEnterFullscreen, onLeaveFullscreen]);
+    }, []);
 
     // Effects
     useEffect(() => {
@@ -71,28 +71,26 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
 
     useEffect(() => {
         if (!containerRef.current) {
-            return;
+            return undefined;
         }
 
         const container = containerRef.current;
         const listener = () => {
-            // @ts-ignore
+            // @ts-expect-error the typing is not completely correct
             const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
             if (fullscreenElement === container) {
-                console.log("LOG-d enter fullscreen")
                 onEnterFullscreen?.();
             } else {
-                console.log("LOG-d leave fullscreen")
                 onLeaveFullscreen?.();
             }
-        }
+        };
         container.addEventListener('fullscreenchange', listener);
         container.addEventListener('webkitfullscreenchange', listener);
 
         return () => {
             container.removeEventListener('fullscreenchange', listener);
             container.removeEventListener('webkitfullscreenchange', listener);
-        }
+        };
     }, [onEnterFullscreen, onLeaveFullscreen]);
 
     // Other

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;
+    }
   }
 }