@ainias42/react-bootstrap-mobile 0.1.28 → 0.1.29

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

@@ -2,10 +2,18 @@ import { InputHTMLAttributes } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { OptionalListener } from '../../Hooks/useListener';
-export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>, {
+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">, {
     label?: string;
+    inline?: boolean;
+} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData> & ({
+    type?: InputTypes;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
-    inline?: boolean;
-} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
+} | {
+    type: "number";
+    onChangeText?: (newNumber: number) => void;
+    onEnter?: (newNumber: number) => void;
+})>>;
 export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;
+export {};

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

@@ -1,4 +1,7 @@
 import { InputProps } from '../Input';
 import { DistributiveOmit } from '../../../../helper/DistributiveOmit';
-export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<InputProps<OnChangeData, OnBlurData, OnChangeEndData>, 'type'>;
+export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<InputProps<OnChangeData, OnBlurData, OnChangeEndData>, 'type' | "onChangeText" | "onEnter"> & {
+    onChangeText?: (newText: string) => void;
+    onEnter?: (newText: string) => void;
+};
 export declare const PasswordInput: import("../../../../helper/withForwardRef").RefComponent<PasswordInputProps<unknown, unknown, unknown>, HTMLInputElement>;

package/dist/src/Components/FullScreen/FullScreen.d.ts

@@ -8,6 +8,4 @@ export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmCom
     onEnterFullscreen?: () => void;
     onLeaveFullscreen?: () => void;
 }>>;
-declare function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({ children, as, fullscreenKey, onEnterFullscreen, onLeaveFullscreen, ...otherProps }: FullScreenProps<AsTag>): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const FullScreenMemo: typeof FullScreen;
-export { FullScreenMemo as FullScreen };
+export declare const FullScreen: <AsTag extends keyof JSX.IntrinsicElements = "span">({ children, as, fullscreenKey, onEnterFullscreen, onLeaveFullscreen, ...otherProps }: FullScreenProps<AsTag>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/dist/src/Components/Text/Text.d.ts

@@ -19,9 +19,10 @@ export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
     block?: boolean;
     prio?: ValueOf<typeof TEXT_PRIO>;
     size?: ValueOf<typeof TEXT_SIZE>;
+    emphasized?: boolean;
     className?: string;
     children: Recursive<string | undefined | null | number>;
 } & ViewProps<AsType>;
-declare function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({ className, children, block, prio, size, as, ...props }: TextProps<AsType>): React.JSX.Element;
+declare function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({ className, children, block, prio, emphasized, size, as, ...props }: TextProps<AsType>): React.JSX.Element;
 declare const tmp: typeof Text;
 export { tmp as Text };

package/package.json

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

package/src/Components/Dialog/dialogBackground.scss

@@ -1,6 +1,8 @@
 .dialogBackground {
   background-color: white;
   padding: 0.5rem;
+  max-height: 80vh;
+  overflow: auto;
 
   .title {
     margin: 0 0 0.8rem;

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
-
 import styles from './checkbox.scss';
 import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';

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

@@ -235,8 +235,9 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                     )}
                 </Flex>
                 <Flex horizontal={true} className={styles.previewContainer}>
-                    {value?.map((file, index) => (
-                        <Grow className={styles.preview} center={true} key={file.data}>
+                    {value?.map((file, index) => {
+                        console.log("LOG-d file", file);
+                        return <Grow className={styles.preview} center={true} key={file.data}>
                             <Clickable
                                 onDrop={onDrop}
                                 onDragOver={onDragOver}
@@ -252,7 +253,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                                     </Clickable>}
                             </Clickable>
                         </Grow>
-                    ))}
+                    })}
                     <Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})} center={true}>
                         <Clickable
                             className={styles.addFileButton}

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

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

@@ -13,8 +13,11 @@ import classNames from 'classnames';
 
 export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
     InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
-    'type'
->;
+    'type'|"onChangeText"|"onEnter"
+> & {
+    onChangeText?: (newText: string) => void;
+    onEnter?: (newText: string) => void;
+};
 
 export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
     { className, style, ...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
@@ -49,7 +52,3 @@ export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData,
     );
 },
 styles);
-
-// // Need PasswordInputMemo for autocompletion of phpstorm
-// const PasswordInputMemo = withMemo(PasswordInput);
-// export { PasswordInputMemo as PasswordInput };

package/src/Components/FullScreen/FullScreen.tsx

@@ -12,7 +12,7 @@ export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmCom
     >
 >;
 
-function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
+export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
     children,
     as,
     fullscreenKey,
@@ -77,8 +77,5 @@ function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return React.createElement(element, props, children);
-}
+})
 
-// Need FullScreenMemo for autocompletion of phpstorm
-const FullScreenMemo = withMemo(FullScreen);
-export { FullScreenMemo as FullScreen };

package/src/Components/Layout/Grid/Grid.tsx

@@ -3,7 +3,6 @@ import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Block } from '../Block';
 import classNames from 'classnames';
-
 import styles from './grid.scss';
 import { useMemo } from 'react';
 

package/src/Components/Text/Text.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-
 import styles from './text.scss';
 import { Recursive, ValueOf } from '../../TypeHelpers';
 import { WrongChildError } from '../../WrongChildError';
@@ -28,6 +27,7 @@ export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
     block?: boolean;
     prio?: ValueOf<typeof TEXT_PRIO>;
     size?: ValueOf<typeof TEXT_SIZE>;
+    emphasized?: boolean;
     className?: string;
     children: Recursive<string | undefined | null | number>;
 } & ViewProps<AsType>;
@@ -37,6 +37,7 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
     children,
     block = false,
     prio,
+    emphasized = false,
     size = TEXT_SIZE.medium,
     as = 'span' as AsType,
     ...props
@@ -69,7 +70,7 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
             __allowChildren="text"
             as={as}
             {...props as InlineProps<AsType>}
-            className={classNames(styles.text, { [styles.block]: block }, prio, size, className)}
+            className={classNames(styles.text, { [styles.block]: block, [styles.emphasized]: emphasized }, prio, size, className)}
         >
             {children}
         </Inline>

package/src/Components/Text/text.scss

@@ -65,4 +65,8 @@ $tertiaryColor: #A1A1AA; // Gray-400
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  &.emphasized {
+    font-weight: bold;
+  }
 }