playbook_ui_docs 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 → 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833
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 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -3
- data/dist/playbook-doc.js +9 -9
- metadata +1 -7
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +0 -26
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +0 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +0 -30
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +0 -3
- 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.26.1.pre.alpha.
|
|
4
|
+
version: 12.26.1.pre.alpha.play716popoverkitcloseonclickissue833
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -937,10 +937,6 @@ files:
|
|
|
937
937
|
- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx
|
|
938
938
|
- app/pb_kits/playbook/pb_person_contact/docs/example.yml
|
|
939
939
|
- app/pb_kits/playbook/pb_person_contact/docs/index.js
|
|
940
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
|
|
941
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
|
|
942
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
|
|
943
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
|
|
944
940
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
|
|
945
941
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
|
|
946
942
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
|
|
@@ -953,8 +949,6 @@ files:
|
|
|
953
949
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
|
|
954
950
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
|
|
955
951
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
|
|
956
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
|
|
957
|
-
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
|
|
958
952
|
- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
|
|
959
953
|
- app/pb_kits/playbook/pb_phone_number_input/docs/index.js
|
|
960
954
|
- app/pb_kits/playbook/pb_pill/docs/_description.md
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react'
|
|
2
|
-
import { Body, PhoneNumberInput } from '../..'
|
|
3
|
-
|
|
4
|
-
const PhoneNumberInputAccessInputElement = (props) => {
|
|
5
|
-
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
-
const ref = useRef()
|
|
7
|
-
|
|
8
|
-
// 2. Add any event listener to ref.current.inputNode() inside a useEffect hook.
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
// 3. Pass the ref to the ref prop.
|
|
14
|
-
return (
|
|
15
|
-
<>
|
|
16
|
-
<Body text="Click the input field below:" />
|
|
17
|
-
<PhoneNumberInput
|
|
18
|
-
id="access-input-element"
|
|
19
|
-
ref={ref}
|
|
20
|
-
{...props}
|
|
21
|
-
/>
|
|
22
|
-
</>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export default PhoneNumberInputAccessInputElement
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`.
|
|
2
|
-
|
|
3
|
-
`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React, { useRef } from 'react'
|
|
2
|
-
import { Button, PhoneNumberInput } from '../..'
|
|
3
|
-
|
|
4
|
-
const PhoneNumberInputClearField = (props) => {
|
|
5
|
-
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
-
const ref = useRef()
|
|
7
|
-
|
|
8
|
-
// 2. Use clearField() to clear the field.
|
|
9
|
-
const handleClick = () => {
|
|
10
|
-
ref.current.clearField()
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// 3. Pass the ref to the ref prop.
|
|
14
|
-
return (
|
|
15
|
-
<>
|
|
16
|
-
<PhoneNumberInput
|
|
17
|
-
id="clear-field"
|
|
18
|
-
ref={ref}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
|
|
22
|
-
<Button
|
|
23
|
-
onClick={handleClick}
|
|
24
|
-
text="Clear the Input Field"
|
|
25
|
-
/>
|
|
26
|
-
</>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export default PhoneNumberInputClearField
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
|
|
2
|
-
|
|
3
|
-
`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.
|
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;
|