@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
51 lines (50 loc) • 3.72 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useCallback } from 'react';
import UIHelper from '../../UIHelper';
import AdaptableInput from '../AdaptableInput';
import { PermittedValuesSelector } from './PermittedValuesSelector';
import { useAdaptable } from '../../AdaptableContext';
import { Box, Flex } from '../../../components/Flex';
import { Icon } from '../../../components/icons';
import { InputGroup } from '../../../components/InputGroup';
import { NewDropdownButton } from '../../../components/DropdownButton';
import { cn } from '../../../lib/utils';
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;
const permittedValueSelector = (_jsx(Box, { className: 'twa:flex-1', children: _jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select 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 = (_jsx(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update 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, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
props.onColumnValueChange(e.target.value);
} }));
return (_jsx(Flex, { className: cn('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
{ label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
{
label: 'Existing',
icon: _jsx(Icon, { name: "grid" }),
onClick: () => setValueType('existing'),
},
], children: _jsx(_Fragment, { children: valueType === 'existing' ? _jsx(Icon, { name: "grid" }) : _jsx(Icon, { name: "edit" }) }) }), valueType === 'new' ? input : permittedValueSelector] }) })) : (permittedValueSelector) }));
};