@adaptabletools/adaptable/src/agGrid/editors/AdaptableDateEditor/index.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx } from "react/jsx-runtime";
import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
import { KeyCode } from 'ag-grid-enterprise';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
function shouldClearExistingValue(params) {
    return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
}
function getStartValue(params) {
    return shouldClearExistingValue(params) ? '' : params.value;
}
const style = {
    position: 'absolute',
    top: '0px',
    left: '0px',
    right: '0px',
    bottom: '0px',
};
const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
    if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
        return defaultParser(newValue);
    }
    return newValue;
};
export const AdaptableReactDateEditor = forwardRef((props, ref) => {
    const [initialValue] = useState(() => getStartValue(props));
    const valueRef = useRef(initialValue);
    const colValueParser = props.column.getColDef().valueParser;
    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultDateValueParser;
    const adaptable = props.context.__adaptable;
    const editorRef = useRef(null);
    useImperativeHandle(ref, () => {
        return {
            focusIn() {
                editorRef.current?.focus();
            },
            getValue() {
                return valueRef.current;
            },
        };
    });
    const editorElement = (_jsx(InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
            const invalid = isNaN(+value);
            if (valueParser) {
                const params = {
                    ...props,
                    oldValue: props.value,
                    newValue: value,
                    defaultParser: (value) => {
                        const Pattern = adaptable.adaptableOptions.userInterfaceOptions?.dateInputOptions?.dateFormat;
                        if (!Pattern) {
                            return value;
                        }
                        return DateFormatter(value, {
                            Pattern,
                        });
                    },
                };
                valueRef.current = valueParser(params);
                props.onValueChange?.(valueRef.current);
            }
            else {
                valueRef.current = invalid ? null : value;
            }
            if (!invalid) {
                requestAnimationFrame(() => {
                    props.stopEditing();
                });
            }
        }, onStopEdit: (keyboardEventKey) => {
            if (keyboardEventKey === 'Escape') {
                props.api.stopEditing(true);
            }
            else {
                props.stopEditing();
            }
        }, ref: (editor) => {
            editorRef.current = editor;
            editor?.focus();
        } }));
    return _jsx("div", { style: style, children: renderWithAdaptableContext(editorElement, adaptable) });
});
export class AdaptableDateEditor {
    value;
    el;
    params;
    editor;
    unmountReactRoot;
    valueParser = defaultDateValueParser;
    init(params) {
        this.value = getStartValue(params);
        const { valueParser } = params.column.getColDef();
        this.params = params;
        if (typeof valueParser === 'function') {
            this.valueParser = valueParser;
        }
        this.el = document.createElement('div');
        Object.keys(style).forEach((key) => {
            this.el.style[key] = style[key];
        });
    }
    getGui() {
        return this.el;
    }
    getValue() {
        return this.value;
    }
    focusIn() {
        this.editor?.focus();
    }
    focusOut() { }
    getAdaptableInstance(params) {
        const adaptable = params.context.__adaptable;
        return adaptable;
    }
    afterGuiAttached() {
        const adaptable = this.getAdaptableInstance(this.params);
        const defaultValue = shouldClearExistingValue(this.params) ? '' : this.params.value;
        const editorElement = (_jsx(InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
                const invalid = isNaN(+value);
                if (this.valueParser) {
                    const params = {
                        ...this.params,
                        oldValue: this.params.value,
                        newValue: value,
                        defaultParser: (value) => {
                            const Pattern = adaptable.adaptableOptions.userInterfaceOptions?.dateInputOptions?.dateFormat;
                            if (!Pattern) {
                                return value;
                            }
                            return DateFormatter(value, {
                                Pattern,
                            });
                        },
                    };
                    this.value = this.valueParser(params);
                }
                else {
                    this.value = invalid ? null : value;
                }
                if (!invalid) {
                    requestAnimationFrame(() => {
                        this.params.stopEditing();
                    });
                }
            }, onStopEdit: (keyboardEventKey) => {
                if (keyboardEventKey === 'Escape') {
                    this.params.api.stopEditing(true);
                }
                else {
                    this.params.stopEditing();
                }
            }, ref: (editor) => {
                this.editor = editor;
                editor?.focus();
            } }));
        this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(editorElement, adaptable), this.el);
    }
    destroy() {
        this.unmountReactRoot?.();
    }
}