@ainias42/react-bootstrap-mobile 0.1.32 → 0.2.1

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

@@ -3,7 +3,6 @@ import {RbmComponentProps} from '../../../RbmComponentProps';
 import {Override} from '../../../../TypeHelpers';
 import {ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef} from 'react';
 import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
-
 import styles from './fileInput.scss';
 import {withMemo} from '../../../../helper/withMemo';
 import classNames from 'classnames';
@@ -17,6 +16,7 @@ import {Image} from '../../../Image/Image';
 import {Clickable} from '../../../Clickable/Clickable';
 import {Inline} from '../../../Layout/Inline';
 import {FileType} from "./FileType";
+import { InlineBlock } from "../../../Layout/InlineBlock";
 
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
@@ -31,6 +31,7 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
             onError?: (error: string) => void;
             allowOverride?: boolean
             showDeleteButton?: boolean
+            error?: string,
         } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
     >
 >;
@@ -46,6 +47,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                                                                         allowOverride = maxFiles === 1,
                                                                                         onError,
                                                                                         showDeleteButton = true,
+    error,
                                                                                         ...otherProps
                                                                                     }: MultipleFileInputProps<OnChangeData>) {
         // Variables
@@ -275,6 +277,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                         </Clickable>
                     </Grow>
                 </Flex>
+                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
             </span>
         );
     },

package/src/Components/FormElements/Input/FileInput/fileInput.scss

@@ -79,11 +79,10 @@
 
   .value {
     display: none;
-    //position: absolute;
-    //top: 0;
-    //left: 0;
-    //right: 0;
-    //bottom: 0;
-    //opacity: 0;
+  }
+
+  .error {
+    font-size: 0.7rem;
+    --text-primary-default-color: var(--text-error)
   }
 }

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

@@ -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/useClientLayoutEffect.ts

@@ -1,8 +1,8 @@
-import { useLayoutEffect } from "react";
+import React from "react";
 
-export function useClientLayoutEffect(...params: Parameters<typeof useLayoutEffect>) {
+export function useClientLayoutEffect(...params: Parameters<typeof React.useLayoutEffect>) {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/exhaustive-deps,react-hooks/rules-of-hooks
-        useLayoutEffect(...params);
+        React.useLayoutEffect(...params);
     }
 }

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/Components/Layout/View.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
-import { withMemo } from "../../helper/withMemo";
 import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ComponentRef, DOMAttributes, ForwardedRef } from 'react';
 import { View, ViewProps } from './View';
-import { withMemo } from "../../helper/withMemo";
 import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<

package/src/Components/Toast/ToastContainer.tsx

@@ -6,17 +6,61 @@ import styles from './toast.scss';
 import classNames from 'classnames';
 import { withMemo } from '../../helper/withMemo';
 import { EmptyProps } from '../../helper/EmptyProps';
+import { useCallback, useRef, useState } from "react";
+import { ObjectHelper, URecord } from "@ainias42/js-helper";
+import { Toast } from "./Toast";
+import { Text } from "../Text/Text";
+import { ToastContext } from "./ToastContext";
 
 export type ToastContainerProps = RbmComponentProps<EmptyProps>;
 
-function ToastContainer({ className, children, style }: ToastContainerProps) {
+function ToastContainer({className, children, style}: ToastContainerProps) {
     // Variables
 
     // States
+    const lastId = useRef(0);
+    const [toasts, setToasts] = useState<URecord<number, {
+        id: number,
+        text: string,
+        duration: number,
+        action?: { name: string, onClick: (data?: any) => void, onClickData?: any }
+    }>>({});
 
     // Refs
 
     // Callbacks
+    const removeToast = useCallback((id: number) => {
+        setToasts((oldToasts) => {
+            const newToasts = {...oldToasts};
+            delete newToasts[id];
+            return newToasts;
+        });
+    }, []);
+
+    const addToast = useCallback((
+        text: string,
+        action?: {
+            name: string,
+            onClick: (data?: any) => void,
+            onClickData?: any
+        },
+        duration = 2500
+    ) => {
+        lastId.current++;
+        const id = lastId.current;
+
+        setToasts((oldToasts) => {
+            return {
+                ...oldToasts,
+                [id]: {
+                    id,
+                    text,
+                    duration,
+                    action
+                }
+            };
+        });
+    }, []);
 
     // Effects
 
@@ -25,9 +69,21 @@ function ToastContainer({ className, children, style }: ToastContainerProps) {
     // Render Functions
 
     return (
-        <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all" style={style}>
+        <ToastContext.Provider value={addToast}>
             {children}
-        </Container>
+            <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all"
+                       style={style}>
+                {ObjectHelper.values(toasts).map((toast) => <Toast key={toast.id}
+                                                                   timeToShow={toast.duration}
+                                                                   onDismissed={removeToast}
+                                                                   onDismissedData={toast.id} {...(toast.action ? {
+                    ...toast.action,
+                    actionName: toast.action.name
+                } : {})}>
+                    <Text>{toast.text}</Text>
+                </Toast>)}
+            </Container>
+        </ToastContext.Provider>
     );
 }
 

package/src/Components/Toast/ToastContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+
+export const ToastContext = createContext<<Data>(text: string, action?: {name: string, onClick: (data?: Data) => void, onClickData?: Data }, duration?: number) => void>(() => {
+    console.error("ToastContext not initialized");
+});
+
+export function useToast() {
+    return useContext(ToastContext);
+}

package/src/Components/TopBar/TopBarButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useCallback } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 
 import styles from './topBar.scss';
@@ -12,13 +11,12 @@ export type TopBarButtonProps = RbmComponentProps<{
 }>;
 
 function TopBarButton({ disabled = false, onClick, className, children, ...rbmProps }: TopBarButtonProps) {
-    const cb = useCallback(() => (onClick ? onClick() : null), [onClick]);
     return (
         <a
             role="button"
             {...rbmProps}
-            onClick={cb}
-            className={classNames(styles.button, { [styles.disabled]: disabled }, className)}
+            onClick={onClick}
+            className={classNames(styles.button, { [styles.disabled]: disabled, [styles.active]: !disabled && onClick }, className)}
         >
             {children}
         </a>

package/src/Components/TopBar/topBar.scss

@@ -24,6 +24,10 @@
   }
 
   .button {
+    &.active {
+      cursor: pointer;
+    }
+
     display: block;
     padding: 0.5rem 1rem;
     color: #0d3efd; // TODO change color

package/src/Size.ts

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

package/src/scss/_baseClasses.scss

@@ -10,18 +10,14 @@
   overflow-y: auto;
 }
 
-.full-width {
+:global(.full-width) {
   width: 100%;
 }
 
-.flat-hidden {
-  @include design($flat) {
-    display: none;
-  }
+.#{$flat} .#{$flat}-hidden {
+  display: none;
 }
 
-.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

@@ -1,16 +1,18 @@
+@import "designMixin";
+
 * {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   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/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = (env) => {
         output: {
             filename: 'bootstrapReactMobile.js',
             path: path.resolve(__dirname, 'dist'),
-            library: { type: 'umd' },
+            library: { type: 'commonjs-static' },
             clean: true,
             globalObject: 'this',
         },
@@ -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,

package/src/scss/_animations.scss

@@ -1,46 +0,0 @@
-@keyframes material-new-site {
-  0% {
-    transform: translate(0, 100%);
-    z-index: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    z-index: 1;
-  }
-}
-
-@keyframes flat-new-site {
-  0% {
-    transform: translate(100%, 0);
-    z-index: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    z-index: 1;
-  }
-}
-
-.animation-new-site {
-  background: green;
-  @include design($material) {
-    animation: material-new-site;
-    animation-duration: $animationDurationMaterial;
-  }
-  @include design($flat) {
-    animation: flat-new-site;
-    animation-duration: $animationDurationMaterial;
-  }
-}
-
-.animation-end-site {
-  @include design($material) {
-    animation: material-new-site;
-    animation-duration: $animationDurationMaterial;
-    animation-direction: reverse;
-  }
-  @include design($flat) {
-    animation: flat-new-site;
-    animation-duration: $animationDurationMaterial;
-    animation-direction: reverse;
-  }
-}