@ainias42/react-bootstrap-mobile 0.1.28 → 0.1.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/updateCopies.js +2 -0
- package/dist/bootstrapReactMobile.js +71 -42
- package/dist/bootstrapReactMobile.js.map +1 -1
- package/dist/src/Components/FormElements/Input/Input.d.ts +1 -1
- package/dist/src/Components/FormElements/Input/PasswordInput/PasswordInput.d.ts +4 -1
- package/dist/src/Components/FullScreen/FullScreen.d.ts +1 -3
- package/dist/src/Components/Layout/Block.d.ts +1 -1
- package/dist/src/Components/Layout/Flex.d.ts +1 -1
- package/dist/src/Components/Layout/Inline.d.ts +1 -1
- package/dist/src/Components/Layout/InlineBlock.d.ts +1 -1
- package/dist/src/Components/Text/Text.d.ts +2 -1
- package/package.json +1 -1
- package/src/Components/Dialog/dialogBackground.scss +2 -0
- package/src/Components/FormElements/CheckBox/Checkbox.tsx +0 -1
- package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx +4 -3
- package/src/Components/FormElements/Input/Input.tsx +107 -71
- package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx +5 -6
- package/src/Components/FullScreen/FullScreen.tsx +2 -5
- package/src/Components/Layout/Grid/Grid.tsx +0 -1
- package/src/Components/Text/Text.tsx +3 -2
- package/src/Components/Text/text.scss +4 -0
|
@@ -4,8 +4,8 @@ import { Override } from '../../../TypeHelpers';
|
|
|
4
4
|
import { OptionalListener } from '../../Hooks/useListener';
|
|
5
5
|
export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<Override<Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>, {
|
|
6
6
|
label?: string;
|
|
7
|
+
inline?: boolean;
|
|
7
8
|
onChangeText?: (newText: string) => void;
|
|
8
9
|
onEnter?: (newText: string) => void;
|
|
9
|
-
inline?: boolean;
|
|
10
10
|
} & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onBlur', OnBlurData> & OptionalListener<'onChangeDone', OnChangeDoneData>>>;
|
|
11
11
|
export declare const Input: import("../../../helper/withForwardRef").RefComponent<InputProps<unknown, unknown, unknown>, HTMLInputElement>;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { InputProps } from '../Input';
|
|
2
2
|
import { DistributiveOmit } from '../../../../helper/DistributiveOmit';
|
|
3
|
-
export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<InputProps<OnChangeData, OnBlurData, OnChangeEndData>, 'type'
|
|
3
|
+
export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<InputProps<OnChangeData, OnBlurData, OnChangeEndData>, 'type' | "onChangeText" | "onEnter"> & {
|
|
4
|
+
onChangeText?: (newText: string) => void;
|
|
5
|
+
onEnter?: (newText: string) => void;
|
|
6
|
+
};
|
|
4
7
|
export declare const PasswordInput: import("../../../../helper/withForwardRef").RefComponent<PasswordInputProps<unknown, unknown, unknown>, HTMLInputElement>;
|
|
@@ -8,6 +8,4 @@ export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmCom
|
|
|
8
8
|
onEnterFullscreen?: () => void;
|
|
9
9
|
onLeaveFullscreen?: () => void;
|
|
10
10
|
}>>;
|
|
11
|
-
declare
|
|
12
|
-
declare const FullScreenMemo: typeof FullScreen;
|
|
13
|
-
export { FullScreenMemo as FullScreen };
|
|
11
|
+
export declare const FullScreen: <AsTag extends keyof JSX.IntrinsicElements = "span">({ children, as, fullscreenKey, onEnterFullscreen, onLeaveFullscreen, ...otherProps }: FullScreenProps<AsTag>) => React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
import { RbmComponentProps } from '../RbmComponentProps';
|
|
4
4
|
import { ViewWithoutListenersProps } from './ViewWithoutListeners';
|
|
5
5
|
export type BlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
|
|
6
|
-
declare const BlockMemo: import("../../helper/withForwardRef").RefComponent<BlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement |
|
|
6
|
+
declare const BlockMemo: import("../../helper/withForwardRef").RefComponent<BlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
|
|
7
7
|
export { BlockMemo as Block };
|
|
@@ -6,5 +6,5 @@ export type FlexProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponent
|
|
|
6
6
|
horizontal?: boolean;
|
|
7
7
|
grow?: boolean;
|
|
8
8
|
}>;
|
|
9
|
-
declare const tmp: import("../../helper/withForwardRef").RefComponent<FlexProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement |
|
|
9
|
+
declare const tmp: import("../../helper/withForwardRef").RefComponent<FlexProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
|
|
10
10
|
export { tmp as Flex };
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
import { RbmComponentProps } from '../RbmComponentProps';
|
|
4
4
|
import { ViewWithoutListenersProps } from './ViewWithoutListeners';
|
|
5
5
|
export type InlineProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
|
|
6
|
-
declare const InlineMemo: import("../../helper/withForwardRef").RefComponent<InlineProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement |
|
|
6
|
+
declare const InlineMemo: import("../../helper/withForwardRef").RefComponent<InlineProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
|
|
7
7
|
export { InlineMemo as Inline };
|
|
@@ -6,5 +6,5 @@ export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmCo
|
|
|
6
6
|
id?: string;
|
|
7
7
|
title?: string;
|
|
8
8
|
}>;
|
|
9
|
-
declare const InlineBlockMemo: import("../../helper/withForwardRef").RefComponent<InlineBlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement |
|
|
9
|
+
declare const InlineBlockMemo: import("../../helper/withForwardRef").RefComponent<InlineBlockProps<keyof JSX.IntrinsicElements>, SVGSymbolElement | SVGElement | HTMLObjectElement | HTMLElement | HTMLHtmlElement | SVGTextElement | HTMLTitleElement | HTMLStyleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableDataCellElement | HTMLTextAreaElement | HTMLTableHeaderCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLWebViewElement | SVGSVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGStopElement | SVGSwitchElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement>;
|
|
10
10
|
export { InlineBlockMemo as InlineBlock };
|
|
@@ -19,9 +19,10 @@ export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
|
|
|
19
19
|
block?: boolean;
|
|
20
20
|
prio?: ValueOf<typeof TEXT_PRIO>;
|
|
21
21
|
size?: ValueOf<typeof TEXT_SIZE>;
|
|
22
|
+
emphasized?: boolean;
|
|
22
23
|
className?: string;
|
|
23
24
|
children: Recursive<string | undefined | null | number>;
|
|
24
25
|
} & ViewProps<AsType>;
|
|
25
|
-
declare function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({ className, children, block, prio, size, as, ...props }: TextProps<AsType>): React.JSX.Element;
|
|
26
|
+
declare function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({ className, children, block, prio, emphasized, size, as, ...props }: TextProps<AsType>): React.JSX.Element;
|
|
26
27
|
declare const tmp: typeof Text;
|
|
27
28
|
export { tmp as Text };
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { RbmComponentProps } from '../../RbmComponentProps';
|
|
3
3
|
import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
|
|
4
|
-
|
|
5
4
|
import styles from './checkbox.scss';
|
|
6
5
|
import { withMemo } from '../../../helper/withMemo';
|
|
7
6
|
import classNames from 'classnames';
|
|
@@ -235,8 +235,9 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
|
|
|
235
235
|
)}
|
|
236
236
|
</Flex>
|
|
237
237
|
<Flex horizontal={true} className={styles.previewContainer}>
|
|
238
|
-
{value?.map((file, index) =>
|
|
239
|
-
|
|
238
|
+
{value?.map((file, index) => {
|
|
239
|
+
console.log("LOG-d file", file);
|
|
240
|
+
return <Grow className={styles.preview} center={true} key={file.data}>
|
|
240
241
|
<Clickable
|
|
241
242
|
onDrop={onDrop}
|
|
242
243
|
onDragOver={onDragOver}
|
|
@@ -252,7 +253,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
|
|
|
252
253
|
</Clickable>}
|
|
253
254
|
</Clickable>
|
|
254
255
|
</Grow>
|
|
255
|
-
)
|
|
256
|
+
})}
|
|
256
257
|
<Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})} center={true}>
|
|
257
258
|
<Clickable
|
|
258
259
|
className={styles.addFileButton}
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
ChangeEventHandler,
|
|
4
|
+
InputHTMLAttributes,
|
|
5
|
+
KeyboardEvent,
|
|
6
|
+
MutableRefObject,
|
|
7
|
+
useCallback, useMemo,
|
|
8
|
+
useRef,
|
|
9
|
+
useState
|
|
10
|
+
} from 'react';
|
|
3
11
|
import { RbmComponentProps } from '../../RbmComponentProps';
|
|
4
12
|
import { Override } from '../../../TypeHelpers';
|
|
5
13
|
import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
|
|
@@ -15,90 +23,118 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
|
|
|
15
23
|
Omit<InputHTMLAttributes<HTMLInputElement>, 'onInput'>,
|
|
16
24
|
{
|
|
17
25
|
label?: string;
|
|
26
|
+
inline?: boolean;
|
|
18
27
|
onChangeText?: (newText: string) => void;
|
|
19
28
|
onEnter?: (newText: string) => void;
|
|
20
|
-
inline?: boolean
|
|
21
29
|
} & OptionalListener<'onChange', OnChangeData> &
|
|
22
|
-
|
|
23
|
-
|
|
30
|
+
OptionalListener<'onBlur', OnBlurData> &
|
|
31
|
+
OptionalListener<'onChangeDone', OnChangeDoneData>
|
|
24
32
|
>
|
|
25
33
|
>;
|
|
26
34
|
|
|
27
35
|
export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnChangeDoneData>(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
// Variables
|
|
36
|
+
{
|
|
37
|
+
label,
|
|
38
|
+
className,
|
|
39
|
+
style,
|
|
40
|
+
onKeyDown,
|
|
41
|
+
inline = false,
|
|
42
|
+
value,
|
|
43
|
+
...otherProps
|
|
44
|
+
}: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
|
|
45
|
+
ref: MutableRefObject<HTMLInputElement> | null
|
|
46
|
+
) {
|
|
47
|
+
// Variables
|
|
41
48
|
|
|
42
|
-
|
|
49
|
+
// States
|
|
50
|
+
const usedValue = useMemo(() => {
|
|
51
|
+
if (otherProps.type !== "number" || typeof value === "number"){
|
|
52
|
+
return value;
|
|
53
|
+
}
|
|
54
|
+
if (typeof value === "string"){
|
|
55
|
+
if (!Number.isNaN(Number(value))){
|
|
56
|
+
// Do not parse to allow ., and so on
|
|
57
|
+
return value;
|
|
58
|
+
}
|
|
59
|
+
if (!Number.isNaN(parseFloat(value))){
|
|
60
|
+
return parseFloat(value);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return "";
|
|
64
|
+
}, [value])
|
|
65
|
+
// Refs
|
|
66
|
+
const innerRef = useComposedRef(ref);
|
|
43
67
|
|
|
44
|
-
|
|
45
|
-
|
|
68
|
+
// Callbacks
|
|
69
|
+
const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
|
|
70
|
+
'onChange',
|
|
71
|
+
otherProps
|
|
72
|
+
);
|
|
73
|
+
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
|
|
74
|
+
(e) => {
|
|
75
|
+
if (otherProps.onChangeText) {
|
|
76
|
+
if (otherProps.type === "number") {
|
|
77
|
+
const val = !Number.isNaN(Number(e.target.value)) ? e.target.value : !Number.isNaN(parseFloat(e.target.value)) ? String(parseFloat(e.target.value)) : "";
|
|
78
|
+
otherProps.onChangeText(val);
|
|
79
|
+
} else {
|
|
80
|
+
otherProps.onChangeText(e.target.value);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
onChangeWithData(e);
|
|
84
|
+
},
|
|
85
|
+
[onChangeWithData, otherProps.onChangeText, otherProps.type]
|
|
86
|
+
);
|
|
46
87
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
);
|
|
52
|
-
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
|
|
53
|
-
(e) => {
|
|
54
|
-
if (onChangeText) {
|
|
55
|
-
onChangeText(e.target.value);
|
|
56
|
-
}
|
|
57
|
-
onChangeWithData(e);
|
|
58
|
-
},
|
|
59
|
-
[onChangeWithData, onChangeText]
|
|
60
|
-
);
|
|
88
|
+
const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps<'onBlur', OnBlurData>(
|
|
89
|
+
'onBlur',
|
|
90
|
+
otherPropsWithoutOnchange
|
|
91
|
+
);
|
|
61
92
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
93
|
+
const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
|
|
94
|
+
'onChangeDone',
|
|
95
|
+
otherPropsWithoutBlur
|
|
96
|
+
);
|
|
66
97
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
98
|
+
const realOnKeyDown = useCallback(
|
|
99
|
+
(e: KeyboardEvent<HTMLInputElement>) => {
|
|
100
|
+
onKeyDown?.(e);
|
|
101
|
+
if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
|
|
102
|
+
if (otherProps.type === "number") {
|
|
103
|
+
const stringValue = (e.target as HTMLInputElement).value;
|
|
104
|
+
const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
|
|
105
|
+
otherProps.onEnter(val)
|
|
106
|
+
} else {
|
|
107
|
+
otherProps.onEnter((e.target as HTMLInputElement).value);
|
|
108
|
+
}
|
|
71
109
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
onKeyDown
|
|
75
|
-
|
|
76
|
-
onEnter((e.target as HTMLInputElement).value);
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[onEnter, onKeyDown]
|
|
80
|
-
);
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
[otherProps.onEnter, onKeyDown, otherProps.type]
|
|
113
|
+
);
|
|
81
114
|
|
|
82
|
-
|
|
83
|
-
|
|
115
|
+
// Effects
|
|
116
|
+
useOnChangeDone(onChangeDone, innerRef);
|
|
84
117
|
|
|
85
|
-
|
|
118
|
+
// Other
|
|
86
119
|
|
|
87
|
-
|
|
120
|
+
// Render Functions
|
|
88
121
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
122
|
+
return (
|
|
123
|
+
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
124
|
+
<label className={classNames(styles.input, {[styles.inline]: inline}, className)} style={style}>
|
|
125
|
+
{label ? <span className={styles.label}>{label}</span> : null}
|
|
126
|
+
<input
|
|
127
|
+
inputMode={otherProps.type === "number" ? "numeric" : undefined}
|
|
128
|
+
{...otherPropsWithoutData}
|
|
129
|
+
value={usedValue}
|
|
130
|
+
type={otherProps.type === "number" ? "text" : otherProps.type}
|
|
131
|
+
ref={innerRef}
|
|
132
|
+
className={styles.text}
|
|
133
|
+
onBlur={onBlur}
|
|
134
|
+
onChange={onChange}
|
|
135
|
+
onKeyDown={realOnKeyDown}
|
|
136
|
+
/>
|
|
137
|
+
</label>
|
|
138
|
+
);
|
|
139
|
+
},
|
|
140
|
+
styles);
|
|
@@ -13,8 +13,11 @@ import classNames from 'classnames';
|
|
|
13
13
|
|
|
14
14
|
export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
|
|
15
15
|
InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
|
|
16
|
-
'type'
|
|
17
|
-
|
|
16
|
+
'type'|"onChangeText"|"onEnter"
|
|
17
|
+
> & {
|
|
18
|
+
onChangeText?: (newText: string) => void;
|
|
19
|
+
onEnter?: (newText: string) => void;
|
|
20
|
+
};
|
|
18
21
|
|
|
19
22
|
export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
|
|
20
23
|
{ className, style, ...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
|
|
@@ -49,7 +52,3 @@ export const PasswordInput = withForwardRef(function PasswordInput<OnChangeData,
|
|
|
49
52
|
);
|
|
50
53
|
},
|
|
51
54
|
styles);
|
|
52
|
-
|
|
53
|
-
// // Need PasswordInputMemo for autocompletion of phpstorm
|
|
54
|
-
// const PasswordInputMemo = withMemo(PasswordInput);
|
|
55
|
-
// export { PasswordInputMemo as PasswordInput };
|
|
@@ -12,7 +12,7 @@ export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmCom
|
|
|
12
12
|
>
|
|
13
13
|
>;
|
|
14
14
|
|
|
15
|
-
function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
|
|
15
|
+
export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
|
|
16
16
|
children,
|
|
17
17
|
as,
|
|
18
18
|
fullscreenKey,
|
|
@@ -77,8 +77,5 @@ function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
|
|
|
77
77
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
78
78
|
// @ts-ignore
|
|
79
79
|
return React.createElement(element, props, children);
|
|
80
|
-
}
|
|
80
|
+
})
|
|
81
81
|
|
|
82
|
-
// Need FullScreenMemo for autocompletion of phpstorm
|
|
83
|
-
const FullScreenMemo = withMemo(FullScreen);
|
|
84
|
-
export { FullScreenMemo as FullScreen };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
|
|
4
3
|
import styles from './text.scss';
|
|
5
4
|
import { Recursive, ValueOf } from '../../TypeHelpers';
|
|
6
5
|
import { WrongChildError } from '../../WrongChildError';
|
|
@@ -28,6 +27,7 @@ export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
|
|
|
28
27
|
block?: boolean;
|
|
29
28
|
prio?: ValueOf<typeof TEXT_PRIO>;
|
|
30
29
|
size?: ValueOf<typeof TEXT_SIZE>;
|
|
30
|
+
emphasized?: boolean;
|
|
31
31
|
className?: string;
|
|
32
32
|
children: Recursive<string | undefined | null | number>;
|
|
33
33
|
} & ViewProps<AsType>;
|
|
@@ -37,6 +37,7 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
|
|
|
37
37
|
children,
|
|
38
38
|
block = false,
|
|
39
39
|
prio,
|
|
40
|
+
emphasized = false,
|
|
40
41
|
size = TEXT_SIZE.medium,
|
|
41
42
|
as = 'span' as AsType,
|
|
42
43
|
...props
|
|
@@ -69,7 +70,7 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
|
|
|
69
70
|
__allowChildren="text"
|
|
70
71
|
as={as}
|
|
71
72
|
{...props as InlineProps<AsType>}
|
|
72
|
-
className={classNames(styles.text, { [styles.block]: block }, prio, size, className)}
|
|
73
|
+
className={classNames(styles.text, { [styles.block]: block, [styles.emphasized]: emphasized }, prio, size, className)}
|
|
73
74
|
>
|
|
74
75
|
{children}
|
|
75
76
|
</Inline>
|