playbook_ui_docs 14.6.0.pre.rc.14 → 14.6.0.pre.rc.16
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_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f97018ed99de08972544f7fedca98fd0e1c16927df7c0a7e539cbba1cf43d78a
|
|
4
|
+
data.tar.gz: 0f70fe993f929f52a57c5c0c244bbfa6bb5104b01d0eee411d52716e2084708b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 921848b90ad81a96948954fed77f466897cf56416e6c092255868b1ed22abad57c9b0db6aead70ba94335352d45d8abc1e574f14ffb8268e8bd0fdfdebdb033e
|
|
7
|
+
data.tar.gz: e54d46ac7a27c21b3a044d0b9c6fdc8aa1a17ee0fbc71ea28437a2d06afe497ba134b25c761407be00fce280f23f25e3be544a1d6ac265da997c3813f4ee2fc2
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{
|
|
6
|
+
label: "United States",
|
|
7
|
+
value: "United States",
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
label: "Canada",
|
|
11
|
+
value: "Canada",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Pakistan",
|
|
15
|
+
value: "Pakistan",
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const DropdownClearSelection = (props) => {
|
|
20
|
+
const dropdownRef = useRef(null)
|
|
21
|
+
|
|
22
|
+
const handleReset = () => {
|
|
23
|
+
if (dropdownRef.current) {
|
|
24
|
+
dropdownRef.current.clearSelected()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<Dropdown
|
|
31
|
+
defaultValue={options[2]}
|
|
32
|
+
options={options}
|
|
33
|
+
ref={dropdownRef}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<Button
|
|
37
|
+
marginTop="md"
|
|
38
|
+
onClick={handleReset}
|
|
39
|
+
text="Reset"
|
|
40
|
+
/>
|
|
41
|
+
</>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default DropdownClearSelection
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
|
@@ -22,6 +22,7 @@ examples:
|
|
|
22
22
|
- dropdown_error: Dropdown with Error
|
|
23
23
|
- dropdown_default_value: Default Value
|
|
24
24
|
- dropdown_blank_selection: Blank Selection
|
|
25
|
+
- dropdown_clear_selection: Clear Selection
|
|
25
26
|
# - dropdown_with_autocomplete: Autocomplete
|
|
26
27
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
|
27
28
|
# - dropdown_with_external_control: useDropdown Hook
|
|
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
15
|
+
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|