/
groupable.toolbar.tsx
99 lines (90 loc) · 3.89 KB
/
groupable.toolbar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { useCallback, useState } from 'react';
import { Button, Divider, Form, Icon, Label, Menu } from 'semantic-ui-react';
import { FormSelect } from 'semantic-ui-react';
import { filter, find, get, head, map } from 'lodash-es';
import { RELATABLE_ICONS } from '../../relatable.types';
import { useRelatableStateContext, useRelatableToolbarContext } from '../../states';
import arrayHasItems from '../../utils/array-has-items';
import { getToolbarStateClass } from '../../utils/relatable-state-classes';
import { IWithGroupingInstance, withGrouping } from '../../add-ons';
import { getRelatableAction } from '../../utils/relatable-actions';
import { columnHasAction } from '../../utils/column-actions';
import { ToolbarPopup } from './toolbar-popup';
import RelatableIcon from '../relatable-icon';
export default function GroupableToolbar() {
const { allColumns: columns, state: { groupBy }, onCustomGroupingChange } = useRelatableStateContext<any, IWithGroupingInstance>();
const [selectedToolbarAction, setToolbar, clearToolbar] = useRelatableToolbarContext();
const isGrouped = arrayHasItems(groupBy);
return <ToolbarPopup
name={withGrouping.name}
content={<GroupingPopup
columns={columns}
groupBy={groupBy}
onClose={clearToolbar}
selectedToolbarAction={selectedToolbarAction}
onCustomGroupingChange={onCustomGroupingChange}/>}
selectedToolbarAction={selectedToolbarAction}
onClose={clearToolbar}>
<Menu.Item name="group" onClick={() => setToolbar(withGrouping.name)}>
<RelatableIcon name={RELATABLE_ICONS.GROUP_BY}/>
Groups
{isGrouped && <Label className={isGrouped ? getToolbarStateClass('isGrouped') : ''}>{groupBy.length}</Label>}
</Menu.Item>
</ToolbarPopup>;
}
function GroupingPopup({ columns, groupBy, onClose, selectedToolbarAction, onCustomGroupingChange }: any) {
return <div className="relatable__toolbar-popup relatable__toolbar-grouping-popup">
{arrayHasItems(groupBy) && <>
{map(groupBy, (id) => {
const column = find(columns, (column) => column.id === id);
return <Label key={id} className="relatable__toolbar-value">
{column.render('Header')}
<Icon name="close" onClick={() => onCustomGroupingChange(column, false)}/>
</Label>;
})}
<Divider/>
</>}
<GroupingForm
columns={columns}
selectedToolbarAction={selectedToolbarAction}
onCustomGroupingChange={onCustomGroupingChange}
onClose={onClose}/>
</div>;
}
function GroupingForm({ columns, onCustomGroupingChange, selectedToolbarAction, onClose }: any) {
const { availableGlobalActions } = useRelatableStateContext();
const relatableAction = getRelatableAction(availableGlobalActions, selectedToolbarAction.name);
const columnsToUse = filter(columns, (column) => relatableAction && columnHasAction(column, relatableAction));
const firstId = get(head(columnsToUse), 'id', undefined);
const [selectedColumnId, setSelectedColumnId] = useState<any>(firstId);
const selectedColumn = find(columnsToUse, ({ id }) => id === selectedColumnId);
const columnOptions = map(filter(columnsToUse, 'canGroupBy'), (column) => ({
key: column.id,
value: column.id,
text: column.Header,
}));
const onSubmit = useCallback(() => {
onClose();
onCustomGroupingChange(selectedColumn, true);
}, [onCustomGroupingChange, selectedColumn]);
return <Form onSubmit={onSubmit} className="relatable__toolbar-grouping-form">
<Form.Group>
<Form.Field>
<FormSelect
options={columnOptions}
value={selectedColumnId}
search
searchInput={{ autoFocus: true }}
onChange={(_, { value }) => setSelectedColumnId(value)}/>
</Form.Field>
<Button
basic
icon
color="black"
className="relatable__toolbar-popup-button"
title="Add">
<Icon name="check"/>
</Button>
</Form.Group>
</Form>;
}