d2coreui 23.0.14 → 23.0.15

package/components/grid/config/rowStylePicker.tsx

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