@elcrm/form 0.0.69 → 0.0.70
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/fields/Date.js +24 -28
- package/dist/fields/Input.js +32 -24
- package/dist/fields/Mask.js +62 -50
- package/dist/fields/Money.js +65 -52
- package/dist/fields/Numeric.js +49 -42
- package/dist/fields/Phone.js +63 -53
- package/dist/fields/Textarea.js +40 -31
- package/dist/fields/Time.js +4 -4
- package/dist/index.umd.js +1 -1
- package/dist/package.js +1 -1
- package/package.json +1 -1
package/dist/fields/Date.js
CHANGED
|
@@ -35,36 +35,32 @@ function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder:
|
|
|
35
35
|
return Number.isNaN(t.getTime()) ? /* @__PURE__ */ new Date() : e;
|
|
36
36
|
}
|
|
37
37
|
return /* @__PURE__ */ new Date();
|
|
38
|
-
}, []), { value: D
|
|
38
|
+
}, []), { value: D } = n(b, S, C), [O, k] = a.useState(E(D)), A = a.useRef({
|
|
39
39
|
x: 0,
|
|
40
40
|
y: 0,
|
|
41
41
|
b: 0
|
|
42
|
-
}), [
|
|
42
|
+
}), [j, M] = a.useState(!1);
|
|
43
43
|
a.useEffect(() => {
|
|
44
|
-
|
|
45
|
-
}, [
|
|
46
|
-
|
|
47
|
-
O,
|
|
48
|
-
E
|
|
49
|
-
]);
|
|
50
|
-
let P = (e) => {
|
|
44
|
+
k(E(D));
|
|
45
|
+
}, [D, E]);
|
|
46
|
+
let N = (e) => {
|
|
51
47
|
let t = {
|
|
52
48
|
value: e,
|
|
53
49
|
name: S
|
|
54
50
|
};
|
|
55
|
-
b && S ? b.setValue(t) :
|
|
56
|
-
},
|
|
51
|
+
b && S ? b.setValue(t) : k(e), g && g !== b?.onValue && g(t);
|
|
52
|
+
}, P = (e) => {
|
|
57
53
|
if (h) return;
|
|
58
54
|
let t = e.currentTarget.getBoundingClientRect();
|
|
59
|
-
|
|
55
|
+
A.current = {
|
|
60
56
|
x: t.left,
|
|
61
57
|
b: t.bottom,
|
|
62
58
|
y: t.top
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
p && (
|
|
66
|
-
let
|
|
67
|
-
return d &&
|
|
59
|
+
}, M(!0);
|
|
60
|
+
}, F = {};
|
|
61
|
+
p && (F.placeholder = p);
|
|
62
|
+
let I = D == null || D === "" || typeof D == "string" && r(D);
|
|
63
|
+
return d && I ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [x ? x() : /* @__PURE__ */ c(t, {
|
|
68
64
|
type: "date",
|
|
69
65
|
label: i,
|
|
70
66
|
error: u,
|
|
@@ -76,29 +72,29 @@ function p({ label: i = "", error: u, hidden: d = !1, className: f, placeholder:
|
|
|
76
72
|
children: [
|
|
77
73
|
T,
|
|
78
74
|
/* @__PURE__ */ s("div", {
|
|
79
|
-
onClick:
|
|
75
|
+
onClick: P,
|
|
80
76
|
onKeyDown: (e) => {
|
|
81
|
-
(e.key === "Enter" || e.key === " ") && (e.preventDefault(),
|
|
77
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), P(e));
|
|
82
78
|
},
|
|
83
79
|
tabIndex: h ? -1 : 0,
|
|
84
80
|
role: "button",
|
|
85
81
|
"aria-haspopup": "dialog",
|
|
86
|
-
"aria-expanded":
|
|
82
|
+
"aria-expanded": j,
|
|
87
83
|
"aria-label": i || p || "Дата",
|
|
88
84
|
"data-edit": h ? void 0 : "true",
|
|
89
|
-
...
|
|
85
|
+
...F,
|
|
90
86
|
style: { cursor: h ? "not-allowed" : "pointer" },
|
|
91
|
-
children: v(
|
|
92
|
-
}
|
|
87
|
+
children: v(O, "dd.mm.yyyy")
|
|
88
|
+
}),
|
|
93
89
|
w
|
|
94
90
|
]
|
|
95
|
-
}),
|
|
96
|
-
position:
|
|
97
|
-
onValue:
|
|
98
|
-
date:
|
|
91
|
+
}), j && l(/* @__PURE__ */ s(m, {
|
|
92
|
+
position: A.current,
|
|
93
|
+
onValue: N,
|
|
94
|
+
date: O,
|
|
99
95
|
max: _,
|
|
100
96
|
min: y,
|
|
101
|
-
onOpen:
|
|
97
|
+
onOpen: M,
|
|
102
98
|
className: f
|
|
103
99
|
}, (/* @__PURE__ */ new Date()).getTime()), document.body)] });
|
|
104
100
|
}
|
package/dist/fields/Input.js
CHANGED
|
@@ -7,45 +7,53 @@ import o from "react";
|
|
|
7
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
8
8
|
//#region src/lib/fields/Input.tsx
|
|
9
9
|
function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", label: m = "", hidden: h = !1, disabled: g = !1, onBlur: _, className: v = "", after: y = "", before: b = "", error: x = "", inputmode: S = "text", maxLength: C, spellCheck: w = !0, native: T = !1, autoComplete: E, inputType: D = "text", id: O }) {
|
|
10
|
-
let { value: k, version: A } = n(u, f, l), j = !g, M = typeof k == "string" || typeof k == "number" ? String(k) : "", N = o.useRef(null);
|
|
11
|
-
o.
|
|
10
|
+
let { value: k, version: A } = n(u, f, l), j = !g, M = typeof k == "string" || typeof k == "number" ? String(k) : "", N = o.useRef(null), P = o.useRef(null), F = o.useRef(!1);
|
|
11
|
+
o.useLayoutEffect(() => {
|
|
12
|
+
if (T || F.current) return;
|
|
13
|
+
let e = P.current;
|
|
14
|
+
e && e.textContent !== M && (e.textContent = M);
|
|
15
|
+
}, [
|
|
16
|
+
T,
|
|
17
|
+
M,
|
|
18
|
+
A
|
|
19
|
+
]), o.useEffect(() => {
|
|
12
20
|
if (!T) return;
|
|
13
21
|
let e = N.current;
|
|
14
22
|
e && e.value !== M && (e.value = M);
|
|
15
23
|
}, [T, M]);
|
|
16
|
-
let
|
|
24
|
+
let I = (e) => {
|
|
17
25
|
let t = {
|
|
18
26
|
value: (e.target.textContent || "").trim(),
|
|
19
27
|
name: f
|
|
20
28
|
};
|
|
21
29
|
u && f && u.onValue(t), d && d !== u?.onValue && d(t);
|
|
22
|
-
},
|
|
30
|
+
}, L = (e) => {
|
|
23
31
|
let t = {
|
|
24
32
|
value: e.target.value,
|
|
25
33
|
name: f
|
|
26
34
|
};
|
|
27
35
|
u && f && u.onValue(t), d && d !== u?.onValue && d(t);
|
|
28
|
-
},
|
|
36
|
+
}, R = (e) => {
|
|
29
37
|
let t = e.target;
|
|
30
38
|
C && (t.textContent || "").trim().length >= C && e.key !== "Backspace" && e.preventDefault(), e.key === "Enter" && e.preventDefault();
|
|
31
|
-
},
|
|
39
|
+
}, z = (e) => {
|
|
32
40
|
e.key === "Enter" && e.preventDefault();
|
|
33
|
-
},
|
|
41
|
+
}, B = (e) => r.Paste(C || 0, i(e));
|
|
34
42
|
if (h && a(k)) return "";
|
|
35
|
-
let
|
|
43
|
+
let V = (e) => {
|
|
36
44
|
r.Blur(e), _?.({
|
|
37
45
|
value: (e.target.textContent || "").trim(),
|
|
38
46
|
name: f
|
|
39
47
|
});
|
|
40
|
-
},
|
|
48
|
+
}, H = (e) => {
|
|
41
49
|
_?.({
|
|
42
50
|
value: (e.target.value || "").trim(),
|
|
43
51
|
name: f
|
|
44
52
|
});
|
|
45
|
-
},
|
|
46
|
-
r.Focus({ target: e.currentTarget });
|
|
47
|
-
},
|
|
48
|
-
return p && (
|
|
53
|
+
}, U = (e) => {
|
|
54
|
+
F.current = !0, r.Focus({ target: e.currentTarget });
|
|
55
|
+
}, W = {};
|
|
56
|
+
return p && (W.placeholder = p), j && (W.edit = ""), T ? /* @__PURE__ */ c(t, {
|
|
49
57
|
type: "input",
|
|
50
58
|
label: m,
|
|
51
59
|
error: x,
|
|
@@ -79,9 +87,9 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
|
|
|
79
87
|
"aria-label": m || p || "Текст",
|
|
80
88
|
"aria-disabled": g || !j ? !0 : void 0,
|
|
81
89
|
tabIndex: g ? -1 : 0,
|
|
82
|
-
onChange:
|
|
83
|
-
onBlur:
|
|
84
|
-
onKeyDown:
|
|
90
|
+
onChange: L,
|
|
91
|
+
onBlur: H,
|
|
92
|
+
onKeyDown: z,
|
|
85
93
|
style: {
|
|
86
94
|
width: "100%",
|
|
87
95
|
border: "none",
|
|
@@ -106,19 +114,19 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
|
|
|
106
114
|
children: [
|
|
107
115
|
b,
|
|
108
116
|
/* @__PURE__ */ s("div", {
|
|
117
|
+
ref: P,
|
|
109
118
|
id: O,
|
|
110
|
-
onBlur:
|
|
111
|
-
onFocus:
|
|
112
|
-
onPaste:
|
|
113
|
-
onInput:
|
|
114
|
-
onKeyDown:
|
|
119
|
+
onBlur: V,
|
|
120
|
+
onFocus: U,
|
|
121
|
+
onPaste: B,
|
|
122
|
+
onInput: I,
|
|
123
|
+
onKeyDown: R,
|
|
115
124
|
spellCheck: w,
|
|
116
125
|
inputMode: S || "text",
|
|
117
126
|
contentEditable: j ? "plaintext-only" : !1,
|
|
118
127
|
suppressContentEditableWarning: !0,
|
|
119
|
-
...
|
|
120
|
-
|
|
121
|
-
}, A),
|
|
128
|
+
...W
|
|
129
|
+
}),
|
|
122
130
|
y
|
|
123
131
|
]
|
|
124
132
|
});
|
package/dist/fields/Mask.js
CHANGED
|
@@ -3,10 +3,10 @@ import t from "../core/Field.js";
|
|
|
3
3
|
import { useFormFieldState as n } from "../hooks/use.js";
|
|
4
4
|
import r, { asEditableClipboard as i } from "../events/onEvent.js";
|
|
5
5
|
import { isEmptyTextLike as a } from "./visibility.js";
|
|
6
|
-
import "react";
|
|
7
|
-
import { Fragment as
|
|
6
|
+
import o from "react";
|
|
7
|
+
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
8
8
|
//#region src/lib/fields/Mask.tsx
|
|
9
|
-
function
|
|
9
|
+
function u(e) {
|
|
10
10
|
let t = window.getSelection();
|
|
11
11
|
if (!t || t.rangeCount === 0) return 0;
|
|
12
12
|
let n = t.getRangeAt(0);
|
|
@@ -14,88 +14,100 @@ function l(e) {
|
|
|
14
14
|
let r = document.createRange();
|
|
15
15
|
return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
|
|
16
16
|
}
|
|
17
|
-
function
|
|
17
|
+
function d(e, t) {
|
|
18
18
|
if (t <= 0) return 0;
|
|
19
19
|
let n = 0;
|
|
20
20
|
for (let r = 0; r < e.length; r++) if (/\d/.test(e[r]) && (n++, n === t)) return r + 1;
|
|
21
21
|
return e.length;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
let
|
|
23
|
+
function f({ value: f = "", form: p, onValue: m, onBlur: h, name: g = "", format: _ = "+_(___) ___-__-__", placeholder: v = "", label: y = "", error: b = "", hidden: x = !1, disabled: S = !1, className: C = "", after: w = "", before: T = "", inputmode: E = "numeric", view: D }) {
|
|
24
|
+
let O = !S, { value: k, version: A } = n(p, g, f), j = o.useRef(null), M = o.useRef(!1), N = _, P = !0, F = 0, I = (e, t) => {
|
|
25
25
|
let n = t.firstChild;
|
|
26
26
|
if (!n || n.nodeType !== Node.TEXT_NODE) return;
|
|
27
27
|
let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
|
|
28
28
|
o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
|
|
29
|
-
},
|
|
30
|
-
|
|
29
|
+
}, L = (e) => r.PasteOne(i(e)), R = (e) => {
|
|
30
|
+
N = _, P = !0, F = 0;
|
|
31
31
|
let t = 0, n = "", r = e.replace(/\D/g, "");
|
|
32
|
-
r === "" && (
|
|
32
|
+
r === "" && (P = !0);
|
|
33
33
|
let i = r.split(""), a = "";
|
|
34
34
|
i.forEach((e) => {
|
|
35
|
-
|
|
35
|
+
P && (a += e, P && (F = ("" + a).length, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""), F > ("" + a).length && (P = !0, N = _.replace(/* @__PURE__ */ RegExp("[0-9]", "g"), "_"), n = ""));
|
|
36
36
|
});
|
|
37
|
-
let o =
|
|
37
|
+
let o = N.replace(/\D/g, "");
|
|
38
38
|
return o.length >= r.length && (r = o), {
|
|
39
|
-
q:
|
|
39
|
+
q: N.replace(/[_\d]/g, function() {
|
|
40
40
|
return r.charAt(t++) || "_";
|
|
41
41
|
}),
|
|
42
42
|
i: t,
|
|
43
43
|
v: r,
|
|
44
44
|
f: n
|
|
45
45
|
};
|
|
46
|
-
}
|
|
47
|
-
|
|
46
|
+
};
|
|
47
|
+
o.useLayoutEffect(() => {
|
|
48
|
+
if (M.current) return;
|
|
49
|
+
let e = j.current;
|
|
50
|
+
if (!e) return;
|
|
51
|
+
let t = R(String(k || ""));
|
|
52
|
+
e.textContent !== t.q && (e.textContent = t.q);
|
|
53
|
+
}, [
|
|
54
|
+
k,
|
|
55
|
+
A,
|
|
56
|
+
_
|
|
57
|
+
]), R(String(k || ""));
|
|
58
|
+
let z = (e) => {
|
|
59
|
+
let t = e.target, n = t.textContent || "", r = u(t), i = n.slice(0, r).replace(/\D/g, "").length, a = R(n);
|
|
48
60
|
t.textContent = a.q;
|
|
49
|
-
let o =
|
|
61
|
+
let o = d(a.q, i);
|
|
50
62
|
a.q.length > 0 && queueMicrotask(() => {
|
|
51
|
-
|
|
63
|
+
I(Math.min(o, a.q.length), t);
|
|
52
64
|
});
|
|
53
65
|
let s = {
|
|
54
66
|
value: a.q.replace(/\D/g, ""),
|
|
55
|
-
name:
|
|
67
|
+
name: g
|
|
56
68
|
};
|
|
57
|
-
|
|
58
|
-
},
|
|
69
|
+
p && g && p.onValue(s), m && m !== p?.onValue && m(s);
|
|
70
|
+
}, B = (e) => {
|
|
59
71
|
e.key === "Enter" && e.preventDefault();
|
|
60
|
-
},
|
|
61
|
-
r.Blur(e),
|
|
72
|
+
}, V = (e) => {
|
|
73
|
+
r.Blur(e), h && h({
|
|
62
74
|
value: (e.target.textContent ?? "").replace(/\D/g, ""),
|
|
63
|
-
name:
|
|
64
|
-
});
|
|
65
|
-
},
|
|
66
|
-
r.Focus({ target: e.currentTarget });
|
|
67
|
-
},
|
|
68
|
-
|
|
69
|
-
let
|
|
70
|
-
return
|
|
75
|
+
name: g
|
|
76
|
+
}), M.current = !1;
|
|
77
|
+
}, H = (e) => {
|
|
78
|
+
M.current = !0, r.Focus({ target: e.currentTarget });
|
|
79
|
+
}, U = {};
|
|
80
|
+
v && (U.placeholder = v), U.inputMode = E ?? "numeric";
|
|
81
|
+
let W = String(k ?? "").replace(/\D/g, "");
|
|
82
|
+
return x && a(W) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
|
|
71
83
|
type: "input",
|
|
72
|
-
label:
|
|
73
|
-
error:
|
|
74
|
-
element_blok: { className: [
|
|
84
|
+
label: y,
|
|
85
|
+
error: b,
|
|
86
|
+
element_blok: { className: [C] },
|
|
75
87
|
element_input: { className: [e.w] },
|
|
76
88
|
children: [
|
|
77
|
-
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
89
|
+
T,
|
|
90
|
+
/* @__PURE__ */ c("div", {
|
|
91
|
+
ref: j,
|
|
92
|
+
onPaste: L,
|
|
93
|
+
onInput: z,
|
|
94
|
+
onKeyDown: B,
|
|
95
|
+
onBlur: V,
|
|
96
|
+
onFocus: H,
|
|
84
97
|
role: "textbox",
|
|
85
98
|
spellCheck: !1,
|
|
86
|
-
"aria-label":
|
|
87
|
-
"aria-disabled": !
|
|
88
|
-
tabIndex:
|
|
89
|
-
"data-disabled": !
|
|
90
|
-
contentEditable:
|
|
99
|
+
"aria-label": y || v || g || "Маска",
|
|
100
|
+
"aria-disabled": !O,
|
|
101
|
+
tabIndex: S ? -1 : 0,
|
|
102
|
+
"data-disabled": !O,
|
|
103
|
+
contentEditable: O ? "plaintext-only" : !1,
|
|
91
104
|
suppressContentEditableWarning: !0,
|
|
92
|
-
...
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
C
|
|
105
|
+
...U
|
|
106
|
+
}),
|
|
107
|
+
w
|
|
96
108
|
]
|
|
97
109
|
});
|
|
98
110
|
}
|
|
99
|
-
|
|
111
|
+
f.displayName = "MaskField";
|
|
100
112
|
//#endregion
|
|
101
|
-
export {
|
|
113
|
+
export { f as default };
|
package/dist/fields/Money.js
CHANGED
|
@@ -3,10 +3,10 @@ import t from "../core/Field.js";
|
|
|
3
3
|
import { useFormFieldState as n } from "../hooks/use.js";
|
|
4
4
|
import r, { pastePlainTextIntoSelection as i } from "../events/onEvent.js";
|
|
5
5
|
import { isEmptyTextLike as a } from "./visibility.js";
|
|
6
|
-
import "react";
|
|
7
|
-
import { jsx as
|
|
6
|
+
import o from "react";
|
|
7
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
8
8
|
//#region src/lib/fields/Money.tsx
|
|
9
|
-
function
|
|
9
|
+
function l(e) {
|
|
10
10
|
let t = window.getSelection();
|
|
11
11
|
if (!t || t.rangeCount === 0) return 0;
|
|
12
12
|
let n = t.getRangeAt(0);
|
|
@@ -14,87 +14,100 @@ function c(e) {
|
|
|
14
14
|
let r = document.createRange();
|
|
15
15
|
return r.selectNodeContents(e), r.setEnd(n.startContainer, n.startOffset), r.toString().length;
|
|
16
16
|
}
|
|
17
|
-
function
|
|
17
|
+
function u(e, t, n) {
|
|
18
18
|
let r = Math.max(0, Math.min(t, e.length));
|
|
19
19
|
return n(e.slice(0, r)).length;
|
|
20
20
|
}
|
|
21
|
-
function
|
|
22
|
-
let { value:
|
|
21
|
+
function d({ value: d, form: p, onValue: m, name: h = "", placeholder: g = "", label: _ = "", error: v = "", hidden: y = !1, disabled: b = !1, onBlur: x, className: S = "", after: C = "", before: w = "", inputmode: T = "decimal", course: E = 100, view: D, type: O, isClear: k = !1 }) {
|
|
22
|
+
let { value: A, version: j } = n(p, h || "", d), M = p && h ? A : d, N = o.useRef(null), P = o.useRef(!1);
|
|
23
|
+
o.useLayoutEffect(() => {
|
|
24
|
+
if (P.current) return;
|
|
25
|
+
let e = N.current;
|
|
26
|
+
if (!e) return;
|
|
27
|
+
let t = !g || M ? f(M ?? "") : "";
|
|
28
|
+
e.textContent !== t && (e.textContent = t);
|
|
29
|
+
}, [
|
|
30
|
+
M,
|
|
31
|
+
j,
|
|
32
|
+
g
|
|
33
|
+
]);
|
|
34
|
+
let F = (e) => O === "multi" ? e.replace(/[^+\d.+-]/g, "") : e.replace(/[^+\d.]/g, ""), I = (e, t) => {
|
|
23
35
|
let n = t.firstChild;
|
|
24
36
|
if (!n || n.nodeType !== Node.TEXT_NODE) return;
|
|
25
37
|
let r = n.textContent?.length ?? 0, i = Math.max(0, Math.min(e, r)), a = document.createRange(), o = window.getSelection();
|
|
26
38
|
o && (a.setStart(n, i), a.collapse(!0), o.removeAllRanges(), o.addRange(a), t.focus());
|
|
27
|
-
},
|
|
28
|
-
let t = e.target, n = t.textContent || "", r =
|
|
29
|
-
value: Number(i || 0) *
|
|
30
|
-
name:
|
|
39
|
+
}, L = (e) => {
|
|
40
|
+
let t = e.target, n = t.textContent || "", r = l(t), i = F(n), a = u(n, r, F), o = {
|
|
41
|
+
value: Number(i || 0) * E,
|
|
42
|
+
name: h
|
|
31
43
|
};
|
|
32
|
-
|
|
33
|
-
|
|
44
|
+
p && h && p.onValue(o), m && m !== p?.onValue && m(o), t.textContent = i, i.length > 0 && queueMicrotask(() => {
|
|
45
|
+
I(Math.min(a, i.length), t);
|
|
34
46
|
});
|
|
35
|
-
},
|
|
47
|
+
}, R = (e) => {
|
|
36
48
|
let t = e.target;
|
|
37
49
|
r.Blur(e), (t.textContent || "") === "" && (t.textContent = "0");
|
|
38
50
|
let n = {
|
|
39
|
-
value: Number(
|
|
40
|
-
name:
|
|
51
|
+
value: Number(F(t.textContent || "")) * E,
|
|
52
|
+
name: h
|
|
41
53
|
};
|
|
42
|
-
|
|
43
|
-
},
|
|
54
|
+
x?.(n), p && h && p.setValue(n), m && m !== p?.onValue && m(n), t.textContent = f(t.textContent || ""), P.current = !1;
|
|
55
|
+
}, z = (e) => {
|
|
56
|
+
P.current = !0;
|
|
44
57
|
let t = e.target;
|
|
45
|
-
t.textContent =
|
|
46
|
-
},
|
|
58
|
+
t.textContent = F(t.textContent || ""), r.Focus({ target: e.currentTarget });
|
|
59
|
+
}, B = (e) => {
|
|
47
60
|
let t = e.currentTarget.previousElementSibling;
|
|
48
61
|
t && (t.textContent = "");
|
|
49
62
|
let n = {
|
|
50
63
|
value: 0,
|
|
51
|
-
name:
|
|
64
|
+
name: h
|
|
52
65
|
};
|
|
53
|
-
|
|
54
|
-
},
|
|
66
|
+
p && h && p.setValue(n), m && m !== p?.onValue && m(n);
|
|
67
|
+
}, V = (e) => {
|
|
55
68
|
e.key === "Enter" && e.preventDefault();
|
|
56
|
-
},
|
|
57
|
-
e.preventDefault(), i(
|
|
58
|
-
},
|
|
59
|
-
if (
|
|
60
|
-
let
|
|
61
|
-
return
|
|
69
|
+
}, H = (e) => {
|
|
70
|
+
e.preventDefault(), i(F(e.clipboardData?.getData("text/plain") ?? ""), e.currentTarget);
|
|
71
|
+
}, U = !b, W = M == null || (typeof M == "number" ? !1 : a(String(M ?? "")));
|
|
72
|
+
if (y && W) return "";
|
|
73
|
+
let G = {};
|
|
74
|
+
return G.inputMode = T ?? "decimal", g && (G.placeholder = g), U && (G.edit = ""), /* @__PURE__ */ c(t, {
|
|
62
75
|
type: "input",
|
|
63
|
-
label:
|
|
64
|
-
error:
|
|
65
|
-
element_blok: { className: [
|
|
76
|
+
label: _,
|
|
77
|
+
error: v,
|
|
78
|
+
element_blok: { className: [S] },
|
|
66
79
|
element_input: { className: [e.w] },
|
|
67
80
|
children: [
|
|
68
|
-
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
81
|
+
w,
|
|
82
|
+
/* @__PURE__ */ s("div", {
|
|
83
|
+
ref: N,
|
|
84
|
+
...G,
|
|
85
|
+
onInput: L,
|
|
86
|
+
onPaste: H,
|
|
87
|
+
onBlur: R,
|
|
88
|
+
onKeyDown: V,
|
|
89
|
+
onFocus: z,
|
|
76
90
|
role: "textbox",
|
|
77
91
|
spellCheck: !1,
|
|
78
|
-
"aria-label":
|
|
79
|
-
"aria-disabled": !
|
|
80
|
-
tabIndex:
|
|
81
|
-
contentEditable:
|
|
82
|
-
suppressContentEditableWarning: !0
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
O && /* @__PURE__ */ o("button", {
|
|
92
|
+
"aria-label": _ || g || "Сумма",
|
|
93
|
+
"aria-disabled": !U,
|
|
94
|
+
tabIndex: b ? -1 : 0,
|
|
95
|
+
contentEditable: U ? "plaintext-only" : !1,
|
|
96
|
+
suppressContentEditableWarning: !0
|
|
97
|
+
}),
|
|
98
|
+
k && /* @__PURE__ */ s("button", {
|
|
86
99
|
type: "button",
|
|
87
|
-
onClick:
|
|
100
|
+
onClick: B,
|
|
88
101
|
"aria-label": "Очистить поле",
|
|
89
102
|
children: "x"
|
|
90
103
|
}),
|
|
91
|
-
|
|
104
|
+
C
|
|
92
105
|
]
|
|
93
106
|
});
|
|
94
107
|
}
|
|
95
|
-
|
|
96
|
-
function
|
|
108
|
+
d.displayName = "MoneyField";
|
|
109
|
+
function f(e, t) {
|
|
97
110
|
return t && (e = Number(e) / t), parseFloat(String(e || 0)).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ");
|
|
98
111
|
}
|
|
99
112
|
//#endregion
|
|
100
|
-
export {
|
|
113
|
+
export { d as default };
|
package/dist/fields/Numeric.js
CHANGED
|
@@ -3,15 +3,21 @@ import t from "../core/Field.js";
|
|
|
3
3
|
import { useFormFieldState as n } from "../hooks/use.js";
|
|
4
4
|
import r, { asEditableClipboard as i } from "../events/onEvent.js";
|
|
5
5
|
import { isEmptyTextLike as a } from "./visibility.js";
|
|
6
|
-
import "react";
|
|
7
|
-
import { Fragment as
|
|
6
|
+
import o from "react";
|
|
7
|
+
import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
8
8
|
//#region src/lib/fields/Numeric.tsx
|
|
9
|
-
function
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
let
|
|
9
|
+
function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", label: h = "", hidden: g = !1, disabled: _ = !1, onBlur: v, className: y = "", after: b = "", before: x = "", error: S = "", inputmode: C = "numeric", maxLength: w, max: T, view: E }) {
|
|
10
|
+
let D = !_, { value: O, version: k } = n(d, p, u);
|
|
11
|
+
m = m === void 0 ? "" : m, T = T === void 0 ? 99 : T;
|
|
12
|
+
let A = O != null && O !== "" ? String(O) : "", j = o.useRef(null), M = o.useRef(!1);
|
|
13
|
+
o.useLayoutEffect(() => {
|
|
14
|
+
if (M.current) return;
|
|
15
|
+
let e = j.current;
|
|
16
|
+
e && e.textContent !== A && (e.textContent = A);
|
|
17
|
+
}, [A, k]);
|
|
18
|
+
let N = w ?? T, P = !1, F = (e) => {
|
|
13
19
|
let t = e.currentTarget, n = (t.textContent || "").replace(/\D/g, "");
|
|
14
|
-
n.length >
|
|
20
|
+
n.length > N && (n = n.slice(0, N), t.textContent = n, queueMicrotask(() => {
|
|
15
21
|
let e = t.firstChild;
|
|
16
22
|
if (e && e.nodeType === Node.TEXT_NODE) {
|
|
17
23
|
let t = n.length, r = window.getSelection(), i = document.createRange();
|
|
@@ -20,54 +26,55 @@ function l({ value: l, form: u, onValue: d, name: f = "", placeholder: p = "", l
|
|
|
20
26
|
}));
|
|
21
27
|
let r = {
|
|
22
28
|
value: n,
|
|
23
|
-
name:
|
|
29
|
+
name: p
|
|
24
30
|
};
|
|
25
|
-
|
|
26
|
-
},
|
|
31
|
+
d && p && d.onValue(r), f && f !== d?.onValue && f(r);
|
|
32
|
+
}, I = (e) => {
|
|
33
|
+
M.current = !0;
|
|
27
34
|
let t = e.currentTarget;
|
|
28
35
|
t.textContent = (t.textContent || "").replace(/\D/g, ""), r.Focus({ target: e.currentTarget });
|
|
29
|
-
},
|
|
30
|
-
if (
|
|
31
|
-
if (e.which === 17 || e.which === 91) return
|
|
36
|
+
}, L = (e) => {
|
|
37
|
+
if (P && e.which === 86) return;
|
|
38
|
+
if (e.which === 17 || e.which === 91) return P = !0;
|
|
32
39
|
if (e.key === "Backspace") return;
|
|
33
40
|
let t = (e.currentTarget.textContent ?? "").replace(/\D/g, "").length;
|
|
34
|
-
|
|
35
|
-
},
|
|
36
|
-
if (e.which === 17 || e.which === 91) return
|
|
37
|
-
},
|
|
38
|
-
r.Blur(e),
|
|
41
|
+
N > 0 && t >= N && e.key.length === 1 && /\d/.test(e.key) && e.preventDefault(), e.key === "Enter" && e.preventDefault(), e.key.length === 1 && !/\d/.test(e.key) && e.preventDefault();
|
|
42
|
+
}, R = (e) => {
|
|
43
|
+
if (e.which === 17 || e.which === 91) return P = !1;
|
|
44
|
+
}, z = (e) => r.PasteDigits(N, i(e)), B = (e) => {
|
|
45
|
+
r.Blur(e), v?.({
|
|
39
46
|
value: e.currentTarget.textContent,
|
|
40
|
-
name:
|
|
41
|
-
});
|
|
42
|
-
},
|
|
43
|
-
return
|
|
47
|
+
name: p
|
|
48
|
+
}), M.current = !1;
|
|
49
|
+
}, V = {};
|
|
50
|
+
return D && (V.edit = ""), V.inputMode = C ?? "numeric", m && (V.placeholder = m), g && a(O) ? /* @__PURE__ */ c(s, {}) : /* @__PURE__ */ l(t, {
|
|
44
51
|
type: "numeric",
|
|
45
|
-
label:
|
|
46
|
-
error:
|
|
47
|
-
element_blok: { className: [
|
|
52
|
+
label: h,
|
|
53
|
+
error: S,
|
|
54
|
+
element_blok: { className: [y || ""] },
|
|
48
55
|
element_input: { className: [e.w] },
|
|
49
56
|
children: [
|
|
50
|
-
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
x,
|
|
58
|
+
/* @__PURE__ */ c("div", {
|
|
59
|
+
ref: j,
|
|
60
|
+
onPaste: z,
|
|
61
|
+
onInput: F,
|
|
62
|
+
onFocus: I,
|
|
63
|
+
onBlur: B,
|
|
64
|
+
onKeyDown: L,
|
|
65
|
+
onKeyUp: R,
|
|
58
66
|
spellCheck: !1,
|
|
59
67
|
role: "textbox",
|
|
60
|
-
tabIndex:
|
|
61
|
-
"aria-label":
|
|
62
|
-
contentEditable:
|
|
68
|
+
tabIndex: D ? 0 : -1,
|
|
69
|
+
"aria-label": h || m || "Число",
|
|
70
|
+
contentEditable: D ? "plaintext-only" : !1,
|
|
63
71
|
suppressContentEditableWarning: !0,
|
|
64
|
-
...
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
y
|
|
72
|
+
...V
|
|
73
|
+
}),
|
|
74
|
+
b
|
|
68
75
|
]
|
|
69
76
|
});
|
|
70
77
|
}
|
|
71
|
-
|
|
78
|
+
u.displayName = "NumberField";
|
|
72
79
|
//#endregion
|
|
73
|
-
export {
|
|
80
|
+
export { u as default };
|