@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
47 lines (46 loc) • 3.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ValueSelector_1 = require("../../../Components/ValueSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const Utilities_1 = require("./Utilities");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const Flex_1 = require("../../../../components/Flex");
const CheckBox_1 = require("../../../../components/CheckBox");
const PivotColumnsSectionSummary = () => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground" }, layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { className: "twa:mr-1", key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Pivot Columns Defined"))));
};
exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
const PivotColumnsSection = (props) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
const sortedPivotColumns = React.useMemo(() => {
return ArrayExtensions_1.default.sortArrayWithOrder(allPivotColumns.map((col) => col.columnId), layout.PivotColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
}, [layout, allPivotColumns]);
const handleColumnsChange = (columnIds) => {
props.onChange({
...layout,
PivotColumns: columnIds,
});
};
return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(Flex_1.Box, { className: "twa:mb-3 twa:px-2" },
React.createElement(CheckBox_1.CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
props.onChange({
...layout,
PivotResultColumnsOrder: checked,
});
} }, "Persist Order of Pivot Result Columns")),
React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
};
exports.PivotColumnsSection = PivotColumnsSection;