@ainias42/react-bootstrap-mobile 0.1.29 → 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 +67 -19
- package/dist/bootstrapReactMobile.js.map +1 -1
- package/dist/src/Components/FormElements/Input/Input.d.ts +2 -10
- package/package.json +1 -1
- package/src/Components/FormElements/Input/Input.tsx +77 -50
- package/src/Components/Toast/Toast.tsx +3 -1
- package/src/Components/Toast/toast.scss +2 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
*
|
|
3
|
-
* @ainias42/react-bootstrap-mobile v0.1.
|
|
3
|
+
* @ainias42/react-bootstrap-mobile v0.1.30
|
|
4
4
|
* git+https://github.com/Ainias/Bootstrap-React-Mobile.git
|
|
5
5
|
* Copyright (c) Silas Günther and project contributors.
|
|
6
6
|
* This source code is licensed under the MIT license found in the
|
|
@@ -2301,7 +2301,7 @@ var ___CSS_LOADER_API_SOURCEMAP_IMPORT___ = __webpack_require__(7537);
|
|
|
2301
2301
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3645);
|
|
2302
2302
|
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);
|
|
2303
2303
|
// Module
|
|
2304
|
-
___CSS_LOADER_EXPORT___.push([module.id, `.toastContainer__Cr4Pc{position:fixed;left:0;right:0;bottom:3rem;margin:auto;max-width:576px;z-index:1001;display:flex;align-items:center;flex-direction:column}.toast__sXrim{background-color:rgba(0,0,0,.8);min-height:48px;line-height:1.5;--text-primary-default-color: white;color:#fff;font-size:.77rem;letter-spacing:normal;transition-duration:.25s;margin:8px}.toast__sXrim.hiding__VMWIu{opacity:0}.material-design .toast__sXrim{padding:16px 24px}.flat-design .toast__sXrim{border-radius:.5rem;padding:16px}.toast__sXrim .action__WbNF_{text-transform:uppercase;margin-left:24px}.material-design .toast__sXrim .action__WbNF_{color:#bbdefb}.flat-design .toast__sXrim .action__WbNF_{color:#fff}`, "",{"version":3,"sources":["webpack://./src/Components/Toast/toast.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,uBACE,cAAA,CACA,MAAA,CACA,OAAA,CACA,WAAA,CACA,WAAA,CACA,eAAA,CACA,YAAA,CACA,YAAA,CACA,kBAAA,CACA,qBAAA,CAGF,cACE,+BAAA,CACA,eAAA,CACA,eAAA,CACA,mCAAA,CACA,UAAA,CACA,gBAAA,CACA,qBAAA,CACA,wBAAA,CACA,UAAA,CAEA,4BACE,SAAA,
|
|
2304
|
+
___CSS_LOADER_EXPORT___.push([module.id, `.toastContainer__Cr4Pc{pointer-events:none;position:fixed;left:0;right:0;bottom:3rem;margin:auto;max-width:576px;z-index:1001;display:flex;align-items:center;flex-direction:column}.toast__sXrim{pointer-events:auto;background-color:rgba(0,0,0,.8);min-height:48px;line-height:1.5;--text-primary-default-color: white;color:#fff;font-size:.77rem;letter-spacing:normal;transition-duration:.25s;margin:8px}.toast__sXrim.hiding__VMWIu{opacity:0}.material-design .toast__sXrim{padding:16px 24px}.flat-design .toast__sXrim{border-radius:.5rem;padding:16px}.toast__sXrim .action__WbNF_{text-transform:uppercase;margin-left:24px}.material-design .toast__sXrim .action__WbNF_{color:#bbdefb}.flat-design .toast__sXrim .action__WbNF_{color:#fff}`, "",{"version":3,"sources":["webpack://./src/Components/Toast/toast.scss","webpack://./src/scss/_designMixin.scss"],"names":[],"mappings":"AAGA,uBACE,mBAAA,CACA,cAAA,CACA,MAAA,CACA,OAAA,CACA,WAAA,CACA,WAAA,CACA,eAAA,CACA,YAAA,CACA,YAAA,CACA,kBAAA,CACA,qBAAA,CAGF,cACE,mBAAA,CACA,+BAAA,CACA,eAAA,CACA,eAAA,CACA,mCAAA,CACA,UAAA,CACA,gBAAA,CACA,qBAAA,CACA,wBAAA,CACA,UAAA,CAEA,4BACE,SAAA,CC1BS,+BD8BT,iBAAA,CC9BS,2BDkCT,mBAAA,CACA,YAAA,CAGF,6BACE,wBAAA,CACA,gBAAA,CCxCS,8CD2CP,aAAA,CC3CO,0CD8CP,UAAA","sourcesContent":["@import \"../../scss/variables\";\n@import \"../../scss/designMixin\";\n\n.toastContainer {\n pointer-events: none;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 3rem;\n margin: auto;\n max-width: map-get($grid-breakpoints, \"sm\");\n z-index: 1001;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.toast {\n pointer-events: auto;\n background-color: rgba(0, 0, 0, 0.8);\n min-height: 48px;\n line-height: 1.5;\n --text-primary-default-color: white;\n color: white;\n font-size: 0.77rem;\n letter-spacing: normal;\n transition-duration: 0.25s;\n margin: 8px;\n\n &.hiding {\n opacity: 0;\n }\n\n @include design($material) {\n padding: 16px 24px;\n }\n\n @include design($flat) {\n border-radius: 0.5rem;\n padding: 16px;\n }\n\n .action {\n text-transform: uppercase;\n margin-left: 24px;\n\n @include design($material) {\n color: #bbdefb\n }\n @include design($flat) {\n color: #ffffff;\n }\n }\n\n}\n","@use 'sass:selector';\n\n@mixin design($designName) {\n @if & {\n @at-root #{selector.nest(':global(.'+$designName+\")\", &)} {\n @content\n }\n } @else {\n :global(.#{$designName}) {\n @content\n }\n }\n}\n"],"sourceRoot":""}]);
|
|
2305
2305
|
// Exports
|
|
2306
2306
|
___CSS_LOADER_EXPORT___.locals = {
|
|
2307
2307
|
"toastContainer": `toastContainer__Cr4Pc`,
|
|
@@ -23101,26 +23101,53 @@ const Input = withForwardRef(function Input(_a, ref) {
|
|
|
23101
23101
|
className,
|
|
23102
23102
|
style,
|
|
23103
23103
|
onKeyDown,
|
|
23104
|
-
inline = false
|
|
23104
|
+
inline = false,
|
|
23105
|
+
value
|
|
23105
23106
|
} = _a,
|
|
23106
|
-
otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline"]);
|
|
23107
|
+
otherProps = Input_rest(_a, ["label", "className", "style", "onKeyDown", "inline", "value"]);
|
|
23107
23108
|
// States
|
|
23109
|
+
const usedValue = (0,external_react_.useMemo)(() => {
|
|
23110
|
+
if (otherProps.type !== "number" || typeof value === "number") {
|
|
23111
|
+
return value;
|
|
23112
|
+
}
|
|
23113
|
+
if (typeof value === "string") {
|
|
23114
|
+
if (value === "-") {
|
|
23115
|
+
return value;
|
|
23116
|
+
}
|
|
23117
|
+
const numberValue = parseFloat(value);
|
|
23118
|
+
if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
|
|
23119
|
+
if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
|
|
23120
|
+
return otherProps.max;
|
|
23121
|
+
}
|
|
23122
|
+
if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
|
|
23123
|
+
return otherProps.min;
|
|
23124
|
+
}
|
|
23125
|
+
}
|
|
23126
|
+
if (!Number.isNaN(Number(value))) {
|
|
23127
|
+
// Do not parse to allow ., and so on
|
|
23128
|
+
return value;
|
|
23129
|
+
}
|
|
23130
|
+
if (!Number.isNaN(numberValue)) {
|
|
23131
|
+
return parseFloat(value);
|
|
23132
|
+
}
|
|
23133
|
+
}
|
|
23134
|
+
return "";
|
|
23135
|
+
}, [value]);
|
|
23108
23136
|
// Refs
|
|
23109
23137
|
const innerRef = useComposedRef(ref);
|
|
23110
|
-
const lastValueRef = (0,external_react_.useRef)(NaN);
|
|
23111
23138
|
// Callbacks
|
|
23112
23139
|
const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps('onChange', otherProps);
|
|
23113
23140
|
const onChange = (0,external_react_.useCallback)(e => {
|
|
23114
23141
|
if (otherProps.onChangeText) {
|
|
23115
23142
|
if (otherProps.type === "number") {
|
|
23116
|
-
if (
|
|
23117
|
-
otherProps.onChangeText(
|
|
23118
|
-
|
|
23119
|
-
otherProps.onChangeText(e.target.valueAsNumber);
|
|
23120
|
-
lastValueRef.current = e.target.valueAsNumber;
|
|
23143
|
+
if (e.currentTarget.value === "-") {
|
|
23144
|
+
otherProps.onChangeText(e.currentTarget.value);
|
|
23145
|
+
return;
|
|
23121
23146
|
}
|
|
23147
|
+
const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
|
|
23148
|
+
otherProps.onChangeText(val);
|
|
23122
23149
|
} else {
|
|
23123
|
-
otherProps.onChangeText(e.
|
|
23150
|
+
otherProps.onChangeText(e.currentTarget.value);
|
|
23124
23151
|
}
|
|
23125
23152
|
}
|
|
23126
23153
|
onChangeWithData(e);
|
|
@@ -23131,16 +23158,31 @@ const Input = withForwardRef(function Input(_a, ref) {
|
|
|
23131
23158
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
23132
23159
|
if (otherProps.onEnter && e.key === 'Enter' && !e.defaultPrevented) {
|
|
23133
23160
|
if (otherProps.type === "number") {
|
|
23134
|
-
|
|
23135
|
-
|
|
23136
|
-
|
|
23137
|
-
otherProps.onEnter(e.target.valueAsNumber);
|
|
23138
|
-
lastValueRef.current = e.target.valueAsNumber;
|
|
23139
|
-
}
|
|
23161
|
+
const stringValue = e.target.value;
|
|
23162
|
+
const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
|
|
23163
|
+
otherProps.onEnter(val);
|
|
23140
23164
|
} else {
|
|
23141
23165
|
otherProps.onEnter(e.target.value);
|
|
23142
23166
|
}
|
|
23143
23167
|
}
|
|
23168
|
+
if (otherProps.type === "number") {
|
|
23169
|
+
const step = otherProps.step ? Number(otherProps.step) : 1;
|
|
23170
|
+
if (e.key === "ArrowUp") {
|
|
23171
|
+
let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
|
|
23172
|
+
if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
|
|
23173
|
+
newValue = Number(otherProps.max);
|
|
23174
|
+
}
|
|
23175
|
+
e.currentTarget.value = newValue.toString();
|
|
23176
|
+
onChange(e);
|
|
23177
|
+
} else if (e.key === "ArrowDown") {
|
|
23178
|
+
let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
|
|
23179
|
+
if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
|
|
23180
|
+
newValue = Number(otherProps.min);
|
|
23181
|
+
}
|
|
23182
|
+
e.currentTarget.value = newValue.toString();
|
|
23183
|
+
onChange(e);
|
|
23184
|
+
}
|
|
23185
|
+
}
|
|
23144
23186
|
}, [otherProps.onEnter, onKeyDown, otherProps.type]);
|
|
23145
23187
|
// Effects
|
|
23146
23188
|
useOnChangeDone(onChangeDone, innerRef);
|
|
@@ -23156,7 +23198,11 @@ const Input = withForwardRef(function Input(_a, ref) {
|
|
|
23156
23198
|
style: style
|
|
23157
23199
|
}, label ? /*#__PURE__*/external_react_.createElement("span", {
|
|
23158
23200
|
className: (input_default()).label
|
|
23159
|
-
}, label) : null, /*#__PURE__*/external_react_.createElement("input", Input_extends({
|
|
23201
|
+
}, label) : null, /*#__PURE__*/external_react_.createElement("input", Input_extends({
|
|
23202
|
+
inputMode: otherProps.type === "number" ? "numeric" : undefined
|
|
23203
|
+
}, otherPropsWithoutData, {
|
|
23204
|
+
value: usedValue,
|
|
23205
|
+
type: otherProps.type === "number" ? "text" : otherProps.type,
|
|
23160
23206
|
ref: innerRef,
|
|
23161
23207
|
className: (input_default()).text,
|
|
23162
23208
|
onBlur: onBlur,
|
|
@@ -27576,11 +27622,12 @@ function Toast(_a) {
|
|
|
27576
27622
|
// States
|
|
27577
27623
|
const [hidingStart, setHidingStart] = (0,external_react_.useState)(0);
|
|
27578
27624
|
const [startShow] = (0,external_react_.useState)(new Date().getTime());
|
|
27579
|
-
const isHidden =
|
|
27625
|
+
const [isHidden, setIsHidden] = (0,external_react_.useState)(false);
|
|
27580
27626
|
// Refs
|
|
27581
27627
|
// Callbacks
|
|
27582
27628
|
const updateHidingStart = (0,external_react_.useCallback)(() => {
|
|
27583
27629
|
setHidingStart(oldHidingStart => oldHidingStart > 0 ? oldHidingStart : new Date().getTime());
|
|
27630
|
+
setTimeout(() => setIsHidden(true), ANIMATION_DURATION);
|
|
27584
27631
|
}, [setHidingStart]);
|
|
27585
27632
|
const onDismissed = useListener('onDismissed', otherProps);
|
|
27586
27633
|
// Effects
|
|
@@ -27613,6 +27660,7 @@ function Toast(_a) {
|
|
|
27613
27660
|
// Other
|
|
27614
27661
|
// Render Functions
|
|
27615
27662
|
if (isHidden) {
|
|
27663
|
+
console.log("LOG-d isHidden");
|
|
27616
27664
|
return null;
|
|
27617
27665
|
}
|
|
27618
27666
|
let actionElement = null;
|