d2coreui 23.0.13 → 23.0.15

package/components/grid/cell/dateCellEditor.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import DateTimeInput from "d2coreui/components/date/dateTimeInput";
+import {Dayjs} from "dayjs";
+import {DateTimeUtils} from "d2core/utils/dateTimeUtils";
+import ReactDOM from "react-dom";
+import {unixTimeToMoment} from "d2core/types/unixTimeUtils";
+import {CustomCellEditorProps} from "ag-grid-react";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface DateCellEditorProperties extends CustomCellEditorProps {
+    mask: string
+}
+
+interface DateCellEditorState {
+    value: Dayjs | null
+}
+
+class DateCellEditor extends DataGridCellEditorComponent<DateCellEditorProperties, DateCellEditorState> {
+    private inputComponent: DateTimeInput | null = null;
+
+    constructor(props: Readonly<DateCellEditorProperties>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<DateCellEditorProperties>): DateCellEditorState {
+        let value: Dayjs | null;
+
+        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
+            // if backspace or delete pressed, we clear the cell
+            value = null;
+            props.onValueChange(null);
+        } else {
+            // otherwise we start with the current value
+            value = props.value ? unixTimeToMoment(props.value) : null;
+        }
+        return {
+            value: value,
+        } as DateCellEditorState;
+    }
+
+    focus() {
+        this.inputComponent?.focus();
+    }
+
+    getValue() {
+        return this.state.value ? DateTimeUtils.toUnixTime(this.state.value) : null;
+    }
+
+    isCancelBeforeStart(): boolean {
+        return !!this.props.eventKey && this.props.eventKey.length === 1 && '1234567890'.indexOf(this.props.eventKey) < 0;
+    }
+
+    render() {
+        return (
+            <DateTimeInput
+                ref={(component) => {
+                    this.inputComponent = component;
+                }}
+                size="small"
+                mask={this.props.mask}
+                value={this.state.value}
+                getPopupContainer={(_trigger) => {
+                    // very nasty trick how to keep select's popup within focusable area of ag-grid cell editor popup (prevent closing cell editor when we click in select's dropdown area)
+                    return (ReactDOM.findDOMNode(this)?.parentNode ?? document.body) as HTMLElement;
+                }}
+                onChange={(value) => {
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+                    this.setState({value: value});
+                    this.props.onValueChange(value ? DateTimeUtils.toUnixTime(value) : null)
+                }}
+                style={{width: '100%', minWidth: 220}}
+            />
+        );
+    }
+}
+
+export default withAgGridHooks(DateCellEditor)

package/components/grid/cell/durationCellEditor.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import {CellEditorUtils} from "./cellEditorUtils";
+import DurationInput from "d2coreui/components/date/durationInput";
+import dayjs from "dayjs";
+import {Duration} from "d2core/dayjs/duration";
+import {CustomCellEditorProps} from "ag-grid-react";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface DurationCellEditorProperties extends CustomCellEditorProps {
+    mask?: string
+}
+
+interface DurationCellEditorState {
+    value: number | null
+}
+
+class DurationCellEditor extends DataGridCellEditorComponent<DurationCellEditorProperties, DurationCellEditorState> {
+    private inputComponent: DurationInput | null = null;
+
+    constructor(props: Readonly<DurationCellEditorProperties>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<DurationCellEditorProperties>): DurationCellEditorState {
+        let value: number | null;
+
+        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
+            // if backspace or delete pressed, we clear the cell
+            value = null;
+            props.onValueChange(null);
+        } else if (props.eventKey && props.eventKey.length === 1) {
+            // if a letter was pressed, we start with the letter
+            const parsedValue = Number.parseInt(props.eventKey);
+            value = isNaN(parsedValue) ? props.value : parsedValue;
+            props.onValueChange(value);
+        } else {
+            // otherwise we start with the current value
+            value = props.initialValue;
+        }
+        return {value: value} as DurationCellEditorState;
+    }
+
+    focus() {
+        this.inputComponent?.focus();
+    }
+
+    select() {
+        this.inputComponent?.input?.select();
+    }
+
+    placeCursorToEnd() {
+        // when we started editing, we want the carot at the end, not the start.
+        // this comes into play in two scenarios: a) when user hits F2 and b)
+        // when user hits a printable character, then on IE (and only IE) the carot
+        // was placed after the first character, thus 'apply' would end up as 'pplea'
+        const length = this.inputComponent?.input?.value ? this.inputComponent?.input.value.length : 0;
+        if (length > 0) {
+            this.inputComponent?.input?.setSelectionRange(length, length);
+        }
+    }
+
+    isCancelBeforeStart(): boolean {
+        return !!this.props.eventKey && this.props.eventKey.length === 1 && '1234567890'.indexOf(this.props.eventKey) < 0;
+    }
+
+    render() {
+        return (
+            <DurationInput
+                ref={(component) => {
+                    this.inputComponent = component as DurationInput | null;
+                }}
+                size="small"
+                mask={this.props.mask ?? ""}
+                value={this.state.value !== undefined && this.state.value !== null ? dayjs.duration(this.state.value * 1000) : null}
+                onChange={(time: Duration | null) => {
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+                    if (time) {
+                        const value = time.asMilliseconds() / 1000;
+                        this.setState({value: value});
+                        this.props.onValueChange(value);
+                    } else if (time === undefined) {
+                        this.setState({value: null});
+                        this.props.onValueChange(null);
+                    }
+                }}
+                onKeyDown={(e) => {
+                    if (CellEditorUtils.shouldIgnoreKeyEvent(e)) {
+                        e.preventDefault();
+                        e.nativeEvent.stopImmediatePropagation();
+                        e.nativeEvent.preventDefault();
+                    }
+                }}
+                style={{width: '100%'}}
+            />
+        );
+    }
+}
+
+export default withAgGridHooks(DurationCellEditor)

package/components/grid/cell/hexaOctetStringCellEditor.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import MaskInput from 'react-maskinput';
+import {CustomCellEditorProps} from 'ag-grid-react';
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface HexaOctetStringCellEditorProps extends CustomCellEditorProps {
+    hexaStringMaxLength: number
+}
+
+interface HexaOctetStringCellEditorState {
+    value: string | null
+}
+
+class HexaOctetStringCellEditor extends DataGridCellEditorComponent<HexaOctetStringCellEditorProps, HexaOctetStringCellEditorState> {
+    private inputComponent: HTMLInputElement | null = null;
+
+    constructor(props: Readonly<HexaOctetStringCellEditorProps>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<HexaOctetStringCellEditorProps>): HexaOctetStringCellEditorState {
+        let value: number | null;
+        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
+            // if backspace or delete pressed, we clear the cell
+            value = null;
+            props.onValueChange(null);
+        } else if (props.eventKey && props.eventKey.length === 1) {
+            // if a letter was pressed, we start with the letter
+            const parsedValue = Number.parseInt(props.eventKey);
+            value = isNaN(parsedValue) ? props.value : parsedValue;
+            props.onValueChange(value);
+        } else {
+            // otherwise we start with the current value
+            value = props.initialValue;
+        }
+        return {value: value} as HexaOctetStringCellEditorState;
+    }
+
+    focus() {
+        this.inputComponent?.focus();
+    }
+
+    select() {
+        this.inputComponent?.select();
+    }
+
+    placeCursorToEnd() {
+        // when we started editing, we want the carot at the end, not the start.
+        // this comes into play in two scenarios: a) when user hits F2 and b)
+        // when user hits a printable character, then on IE (and only IE) the carot
+        // was placed after the first character, thus 'apply' would end up as 'pplea'
+        const length = this.inputComponent?.value ? this.inputComponent?.value.length : 0;
+        if (length > 0) {
+            this.inputComponent?.setSelectionRange(length, length);
+        }
+    }
+
+    isCancelBeforeStart(): boolean {
+        return !!this.props.eventKey && this.props.eventKey.length === 1 && '1234567890'.indexOf(this.props.eventKey) < 0;
+    }
+
+    render() {
+        let mask = "";
+        for (let i = 0; i < this.props.hexaStringMaxLength; i++) {
+            mask += "** ";
+        }
+
+        return (
+            <MaskInput
+                getReference={component => {
+                    this.inputComponent = component;
+                    component.className = "ant-input ant-input-sm";
+                }}
+                value={this.state.value !== undefined && this.state.value !== null ? this.state.value.toUpperCase() : ""}
+                onValueChange={event => {
+                    const value = event.value;
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+
+                    if (/^[0-9A-Fa-f ]+$/.test(value)) {
+                        this.setState({value: value.toUpperCase()});
+                        this.props.onValueChange(value.toUpperCase());
+                    } else if (value === "") {
+                        this.setState({value: ""});
+                        this.props.onValueChange("");
+                    }
+                }}
+                mask={mask.trim()}
+                maskChar=" "
+                showMask={false}
+            />
+        );
+    }
+}
+
+export default withAgGridHooks(HexaOctetStringCellEditor)

package/components/grid/cell/hexaValueCellEditor.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import HexaFormattedInput from "d2coreui/components/input/hexaFormattedInput";
+import {CustomCellEditorProps} from "ag-grid-react";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface HexaValueCellEditorProps extends CustomCellEditorProps {
+    maxLength: number
+}
+
+interface HexaValueCellEditorState {
+    value: string | null
+}
+
+class HexaValueCellEditor extends DataGridCellEditorComponent<HexaValueCellEditorProps, HexaValueCellEditorState> {
+    private inputComponent: HexaFormattedInput | null = null;
+
+    constructor(props: Readonly<HexaValueCellEditorProps>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<HexaValueCellEditorProps>): HexaValueCellEditorState {
+        let value: number | null;
+        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
+            // if backspace or delete pressed, we clear the cell
+            value = null;
+            props.onValueChange(null);
+        } else if (props.eventKey && props.eventKey.length === 1) {
+            // if a letter was pressed, we start with the letter
+            const parsedValue = Number.parseInt(props.eventKey);
+            value = isNaN(parsedValue) ? props.value : parsedValue;
+            props.onValueChange(value);
+        } else {
+            // otherwise we start with the current value
+            value = props.value;
+        }
+        return {value: value} as HexaValueCellEditorState;
+    }
+
+    focus() {
+        this.inputComponent?.focus();
+    }
+
+    select() {
+        this.inputComponent?.input?.select();
+    }
+
+    placeCursorToEnd() {
+        // when we started editing, we want the carot at the end, not the start.
+        // this comes into play in two scenarios: a) when user hits F2 and b)
+        // when user hits a printable character, then on IE (and only IE) the carot
+        // was placed after the first character, thus 'apply' would end up as 'pplea'
+        const length = this.inputComponent?.input?.value ? this.inputComponent?.input.value.length : 0;
+        if (length > 0) {
+            this.inputComponent?.input?.setSelectionRange(length, length);
+        }
+    }
+
+    isCancelBeforeStart(): boolean {
+        return !!this.props.eventKey && this.props.eventKey.length === 1 && '1234567890'.indexOf(this.props.eventKey) < 0;
+    }
+
+    render() {
+        return (
+            <HexaFormattedInput
+                ref={(component) => {
+                    this.inputComponent = component;
+                }}
+                value={this.state.value ?? ""}
+                maxLength={this.props.maxLength}
+                onChange={value => {
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+                    if (value) {
+                        this.setState({value: value});
+                        this.props.onValueChange(value);
+                    } else {
+                        this.setState({value: null});
+                        this.props.onValueChange(null);
+                    }
+                }}
+                size={"small"}
+            />
+        )
+    }
+}
+
+export default withAgGridHooks(HexaValueCellEditor)

package/components/grid/cell/numberCellEditor.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {InputNumber} from "antd";
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import {CellEditorUtils} from "./cellEditorUtils";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+import {CustomCellEditorProps} from "ag-grid-react";
+
+interface NumberCellEditorProperties extends CustomCellEditorProps {
+    decimalSeparator?: string
+    precision?: number
+    min?: number
+    max?: number
+}
+
+interface NumericCellEditorState {
+    value: number | null
+}
+
+class NumberCellEditor extends DataGridCellEditorComponent<NumberCellEditorProperties, NumericCellEditorState> {
+    private inputComponent: HTMLInputElement | null = null;
+
+    constructor(props: Readonly<NumberCellEditorProperties>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<NumberCellEditorProperties>): NumericCellEditorState {
+        let value: number | null;
+
+        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
+            // if backspace or delete pressed, we clear the cell
+            value = null;
+            props.onValueChange(null);
+        } else if (props.eventKey && props.eventKey.length === 1) {
+            // if a letter was pressed, we start with the letter
+            const parsedValue = Number.parseInt(props.eventKey);
+            value = isNaN(parsedValue) ? props.value : parsedValue;
+            props.onValueChange(value);
+        } else {
+            // otherwise we start with the current value
+            value = props.value;
+        }
+        return {
+            value: value,
+        } as NumericCellEditorState;
+    }
+
+    focus() {
+        this.inputComponent?.focus();
+    }
+
+    select() {
+        this.inputComponent?.select();
+    }
+
+    placeCursorToEnd() {
+        // when we started editing, we want the carot at the end, not the start.
+        // this comes into play in two scenarios: a) when user hits F2 and b)
+        // when user hits a printable character, then on IE (and only IE) the carot
+        // was placed after the first character, thus 'apply' would end up as 'pplea'
+        const length = this.inputComponent?.value ? this.inputComponent?.value.length : 0;
+        if (length > 0) {
+            this.inputComponent?.setSelectionRange(length, length);
+        }
+    }
+
+
+    isCancelBeforeStart(): boolean {
+        return !!this.props.eventKey && this.props.eventKey.length === 1 && '1234567890'.indexOf(this.props.eventKey) < 0;
+    }
+
+
+    render() {
+        return (
+            <InputNumber
+                ref={(component) => {
+                    this.inputComponent = component;
+                }}
+                size="small"
+                autoFocus
+                decimalSeparator={this.props.decimalSeparator}
+                precision={this.props.precision}
+                min={this.props.min}
+                max={this.props.max}
+                placeholder={this.state.value === null ? "NULL" : ""}
+                value={this.state.value !== null ? this.state.value : undefined}
+                onChange={value => {
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+                    if (typeof value === "number") {
+                        this.setState({value: value});
+                        this.props.onValueChange(value);
+                    } else if (value === null || value === "") {
+                        this.setState({value: null});
+                        this.props.onValueChange(null);
+                    }
+                }}
+                onKeyDown={(e) => {
+                    if (CellEditorUtils.shouldIgnoreKeyEvent(e)) {
+                        // this.props.onKeyDown(e.nativeEvent);
+                        e.preventDefault();
+                        e.nativeEvent.stopImmediatePropagation();
+                        e.nativeEvent.preventDefault();
+                    }
+                }}
+                style={{width: '100%'}}
+            />
+        );
+    }
+}
+
+export default withAgGridHooks(NumberCellEditor)

package/components/grid/cell/rangeSelector.d.ts

@@ -1,78 +1,9 @@
-export class RangeSelector extends BeanStub<"destroyed"> {
-    constructor();
-    beanName: string;
-    wireBeans(beans: any): void;
-    rowModel: any;
-    dragService: any;
-    columnModel: any;
-    visibleColsService: any;
-    cellNavigationService: any;
-    pinnedRowModel: any;
-    rowPositionUtils: any;
-    cellPositionUtils: any;
-    ctrlsService: any;
-    valueService: any;
-    mouseEventService: any;
-    gridApi: any;
-    eGridDiv: any;
-    focusService: any;
-    postConstruct(): void;
-    cellRanges: any[] | undefined;
-    bodyScrollListener: (() => void) | undefined;
-    dragging: boolean | undefined;
-    autoScrollService: AutoScrollService | undefined;
-    cellPositionEquals(cellA: any, cellB: any): boolean;
-    onColumnVisibleChange(): void;
-    refreshLastRangeStart(): void;
-    isContiguousRange(cellRange: any): boolean;
-    getRangeStartRow(cellRange: any): any;
-    getRangeEndRow(cellRange: any): any;
-    setRangeToCell(cell: any, appendRange?: boolean): void;
-    newestRangeStartCell: any;
-    extendLatestRangeToCell(cellPosition: any): void;
-    updateRangeEnd(cellRange: any, cellPosition: any, silent: any): void;
-    refreshRangeStart(cellRange: any): void;
-    getRangeEdgeColumns(cellRange: any): {
-        left: any;
-        right: any;
-    };
-    extendLatestRangeInDirection(key: any): any;
-    setCellRange(params: any): void;
-    setCellRanges(cellRanges: any): void;
-    createCellRangeFromCellRangeParams(params: any): {
-        startRow: {
-            rowIndex: any;
-            rowPinned: any;
-        } | undefined;
-        endRow: {
-            rowIndex: any;
-            rowPinned: any;
-        } | undefined;
-        columns: any;
-        startColumn: any;
-    } | undefined;
-    addCellRange(params: any): void;
-    getCellRanges(): any[] | undefined;
-    isEmpty(): boolean;
-    isMoreThanOneCell(): boolean;
-    removeAllCellRanges(silent: any): void;
-    onBodyScroll(): void;
-    isCellInAnyRange(cell: any): boolean;
-    isCellInSpecificRange(cell: any, range: any): any;
-    isLastCellOfRange(cellRange: any, cell: any): boolean;
-    isBottomRightCell(cellRange: any, cell: any): boolean;
-    getCellRangeCount(cell: any): number;
-    isRowInRange(rowIndex: any, floating: any, cellRange: any): any;
-    getDraggingRange(): any;
-    onDragStart(mouseEvent: any): void;
-    draggingCell: any;
-    lastMouseEvent: any;
-    draggingRange: any;
-    onDragging(mouseEvent: any): void;
-    focusCell(cellPosition: any): void;
-    onDragStop(): void;
-    dispatchChangedEvent(started: any, finished: any, id: any): void;
-    calculateColumnsBetween(columnFrom: any, columnTo: any): any[] | undefined;
-}
-import { BeanStub } from "ag-grid-community";
-import { AutoScrollService } from "ag-grid-community";
+import {BeanStub, GridApi, NamedBean} from "ag-grid-community";
+
+declare namespace rangeSelector {
+    class RangeSelector extends BeanStub implements NamedBean {
+
+    }
+}
+
+export = rangeSelector