@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
46 lines (45 loc) • 2.63 kB
JavaScript
import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import { SortOrder } from '../../../AdaptableState/Common/Enums';
import { ArrayExtensions } from '../../../Utilities/Extensions/ArrayExtensions';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import DropdownButton from '../../../components/DropdownButton';
export class ColumnSelector extends React.Component {
render() {
const sortedColumns = ArrayExtensions.sortArrayWithProperty(SortOrder.Asc, this.props.ColumnList, 'friendlyName');
const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions.IsNotNullOrEmpty(x));
const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => 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, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
React.createElement(FormRow, null,
React.createElement(DropdownButton, { 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);
}
}