playbook_ui 14.21.2.pre.alpha.PLAY18938263 → 14.21.2.pre.alpha.PLAY22358326
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_advanced_table/Components/VirtualizedTableView.tsx +36 -16
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +18 -5
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +37 -17
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +25 -3
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +91 -40
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +49 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +32 -18
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +21 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx +49 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx +69 -0
- data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +13 -0
- data/app/pb_kits/playbook/pb_filter/_filter.scss +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/dist/chunks/{_typeahead-CoOpeYom.js → _typeahead-CVIBi3oA.js} +2 -2
- data/dist/chunks/_weekday_stacked-BknM0ZnU.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +8 -4
- data/dist/chunks/_weekday_stacked-JnoR3mIy.js +0 -45
@@ -632,4 +632,23 @@ test("columnStyling.cellAlignment sets each <td> align attribute as expected", (
|
|
632
632
|
|
633
633
|
const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
|
634
634
|
expect(firstEnrollmentCell).toHaveAttribute("align", "left");
|
635
|
-
});
|
635
|
+
});
|
636
|
+
|
637
|
+
test("renders virtualized table rows and header", () => {
|
638
|
+
render(
|
639
|
+
<AdvancedTable
|
640
|
+
columnDefinitions={columnDefinitions}
|
641
|
+
data={{ testid: testId }}
|
642
|
+
tableData={MOCK_DATA_WITH_ID}
|
643
|
+
virtualizedRows
|
644
|
+
/>
|
645
|
+
)
|
646
|
+
|
647
|
+
const kit = screen.getByTestId(testId)
|
648
|
+
|
649
|
+
const virtualizedHeader = kit.querySelector('.virtualized-header-row-header')
|
650
|
+
expect(virtualizedHeader).toBeInTheDocument()
|
651
|
+
|
652
|
+
const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
|
653
|
+
expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
|
654
|
+
})
|
@@ -51,7 +51,7 @@
|
|
51
51
|
]
|
52
52
|
%>
|
53
53
|
|
54
|
-
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
54
|
+
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "beta_sort" }) do %>
|
55
55
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
56
56
|
<%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
|
57
57
|
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
CHANGED
@@ -34,7 +34,7 @@
|
|
34
34
|
subrow_headers = ["Quarter", "Month", "Day"]
|
35
35
|
%>
|
36
36
|
|
37
|
-
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
|
37
|
+
<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions, id: "test_table" }) do %>
|
38
38
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
|
39
39
|
<%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
|
40
40
|
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb
CHANGED
@@ -55,4 +55,4 @@
|
|
55
55
|
},
|
56
56
|
] %>
|
57
57
|
|
58
|
-
<%= pb_rails("advanced_table", props: { id: "
|
58
|
+
<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
The `virtualizedRows` boolean prop enables the rendering of a virtualized table using [Tanstack's Virtualizer Library](https://tanstack.com/virtual/v3/docs/api/virtualizer) with infinite scroll capabilities for large data sets.
|
2
|
+
|
3
|
+
**Note:** Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the [Pagination](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination) version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.
|
@@ -30,4 +30,4 @@
|
|
30
30
|
}
|
31
31
|
] %>
|
32
32
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "loading_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
|
@@ -1,5 +1,7 @@
|
|
1
|
-
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and
|
1
|
+
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
|
2
2
|
|
3
|
-
**NOTE:**
|
3
|
+
**NOTE:**
|
4
4
|
- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
|
5
|
-
- Row ids required:
|
5
|
+
- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
6
|
+
- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below.
|
7
|
+
- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx
CHANGED
@@ -47,14 +47,14 @@ const CustomActions = () => {
|
|
47
47
|
<CircleIconButton
|
48
48
|
icon="file-csv"
|
49
49
|
onClick={() =>
|
50
|
-
alert(rowIds.length === 0 ? "No Selection Made" :
|
50
|
+
alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be exported!')
|
51
51
|
}
|
52
52
|
variant="link"
|
53
53
|
/>
|
54
54
|
<CircleIconButton
|
55
55
|
icon="trash-alt"
|
56
56
|
onClick={() =>
|
57
|
-
alert(rowIds.length === 0 ? "No Selection Made" :
|
57
|
+
alert(rowIds.length === 0 ? "No Selection Made" : 'Row ids ' + rowIds.join(", ") + 'will be deleted!')
|
58
58
|
}
|
59
59
|
variant="link"
|
60
60
|
/>
|
@@ -88,10 +88,11 @@ actions = [
|
|
88
88
|
if (!selectedRowIds || selectedRowIds.length === 0) {
|
89
89
|
alert('No Selection Made');
|
90
90
|
} else {
|
91
|
+
const selectedRowsString = selectedRowIds.join(', ');
|
91
92
|
if (actionType === 'export') {
|
92
|
-
alert(
|
93
|
+
alert('Row ids ' + selectedRowsString + ' will be exported!');
|
93
94
|
} else if (actionType === 'delete') {
|
94
|
-
alert(
|
95
|
+
alert('Row ids ' + selectedRowsString + ' will be deleted!');
|
95
96
|
}
|
96
97
|
}
|
97
98
|
};
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
CHANGED
@@ -30,4 +30,4 @@
|
|
30
30
|
}
|
31
31
|
] %>
|
32
32
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
|
@@ -35,4 +35,5 @@ export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_t
|
|
35
35
|
export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
|
36
36
|
export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
|
37
37
|
export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
|
38
|
-
export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
|
38
|
+
export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
|
39
|
+
export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
|
@@ -266,6 +266,25 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
266
266
|
this.updateTableSelectedRowsAttribute();
|
267
267
|
});
|
268
268
|
}
|
269
|
+
this.addBorderRadiusOnLastVisibleRow()
|
270
|
+
}
|
271
|
+
|
272
|
+
addBorderRadiusOnLastVisibleRow() {
|
273
|
+
const parentElement = this.element.closest('.pb_advanced_table');
|
274
|
+
|
275
|
+
const table = document.getElementById(parentElement.id);
|
276
|
+
|
277
|
+
if (table) {
|
278
|
+
const visibleRows = table.querySelectorAll('tr.is-visible, tr:not(.toggle-content)');
|
279
|
+
|
280
|
+
visibleRows.forEach(row => row.classList.remove('last-visible-row'));
|
281
|
+
|
282
|
+
const lastVisibleRow = visibleRows[visibleRows.length - 1];
|
283
|
+
|
284
|
+
if (lastVisibleRow) {
|
285
|
+
lastVisibleRow.classList.add('last-visible-row');
|
286
|
+
}
|
287
|
+
}
|
269
288
|
}
|
270
289
|
|
271
290
|
|
@@ -367,6 +386,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
367
386
|
row.classList.toggle("bg-silver", !isVisible);
|
368
387
|
row.classList.toggle("bg-white", isVisible);
|
369
388
|
}
|
389
|
+
|
390
|
+
this.addBorderRadiusOnLastVisibleRow();
|
370
391
|
}
|
371
392
|
|
372
393
|
displayDownArrow() {
|
@@ -0,0 +1,49 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Collapsible from '../../pb_collapsible/_collapsible'
|
4
|
+
import Caption from '../../pb_caption/_caption'
|
5
|
+
import Body from '../../pb_body/_body'
|
6
|
+
|
7
|
+
type FilterSectionProps = {
|
8
|
+
children?: React.ReactChild[] | React.ReactChild,
|
9
|
+
collapsible?: boolean,
|
10
|
+
collapsed?: boolean,
|
11
|
+
headerText?: string,
|
12
|
+
}
|
13
|
+
const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
|
14
|
+
if (collapsible) {
|
15
|
+
return (
|
16
|
+
<Collapsible
|
17
|
+
collapsed={collapsed}
|
18
|
+
padding="none"
|
19
|
+
>
|
20
|
+
<Collapsible.Main
|
21
|
+
paddingX="sm"
|
22
|
+
paddingY="xs"
|
23
|
+
>
|
24
|
+
<Caption>{ headerText }</Caption>
|
25
|
+
</Collapsible.Main>
|
26
|
+
<Collapsible.Content
|
27
|
+
className="filter_section_collapsible"
|
28
|
+
paddingX="sm"
|
29
|
+
>
|
30
|
+
{ children }
|
31
|
+
</Collapsible.Content>
|
32
|
+
</Collapsible>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
return (
|
37
|
+
<Body
|
38
|
+
paddingTop="xs"
|
39
|
+
paddingX="sm"
|
40
|
+
>
|
41
|
+
<>
|
42
|
+
{headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
|
43
|
+
{ children }
|
44
|
+
</>
|
45
|
+
</Body>
|
46
|
+
)
|
47
|
+
}
|
48
|
+
|
49
|
+
export default FilterSection
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import { FilterDescription } from './CurrentFilters'
|
4
|
+
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
|
5
|
+
import ResultsCount from './ResultsCount'
|
6
|
+
|
7
|
+
import Flex from '../../pb_flex/_flex'
|
8
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
9
|
+
import Card from '../../pb_card/_card'
|
10
|
+
import Caption from '../../pb_caption/_caption'
|
11
|
+
|
12
|
+
export type FilterSidebarProps = {
|
13
|
+
children?: React.ReactChild[] | React.ReactChild,
|
14
|
+
filters?: FilterDescription,
|
15
|
+
results?: number,
|
16
|
+
} & FilterBackgroundProps
|
17
|
+
|
18
|
+
const FilterSidebar = ({
|
19
|
+
onCollapse,
|
20
|
+
onSortChange,
|
21
|
+
sortOptions,
|
22
|
+
sortValue,
|
23
|
+
filters,
|
24
|
+
results,
|
25
|
+
children,
|
26
|
+
dark,
|
27
|
+
isCollapsed,
|
28
|
+
maxHeight,
|
29
|
+
minWidth,
|
30
|
+
placement,
|
31
|
+
popoverProps,
|
32
|
+
...bgProps
|
33
|
+
}: FilterSidebarProps): React.ReactElement => (
|
34
|
+
<FilterBackground
|
35
|
+
dark={dark}
|
36
|
+
{...bgProps}
|
37
|
+
>
|
38
|
+
<Card.Body
|
39
|
+
paddingX="sm"
|
40
|
+
paddingY="xs"
|
41
|
+
>
|
42
|
+
<Flex
|
43
|
+
align="center"
|
44
|
+
justify="between"
|
45
|
+
orientation="row"
|
46
|
+
>
|
47
|
+
<ResultsCount
|
48
|
+
dark={dark}
|
49
|
+
results={results}
|
50
|
+
title
|
51
|
+
/>
|
52
|
+
<div onClick={onCollapse}>
|
53
|
+
<Caption
|
54
|
+
color="link"
|
55
|
+
cursor="pointer"
|
56
|
+
size="xs"
|
57
|
+
text={isCollapsed ? "Expand All" : "Collapse All"}
|
58
|
+
/>
|
59
|
+
</div>
|
60
|
+
</Flex>
|
61
|
+
</Card.Body>
|
62
|
+
<SectionSeparator dark={dark} />
|
63
|
+
<>
|
64
|
+
{ children }
|
65
|
+
</>
|
66
|
+
</FilterBackground>
|
67
|
+
)
|
68
|
+
|
69
|
+
export default FilterSidebar
|
@@ -1,18 +1,29 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import FilterSingle, { FilterSingleProps } from './FilterSingle'
|
3
3
|
import FilterDouble, { FilterDoubleProps } from './FilterDouble'
|
4
|
+
import FilterSidebar, { FilterSidebarProps } from './FilterSidebar'
|
5
|
+
import FilterSection from './FilterSection'
|
4
6
|
|
5
7
|
type FilterProps =
|
6
8
|
| FilterSingleProps
|
7
9
|
| (FilterDoubleProps & {
|
8
10
|
double?: boolean,
|
9
11
|
})
|
12
|
+
| (FilterSidebarProps & {
|
13
|
+
variant?: null | 'sidebar',
|
14
|
+
})
|
10
15
|
|
11
16
|
const Filter = ({
|
12
17
|
double = false,
|
18
|
+
variant,
|
13
19
|
...templateProps
|
14
20
|
}: FilterProps): React.ReactElement => {
|
15
21
|
const displayFilter = () => {
|
22
|
+
if (variant === 'sidebar') {
|
23
|
+
return (
|
24
|
+
<FilterSidebar {...templateProps} />
|
25
|
+
)
|
26
|
+
}
|
16
27
|
if (double === true) {
|
17
28
|
return (
|
18
29
|
<FilterDouble {...templateProps} />
|
@@ -30,4 +41,6 @@ const Filter = ({
|
|
30
41
|
)
|
31
42
|
}
|
32
43
|
|
44
|
+
Filter.Section = FilterSection
|
45
|
+
|
33
46
|
export default Filter
|
@@ -0,0 +1,224 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import Filter from '../../pb_filter/_filter'
|
4
|
+
import Select from '../../pb_select/_select'
|
5
|
+
import TextInput from '../../pb_text_input/_text_input'
|
6
|
+
import useCollapsible from '../../pb_collapsible/useCollapsible'
|
7
|
+
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
8
|
+
import Checkbox from '../../pb_checkbox/_checkbox'
|
9
|
+
import Flex from '../../pb_flex/_flex'
|
10
|
+
import Table from '../../pb_table/_table'
|
11
|
+
import Caption from '../../pb_caption/_caption'
|
12
|
+
import Icon from '../../pb_icon/_icon'
|
13
|
+
|
14
|
+
const people = [
|
15
|
+
{ name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
|
16
|
+
{ name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
|
17
|
+
{ name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
|
18
|
+
{ name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
|
19
|
+
{ name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
|
20
|
+
{ name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
|
21
|
+
{ name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
|
22
|
+
{ name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
|
23
|
+
{ name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
|
24
|
+
{ name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
|
25
|
+
{ name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
|
26
|
+
{ name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
|
27
|
+
{ name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
|
28
|
+
{ name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
|
29
|
+
{ name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
|
30
|
+
]
|
31
|
+
|
32
|
+
const FilterSidebar = (props) => {
|
33
|
+
const [name, setName] = useState('')
|
34
|
+
const [ territory, setTerritory ] = useState('')
|
35
|
+
const [ products, setProducts ] = useState({})
|
36
|
+
const handleUpdateName = ({ target }) => {
|
37
|
+
setName(target.value)
|
38
|
+
}
|
39
|
+
const handleUpdateTerritory = ({ target }) => {
|
40
|
+
setTerritory(target.value)
|
41
|
+
}
|
42
|
+
const handleCheckboxChange = ({ target }) => {
|
43
|
+
setProducts(prev => ({
|
44
|
+
...prev,
|
45
|
+
[target.name]: !prev[target.name],
|
46
|
+
}))
|
47
|
+
}
|
48
|
+
const [isCollapsed, setIsCollapsed] = useCollapsible(true)
|
49
|
+
const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
|
50
|
+
const options = [
|
51
|
+
{ value: 'USA' },
|
52
|
+
{ value: 'Canada' },
|
53
|
+
{ value: 'Brazil' },
|
54
|
+
{ value: 'Philippines' },
|
55
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
56
|
+
]
|
57
|
+
|
58
|
+
const filteredPeople = people.filter((person) => {
|
59
|
+
const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
|
60
|
+
|
61
|
+
const matchesTerritory = territory === '' ? true : person.territory === territory
|
62
|
+
|
63
|
+
const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
|
64
|
+
|
65
|
+
return matchesName && matchesTerritory && matchesProducts
|
66
|
+
})
|
67
|
+
|
68
|
+
return (
|
69
|
+
<>
|
70
|
+
<Flex>
|
71
|
+
<Filter
|
72
|
+
isCollapsed={isCollapsed}
|
73
|
+
marginRight="xs"
|
74
|
+
onCollapse={() => setIsCollapsed(!isCollapsed)}
|
75
|
+
results={filteredPeople.length}
|
76
|
+
sortOptions={{
|
77
|
+
popularity: 'Popularity',
|
78
|
+
// eslint-disable-next-line
|
79
|
+
manager_title: 'Manager\'s Title',
|
80
|
+
// eslint-disable-next-line
|
81
|
+
manager_name: 'Manager\'s Name',
|
82
|
+
}}
|
83
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
84
|
+
variant="sidebar"
|
85
|
+
width="xs"
|
86
|
+
{...props}
|
87
|
+
>
|
88
|
+
<Filter.Section
|
89
|
+
collapsed={isCollapsed}
|
90
|
+
headerText="Full Name"
|
91
|
+
>
|
92
|
+
<TextInput
|
93
|
+
onChange={handleUpdateName}
|
94
|
+
placeholder="Enter name"
|
95
|
+
value={name}
|
96
|
+
{...props}
|
97
|
+
/>
|
98
|
+
</Filter.Section>
|
99
|
+
<SectionSeparator />
|
100
|
+
<Filter.Section
|
101
|
+
collapsed={isCollapsed}
|
102
|
+
collapsible
|
103
|
+
headerText="Territory"
|
104
|
+
>
|
105
|
+
<Select
|
106
|
+
blankSelection="Select One..."
|
107
|
+
name="location"
|
108
|
+
onChange={handleUpdateTerritory}
|
109
|
+
options={options}
|
110
|
+
{...props}
|
111
|
+
/>
|
112
|
+
</Filter.Section>
|
113
|
+
<SectionSeparator />
|
114
|
+
<Filter.Section
|
115
|
+
collapsed={isCollapsed}
|
116
|
+
collapsible
|
117
|
+
headerText="Products"
|
118
|
+
>
|
119
|
+
<div>
|
120
|
+
<Checkbox
|
121
|
+
marginBottom="sm"
|
122
|
+
name="Doors"
|
123
|
+
onChange={handleCheckboxChange}
|
124
|
+
text="Doors"
|
125
|
+
/>
|
126
|
+
</div>
|
127
|
+
<div>
|
128
|
+
<Checkbox
|
129
|
+
marginBottom="sm"
|
130
|
+
name="Windows"
|
131
|
+
onChange={handleCheckboxChange}
|
132
|
+
text="Windows"
|
133
|
+
/>
|
134
|
+
</div>
|
135
|
+
<div>
|
136
|
+
<Checkbox
|
137
|
+
marginBottom="sm"
|
138
|
+
name="Siding"
|
139
|
+
onChange={handleCheckboxChange}
|
140
|
+
text="Siding"
|
141
|
+
/>
|
142
|
+
</div>
|
143
|
+
{!isProductsCollapsed &&
|
144
|
+
<>
|
145
|
+
<div>
|
146
|
+
<Checkbox
|
147
|
+
checked={products["Roofing"]}
|
148
|
+
marginBottom="sm"
|
149
|
+
name="Roofing"
|
150
|
+
onChange={handleCheckboxChange}
|
151
|
+
text="Roofing"
|
152
|
+
/>
|
153
|
+
</div>
|
154
|
+
<div>
|
155
|
+
<Checkbox
|
156
|
+
checked={products["Gutters"]}
|
157
|
+
marginBottom="sm"
|
158
|
+
name="Gutters"
|
159
|
+
onChange={handleCheckboxChange}
|
160
|
+
text="Gutters"
|
161
|
+
/>
|
162
|
+
</div>
|
163
|
+
<div>
|
164
|
+
<Checkbox
|
165
|
+
checked={products["Solar"]}
|
166
|
+
marginBottom="sm"
|
167
|
+
name="Solar"
|
168
|
+
onChange={handleCheckboxChange}
|
169
|
+
text="Solar"
|
170
|
+
/>
|
171
|
+
</div>
|
172
|
+
<div>
|
173
|
+
<Checkbox
|
174
|
+
checked={products["Insulation"]}
|
175
|
+
marginBottom="sm"
|
176
|
+
name="Insulation"
|
177
|
+
onChange={handleCheckboxChange}
|
178
|
+
text="Insulation"
|
179
|
+
/>
|
180
|
+
</div>
|
181
|
+
</>
|
182
|
+
}
|
183
|
+
<div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
|
184
|
+
<Flex
|
185
|
+
cursor="pointer"
|
186
|
+
marginBottom="sm"
|
187
|
+
>
|
188
|
+
<Caption
|
189
|
+
color="link"
|
190
|
+
marginRight="xxs"
|
191
|
+
size="xs"
|
192
|
+
text={isProductsCollapsed ? "Show More" : "Show Less"}
|
193
|
+
/>
|
194
|
+
<Icon
|
195
|
+
icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
|
196
|
+
/>
|
197
|
+
</Flex>
|
198
|
+
</div>
|
199
|
+
</Filter.Section>
|
200
|
+
</Filter>
|
201
|
+
<Table
|
202
|
+
size="sm"
|
203
|
+
>
|
204
|
+
<thead>
|
205
|
+
<tr>
|
206
|
+
<th>{'Name'}</th>
|
207
|
+
<th>{'Territory'}</th>
|
208
|
+
<th>{'Products'}</th>
|
209
|
+
</tr>
|
210
|
+
</thead>
|
211
|
+
<tbody>
|
212
|
+
{filteredPeople.map((person) => (<tr key={person.name}>
|
213
|
+
<td>{ person.name }</td>
|
214
|
+
<td>{ person.territory }</td>
|
215
|
+
<td>{ person.products.join(", ") }</td>
|
216
|
+
</tr>))}
|
217
|
+
</tbody>
|
218
|
+
</Table>
|
219
|
+
</Flex>
|
220
|
+
</>
|
221
|
+
)
|
222
|
+
}
|
223
|
+
|
224
|
+
export default FilterSidebar
|
@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
|
8
8
|
export { default as FilterMaxHeight } from './_filter_max_height.jsx'
|
9
9
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
10
10
|
export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
|
11
|
+
export { default as FilterSidebar } from './_filter_sidebar.jsx'
|