@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
153 lines (152 loc) • 6.14 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableNumberEditor = exports.AdaptableReactNumberEditor = exports.getStartValue = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
const InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
const ag_grid_enterprise_1 = require("ag-grid-enterprise");
const react_1 = require("react");
function shouldClearExistingValue(params) {
return params.eventKey === ag_grid_enterprise_1.KeyCode.BACKSPACE || params.eventKey === ag_grid_enterprise_1.KeyCode.DELETE;
}
function isValidChar(char) {
// allow only digits
return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
// we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
}
function getStartValue(params) {
if (shouldClearExistingValue(params)) {
return '';
}
if (params.eventKey && isValidChar(params.eventKey)) {
return Number(params.eventKey);
}
return params.value;
}
exports.getStartValue = getStartValue;
const defaultValueParser = ({ newValue, oldValue: _ }) => {
return newValue;
};
const style = {
position: 'absolute',
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
};
exports.AdaptableReactNumberEditor = (0, react_1.forwardRef)((props, ref) => {
const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
const valueRef = (0, react_1.useRef)(initialValue);
const columnId = props.column.getColId();
const adaptable = props.context.__adaptable;
const colValueParser = props.column.getColDef().valueParser;
const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
function onValueChange(value) {
value = valueParser
? valueParser({
...props,
oldValue: props.value,
newValue: value,
})
: value;
valueRef.current = value;
props.onValueChange?.(value);
}
const editorRef = (0, react_1.useRef)(null);
(0, react_1.useImperativeHandle)(ref, () => {
return {
focusIn() {
editorRef.current?.focus();
},
// the final value to send to the grid, on completion of editing
getValue() {
return valueRef.current;
},
};
});
const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: initialValue, showClearButton: props.showClearButton ?? true, emptyValue: props.emptyValue ?? '', onValueChange: onValueChange, ref: (editor) => {
editorRef.current = editor;
editor?.focus();
} }));
function onKeyDown(keyDownEvent) {
adaptable._emit('CellEditorKeyDown', {
keyDownEvent,
cellValue: valueRef.current,
columnId,
updateValueCallback: (updatedValue) => {
editorRef.current.setValue(updatedValue);
},
});
}
return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
});
exports.AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
/**
* Number Editor provided by AdapTable and used by default for all `number` columns
*/
class AdaptableNumberEditor {
constructor() {
this.valueParser = defaultValueParser;
this.onValueChange = (value) => {
this.value = this.valueParser
? this.valueParser({
...this.params,
oldValue: this.params.value,
newValue: value,
})
: value;
};
}
init(params) {
this.value = getStartValue(params);
this.params = params;
this.columnId = params.column.getColId();
const { valueParser } = params.column.getColDef();
if (typeof valueParser === 'function') {
this.valueParser = valueParser;
}
this.el = document.createElement('div');
Object.keys(style).forEach((key) => {
//@ts-ignore
this.el.style[key] = style[key];
});
}
/* Component Editor Lifecycle methods */
// gets called once when grid ready to insert the element
getGui() {
return this.el;
}
// the final value to send to the grid, on completion of editing
getValue() {
return this.value;
}
focusIn() {
this.editor?.focus();
}
focusOut() { }
// after this component has been created and inserted into the grid
afterGuiAttached() {
const adaptable = this.params.context.__adaptable;
const defaultValue = this.value;
const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: defaultValue, showClearButton: this.params.showClearButton ?? true, emptyValue: this.params.emptyValue ?? '', onValueChange: this.onValueChange, ref: (editor) => {
this.editor = editor;
editor?.focus();
} }));
this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
this.getGui().addEventListener('keydown', (keyDownEvent) => {
adaptable._emit('CellEditorKeyDown', {
keyDownEvent,
cellValue: this.value,
columnId: this.columnId,
updateValueCallback: (updatedValue) => {
this.editor.setValue(updatedValue);
},
});
});
}
destroy() {
this.unmountReactRoot?.();
}
}
exports.AdaptableNumberEditor = AdaptableNumberEditor;