@ainias42/react-bootstrap-mobile 0.1.30 → 0.1.31
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/dist/bootstrapReactMobile.js +42 -6
- package/dist/bootstrapReactMobile.js.map +1 -1
- 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/package.json +1 -1
- package/src/Components/FormElements/Input/Input.tsx +48 -9
- package/src/Components/Toast/Toast.tsx +3 -1
- package/src/Components/Toast/toast.scss +2 -0
|
@@ -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 | HTMLLinkElement | 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 | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | 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 | HTMLLinkElement | 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 | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | 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 | HTMLLinkElement | 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 | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | 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 | HTMLLinkElement | 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 | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLParamElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | 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 };
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {
|
|
3
|
+
ChangeEvent,
|
|
3
4
|
ChangeEventHandler,
|
|
4
5
|
InputHTMLAttributes,
|
|
5
|
-
KeyboardEvent,
|
|
6
|
+
KeyboardEvent, KeyboardEventHandler,
|
|
6
7
|
MutableRefObject,
|
|
7
8
|
useCallback, useMemo,
|
|
8
9
|
useRef,
|
|
@@ -48,15 +49,29 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
|
|
|
48
49
|
|
|
49
50
|
// States
|
|
50
51
|
const usedValue = useMemo(() => {
|
|
51
|
-
if (otherProps.type !== "number" || typeof value === "number"){
|
|
52
|
+
if (otherProps.type !== "number" || typeof value === "number") {
|
|
52
53
|
return value;
|
|
53
54
|
}
|
|
54
|
-
if (typeof value === "string"){
|
|
55
|
-
if (
|
|
55
|
+
if (typeof value === "string") {
|
|
56
|
+
if (value === "-"){
|
|
57
|
+
return value;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const numberValue = parseFloat(value);
|
|
61
|
+
if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
|
|
62
|
+
if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
|
|
63
|
+
return otherProps.max;
|
|
64
|
+
}
|
|
65
|
+
if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
|
|
66
|
+
return otherProps.min;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (!Number.isNaN(Number(value))) {
|
|
56
71
|
// Do not parse to allow ., and so on
|
|
57
72
|
return value;
|
|
58
73
|
}
|
|
59
|
-
if (!Number.isNaN(
|
|
74
|
+
if (!Number.isNaN(numberValue)) {
|
|
60
75
|
return parseFloat(value);
|
|
61
76
|
}
|
|
62
77
|
}
|
|
@@ -70,14 +85,19 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
|
|
|
70
85
|
'onChange',
|
|
71
86
|
otherProps
|
|
72
87
|
);
|
|
73
|
-
const onChange = useCallback
|
|
74
|
-
(e) => {
|
|
88
|
+
const onChange = useCallback(
|
|
89
|
+
(e: ChangeEvent<HTMLInputElement>|KeyboardEvent<HTMLInputElement>) => {
|
|
75
90
|
if (otherProps.onChangeText) {
|
|
76
91
|
if (otherProps.type === "number") {
|
|
77
|
-
|
|
92
|
+
if (e.currentTarget.value === "-") {
|
|
93
|
+
otherProps.onChangeText(e.currentTarget.value);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
|
|
78
98
|
otherProps.onChangeText(val);
|
|
79
99
|
} else {
|
|
80
|
-
otherProps.onChangeText(e.
|
|
100
|
+
otherProps.onChangeText(e.currentTarget.value);
|
|
81
101
|
}
|
|
82
102
|
}
|
|
83
103
|
onChangeWithData(e);
|
|
@@ -106,7 +126,26 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
|
|
|
106
126
|
} else {
|
|
107
127
|
otherProps.onEnter((e.target as HTMLInputElement).value);
|
|
108
128
|
}
|
|
129
|
+
}
|
|
109
130
|
|
|
131
|
+
if (otherProps.type === "number") {
|
|
132
|
+
const step = otherProps.step ? Number(otherProps.step) : 1;
|
|
133
|
+
if (e.key === "ArrowUp"){
|
|
134
|
+
let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
|
|
135
|
+
if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
|
|
136
|
+
newValue = Number(otherProps.max);
|
|
137
|
+
}
|
|
138
|
+
e.currentTarget.value = newValue.toString();
|
|
139
|
+
onChange(e);
|
|
140
|
+
}
|
|
141
|
+
else if (e.key === "ArrowDown"){
|
|
142
|
+
let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
|
|
143
|
+
if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
|
|
144
|
+
newValue = Number(otherProps.min);
|
|
145
|
+
}
|
|
146
|
+
e.currentTarget.value = newValue.toString();
|
|
147
|
+
onChange(e);
|
|
148
|
+
}
|
|
110
149
|
}
|
|
111
150
|
},
|
|
112
151
|
[otherProps.onEnter, onKeyDown, otherProps.type]
|
|
@@ -34,13 +34,14 @@ function Toast<ActionData, DismissedData>({
|
|
|
34
34
|
// States
|
|
35
35
|
const [hidingStart, setHidingStart] = useState<number>(0);
|
|
36
36
|
const [startShow] = useState(new Date().getTime());
|
|
37
|
-
const isHidden =
|
|
37
|
+
const [isHidden, setIsHidden] = useState<boolean>(false);
|
|
38
38
|
|
|
39
39
|
// Refs
|
|
40
40
|
|
|
41
41
|
// Callbacks
|
|
42
42
|
const updateHidingStart = useCallback(() => {
|
|
43
43
|
setHidingStart((oldHidingStart) => (oldHidingStart > 0 ? oldHidingStart : new Date().getTime()));
|
|
44
|
+
setTimeout(() => setIsHidden(true), ANIMATION_DURATION);
|
|
44
45
|
}, [setHidingStart]);
|
|
45
46
|
|
|
46
47
|
const onDismissed = useListener('onDismissed', otherProps);
|
|
@@ -78,6 +79,7 @@ function Toast<ActionData, DismissedData>({
|
|
|
78
79
|
|
|
79
80
|
// Render Functions
|
|
80
81
|
if (isHidden) {
|
|
82
|
+
console.log("LOG-d isHidden");
|
|
81
83
|
return null;
|
|
82
84
|
}
|
|
83
85
|
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
@import "../../scss/designMixin";
|
|
3
3
|
|
|
4
4
|
.toastContainer {
|
|
5
|
+
pointer-events: none;
|
|
5
6
|
position: fixed;
|
|
6
7
|
left: 0;
|
|
7
8
|
right: 0;
|
|
@@ -15,6 +16,7 @@
|
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
.toast {
|
|
19
|
+
pointer-events: auto;
|
|
18
20
|
background-color: rgba(0, 0, 0, 0.8);
|
|
19
21
|
min-height: 48px;
|
|
20
22
|
line-height: 1.5;
|