playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4927 → 14.9.0.pre.alpha.PLAY16264952
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +33 -26
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.jsx +138 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +7 -6
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/_select.tsx +20 -14
- data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +109 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -35
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +2 -139
- data/app/pb_kits/playbook/utilities/hookFormProps.ts +22 -0
- data/app/pb_kits/playbook/utilities/withReactHookForm.tsx +64 -0
- data/dist/chunks/_typeahead-BqHgiHoJ.js +22 -0
- data/dist/chunks/{_weekday_stacked-B28kYXl9.js → _weekday_stacked-BAk0aNPW.js} +3 -3
- 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 +8 -6
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +0 -88
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +0 -64
- data/dist/chunks/_typeahead-l1kq1p9m.js +0 -22
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '0184005721ad49d1f678e3ad01fa6adfb793a0586e1a65e29ab855e6f63cbabf'
|
|
4
|
+
data.tar.gz: 1855261d8f324f9453237a5fc652eeb4a40c634161303b36a8a790fda91c66fa
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8ac8cbafd180697b59623d27113ef372ce4ff845d49abbb37186ec8fc590836dd02df38972ffde5bf903283c5ce1c8bcde8dff5ea63de9e39a434b082ef0e317
|
|
7
|
+
data.tar.gz: 427b0c57a4f291bae08d15085ad71bd8d015b7358057bb5cc84ee3c24ee6aab31d4b2e8b4ef58725b8840a95549ae769145d830d27ff95a288cdcd24ee83bbdd
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react'
|
|
2
|
+
import { FieldValues } from 'react-hook-form'
|
|
2
3
|
import Body from '../pb_body/_body'
|
|
3
4
|
import Icon from '../pb_icon/_icon'
|
|
4
5
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
5
6
|
import classnames from 'classnames'
|
|
6
7
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
8
|
+
import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm'
|
|
7
9
|
|
|
8
10
|
type CheckboxProps = {
|
|
9
11
|
aria?: {[key: string]: string},
|
|
@@ -13,7 +15,7 @@ type CheckboxProps = {
|
|
|
13
15
|
dark?: boolean,
|
|
14
16
|
data?: {[key: string]: string},
|
|
15
17
|
disabled?: boolean,
|
|
16
|
-
error?: boolean,
|
|
18
|
+
error?: boolean | string,
|
|
17
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
18
20
|
id?: string,
|
|
19
21
|
indeterminate?: boolean,
|
|
@@ -24,27 +26,26 @@ type CheckboxProps = {
|
|
|
24
26
|
value?: string,
|
|
25
27
|
} & GlobalProps
|
|
26
28
|
|
|
27
|
-
const Checkbox =
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const checkRef = useRef(null)
|
|
29
|
+
const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({
|
|
30
|
+
aria = {},
|
|
31
|
+
checked = false,
|
|
32
|
+
children,
|
|
33
|
+
className,
|
|
34
|
+
dark = false,
|
|
35
|
+
data = {},
|
|
36
|
+
disabled = false,
|
|
37
|
+
error = false,
|
|
38
|
+
htmlOptions = {},
|
|
39
|
+
id,
|
|
40
|
+
indeterminate = false,
|
|
41
|
+
name = '',
|
|
42
|
+
onChange = () => { void 0 },
|
|
43
|
+
tabIndex,
|
|
44
|
+
text = '',
|
|
45
|
+
value = '',
|
|
46
|
+
...props
|
|
47
|
+
}, ref) => {
|
|
48
|
+
const checkRef = useRef<HTMLInputElement>(null)
|
|
48
49
|
const ariaProps = buildAriaProps(aria)
|
|
49
50
|
const dataProps = buildDataProps(data)
|
|
50
51
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
@@ -68,11 +69,12 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
|
68
69
|
else
|
|
69
70
|
return (
|
|
70
71
|
<input
|
|
72
|
+
{...props}
|
|
71
73
|
defaultChecked={checked}
|
|
72
74
|
disabled={disabled}
|
|
73
75
|
name={name}
|
|
74
76
|
onChange={onChange}
|
|
75
|
-
ref={checkRef}
|
|
77
|
+
ref={ref || checkRef}
|
|
76
78
|
tabIndex={tabIndex}
|
|
77
79
|
type="checkbox"
|
|
78
80
|
value={value}
|
|
@@ -112,13 +114,18 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
|
112
114
|
<Body
|
|
113
115
|
className="pb_checkbox_label"
|
|
114
116
|
dark={dark}
|
|
115
|
-
status={error ? 'negative' : null}
|
|
117
|
+
status={typeof error === 'string' ? 'negative' : null}
|
|
116
118
|
variant={null}
|
|
117
119
|
>
|
|
118
120
|
{text}
|
|
119
121
|
</Body>
|
|
120
122
|
</label>
|
|
121
123
|
)
|
|
122
|
-
}
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
Checkbox.displayName = 'Checkbox'
|
|
127
|
+
|
|
128
|
+
export type CheckboxWithHookFormProps<T extends FieldValues = FieldValues> = CheckboxProps & WithReactHookFormProps<T>
|
|
123
129
|
|
|
124
|
-
|
|
130
|
+
const CheckboxWithHookForm = withReactHookForm(Checkbox)
|
|
131
|
+
export default CheckboxWithHookForm
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { useForm } from "react-hook-form"
|
|
3
|
+
import { Checkbox, Card, Body, Button } from "playbook-ui"
|
|
4
|
+
|
|
5
|
+
const CheckboxForm = () => {
|
|
6
|
+
const {
|
|
7
|
+
register,
|
|
8
|
+
handleSubmit,
|
|
9
|
+
formState: { errors },
|
|
10
|
+
watch,
|
|
11
|
+
} = useForm({
|
|
12
|
+
defaultValues: {
|
|
13
|
+
termsAccepted: false,
|
|
14
|
+
newsletter: false,
|
|
15
|
+
interests: [],
|
|
16
|
+
preferences: {
|
|
17
|
+
emailUpdates: false,
|
|
18
|
+
smsUpdates: false,
|
|
19
|
+
pushNotifications: false,
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const onSubmit = (data) => {
|
|
25
|
+
console.log("Form submitted:", data)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const formValues = watch()
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Card padding='md'>
|
|
33
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
34
|
+
<div>
|
|
35
|
+
<Body marginBottom='xs'
|
|
36
|
+
text='Terms and Conditions'
|
|
37
|
+
/>
|
|
38
|
+
<Checkbox
|
|
39
|
+
error={errors.termsAccepted?.message}
|
|
40
|
+
name='termsAccepted'
|
|
41
|
+
register={register}
|
|
42
|
+
rules={{
|
|
43
|
+
required: "You must accept the terms and conditions",
|
|
44
|
+
}}
|
|
45
|
+
text='I accept the terms and conditions'
|
|
46
|
+
/>
|
|
47
|
+
</div>
|
|
48
|
+
<div className='mt-4'>
|
|
49
|
+
<Body marginBottom='xs'
|
|
50
|
+
text='Newsletter Subscription'
|
|
51
|
+
/>
|
|
52
|
+
<Checkbox
|
|
53
|
+
name='newsletter'
|
|
54
|
+
register={register}
|
|
55
|
+
text='Subscribe to our newsletter'
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
58
|
+
<div className='mt-4'>
|
|
59
|
+
<Body marginBottom='xs'
|
|
60
|
+
text='Your Interests'
|
|
61
|
+
/>
|
|
62
|
+
<Checkbox
|
|
63
|
+
error={errors.interests?.message}
|
|
64
|
+
name='interests'
|
|
65
|
+
register={register}
|
|
66
|
+
rules={{
|
|
67
|
+
validate: (value) => {
|
|
68
|
+
const selectedInterests = Object.values(value).filter(Boolean)
|
|
69
|
+
return (
|
|
70
|
+
selectedInterests.length >= 1 ||
|
|
71
|
+
"Please select at least one interest"
|
|
72
|
+
)
|
|
73
|
+
},
|
|
74
|
+
}}
|
|
75
|
+
text='Technology'
|
|
76
|
+
value='technology'
|
|
77
|
+
/>
|
|
78
|
+
<Checkbox
|
|
79
|
+
name='interests'
|
|
80
|
+
register={register}
|
|
81
|
+
text='Design'
|
|
82
|
+
value='design'
|
|
83
|
+
/>
|
|
84
|
+
<Checkbox
|
|
85
|
+
name='interests'
|
|
86
|
+
register={register}
|
|
87
|
+
text='Business'
|
|
88
|
+
value='business'
|
|
89
|
+
/>
|
|
90
|
+
<Checkbox
|
|
91
|
+
name='interests'
|
|
92
|
+
register={register}
|
|
93
|
+
text='Marketing'
|
|
94
|
+
value='marketing'
|
|
95
|
+
/>
|
|
96
|
+
</div>
|
|
97
|
+
<div className='mt-4'>
|
|
98
|
+
<Body marginBottom='xs'
|
|
99
|
+
text='Communication Preferences'
|
|
100
|
+
/>
|
|
101
|
+
<Checkbox
|
|
102
|
+
name='preferences.emailUpdates'
|
|
103
|
+
register={register}
|
|
104
|
+
text='Email Updates'
|
|
105
|
+
/>
|
|
106
|
+
<Checkbox
|
|
107
|
+
name='preferences.smsUpdates'
|
|
108
|
+
register={register}
|
|
109
|
+
text='SMS Updates'
|
|
110
|
+
/>
|
|
111
|
+
<Checkbox
|
|
112
|
+
name='preferences.pushNotifications'
|
|
113
|
+
register={register}
|
|
114
|
+
text='Push Notifications'
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
<Button
|
|
118
|
+
htmlType="submit"
|
|
119
|
+
marginTop='lg'
|
|
120
|
+
text='Submit'
|
|
121
|
+
type='submit'
|
|
122
|
+
variant='primary'
|
|
123
|
+
/>
|
|
124
|
+
</form>
|
|
125
|
+
<Card marginTop='lg'>
|
|
126
|
+
<Body text='Current Form Values:'
|
|
127
|
+
variant='bold'
|
|
128
|
+
/>
|
|
129
|
+
<pre style={{ marginTop: "8px", color: "white" }}>
|
|
130
|
+
{JSON.stringify(formValues, null, 2)}
|
|
131
|
+
</pre>
|
|
132
|
+
</Card>
|
|
133
|
+
</Card>
|
|
134
|
+
</div>
|
|
135
|
+
)
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
export default CheckboxForm
|
|
@@ -9,12 +9,13 @@ examples:
|
|
|
9
9
|
- checkbox_disabled: Disabled Checkbox
|
|
10
10
|
|
|
11
11
|
react:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
- checkbox_default: Default
|
|
13
|
+
- checkbox_checked: Load as checked
|
|
14
|
+
- checkbox_custom: Custom Checkbox
|
|
15
|
+
- checkbox_error: Default w/ Error
|
|
16
|
+
- checkbox_indeterminate: Indeterminate Checkbox
|
|
17
|
+
- checkbox_disabled: Disabled Checkbox
|
|
18
|
+
- checkbox_form: Checkbox Form
|
|
18
19
|
|
|
19
20
|
swift:
|
|
20
21
|
- checkbox_default_swift: Default
|
|
@@ -4,3 +4,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
|
|
|
4
4
|
export { default as CheckboxChecked } from './_checkbox_checked.jsx'
|
|
5
5
|
export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
|
|
6
6
|
export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
|
|
7
|
+
export { default as CheckboxForm } from './_checkbox_form.jsx'
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
|
+
import { FieldValues } from 'react-hook-form'
|
|
3
4
|
|
|
4
5
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
5
6
|
import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
|
|
6
7
|
import type { InputCallback } from '../types'
|
|
7
8
|
import { getAllIcons } from "../utilities/icons/allicons"
|
|
9
|
+
import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm'
|
|
8
10
|
|
|
9
11
|
import Body from '../pb_body/_body'
|
|
10
12
|
import Caption from '../pb_caption/_caption'
|
|
@@ -30,11 +32,12 @@ type SelectProps = {
|
|
|
30
32
|
includeBlank?: string,
|
|
31
33
|
inline?: boolean,
|
|
32
34
|
label?: string,
|
|
33
|
-
margin
|
|
34
|
-
marginBottom
|
|
35
|
+
margin?: string,
|
|
36
|
+
marginBottom?: string,
|
|
37
|
+
marginTop?: string,
|
|
35
38
|
multiple?: boolean,
|
|
36
39
|
name?: string,
|
|
37
|
-
onChange
|
|
40
|
+
onChange?: InputCallback<HTMLSelectElement>,
|
|
38
41
|
options: SelectOption[],
|
|
39
42
|
required?: boolean,
|
|
40
43
|
showArrow?: boolean,
|
|
@@ -51,7 +54,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
|
|
|
51
54
|
</option>
|
|
52
55
|
))
|
|
53
56
|
|
|
54
|
-
const Select = ({
|
|
57
|
+
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
|
|
55
58
|
aria = {},
|
|
56
59
|
blankSelection,
|
|
57
60
|
children,
|
|
@@ -65,13 +68,13 @@ const Select = ({
|
|
|
65
68
|
inline = false,
|
|
66
69
|
multiple = false,
|
|
67
70
|
name,
|
|
68
|
-
onChange
|
|
71
|
+
onChange,
|
|
69
72
|
options = [],
|
|
70
73
|
required = false,
|
|
71
74
|
showArrow = false,
|
|
72
75
|
value,
|
|
73
76
|
...props
|
|
74
|
-
}
|
|
77
|
+
}, ref) => {
|
|
75
78
|
const ariaProps = buildAriaProps(aria)
|
|
76
79
|
const dataProps = buildDataProps(data)
|
|
77
80
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
@@ -91,14 +94,14 @@ const Select = ({
|
|
|
91
94
|
compactClass
|
|
92
95
|
);
|
|
93
96
|
|
|
94
|
-
const
|
|
97
|
+
const icons = getAllIcons()
|
|
98
|
+
const angleDown = icons?.angleDown?.icon
|
|
95
99
|
|
|
96
100
|
const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
|
|
97
101
|
const selectBody =(() =>{
|
|
98
102
|
if (children) return children
|
|
99
103
|
return (
|
|
100
104
|
<select
|
|
101
|
-
{...htmlOptions}
|
|
102
105
|
{...domSafeProps(props)}
|
|
103
106
|
disabled={disabled}
|
|
104
107
|
id={name}
|
|
@@ -135,14 +138,12 @@ const Select = ({
|
|
|
135
138
|
htmlFor={name}
|
|
136
139
|
>
|
|
137
140
|
{selectBody}
|
|
138
|
-
{ multiple !== true
|
|
141
|
+
{ multiple !== true && angleDown &&
|
|
139
142
|
<Icon
|
|
140
143
|
className="pb_select_kit_caret svg-inline--fa"
|
|
141
144
|
customIcon={angleDown}
|
|
142
145
|
fixedWidth
|
|
143
146
|
/>
|
|
144
|
-
:
|
|
145
|
-
null
|
|
146
147
|
}
|
|
147
148
|
{error &&
|
|
148
149
|
<Body
|
|
@@ -153,6 +154,11 @@ const Select = ({
|
|
|
153
154
|
</label>
|
|
154
155
|
</div>
|
|
155
156
|
)
|
|
156
|
-
}
|
|
157
|
+
})
|
|
158
|
+
|
|
159
|
+
Select.displayName = 'Select'
|
|
160
|
+
|
|
161
|
+
export type SelectWithHookFormProps<T extends FieldValues = FieldValues> = SelectProps & WithReactHookFormProps<T>
|
|
157
162
|
|
|
158
|
-
|
|
163
|
+
const SelectWithHookForm = withReactHookForm(Select)
|
|
164
|
+
export default SelectWithHookForm
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { useForm } from 'react-hook-form'
|
|
3
|
+
import { Select, Card, Body, Button } from 'playbook-ui'
|
|
4
|
+
|
|
5
|
+
const SelectForm = (props) => {
|
|
6
|
+
const {
|
|
7
|
+
register,
|
|
8
|
+
handleSubmit,
|
|
9
|
+
formState: { errors },
|
|
10
|
+
watch,
|
|
11
|
+
} = useForm({
|
|
12
|
+
defaultValues: {
|
|
13
|
+
favoriteFood: '',
|
|
14
|
+
mealType: '',
|
|
15
|
+
dietaryRestrictions: '',
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
const onSubmit = (data) => {
|
|
20
|
+
console.log('Form submitted:', data)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Watch form values for real-time display
|
|
24
|
+
const formValues = watch()
|
|
25
|
+
|
|
26
|
+
const foodOptions = [
|
|
27
|
+
{ value: 'pizza', text: 'Pizza' },
|
|
28
|
+
{ value: 'burger', text: 'Burger' },
|
|
29
|
+
{ value: 'sushi', text: 'Sushi' },
|
|
30
|
+
{ value: 'salad', text: 'Salad' },
|
|
31
|
+
]
|
|
32
|
+
|
|
33
|
+
const mealTypes = [
|
|
34
|
+
{ value: 'breakfast', text: 'Breakfast' },
|
|
35
|
+
{ value: 'lunch', text: 'Lunch' },
|
|
36
|
+
{ value: 'dinner', text: 'Dinner' },
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const dietaryOptions = [
|
|
40
|
+
{ value: 'none', text: 'No Restrictions' },
|
|
41
|
+
{ value: 'vegetarian', text: 'Vegetarian' },
|
|
42
|
+
{ value: 'vegan', text: 'Vegan' },
|
|
43
|
+
{ value: 'glutenFree', text: 'Gluten Free' },
|
|
44
|
+
]
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<Card>
|
|
49
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
50
|
+
<Select
|
|
51
|
+
error={errors.favoriteFood?.message}
|
|
52
|
+
label="What's your favorite food?"
|
|
53
|
+
name="favoriteFood"
|
|
54
|
+
options={foodOptions}
|
|
55
|
+
register={register}
|
|
56
|
+
rules={{
|
|
57
|
+
required: 'Please select your favorite food',
|
|
58
|
+
}}
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
<Select
|
|
62
|
+
blankSelection="Choose a meal type..."
|
|
63
|
+
error={errors.mealType?.message}
|
|
64
|
+
label="Preferred meal time"
|
|
65
|
+
marginTop="md"
|
|
66
|
+
name="mealType"
|
|
67
|
+
options={mealTypes}
|
|
68
|
+
register={register}
|
|
69
|
+
rules={{
|
|
70
|
+
required: 'Please select a meal type',
|
|
71
|
+
}}
|
|
72
|
+
{...props}
|
|
73
|
+
/>
|
|
74
|
+
<Select
|
|
75
|
+
label="Dietary Restrictions"
|
|
76
|
+
marginTop="md"
|
|
77
|
+
name="dietaryRestrictions"
|
|
78
|
+
options={dietaryOptions}
|
|
79
|
+
register={register}
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
<Button
|
|
84
|
+
htmlType="submit"
|
|
85
|
+
marginTop="lg"
|
|
86
|
+
text="Submit"
|
|
87
|
+
type="submit"
|
|
88
|
+
variant="primary"
|
|
89
|
+
|
|
90
|
+
/>
|
|
91
|
+
</form>
|
|
92
|
+
<Card marginTop="lg">
|
|
93
|
+
<Body
|
|
94
|
+
text="Current Form Values:"
|
|
95
|
+
variant="bold"
|
|
96
|
+
/>
|
|
97
|
+
<pre style={{ marginTop: '8px', color: "white" }}>
|
|
98
|
+
{JSON.stringify(formValues, null, 2)}
|
|
99
|
+
</pre>
|
|
100
|
+
</Card>
|
|
101
|
+
</Card>
|
|
102
|
+
</div>
|
|
103
|
+
)
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
export default SelectForm
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
|
|
|
10
10
|
export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
|
|
11
11
|
export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
|
|
12
12
|
export { default as SelectMultiple } from './_select_multiple.jsx'
|
|
13
|
+
export { default as SelectForm } from './_select_form.jsx'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef
|
|
1
|
+
import React, { forwardRef } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
|
|
4
4
|
import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
|
|
@@ -10,8 +10,6 @@ import Caption from '../pb_caption/_caption'
|
|
|
10
10
|
import Body from '../pb_body/_body'
|
|
11
11
|
import Icon from '../pb_icon/_icon'
|
|
12
12
|
|
|
13
|
-
import { INPUTMASKS } from './inputMask'
|
|
14
|
-
|
|
15
13
|
type TextInputProps = {
|
|
16
14
|
aria?: { [key: string]: string },
|
|
17
15
|
className?: string,
|
|
@@ -24,7 +22,6 @@ type TextInputProps = {
|
|
|
24
22
|
inline?: boolean,
|
|
25
23
|
name: string,
|
|
26
24
|
label: string,
|
|
27
|
-
mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
|
|
28
25
|
onChange: (e: React.FormEvent<HTMLInputElement>) => void,
|
|
29
26
|
placeholder: string,
|
|
30
27
|
required?: boolean,
|
|
@@ -50,7 +47,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
|
50
47
|
htmlOptions = {},
|
|
51
48
|
id,
|
|
52
49
|
inline = false,
|
|
53
|
-
mask = null,
|
|
54
50
|
name,
|
|
55
51
|
label,
|
|
56
52
|
onChange = () => { void 0 },
|
|
@@ -94,33 +90,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
|
94
90
|
/>
|
|
95
91
|
)
|
|
96
92
|
|
|
97
|
-
const isMaskedInput = mask && mask in INPUTMASKS
|
|
98
|
-
|
|
99
|
-
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
100
|
-
if (isMaskedInput) {
|
|
101
|
-
const inputValue = e.target.value
|
|
102
|
-
|
|
103
|
-
let cursorPosition = e.target.selectionStart;
|
|
104
|
-
const isAtEnd = cursorPosition === inputValue.length;
|
|
105
|
-
|
|
106
|
-
const formattedValue = INPUTMASKS[mask].format(inputValue)
|
|
107
|
-
e.target.value = formattedValue
|
|
108
|
-
|
|
109
|
-
// Keep cursor position
|
|
110
|
-
if (!isAtEnd) {
|
|
111
|
-
// Account for extra characters (e.g., commas added/removed in currency)
|
|
112
|
-
if (formattedValue.length - inputValue.length === 1) {
|
|
113
|
-
cursorPosition = cursorPosition + 1
|
|
114
|
-
} else if (mask === "currency" && formattedValue.length - inputValue.length === -1) {
|
|
115
|
-
cursorPosition = cursorPosition - 1
|
|
116
|
-
}
|
|
117
|
-
e.target.selectionStart = e.target.selectionEnd = cursorPosition
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
onChange(e)
|
|
122
|
-
}
|
|
123
|
-
|
|
124
93
|
const childInput = children ? children.type === "input" : undefined
|
|
125
94
|
|
|
126
95
|
const textInput = (
|
|
@@ -132,9 +101,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
|
132
101
|
id={id}
|
|
133
102
|
key={id}
|
|
134
103
|
name={name}
|
|
135
|
-
onChange={
|
|
136
|
-
|
|
137
|
-
placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
|
|
104
|
+
onChange={onChange}
|
|
105
|
+
placeholder={placeholder}
|
|
138
106
|
ref={ref}
|
|
139
107
|
required={required}
|
|
140
108
|
type={type}
|
|
@@ -5,4 +5,3 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
|
|
|
5
5
|
export { default as TextInputAddOn } from './_text_input_add_on.jsx'
|
|
6
6
|
export { default as TextInputInline } from './_text_input_inline.jsx'
|
|
7
7
|
export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
|
|
8
|
-
export { default as TextInputMask } from './_text_input_mask.jsx'
|