@ainias42/react-bootstrap-mobile 0.1.7

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { useCallback, useRef, useState, MouseEvent } from 'react';
+import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+import { withMemo } from '../../../helper/withMemo';
+
+import styles from './colorInput.scss';
+import { useSharedSelectedColor } from './sharedSelectedColor';
+
+export type ColorInputProps<OnChangeData> = {
+    defaultValue?: string;
+    value?: string;
+    label?: string;
+    onChangeColor?: (newColor: string) => void;
+    onOpen?: (currentColor: string) => void;
+    onChangeColorComplete?: (newColor: string) => void;
+    onClose?: (newColor: string) => void;
+    disableAlpha?: boolean;
+    presetColors?: string[];
+    sharedColorKey?: 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;
+}
+
+function ColorInput<OnChangeData>({
+    defaultValue,
+    value,
+    label,
+    onChangeColor,
+    onChangeColorComplete,
+    onOpen,
+    onClose,
+    disableAlpha,
+    presetColors,
+    sharedColorKey,
+    ...otherProps
+}: ColorInputProps<OnChangeData>) {
+    // Variables
+    // useStyles(styles);
+
+    // Refs
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // States
+    const [color, setColor] = useState<string>(value ?? defaultValue ?? '#000000FF');
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+
+    const { colors, addColor } = useSharedSelectedColor(sharedColorKey);
+
+    const colVal: Color = value ?? color;
+    // Selectors
+
+    // Callbacks
+    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const onChange = useCallback<ColorChangeHandler>(
+        (newColor: ColorResult, e) => {
+            const hexColor = convertToHex(newColor.rgb, disableAlpha);
+            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);
+            }
+        },
+        [disableAlpha, onChangeColorComplete]
+    );
+
+    const onContainerClick = useCallback(
+        (e: MouseEvent) => {
+            if (e.target === containerRef?.current) {
+                setIsOpen(false);
+                console.log('onContainerClick', colVal);
+                addColor(colVal);
+                onClose?.(colVal);
+            }
+        },
+        [addColor, colVal, onClose]
+    );
+
+    const openElement = useCallback(
+        (e: MouseEvent) => {
+            setIsOpen(true);
+            setPosition({ x: e.clientX, y: e.clientY });
+            onOpen?.(colVal);
+        },
+        [colVal, onOpen]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <span className={styles.colorInput}>
+            {isOpen ? (
+                <div onClick={onContainerClick} className={styles.modalContainer} ref={containerRef}>
+                    <div className={styles.modal} style={{ top: position.y, left: position.x }}>
+                        <SketchPicker
+                            color={colVal}
+                            onChange={onChange}
+                            onChangeComplete={onChangeComplete}
+                            disableAlpha={disableAlpha}
+                            presetColors={presetColors ?? colors}
+                        />
+                    </div>
+                </div>
+            ) : null}
+            <span onClick={openElement} className={styles.label}>
+                {label}
+            </span>
+            <span onClick={openElement} style={{ backgroundColor: colVal }} className={styles.preview} />
+        </span>
+    );
+}
+
+// Need ColorInputMemo for autocompletion of phpstorm
+const ColorInputMemo = withMemo(ColorInput, styles);
+export { ColorInputMemo as ColorInput };

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

@@ -0,0 +1,35 @@
+.colorInput {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  display: flex;
+
+  .preview {
+    margin-left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    border: 1px solid black;
+  }
+
+  .modalContainer {
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+
+    .modal {
+      position: absolute;
+      background-color: white;
+    }
+  }
+
+  .label {
+    flex: 1;
+    margin-right: 0.2rem;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { useCallback, 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) {
+    const [, setVersion] = useState(1);
+    const innerKey = useRef(Random.getStringRandom(12));
+    const realKey = key ?? innerKey.current;
+
+    if (!sharedSelectedColor[realKey]) {
+        sharedSelectedColor[realKey] = {
+            colors: [],
+            updateFunctions: [],
+        };
+    }
+
+    const update = useCallback(() => setVersion((old) => old + 1), []);
+    useMemo(() => {
+        sharedSelectedColor[realKey].updateFunctions.push(update);
+    }, [realKey, update]);
+
+    const addColor = useCallback(
+        (newColor: string) => {
+            sharedSelectedColor[realKey].colors = sharedSelectedColor[realKey].colors.filter(
+                (color) => color !== newColor
+            );
+            sharedSelectedColor[realKey].colors.unshift(newColor);
+            if (sharedSelectedColor[realKey].colors.length > numberSavedColors) {
+                sharedSelectedColor[realKey].colors.splice(numberSavedColors, 1);
+            }
+
+            // triggers rerender
+            sharedSelectedColor[realKey].updateFunctions.forEach((u) => u());
+        },
+        [numberSavedColors, realKey]
+    );
+
+    return { colors: sharedSelectedColor[realKey]?.colors, addColor };
+}

package/src/Components/FormElements/ImageInput/ImageInput.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { ChangeEventHandler, InputHTMLAttributes, useCallback, useState } from 'react';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+import { Button } from '../Button/Button';
+
+import styles from './imageInput.scss';
+import { withMemo } from '../../../helper/withMemo';
+import classNames from 'classnames';
+
+export type ImageType = { name: string; url: string };
+
+export type ImageInputProps<OnChangeData> = RbmComponentProps<
+    Override<
+        InputHTMLAttributes<HTMLInputElement>,
+        {
+            defaultValue?: ImageType;
+            value?: ImageType;
+            label?: string;
+            onChangeImage?: (image: ImageType, imageData: File) => void;
+        } & OptionalListener<'onChange', OnChangeData>
+    >
+>;
+
+function ImageInput<OnChangeData>({
+    className,
+    style,
+    value,
+    defaultValue,
+    onChangeImage,
+    label,
+    ...otherProps
+}: ImageInputProps<OnChangeData>) {
+    // Variables
+    const [image, setImage] = useState(defaultValue);
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const getBase64 = useCallback((file: Blob) => {
+        return new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(reader.result as string);
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }, []);
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        async (e) => {
+            if (!e.target.files || e.target.files.length === 0) {
+                return;
+            }
+
+            onChangeWithData(e);
+            const newUrl = await getBase64(e.target.files[0]);
+            const newValue = { name: e.target.files[0].name, url: newUrl };
+            setImage(newValue);
+
+            if (onChangeImage) {
+                onChangeImage(newValue, e.target.files[0]);
+            }
+        },
+        [onChangeWithData, onChangeImage, getBase64]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.imageInput, className)} style={style}>
+            {label ? <span>{label}</span> : null}
+            <img
+                src={(value ?? image)?.url}
+                alt={(value ?? image)?.name}
+                className={classNames(styles.preview, (value ?? image)?.url ? undefined : styles.empty)}
+            />
+            <Button __allowChildren="all">{(value ?? image)?.name ?? <i>Select Image</i>}</Button>
+            <input {...otherProps} className={styles.value} onChange={onChange} type="file" />
+        </label>
+    );
+}
+
+// Need ImageInputMemo for autocompletion of phpstorm
+const ImageInputMemo = withMemo(ImageInput, styles);
+export { ImageInputMemo as ImageInput };

package/src/Components/FormElements/ImageInput/imageInput.scss

@@ -0,0 +1,24 @@
+.imageInput {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: pointer;
+
+  .preview {
+    flex: 1;
+    object-fit: contain;
+
+    &.empty {
+      background-color: #d3d3d3;
+    }
+  }
+
+  .value {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+  }
+}

package/src/Components/FormElements/Input/HiddenInput.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Input, InputProps } from './Input';
+import { withMemo } from '../../../helper/withMemo';
+
+import styles from './input.scss';
+import classNames from 'classnames';
+
+export type HiddenInputProps<OnChangeType, OnBlurData, OnChangeEndData> = InputProps<
+    OnChangeType,
+    OnBlurData,
+    OnChangeEndData
+> & {
+    noFocusHint?: boolean;
+};
+
+function HiddenInput<OnChangeData, OnBlurData, OnChangeEndData>({
+    noFocusHint = false,
+    className,
+    ...props
+}: HiddenInputProps<OnChangeData, OnBlurData, OnChangeEndData>) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <Input
+            className={classNames(styles.hiddenInput, { [styles.noFocusHint]: noFocusHint }, className)}
+            {...props}
+        />
+    );
+}
+
+const tmp = withMemo(HiddenInput);
+export { tmp as HiddenInput };

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, KeyboardEvent, MutableRefObject, useCallback } from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { withForwardRef } from '../../../helper/withForwardRef';
+
+import styles from './input.scss';
+import classNames from 'classnames';
+import { useComposedRef } from '../../Hooks/useComposedRef';
+import { useOnChangeDone } from '../hooks/useOnChangeDone';
+
+export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
+    Override<
+        Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>,
+        {
+            label?: string;
+            onChangeText?: (newText: string) => void;
+            onEnter?: (newText: string) => void;
+        } & OptionalListener<'onChange', OnChangeData> &
+            OptionalListener<'onBlur', OnBlurData> &
+            OptionalListener<'onChangeDone', OnChangeDoneData>
+    >
+>;
+
+export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnChangeDoneData>(
+    {
+        label,
+        className,
+        style,
+        onEnter,
+        onKeyDown,
+        onChangeText,
+        ...otherProps
+    }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
+    ref: MutableRefObject<HTMLInputElement> | null
+) {
+    // Variables
+
+    // States
+
+    // Refs
+    const innerRef = useComposedRef(ref);
+
+    // Callbacks
+    const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        otherProps
+    );
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => {
+            if (onChangeText) {
+                onChangeText(e.target.value);
+            }
+            onChangeWithData(e);
+        },
+        [onChangeWithData, onChangeText]
+    );
+
+    const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps<'onBlur', OnBlurData>(
+        'onBlur',
+        otherPropsWithoutOnchange
+    );
+
+    const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
+        'onChangeDone',
+        otherPropsWithoutBlur
+    );
+
+    const realOnKeyDown = useCallback(
+        (e: KeyboardEvent<HTMLInputElement>) => {
+            onKeyDown?.(e);
+            if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+                onEnter((e.target as HTMLInputElement).value);
+            }
+        },
+        [onEnter, onKeyDown]
+    );
+
+    // Effects
+    useOnChangeDone(onChangeDone, innerRef);
+
+    // Other
+
+    // Render Functions
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.input, className)} style={style}>
+            {label ? <span className={styles.label}>{label}</span> : null}
+            <input
+                {...otherPropsWithoutData}
+                ref={innerRef}
+                className={styles.text}
+                onBlur={onBlur}
+                onChange={onChange}
+                onKeyDown={realOnKeyDown}
+            />
+        </label>
+    );
+},
+styles);

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,55 @@
+import React, { ForwardedRef, useCallback, useState } from 'react';
+import { Input, InputProps } from '../Input';
+import { DistributiveOmit } from '../../../../helper/DistributiveOmit';
+import { withForwardRef } from '../../../../helper/withForwardRef';
+import { Flex } from '../../../Layout/Flex';
+import { Grow } from '../../../Layout/Grow';
+import { Icon } from '../../../Icon/Icon';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { Clickable } from '../../../Clickable/Clickable';
+
+import styles from './passwordInput.scss';
+import classNames from 'classnames';
+
+export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
+    InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
+    'type'
+>;
+
+export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
+    { className, style, ...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
+    ref: ForwardedRef<HTMLInputElement>
+) {
+    // Variables
+    const [isVisible, setIsVisible] = useState(false);
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const toggleVisible = useCallback(() => setIsVisible((old) => !old), []);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <Flex horizontal={true} className={classNames(styles.passwordInput, className)} style={style}>
+            <Grow>
+                <Input {...props} type={isVisible ? 'text' : 'password'} ref={ref} />
+            </Grow>
+            <Clickable onClick={toggleVisible} className={styles.showButton}>
+                <Icon icon={isVisible ? faEye : faEyeSlash} />
+            </Clickable>
+        </Flex>
+    );
+},
+styles);
+
+// // Need PasswordInputMemo for autocompletion of phpstorm
+// const PasswordInputMemo = withMemo(PasswordInput);
+// export { PasswordInputMemo as PasswordInput };

package/src/Components/FormElements/Input/PasswordInput/passwordInput.scss

@@ -0,0 +1,7 @@
+.passwordInput {
+  align-items: end;
+}
+
+.showButton {
+  padding-left: 0.4rem;
+}

package/src/Components/FormElements/Input/input.scss

@@ -0,0 +1,57 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.input {
+  width: 100%;
+
+  .label {
+    display: block;
+    font-weight: bold;
+  }
+
+  .text {
+    width: 100%;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+    padding: 0;
+    font-size: 1rem;
+
+    @include design($material) {
+      color: #212121;
+      background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
+      background-size: 100% 2px;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+      padding-bottom: 2px;
+
+      &:focus {
+        background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
+        linear-gradient(to top, transparent 1px, #afafaf 1px);
+      }
+    }
+
+    @include design($flat) {
+      color: #1f1f21;
+      &, &:focus {
+        border-bottom: 1px solid var(--border-light);
+      }
+    }
+  }
+
+  &.hiddenInput {
+    .text {
+      background-image: none;
+      border-bottom: 1px solid transparent;
+    }
+
+    &.noFocusHint {
+      .text {
+        &:focus {
+          background-image: none;
+          border-bottom: 1px solid transparent;
+        }
+      }
+    }
+  }
+}