@ainias42/react-bootstrap-mobile 0.2.12 → 0.2.14

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
 import { SelectOption } from '../Select/Select';
 import classNames from 'classnames';
-import { ChangeEventHandler, KeyboardEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { ChangeEventHandler, KeyboardEvent, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { ArrayHelper } from '@ainias42/js-helper';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { withMemo } from '../../../helper/withMemo';
@@ -22,147 +22,179 @@ export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
         options: SelectOption[];
         onChangeValue?: (newValues: string[]) => void;
         values: string[];
+        renderSelectableOptions?: (option: SelectOption, isActive: boolean, index: number, activeIndex: number) => ReactNode,
+        renderSelectedOption?: (option: SelectOption) => ReactNode,
+        showSelectedOptions?: boolean;
+        closeOnSelect?: boolean;
+        enableSearch?: boolean;
+        allowDeselect?: boolean;
     } & OptionalListener<'onChange', OnChangeData>
 >;
 
 export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeData>({
-    label,
-    options,
-    values,
-    onChangeValue,
-    className,
-    style,
-}: SearchSelectInputProps<OnChangeData>) {
-    // Variables
-    const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
-
-    // Refs
-    const containerRef = useRef<HTMLLabelElement>(null);
-    const window = useWindow();
-
-    // States
-    const [searchText, setSearchText] = useState('');
-    const [suggestionsPosition, setSuggestionsPosition] = useState<
-        { top: number; left: number; right: number } | undefined
-    >(undefined);
-
-    const [selectedIndex, setSelectedIndex] = useState(0);
-
-    const selectableOptions = useMemo(() => {
-        if (!suggestionsPosition) {
-            return [];
-        }
-        return options.filter(
-            (option) => !values.includes(option.value) && option.label.toLowerCase().includes(searchText.toLowerCase())
-        );
-    }, [suggestionsPosition, options, searchText, values]);
-
-    // Selectors
-
-    // Callbacks
-    const updateSuggestionPosition = useCallback(() => {
-        if (!containerRef.current) {
-            return;
-        }
-        const { left, right, bottom: top } = containerRef.current.getBoundingClientRect();
-        setSuggestionsPosition({ top, left, right: (window?.innerWidth ?? 0) - right });
-    }, [window?.innerWidth]);
-
-    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
-        setSearchText(ev.target.value);
-        setSelectedIndex(0);
-    }, []);
-    const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
-
-    const toggleOption = useCallback(
-        (_: any, value: string) => {
-            const newValues = [...values];
-            const index = values.indexOf(value);
-            if (index === -1) {
-                newValues.push(value);
-            } else {
-                newValues.splice(index, 1);
+                                                                                       label,
+                                                                                       options,
+                                                                                       values,
+                                                                                       onChangeValue,
+                                                                                       className,
+                                                                                       renderSelectableOptions,
+                                                                                       renderSelectedOption,
+                                                                                       showSelectedOptions = false,
+                                                                                       closeOnSelect = false,
+                                                                                       enableSearch = true,
+    allowDeselect = true,
+                                                                                       style,
+                                                                                   }: SearchSelectInputProps<OnChangeData>) {
+        // Variables
+        const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
+
+        // Refs
+        const containerRef = useRef<HTMLLabelElement>(null);
+        const inputRef = useRef<HTMLInputElement>(null);
+        const window = useWindow();
+
+        // States
+        const [searchText, setSearchText] = useState('');
+        const [suggestionsPosition, setSuggestionsPosition] = useState<
+            { top: number; left: number; right: number } | undefined
+        >(undefined);
+
+        const [selectedIndex, setSelectedIndex] = useState(0);
+
+        const selectableOptions = useMemo(() => {
+            if (!suggestionsPosition) {
+                return [];
+            }
+            return options.filter(
+                (option) => (showSelectedOptions || !values.includes(option.value)) && (!enableSearch || option.label.toLowerCase().includes(searchText.toLowerCase()))
+            );
+        }, [suggestionsPosition, options, showSelectedOptions, values, enableSearch, searchText]);
+
+        // Selectors
+
+        // Callbacks
+        const updateSuggestionPosition = useCallback(() => {
+            if (!containerRef.current) {
+                return;
             }
-            setSearchText('');
+            const {left, right, bottom: top} = containerRef.current.getBoundingClientRect();
+            setSuggestionsPosition({top, left, right: (window?.innerWidth ?? 0) - right});
+        }, [window?.innerWidth]);
+
+        const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
+            if (!enableSearch){
+                return;
+            }
+            setSearchText(ev.target.value);
             setSelectedIndex(0);
-            onChangeValue?.(newValues);
-        },
-        [onChangeValue, values]
-    );
-
-    const onKeyPress = useCallback(
-        (e: KeyboardEvent<HTMLInputElement>) => {
-            console.log('Keypress', e.key);
-
-            if (e.key === 'Enter' && !e.defaultPrevented) {
-                if (selectedIndex < selectableOptions.length) {
-                    toggleOption(undefined, selectableOptions[selectedIndex].value);
+        }, [enableSearch]);
+        const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
+
+        const toggleOption = useCallback(
+            (_: any, value: string) => {
+                const newValues = [...values];
+                const index = values.indexOf(value);
+                if (index === -1) {
+                    newValues.push(value);
+                } else {
+                    newValues.splice(index, 1);
                 }
-            } else if (e.key === 'ArrowDown') {
-                setSelectedIndex((old) => {
-                    if (old + 1 >= selectableOptions.length) {
-                        return 0;
+                setSearchText('');
+                setSelectedIndex(0);
+                onChangeValue?.(newValues);
+                if (closeOnSelect) {
+                    if (containerRef.current?.contains(document.activeElement)) {
+                        inputRef.current?.focus();
+                        requestAnimationFrame(() => {
+                            inputRef.current?.blur();
+                        });
                     }
-                    return old + 1;
-                });
-            } else if (e.key === 'ArrowUp') {
-                setSelectedIndex((old) => {
-                    if (old - 1 < 0) {
-                        return Math.max(selectableOptions.length - 1, 0);
+                }
+            },
+            [closeOnSelect, onChangeValue, values]
+        );
+
+        const onKeyPress = useCallback(
+            (e: KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === 'Enter' && !e.defaultPrevented) {
+                    if (selectedIndex < selectableOptions.length) {
+                        toggleOption(undefined, selectableOptions[selectedIndex].value);
                     }
-                    return old - 1;
-                });
-            }
-        },
-        [toggleOption, selectableOptions, selectedIndex]
-    );
+                } else if (e.key === 'ArrowDown') {
+                    setSelectedIndex((old) => {
+                        if (old + 1 >= selectableOptions.length) {
+                            return 0;
+                        }
+                        return old + 1;
+                    });
+                } else if (e.key === 'ArrowUp') {
+                    setSelectedIndex((old) => {
+                        if (old - 1 < 0) {
+                            return Math.max(selectableOptions.length - 1, 0);
+                        }
+                        return old - 1;
+                    });
+                }
+            },
+            [toggleOption, selectableOptions, selectedIndex]
+        );
+
+        // Effects
 
-    // Effects
+        // Other
 
-    // Other
+        // Render Functions
+        const renderOption = (value: string) => {
+            const option = indexedOptions[value];
+            if (!option) {
+                return null;
+            }
 
-    // Render Functions
-    const renderOption = (value: string) => {
-        if (!indexedOptions[value]) {
-            return null;
-        }
+            const element = renderSelectedOption?.(option) ?? <InlineBlock className={styles.tag}>
+                <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
+            </InlineBlock>;
+
+            const onClickProps = allowDeselect ? {onClick: toggleOption, onClickData: value} : {};
+
+            return (
+                <Clickable {...onClickProps} key={option.key} __allowChildren="all">
+                    {element}
+                </Clickable>
+            );
+        };
+        const renderSelectableOption = (opt: SelectOption, index: number) => {
+            const isActive = index === selectedIndex;
+            const element = renderSelectableOptions?.(opt, isActive, index, selectedIndex) ?? (
+                <Block className={classNames(styles.selectableOption, {[styles.active]: index === selectedIndex})}>
+                    <Text>{opt.label}</Text>
+                </Block>);
+
+            return <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key} __allowChildren="all">
+                {element}
+            </Clickable>;
+        };
 
         return (
-            <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value]?.key}>
-                <InlineBlock className={styles.tag}>
-                    <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
+                {label ? <span className={styles.label}>{label}</span> : null}
+                <Flex className={styles.inputContainer} horizontal={true}>
+                    <InlineBlock>{values.map(renderOption)}</InlineBlock>
+                    <Grow __allowChildren="html">
+                        <input
+                            ref={inputRef}
+                            className={classNames(styles.text, {[styles.disabled]: !enableSearch})}
+                            value={searchText}
+                            onChange={onChange}
+                            onKeyDown={onKeyPress}
+                            onFocus={onFocus}
+                        />
+                    </Grow>
+                </Flex>
+                <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
+                    {selectableOptions.map(renderSelectableOption)}
                 </InlineBlock>
-            </Clickable>
+            </label>
         );
-    };
-    const renderSelectableOption = (opt: SelectOption, index: number) => (
-        <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key}>
-            <Block className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>
-                <Text>{opt.label}</Text>
-            </Block>
-        </Clickable>
-    );
-
-    return (
-        // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
-            {label ? <span className={styles.label}>{label}</span> : null}
-            <Flex className={styles.inputContainer} horizontal={true}>
-                <InlineBlock>{values.map(renderOption)}</InlineBlock>
-                <Grow __allowChildren="html">
-                    <input
-                        className={styles.text}
-                        value={searchText}
-                        onChange={onChange}
-                        onKeyDown={onKeyPress}
-                        onFocus={onFocus}
-                    />
-                </Grow>
-            </Flex>
-            <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
-                {selectableOptions.map(renderSelectableOption)}
-            </InlineBlock>
-        </label>
-    );
-},
-styles);
+    },
+    styles);

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.scss

@@ -34,10 +34,15 @@
 
   .label {
     display: block;
-    font-weight: bold;
+    font-weight: var(--label-font-weight, bold);
   }
 
   .text {
+    &.disabled {
+      caret-color: transparent;
+      cursor: pointer;
+    }
+
     width: 100%;
     background-color: transparent;
     border: 0;

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/FormElements/Slider/Slider.tsx

@@ -14,6 +14,7 @@ export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = Rbm
         Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>,
         {
             value?: number;
+            stopPropagation?: boolean;
         } & OptionalListener<'onChange', OnChangeData> &
             OptionalListener<'onChangeValue', OnChangeValueData, number> &
             OptionalListener<'onChangeDone', OnChangeDoneData>
@@ -23,6 +24,7 @@ export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = Rbm
 export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData, OnChangeDoneData>({
     className,
     style,
+    stopPropagation = true,
     ...props
 }: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) {
     // Variables
@@ -57,6 +59,12 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
         [onChange, onChangeValue]
     );
 
+    const checkStopPropagation = useCallback((ev: React.MouseEvent) => {
+        if (stopPropagation) {
+            ev.stopPropagation();
+        }
+    }, [stopPropagation]);
+
     // Effects
     const innerRef = useOnChangeDone(onChangeDone) as MutableRefObject<HTMLInputElement|null>;
 
@@ -66,7 +74,7 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.slider, className)} style={style}>
+        <label className={classNames(styles.slider, className)} style={style} onClick={checkStopPropagation}>
             <input
                 type="range"
                 {...otherPropsWithoutData}

package/src/Components/FormElements/Switch/Switch.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, MouseEvent, useCallback } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import classNames from 'classnames';
-
 import styles from './switch.scss';
 import { withMemo } from '../../../helper/withMemo';
 import { OptionalListener, useListenerWithExtractedProps } from "../../Hooks/useListener";
@@ -19,6 +18,9 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
             isLabelBeforeSwitch?: boolean;
             isDual?: boolean;
             error?: string;
+            classNameLabel?: string;
+            classNamePreLabel?: string;
+            stopPropagation?: boolean;
         } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>
     >
 >;
@@ -29,8 +31,11 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
                                                                         preLabel = '',
                                                                         isLabelBeforeSwitch = false,
                                                                         isDual = undefined,
+                                                                        stopPropagation = true,
                                                                         id,
                                                                         className,
+                                                                        classNamePreLabel,
+                                                                        classNameLabel,
                                                                         style,
                                                                         error,
                                                                         onChange,
@@ -53,6 +58,14 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
             [onChange, onChangeChecked]
         );
 
+        const checkStopPropagation = useCallback((ev: MouseEvent) => {
+            if (stopPropagation) {
+                console.log("LOG-d stopPropagation inside checkStopPropagation", ev);
+                ev.stopPropagation();
+                ev.nativeEvent.stopPropagation();
+            }
+        }, [stopPropagation]);
+
         // Effects
 
         // Other
@@ -71,17 +84,16 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
             isDual = true;
         }
         return (
-            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style}>
-            <label htmlFor={id} key={id}>
-                <span className={styles.label}>{preLabel}</span>
-                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
-                <div className={styles.toggle}>
-                    <span className={styles.handle}/>
-                </div>
-                <span className={styles.label}>{label}</span>
-                <FormError error={error}/>
-            </label>
-        </span>
-        );
+            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style} onClick={checkStopPropagation}>
+                <label htmlFor={id} key={id}>
+                    <span className={classNames(styles.label, classNamePreLabel)}>{preLabel}</span>
+                    <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
+                    <div className={styles.toggle}>
+                        <span className={styles.handle}/>
+                    </div>
+                    <span className={classNames(styles.label, classNameLabel)}>{label}</span>
+                    <FormError error={error}/>
+                </label>
+            </span>);
     },
     styles);

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

@@ -24,6 +24,7 @@
   }
 
   .toggle {
+    flex-shrink: 0;
     width: 40px;
     display: inline-block;
     position: relative;
@@ -33,6 +34,7 @@
     border-radius: 30px;
 
     .handle {
+      left: var(--switch-handle-offset, 0);
       transition-property: all;
       transition-duration: 0.35s;
       transition-timing-function: cubic-bezier(.59, .01, .5, .99);
@@ -60,14 +62,14 @@
   }
 
   @include design($material) {
-    input:checked + {
-      .toggle {
-        //box-shadow: none;
+    --switch-handle-checked-offset: 18px;
+    --switch-handle-offset: 0px;
 
-        .handle {
-          @extend %dual-handle-material;
-          left: 18px;
-        }
+    input:checked + .toggle {
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-material;
       }
     }
 
@@ -82,7 +84,6 @@
         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 {
@@ -101,15 +102,17 @@
   }
 
   @include design($flat) {
-    input:checked + {
-      .toggle {
-        @extend %dual-toggle-flat;
+    --switch-handle-offset: 2px;
+    --switch-handle-checked-offset: 19px;
 
-        .handle {
-          @extend %dual-handle-flat;
-          left: 19px
-        }
+    input:checked + .toggle {
+      @extend %dual-toggle-flat;
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-flat;
       }
+
     }
 
     .toggle {
@@ -122,7 +125,6 @@
         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%);
       }

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/Icon/Icon.tsx

@@ -6,7 +6,6 @@ import {IconProp} from '@fortawesome/fontawesome-svg-core';
 import {withMemo} from '../../helper/withMemo';
 import {IconDefinition} from '@fortawesome/free-regular-svg-icons';
 import classNames from "classnames";
-
 import styles from "./icon.scss";
 
 export type IconSource = IconProp | string | IconDefinition;

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';