@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
38 lines (37 loc) • 2.38 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ValueSelector } from '../ValueSelector';
import { useAdaptable } from '../../AdaptableContext';
import { useMemo, useCallback } from 'react';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Layout/Wizard/sections/layoutWizardColumns';
export const ModuleValueSelector = (props) => {
const { options, value, onChange, ...valueSelectorProps } = props;
const adaptable = useAdaptable();
const selectedModulesMap = useMemo(() => {
if (!value || !value.length) {
return new Map();
}
return value.reduce((acc, val) => {
acc.set(val, true);
return acc;
}, new Map());
}, [value]);
const allowReorder = useCallback((option) => {
return selectedModulesMap.has(option);
}, [selectedModulesMap]);
const moduleLabelMap = useMemo(() => {
const labelMap = new Map();
options.forEach((module) => labelMap.set(module, adaptable.ModuleService.getModuleFriendlyName(module) ?? module));
return labelMap;
}, [options]);
const sortedOptions = useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
}, [allowReorder, options, value]);
const moduleFilter = useCallback((module, searchText) => {
const parts = module.split(/(?=[A-Z])/);
const withSpaces = parts.join(' ');
return (module.toLowerCase().includes(searchText.toLowerCase()) ||
withSpaces.toLowerCase().includes(searchText.toLowerCase()));
}, []);
return (_jsx(ValueSelector, { ...valueSelectorProps, compact: true, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, filterPlaceholder: "Search...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
};