@ainias42/react-bootstrap-mobile 0.1.7

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

@@ -0,0 +1,162 @@
+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 { ArrayHelper } from '@ainias42/js-helper';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { withMemo } from '../../../helper/withMemo';
+import { InlineBlock } from '../../Layout/InlineBlock';
+import { Text, TEXT_SIZE } from '../../Text/Text';
+import { Block } from '../../Layout/Block';
+
+import styles from './seachSelectInput.scss';
+import { Flex } from '../../Layout/Flex';
+import { Grow } from '../../Layout/Grow';
+import { Clickable } from '../../Clickable/Clickable';
+import { useWindow } from '../../../WindowContext/WindowContext';
+
+export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
+    {
+        label?: string;
+        options: SelectOption[];
+        onChangeValue?: (newValues: string[]) => void;
+        values: string[];
+    } & 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);
+            }
+            setSearchText('');
+            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);
+                }
+            } 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
+
+    // Other
+
+    // Render Functions
+    const renderOption = (value: string) => (
+        <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value].key}>
+            <InlineBlock className={styles.tag}>
+                <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value].label}</Text>
+            </InlineBlock>
+        </Clickable>
+    );
+    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);

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

@@ -0,0 +1,90 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.input {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  padding-bottom: 0.1rem;
+
+  &:focus-within {
+    .selectableOptionContainer {
+      display: inherit;
+    }
+  }
+
+  @include design($material) {
+    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) {
+    &, &:focus {
+      border-bottom: 1px solid var(--border-light);
+    }
+  }
+
+  .label {
+    display: block;
+    font-weight: bold;
+  }
+
+  .text {
+    width: 100%;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+    padding: 0;
+    background-image: none;
+
+    @include design($material) {
+      color: #212121;
+    }
+
+    @include design($flat) {
+      color: #1f1f21;
+    }
+  }
+}
+
+.inputContainer {
+  display: flex;
+
+}
+
+.tag {
+  color: white;
+  background-color: var(--flavor-accent);
+  padding: 0.1rem 0.2rem;
+  margin-right: 0.1rem;
+  margin-bottom: 0.1rem;
+  border-radius: 4px;
+}
+
+.selectableOptionContainer {
+  display: none;
+  position: fixed;
+  background-color: white;
+  z-index: 1100;
+  border: 1px solid var(--border-light);
+
+
+  .selectableOption {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    cursor: pointer;
+
+    &.active {
+      color: white;
+      background-color: var(--flavor-accent);
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { Override } from '../../../TypeHelpers';
+import { ChangeEventHandler, SelectHTMLAttributes, useCallback } from 'react';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+
+import styles from './select.scss';
+import { withMemo } from '../../../helper/withMemo';
+import classNames from 'classnames';
+
+export type SelectOption = {
+    label: string;
+    value: string;
+    key?: string;
+};
+
+export type SelectProps<OnChangeData> = RbmComponentProps<
+    Override<
+        SelectHTMLAttributes<HTMLSelectElement>,
+        {
+            label?: string;
+            options: SelectOption[];
+            onChangeValue?: (newValue: string) => void;
+            inline?: boolean;
+        } & OptionalListener<'onChange', OnChangeData>
+    >
+>;
+
+export const Select = withMemo(function Select<OnChangeData>({
+    label,
+    options,
+    className,
+    style,
+    onChangeValue,
+    inline = false,
+    ...otherProps
+}: SelectProps<OnChangeData>) {
+    // Variables
+    console.log('LOG-d inline', inline);
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
+        (e) => {
+            onChangeValue?.(e.target.value);
+            onChangeWithData(e);
+        },
+        [onChangeWithData, onChangeValue]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.select, { [styles.inline]: inline }, className)} style={style}>
+            {label ? <span className={styles.label}>{label}</span> : null}
+            <select {...otherProps} className={styles.input} onChange={onChange}>
+                {options.map((option) => (
+                    <option value={option.value} key={option.key ?? option.value}>
+                        {option.label}
+                    </option>
+                ))}
+            </select>
+        </label>
+    );
+},
+styles);

package/src/Components/FormElements/Select/select.scss

@@ -0,0 +1,51 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.select {
+  width: 100%;
+
+  .label {
+    font-weight: bold;
+    display: block;
+  }
+
+  .input {
+    outline: none;
+    background-color: transparent;
+    height: 2rem;
+    line-height: 2rem;
+    color: #1f1f21;
+    appearance: none;
+    border: none;
+    border-radius: 0;
+    padding: 0 20px 0 0;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
+    background-repeat: no-repeat;
+
+    &:focus {
+      outline: none;
+    }
+
+    @include design($material) {
+      -webkit-font-smoothing: antialiased;
+      font-size: 15px;
+      background-size: auto, 100% 1px;
+      background-position: right center, left bottom;
+    }
+
+    @include design($flat) {
+      font-size: 17px;
+      background-position: right center;
+    }
+  }
+
+  &.inline {
+    display: flex;
+    align-items: center;
+
+    .label {
+      padding-right: 4px;
+      flex: 1;
+    }
+  }
+}

package/src/Components/FormElements/Slider/Slider.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { withMemo } from '../../../helper/withMemo';
+import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
+
+import styles from './slider.scss';
+import classNames from 'classnames';
+import { Override } from '../../../TypeHelpers';
+import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { useOnChangeDone } from '../hooks/useOnChangeDone';
+
+export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = RbmComponentProps<
+    Override<
+        Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>,
+        {
+            value?: number;
+        } & OptionalListener<'onChange', OnChangeData> &
+            OptionalListener<'onChangeValue', OnChangeValueData, number> &
+            OptionalListener<'onChangeDone', OnChangeDoneData>
+    >
+>;
+
+export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData, OnChangeDoneData>({
+    className,
+    style,
+    ...props
+}: SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData>) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const [onChange, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        props
+    );
+
+    const [onChangeValue, otherPropsWithoutOnChangeValue] = useListenerWithExtractedProps<
+        'onChangeValue',
+        OnChangeValueData
+    >('onChangeValue', otherPropsWithoutOnchange);
+
+    const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
+        'onChangeDone',
+        otherPropsWithoutOnChangeValue
+    );
+
+    const innerOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => {
+            onChangeValue(Number(e.target.value));
+            onChange(e);
+        },
+        [onChange, onChangeValue]
+    );
+
+    // Effects
+    const innerRef = useOnChangeDone(onChangeDone);
+
+    // Other
+
+    // Render Functions
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.slider, className)} style={style}>
+            <input
+                type="range"
+                {...otherPropsWithoutData}
+                className={styles.input}
+                onChange={innerOnChange}
+                ref={innerRef}
+            />
+        </label>
+    );
+},
+styles);

package/src/Components/FormElements/Slider/slider.scss

@@ -0,0 +1,92 @@
+$thumbWidth: 16;
+$thumbHeight: 16;
+$trackHeight: calc($thumbHeight / 4);
+$maxScreenSize: 10000;
+
+.slider {
+  --thumb-height: #{$thumbHeight}px;
+  --thumb-width: #{$thumbWidth}px;
+  --track-height: #{$trackHeight}px;
+  --clip-edges: 0.125rem;
+
+  width: 100%;
+
+  .input {
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+
+    transition: all ease 100ms;
+    height: var(--thumb-height);
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    @mixin track {
+      -webkit-appearance: none;
+      appearance: none;
+      transition: all ease 100ms;
+      height: var(--thumb-height);
+      position: relative;
+      width: 100%;
+      border-radius: var(--track-height);
+      background: linear-gradient(var(--border-light) 0 0) scroll no-repeat center /
+		100% calc(var(--track-height) + 1px);
+    }
+
+    @mixin thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: var(--thumb-width);
+      transition: all ease 100ms;
+      height: var(--thumb-height);
+      background: var(--flavor-accent);
+      position: relative;
+      border: 0;
+      border-radius: var(--thumb-width);
+
+    }
+
+    &::-webkit-slider-runnable-track {
+      @include track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include thumb;
+
+      box-shadow: calc(-100vmax - (var(--thumb-width, var(--thumb-height)) / 2)) 0 0 100vmax var(--flavor-accent);
+      $clipTop: calc(($thumbHeight - $trackHeight) / 2);
+      $clipBottom: $thumbHeight - $clipTop;
+      clip-path: path("M 0, #{0.5*$thumbHeight} \
+      a #{0.5*$thumbWidth} #{0.5*$thumbHeight}, 0 1 0, #{$thumbWidth} 0 \
+      a #{0.5*$thumbWidth} #{0.5*$thumbHeight}, 0 1 0, #{-1*$thumbWidth} 0 \
+      L  #{0.5*$thumbWidth} #{$clipTop} \
+      L  #{-1*$maxScreenSize} #{$clipTop} \
+      L  #{-1*$maxScreenSize} #{$clipBottom} \
+      L  #{0.5*$thumbWidth} #{$clipBottom} \
+      z");
+    }
+
+    &::-moz-range-thumb {
+      @include thumb;
+    }
+
+    &::-moz-range-track {
+      @include track;
+    }
+
+    &::-moz-range-progress {
+      background: transparent;
+      appearance: none;
+      background: var(--flavor-accent);
+      transition-delay: 30ms;
+      height: var(--track-height);
+      border-radius: var(--track-height);
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, 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';
+
+export type SwitchProps = RbmComponentProps<
+    Override<
+        InputHTMLAttributes<HTMLInputElement>,
+        {
+            preLabel?: string;
+            label?: string;
+            children?: string;
+            isLabelBeforeSwitch?: boolean;
+            isDual?: boolean;
+            onChangeChecked?(isChecked: boolean): void;
+        }
+    >
+>;
+
+export const Switch = withMemo(function Switch({
+    children,
+    label = '',
+    preLabel = '',
+    isLabelBeforeSwitch = false,
+    isDual = undefined,
+    id,
+    className,
+    style,
+    onChange,
+    onChangeChecked,
+    ...props
+}: SwitchProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+    const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => {
+            onChange?.(e);
+            onChangeChecked?.(e.target.checked);
+        },
+        [onChange, onChangeChecked]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    if (React.Children.count(children) === 1 && typeof children === 'string') {
+        label = children;
+    }
+
+    if (isLabelBeforeSwitch) {
+        [label, preLabel] = [preLabel, label];
+    }
+
+    if (label && preLabel && isDual === undefined) {
+        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 {...props} type="checkbox" id={id} onChange={realOnChange} />
+                <div className={styles.toggle}>
+                    <span className={styles.handle} />
+                </div>
+                <span className={styles.label}>{label}</span>
+            </label>
+        </span>
+    );
+},
+styles);