playbook_ui 7.8.3 → 7.11.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/controllers/playbook/application_controller.rb +5 -3
- data/app/helpers/playbook/application_helper.rb +13 -19
- data/app/helpers/playbook/pb_doc_helper.rb +41 -20
- data/app/helpers/playbook/pb_kit_helper.rb +1 -25
- data/app/helpers/playbook/pb_sample_helper.rb +24 -23
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/config/_kit_example.html.erb +18 -4
- data/app/pb_kits/playbook/config/_kit_ui.html.erb +21 -21
- data/app/pb_kits/playbook/pb_currency/_currency.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +16 -1
- data/app/pb_kits/playbook/pb_currency/_currency.scss +23 -1
- data/app/pb_kits/playbook/pb_currency/currency.rb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.jsx → _currency_alignment.jsx} +5 -5
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx +17 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb} +8 -7
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.jsx → _currency_size.jsx} +9 -8
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +24 -0
- data/app/pb_kits/playbook/pb_currency/docs/{_currency_medium.jsx → _currency_variants.jsx} +13 -10
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +8 -6
- data/app/pb_kits/playbook/pb_currency/docs/index.js +4 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb +23 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +4 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +20 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +51 -31
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +3 -4
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +17 -16
- data/app/pb_kits/playbook/pb_filter/_filter.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +57 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +35 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +47 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +9 -9
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_item.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +47 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -46
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx +34 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx +33 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +5 -2
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +4 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +71 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +375 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +25 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +45 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +4 -3
- data/app/pb_kits/playbook/pb_select/select.test.js +51 -0
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +8 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.html.erb +17 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +28 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.html.erb +20 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +31 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md +1 -0
- data/app/pb_kits/playbook/pb_stat_change/docs/example.yml +6 -4
- data/app/pb_kits/playbook/pb_stat_change/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +12 -7
- data/app/pb_kits/playbook/pb_table/_table.scss +1 -57
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_alignment.scss +32 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +4 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +24 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_description.md +2 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx +7 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +78 -56
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +19 -11
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +77 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +5 -5
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +10 -7
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +17 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +87 -37
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +5 -1
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +2 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +19 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +4 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +10 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +5 -0
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/lib/playbook.rb +6 -17
- data/lib/playbook/engine.rb +0 -3
- data/{app/pb_kits → lib}/playbook/props.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/base.rb +19 -3
- data/{app/pb_kits → lib}/playbook/props/boolean.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/date.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/enum.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/hash_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/number_array.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/numeric.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/percentage.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/proc.rb +0 -0
- data/{app/pb_kits → lib}/playbook/props/string.rb +0 -0
- data/lib/playbook/version.rb +1 -1
- metadata +59 -28
- data/app/helpers/playbook/layout_helper.rb +0 -9
- data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb +0 -21
- data/app/pb_kits/playbook/pb_table/styles/_mixins.scss +0 -0
@@ -1,23 +1,23 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
default_date:
|
2
|
+
default_date: DateTime.current.utc.iso8601,
|
3
3
|
format: "m-d-Y",
|
4
4
|
picker_id: "date-picker-format1"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date:
|
8
|
+
default_date: DateTime.current.utc.iso8601,
|
9
9
|
format: "m/d/y",
|
10
10
|
picker_id: "date-picker-format2"
|
11
11
|
}) %>
|
12
12
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
|
-
default_date:
|
14
|
+
default_date: DateTime.current.utc.iso8601,
|
15
15
|
format: "n-j-y",
|
16
16
|
picker_id: "date-picker-format3"
|
17
17
|
}) %>
|
18
18
|
|
19
19
|
<%= pb_rails("date_picker", props: {
|
20
|
-
default_date:
|
20
|
+
default_date: DateTime.current.utc.iso8601,
|
21
21
|
format: "Y-d-m",
|
22
22
|
picker_id: "date-picker-format4"
|
23
23
|
}) %>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
2
|
label: "Dynamic dates",
|
3
|
-
max_date: (
|
4
|
-
min_date: (
|
3
|
+
max_date: (DateTime.current + 1.day).utc.iso8601,
|
4
|
+
min_date: (DateTime.current - 1.day).utc.iso8601,
|
5
5
|
picker_id: "date-picker-min-max1"
|
6
6
|
}) %>
|
7
7
|
|
@@ -1,7 +1,9 @@
|
|
1
|
-
Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below. You can implement additional features and functionality by accessing a flatpickr instance directly. This is done with the following code.
|
1
|
+
Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below. You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below). This is done with the following code.
|
2
2
|
|
3
3
|
`const fpInstance = document.querySelector('#pickerId')._flatpickr`
|
4
4
|
|
5
5
|
`pickerId` is a prop passed to the date picker kit. Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
|
6
6
|
|
7
|
-
To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
|
7
|
+
To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
|
8
|
+
|
9
|
+
The Date Picker works best with Javascript Date Objects or ISO Date strings. If you're programming in js use Date Objects. If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string. For example, `DateTime.now.utc.iso8601`. This ensures that the string passed to the Date Picker kit behaves as expected.
|
@@ -11,8 +11,10 @@ examples:
|
|
11
11
|
- date_picker_disabled: Disabled Dates
|
12
12
|
- date_picker_min_max: Min Max
|
13
13
|
- date_picker_error: Error
|
14
|
+
- date_picker_flatpickr_methods: Flatpickr Methods
|
14
15
|
- date_picker_hooks: Hooks
|
15
16
|
- date_picker_year_range: Year Range
|
17
|
+
- date_picker_anti_patterns: Anti-Patterns
|
16
18
|
|
17
19
|
|
18
20
|
react:
|
@@ -27,6 +29,6 @@ examples:
|
|
27
29
|
- date_picker_disabled: Disabled Dates
|
28
30
|
- date_picker_min_max: Min Max
|
29
31
|
- date_picker_error: Error
|
32
|
+
- date_picker_flatpickr_methods: Flatpickr Methods
|
30
33
|
- date_picker_hooks: Hooks
|
31
34
|
- date_picker_year_range: Year Range
|
32
|
-
|
@@ -10,4 +10,5 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
|
|
10
10
|
export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
|
11
11
|
export { default as DatePickerError } from './_date_picker_error.jsx'
|
12
12
|
export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
|
13
|
+
export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
|
13
14
|
export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
|
@@ -7,7 +7,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
|
|
7
7
|
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
|
8
8
|
import FiltersPopover from './FiltersPopover'
|
9
9
|
import ResultsCount from './ResultsCount'
|
10
|
-
import SortMenu, {
|
10
|
+
import SortMenu, {
|
11
|
+
SortingChangeCallback,
|
12
|
+
SortOptions,
|
13
|
+
SortValue,
|
14
|
+
} from './SortMenu'
|
11
15
|
|
12
16
|
export type FilterDoubleProps = {
|
13
17
|
children: Node,
|
@@ -18,7 +22,17 @@ export type FilterDoubleProps = {
|
|
18
22
|
sortValue?: SortValue,
|
19
23
|
} & FilterBackgroundProps
|
20
24
|
|
21
|
-
const FilterDouble = ({
|
25
|
+
const FilterDouble = ({
|
26
|
+
onSortChange,
|
27
|
+
sortOptions,
|
28
|
+
sortValue,
|
29
|
+
filters,
|
30
|
+
results,
|
31
|
+
children,
|
32
|
+
dark,
|
33
|
+
minWidth,
|
34
|
+
...bgProps
|
35
|
+
}: FilterDoubleProps) => (
|
22
36
|
<FilterBackground
|
23
37
|
dark={dark}
|
24
38
|
{...bgProps}
|
@@ -27,7 +41,10 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
|
|
27
41
|
orientation="row"
|
28
42
|
vertical="center"
|
29
43
|
>
|
30
|
-
<FiltersPopover
|
44
|
+
<FiltersPopover
|
45
|
+
dark={dark}
|
46
|
+
minWidth={minWidth}
|
47
|
+
>
|
31
48
|
{children}
|
32
49
|
</FiltersPopover>
|
33
50
|
<CurrentFilters
|
@@ -8,7 +8,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
|
|
8
8
|
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
|
9
9
|
import FiltersPopover from './FiltersPopover'
|
10
10
|
import ResultsCount from './ResultsCount'
|
11
|
-
import SortMenu, {
|
11
|
+
import SortMenu, {
|
12
|
+
SortingChangeCallback,
|
13
|
+
SortOptions,
|
14
|
+
SortValue,
|
15
|
+
} from './SortMenu'
|
12
16
|
|
13
17
|
export type FilterSingleProps = {
|
14
18
|
children?: Node,
|
@@ -19,38 +23,54 @@ export type FilterSingleProps = {
|
|
19
23
|
sortValue?: SortValue,
|
20
24
|
} & FilterBackgroundProps
|
21
25
|
|
22
|
-
const FilterSingle = ({
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
26
|
+
const FilterSingle = ({
|
27
|
+
onSortChange,
|
28
|
+
sortOptions,
|
29
|
+
sortValue,
|
30
|
+
filters,
|
31
|
+
results,
|
32
|
+
children,
|
33
|
+
dark,
|
34
|
+
minWidth,
|
35
|
+
...bgProps
|
36
|
+
}: FilterSingleProps) => {
|
37
|
+
return (
|
38
|
+
<FilterBackground
|
39
|
+
dark={dark}
|
40
|
+
{...bgProps}
|
30
41
|
>
|
31
|
-
<
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
42
|
+
<Flex
|
43
|
+
orientation="row"
|
44
|
+
paddingRight="lg"
|
45
|
+
vertical="center"
|
46
|
+
>
|
47
|
+
<If condition={children}>
|
48
|
+
<FiltersPopover
|
49
|
+
dark={dark}
|
50
|
+
minWidth={minWidth}
|
51
|
+
>
|
52
|
+
{children}
|
53
|
+
</FiltersPopover>
|
54
|
+
<CurrentFilters
|
55
|
+
dark={dark}
|
56
|
+
filters={filters}
|
57
|
+
/>
|
58
|
+
</If>
|
59
|
+
<ResultsCount
|
36
60
|
dark={dark}
|
37
|
-
|
61
|
+
results={results}
|
38
62
|
/>
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
</If>
|
52
|
-
</Flex>
|
53
|
-
</FilterBackground>
|
54
|
-
)
|
63
|
+
<If condition={!isEmpty(sortOptions)}>
|
64
|
+
<SortMenu
|
65
|
+
dark={dark}
|
66
|
+
onChange={onSortChange}
|
67
|
+
options={sortOptions}
|
68
|
+
value={sortValue}
|
69
|
+
/>
|
70
|
+
</If>
|
71
|
+
</Flex>
|
72
|
+
</FilterBackground>
|
73
|
+
)
|
74
|
+
}
|
55
75
|
|
56
76
|
export default FilterSingle
|
@@ -4,7 +4,7 @@ import React, { Node, useState } from 'react'
|
|
4
4
|
import { CircleIconButton, PbReactPopover } from '../../'
|
5
5
|
|
6
6
|
const FiltersPopoverProps = { children: Node }
|
7
|
-
const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
|
7
|
+
const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
|
8
8
|
const [hide, updateHide] = useState(true)
|
9
9
|
const toggle = () => updateHide(!hide)
|
10
10
|
|
@@ -22,14 +22,13 @@ const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
|
|
22
22
|
return (
|
23
23
|
<PbReactPopover
|
24
24
|
closeOnClick="outside"
|
25
|
+
minWidth={minWidth}
|
25
26
|
placement="bottom"
|
26
27
|
reference={filterButton}
|
27
28
|
shouldClosePopover={updateHide}
|
28
29
|
show={!hide}
|
29
30
|
>
|
30
|
-
<div className="pb-form">
|
31
|
-
{children}
|
32
|
-
</div>
|
31
|
+
<div className="pb-form">{children}</div>
|
33
32
|
</PbReactPopover>
|
34
33
|
)
|
35
34
|
}
|
@@ -27,7 +27,6 @@ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (
|
|
27
27
|
return (
|
28
28
|
<ListItem key={`option-${next.name}-${next.dir}`}>
|
29
29
|
<Button
|
30
|
-
icon={directionIcon(next.dir)}
|
31
30
|
onClick={partial(handleChange, next)}
|
32
31
|
text={` ${label}`}
|
33
32
|
variant="link"
|
@@ -56,15 +55,16 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
|
|
56
55
|
dark={dark}
|
57
56
|
id="sort-button"
|
58
57
|
onClick={toggle}
|
58
|
+
paddingRight="none"
|
59
59
|
variant="link"
|
60
60
|
>
|
61
61
|
{map(value, ({ dir, name }) => (
|
62
62
|
<span key={`current-sort-${name}-${dir}`}>
|
63
|
+
{` ${options[name]}`}
|
63
64
|
<Icon
|
64
65
|
dark={dark}
|
65
66
|
icon={directionIcon(dir)}
|
66
67
|
/>
|
67
|
-
{` ${options[name]}`}
|
68
68
|
</span>
|
69
69
|
))}
|
70
70
|
</Button>
|
@@ -4,22 +4,23 @@ import React from 'react'
|
|
4
4
|
import FilterSingle, { FilterSingleProps } from './FilterSingle'
|
5
5
|
import FilterDouble, { FilterDoubleProps } from './FilterDouble'
|
6
6
|
|
7
|
-
type FilterProps =
|
8
|
-
|
9
|
-
|
7
|
+
type FilterProps =
|
8
|
+
| FilterSingleProps
|
9
|
+
| (FilterDoubleProps & {
|
10
|
+
double?: boolean,
|
11
|
+
})
|
10
12
|
|
11
|
-
const Filter = ({
|
12
|
-
|
13
|
-
|
14
|
-
}
|
15
|
-
|
16
|
-
|
17
|
-
<
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
)
|
13
|
+
const Filter = ({ double = false, ...templateProps }: FilterProps) => {
|
14
|
+
return (
|
15
|
+
<Choose>
|
16
|
+
<When condition={double}>
|
17
|
+
<FilterDouble {...templateProps} />
|
18
|
+
</When>
|
19
|
+
<Otherwise>
|
20
|
+
<FilterSingle {...templateProps} />
|
21
|
+
</Otherwise>
|
22
|
+
</Choose>
|
23
|
+
)
|
24
|
+
}
|
24
25
|
|
25
26
|
export default Filter
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
min_width: "600px",
|
4
|
+
id: "25",
|
5
|
+
filters: [
|
6
|
+
{ name: "name", value: "John Wick" },
|
7
|
+
{ name: "city", value: "San Francisco"}
|
8
|
+
],
|
9
|
+
sort_menu: [
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
+
],
|
14
|
+
template: "default",
|
15
|
+
results: 1,
|
16
|
+
}) do
|
17
|
+
%>
|
18
|
+
<%
|
19
|
+
example_collection = [
|
20
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
21
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
22
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
23
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
24
|
+
OpenStruct.new(name: "California", value: 5),
|
25
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
26
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
27
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
28
|
+
OpenStruct.new(name: "Florida", value: 9),
|
29
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
30
|
+
]
|
31
|
+
%>
|
32
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
33
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
34
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
35
|
+
|
36
|
+
<%= form.actions do |action| %>
|
37
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
|
+
|
4
|
+
const FilterMinWidth = (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 Away' },
|
11
|
+
]
|
12
|
+
return (
|
13
|
+
<Filter
|
14
|
+
{...props}
|
15
|
+
double
|
16
|
+
filters={{
|
17
|
+
'Full Name': 'John Wick',
|
18
|
+
'City': 'San Francisco',
|
19
|
+
}}
|
20
|
+
minWidth="600px"
|
21
|
+
results={1}
|
22
|
+
sortOptions={{
|
23
|
+
popularity: 'Popularity',
|
24
|
+
// eslint-disable-next-line
|
25
|
+
manager_title: 'Manager\'s Title',
|
26
|
+
// eslint-disable-next-line
|
27
|
+
manager_name: 'Manager\'s Name',
|
28
|
+
}}
|
29
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
30
|
+
>
|
31
|
+
<TextInput
|
32
|
+
label="Full Name"
|
33
|
+
placeholder="Enter name"
|
34
|
+
/>
|
35
|
+
|
36
|
+
<Select
|
37
|
+
blankSelection="Select One..."
|
38
|
+
label="Territory"
|
39
|
+
name="location"
|
40
|
+
options={options}
|
41
|
+
/>
|
42
|
+
<Flex
|
43
|
+
spacing="between"
|
44
|
+
>
|
45
|
+
<Button
|
46
|
+
text="Apply"
|
47
|
+
/>
|
48
|
+
<Button
|
49
|
+
text="Clear"
|
50
|
+
variant="secondary"
|
51
|
+
/>
|
52
|
+
</Flex>
|
53
|
+
</Filter>
|
54
|
+
)
|
55
|
+
}
|
56
|
+
|
57
|
+
export default FilterMinWidth
|