d2coreui 23.0.15 → 23.0.17

package/components/grid/filter/customColumnFilter.tsx

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

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

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

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

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

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

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

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

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