-
Notifications
You must be signed in to change notification settings - Fork 833
/
column-boolean.js
123 lines (109 loc) · 3.24 KB
/
column-boolean.js
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/*
Copyright (c) 2018-2020 Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @flow
import * as React from 'react';
import {useStyletron} from '../styles/index.js';
import {CategoricalFilter} from './column-categorical.js';
import Column from './column.js';
import {COLUMNS} from './constants.js';
import type {ColumnT, SharedColumnOptionsT} from './types.js';
import {LocaleContext} from '../locale/index.js';
type OptionsT = {|
...SharedColumnOptionsT<boolean>,
filterable?: boolean,
|};
type FilterParametersT = {|
selection: Set<boolean>,
description: string,
exclude: boolean,
|};
type BooleanColumnT = ColumnT<boolean, FilterParametersT>;
function mapSelection<X, Y>(selection: Set<X>, transform: X => Y): Set<Y> {
const coercedSelection = new Set<Y>();
selection.forEach(item => coercedSelection.add(transform(item)));
return coercedSelection;
}
function BooleanFilter(props) {
const locale = React.useContext(LocaleContext);
let selectionString = new Set();
if (props.filterParams && props.filterParams.selection) {
selectionString = mapSelection(props.filterParams.selection, i =>
i
? locale.datatable.booleanFilterTrue
: locale.datatable.booleanFilterFalse,
);
}
return (
<CategoricalFilter
close={props.close}
data={[
locale.datatable.booleanFilterTrue,
locale.datatable.booleanFilterFalse,
]}
filterParams={
props.filterParams
? {
selection: selectionString,
description: props.filterParams.description,
exclude: props.filterParams.exclude,
}
: undefined
}
setFilter={params => {
props.setFilter({
selection: mapSelection(
params.selection,
i => i === locale.datatable.booleanFilterTrue,
),
exclude: params.exclude,
description: params.description,
});
}}
/>
);
}
function BooleanCell(props) {
const [css, theme] = useStyletron();
const locale = React.useContext(LocaleContext);
return (
<div
className={css({
textAlign: props.value ? 'right' : 'left',
minWidth: theme.sizing.scale1400,
width: '100%',
})}
>
{props.value
? locale.datatable.booleanColumnTrueShort
: locale.datatable.booleanColumnFalseShort}
</div>
);
}
function BooleanColumn(options: OptionsT): BooleanColumnT {
return Column({
kind: COLUMNS.BOOLEAN,
buildFilter: function(params) {
return function(data) {
const included = params.selection.has(data);
return params.exclude ? !included : included;
};
},
cellBlockAlign: options.cellBlockAlign,
filterable: options.filterable === undefined ? true : options.filterable,
mapDataToValue: options.mapDataToValue,
maxWidth: options.maxWidth,
minWidth: options.minWidth,
renderCell: BooleanCell,
renderFilter: BooleanFilter,
sortable: options.sortable === undefined ? true : options.sortable,
sortFn: function(a, b) {
if (a === b) return 0;
return a ? -1 : 1;
},
title: options.title,
});
}
export default BooleanColumn;