@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
133 lines (132 loc) • 6.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnsSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const icons_1 = require("../../../../components/icons");
const InfiniteTable_1 = require("../../../../components/InfiniteTable");
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const AdaptablePopover_1 = require("../../../AdaptablePopover");
const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
const tableDOMProps = {
style: {
height: '100%',
minWidth: '10rem',
minHeight: 300,
flex: 1,
},
};
const ColumnsSection = (props) => {
const { api } = (0, AdaptableContext_1.useAdaptable)();
const primaryKey = api.optionsApi.getPrimaryKey();
const allColumns = React.useMemo(() => {
return api.columnApi
.getUIAvailableColumns()
.filter((col) => col.field)
.map((column) => ({
label: column.friendlyName,
value: column,
}));
}, []);
const handleColumnMapChange = (newColMap) => {
props.onColumnsChange(props.columnsMap?.map((cm) => {
if (cm.field === newColMap.field) {
return { ...cm, ...newColMap };
}
return cm;
}));
};
const columns = React.useMemo(() => {
return {
include: {
field: 'include',
header: 'Included',
maxWidth: 110,
align: 'center',
render: (params) => {
return (React.createElement(CheckBox_1.CheckBox, { disabled: params.data?.abColumn?.field === primaryKey, onChange: (checked) => {
handleColumnMapChange({
...params.data,
include: checked,
});
}, checked: Boolean(params.data.include) }));
},
},
field: {
field: 'field',
header: 'Data Field',
},
abColumn: {
header: 'AdapTable Column',
render: (params) => {
// filter out used columns
const availableColumns = allColumns
.filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
.map((col) => {
return {
...col,
onClick: () => {
handleColumnMapChange({
...params.data,
abColumn: col.value,
include: true,
});
},
};
});
return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
handleColumnMapChange({
...params.data,
abColumn: null,
include: false,
});
}, width: "100%", columns: ['label'], items: availableColumns }, params.data?.abColumn?.friendlyName ??
params.data?.abColumn?.columnId ??
'Select Column'));
},
},
valid: {
header: 'Valid',
maxWidth: 100,
minWidth: 90,
align: 'center',
render: (row) => {
if (!row.data.abColumn) {
return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
}
const successColor = UIHelper_1.default.getColorByMessageType('Success');
return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
},
},
};
}, [props.columnsMap]);
if (!props.columnsMap) {
return (React.createElement(rebass_1.Box, { p: 2 },
React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
"No Data has been Imported. Go to ",
React.createElement(Tag_1.Tag, null, "Upload"),
" step and provide Data")));
}
return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
valid: 'end',
type: 'end',
}, columnTypes: {
default: {
minWidth: 100,
defaultFlex: 1,
},
}, domProps: tableDOMProps, columns: columns }))))));
};
exports.ColumnsSection = ColumnsSection;
exports.ColumnsSection.displayName = 'ColumnsSection';