@ainias42/react-bootstrap-mobile 0.2.0 → 0.2.1

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

@@ -5,7 +5,7 @@ import {
     KeyboardEvent,
     MutableRefObject,
     useCallback, useEffect,
-    useMemo,
+    useMemo, useRef,
 } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
@@ -16,6 +16,9 @@ import styles from './input.scss';
 import classNames from 'classnames';
 import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
+import { useSendFormContext } from "../Controller/SendFormContext";
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -25,6 +28,7 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
             inline?: boolean;
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
+            error?: string,
         } & OptionalListener<'onChange', OnChangeData> &
         OptionalListener<'onBlur', OnBlurData> &
         OptionalListener<'onChangeDone', OnChangeDoneData>
@@ -39,7 +43,9 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             onKeyDown,
             inline = false,
             value,
+            error,
             onChangeText,
+            onEnter,
             ...otherProps
         }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
         ref: MutableRefObject<HTMLInputElement> | null
@@ -77,9 +83,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             return "";
         }, [value, otherProps.max, otherProps.min, otherProps.type]);
         // Refs
-        const innerRef = useComposedRef(ref);
+        const innerRef = useRef<HTMLInputElement>(null);
+        const refFunction = useComposedRef(ref, innerRef);
 
         // Callbacks
+        const sendForm = useSendFormContext();
+        onEnter ??= sendForm;
+
         const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
             'onChange',
             otherProps
@@ -117,13 +127,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
         const realOnKeyDown = useCallback(
             (e: KeyboardEvent<HTMLInputElement>) => {
                 onKeyDown?.(e);
-                if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+                if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                     if (otherProps.type === "number") {
                         const stringValue = (e.target as HTMLInputElement).value;
                         const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
-                        otherProps.onEnter(val);
+                        onEnter(val);
                     } else {
-                        otherProps.onEnter((e.target as HTMLInputElement).value);
+                        onEnter((e.target as HTMLInputElement).value);
                     }
                 }
 
@@ -177,12 +187,13 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     {...otherPropsWithoutData}
                     value={usedValue}
                     type={otherProps.type === "number" ? "text" : otherProps.type}
-                    ref={innerRef}
+                    ref={refFunction}
                     className={styles.text}
                     onBlur={onBlur}
                     onChange={onChange}
                     onKeyDown={realOnKeyDown}
                 />
+                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
             </label>
         );
     },

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

@@ -45,7 +45,7 @@ export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData,
             <Grow>
                 <Input {...props} type={isVisible ? 'text' : 'password'} ref={ref} />
             </Grow>
-            <Clickable onClick={toggleVisible} className={styles.showButton}>
+            <Clickable onClick={toggleVisible} className={styles.showButton} interactable={false}>
                 <Icon icon={isVisible ? faEye : faEyeSlash} />
             </Clickable>
         </Flex>

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

@@ -75,4 +75,9 @@
       }
     }
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

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

@@ -7,6 +7,8 @@ import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useLi
 import styles from './select.scss';
 import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
 
 export type SelectOption = {
     label: string;
@@ -23,6 +25,7 @@ export type SelectProps<OnChangeData> = RbmComponentProps<
             onChangeValue?: (newValue: string) => void;
             inline?: boolean;
             small?: boolean;
+            error?: string;
         } & OptionalListener<'onChange', OnChangeData>
     >
 >;
@@ -35,6 +38,7 @@ export const Select = withMemo(function Select<OnChangeData>({
     onChangeValue,
     inline = false,
     small = false,
+    error,
     ...otherProps
 }: SelectProps<OnChangeData>) {
     // Variables
@@ -72,6 +76,7 @@ export const Select = withMemo(function Select<OnChangeData>({
                     </option>
                 ))}
             </select>
+            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
         </label>
     );
 },

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

@@ -53,4 +53,9 @@
     height: initial;
     line-height: 1.5rem;
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -7,15 +7,16 @@ import {
     KeyboardEvent,
     ChangeEvent,
     MutableRefObject,
-    CSSProperties
+    CSSProperties, useRef
 } from 'react';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-
 import styles from './textarea.scss';
 import classNames from 'classnames';
 import { withForwardRef } from "../../../helper/withForwardRef";
 import { useOnChangeDone } from "../hooks/useOnChangeDone";
 import { useComposedRef } from "../../Hooks/useComposedRef";
+import { InlineBlock } from "../../Layout/InlineBlock";
+import { Text } from "../../Text/Text";
 
 export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -27,6 +28,7 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
             onEscape?: (newText: string) => void;
             textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>,
             containerRef?: MutableRefObject<HTMLLabelElement|null>
+            error?: string,
         } & OptionalListener<'onChange', OnChangeData>
         & OptionalListener<'onChangeDone', OnChangeDoneData>
     >
@@ -42,10 +44,12 @@ export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeD
                                                                                              onEscape,
                                                                                              textareaStyles,
                                                                                              containerRef,
+    error,
                                                                                              ...otherProps
                                                                                          }: TextareaProps<OnChangeData, OnChangeDoneData>, ref: MutableRefObject<HTMLTextAreaElement> | null) {
     // Refs
-    const innerRef = useComposedRef(ref);
+    const innerRef = useRef<HTMLTextAreaElement>(null);
+    const refSetter = useComposedRef(ref, innerRef);
 
     // Variables
 
@@ -98,7 +102,8 @@ export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeD
         <label className={classNames(styles.container, className)} style={style} ref={containerRef}>
             {label ? <span className={styles.label}>{label}</span> : null}
             <textarea {...otherPropsWithoutData} style={textareaStyles} onKeyUp={realOnKeyPress}
-                      className={styles.textarea} onChange={onChange} ref={innerRef}/>
+                      className={styles.textarea} onChange={onChange} ref={refSetter}/>
+            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
         </label>
     );
 }, styles);

package/src/Components/FormElements/Textarea/textarea.scss

@@ -1,12 +1,16 @@
 .container {
   width: 100%;
-  height: 10rem;
+  min-height: 10rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .label {
     display: block;
   }
 
   textarea {
+    flex: 1;
     background-color: #efeff4;
     color: #1f1f21;
     box-shadow: none;
@@ -19,4 +23,9 @@
     border-radius: 4px;
     border: 1px solid var(--border-light);
   }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
+  }
 }

package/src/Components/FormElements/hooks/useOnChangeDone.ts

@@ -10,7 +10,7 @@ export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRe
         return () => {
             elem?.removeEventListener('change', onChangeDone);
         };
-    }, [ref, onChangeDone, usedRef]);
+    }, [onChangeDone, usedRef]);
 
     return usedRef;
 }

package/src/Components/Hooks/useComposedRef.ts

@@ -1,17 +1,14 @@
-import { ForwardedRef, useEffect, useRef } from 'react';
-
-export const useComposedRef = <T>(ref: ForwardedRef<T>, initialValue: T | null = null) => {
-    const targetRef = useRef<T>(initialValue);
-
-    useEffect(() => {
-        if (!ref) return;
-
-        if (typeof ref === 'function') {
-            ref(targetRef.current);
-        } else {
-            ref.current = targetRef.current;
+import { ForwardedRef, useCallback, useEffect, useRef } from 'react';
+
+export function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]) {
+    return useCallback((val: RefVal | null) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function') {
+                ref(val);
+            } else if (ref) {
+                ref.current = val;
+            }
         }
-    }, [ref]);
-
-    return targetRef;
-};
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/src/Components/Image/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { CSSProperties, DOMAttributes } from 'react';
+import { CSSProperties } from 'react';
 import { Override } from '../../TypeHelpers';
 
 import styles from './image.scss';
@@ -9,7 +9,7 @@ import classNames from 'classnames';
 
 export type ImageProps = RbmComponentProps<
     Override<
-        Omit<React.ComponentPropsWithoutRef<'img'>, keyof DOMAttributes<'img'>>,
+        React.ComponentPropsWithoutRef<'img'>,
         {
             src: string;
             style?: CSSProperties;

package/src/Size.ts

@@ -0,0 +1,9 @@
+
+export enum Size {
+    xSmall,
+    small,
+    medium,
+    large,
+    xLarge,
+    xxLarge,
+};

package/src/scss/_baseClasses.scss

@@ -1,12 +1,12 @@
-:global(.full-height) {
+.full-height {
   height: 100%;
 }
 
-:global(.full-min-height) {
+.full-min-height {
   min-height: 100%;
 }
 
-:global(.scrollable) {
+.scrollable {
   overflow-y: auto;
 }
 
@@ -14,14 +14,10 @@
   width: 100%;
 }
 
-:global(.flat-hidden) {
-  @include design($flat) {
-    display: none;
-  }
+.#{$flat} .#{$flat}-hidden {
+  display: none;
 }
 
-:global(.material-hidden) {
-  @include design($material) {
-    display: none;
-  }
+.#{$material} .#{$material}-hidden {
+  display: none;
 }

package/src/scss/_colors.scss

@@ -1,7 +1,4 @@
-@include design($material) {
-  --flavor-accent: #37474f;
-  --background-accent: #62727b;
-}
+
 
 :root {
   --flavor-basic: #000000;
@@ -12,9 +9,17 @@
   --border-light: #cecece;
   --border-strong: #717171;
   --background-destructive: #FECACA; // Red-200
+
+  --text-error: var(--flavor-destructive);
+
+}
+
+.#{$material} {
+  --flavor-accent: #37474f;
+  --background-accent: #62727b;
 }
 
-@include design($flat) {
+.#{$flat} {
   --flavor-accent: #0076ff;
   --background-accent: #adcdfd;
 }

package/src/scss/_default.scss

@@ -6,13 +6,13 @@
   font-weight: 400;
 }
 
-@include design($material) {
+.#{$material} {
   * {
     font-family: "Roboto", "Noto", sans-serif;
   }
 }
 
-@include design($flat) {
+.#{$flat} {
   * {
     font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
   }

package/src/scss/_variables.scss

@@ -1,5 +1,5 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 $classPrefix: "rbm-";
 

package/webpack.config.js

@@ -40,6 +40,7 @@ module.exports = (env) => {
             '@fortawesome/fontawesome-svg-core': 'commonjs2 @fortawesome/fontawesome-svg-core',
             '@fortawesome/free-solid-svg-icons': 'commonjs2 @fortawesome/free-solid-svg-icons',
             'react-beautiful-dnd': 'commonjs2 react-beautiful-dnd',
+            'react-hook-form': 'commonjs2 react-hook-form',
         },
         optimization: {
             minimize: false,