d2coreui 23.0.15 → 23.0.17

package/components/grid/config/dataGridEditor.tsx

@@ -1,328 +0,0 @@
-import React from "react";
-import {DownloadOutlined, SaveOutlined, SettingOutlined} from "@ant-design/icons";
-import {Button, Collapse, CollapseProps, Drawer, InputNumber, notification, Space, Switch} from 'antd';
-import i18n from "d2core/i18n/i18n"
-import ColumnTransfer, {ColumnTransferType} from "./columnTransfer";
-import RowStylePicker from "./rowStylePicker";
-import cloneDeep from "lodash/cloneDeep"
-import {RowStyleRule} from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
-import {ColDef, ColumnState, GridApi} from "ag-grid-community";
-import {DataGridColDef} from "../dataGrid";
-import {ModalDialog, ModalDialogMode} from "d2coreui/components/modal/modalDialog";
-import {UndoIcon} from "d2coreui/components/icons/undoIcon";
-import PlatformSpecific from "d2coreui/components/platformSpecific";
-
-const REVERT_BUTTON_STYLE = {marginTop: -5};
-
-interface DataGridEditorProps {
-    dataGrid: any
-    gridApi: GridApi
-    columnDefinitions: DataGridColDef[]
-    columnModel: ColumnState[]
-
-    currentPageSize: number
-    paginationPageSize: number
-    paginationDefaultPageSize?: number
-    showMilliseconds: boolean
-    defaultShowMilliseconds: boolean
-    showYear: boolean
-    defaultShowYear: boolean
-
-    defaultRowStyleRules?: RowStyleRule[]
-    rowStyleRules: RowStyleRule[]
-
-    onChangeRowStyleRules?(rowStyleRules: RowStyleRule[]): void
-
-    visible: boolean
-
-    onTableConfigVisible(visible: boolean): void
-}
-
-interface DataGridEditorState {
-    targetKeys: string[]
-    initialPageSize: number
-    windowName: string
-    configurationChangesDisabled: boolean
-}
-
-export default class DataGridEditor extends React.Component<DataGridEditorProps, DataGridEditorState> {
-    constructor(props: Readonly<DataGridEditorProps>) {
-        super(props);
-        this.state = {
-            targetKeys: [],
-            initialPageSize: props.currentPageSize,
-            windowName: "",
-            configurationChangesDisabled: PlatformSpecific.INSTANCE.configurationChangesDisabled()
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.setState({
-            initialPageSize: this.props.currentPageSize,
-            windowName: PlatformSpecific.INSTANCE.getCurrentWindowName()
-        });
-    }
-
-    onChange(targetKeys: string[]) {
-        this.setState({targetKeys});
-    };
-
-    render() {
-        return (
-            <Drawer
-                title={<div style={{width: "100%", paddingRight: 24}}>
-                    <SettingOutlined/> {i18n("Advanced Settings")}
-                </div>}
-                placement="right"
-                closable={true}
-                mask={true}
-                width={340}
-                onClose={() => {
-                    this.props.onTableConfigVisible(false);
-                }}
-                open={this.props.visible}
-                style={{borderTop: "1px solid #ddd"}}
-                styles={{
-                    body: {padding: 0},
-                    mask: {background: "transparent"}
-                }}
-            >
-                <Collapse defaultActiveKey={[]}
-                          bordered={false}
-                          items={[
-                              this.getWindowSettingsPanel(),
-                              this.renderTableGeneralSettingsPanel(),
-                              this.renderTableColumnSettingsPanel(),
-                              this.props.rowStyleRules && this.renderRowsPanel(),
-                          ]} />
-            </Drawer>
-        );
-    }
-
-    getWindowSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
-        return {
-            key: "window-settings",
-            label: <span style={{fontWeight: 500}}>{i18n("Window") + " \"" + this.state.windowName + " \""}</span>,
-            extra: (
-                <Button
-                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>} key="revert"
-                    style={REVERT_BUTTON_STYLE}
-                    danger
-                    ghost
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        e.nativeEvent.stopImmediatePropagation();
-                        PlatformSpecific.INSTANCE.reloadPageInPredefinedState();
-                    }}/>
-            ),
-            children: (
-                <>
-                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
-                        <Button type="primary" style={{width: "100%"}}
-                                disabled={this.state.configurationChangesDisabled}
-                                title={i18n("Save current window configuration for current user")}
-                                onClick={() => {
-                                    ModalDialog.confirm({
-                                        mode: ModalDialogMode.YES_NO,
-                                        title: <span
-                                            style={{whiteSpace: "nowrap"}}>{i18n("Save Window Configuration") + "?"}</span>,
-                                        width: 400,
-                                        onOk: () => {
-                                            PlatformSpecific.INSTANCE.saveWindowConfiguration();
-                                            notification['success']({
-                                                message: i18n("Window configuration saved successfully"),
-                                            })
-                                        },
-                                    });
-
-                                }}>
-                            <SaveOutlined/>{i18n("Save Window Configuration")}
-                        </Button>
-                    </div>
-                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
-                        <Button style={{width: "100%"}}
-                                title={i18n("Export current window configuration to file")}
-                                onClick={() => {
-                                    PlatformSpecific.INSTANCE.exportWindowConfiguration();
-                                }}>
-                            <DownloadOutlined/>{i18n("Export Window Configuration")}
-                        </Button>
-                    </div>
-                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
-                        <Button danger ghost
-                                style={{width: "100%"}}
-                                onClick={() => {
-                                    PlatformSpecific.INSTANCE.reloadPageInFactoryState();
-                                }}>
-                            <UndoIcon/>{i18n("Revert to factory configuration")}
-                        </Button>
-                    </div>
-                </>
-            )
-        };
-    }
-
-    renderTableGeneralSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
-        const paginationEnabled = this.props.paginationPageSize >= 0;
-        const automaticPagination = this.props.paginationPageSize === 0;
-        return {
-            key: "general",
-            label: <span style={{fontWeight: 500}}>{i18n("Table - General Settings")}</span>,
-            extra: (
-                <Button
-                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
-                    key="revert"
-                    style={REVERT_BUTTON_STYLE}
-                    danger
-                    ghost
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        e.nativeEvent.stopImmediatePropagation();
-                        if (this.props.paginationDefaultPageSize !== undefined) {
-                            this.props.dataGrid.changePagination(this.props.paginationDefaultPageSize);
-                        } else {
-                            this.props.dataGrid.changePagination(0);
-                        }
-                        this.props.dataGrid.showMilliseconds(this.props.defaultShowMilliseconds);
-                        this.props.dataGrid.showYear(this.props.defaultShowYear);
-                    }}/>
-            ),
-            children: (
-                <Space direction="vertical" style={{width: "100%"}}>
-                    <div style={{width: "100%"}}>
-                        <span>{i18n("Pagination")}</span>
-                        <span style={{float: "right"}}>
-                            <Switch checkedChildren={i18n("Enabled") + " "}
-                                    unCheckedChildren={i18n(" " + i18n("Disabled"))}
-                                    checked={paginationEnabled}
-                                    onChange={(checked) => {
-                                        this.props.dataGrid.changePagination(checked ? 0 : -1);
-                                    }}/>
-                        </span>
-                    </div>
-                    <div style={{width: "100%"}}>
-                        <span>{i18n("Page Size")}</span>
-                        <span style={{float: "right"}}>
-                            <InputNumber
-                                size="small"
-                                style={{
-                                    width: 70,
-                                    display: !paginationEnabled || automaticPagination ? "none" : "",
-                                    marginLeft: 8
-                                }}
-                                placeholder="size"
-                                className="custom"
-                                value={this.props.currentPageSize}
-                                onChange={(pageSize) => {
-                                    if (pageSize) {
-                                        this.props.dataGrid.changePagination(pageSize);
-                                    }
-                                }}
-                            />
-                           <Switch disabled={!paginationEnabled}
-                                   style={{minWidth: 100}}
-                                   checkedChildren={i18n("Automatic") + " "}
-                                   unCheckedChildren={i18n(" " + i18n("Fixed"))}
-                                   checked={!paginationEnabled || automaticPagination}
-                                   onChange={(checked) => {
-                                       this.props.dataGrid.changePagination(checked ? 0 : (this.state.initialPageSize > 1 ? this.state.initialPageSize : 20));
-                                   }}/>
-                        </span>
-                    </div>
-                    <div style={{width: "100%"}}>
-                        <span>{i18n("Show time with year")}</span>
-                        <span style={{float: "right"}}>
-                            <Switch checkedChildren={i18n("Yes") + " "}
-                                    unCheckedChildren={i18n(" " + i18n("No"))}
-                                    checked={this.props.showYear}
-                                    onChange={(checked) => {
-                                        this.props.dataGrid.showYear(checked);
-                                    }}/>
-                        </span>
-                    </div>
-                    <div style={{width: "100%"}}>
-                        <span>{i18n("Show time with milliseconds")}</span>
-                        <span style={{float: "right"}}>
-                            <Switch checkedChildren={i18n("Yes") + " "}
-                                    unCheckedChildren={i18n(" " + i18n("No"))}
-                                    checked={this.props.showMilliseconds}
-                                    onChange={(checked) => {
-                                        this.props.dataGrid.showMilliseconds(checked);
-                                    }}/>
-                        </span>
-                    </div>
-                </Space>
-            )
-        };
-    }
-
-    renderTableColumnSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
-        return {
-            key: "columns",
-            label: <span style={{fontWeight: 500}}>{i18n("Table - Columns")}</span>,
-            extra: (
-                <Button
-                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
-                    key="revert"
-                    style={REVERT_BUTTON_STYLE}
-                    danger
-                    ghost
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        e.nativeEvent.stopImmediatePropagation();
-                        this.props.gridApi.resetColumnState();
-                    }}/>
-            ),
-            children: (
-                <ColumnTransfer
-                    columnDefinitions={this.props.columnDefinitions as ColDef[]}
-                    columnModel={this.props.columnModel}
-                    type={ColumnTransferType.SIMPLE}
-                    gridApi={this.props.gridApi}
-                />
-            )
-        };
-    }
-
-    renderRowsPanel(): NonNullable<CollapseProps['items']>[number] {
-        return {
-            key: "rows",
-            label: <span style={{fontWeight: 500}}>{i18n("Table - Rows Styling")}</span>,
-            extra: (
-                <Button
-                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
-                    key="revert"
-                    style={REVERT_BUTTON_STYLE}
-                    danger
-                    ghost
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        e.nativeEvent.stopImmediatePropagation();
-                        if (this.props.defaultRowStyleRules) {
-                            const rowStyleRules = cloneDeep(this.props.defaultRowStyleRules);
-                            if (this.props.onChangeRowStyleRules) {
-                                this.props.onChangeRowStyleRules(rowStyleRules);
-                            }
-                        }
-                    }}/>
-            ),
-            children: (
-                <div>
-                    {this.props.rowStyleRules.map((rowStyleRule, index) => this.renderRowStyleRule(rowStyleRule, index))}
-                </div>
-            )
-        };
-    }
-
-    renderRowStyleRule(rowStyleRule: RowStyleRule, index: number) {
-        return (
-            <RowStylePicker key={"row-style-picker-" + index} rowStyleRule={rowStyleRule} onChange={(rowStyleRule) => {
-                this.props.rowStyleRules[index] = rowStyleRule;
-                if (this.props.onChangeRowStyleRules) {
-                    this.props.onChangeRowStyleRules(this.props.rowStyleRules);
-                }
-            }}/>
-        );
-    }
-}

package/components/grid/config/rowHeightCalculator.tsx

@@ -1,29 +0,0 @@
-import {RGBColor} from "react-color";
-
-export const GRID_DEFAULT_ROW_HEIGHT_DELTA = 8;
-
-export const GRID_DEFAULT_FONT_SIZE = 12;
-
-export const calculateRowHeight = (fontSize: string | number | RGBColor | null, rowHeightDelta: string | number | RGBColor | null) => {
-    const currentFontSize: number = fontSize && typeof fontSize === "number" ? fontSize : GRID_DEFAULT_FONT_SIZE;
-    const currentRowHeightDelta: number = rowHeightDelta && typeof rowHeightDelta === "number" ? rowHeightDelta : GRID_DEFAULT_ROW_HEIGHT_DELTA;
-    return currentFontSize + 2 * currentRowHeightDelta;
-}
-
-export const calculateLineHeight = (fontSize: string | number | RGBColor | null, rowHeightDelta: string | number | RGBColor | null) => {
-    return calculateRowHeight(fontSize, rowHeightDelta) - 2;
-}
-
-export const getLineHeight = (rowHeight: number) => {
-    return rowHeight - 2;
-}
-
-export const getFontSize = (fontSize: string | number | RGBColor) => {
-    return fontSize && typeof fontSize === "number" ? fontSize : GRID_DEFAULT_FONT_SIZE;
-}
-
-export const getRowHeightDelta = (rowHeightDelta: string | number | RGBColor) => {
-    return rowHeightDelta && typeof rowHeightDelta === "number" ? rowHeightDelta : GRID_DEFAULT_ROW_HEIGHT_DELTA;
-}
-
-

package/components/grid/config/rowStylePicker.tsx

@@ -1,196 +0,0 @@
-import React from "react";
-import {BgColorsOutlined, BoldOutlined, FontColorsOutlined} from "@ant-design/icons";
-import {Button, Divider, InputNumber} from "antd";
-import i18n from "d2core/i18n/i18n";
-import {ColorResult, RGBColor} from "react-color";
-import {RowStyleRule} from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
-import PlatformSpecific from "../../platformSpecific";
-import ColorPicker from "../../color/colorPicker";
-import {GRID_DEFAULT_ROW_HEIGHT_DELTA} from "./rowHeightCalculator";
-
-
-interface RowStylePickerProps {
-    rowStyleRule: RowStyleRule
-    onChange: (rowStyleRule: RowStyleRule) => void
-}
-
-interface RowStylePickerState {
-    disableColorEdit: boolean
-}
-
-interface StyleChange {
-    color?: ColorResult | null
-    backgroundColor?: ColorResult | null
-    fontWeight?: string | null
-    fontSize?: number | null
-    rowHeightDelta?: number | null
-}
-
-export default class RowStylePicker extends React.Component<RowStylePickerProps, RowStylePickerState> {
-
-    constructor(props: Readonly<RowStylePickerProps>) {
-        super(props);
-
-        this.state = {
-            disableColorEdit: PlatformSpecific.INSTANCE.configurationChangesDisabled(),
-        }
-
-        this.onChange = this.onChange.bind(this);
-    }
-
-    onChange(style: StyleChange): void {
-        const textColor = style.color;
-        const rowStyleRule = this.props.rowStyleRule;
-        if (textColor === null) {
-            delete rowStyleRule.style.color;
-        } else if (typeof textColor === 'object') {
-            if (textColor.rgb.r === 0 && textColor.rgb.g === 0 && textColor.rgb.b === 0 && textColor.rgb.a === 0) {
-                delete rowStyleRule.style.color;
-            } else if (textColor.rgb.a === 0 || textColor.rgb.a === 1) {
-                rowStyleRule.style.color = textColor.hex;
-            } else {
-                rowStyleRule.style.color = textColor.rgb;
-            }
-        } else if (textColor !== undefined) {
-            rowStyleRule.style.color = textColor;
-        }
-
-        const backgroundColor = style.backgroundColor;
-        if (backgroundColor === null) {
-            delete rowStyleRule.style.backgroundColor;
-        } else if (typeof backgroundColor === 'object') {
-            if (backgroundColor.rgb.r === 0 && backgroundColor.rgb.g === 0 && backgroundColor.rgb.b === 0 && backgroundColor.rgb.a === 0) {
-                delete rowStyleRule.style.backgroundColor;
-            } else if (backgroundColor.rgb.a === 0 || backgroundColor.rgb.a === 1) {
-                rowStyleRule.style.backgroundColor = backgroundColor.hex;
-            } else {
-                rowStyleRule.style.backgroundColor = backgroundColor.rgb;
-            }
-        } else if (backgroundColor !== undefined) {
-            rowStyleRule.style.backgroundColor = backgroundColor;
-        }
-
-
-        if (style.fontWeight === null) {
-            delete rowStyleRule.style.fontWeight;
-        } else if (style.fontWeight !== undefined) {
-            rowStyleRule.style.fontWeight = style.fontWeight;
-        }
-        if (style.fontSize === null) {
-            delete rowStyleRule.style.fontSize;
-        } else if (style.fontSize !== undefined) {
-            rowStyleRule.style.fontSize = style.fontSize;
-        }
-        if (style.rowHeightDelta === null) {
-            delete rowStyleRule.style.rowHeightDelta;
-        } else if (style.rowHeightDelta !== undefined) {
-            rowStyleRule.style.rowHeightDelta = style.rowHeightDelta;
-        }
-        this.props.onChange(rowStyleRule);
-    }
-
-    render() {
-        return <>
-            {this.props.rowStyleRule.divider &&
-                <Divider style={{fontSize: 12}}>{i18n(this.props.rowStyleRule.divider)}</Divider>}
-            <div style={{display: "flex"}}>
-                <div style={{flexGrow: 1}}>
-                    {i18n(this.props.rowStyleRule.name)}
-                </div>
-                {this.props.rowStyleRule.styleEditor && this.props.rowStyleRule.styleEditor.color &&
-                    <div style={{marginBottom: 8, marginLeft: 16}}>
-                        <ColorPicker
-                            title={i18n("Background Color")}
-                            disabled={this.state.disableColorEdit}
-                            placement="left"
-                            color={this.getColor()}
-                            onChangeComplete={color => {
-                                this.onChange({color: color})
-                            }}
-                            onResetColor={() => {
-                                this.onChange({color: null})
-                            }}
-                            badgeIcon={<FontColorsOutlined/>}
-                            transparentColorAllowed
-                        />
-                    </div>
-                }
-                {this.props.rowStyleRule.styleEditor && this.props.rowStyleRule.styleEditor.backgroundColor &&
-                    <div style={{marginBottom: 8, marginLeft: 16}}>
-                        <ColorPicker
-                            title={i18n("Background Color")}
-                            disabled={this.state.disableColorEdit}
-                            placement="left"
-                            color={this.getBackgroundColor()}
-                            onChangeComplete={color => {
-                                this.onChange({backgroundColor: color})
-                            }}
-                            onResetColor={() => {
-                                this.onChange({backgroundColor: null})
-                            }}
-                            badgeIcon={<BgColorsOutlined/>}
-                            transparentColorAllowed
-                        />
-                    </div>
-                }
-                {this.props.rowStyleRule.styleEditor && this.props.rowStyleRule.styleEditor.fontWeight &&
-                    <div style={{marginBottom: 8, marginLeft: 16}}>
-                        <Button icon={<BoldOutlined/>}
-                                disabled={this.state.disableColorEdit}
-                                type={this.props.rowStyleRule.style.fontWeight === "bold" ? "primary" : "default"}
-                                onClick={() => {
-                                    this.onChange({fontWeight: this.props.rowStyleRule.style.fontWeight === "bold" ? null : "bold"})
-                                }}
-                        />
-                    </div>}
-                {this.props.rowStyleRule.styleEditor && this.props.rowStyleRule.styleEditor.fontSize &&
-                    <div style={{marginBottom: 8, marginLeft: 16}}>
-                        <InputNumber
-                            style={{width: 70}}
-                            className="custom"
-                            min={10}
-                            max={50}
-                            value={this.getFontSize()}
-                            onChange={(fontSize) => {
-                                if (fontSize && typeof fontSize === "number") {
-                                    this.onChange({fontSize: fontSize});
-                                }
-                            }}
-                        />
-                    </div>}
-                {this.props.rowStyleRule.styleEditor && this.props.rowStyleRule.styleEditor.rowHeightDelta &&
-                    <div style={{marginBottom: 8, marginLeft: 16}}>
-                        <InputNumber
-                            style={{width: 70}}
-                            min={1}
-                            max={28}
-                            value={this.getRowHeightDelta()}
-                            onChange={(rowHeightDelta) => {
-                                if (rowHeightDelta && typeof rowHeightDelta === "number") {
-                                    this.onChange({rowHeightDelta: rowHeightDelta});
-                                }
-                            }}
-                        />
-                    </div>}
-            </div>
-        </>;
-    }
-
-    private getColor(): string | RGBColor | undefined {
-        // @ts-ignore
-        return this.props.rowStyleRule.style.color;
-    }
-
-    private getBackgroundColor(): string | RGBColor | undefined {
-        // @ts-ignore
-        return this.props.rowStyleRule.style.backgroundColor;
-    }
-
-    private getFontSize(): number {
-        return this.props.rowStyleRule.style.fontSize as number;
-    }
-
-    private getRowHeightDelta(): number {
-        return this.props.rowStyleRule.style.rowHeightDelta as number ?? GRID_DEFAULT_ROW_HEIGHT_DELTA;
-    }
-}