d2coreui 23.0.13 → 23.0.15

package/components/grid/filter/customColumnFilter.tsx

@@ -0,0 +1,14 @@
+import {DataGridColDef} from "../dataGrid";
+import DataGridColumnFilter, {DataGridColumnFilterProps, DataGridColumnFilterState} from "./dataGridColumnFilter";
+
+export default class CustomColumnFilter extends DataGridColumnFilter<DataGridColumnFilterProps, DataGridColumnFilterState>  {
+
+    constructor(props: Readonly<DataGridColumnFilterProps>) {
+        super(props);
+    }
+
+    render() {
+        const colDef = this.props.column.getColDef() as DataGridColDef;
+        return colDef?.renderFilter?.(this.state.currentValue ? this.state.currentValue : "", this.changeValue, this.onSearch);
+    }
+}

package/components/grid/filter/dataGridColumnFilter.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {CustomFloatingFilterProps} from "ag-grid-react";
+import {AgPromise, ProvidedFilterParams} from "ag-grid-community";
+
+export interface DataGridColumnFilterProps extends CustomFloatingFilterProps {
+}
+
+export interface DataGridColumnFilterState {
+    currentValue: string
+}
+
+export default class DataGridColumnFilter<P extends DataGridColumnFilterProps, S extends DataGridColumnFilterState> extends React.Component<P, S> {
+
+    constructor(props: Readonly<P>) {
+        super(props);
+        // @ts-ignore
+        this.state = {
+            currentValue: (props.model?.value || "") as string
+        };
+        this.changeValue = this.changeValue.bind(this);
+        this.onSearch = this.onSearch.bind(this);
+    }
+
+    componentDidMount() {
+        this.props.parentFilterInstance((instance: any) => {
+            this.setState({currentValue: instance.getValues(0)[0]});
+        });
+    }
+
+    isUseApplyButton(params: ProvidedFilterParams): boolean {
+        return !!params.buttons && params.buttons.indexOf('apply') >= 0;
+    }
+
+    changeValue(newValue: string) {
+        this.setState({currentValue: newValue},
+            () => {
+                const newValue = this.state.currentValue;
+                this.setValue(newValue);
+            });
+    }
+
+    setValue(newValue: string, forceApply?: boolean) {
+        const autoApply = !this.isUseApplyButton(this.props.filterParams);
+        if (autoApply || forceApply) {
+            this.props.onModelChange(this.createModel(newValue));
+        } else {
+            this.props.parentFilterInstance((instance: any) => {
+                (instance.setModel(this.createModel(newValue)) || AgPromise.resolve()).then(() => {
+                    // instance.setValueFromFloatingFilter(newValue);
+                    // instance.setTypeFromFloatingFilter('contains');
+                    instance.onUiChanged(false);
+                });
+            });
+        }
+    }
+
+    protected onSearch() {
+        this.setValue(this.state.currentValue, true);
+    }
+
+    private createModel(newValue: string) {
+        return newValue === '' ? null :
+            {
+                ...(this.props.model || {
+                    type: 'contains',
+                }),
+                filter: newValue,
+            };
+    }
+}

package/components/grid/filter/dateColumnFilter.tsx

@@ -0,0 +1,34 @@
+import React, {ChangeEvent} from "react";
+import {Input} from 'antd'
+import {Key} from "ts-key-enum";
+import DataGridColumnFilter, {DataGridColumnFilterProps, DataGridColumnFilterState} from "./dataGridColumnFilter";
+
+export default class DateColumnFilter extends DataGridColumnFilter<DataGridColumnFilterProps, DataGridColumnFilterState> {
+    constructor(props: Readonly<any>) {
+        super(props);
+        this.onValueChanged = this.onValueChanged.bind(this);
+    }
+
+    onValueChanged(event:ChangeEvent) {
+        const newValue = (event.target as HTMLInputElement).value;
+        this.changeValue(newValue);
+    };
+
+
+    render() {
+        return (
+            <Input
+                size="small"
+                style={{marginTop: "3px"}}
+                value={this.state.currentValue}
+                allowClear={true}
+                onChange={this.onValueChanged}
+                onKeyDown={(e) => {
+                    if (e.key === Key.Enter) {
+                        this.onSearch();
+                    }
+                }}
+            />
+        )
+    }
+}

package/components/grid/filter/textColumnFilter.tsx

@@ -0,0 +1,37 @@
+import React, {ChangeEvent} from "react";
+import {Input} from 'antd'
+import {Key} from "ts-key-enum";
+import {CustomFloatingFilterProps} from "ag-grid-react";
+import DataGridColumnFilter, {DataGridColumnFilterProps, DataGridColumnFilterState} from "./dataGridColumnFilter";
+
+
+export default class TextColumnFilter extends DataGridColumnFilter<DataGridColumnFilterProps, DataGridColumnFilterState> {
+
+    constructor(props: Readonly<CustomFloatingFilterProps>) {
+        super(props);
+        this.onValueChanged = this.onValueChanged.bind(this);
+    }
+
+    onValueChanged(event: ChangeEvent) {
+        const newValue = (event.target as HTMLInputElement).value;
+        this.changeValue(newValue);
+    };
+
+    render() {
+        return (
+            <Input
+                size="small"
+                style={{marginTop: "3px"}}
+                value={this.state.currentValue}
+                allowClear={true}
+                onChange={this.onValueChanged}
+                onKeyDown={(e) => {
+                    if (e.key === Key.Enter) {
+                        this.setValue(this.state.currentValue, true);
+                        this.props.context?.onFilterConfirmed();
+                    }
+                }}
+            />
+        )
+    }
+}

package/components/grid/filter/wildcardQuickFilterEngine.ts

@@ -0,0 +1,50 @@
+import memoize from "memoize-one";
+
+export default class WildcardQuickFilterEngine {
+
+    constructor() {
+        this.getWildcardFilterRegExp = memoize(this.getWildcardFilterRegExp).bind(this);
+        this.quickFilterParser = this.quickFilterParser.bind(this);
+        this.quickFilterMatcher = this.quickFilterMatcher.bind(this);
+        this.match = this.match.bind(this);
+    }
+
+    quickFilterParser(quickFilter: string): string[] {
+        const quickFilterParts = quickFilter.split(' ');
+        const quickFilterPartsWildcardMatchers = quickFilterParts.map((quickFilterPart) => {
+            return this.getWildcardFilterRegExp(quickFilterPart);
+        });
+        return quickFilterPartsWildcardMatchers as any as string[];
+    }
+
+    quickFilterMatcher(quickFilterStringParts: string[], rowQuickFilterAggregateText: string): boolean {
+        const quickFilterParts = quickFilterStringParts as any as (string | RegExp)[];
+        for (const quickFilterPart of quickFilterParts) {
+            if (typeof quickFilterPart === 'string') {
+                if (rowQuickFilterAggregateText.indexOf(quickFilterPart) < 0) {
+                    return false;
+                }
+            } else if (!quickFilterPart.test(rowQuickFilterAggregateText)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    getWildcardFilterRegExp(wildcardFilter: string): RegExp | string {
+        if (wildcardFilter.indexOf("*") >= 0 || wildcardFilter.indexOf("?") >= 0) {
+            const pattern = "^" + wildcardFilter.replace(/\./g, '\\.').replace(/\*/g, '[\\w\\. \\t]*').replace(/\?/g, '[\\w\\. \\t]') + "$";
+            return new RegExp(pattern, "m");
+        } else {
+            return wildcardFilter;
+        }
+    }
+
+    match(wildcardFilter: RegExp | string, content: string): boolean {
+        if (typeof wildcardFilter === "string") {
+            return content.indexOf(wildcardFilter) >= 0;
+        } else {
+            return wildcardFilter.test(content);
+        }
+    }
+}

package/components/grid/header/simpleHeader.tsx

@@ -0,0 +1,270 @@
+import React from 'react';
+import {
+    CheckOutlined,
+    ColumnWidthOutlined,
+    ControlOutlined,
+    EyeInvisibleOutlined,
+    PushpinOutlined
+} from "@ant-design/icons";
+import {Dropdown, MenuProps} from "antd";
+import i18n from "d2core/i18n/i18n"
+import {UndoMenuIcon} from "d2coreui/components/icons/undoIcon";
+import {MenuElement} from "../dataGrid";
+import {calculateLineHeight, GRID_DEFAULT_ROW_HEIGHT_DELTA} from "../config/rowHeightCalculator";
+import {Column} from "ag-grid-community";
+
+export default class SimpleHeader extends React.Component<any, any> {
+    lastMovingChanged: number;
+    unmounted: boolean = false;
+
+    constructor(props: Readonly<any>) {
+        super(props);
+        this.state = {
+            sortMode: "",
+            sortOrderIndex: null,
+            filterPresent: false,
+            menuVisible: false
+        };
+        this.lastMovingChanged = 0;
+        this.onHeaderClick = this.onHeaderClick.bind(this);
+        this.onMovingChanged = this.onMovingChanged.bind(this);
+        this.onFilterChanged = this.onFilterChanged.bind(this);
+        this.onSortChanged = this.onSortChanged.bind(this);
+        this.onMultiSortChanged = this.onMultiSortChanged.bind(this);
+        this.onMenuSelect = this.onMenuSelect.bind(this);
+        props.column.addEventListener('movingChanged', this.onMovingChanged);
+        props.column.addEventListener('filterChanged', this.onFilterChanged);
+        props.column.addEventListener('sortChanged', this.onSortChanged);
+        props.api.addEventListener('sortChanged', this.onMultiSortChanged);
+    }
+
+    componentDidMount() {
+        this.onFilterChanged();
+        this.onSortChanged();
+    }
+
+    componentWillUnmount() {
+        this.props.column.removeEventListener(this.onMovingChanged);
+        this.props.column.removeEventListener(this.onFilterChanged);
+        this.props.column.removeEventListener(this.onSortChanged);
+        this.unmounted = true;
+    }
+
+    onHeaderClick(event: React.MouseEvent<HTMLDivElement>) {
+        const target = event.target as HTMLElement;
+        if (target && target.className && target.className.indexOf("menu") >= 0) {
+            // now clicking on menu button, ignore sorting operation
+            return;
+        }
+        // sometimes when moving a column via dragging, this was also firing a clicked event.
+        // this check stops sort if a) column is moving or b) column moved less than 200ms ago (so caters for race condition)
+        const moving = this.props.column.isMoving();
+        const nowTime = new Date().getTime();
+        // typically there is <2ms if moving flag was set recently, as it would be done in same VM turn
+        const movedRecently = (nowTime - this.lastMovingChanged) < 50;
+        const columnMoving = moving || movedRecently;
+
+        if (!columnMoving && this.props.column.colDef.sortable) {
+            const sortUsingCtrl = this.props.api.getGridOption('multiSortKey') === 'ctrl';
+            const multiSort = sortUsingCtrl ? (event.ctrlKey || event.metaKey) : event.shiftKey;
+            this.props.progressSort(multiSort);
+        }
+    }
+
+    // keep track of last time the moving changed flag was set
+    onMovingChanged() {
+        this.lastMovingChanged = new Date().getTime();
+    }
+
+    onFilterChanged() {
+        const filterPresent = this.props.column.isFilterActive();
+        if (!this.unmounted) {
+            this.setState({filterPresent: filterPresent});
+        }
+    }
+
+    onSortChanged() {
+        let sortMode = "";
+        if (this.props.column.isSortAscending()) {
+            sortMode = "asc";
+        } else if (this.props.column.isSortDescending()) {
+            sortMode = "desc";
+        }
+        if (!this.unmounted) {
+            this.setState({
+                sortMode: sortMode,
+            });
+        }
+    }
+
+    onMultiSortChanged() {
+        let showOrderIndex = null;
+        const col = this.props.column;
+        const allColumnsWithSorting = this.props.api.getColumns().filter((c:Column)=> !!c.getSort());
+
+        const moreThanOneColSorting = allColumnsWithSorting.length > 1;
+        const showIndex = col.isSorting() && moreThanOneColSorting;
+        if (showIndex) {
+            showOrderIndex = col.getSortIndex()!! + 1;
+        }
+
+        if (!this.unmounted) {
+            this.setState({
+                showOrderIndex: showOrderIndex
+            });
+        }
+    }
+
+    onMenuSelect(clickParam: any) {
+        const {key} = clickParam;
+        const pinned = this.props.column.pinned;
+        if (key === "pinLeft") {
+            if (pinned === "left") {
+                this.props.api.setColumnsPinned([this.props.column], null);
+            } else {
+                this.props.api.setColumnsPinned([this.props.column], "left");
+            }
+        } else if (key === "pinRight") {
+            if (pinned === "right") {
+                this.props.api.setColumnsPinned([this.props.column], null);
+            } else {
+                this.props.api.setColumnsPinned([this.props.column], "right");
+            }
+        } else if (key === "autosizeColumn") {
+            this.props.api.autoSizeColumns([this.props.column]);
+        } else if (key === "hideColumn") {
+            this.props.api.setColumnsVisible([this.props.column], false);
+        } else if (key === "autosizeAllColumns") {
+            this.props.api.autoSizeAllColumns();
+        } else if (key === "resetColumns") {
+            this.props.api.resetColumnState();
+        } else if (key === "columnsConfig") {
+            this.props.onColumnsConfigVisible(true);
+        }
+        this.setState({menuVisible: false});
+    }
+
+    getColumnMenu(): MenuProps {
+        const pinned = this.props.column.pinned;
+        const items: MenuElement[] = [
+            {
+                key: "pin",
+                label: <span><PushpinOutlined/> {i18n("Pin Column")}</span>,
+                children: [
+                    {
+                        key: "pinLeft",
+                        icon: <CheckOutlined style={{visibility: pinned === "left" ? "visible" : "hidden"}}/>,
+                        label: i18n("Pin Left"),
+                    },
+                    {
+                        key: "pinRight",
+                        icon: <CheckOutlined style={{visibility: pinned === "right" ? "visible" : "hidden"}}/>,
+                        label: i18n("Pin Right"),
+                    },
+                ]
+            },
+            {
+                key: "autosizeColumn",
+                icon: <ColumnWidthOutlined/>,
+                label: i18n("Autosize Column")
+            },
+            {
+                key: "hideColumn",
+                icon: <EyeInvisibleOutlined/>,
+                label: i18n("Hide Column"),
+            },
+            {
+                key: "divider-menu",
+                type: "divider",
+            },
+            {
+                key: "autosizeAllColumns",
+                icon: <ColumnWidthOutlined/>,
+                label: i18n("Autosize All Columns")
+            },
+            {
+                key: "resetColumns",
+                icon: <UndoMenuIcon/>,
+                label: i18n("Reset Columns")
+            },
+            {
+                key: "columnsConfig",
+                icon: <ControlOutlined/>,
+                label: i18n("Columns Configuration")
+            },
+        ];
+
+        return {
+            onClick: this.onMenuSelect,
+            items: items,
+        };
+    }
+
+    render() {
+        const alwaysHideNoSort = !this.props.column.getColDef().unSortIcon && !this.props.api.getGridOption('unSortIcon');
+        const sortAscClassName = !this.props.column.isSortAscending() ? "ag-hidden" : "",
+            sortDescClassName = !this.props.column.isSortDescending() ? "ag-hidden" : "",
+            sortNoneClassName = alwaysHideNoSort || !this.props.column.isSortNone() ? "ag-hidden" : "";
+        let containerClassName = "";
+        if (this.props.column.isSortAscending()) {
+            containerClassName = 'ag-header-cell-sorted-asc';
+        } else if (this.props.column.isSortDescending()) {
+            containerClassName = 'ag-header-cell-sorted-desc';
+        } else if (this.props.column.isSortNone()) {
+            containerClassName = 'ag-header-cell-sorted-none';
+        }
+        const sortOrderIndexClassName = !this.state.showOrderIndex ? "ag-hidden" : "";
+        const filterClassName = !this.state.filterPresent ? "ag-hidden" : "";
+        const columnMenu = this.getColumnMenu();
+
+        const textStyle = {
+            fontSize: this.props.context.fontSize,
+            lineHeight: calculateLineHeight(this.props.context.fontSize, GRID_DEFAULT_ROW_HEIGHT_DELTA + 2)
+        };
+
+        return (
+            <Dropdown menu={columnMenu} trigger={["contextMenu"]} placement="bottom">
+                <div className={"ag-cell-label-container " + containerClassName} role="presentation"
+                     onClick={this.onHeaderClick}
+                     onMouseOver={() => {
+                         this.setState({menuVisible: true});
+                     }}
+                     onMouseOut={() => {
+                         this.setState({menuVisible: false});
+                     }}>
+                    <Dropdown menu={columnMenu} trigger={["click"]} placement="bottom">
+                    <span ref="eMenu" className="ag-header-icon ag-header-cell-menu-button"
+                          style={{
+                              opacity: this.state.menuVisible ? 1 : 0,
+                              transition: "opacity 0.2s, border 0.2s",
+                              cursor: this.state.menuVisible ? "pointer" : undefined
+                          }}>
+                            <span className="ag-icon ag-icon-menu" unselectable="on"/>
+                    </span>
+                    </Dropdown>
+                    <div className="ag-header-cell-label" role="presentation" unselectable="on"
+                         style={textStyle}>
+                    <span className="ag-header-cell-text" role="columnheader" unselectable="on">
+                        {this.props.displayName}
+                    </span>
+                        <span className={"ag-header-icon ag-filter-icon " + filterClassName}>
+                        <span className="ag-icon ag-icon-filter" unselectable="on"/>
+                    </span>
+                        <span className={"ag-header-icon ag-sort-ascending-icon " + sortAscClassName}>
+                        <span className="ag-icon ag-icon-asc" unselectable="on"/>
+                    </span>
+                        <span className={"ag-header-icon ag-sort-descending-icon " + sortDescClassName}>
+                        <span className="ag-icon ag-icon-desc" unselectable="on"/>
+                    </span>
+                        <span className={"ag-header-icon ag-sort-none-icon " + sortNoneClassName}>
+                        <span className="ag-icon ag-icon-none" unselectable="on"/>
+                    </span>
+                        <span className={"ag-header-icon ag-sort-order " + sortOrderIndexClassName}>
+                        {this.state.showOrderIndex}
+                    </span>
+                    </div>
+                </div>
+            </Dropdown>
+        );
+    }
+}

package/components/grid/panel/dataGridPagination.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import {Button, InputNumber, Popover, Space} from "antd";
+import i18n from "d2core/i18n/i18n";
+import {
+    CaretLeftOutlined,
+    CaretRightOutlined,
+    CheckOutlined,
+    StepBackwardOutlined,
+    StepForwardOutlined
+} from "@ant-design/icons";
+
+interface DataGridPaginationProps {
+    disabled?: boolean
+    current: number
+    pageSize: number
+    total: number
+
+    onGoToPage(page: number): void
+}
+
+interface DataGridPaginationState {
+    gotoPageNumber?: number
+}
+
+export default class DataGridPagination extends React.Component<DataGridPaginationProps, DataGridPaginationState> {
+    constructor(props: Readonly<DataGridPaginationProps>) {
+        super(props);
+
+        this.state = {}
+    }
+
+    render() {
+        const {disabled, total, pageSize, current} = this.props;
+        const rangeStart = total === 0 ? 0 : (current - 1) * pageSize + 1;
+        const rangeEnd = current * pageSize > total ? total : current * pageSize;
+        const totalPages = Math.ceil(total / pageSize);
+        return (
+            <>
+                <li style={{margin: "0 12px", lineHeight: "32px", whiteSpace: "nowrap"}}>
+                    {`${rangeStart}-${rangeEnd} ${i18n('of')} ${total}`}
+                </li>
+                <Button.Group>
+                    <Button
+                        title={i18n("First Page")}
+                        disabled={disabled || current === 1}
+                        icon={<StepBackwardOutlined/>}
+                        onClick={() => {
+                            this.props.onGoToPage(0);
+                        }}
+                    />
+                    <Button
+                        title={i18n("Previous Page")}
+                        disabled={disabled || current === 1}
+                        icon={<CaretLeftOutlined/>}
+                        onClick={() => {
+                            this.props.onGoToPage(current - 1);
+                        }}
+                    />
+                    <Popover
+                        placement="bottom"
+                        trigger={disabled || totalPages <= 1 ? [] : ["hover", "click"]}
+                        content={
+                            <Space.Compact>
+                                <InputNumber
+                                    disabled={disabled || total === 0}
+                                    min={1} max={totalPages}
+                                    value={this.state.gotoPageNumber ? this.state.gotoPageNumber : this.props.current}
+                                    onChange={(newValue) => {
+                                        if (typeof newValue === "number") {
+                                            this.setState({gotoPageNumber: newValue});
+                                        }
+                                    }}
+                                    onKeyDown={(e) => {
+                                        if (e.code === "Enter") {
+                                            if (this.state.gotoPageNumber) {
+                                                this.props.onGoToPage(this.state.gotoPageNumber);
+                                            }
+                                        }
+                                    }}
+                                />
+                                <Button
+                                    title={i18n("Goto Page")}
+                                    type="primary"
+                                    onClick={() => {
+                                        if (this.state.gotoPageNumber) {
+                                            this.props.onGoToPage(this.state.gotoPageNumber);
+                                        }
+                                    }}
+                                >
+                                    <CheckOutlined/>
+                                </Button>
+                            </Space.Compact>
+                        }>
+                        <Button disabled={disabled} style={{width: 80, paddingLeft: 0, paddingRight: 0}}>
+                            <span style={{
+                                display: "inline-block",
+                                width: "100%",
+                                textAlign: "center",
+                            }}>{total === 0 ? 0 : current} / {totalPages}</span>
+                        </Button>
+                    </Popover>
+                    <Button
+                        title={i18n("Next Page")}
+                        disabled={disabled || current === totalPages || total === 0}
+                        icon={<CaretRightOutlined/>}
+                        onClick={() => {
+                            this.props.onGoToPage(current + 1);
+                        }}
+                    />
+                    <Button
+                        title={i18n("Last Page")}
+                        disabled={disabled || current === totalPages || total === 0}
+                        icon={<StepForwardOutlined/>}
+                        onClick={() => {
+                            this.props.onGoToPage(totalPages);
+                        }}
+                    />
+                </Button.Group>
+            </>
+        );
+    }
+
+}

package/components/grid/panel/loadingOverlay.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export default class LoadingOverlay extends React.PureComponent {
+    loadingOverlayRenderer: () => React.ReactElement;
+
+    constructor(props: Readonly<any>) {
+        super(props);
+        this.loadingOverlayRenderer = props.api.getGridOption('context').loadingOverlayRenderer;
+    }
+
+    render() {
+        return (this.loadingOverlayRenderer());
+    }
+}

package/components/grid/panel/noRecordsOverlay.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export default class NoRecordsOverlay extends React.PureComponent<any> {
+    noRecordsOverlayRenderer: () => React.ReactElement;
+
+    constructor(props: Readonly<any>) {
+        super(props);
+        this.noRecordsOverlayRenderer = props.api.getGridOption('context').noRecordsOverlayRenderer;
+    }
+
+    render() {
+        return <div style={{pointerEvents: "auto"}}>
+            {this.noRecordsOverlayRenderer()}
+        </div>;
+    }
+}