d2coreui 23.0.15 → 23.0.16

package/components/grid/cell/dateCellEditor.tsx

@@ -1,83 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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/simpleStatusTextCellEditor.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import {Select} from "antd";
-import {LocaleHolder} from "d2core/i18n/localeHolder";
-import ReactDOM from 'react-dom';
-import {Key} from "ts-key-enum";
-import debounce from "lodash/debounce";
-import {RefSelectProps} from "antd/es/select";
-import {CustomCellEditorProps} from "ag-grid-react";
-import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
-
-interface SimpleStatusTextCellEditorProperties extends CustomCellEditorProps {
-    decimalSeparator?: string
-    precision?: number
-    statusTexts: { text: string, value: number }[];
-}
-
-interface SimpleStatusTextCellEditorState {
-    value: number | null
-    opened: boolean
-}
-
-class SimpleStatusTextCellEditor extends DataGridCellEditorComponent<SimpleStatusTextCellEditorProperties, SimpleStatusTextCellEditorState> {
-    private selectComponent: RefSelectProps | null = null;
-    private wrappingComponent: HTMLDivElement | null = null;
-
-    constructor(props: Readonly<SimpleStatusTextCellEditorProperties>) {
-        super(props);
-        this.state = this.getInitialState(props);
-        this.updateValueFromPreselection = debounce(this.updateValueFromPreselection.bind(this), 200, {maxWait: 200});
-    }
-
-    getInitialState(props: Readonly<SimpleStatusTextCellEditorProperties>): SimpleStatusTextCellEditorState {
-        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,
-            cancelEdit: false,
-            opened: true,
-        } as SimpleStatusTextCellEditorState;
-    }
-
-    focus() {
-        this.selectComponent?.focus();
-    }
-
-    select() {
-    }
-
-    placeCursorToEnd() {
-    }
-
-    render() {
-        return (
-            <div style={{width: "100%", minWidth: 150}}>
-                <Select<number>
-                    ref={(component) => {
-                        this.selectComponent = component;
-                    }}
-                    size={"small"}
-                    virtual={false}
-                    className={"select-with-one-item"}
-                    showSearch
-                    popupMatchSelectWidth={false}
-                    style={{width: "100%", overflow: "auto", padding: 0, margin: 0}}
-                    dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
-                    allowClear
-                    showAction={['focus', 'click']}
-                    filterOption={(inputValue, option) => {
-                        const inputToSearch = inputValue.toLocaleLowerCase(LocaleHolder.formattingLocale);
-                        const value = option?.value;
-                        return (value !== undefined && value !== null && typeof value === "number" && LocaleHolder.formatNumber(value).indexOf(inputToSearch) >= 0) || ((option?.title?.toLocaleLowerCase(LocaleHolder.formattingLocale).indexOf(inputToSearch) ?? -1) >= 0);
-                    }}
-                    value={this.state.value !== null ? this.state.value : undefined}
-                    onChange={(value) => {
-                        this.setState({value: value === undefined ? null : value});
-                        this.props.onValueChange(value === undefined ? null : value);
-                    }}
-                    onSelect={(value) => {
-                        this.setState({value: value === undefined ? null : value});
-                        this.props.onValueChange(value === undefined ? null : value);
-                    }}
-                    onMouseDown={() => {
-                        this.updateValueImmediately();
-                    }}
-                    open={this.state.opened}
-                    onDropdownVisibleChange={(visible) => {
-                        this.setState({opened: visible});
-                    }}
-                    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;
-                    }}
-                    onInputKeyDown={(e) => {
-                        if (!e.altKey && (e.key === Key.ArrowUp || e.key === Key.ArrowDown)) {
-                            this.updateValueFromPreselection();
-                        }
-                    }}
-                    onSearch={() => {
-                        this.updateValueFromPreselection();
-                    }}
-                    dropdownRender={(menu) => {
-                        return (
-                            <div ref={(component) => {
-                                this.wrappingComponent = component;
-                            }}>
-                                {menu}
-                            </div>
-                        );
-                    }}
-                >
-                    {this.props.statusTexts?.map((statusTextItem) => {
-                        return <Select.Option
-                            id={"select-value-" + statusTextItem.value}
-                            key={"" + statusTextItem.value}
-                            value={statusTextItem.value}
-                            title={statusTextItem.text}
-                            data-optionvalue={"" + statusTextItem.value}
-                        >
-                                        <span
-                                            onMouseDown={() => {
-                                                this.setState({value: statusTextItem.value});
-                                                this.props.onValueChange(statusTextItem.value);
-                                            }}
-                                            style={{
-                                                color: "rgba(0, 0, 0, 0.85)",
-                                                whiteSpace: "nowrap"
-                                            }}>
-                                            {`${statusTextItem.text} (${statusTextItem.value})`}
-                                        </span>
-                        </Select.Option>;
-                    })}
-                </Select>
-            </div>
-        );
-    }
-
-    private updateValueFromPreselection() {
-        setTimeout(() => {
-            this.updateValueImmediately();
-        }, 200)
-    }
-
-    private updateValueImmediately() {
-        let selectables: HTMLElement[] = Array.from(this.wrappingComponent?.getElementsByClassName("ant-select-item-option-active") ?? []) as HTMLElement[];
-        if (selectables.length > 0) {
-            const optionStringValue = selectables[0].dataset?.optionvalue;
-            const optionValue = optionStringValue !== undefined ? Number.parseFloat(optionStringValue) : undefined
-            if (optionValue) {
-                this.setState({value: optionValue});
-                this.props.onValueChange(optionValue);
-            }
-        }
-    }
-}
-
-export default withAgGridHooks(SimpleStatusTextCellEditor)