@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
60 lines (59 loc) • 3.25 kB
JavaScript
import * as React from 'react';
import FieldWrap from '../../../components/FieldWrap';
import UIHelper from '../../UIHelper';
import AdaptableInput from '../AdaptableInput';
import { Box } from 'rebass';
import { PermittedValuesSelector } from './PermittedValuesSelector';
import { Select } from '../../../components/Select';
import { useAdaptable } from '../../AdaptableContext';
import { useCallback } from 'react';
export const BulkUpdateValueSelector = (props) => {
const [valueType, setValueType] = React.useState('existing');
const adaptable = useAdaptable();
const columnDataType = props.selectedColumn?.dataType;
const isDateType = props.selectedColumn && columnDataType === 'date';
const columnId = props.selectedColumn?.columnId;
// TODO = this seems to be called whenever we edit a cell
// which is then triggering a get all values
// not sure that we need to
const permittedValueSelector = (React.createElement(Box, null,
React.createElement(PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: useCallback(({ currentSearchValue }) => {
if (!columnId || !props.selectedGridCells.length) {
return Promise.resolve([]);
}
return adaptable.api.gridApi.internalApi.getDistinctEditDisplayValuesForColumn({
columnId,
gridCell: props.selectedGridCells[0],
currentSearchValue,
});
}, [
columnId,
props.selectedGridCells?.[0]?.column.columnId,
props.selectedGridCells?.[0]?.primaryKeyValue,
]), onChange: (value) => {
props.onColumnValueChange(value || null);
} })));
const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
: 'text', placeholder: props.selectedColumn
? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
: 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
props.onColumnValueChange(e.target.value);
} }));
let valueTypeSelector = null;
if (isDateType) {
valueTypeSelector = (React.createElement(Select, { options: [
{ label: 'New', value: 'new' },
{ label: 'Existing', value: 'existing' },
], value: valueType, onChange: (value) => {
setValueType(value);
} }));
}
return (React.createElement(FieldWrap, { className: props.className, style: {
...props.style,
overflow: 'visible',
maxWidth: '100%',
} }, isDateType ? (React.createElement(React.Fragment, null,
valueType === 'new' ? input : permittedValueSelector,
valueTypeSelector)) : (permittedValueSelector)));
};