@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
80 lines (79 loc) • 4.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useMemo, useEffect, useState } from 'react';
import { Loader } from '../../../components/Loader';
import join from '../../../components/utils/join';
import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
import { ValueSelector } from '../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import ArrayExtensions from '../../.././Utilities/Extensions/ArrayExtensions';
import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
import { TagList } from '../../../components/Tag';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
export const isValidCustomSortOrder = (data) => {
if (!data.SortedValues || !data.SortedValues.length) {
return 'At least one value is required for the Custom Sort order.';
}
return true;
};
export const renderCustomSortValuesSummary = (data) => {
return _jsx(TagList, { tags: data.SortedValues.map(String) });
};
export const CustomSortValuesWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const [distinctValues, setDistinctValues] = useState([]);
const [isDistinctValuesLoading, setIsDistinctValuesLoading] = useState(false);
const columnDataType = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
useEffect(() => {
let isMounted = true;
(async () => {
setDistinctValues([]);
const newValues = (await runIfNotResolvedIn(api.gridApi.internalApi.getDistinctValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true))) ?? [];
if (!isMounted) {
return;
}
setIsDistinctValuesLoading(false);
setDistinctValues(newValues);
})();
return () => {
isMounted = false;
};
}, [data.ColumnId]);
const toIdentifier = (optionItem) => {
return api.customSortApi.internalApi.getCustomSortValue(optionItem, columnDataType);
};
const toLabel = (optionItem) => {
return `${optionItem}`;
};
const sortedValuesMap = useMemo(() => {
if (!data.SortedValues || !data.SortedValues.length) {
return new Map();
}
return data.SortedValues.reduce((acc, val) => {
acc.set(val, true);
return acc;
}, new Map());
}, [data.SortedValues]);
const allowReorder = React.useCallback((option) => {
return sortedValuesMap.has(toIdentifier(option));
}, [sortedValuesMap]);
const getOptionValues = (gridCells) => {
return gridCells.map((gridCell) => {
return columnDataType === 'date' ? parseToISO(gridCell.rawValue) : gridCell.normalisedValue;
});
};
const options = useMemo(() => {
return ArrayExtensions.sortArrayWithOrder(getOptionValues(distinctValues), data.SortedValues, {
sortUnorderedItems: false,
});
}, [allowReorder, distinctValues, data.SortedValues]);
const baseClassName = 'ab-CustomSortWizard__SortOrder';
const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
return (_jsx(Flex, { flexDirection: "column", className: "twa:h-full twa:p-3", children: _jsxs(Card, { shadow: false, className: join('twa:flex-1 twa:min-h-0', className), children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Sort Order" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Specify the custom sort order \u2014 drag selected items to modify order" })] }), _jsxs(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: [isDistinctValuesLoading && _jsx(Loader, { children: "Loading" }), _jsx(ValueSelector, { toIdentifier: toIdentifier, toLabel: toLabel, options: options, value: data.SortedValues, allowReorder: allowReorder, onChange: (SortedValues) => {
props.onChange({
...data,
SortedValues,
});
} })] })] }) }));
};