playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.play824745

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8231bb3fbf02190e76cf2763a3d70ee166e665ea67ab0456fb61e90aba95e933
4
- data.tar.gz: 71ef01fbd0bb7e37c38958c8b0409d577a682283713c3c7a50aec203b6870423
3
+ metadata.gz: 3e7107748c1e27434e249e99455af6fb2fc94231b56e1f07f2737625b2d98929
4
+ data.tar.gz: ce7055c4792005d1f545a272f2c26cddaeed9661d94effbc422b7656eba353a0
5
5
  SHA512:
6
- metadata.gz: 5ec035a7462706717a83e63a232d4e2cbf761eeb8e89b17466630e1921f01c1aeecd79b6e21f3b2d930a112edab0cf39cbd649ea9ddd3320a8ca9b942a4322ac
7
- data.tar.gz: e1966ede2224963aa2c903d23765dae5cb24c0317d3d7bff6f0fd9d211ae1453f48d70ab94cffdf3d04d760274234a61b5fd2d2c1cf838d652bea6e635f059d8
6
+ metadata.gz: b9562a80f3f7683e6003eb21fbd266c4448bbcf83e91f7163d6439dd256ee57e41f222b68af1f38ff126c65a6908c22581c28c4ec75eb95ef5a92c493d2c7374
7
+ data.tar.gz: a4b80dda806f693d8046407ae654faa7bc100e664e3584bbb050675e9107f88e742a7d00ad54c439567c67f1c9e39cae0c8e162b3caf07729015b1ad24ed6d8a
@@ -5,8 +5,6 @@
5
5
  module Playbook
6
6
  module PbDocs
7
7
  class KitExample < Playbook::KitBase
8
- include Playbook::Markdown::Helper
9
-
10
8
  prop :kit, type: Playbook::Props::String, required: true
11
9
  prop :example_title, type: Playbook::Props::String, required: true
12
10
  prop :example_key, type: Playbook::Props::String, required: true
@@ -41,6 +41,8 @@ type PhoneNumberInputProps = {
41
41
  enum ValidationError {
42
42
  TooShort = 2,
43
43
  TooLong = 3,
44
+ MissingAreaCode = 4,
45
+ SomethingWentWrong = -99
44
46
  }
45
47
 
46
48
  const formatToGlobalCountryName = (countryName: string) => {
@@ -109,35 +111,68 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
109
111
  }
110
112
  }, [error, onValidate])
111
113
 
114
+ if (itiInit) isValid(itiInit.isValidNumber())
115
+
116
+ const showFormattedError = (reason = '') => {
117
+ const countryName = itiInit.getSelectedCountryData().name
118
+ const reasonText = reason.length > 0 ? ` (${reason})` : ''
119
+ setError(`Invalid ${countryName} phone number${reasonText}`)
120
+ return true
121
+ }
122
+
112
123
  const validateTooLongNumber = (itiInit: any) => {
113
- const error = itiInit.getValidationError()
124
+ if (!itiInit) return
125
+ if (itiInit.getValidationError() === ValidationError.TooLong) {
126
+ return showFormattedError('too long')
127
+ } else {
128
+ setError('')
129
+ }
130
+ }
114
131
 
115
- if (error === ValidationError.TooLong) {
116
- const countryName = itiInit.getSelectedCountryData().name
117
- setError(`Invalid ${countryName} phone number (too long)`)
132
+ const validateTooShortNumber = (itiInit: any) => {
133
+ if (!itiInit) return
134
+ if (itiInit.getValidationError() === ValidationError.TooShort) {
135
+ return showFormattedError('too short')
118
136
  } else {
119
- setError("")
137
+ setError('')
120
138
  }
121
139
  }
122
140
 
123
- const validateTooShortNumber = () => {
124
- const error = itiInit.getValidationError()
141
+ const validateOnlyNumbers = (itiInit: any) => {
142
+ if (!itiInit) return
143
+ if (inputValue && !containOnlyNumbers(inputValue)) {
144
+ return showFormattedError('enter numbers only')
145
+ }
146
+ }
125
147
 
126
- if (error === ValidationError.TooShort) {
127
- const countryName = itiInit.getSelectedCountryData().name
128
- setError(`Invalid ${countryName} phone number (too short)`)
148
+ const validateUnhandledError = (itiInit: any) => {
149
+ if (!itiInit) return
150
+ if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
151
+ if (inputValue.length === 1) {
152
+ return showFormattedError('too short')
153
+ } else if (inputValue.length === 0) {
154
+ setError('Missing phone number')
155
+ return true
156
+ } else {
157
+ return showFormattedError()
158
+ }
129
159
  }
130
160
  }
131
161
 
132
- const validateOnlyNumbers = () => {
133
- if (inputValue && !containOnlyNumbers(inputValue)) {
134
- setError("Invalid phone number. Enter numbers only.")
162
+ const validateMissingAreaCode = (itiInit: any) => {
163
+ if (!itiInit) return
164
+ if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
165
+ showFormattedError('missing area code')
166
+ return true
135
167
  }
136
168
  }
137
169
 
138
170
  const validateErrors = () => {
139
- validateTooShortNumber()
140
- validateOnlyNumbers()
171
+ if (validateOnlyNumbers(itiInit)) return
172
+ if (validateTooLongNumber(itiInit)) return
173
+ if (validateTooShortNumber(itiInit)) return
174
+ if (validateUnhandledError(itiInit)) return
175
+ if (validateMissingAreaCode(itiInit)) return
141
176
  }
142
177
 
143
178
  const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -146,11 +181,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
146
181
 
147
182
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
148
183
  setInputValue(evt.target.value)
149
- validateTooLongNumber(itiInit)
150
184
  const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
151
185
  setSelectedData(phoneNumberData)
152
186
  onChange(phoneNumberData)
153
- isValid(itiInit.isValidNumber())
154
187
  }
155
188
 
156
189
  // Separating Concerns as React Docs Recommend
@@ -158,20 +191,20 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
158
191
  useEffect(formatAllCountries, [])
159
192
 
160
193
  useEffect(() => {
161
- const telInputInit = new intlTelInput(inputRef.current, {
194
+ const telInputInit = intlTelInput(inputRef.current, {
162
195
  separateDialCode: true,
163
196
  preferredCountries,
164
197
  allowDropdown: !disabled,
165
198
  initialCountry,
166
199
  onlyCountries,
200
+ utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
167
201
  })
168
202
 
169
203
  inputRef.current.addEventListener("countrychange", (evt: Event) => {
170
- validateTooLongNumber(telInputInit)
171
204
  const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
172
205
  setSelectedData(phoneNumberData)
173
206
  onChange(phoneNumberData)
174
- isValid(telInputInit.isValidNumber())
207
+ validateErrors()
175
208
  })
176
209
 
177
210
  inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -186,6 +219,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
186
219
  "data-phone-number": JSON.stringify(selectedData),
187
220
  disabled,
188
221
  error,
222
+ type: 'tel',
189
223
  id,
190
224
  label,
191
225
  name,
@@ -34,7 +34,6 @@ const PhoneNumberInputValidation = (props) => {
34
34
  >
35
35
  {showFormErrors && (
36
36
  <FixedConfirmationToast
37
- closeable
38
37
  marginBottom="md"
39
38
  status="error"
40
39
  text={formErrors}
@@ -17,7 +17,8 @@ module Playbook
17
17
  default: []
18
18
  prop :preferred_countries, type: Playbook::Props::Array,
19
19
  default: []
20
- prop :error, type: Playbook::Props::String
20
+ prop :error, type: Playbook::Props::String,
21
+ default: ""
21
22
  prop :value, type: Playbook::Props::String,
22
23
  default: ""
23
24