playbook_ui 13.18.0.pre.alpha.PLAY12062192 → 13.18.0.pre.alpha.PLAY12062203

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 94f589b86b30ab8ce2fc2a6efde754d3c0858127cd98de756f7a5988a270fb98
4
- data.tar.gz: 65f4377c3a940d0ebe99287aab5d264cef225ce71b39fd82ad3206947d0b3647
3
+ metadata.gz: 8f6b0ff54cf9716e16036e927548c56d9ed3bf864dc067049c400fa8e2688619
4
+ data.tar.gz: 5c95f55e88034b7c6d0af437441413074fee4159556bbc012783ad3783199ecf
5
5
  SHA512:
6
- metadata.gz: 920f3031b3b57dacc1f20099c3fd5f63133f90cec68608967a9b243d0f4fc939613642224e04d0d81dcf66e53690a3e031d6da5efba401ab12923b7b28e4f33f
7
- data.tar.gz: 1813f4f68ea6e197b6bfe10414128582e30cd3b6eafc18bf29942b9c82aec32ca7f0eb594de67de7c4024616ffb4283ef3a66f6cc1b733f8edd95d0da30df6c8
6
+ metadata.gz: 8c2608c178635d11d9aa6a1a9e47a5a4b730acae9ba2375677d0d3a4c36469c84a3346dec3c3622d9d4140820ce1890f34bf1daa29cb23f1f94fe3f733e68700
7
+ data.tar.gz: 6fa6c282889d8e7e7a7f51ae5a3903c4ccfc861c9d05e4668dc2bb07322cfb4b96091cfe9140cd0656d72f7005655393a088eb805a75b3c1e2b780e866e0063a
@@ -15,7 +15,7 @@ import Flex from '../../pb_flex/_flex'
15
15
  import SectionSeparator from '../../pb_section_separator/_section_separator'
16
16
 
17
17
  export type FilterDoubleProps = {
18
- children?: React.ReactChild[] | React.ReactChild,
18
+ children?: React.ReactChild[] | React.ReactChild,
19
19
  filters?: FilterDescription,
20
20
  onSortChange?: SortingChangeCallback,
21
21
  results?: number,
@@ -31,6 +31,7 @@ const FilterDouble = ({
31
31
  results,
32
32
  children,
33
33
  dark,
34
+ maxHeight,
34
35
  minWidth,
35
36
  placement,
36
37
  ...bgProps
@@ -45,6 +46,7 @@ const FilterDouble = ({
45
46
  >
46
47
  <FiltersPopover
47
48
  dark={dark}
49
+ maxHeight={maxHeight}
48
50
  minWidth={minWidth}
49
51
  placement={placement}
50
52
  >
@@ -14,7 +14,7 @@ import SortMenu, {
14
14
  } from './SortMenu'
15
15
 
16
16
  export type FilterSingleProps = {
17
- children?: React.ReactChild[] | React.ReactChild,
17
+ children?: React.ReactChild[] | React.ReactChild,
18
18
  filters?: FilterDescription,
19
19
  onSortChange?: SortingChangeCallback,
20
20
  results?: number,
@@ -30,6 +30,7 @@ const FilterSingle = ({
30
30
  results,
31
31
  children,
32
32
  dark,
33
+ maxHeight,
33
34
  minWidth,
34
35
  placement,
35
36
  ...bgProps
@@ -48,6 +49,7 @@ const FilterSingle = ({
48
49
  <>
49
50
  <FiltersPopover
50
51
  dark={dark}
52
+ maxHeight={maxHeight}
51
53
  minWidth={minWidth}
52
54
  placement={placement}
53
55
  >
@@ -8,7 +8,7 @@ type FilterProps =
8
8
  double?: boolean,
9
9
  })
10
10
 
11
- const Filter = ({
11
+ const Filter = ({
12
12
  double = false,
13
13
  ...templateProps
14
14
  }: FilterProps): React.ReactElement => {
@@ -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'
@@ -69,14 +69,14 @@
69
69
  <% end %>
70
70
  <% end %>
71
71
 
72
- <% if object.template != "sort_only" %>
73
- <%= pb_rails("popover", props: object.popover_props) do %>
72
+ <% if object.template != "sort_only"%>
73
+ <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
74
74
  <%= content %>
75
75
  <% end %>
76
76
  <%end%>
77
77
 
78
- <% if object.template != "filter_only" %>
79
- <%= pb_rails("popover", props: object.popover_props) do %>
78
+ <% if object.template != "filter_only"%>
79
+ <%= pb_rails("popover", props: {max_height: object.max_height, classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
80
80
  <%= pb_rails("list") do %>
81
81
  <% object.sort_menu.each do |item| %>
82
82
  <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
@@ -49,29 +49,6 @@ module Playbook
49
49
  ""
50
50
  end
51
51
  end
52
-
53
- def popover_props
54
- if template != "sort_only"
55
- {
56
- max_height: max_height,
57
- min_width: min_width,
58
- close_on_click: "outside",
59
- trigger_element_id: "filter#{id}",
60
- tooltip_id: "filter-form#{id}",
61
- position: placement,
62
- }
63
- elsif template != "filter_only"
64
- {
65
- max_height: max_height,
66
- classname: "pb_filter_sort_menu",
67
- close_on_click: "outside",
68
- trigger_element_id: "sort-button#{id}",
69
- tooltip_id: "sort-filter-btn-tooltip#{id}",
70
- position: placement,
71
- padding: "none",
72
- }
73
- end
74
- end
75
52
  end
76
53
  end
77
54
  end
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.18.0"
5
- VERSION = "13.18.0.pre.alpha.PLAY12062192"
5
+ VERSION = "13.18.0.pre.alpha.PLAY12062203"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.18.0.pre.alpha.PLAY12062192
4
+ version: 13.18.0.pre.alpha.PLAY12062203
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -1064,6 +1064,8 @@ files:
1064
1064
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
1065
1065
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
1066
1066
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.md
1067
+ - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb
1068
+ - app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx
1067
1069
  - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb
1068
1070
  - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx
1069
1071
  - app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md