playbook_ui_docs 12.24.0.pre.alpha.play824753 → 12.24.0.pre.alpha.railsmultilevelimprovements739
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_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/dist/playbook-doc.js +3 -3
- metadata +2 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +0 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +0 -60
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.24.0.pre.alpha.
|
4
|
+
version: 12.24.0.pre.alpha.railsmultilevelimprovements739
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-06-
|
12
|
+
date: 2023-06-06 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -933,8 +933,6 @@ files:
|
|
933
933
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
|
934
934
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
|
935
935
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
|
936
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
|
937
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
|
938
936
|
- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
|
939
937
|
- app/pb_kits/playbook/pb_phone_number_input/docs/index.js
|
940
938
|
- app/pb_kits/playbook/pb_pill/docs/_description.md
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
<form id="example-form-validation" action="" method="get">
|
2
|
-
<%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
|
3
|
-
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
4
|
-
</form>
|
5
|
-
|
6
|
-
<% content_for(:pb_js) do %>
|
7
|
-
<%= javascript_tag do %>
|
8
|
-
document.addEventListener('DOMContentLoaded', function () {
|
9
|
-
document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
|
10
|
-
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
11
|
-
})
|
12
|
-
})
|
13
|
-
<% end %>
|
14
|
-
<% end %>
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
2
|
-
import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
|
3
|
-
|
4
|
-
const PhoneNumberInputValidation = (props) => {
|
5
|
-
const [formErrors, setFormErrors] = useState("");
|
6
|
-
const [showFormErrors, setShowFormErrors] = useState(false);
|
7
|
-
const [phoneNumber, setPhoneNumber] = useState("");
|
8
|
-
const [countryCode, setCountryCode] = useState("af");
|
9
|
-
|
10
|
-
const handleOnValidate = (valid) => {
|
11
|
-
setFormErrors(
|
12
|
-
valid ? "" : "Please correct the fields below and try again."
|
13
|
-
);
|
14
|
-
};
|
15
|
-
|
16
|
-
const handleOnChange = ({ iso2, number }) => {
|
17
|
-
setCountryCode(iso2);
|
18
|
-
setPhoneNumber(number);
|
19
|
-
};
|
20
|
-
|
21
|
-
const handleOnSubmit = (e) => {
|
22
|
-
if (showFormErrors) e.preventDefault()
|
23
|
-
}
|
24
|
-
|
25
|
-
useEffect(() => {
|
26
|
-
setShowFormErrors(formErrors.length > 0);
|
27
|
-
}, [formErrors]);
|
28
|
-
|
29
|
-
return (
|
30
|
-
<form
|
31
|
-
action=""
|
32
|
-
method="get"
|
33
|
-
onSubmit={handleOnSubmit}
|
34
|
-
>
|
35
|
-
{showFormErrors && (
|
36
|
-
<FixedConfirmationToast
|
37
|
-
marginBottom="md"
|
38
|
-
status="error"
|
39
|
-
text={formErrors}
|
40
|
-
/>
|
41
|
-
)}
|
42
|
-
<PhoneNumberInput
|
43
|
-
error="Missing phone number."
|
44
|
-
id="validation"
|
45
|
-
initialCountry={countryCode}
|
46
|
-
onChange={handleOnChange}
|
47
|
-
onValidate={handleOnValidate}
|
48
|
-
required
|
49
|
-
value={phoneNumber}
|
50
|
-
{...props}
|
51
|
-
/>
|
52
|
-
<Button
|
53
|
-
htmlType="submit"
|
54
|
-
text="Save Phone Number"
|
55
|
-
/>
|
56
|
-
</form>
|
57
|
-
);
|
58
|
-
};
|
59
|
-
|
60
|
-
export default PhoneNumberInputValidation;
|