playbook_ui 14.11.0.pre.rc.3 → 14.11.0.pre.rc.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +8 -1
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +23 -0
- data/dist/chunks/{_typeahead-mTf7E4Jf.js → _typeahead-BXXEtXbz.js} +1 -1
- data/dist/chunks/{_weekday_stacked-DTEGnoFz.js → _weekday_stacked-D0yBvHBb.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c72027773256a0cd54ed98000e899215fa9a3d74ed7e8ed1e4c2ddb5f90c5db8
|
4
|
+
data.tar.gz: 361f49d027b7894d400c60d323652233f82255ad645abc65f4e4d1436566c612
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3d982e205511cae9f94b3f1f081b5cd827fb57b27d171d1792493b6380079fed58a5a9b4456b0fa9e5ba76d31f0ee938eabccbd4cbaff6402c0b77717ae9e42f
|
7
|
+
data.tar.gz: 8fb7285f5ab97ef327341fdd7d78ebf0a87c05879baa8ce2883834ffad2a517a6293d7f70f96dad3388129bac21ab3124a5d00f13768099bd003532e5fb28dee
|
@@ -123,6 +123,13 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
123
123
|
|
124
124
|
const childInput = children ? children.type === "input" : undefined
|
125
125
|
|
126
|
+
let formattedValue;
|
127
|
+
if (isMaskedInput && value) {
|
128
|
+
formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
|
129
|
+
} else {
|
130
|
+
formattedValue = value
|
131
|
+
}
|
132
|
+
|
126
133
|
const textInput = (
|
127
134
|
childInput ? React.cloneElement(children, { className: "text_input" }) :
|
128
135
|
(<input
|
@@ -138,7 +145,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
138
145
|
ref={ref}
|
139
146
|
required={required}
|
140
147
|
type={type}
|
141
|
-
value={
|
148
|
+
value={formattedValue}
|
142
149
|
/>)
|
143
150
|
)
|
144
151
|
|
@@ -1,5 +1,6 @@
|
|
1
1
|
type InputMask = {
|
2
2
|
format: (value: string) => string
|
3
|
+
formatDefaultValue: (value: string) => string
|
3
4
|
pattern: string
|
4
5
|
placeholder: string
|
5
6
|
}
|
@@ -8,6 +9,24 @@ type InputMaskDictionary = {
|
|
8
9
|
[key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
|
9
10
|
}
|
10
11
|
|
12
|
+
const formatCurrencyDefaultValue = (value: string): string => {
|
13
|
+
// Remove non-numeric characters except for the decimal point
|
14
|
+
const numericValue = value.replace(/[^0-9.]/g, '')
|
15
|
+
|
16
|
+
if (!numericValue) return ''
|
17
|
+
|
18
|
+
// Parse the numeric value as a float to handle decimals
|
19
|
+
const dollars = parseFloat(numericValue)
|
20
|
+
if (isNaN(dollars) || dollars === 0) return ''
|
21
|
+
|
22
|
+
// Format as currency
|
23
|
+
return new Intl.NumberFormat('en-US', {
|
24
|
+
style: 'currency',
|
25
|
+
currency: 'USD',
|
26
|
+
maximumFractionDigits: 2,
|
27
|
+
}).format(dollars)
|
28
|
+
}
|
29
|
+
|
11
30
|
const formatCurrency = (value: string): string => {
|
12
31
|
const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
|
13
32
|
|
@@ -42,22 +61,26 @@ const formatSSN = (value: string): string => {
|
|
42
61
|
export const INPUTMASKS: InputMaskDictionary = {
|
43
62
|
currency: {
|
44
63
|
format: formatCurrency,
|
64
|
+
formatDefaultValue: formatCurrencyDefaultValue,
|
45
65
|
// eslint-disable-next-line no-useless-escape
|
46
66
|
pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
|
47
67
|
placeholder: '$0.00',
|
48
68
|
},
|
49
69
|
zipCode: {
|
50
70
|
format: formatBasicPostal,
|
71
|
+
formatDefaultValue: formatBasicPostal,
|
51
72
|
pattern: '\\d{5}',
|
52
73
|
placeholder: '12345',
|
53
74
|
},
|
54
75
|
postalCode: {
|
55
76
|
format: formatExtendedPostal,
|
77
|
+
formatDefaultValue: formatExtendedPostal,
|
56
78
|
pattern: '\\d{5}-\\d{4}',
|
57
79
|
placeholder: '12345-6789',
|
58
80
|
},
|
59
81
|
ssn: {
|
60
82
|
format: formatSSN,
|
83
|
+
formatDefaultValue: formatSSN,
|
61
84
|
pattern: '\\d{3}-\\d{2}-\\d{4}',
|
62
85
|
placeholder: '123-45-6789',
|
63
86
|
},
|