baseui
Version:
A React Component library implementing the Base design language
212 lines (208 loc) • 8.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CategoricalFilter = CategoricalFilter;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _button = require("../button");
var _buttonGroup = require("../button-group");
var _checkbox = require("../checkbox");
var _search = _interopRequireDefault(require("../icon/search"));
var _input = require("../input");
var _styles = require("../styles");
var _typography = require("../typography");
var _column = _interopRequireDefault(require("./column"));
var _constants = require("./constants");
var _locale = require("../locale");
var _filterShell = _interopRequireDefault(require("./filter-shell"));
var _textSearch = require("./text-search");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) 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.
*/
function InputBefore() {
const [css, theme] = (0, _styles.useStyletron)();
return /*#__PURE__*/React.createElement("div", {
className: css({
display: 'flex',
alignItems: 'center',
paddingLeft: theme.sizing.scale500
})
}, /*#__PURE__*/React.createElement(_search.default, {
size: "18px"
}));
}
function FilterQuickControls(props) {
const locale = React.useContext(_locale.LocaleContext);
return /*#__PURE__*/React.createElement(_buttonGroup.ButtonGroup, {
size: _button.SIZE.mini,
kind: _button.KIND.tertiary
}, /*#__PURE__*/React.createElement(_button.Button, {
type: "button",
onClick: props.onSelectAll
}, locale.datatable.categoricalFilterSelectAll), /*#__PURE__*/React.createElement(_button.Button, {
type: "button",
onClick: props.onClearSelection
}, locale.datatable.categoricalFilterSelectClear));
}
const StyledHighlightLabel = (0, _styles.withStyle)(_checkbox.StyledLabel, props => {
const style = {
whiteSpace: 'pre',
color: props.$isActive ? props.$theme.colors.contentPrimary : props.$theme.colors.contentSecondary
};
if (!props.$isFirst) {
// @ts-ignore
style.paddingLeft = null;
}
return style;
});
// @ts-ignore
StyledHighlightLabel.displayName = "StyledHighlightLabel";
function HighlightCheckboxLabel(props) {
const {
children,
...restProps
} = props;
if (!props.query) {
return /*#__PURE__*/React.createElement(_checkbox.StyledLabel, restProps, children);
}
return (0, _textSearch.splitByQuery)(children, props.query).map((el, i) => {
if ((0, _textSearch.matchesQuery)(el, props.query)) {
return /*#__PURE__*/React.createElement(StyledHighlightLabel, _extends({}, restProps, {
key: i,
$isFirst: !i,
$isActive: true
}), el);
}
return /*#__PURE__*/React.createElement(StyledHighlightLabel, _extends({}, restProps, {
key: i,
$isFirst: !i
}), el);
});
}
function CategoricalFilter(props) {
const [css, theme] = (0, _styles.useStyletron)();
const locale = React.useContext(_locale.LocaleContext);
const [selection, setSelection] = React.useState(props.filterParams ? props.filterParams.selection : new Set());
const [exclude, setExclude] = React.useState(props.filterParams ? props.filterParams.exclude : false);
const [query, setQuery] = React.useState('');
const categories = React.useMemo(() => {
return props.data.reduce((set, category) => set.add(category), new Set());
}, [props.data]);
const checkboxStyles = css({
marginBottom: theme.sizing.scale200
});
const showQuery = Boolean(categories.size >= 10);
const filteredCategories = Array.from(categories, c => c).filter(c => (0, _textSearch.matchesQuery)(c, query));
return /*#__PURE__*/React.createElement(_filterShell.default, {
exclude: exclude,
onExcludeChange: () => setExclude(!exclude),
onApply: () => {
props.setFilter({
description: Array.from(selection).join(', '),
exclude,
selection
});
props.close();
}
}, showQuery && /*#__PURE__*/React.createElement(_input.Input, {
"aria-label": locale.datatable.categoricalFilterSearchLabel,
size: _input.SIZE.compact,
overrides: {
Before: InputBefore
},
value: query,
onChange: event => setQuery(event.target.value),
clearable: true
}), /*#__PURE__*/React.createElement("div", {
style: {
// @ts-ignore
marginTop: showQuery ? theme.sizing.scale600 : null
}
}, /*#__PURE__*/React.createElement(FilterQuickControls, {
onSelectAll: () => {
filteredCategories.forEach(c => selection.add(c));
setSelection(new Set(selection));
},
onClearSelection: () => {
setSelection(new Set());
}
})), /*#__PURE__*/React.createElement("div", {
className: css({
maxHeight: '256px',
overflowY: 'auto',
marginTop: theme.sizing.scale600,
position: 'relative'
})
}, !filteredCategories.length && /*#__PURE__*/React.createElement(_typography.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
className: checkboxStyles,
key: i
}, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
checked: selection.has(category),
onChange: () => {
if (selection.has(category)) {
selection.delete(category);
} else {
selection.add(category);
}
setSelection(new Set(selection));
},
overrides: {
// @ts-ignore
Label: {
component: HighlightCheckboxLabel,
props: {
query
}
}
}
}, category)))));
}
// @ts-ignore
function CategoricalCell(props) {
const [css] = (0, _styles.useStyletron)();
return /*#__PURE__*/React.createElement("div", {
className: css({
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical',
overflow: 'hidden'
})
}, props.textQuery ? /*#__PURE__*/React.createElement(_textSearch.HighlightCellText, {
text: props.value,
query: props.textQuery
}) : props.value);
}
function CategoricalColumn(options) {
return (0, _column.default)({
kind: _constants.COLUMNS.CATEGORICAL,
buildFilter: function (params) {
return function (data) {
const included = params.selection.has(data);
return params.exclude ? !included : included;
};
},
cellBlockAlign: options.cellBlockAlign,
fillWidth: options.fillWidth,
filterable: options.filterable === undefined ? true : options.filterable,
mapDataToValue: options.mapDataToValue,
maxWidth: options.maxWidth,
minWidth: options.minWidth,
renderCell: CategoricalCell,
renderFilter: CategoricalFilter,
sortable: options.sortable === undefined ? true : options.sortable,
sortFn: function (a, b) {
return a.localeCompare(b);
},
textQueryFilter: function (textQuery, data) {
return data.toLowerCase().includes(textQuery.toLowerCase());
},
title: options.title
});
}
var _default = exports.default = CategoricalColumn;