@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
45 lines (44 loc) • 3.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { ValueSelector } from '../ValueSelector';
import { ColumnGroupTag } from '../ColumnGroupTag';
import { cn } from '../../../lib/utils';
import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../wizardColumnListStyles';
export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
const { columnFilterText, availableColumns, selected, onChange, singleSelect, compactColumnList, compact, showFilterInput, filterPlaceholder, compactHeaderClassName, compactFilterClassName, hideShowSelectedOnly, optionClassName, className, } = props;
const useCompactColumnList = compactColumnList ?? false;
const effectiveCompact = useCompactColumnList || compact;
const effectiveShowFilterInput = useCompactColumnList || showFilterInput;
const effectiveFilterPlaceholder = filterPlaceholder ?? (useCompactColumnList ? 'Search Columns...' : undefined);
const effectiveCompactHeaderClassName = compactHeaderClassName ??
(useCompactColumnList ? WIZARD_COLUMN_LIST_HEADER_CLASS : undefined);
const effectiveCompactFilterClassName = compactFilterClassName ??
(useCompactColumnList ? WIZARD_COLUMN_LIST_SEARCH_CLASS : undefined);
const effectiveOptionClassName = optionClassName ??
(useCompactColumnList
? singleSelect
? WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT
: WIZARD_COLUMN_LIST_OPTION_CLASS
: undefined);
const effectiveHideShowSelectedOnly = hideShowSelectedOnly ?? (useCompactColumnList ? singleSelect : undefined);
const filterFn = useMemo(() => {
if (!effectiveShowFilterInput && !columnFilterText) {
return null;
}
return (column, searchValue) => {
const text = effectiveShowFilterInput ? searchValue : columnFilterText ?? '';
if (!text) {
return true;
}
return column.friendlyName.toLowerCase().includes(text.toLowerCase());
};
}, [columnFilterText, effectiveShowFilterInput]);
return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, compact: effectiveCompact, showFilterInput: effectiveShowFilterInput, filterPlaceholder: effectiveFilterPlaceholder, compactHeaderClassName: effectiveCompactHeaderClassName, compactFilterClassName: effectiveCompactFilterClassName, hideShowSelectedOnly: effectiveHideShowSelectedOnly, optionClassName: effectiveOptionClassName, optionLayout: useCompactColumnList ? 'label-beside-checkbox' : undefined, toggleSelectionOnRowClick: useCompactColumnList ? true : undefined, singleSelect: singleSelect, allowReorder: allowReorder, className: cn(useCompactColumnList && 'twa:h-full', className), onChange: (colIds) => {
if (singleSelect) {
onChange(colIds.length ? [colIds.pop()] : []);
}
else {
onChange(colIds);
}
}, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, toListLabel: (c) => (_jsxs("div", { className: "twa:flex twa:flex-row twa:items-center", children: [c.friendlyName, _jsx(ColumnGroupTag, { column: c })] })) }));
};