@ainias42/react-bootstrap-mobile 0.1.29 → 0.1.31

package/dist/src/Components/FormElements/Input/Input.d.ts

@@ -2,18 +2,10 @@ import { InputHTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { OptionalListener } from '../../Hooks/useListener';
-type InputTypes = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput' | "type">, {
+export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>, {
     label?: string;
     inline?: boolean;
-} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData> & ({
-    type?: InputTypes;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
-} | {
-    type: "number";
-    onChangeText?: (newNumber: number) => void;
-    onEnter?: (newNumber: number) => void;
-})>>;
+} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

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

@@ -1,5 +1,14 @@
 import * as React from 'react';
-import { ChangeEventHandler, InputHTMLAttributes, KeyboardEvent, MutableRefObject, useCallback, useRef } from 'react';
+import {
+    ChangeEvent,
+    ChangeEventHandler,
+    InputHTMLAttributes,
+    KeyboardEvent, KeyboardEventHandler,
+    MutableRefObject,
+    useCallback, useMemo,
+    useRef,
+    useState
+} from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
@@ -10,47 +19,17 @@ import classNames from 'classnames';
 import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useOnChangeDone } from '../hooks/useOnChangeDone';
 
-type InputTypes =
-    | 'button'
-    | 'checkbox'
-    | 'color'
-    | 'date'
-    | 'datetime-local'
-    | 'email'
-    | 'file'
-    | 'hidden'
-    | 'image'
-    | 'month'
-    | 'password'
-    | 'radio'
-    | 'range'
-    | 'reset'
-    | 'search'
-    | 'submit'
-    | 'tel'
-    | 'text'
-    | 'time'
-    | 'url'
-    | 'week';
-
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
-        Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput' | "type">,
+        Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>,
         {
             label?: string;
-            inline?: boolean
+            inline?: boolean;
+            onChangeText?: (newText: string) => void;
+            onEnter?: (newText: string) => void;
         } & OptionalListener<'onChange', OnChangeData> &
         OptionalListener<'onBlur', OnBlurData> &
         OptionalListener<'onChangeDone', OnChangeDoneData>
-        & ({
-        type?: InputTypes
-        onChangeText?: (newText: string) => void;
-        onEnter?: (newText: string) => void;
-    } | {
-        type: "number"
-        onChangeText?: (newNumber: number) => void;
-        onEnter?: (newNumber: number) => void;
-    })
     >
 >;
 
@@ -61,6 +40,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             style,
             onKeyDown,
             inline = false,
+            value,
             ...otherProps
         }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
         ref: MutableRefObject<HTMLInputElement> | null
@@ -68,28 +48,56 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
         // Variables
 
         // States
+        const usedValue = useMemo(() => {
+            if (otherProps.type !== "number" || typeof value === "number") {
+                return value;
+            }
+            if (typeof value === "string") {
+                if (value === "-"){
+                    return value;
+                }
+
+                const numberValue = parseFloat(value);
+                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
+                    if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
+                        return otherProps.max;
+                    }
+                    if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
+                        return otherProps.min;
+                    }
+                }
 
+                if (!Number.isNaN(Number(value))) {
+                    // Do not parse to allow ., and so on
+                    return value;
+                }
+                if (!Number.isNaN(numberValue)) {
+                    return parseFloat(value);
+                }
+            }
+            return "";
+        }, [value])
         // Refs
         const innerRef = useComposedRef(ref);
-        const lastValueRef = useRef(NaN);
 
         // Callbacks
         const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
             'onChange',
             otherProps
         );
-        const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-            (e) => {
+        const onChange = useCallback(
+            (e: ChangeEvent<HTMLInputElement>|KeyboardEvent<HTMLInputElement>) => {
                 if (otherProps.onChangeText) {
                     if (otherProps.type === "number") {
-                        if (Number.isNaN(e.target.valueAsNumber)){
-                            otherProps.onChangeText(lastValueRef.current);
-                        } else {
-                            otherProps.onChangeText(e.target.valueAsNumber);
-                            lastValueRef.current = e.target.valueAsNumber;
+                        if (e.currentTarget.value === "-") {
+                            otherProps.onChangeText(e.currentTarget.value);
+                            return;
                         }
+
+                        const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
+                        otherProps.onChangeText(val);
                     } else {
-                        otherProps.onChangeText(e.target.value);
+                        otherProps.onChangeText(e.currentTarget.value);
                     }
                 }
                 onChangeWithData(e);
@@ -112,16 +120,32 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                 onKeyDown?.(e);
                 if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                     if (otherProps.type === "number") {
-                        if (Number.isNaN((e.target as HTMLInputElement).valueAsNumber)){
-                            otherProps.onEnter(lastValueRef.current);
-                        } else {
-                            otherProps.onEnter((e.target as HTMLInputElement).valueAsNumber);
-                            lastValueRef.current = (e.target as HTMLInputElement).valueAsNumber;
-                        }
+                        const stringValue = (e.target as HTMLInputElement).value;
+                        const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
+                        otherProps.onEnter(val)
                     } else {
                         otherProps.onEnter((e.target as HTMLInputElement).value);
                     }
+                }
 
+                if (otherProps.type === "number") {
+                    const step = otherProps.step ? Number(otherProps.step) : 1;
+                    if (e.key === "ArrowUp"){
+                        let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
+                        if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
+                           newValue = Number(otherProps.max);
+                        }
+                        e.currentTarget.value = newValue.toString();
+                        onChange(e);
+                    }
+                    else if (e.key === "ArrowDown"){
+                        let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
+                        if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
+                            newValue = Number(otherProps.min);
+                        }
+                        e.currentTarget.value = newValue.toString();
+                        onChange(e);
+                    }
                 }
             },
             [otherProps.onEnter, onKeyDown, otherProps.type]
@@ -139,7 +163,10 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
             <label className={classNames(styles.input, {[styles.inline]: inline}, className)} style={style}>
                 {label ? <span className={styles.label}>{label}</span> : null}
                 <input
+                    inputMode={otherProps.type === "number" ? "numeric" : undefined}
                     {...otherPropsWithoutData}
+                    value={usedValue}
+                    type={otherProps.type === "number" ? "text" : otherProps.type}
                     ref={innerRef}
                     className={styles.text}
                     onBlur={onBlur}

package/src/Components/Toast/Toast.tsx

@@ -34,13 +34,14 @@ function Toast<ActionData, DismissedData>({
     // States
     const [hidingStart, setHidingStart] = useState<number>(0);
     const [startShow] = useState(new Date().getTime());
-    const isHidden = hidingStart > 0 && ANIMATION_DURATION + hidingStart < new Date().getTime();
+    const [isHidden, setIsHidden] = useState<boolean>(false);
 
     // Refs
 
     // Callbacks
     const updateHidingStart = useCallback(() => {
         setHidingStart((oldHidingStart) => (oldHidingStart > 0 ? oldHidingStart : new Date().getTime()));
+        setTimeout(() => setIsHidden(true), ANIMATION_DURATION);
     }, [setHidingStart]);
 
     const onDismissed = useListener('onDismissed', otherProps);
@@ -78,6 +79,7 @@ function Toast<ActionData, DismissedData>({
 
     // Render Functions
     if (isHidden) {
+        console.log("LOG-d isHidden");
         return null;
     }
 

package/src/Components/Toast/toast.scss

@@ -2,6 +2,7 @@
 @import "../../scss/designMixin";
 
 .toastContainer {
+  pointer-events: none;
   position: fixed;
   left: 0;
   right: 0;
@@ -15,6 +16,7 @@
 }
 
 .toast {
+  pointer-events: auto;
   background-color: rgba(0, 0, 0, 0.8);
   min-height: 48px;
   line-height: 1.5;