playbook_ui_docs 13.18.0.pre.alpha.PLAY12062177 → 13.18.0.pre.alpha.PLAY12062203
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_filter/docs/_filter_max_height.html.erb +42 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- 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: 6815f1ff6f1e550f6dd10ff48a61ebf4d1a0e0ddcfacb1d5708ab48c17c016a7
|
|
4
|
+
data.tar.gz: f092b19e75db534e84dc616516ea28bd4e22919daaf6c6d91bdf20d8bdfe7d23
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a89548d368d9ca5abbf5e9c5aaca40a32d6395da3a46b6fe0aa443a024313666efac130cd3cba0184199cb6d878c657886ade1cabe2ea5b1dba8126f65c3ca93
|
|
7
|
+
data.tar.gz: 4ed7fea4ebcf03eb3f6ba3c2e597c0f4bac5dbb31244796f653e2766742cdf207d632d68f0f76c01ef1160ba678ddb555ebe263a60cd78fdc95353b84f2ca0e5
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<%=
|
|
2
|
+
pb_rails("filter", props: {
|
|
3
|
+
max_height: "360px",
|
|
4
|
+
id: "filter_max_height_rails",
|
|
5
|
+
position: "top",
|
|
6
|
+
filters: [
|
|
7
|
+
{ name: "name", value: "John Wick" },
|
|
8
|
+
{ name: "city", value: "San Francisco"}
|
|
9
|
+
],
|
|
10
|
+
sort_menu: [
|
|
11
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
|
12
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
|
13
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
|
14
|
+
],
|
|
15
|
+
template: "default",
|
|
16
|
+
results: 1,
|
|
17
|
+
}) do
|
|
18
|
+
%>
|
|
19
|
+
<%
|
|
20
|
+
example_collection = [
|
|
21
|
+
OpenStruct.new(name: "USA", value: 1),
|
|
22
|
+
OpenStruct.new(name: "Canada", value: 2),
|
|
23
|
+
OpenStruct.new(name: "Brazil", value: 3),
|
|
24
|
+
OpenStruct.new(name: "Philippines", value: 4),
|
|
25
|
+
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
|
26
|
+
]
|
|
27
|
+
%>
|
|
28
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
|
29
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
30
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
31
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
32
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
33
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
34
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
|
35
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
|
36
|
+
|
|
37
|
+
<%= form.actions do |action| %>
|
|
38
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
|
39
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const FilterMaxHeight = (props) => {
|
|
5
|
+
const options = [
|
|
6
|
+
{ value: 'USA' },
|
|
7
|
+
{ value: 'Canada' },
|
|
8
|
+
{ value: 'Brazil' },
|
|
9
|
+
{ value: 'Philippines' },
|
|
10
|
+
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
|
11
|
+
]
|
|
12
|
+
return (
|
|
13
|
+
<Filter
|
|
14
|
+
{...props}
|
|
15
|
+
double
|
|
16
|
+
filters={{
|
|
17
|
+
'Full Name': 'John Wick',
|
|
18
|
+
'City': 'San Francisco',
|
|
19
|
+
}}
|
|
20
|
+
maxHeight="360px"
|
|
21
|
+
minWidth="360px"
|
|
22
|
+
results={1}
|
|
23
|
+
sortOptions={{
|
|
24
|
+
popularity: 'Popularity',
|
|
25
|
+
// eslint-disable-next-line
|
|
26
|
+
manager_title: 'Manager\'s Title',
|
|
27
|
+
// eslint-disable-next-line
|
|
28
|
+
manager_name: 'Manager\'s Name',
|
|
29
|
+
}}
|
|
30
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
31
|
+
>
|
|
32
|
+
{({ closePopover }) => (
|
|
33
|
+
<form>
|
|
34
|
+
<Select
|
|
35
|
+
blankSelection="Select One..."
|
|
36
|
+
label="Territory"
|
|
37
|
+
name="location"
|
|
38
|
+
options={options}
|
|
39
|
+
/>
|
|
40
|
+
<TextInput
|
|
41
|
+
label="First Name"
|
|
42
|
+
placeholder="Enter name"
|
|
43
|
+
{...props}
|
|
44
|
+
/>
|
|
45
|
+
<TextInput
|
|
46
|
+
label="Middle Name"
|
|
47
|
+
placeholder="Enter name"
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
<TextInput
|
|
51
|
+
label="Last Name"
|
|
52
|
+
placeholder="Enter name"
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
<TextInput
|
|
56
|
+
label="Email"
|
|
57
|
+
placeholder="Enter email"
|
|
58
|
+
{...props}
|
|
59
|
+
/>
|
|
60
|
+
<TextInput
|
|
61
|
+
label="Address"
|
|
62
|
+
placeholder="Enter address"
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
<Flex
|
|
66
|
+
spacing="between"
|
|
67
|
+
>
|
|
68
|
+
<Button
|
|
69
|
+
onClick={closePopover}
|
|
70
|
+
text="Apply"
|
|
71
|
+
/>
|
|
72
|
+
<Button
|
|
73
|
+
text="Clear"
|
|
74
|
+
variant="secondary"
|
|
75
|
+
/>
|
|
76
|
+
</Flex>
|
|
77
|
+
</form>
|
|
78
|
+
)}
|
|
79
|
+
</Filter>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default FilterMaxHeight
|
|
@@ -8,6 +8,7 @@ examples:
|
|
|
8
8
|
- filter_only: Filter Only
|
|
9
9
|
- sort_only: Sort Only
|
|
10
10
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
11
|
+
- filter_max_height: Max Height for Popover Inside of Filter
|
|
11
12
|
- filter_placement: Filter Placement
|
|
12
13
|
|
|
13
14
|
react:
|
|
@@ -18,4 +19,5 @@ examples:
|
|
|
18
19
|
- filter_only: Filter Only
|
|
19
20
|
- sort_only: Sort Only
|
|
20
21
|
- filter_max_width: Max Width for Popover Inside of Filter
|
|
22
|
+
- filter_max_height: Max Height for Popover Inside of Filter
|
|
21
23
|
- filter_placement: Filter Placement
|
|
@@ -5,4 +5,5 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
|
|
|
5
5
|
export { default as FilterOnly } from './_filter_only.jsx'
|
|
6
6
|
export { default as SortOnly } from './_sort_only.jsx'
|
|
7
7
|
export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
|
8
|
+
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
|
8
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|