@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
63 lines (62 loc) • 4.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BulkUpdateValueSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
const AdaptableContext_1 = require("../../AdaptableContext");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Flex_1 = require("../../../components/Flex");
const icons_1 = require("../../../components/icons");
const InputGroup_1 = require("../../../components/InputGroup");
const BulkUpdateValueSelector = (props) => {
const [valueType, setValueType] = React.useState('existing');
const adaptable = (0, AdaptableContext_1.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(Flex_1.Box, { className: 'twa:flex-1' },
React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: (0, react_1.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_1.default, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
: 'text', placeholder: props.selectedColumn
? UIHelper_1.default.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 (React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
React.createElement(InputGroup_1.InputGroup, { Component: Flex_1.Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
React.createElement(DropdownButton_1.default, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
{ label: 'New', icon: React.createElement(icons_1.Icon, { name: "edit" }), onClick: () => setValueType('new') },
{
label: 'Existing',
icon: React.createElement(icons_1.Icon, { name: "grid" }),
onClick: () => setValueType('existing'),
},
] },
React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(icons_1.Icon, { name: "grid" }) : React.createElement(icons_1.Icon, { name: "edit" }))),
valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
};
exports.BulkUpdateValueSelector = BulkUpdateValueSelector;