@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
51 lines (50 loc) • 2.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
const Enums_1 = require("../../../AdaptableState/Common/Enums");
const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
class ColumnSelector extends React.Component {
render() {
const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
let sortedColumnOptions = sortedColumns.map((column) => {
return {
label: column.friendlyName,
value: column.columnId,
disabled: this.props.disabled,
onClick: () => {
const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
if (!selected.length) {
this.onClearButton();
}
else {
this.onColumnChange(selected, isEmptySelectedColumnIds);
}
},
};
});
let currentColumnName = selectedColumnIds.length > 0
? this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])?.friendlyName
: 'Select a column';
return (React.createElement("div", { "data-name": 'column-selector' },
React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
React.createElement(FormLayout_1.FormRow, null,
React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
}
onClearButton() {
this.props.onColumnChange([]);
}
onColumnChange(selected, isEmptySelection) {
if (selected.length == 0 && isEmptySelection) {
return; // must be a nicer way but we want to avoid ridiculous amounts of prop calls
}
this.props.onColumnChange(selected);
}
}
exports.ColumnSelector = ColumnSelector;