@vlsergey/react-bootstrap-pagetable
Version:
Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.
39 lines (38 loc) • 2.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/** @jsx jsx */
var react_1 = require("@emotion/react");
var react_2 = tslib_1.__importStar(require("react"));
var ControlledContext_1 = require("../controlled/ControlledContext");
var DefaultColumnHeaderCell_1 = tslib_1.__importDefault(require("../controlled/DefaultColumnHeaderCell"));
function SortableHeaderCell(_a) {
var field = _a.field;
var _b = ControlledContext_1.useControlledContext(), fetchArgs = _b.fetchArgs, onFetchArgsChange = _b.onFetchArgsChange;
var handleClick = react_2.useCallback(function () {
var oldDirection = ((fetchArgs.sort || [])
.find(function (sortBy) { return sortBy.field === field.key; }) || { direction: undefined })
.direction;
var newDirection = oldDirection === 'ASC' ? 'DESC' : 'ASC';
onFetchArgsChange(tslib_1.__assign(tslib_1.__assign({}, fetchArgs), { sort: [{ field: field.key, direction: newDirection }] }));
}, [fetchArgs, field.key, onFetchArgsChange]);
if (!field.sortable) {
return react_1.jsx(DefaultColumnHeaderCell_1.default, { field: field });
}
var fieldSort = (fetchArgs.sort || [])
.find(function (sortBy) { return sortBy.field === field.key; });
var iconClassName = 'fas fa-sort';
if (fieldSort !== undefined) {
iconClassName = fieldSort.direction === 'DESC'
? 'fas fa-sort-up'
: 'fas fa-sort-down';
}
var headerCellContent = field.headerCellContent;
return react_1.jsx("th", tslib_1.__assign({}, field.headerCellProps, { css: react_1.css("\n cursor : pointer;\n &:hover .fas {\n color: unset;\n }\n "), onClick: handleClick }),
react_1.jsx("div", { css: react_1.css("\n display: flex;\n justify-content: space-between;\n ") },
react_1.jsx("div", null, headerCellContent
? react_2.default.createElement(headerCellContent, { field: field })
: field.title),
react_1.jsx("i", { className: iconClassName, css: react_1.css("\n color: lightgray;\n line-height: unset;\n margin-left: 0.25em;\n ") })));
}
exports.default = react_2.default.memo(SortableHeaderCell);