@ainias42/react-bootstrap-mobile 0.1.20 → 0.1.22

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

@@ -10,6 +10,7 @@ type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
 export type ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData, OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType extends string | undefined> = RbmComponentProps<{
     interactable?: boolean;
     href?: HrefType;
+    target?: string;
     preventDefault?: boolean;
     stopPropagation?: boolean;
     useReactOnMouseLeave?: boolean;

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

@@ -6,5 +6,6 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
     label?: string;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
+    inline?: boolean;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
 export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;

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

@@ -1,13 +1,13 @@
-import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
-import { TextareaHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes, MutableRefObject, CSSProperties } from 'react';
 import { OptionalListener } from '../../Hooks/useListener';
-export type TextareaProps<OnChangeData> = RbmComponentProps<Override<TextareaHTMLAttributes<HTMLTextAreaElement>, {
+export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<Override<TextareaHTMLAttributes<HTMLTextAreaElement>, {
     label?: string;
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
-} & OptionalListener<'onChange', OnChangeData>>>;
-declare function Textarea<OnChangeData>({ label, className, style, onKeyUp, onChangeText, onEnter, ...otherProps }: TextareaProps<OnChangeData>): React.JSX.Element;
-declare const TextareaMemo: typeof Textarea;
-export { TextareaMemo as Textarea };
+    onEscape?: (newText: string) => void;
+    textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>;
+    containerRef?: MutableRefObject<HTMLLabelElement | null>;
+} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
+export declare const Textarea: import("../../../helper/withForwardRef").RefComponent<TextareaProps<unknown, unknown>, HTMLTextAreaElement>;

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

@@ -1,2 +1,2 @@
 import { MutableRefObject } from 'react';
-export declare function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement | null>): import("react").RefObject<HTMLInputElement>;
+export declare function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>): import("react").RefObject<HTMLInputElement> | MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -82,7 +82,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "classnames": "^2.3.1",
     "isomorphic-style-loader": "^5.3.2",
-    "@ainias42/js-helper": ">=0.8.9",
+    "@ainias42/js-helper": ">=0.8.10",
     "react-color": "^2.19.3",
     "react-table": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.7",

package/src/Components/Clickable/Clickable.tsx

@@ -31,6 +31,7 @@ export type ClickableProps<
     {
         interactable?: boolean;
         href?: HrefType;
+        target?: string
         preventDefault?: boolean;
         stopPropagation?: boolean;
         useReactOnMouseLeave?: boolean;
@@ -64,6 +65,7 @@ function Clickable<
         children,
         style,
         href,
+        target,
         interactable = true,
         preventDefault = false,
         stopPropagation = true,
@@ -257,6 +259,7 @@ function Clickable<
     // Render Functions
     const props = {
         style,
+        target,
         role: interactable ? 'button' : undefined,
         'aria-hidden': interactable ? undefined : true,
         className: classNames(styles.clickable, className),

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

@@ -182,11 +182,12 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
         const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);
 
         const clickOnFile = useCallback((_: any, index?: number) => {
-            if (!allowOverride || !inputRef.current) {
+            if ((index !== undefined && !allowOverride) || !inputRef.current) {
                 return;
             }
 
             indexRef.current = index;
+            console.log("LOG-d inputRef dispatch", inputRef.current);
             inputRef.current.dispatchEvent(new MouseEvent("click"));
         }, [allowOverride]);
 

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

@@ -17,6 +17,7 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
             label?: string;
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
+            inline?: boolean
         } & OptionalListener<'onChange', OnChangeData> &
             OptionalListener<'onBlur', OnBlurData> &
             OptionalListener<'onChangeDone', OnChangeDoneData>
@@ -30,6 +31,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
         style,
         onEnter,
         onKeyDown,
+        inline = false,
         onChangeText,
         ...otherProps
     }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
@@ -86,7 +88,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.input, className)} style={style}>
+        <label className={classNames(styles.input, {[styles.inline]: inline}, className)} style={style}>
             {label ? <span className={styles.label}>{label}</span> : null}
             <input
                 {...otherPropsWithoutData}

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

@@ -4,6 +4,22 @@
 .input {
   width: 100%;
 
+  &.inline {
+    --basis: 50%;
+    display: flex;
+    .label {
+      display: inline-block;
+      flex-grow: 1;
+      flex-shrink: 0;
+      flex-basis: var(--basis);
+      font-weight: normal;
+    }
+    .text {
+      // 3 numbers
+      min-width: 41px;
+    }
+  }
+
   .label {
     display: block;
     font-weight: bold;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { withMemo } from '../../../helper/withMemo';
-import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, MutableRefObject, useCallback } from 'react';
 
 import styles from './slider.scss';
 import classNames from 'classnames';
@@ -58,7 +58,7 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
     );
 
     // Effects
-    const innerRef = useOnChangeDone(onChangeDone);
+    const innerRef = useOnChangeDone(onChangeDone) as MutableRefObject<HTMLInputElement|null>;
 
     // Other
 

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

@@ -1,41 +1,66 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
-import { TextareaHTMLAttributes, useCallback, KeyboardEvent, ChangeEvent } from 'react';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { withMemo } from '../../../helper/withMemo';
+import {
+    TextareaHTMLAttributes,
+    useCallback,
+    KeyboardEvent,
+    ChangeEvent,
+    MutableRefObject,
+    CSSProperties
+} 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";
 
-export type TextareaProps<OnChangeData> = RbmComponentProps<
+export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<
         TextareaHTMLAttributes<HTMLTextAreaElement>,
         {
             label?: string;
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
+            onEscape?: (newText: string) => void;
+            textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>,
+            containerRef?: MutableRefObject<HTMLLabelElement|null>
         } & OptionalListener<'onChange', OnChangeData>
+        & OptionalListener<'onChangeDone', OnChangeDoneData>
     >
 >;
 
-function Textarea<OnChangeData>({
-    label,
-    className,
-    style,
-    onKeyUp,
-    onChangeText,
-    onEnter,
-    ...otherProps
-}: TextareaProps<OnChangeData>) {
+export const Textarea = withForwardRef(function Textarea<OnChangeData, OnChangeDoneData>({
+                                                                                             label,
+                                                                                             className,
+                                                                                             style,
+                                                                                             onKeyUp,
+                                                                                             onChangeText,
+                                                                                             onEnter,
+                                                                                             onEscape,
+                                                                                             textareaStyles,
+                                                                                             containerRef,
+                                                                                             ...otherProps
+                                                                                         }: TextareaProps<OnChangeData, OnChangeDoneData>, ref: MutableRefObject<HTMLTextAreaElement> | null) {
+    // Refs
+    const innerRef = useComposedRef(ref);
+
     // Variables
 
     // States
 
-    // Refs
-
     // Callbacks
-    const onChangeWithData = useListener<'onChange', OnChangeData>('onChange', otherProps);
+    const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        otherProps
+    );
+    const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
+        'onChangeDone',
+        otherPropsWithoutOnchange
+    );
+
     const onChange = useCallback(
         (e: ChangeEvent<HTMLTextAreaElement>) => {
             if (onChangeText) {
@@ -54,24 +79,27 @@ function Textarea<OnChangeData>({
             if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                 onEnter((e.target as HTMLTextAreaElement).value);
             }
+            if (onEscape && e.key === 'Escape' && !e.defaultPrevented) {
+                onEscape((e.target as HTMLTextAreaElement).value);
+            }
         },
-        [onEnter, onKeyUp]
+        [onEnter, onEscape, onKeyUp]
     );
 
     // Effects
+    useOnChangeDone(onChangeDone, innerRef);
+
 
     // Other
 
     // Render Functions
 
     return (
-        <label className={classNames(styles.container, className)} style={style}>
+        <label className={classNames(styles.container, className)} style={style} ref={containerRef}>
             {label ? <span className={styles.label}>{label}</span> : null}
-            <textarea {...otherProps} onKeyUp={realOnKeyPress} className={styles.textarea} onChange={onChange} />
+            <textarea {...otherPropsWithoutData} style={textareaStyles} onKeyUp={realOnKeyPress}
+                      className={styles.textarea} onChange={onChange} ref={innerRef}/>
         </label>
     );
-}
+}, styles);
 
-// Need TextareaMemo for autocompletion of phpstorm
-const TextareaMemo = withMemo(Textarea, styles);
-export { TextareaMemo as Textarea };

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

@@ -1,6 +1,6 @@
 import { MutableRefObject, useEffect, useRef } from 'react';
 
-export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement | null>) {
+export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement| HTMLTextAreaElement | null>) {
     const innerRef = useRef<HTMLInputElement>(null);
     const usedRef = ref ?? innerRef;
 

package/src/Components/RbmComponentProps.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
+import { URecord } from "@ainias42/js-helper";
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =

package/src/Components/Text/Text.tsx

@@ -5,7 +5,7 @@ import styles from './text.scss';
 import { Recursive, ValueOf } from '../../TypeHelpers';
 import { WrongChildError } from '../../WrongChildError';
 import withStyles from 'isomorphic-style-loader/withStyles';
-import { Inline } from '../Layout/Inline';
+import { Inline, InlineProps } from '../Layout/Inline';
 import { ViewProps } from '../Layout/View';
 
 export const TEXT_PRIO = {
@@ -68,7 +68,7 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
         <Inline
             __allowChildren="text"
             as={as}
-            {...props}
+            {...props as InlineProps<AsType>}
             className={classNames(styles.text, { [styles.block]: block }, prio, size, className)}
         >
             {children}