in uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts [21:126]
export function useColumnsConfiguration(props: UseColumnsConfigurationProps<any, any, any>) {
const { initialColumnsConfig, defaultConfig, columns } = props;
const [searchValue, setSearchValue] = useState<string>();
const isDndAllowed = !searchValue;
const [columnsConfig, setColumnsConfig] = useState<ColumnsConfig>(() => initialColumnsConfig || defaultConfig);
const columnsSorted: GroupedDataColumnProps[] = useMemo(() => sortColumnsAndAddGroupKey({ columns, prevConfig: columnsConfig }), [columns, columnsConfig]);
const toggleVisibility = useCallback(
(columnKey: string) => setColumnsConfig((prevConfig) => toggleSingleColumnVisibility({ prevConfig, columnsSorted, columnKey })),
[columnsSorted],
);
const togglePin = useCallback(
(columnKey: string, fix: TColumnPinPosition) => setColumnsConfig((prevConfig) => toggleSingleColumnPin({ prevConfig, columnsSorted, columnKey, fix })),
[columnsSorted],
);
const reset = useCallback(() => {
setColumnsConfig(defaultConfig);
setSearchValue('');
}, [defaultConfig]);
const checkAll = useCallback(
() => setColumnsConfig((prevConfig) => toggleAllColumnsVisibility({ prevConfig, columns: columnsSorted, value: true })),
[columnsSorted],
);
const uncheckAll = useCallback(
() => setColumnsConfig((prevConfig) => toggleAllColumnsVisibility({ prevConfig, columns: columnsSorted, value: false })),
[columnsSorted],
);
const sortedColumnsExtended = useMemo(
() =>
columnsSorted.map((column: DataColumnProps, index): ColumnsConfigurationRowProps => {
const columnConfig = columnsConfig[column.key];
const nextColumn = columnsSorted[index + 1];
const prevColumn = columnsSorted[index - 1];
const prevColumnConfig = columnsConfig[prevColumn?.key];
const nextColumnConfig = columnsConfig[nextColumn?.key];
const handleDrop = (params: DropParams<DndDataType, DndDataType>) => {
const { srcData, position } = params;
// NOTE: srcData - is the column which we are dropping.
setColumnsConfig((prevConfig) => {
const columnNew = moveColumnRelativeToAnotherColumn({
columnConfig: srcData.columnConfig,
targetColumn: columnConfig,
targetNextColumn: nextColumnConfig,
targetPrevColumn: prevColumnConfig,
position,
});
return {
...prevConfig,
[srcData.column.key]: columnNew,
};
});
};
const isPinnedAlways = isColumnLocked(column);
const fix = columnConfig.fix || (isPinnedAlways ? 'left' : undefined);
return {
...column,
columnConfig,
isDndAllowed: isDndAllowed && !isPinnedAlways,
isPinnedAlways,
fix,
togglePin: (_fix: TColumnPinPosition) => togglePin(column.key, _fix),
toggleVisibility: () => toggleVisibility(column.key),
onCanAcceptDrop: (props) => canAcceptDrop(props, nextColumn, prevColumn),
onDrop: handleDrop,
};
}),
[
columnsSorted, columnsConfig, isDndAllowed, togglePin, toggleVisibility,
],
);
const groupedColumns = useMemo(
() =>
groupAndFilterSortedColumns({
sortedColumns: sortedColumnsExtended,
searchValue,
getSearchFields: (column) => props.getSearchFields ? props.getSearchFields(column) : [column.caption as string],
}),
[sortedColumnsExtended, searchValue, props.getSearchFields],
);
const hasAnySelectedColumns = useMemo(() => !!columnsSorted.filter((c) => {
if (c.groupKey !== 'hidden') {
return !isColumnAlwaysHiddenInTheConfigurationModal(c);
}
return false;
}).length, [columnsSorted]);
return {
// props
groupedColumns,
searchValue,
columnsConfig,
hasAnySelectedColumns,
// methods
reset,
checkAll,
uncheckAll,
setSearchValue,
};
}