flipper-plugin
Version:
Flipper Desktop plugin SDK and components
165 lines • 7.76 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableHead = void 0;
const widthUtils_1 = require("../../utils/widthUtils");
const react_1 = require("react");
const Interactive_1 = require("../Interactive");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_2 = __importDefault(require("react"));
const theme_1 = require("../theme");
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const Layout_1 = require("../Layout");
const ColumnFilter_1 = require("./ColumnFilter");
const toFirstUpper_1 = require("../../utils/toFirstUpper");
const { Text } = antd_1.Typography;
function SortIcons({ direction, onSort, }) {
return (react_2.default.createElement(SortIconsContainer, { direction: direction },
react_2.default.createElement(icons_1.CaretUpFilled, { onClick: (e) => {
e.stopPropagation();
onSort(direction === 'asc' ? undefined : 'asc');
}, className: `ant-table-column-sorter-up ${direction === 'asc' ? 'active' : ''}` }),
react_2.default.createElement(icons_1.CaretDownFilled, { onClick: (e) => {
e.stopPropagation();
onSort(direction === 'desc' ? undefined : 'desc');
}, className: `ant-table-column-sorter-down ${direction === 'desc' ? 'active' : ''}` })));
}
const SortIconsContainer = styled_1.default.span(({ direction }) => ({
visibility: direction === undefined ? 'hidden' : undefined,
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'center',
position: 'relative',
left: 4,
top: -3,
cursor: 'pointer',
color: theme_1.theme.disabledColor,
'.ant-table-column-sorter-up:hover, .ant-table-column-sorter-down:hover': {
color: theme_1.theme.textColorActive,
},
}));
const TableHeaderColumnInteractive = (0, styled_1.default)(Interactive_1.Interactive)({
overflow: 'hidden',
whiteSpace: 'nowrap',
width: '100%',
borderRight: `1px solid ${theme_1.theme.dividerColor}`,
paddingRight: 4,
});
TableHeaderColumnInteractive.displayName =
'TableHead:TableHeaderColumnInteractive';
const TableHeadColumnContainer = styled_1.default.div((props) => ({
flexShrink: props.width === undefined ? 1 : 0,
flexGrow: props.width === undefined ? 1 : 0,
overflow: 'hidden',
paddingLeft: theme_1.theme.space.small,
whiteSpace: 'nowrap',
wordWrap: 'normal',
width: props.width,
minWidth: 25,
[`:hover ${SortIconsContainer}`]: {
visibility: 'visible',
},
[`&:hover ${ColumnFilter_1.FilterButton}`]: {
visibility: 'visible',
},
}));
TableHeadColumnContainer.displayName = 'TableHead:TableHeadColumnContainer';
const TableHeadContainer = styled_1.default.div(({ scrollbarSize }) => ({
position: 'relative',
display: 'flex',
flexDirection: 'row',
borderLeft: `4px solid ${theme_1.theme.backgroundWash}`, // space for selection, see TableRow
borderBottom: `1px solid ${theme_1.theme.dividerColor}`,
backgroundColor: theme_1.theme.backgroundWash,
userSelect: 'none',
whiteSpace: 'nowrap',
// hardcoded value to correct for the scrollbar in the main container.
// ideally we should measure this instead.
paddingRight: scrollbarSize,
overflow: 'hidden',
width: '100%',
flexShrink: 0,
}));
TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
const RIGHT_RESIZABLE = { right: true };
function TableHeadColumn({ column, isResizable, sorted, dispatch, isFilterable, }) {
const ref = (0, react_1.useRef)(null);
const onResize = (newWidth) => {
if (!isResizable) {
return;
}
let normalizedWidth = newWidth;
// normalise number to a percentage if we were originally passed a percentage
if ((0, widthUtils_1.isPercentage)(column.width) && ref.current) {
const { parentElement } = ref.current;
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const parentWidth = parentElement.clientWidth;
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const { childNodes } = parentElement;
const lastElem = childNodes[childNodes.length - 1];
const right = lastElem instanceof HTMLElement
? lastElem.offsetLeft + lastElem.clientWidth + 1
: 0;
if (right < parentWidth) {
normalizedWidth = (0, widthUtils_1.calculatePercentage)(parentWidth, newWidth);
}
}
dispatch({
type: 'resizeColumn',
column: column.key,
width: normalizedWidth,
});
};
let divProps = {};
if (column.sortable !== false) {
divProps = {
onClick: (e) => {
e.stopPropagation();
const newDirection = sorted === undefined ? 'asc' : sorted === 'asc' ? 'desc' : undefined;
dispatch({
type: 'sortColumn',
column: column.key,
direction: newDirection,
});
},
role: 'button',
tabIndex: 0,
};
}
let children = (react_2.default.createElement(Layout_1.Layout.Right, { center: true },
react_2.default.createElement("div", { ...divProps },
react_2.default.createElement(Text, { type: "secondary", style: column.filters?.filter(({ enabled }) => enabled).length
? { color: theme_1.theme.primaryColor, fontWeight: 'bold' }
: {} },
column.title === undefined ? ((0, toFirstUpper_1.toFirstUpper)(column.key)) : column.title === '' ? (react_2.default.createElement(react_2.default.Fragment, null, "\u00A0")) : (column.title),
column.sortable !== false ? (react_2.default.createElement(SortIcons, { direction: sorted, onSort: (dir) => dispatch({
type: 'sortColumn',
column: column.key,
direction: dir,
}) })) : null)),
isFilterable ? react_2.default.createElement(ColumnFilter_1.FilterIcon, { column: column, dispatch: dispatch }) : null));
if (isResizable) {
children = (react_2.default.createElement(TableHeaderColumnInteractive, { grow: true, resizable: RIGHT_RESIZABLE, onResize: onResize, minWidth: 20 }, children));
}
return (react_2.default.createElement(TableHeadColumnContainer, { width: column.width, ref: ref }, children));
}
exports.TableHead = (0, react_1.memo)(function TableHead({ visibleColumns, dispatch, sorting, scrollbarSize, isFilterable = true, }) {
return (react_2.default.createElement(TableHeadContainer, { scrollbarSize: scrollbarSize }, visibleColumns.map((column, i) => (react_2.default.createElement(TableHeadColumn, { key: column.key, column: column, isResizable: i < visibleColumns.length - 1, dispatch: dispatch,
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
sorted: sorting?.key === column.key ? sorting.direction : undefined, isFilterable: isFilterable })))));
});
//# sourceMappingURL=TableHead.js.map