d2coreui 23.0.15 → 23.0.17

package/components/grid/cell/statusTextCellEditor.tsx

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

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

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

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

@@ -1,29 +0,0 @@
-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);
-            }
-        });
-    }
-}

package/components/grid/config/columnTransfer.tsx

@@ -1,258 +0,0 @@
-import React from "react";
-import {Transfer, Tree, TreeDataNode} from 'antd'
-import _head from "lodash/head";
-import i18n from "d2core/i18n/i18n"
-import DragSortingTable from "d2coreui/components/table/dragSortingTable";
-import {ColDef, ColumnState, GridApi} from "ag-grid-community";
-import {TableRowSelection} from "antd/es/table/interface";
-import {TransferItem} from "antd/lib/transfer";
-import difference from "lodash/difference";
-
-// Customize ColumnNode Transfer
-const isChecked = (selectedKeys: React.Key[], eventKey: string) => {
-    return selectedKeys.indexOf(eventKey) !== -1;
-};
-
-type TreeNodeType = TreeDataNode & ColumnNode;
-
-function generateTree(treeNodes: ColumnNode[] = [], checkedKeys: string[] = []): TreeNodeType[] {
-    return treeNodes.map(({children, ...props}): TreeNodeType => ({
-        ...props,
-        key: props.key as string,
-        disabled: checkedKeys.includes(props.key as string),
-        children: generateTree(children, checkedKeys),
-    }));
-}
-
-function generateSimpleTree(treeNodes: ColumnNode[] = []): TreeNodeType[] {
-    return treeNodes.map(({children, ...props}) => ({
-        ...props,
-        key: props.key as string,
-        children: generateSimpleTree(children)
-    }));
-}
-
-function getColumns(columnDefinitions: ColDef[]): ColumnNode[] {
-    // noinspection UnnecessaryLocalVariableJS
-    const columns = columnDefinitions.map((columnDef) => {
-        const id = columnDef.colId ? columnDef.colId : (columnDef.field ? columnDef.field : "");
-        const group = (columnDef as any).group;
-        return {
-            key: id,
-            title: columnDef.headerName ? columnDef.headerName : "unknown",
-            description: columnDef.headerTooltip,
-            group: group
-        };
-    });
-    return columns;
-}
-
-function getColumnsTree(columns: ColumnNode[], filteredItems: ColumnNode[] | undefined = undefined): ColumnNode[] {
-    const columnsDefinitionTree: ColumnNode[] = [];
-    columns.forEach((column) => {
-        const itemPresent = filteredItems ? (filteredItems.filter((filteredItem) => {
-            return filteredItem.key === column.key
-        }).length > 0) : true;
-        if (!itemPresent) {
-            return;
-        }
-        let parent = _head(columnsDefinitionTree.filter((parentNode) => parentNode.key === ("_group_" + column.group)));
-        if (!parent) {
-            parent = {key: "_group_" + column.group, title: column.group ? column.group : "unknown"};
-            columnsDefinitionTree.push(parent)
-        }
-        if (!parent.children) {
-            parent.children = [];
-        }
-        parent.children.push({key: column.key, title: column.title});
-    });
-    return columnsDefinitionTree;
-}
-
-interface ColumnNode extends TransferItem {
-    group?: string
-    children?: ColumnNode[]
-}
-
-export const enum ColumnTransferType {
-    SIMPLE = "simple",
-    FULL = "full"
-}
-
-export interface ColumnTransferProps {
-    columnDefinitions: ColDef[]
-    columnModel: ColumnState[]
-    gridApi: GridApi
-    type?: ColumnTransferType,
-    height?: number
-}
-
-export default class ColumnTransfer extends React.Component<ColumnTransferProps> {
-    public static defaultProps = {
-        type: ColumnTransferType.FULL
-    };
-
-    constructor(props: Readonly<ColumnTransferProps>) {
-        super(props);
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(_: React.Key[], direction: string, moveKeys: React.Key[]) {
-        moveKeys.forEach((columnKey) => {
-            if (typeof columnKey === "string") {
-                if (columnKey.indexOf("_group_") >= 0) {
-                    const columnsTree: ColumnNode[] = getColumnsTree(getColumns(this.props.columnDefinitions));
-                    const columnGroup: ColumnNode | undefined = _head(columnsTree.filter((columnGroup) => {
-                        return columnGroup.key === columnKey;
-                    }));
-                    if (columnGroup && columnGroup.children) {
-                        columnGroup.children.forEach((column) => {
-                            this.props.gridApi.setColumnsVisible([column.key as string], direction === "right");
-                        });
-                    }
-                } else {
-                    this.props.gridApi.setColumnsVisible([columnKey], direction === "right");
-                }
-            }
-        });
-    };
-
-    render() {
-        const {columnDefinitions, columnModel, gridApi, type, ...restProps} = this.props;
-        const columns = getColumns(columnDefinitions);
-        const visibleColumnIds = columnModel.filter((column) => !column.hide).map((column) => column.colId) as string[];
-        if (type === ColumnTransferType.SIMPLE) {
-            const columnsTree = getColumnsTree(columns);
-            return (<Tree<TreeNodeType>
-                blockNode
-                checkable
-                defaultExpandAll
-                checkedKeys={visibleColumnIds}
-                onCheck={(selectedKeys, {node,},) => {
-                    const selectedColumnId: string = (node as any).props?.eventKey ? (node as any).props.eventKey : "";
-                    const visible = Array.isArray(selectedKeys) && selectedKeys.indexOf(selectedColumnId) >= 0;
-                    if (selectedColumnId.indexOf("_group_") >= 0) {
-                        const columnGroup: ColumnNode | undefined = _head(columnsTree.filter((columnGroup) => {
-                            return columnGroup.key === selectedColumnId;
-                        }));
-                        if (columnGroup && columnGroup.children) {
-                            columnGroup.children.forEach((column) => {
-                                this.props.gridApi.setColumnsVisible([column.key as string], visible);
-                            });
-                        }
-                    } else {
-                        this.props.gridApi.setColumnsVisible([selectedColumnId], visible);
-                    }
-                }}
-                treeData={generateSimpleTree(columnsTree)}
-            />);
-        } else {
-            const titles = [<b>{i18n("Hidden Columns")}:</b>, <b>{i18n("Shown Columns")}:</b>] as unknown as string[]; // special hack to overcome typescript titles attribute in Transfer component could be also [ReactElement, ReactElement]
-            return (
-                <Transfer {...restProps}
-                          style={{height: this.props.height, minHeight: 100}}
-                          locale={{
-                              itemUnit: "",
-                              itemsUnit: "",
-                              notFoundContent: i18n('The column list is empty'),
-                              searchPlaceholder: i18n('Column Name')
-                          }}
-                          targetKeys={visibleColumnIds}
-                          dataSource={columns}
-                          className="tree-transfer"
-                          render={item => item.title ? item.title : null}
-                          showSelectAll={true}
-                          titles={titles}
-                          filterOption={(inputValue, item) => !!item.title && item.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1}
-                          showSearch
-                          onChange={this.onChange}>
-                    {({direction, onItemSelect, selectedKeys, filteredItems, onItemSelectAll}) => {
-                        if (direction === 'left') {
-                            const checkedKeys = [...selectedKeys];
-                            const columnsTree = getColumnsTree(columns, filteredItems);
-                            return (
-                                <div style={{
-                                    overflowY: "auto",
-                                    height: (this.props.height ? this.props.height : 100) - 100
-                                }}>
-                                    <Tree<TreeNodeType>
-                                        blockNode
-                                        checkable
-                                        defaultExpandAll
-                                        checkedKeys={checkedKeys}
-                                        onCheck={(_, {node,},) => {
-                                            if ((node as any).props?.eventKey) {
-                                                onItemSelect((node as any).props.eventKey, !isChecked(checkedKeys, (node as any).props.eventKey));
-                                            }
-                                        }}
-                                        onSelect={(_, {node},) => {
-                                            if ((node as any).props?.eventKey) {
-                                                onItemSelect((node as any).props.eventKey, !isChecked(checkedKeys, (node as any).props.eventKey));
-                                            }
-                                        }}
-                                        treeData={generateTree(columnsTree, visibleColumnIds)}
-                                    />
-                                </div>
-                            );
-                        } else {
-                            const rowSelection: TableRowSelection<ColumnNode> = {
-                                getCheckboxProps: item => {
-                                    return {disabled: !!item.disabled};
-                                },
-                                onSelectAll(selected, selectedRows) {
-                                    const treeSelectedKeys = selectedRows
-                                        .filter(item => !item.disabled)
-                                        .map(({key}) => key);
-                                    let diffKeys: any;
-                                    if (selected) {
-                                        diffKeys = difference(treeSelectedKeys, selectedKeys);
-                                    } else {
-                                        diffKeys = difference(selectedKeys, treeSelectedKeys);
-                                    }
-                                    onItemSelectAll(diffKeys, selected);
-                                },
-                                onSelect({key}, selected) {
-                                    onItemSelect(key as string, selected);
-                                },
-                                selectedRowKeys: selectedKeys,
-                            };
-
-                            return (
-                                <div style={{
-                                    overflowY: "auto",
-                                    height: (this.props.height ? this.props.height : 100) - 100
-                                }}>
-                                    <DragSortingTable<ColumnNode>
-                                        showHeader={false}
-                                        pagination={false}
-                                        rowSelection={rowSelection}
-                                        columns={[
-                                            {
-                                                dataIndex: 'title',
-                                                title: 'Name',
-                                            },
-                                        ]}
-                                        dataSource={filteredItems}
-                                        size="small"
-                                        onRow={({key, disabled: itemDisabled}) => ({
-                                            onClick: () => {
-                                                if (itemDisabled) {
-                                                    return;
-                                                }
-                                                onItemSelect(key as string, !selectedKeys.includes(key as string));
-                                            },
-                                        })}
-                                        onMoveRow={(column: ColumnNode, _: number, toIndex: number) => {
-                                            this.props.gridApi.moveColumns([column.key as string], toIndex);
-                                        }}
-                                    />
-                                </div>
-                            );
-                        }
-                    }}
-                </Transfer>
-            );
-        }
-    };
-}
-