d2coreui 23.0.14 → 23.0.15

package/components/grid/cell/simpleStatusTextCellEditor.tsx

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

package/components/grid/cell/statusTextCellEditor.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import {InputNumber, Select} from "antd";
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import {LocaleHolder} from "d2core/i18n/localeHolder";
+import ReactDOM from 'react-dom';
+import scrollIntoView from "dom-scroll-into-view";
+import {CustomCellEditorProps} from "ag-grid-react";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface StatusTextCellEditorProperties extends CustomCellEditorProps {
+    decimalSeparator?: string
+    precision?: number
+    statusTexts: { text: string, value: number }[];
+}
+
+interface StatusTextCellEditorState {
+    value: number | null
+    opened: boolean
+}
+
+class StatusTextCellEditor extends DataGridCellEditorComponent<StatusTextCellEditorProperties, StatusTextCellEditorState> {
+    private inputComponent: HTMLInputElement | null = null;
+
+    constructor(props: Readonly<StatusTextCellEditorProperties>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<StatusTextCellEditorProperties>): StatusTextCellEditorState {
+        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 StatusTextCellEditorState;
+    }
+
+    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;
+    }
+
+    // noinspection DuplicatedCode
+    getScrollParent(element: HTMLElement, includeHidden = false): HTMLElement {
+        var style = getComputedStyle(element);
+        var excludeStaticParent = style.position === "absolute";
+        var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+        if (style.position === "fixed") return document.body;
+        let parent: HTMLElement | null;
+        for (parent = element; (parent = parent.parentElement);) {
+            style = getComputedStyle(parent);
+            if (excludeStaticParent && style.position === "static") {
+                continue;
+            }
+            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+        }
+        return document.body;
+    }
+
+    scrollTo(value: number) {
+        const elementToScroll = document.getElementById("select-value-" + value);
+        if (elementToScroll) {
+            const parent = this.getScrollParent(elementToScroll, true);
+            scrollIntoView(elementToScroll, parent, {
+                onlyScrollIfNeeded: true,
+                allowHorizontalScroll: false,
+                alignWithTop: true,
+                offsetTop: 20,
+                offsetBottom: 20,
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div style={{width: "100%", minWidth: 150}}>
+                <Select<number>
+                    size={"small"}
+                    virtual={false}
+                    popupMatchSelectWidth={false}
+                    className={"select-with-one-item"}
+                    style={{width: "100%", overflow: "auto", visibility: "hidden"}}
+                    dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+                    allowClear
+                    dropdownAlign={{points: ["tl", "tr"], offset: [0, -100], overflow: {adjustX: true, adjustY: true}}}
+                    filterOption={(inputValue, option) => {
+                        const inputToSearch = inputValue.toLocaleLowerCase(LocaleHolder.formattingLocale);
+                        const value: number = option?.value as number;
+                        return (value?.toString().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});
+                        this.props.onValueChange(value);
+                    }}
+                    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;
+                    }}
+                >
+                    {this.props.statusTexts?.map((statusTextItem) => {
+                        return <Select.Option
+                            id={"select-value-" + statusTextItem.value}
+                            key={"" + statusTextItem.value}
+                            value={statusTextItem.value}
+                            title={statusTextItem.text}
+                        >
+                                        <span style={{
+                                            color: "rgba(0, 0, 0, 0.85)",
+                                            whiteSpace: "nowrap"
+                                        }}>{`${statusTextItem.text} (${statusTextItem.value})`}</span>
+                        </Select.Option>;
+                    })}
+                </Select>
+                <InputNumber
+                    ref={(component) => {
+                        this.inputComponent = component;
+                    }}
+                    size="small"
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        width: "100%"
+                    }}
+                    autoFocus
+                    decimalSeparator={this.props.decimalSeparator}
+                    precision={this.props.precision}
+                    placeholder={this.state.value === null ? "NULL" : ""}
+                    value={this.state.value !== undefined && 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, opened: true});
+                            this.scrollTo(value);
+                            this.props.onValueChange(value);
+                        } else if (value === undefined || value === "") {
+                            this.setState({value: null, opened: true});
+                            this.props.onValueChange(null);
+                        }
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === Key.ArrowUp || e.key === Key.ArrowDown) {
+                            this.props.onKeyDown(e.nativeEvent);
+                            e.preventDefault();
+                        }
+                    }}
+                    onFocus={() => {
+                        this.setState({opened: true});
+                    }}
+                    onClick={() => {
+                        this.setState({opened: true});
+                    }}
+                />
+            </div>
+        );
+    }
+}
+
+export default withAgGridHooks(StatusTextCellEditor)

package/components/grid/cell/tableDefaultRowStyleRules.ts

@@ -0,0 +1,51 @@
+import {RGBColor} from "react-color";
+import {GRID_DEFAULT_FONT_SIZE, GRID_DEFAULT_ROW_HEIGHT_DELTA} from "../config/rowHeightCalculator";
+
+export interface GridRowStyle {
+    [cssProperty: string]: string | number | RGBColor
+}
+
+export interface RowStyleRule {
+    name: string
+    divider?: string
+    key: string
+    expression: string | null
+    style: GridRowStyle
+    styleEditor?: {
+        backgroundColor?: boolean
+        color?: boolean
+        fontSize?: boolean
+        fontWeight?: boolean
+        rowHeightDelta?: boolean
+    }
+}
+
+const tableDefaultRowStyleRules = function (): RowStyleRule[] {
+    return [
+        {
+            name: "Font Size",
+            divider: "All Rows",
+            key: "table-font-size",
+            expression: null,
+            style: {
+                fontSize: GRID_DEFAULT_FONT_SIZE
+            },
+            styleEditor: {
+                fontSize: true,
+            }
+        },
+        {
+            name: "Line Indentation",
+            key: "table-line-indentation",
+            expression: null,
+            style: {
+                rowHeightDelta: GRID_DEFAULT_ROW_HEIGHT_DELTA
+            },
+            styleEditor: {
+                rowHeightDelta: true,
+            }
+        }
+    ];
+};
+
+export default tableDefaultRowStyleRules;

package/components/grid/cell/textCellEditor.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {Input, InputRef} from "antd";
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
+import {CustomCellEditorProps} from "ag-grid-react";
+import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
+
+interface TextCellEditorProperties extends CustomCellEditorProps {
+}
+
+interface TextCellEditorState {
+    value: string | null
+}
+
+class TextCellEditorComponent extends DataGridCellEditorComponent<TextCellEditorProperties, TextCellEditorState> {
+    private inputComponent: InputRef | null = null;
+
+    constructor(props: Readonly<TextCellEditorProperties>) {
+        super(props);
+        this.state = this.getInitialState(props);
+    }
+
+    getInitialState(props: Readonly<TextCellEditorProperties>): TextCellEditorState {
+        let value: string | 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
+            value = props.eventKey;
+            props.onValueChange(value);
+        } else {
+            // otherwise we start with the current value
+            value = props.initialValue;
+        }
+        return {value: value} as TextCellEditorState;
+    }
+
+    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);
+        }
+    }
+
+    render() {
+        const inputWidth = !!this.state.value && this.state.value.length > 40 ? this.state.value.length : 40;
+        return (
+            <Input
+                ref={(component) => {
+                    this.inputComponent = component as InputRef | null;
+                }}
+                size="small"
+                autoFocus
+                placeholder={this.state.value === null ? "NULL" : ""}
+                value={this.state.value != undefined ? this.state.value : undefined}
+                onChange={(event) => {
+                    if (KeyboardUtils.isKeyPressed(Key.Alt)) {
+                        // ignore navigational keystrokes ALT+cursor arrow
+                        return;
+                    }
+                    this.setState({value: event.target.value});
+                    this.props.onValueChange(event.target.value);
+                }}
+                onKeyDown={(e) => {
+                    if (e.key === Key.ArrowUp || e.key === Key.ArrowDown) {
+                        this.props.onKeyDown(e.nativeEvent);
+                        e.preventDefault();
+                    }
+                    // In watch panel Delete propagation cause remove of line
+                    if (e.key === Key.Delete) {
+                        e.stopPropagation();
+                    }
+                }}
+                style={{width: '100%', minWidth: `min( 85vw, ${inputWidth}ch)`}}
+            />
+        );
+    }
+}
+
+export default withAgGridHooks(TextCellEditorComponent)

package/components/grid/cell/withAgGridHooks.tsx

@@ -0,0 +1,15 @@
+import {CustomCellEditorProps, useGridCellEditor} from "ag-grid-react";
+import React, {useRef} from "react";
+import {DataGridCellEditorComponent} from "./dataGridCellEditorComponent";
+
+export function withAgGridHooks<P extends CustomCellEditorProps, S>(Component: any) {
+    return (props: CustomCellEditorProps) => {
+        const componentRef: React.MutableRefObject<DataGridCellEditorComponent<P, S> | null> = useRef(null);
+        useGridCellEditor({
+            isCancelBeforeStart: () => {
+                return componentRef.current?.isCancelBeforeStart?.() ?? false;
+            }
+        });
+        return <Component ref={componentRef} {...props} />;
+    };
+}

package/components/grid/columnUtils.ts

@@ -0,0 +1,29 @@
+import {ColDef, ColumnState} from "ag-grid-community";
+import {DataGridColDef} from "./dataGrid";
+
+export class ColumnUtils {
+    static mergeColumnsState(columnsState:ColumnState[], columnsDefinition: ColDef[] | DataGridColDef[]) {
+        const defaultState = columnsDefinition.map(columnDef=> {
+            return {
+                aggFunc: columnDef.aggFunc,
+                colId: columnDef.colId,
+                flex: columnDef.initialFlex,
+                hide: columnDef.initialHide,
+                pinned: columnDef.initialPinned,
+                pivot: columnDef.initialPivot,
+                pivotIndex: columnDef.initialPivotIndex,
+                rowGroup: columnDef.initialRowGroup,
+                rowGroupIndex: columnDef.initialRowGroupIndex,
+                sort: columnDef.initialSort,
+                sortIndex: columnDef.initialSortIndex,
+                width: columnDef.initialWidth,
+            } as ColumnState;
+        });
+        defaultState.forEach((defaultColumnState, index)=>{
+            const definedColumnState = columnsState.find(columnState=> columnState.colId === defaultColumnState.colId);
+            if(!definedColumnState) {
+                columnsState.splice(index, 0, defaultColumnState);
+            }
+        });
+    }
+}