playbook_ui_docs 12.26.0.pre.alpha.railsmultilevelimprovements805 → 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836
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_multi_level_select/docs/_multi_level_select_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +14 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +60 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +3 -0
- data/dist/playbook-doc.js +10 -10
- metadata +8 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +0 -73
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +0 -87
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +0 -72
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 562a4a8e640546c3d9926974fcaa55bbf162c8c1d99ee6320b05429d0881573f
|
4
|
+
data.tar.gz: c844f5301619f323c9ff39a8b12cfc2141ec5f45f55bc563b0b57dbd7aa59452
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '05353187de0c419deddf80f088d7a908d05fab6e1b967ebccb876e27b282859c025258b9e6ecc808b78cd2edcb41e8c31208b09ad41be534d5751a3976cd26c0'
|
7
|
+
data.tar.gz: 4c895b0cd6ba1a6560342578cb2159fe5ed70aee0e7dfa6b36764d7276c8ffca518c28c7422c4278de5fb028a2699d0afe4b6a2afc201881beeb9d66a5e92863
|
@@ -74,7 +74,7 @@ const MultiLevelSelectDefault = (props) => {
|
|
74
74
|
<MultiLevelSelect
|
75
75
|
id="multiselect-default"
|
76
76
|
onSelect={(selectedNodes) =>
|
77
|
-
console.log("Selected Items
|
77
|
+
console.log("Selected Items", selectedNodes)
|
78
78
|
}
|
79
79
|
treeData={treeData}
|
80
80
|
{...props}
|
@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
|
|
2
2
|
|
3
3
|
For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
|
4
4
|
|
5
|
-
|
5
|
+
For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
CHANGED
@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
|
|
74
74
|
<MultiLevelSelect
|
75
75
|
id="multiselect-parent-persistence"
|
76
76
|
onSelect={(selectedNodes) =>
|
77
|
-
console.log("Selected Items
|
77
|
+
console.log("Selected Items", selectedNodes)
|
78
78
|
}
|
79
79
|
returnAllSelected
|
80
80
|
treeData={treeData}
|
@@ -2,11 +2,8 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- multi_level_select_default: Default
|
4
4
|
- multi_level_select_return_all_selected: Return All Selected
|
5
|
-
- multi_level_select_return_complete_data: Return Complete Data
|
6
|
-
- multi_level_select_with_form: With Form
|
7
5
|
|
8
6
|
react:
|
9
7
|
- multi_level_select_default: Default
|
10
8
|
- multi_level_select_return_all_selected: Return All Selected
|
11
|
-
- multi_level_select_return_complete_data: Return Complete Data
|
12
9
|
|
@@ -1,3 +1,2 @@
|
|
1
1
|
export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
|
2
|
-
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
3
|
-
export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
|
2
|
+
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
ADDED
@@ -0,0 +1,26 @@
|
|
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
ADDED
@@ -0,0 +1,3 @@
|
|
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`
|
@@ -0,0 +1,30 @@
|
|
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
|
@@ -0,0 +1,3 @@
|
|
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.
|
@@ -0,0 +1,14 @@
|
|
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 %>
|
@@ -0,0 +1,60 @@
|
|
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;
|
@@ -5,9 +5,13 @@ examples:
|
|
5
5
|
- phone_number_input_preferred_countries: Preferred Countries
|
6
6
|
- phone_number_input_initial_country: Initial Country
|
7
7
|
- phone_number_input_only_countries: Limited Countries
|
8
|
+
- phone_number_input_validation: Form Validation
|
9
|
+
- phone_number_input_clear_field: Clearing the Input Field
|
10
|
+
- phone_number_input_access_input_element: Accessing the Input Element
|
8
11
|
|
9
12
|
rails:
|
10
13
|
- phone_number_input_default: Default
|
11
14
|
- phone_number_input_preferred_countries: Preferred Countries
|
12
15
|
- phone_number_input_initial_country: Initial Country
|
13
|
-
- phone_number_input_only_countries: Limited Countries
|
16
|
+
- phone_number_input_only_countries: Limited Countries
|
17
|
+
- phone_number_input_validation: Form Validation
|
@@ -2,3 +2,6 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
|
|
2
2
|
export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
|
3
3
|
export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
|
4
4
|
export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
|
5
|
+
export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
|
6
|
+
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
7
|
+
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|