d2coreui 23.0.15 → 23.0.17

package/components/color/colorSwatch.jsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import reactCSS, {handleHover} from 'reactcss'
-import {Swatch} from 'react-color/lib/components/common/Swatch'
-
-function invertColor(hex, bw) {
-    if (hex.indexOf('#') === 0) {
-        hex = hex.slice(1);
-    }
-    // convert 3-digit hex to 6-digits.
-    if (hex.length === 3) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    }
-    if (hex.length !== 6) {
-        throw new Error('Invalid HEX color.');
-    }
-    var r = parseInt(hex.slice(0, 2), 16),
-        g = parseInt(hex.slice(2, 4), 16),
-        b = parseInt(hex.slice(4, 6), 16);
-    if (bw) {
-        // http://stackoverflow.com/a/3943023/112731
-        return (r * 0.299 + g * 0.587 + b * 0.114) > 186
-            ? '#000000'
-            : '#FFFFFF';
-    }
-    // invert color components
-    r = (255 - r).toString(16);
-    g = (255 - g).toString(16);
-    b = (255 - b).toString(16);
-    // pad each with zeros and return
-    return "#" + padZero(r) + padZero(g) + padZero(b);
-}
-
-export const ColorSwatch = ({hover, color, onClick, onSwatchHover, style, title, active, small}) => {
-    const hoverSwatch = {
-        transform: "scale(1.5)",
-        position: 'relative',
-        zIndex: '3',
-    }
-    const focusSwatch = {
-        position: 'relative',
-        zIndex: '2',
-        transform: "scale(1.2)",
-        boxShadow: '0 0 5px 2px rgba(0,0,0,0.25)',
-        cursor:"pointer"
-    }
-
-    const styles = reactCSS({
-        'default': {
-            swatch: {
-                display: "inline-block",
-                transform: "scale(1)",
-                width: !!small ? '15px' : '22px',
-                height: !!small ? '15px' : '22px',
-                margin: '2px',
-                marginTop: 0,
-                marginBottom: 0,
-                fontSize: '0',
-            },
-        },
-        'hover': {
-            swatch: small ? {} : hoverSwatch,
-        },
-    }, {hover})
-
-
-    return (
-        <div style={styles.swatch}>
-            {active &&
-            <div style={{fill: invertColor(color, true), position: "absolute", left: 1, top: 1, zIndex: 10,}}>
-                <svg viewBox="0 0 24 24" style={{width: 20, height: 20}}>
-                    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
-                </svg>
-            </div>}
-            <Swatch
-                color={color}
-                onClick={onClick}
-                onHover={onSwatchHover}
-                focus={active}
-                focusStyle={focusSwatch}
-                style={style}
-                title={title}
-            />
-        </div>
-    )
-}
-
-export default handleHover(ColorSwatch)

package/components/color/colorUtils.ts

@@ -1,60 +0,0 @@
-export default class ColorUtils {
-    static d2IntToRGB(num: number): string {
-        // d2000 posiela farbu vo formate bgr
-        const b = (num & 0xFF0000) >>> 16,
-            g = (num & 0xFF00) >>> 8,
-            r = num & 0xFF;
-        return "rgb(" + [r, g, b].join(",") + ")";
-    }
-
-    static d2IntToHex(num: number): string {
-        // d2000 posiela farbu vo formate bgr
-        const b = (num & 0xFF0000) >>> 16,
-            g = (num & 0xFF00) >>> 8,
-            r = num & 0xFF;
-        return "#" + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
-    }
-
-    static hexToD2Int(hex: string): number {
-        const r = parseInt(hex.slice(1, 1 + 2), 16),
-            g = (parseInt(hex.slice(3, 3 + 2), 16) << 8),
-            b = (parseInt(hex.slice(5, 5 + 2), 16) << 16);
-
-        return r + g + b;
-    }
-
-    private static padZero(s: string, length: number = 2) {
-        while (s.length < length) {
-            s = '0' + s;
-        }
-        return s;
-    }
-
-    static invertColor(hex: string, bw: boolean) {
-        if (hex.indexOf('#') === 0) {
-            hex = hex.slice(1);
-        }
-        // convert 3-digit hex to 6-digits.
-        if (hex.length === 3) {
-            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-        }
-        if (hex.length !== 6) {
-            throw new Error('Invalid HEX color.');
-        }
-        const r = parseInt(hex.slice(0, 2), 16);
-        const g = parseInt(hex.slice(2, 4), 16);
-        const b = parseInt(hex.slice(4, 6), 16);
-        if (bw) {
-            // http://stackoverflow.com/a/3943023/112731
-            return (r * 0.299 + g * 0.587 + b * 0.114) > 186
-                ? '#000000'
-                : '#FFFFFF';
-        }
-        // invert color components
-        const rString = (255 - r).toString(16);
-        const gString = (255 - g).toString(16);
-        const bString = (255 - b).toString(16);
-        // pad each with zeros and return
-        return "#" + this.padZero(rString) + this.padZero(gString) + this.padZero(bString);
-    }
-}

package/components/date/dateRangeInput.tsx

@@ -1,468 +0,0 @@
-import React, {HTMLAttributes} from "react";
-import dayjs, { Dayjs } from "dayjs";
-import {CalendarOutlined} from "@ant-design/icons";
-import {Divider, Switch, Tag, Tooltip} from "antd";
-import DateTimeInput from "./dateTimeInput";
-import memoizeOne from "memoize-one";
-import {TooltipPlacement} from "antd/es/tooltip";
-import KeyboardUtils from "../keyboard/keyboardUtils";
-import i18n from "d2core/i18n/i18n";
-import DateRangeInputAdvancedPanel, {TimeShiftDirection} from "./dateRangeInputAdvancedPanel";
-import {SizeType} from "antd/lib/config-provider/SizeContext";
-
-export enum DateRangeInputMode {
-    SIMPLE,
-    ADVANCED,
-}
-
-export interface DateRangeInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    mask: string
-    fromValue: Dayjs | null
-    toValue: Dayjs | null
-    onChange?: (fromValue: Dayjs | null, toValue: Dayjs | null) => void
-    onInvalidValue?: (input: string) => void
-    disabled?: boolean
-    minDateTime?: Dayjs
-    maxDateTime?: Dayjs
-    // allows to set no (null) date by datepicker
-    allowClear?: boolean
-    ranges?: { [rangeName: string]: () => [Dayjs, Dayjs] }
-    size?: SizeType;
-
-    hidePopup?: boolean
-    renderAsCalendar?: boolean
-    placement?: TooltipPlacement
-    align?: {
-        points?: [string, string];
-        offset?: [number, number];
-        targetOffset?: [number, number];
-        overflow?: {
-            adjustX?: boolean;
-            adjustY?: boolean;
-        };
-        useCssRight?: boolean;
-        useCssBottom?: boolean;
-        useCssTransform?: boolean;
-    }
-
-    defaultMode?: DateRangeInputMode
-
-    onModeChange?(mode: DateRangeInputMode): void
-
-    onFocus?(): void
-
-    onBlur?(): void
-
-    confirmButtonsRenderer?(): React.ReactNode
-
-    onPopupVisibleChange?(visible: boolean): void
-}
-
-interface DateRangeInputState {
-    valid: boolean
-    selectionStartDate: Dayjs | null
-    popupKeyIndex: number
-    popupVisible: boolean
-
-    mode: DateRangeInputMode
-}
-
-export default class DateRangeInput extends React.Component<DateRangeInputProps, DateRangeInputState> {
-    constructor(props: Readonly<DateRangeInputProps>) {
-        super(props);
-        this.state = {
-            valid: !!props.fromValue && props.fromValue.isValid() && !!props.toValue && props.toValue.isValid(),
-            selectionStartDate: null,
-            popupKeyIndex: 0,
-            popupVisible: false,
-
-            mode: props.defaultMode ?? DateRangeInputMode.SIMPLE,
-        };
-        this.getDefaultSelectedDateForFromPanel = memoizeOne(this.getDefaultSelectedDateForFromPanel.bind(this));
-    }
-
-    componentDidUpdate(_prevProps: Readonly<DateRangeInputProps>, prevState: Readonly<DateRangeInputState>) {
-        if (prevState.popupVisible !== this.state.popupVisible && this.props.onPopupVisibleChange) {
-            this.props.onPopupVisibleChange(this.state.popupVisible);
-        }
-    }
-
-    getDefaultSelectedDateForFromPanel(fromDate: Dayjs | null, toDate: Dayjs | null): Dayjs {
-        if (!!fromDate && !!toDate && fromDate.isSame(toDate, "date")) {
-            return fromDate.clone().subtract(1, "month");
-        } else {
-            return fromDate ?? dayjs().startOf("day").subtract(1, "month");
-        }
-    }
-
-    private getFromValue(date: Dayjs) {
-        return (this.props.fromValue?.clone() ?? dayjs().startOf("day")).year(date.year()).month(date.month()).date(date.date());
-    }
-
-    private getToValue(date: Dayjs) {
-        return (this.props.toValue?.clone() ?? dayjs().endOf("day")).year(date.year()).month(date.month()).date(date.date());
-    }
-
-    closePopup() {
-        // close tooltip
-        this.setState({popupKeyIndex: this.state.popupKeyIndex + 1, popupVisible: false});
-        this.props.onPopupVisibleChange?.(false);
-    }
-
-    private onChange(fromValue: Dayjs | null, toValue: Dayjs | null) {
-        if (this.props.minDateTime && fromValue?.isBefore(this.props.minDateTime)) {
-            fromValue = this.props.minDateTime;
-        }
-        if (this.props.maxDateTime && toValue?.isAfter(this.props.maxDateTime)) {
-            toValue = this.props.maxDateTime;
-        }
-        this.props.onChange?.(fromValue, toValue);
-    }
-
-    private renderSimplePart() {
-        const {
-            fromValue,
-            toValue,
-            onChange,
-            style,
-            allowClear,
-            renderAsCalendar,
-            hidePopup,
-            align,
-            defaultMode,
-            onModeChange,
-            confirmButtonsRenderer,
-            onPopupVisibleChange,
-            ...props
-        } = this.props;
-        const markedDateInterval: [Dayjs, Dayjs] | undefined = this.props.fromValue && this.props.toValue ? [this.props.fromValue, this.props.toValue] : undefined;
-
-        return (
-            <div>
-                <div style={{display: "flex"}}>
-                    <DateTimeInput value={fromValue} {...props}
-                                   allowClear={allowClear}
-                                   renderAsCalendar
-                                   style={{width: "100%"}}
-                                   onChange={(date) => {
-                                       if (date) {
-                                           const fromValue = this.getFromValue(date);
-                                           const toValue = this.getToValue(date);
-                                           this.props.onChange?.(fromValue, toValue);
-                                       }
-                                   }}
-                                   defaultSelectedDate={this.getDefaultSelectedDateForFromPanel(fromValue, toValue)}
-                                   markedDateInterval={markedDateInterval}
-                                   onDateItemMouseDown={(date) => {
-                                       this.setState({selectionStartDate: date});
-                                       const dateFrom = this.getFromValue(date);
-                                       const dateTo = this.getToValue(date);
-                                       this.props.onChange?.(dateFrom, dateTo);
-                                   }}
-                                   onDateItemMouseOver={(date) => {
-                                       if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
-                                           let dateFrom: Dayjs;
-                                           let dateTo: Dayjs;
-                                           if (this.state.selectionStartDate.isBefore(date)) {
-                                               dateFrom = this.state.selectionStartDate;
-                                               dateTo = date;
-                                           } else {
-                                               dateFrom = date;
-                                               dateTo = this.state.selectionStartDate;
-                                           }
-                                           dateFrom = this.getFromValue(dateFrom);
-                                           dateTo = this.getToValue(dateTo);
-                                           this.props.onChange?.(dateFrom, dateTo);
-                                       }
-                                   }}
-                                   onDateItemMouseUp={(_date) => {
-                                       this.setState({selectionStartDate: null});
-                                   }}
-                                   ignoreKeyStrokes
-                    />
-                    <Divider type="vertical" style={{height: "auto"}}/>
-                    <DateTimeInput value={toValue} {...props}
-                                   renderAsCalendar
-                                   allowClear={allowClear}
-                                   style={{width: "100%"}}
-                                   onChange={(date) => {
-                                       if (date) {
-                                           const fromValue = this.getFromValue(date);
-                                           const toValue = this.getToValue(date);
-                                           this.props.onChange?.(fromValue, toValue);
-                                       }
-                                   }}
-                                   markedDateInterval={markedDateInterval}
-                                   onDateItemMouseDown={(date) => {
-                                       this.setState({selectionStartDate: date});
-                                       const dateFrom = this.getFromValue(date);
-                                       const dateTo = this.getToValue(date);
-                                       this.props.onChange?.(dateFrom, dateTo);
-                                   }}
-                                   onDateItemMouseOver={(date) => {
-                                       if (KeyboardUtils.isMouseDown() && !!this.state.selectionStartDate) {
-                                           let dateFrom: Dayjs;
-                                           let dateTo: Dayjs;
-                                           if (this.state.selectionStartDate.isBefore(date)) {
-                                               dateFrom = this.state.selectionStartDate;
-                                               dateTo = date;
-                                           } else {
-                                               dateFrom = date;
-                                               dateTo = this.state.selectionStartDate;
-                                           }
-                                           dateFrom = this.getFromValue(dateFrom);
-                                           dateTo = this.getToValue(dateTo);
-                                           this.props.onChange?.(dateFrom, dateTo);
-                                       }
-                                   }}
-                                   onDateItemMouseUp={(_date) => {
-                                       this.setState({selectionStartDate: null});
-                                   }}
-                                   ignoreKeyStrokes
-                    />
-                </div>
-                <div style={{borderTop: "1px solid #ddd", paddingTop: 6}}>
-                        {
-                            this.props.ranges && Object.keys(this.props.ranges).map((rangeName, index) => {
-                                return (<Tag style={{userSelect: "none", cursor: "pointer"}} color="blue"
-                                            key={`range-${index}`}
-                                            onClick={() => {
-                                                const rangeFunction = this.props.ranges?.[rangeName];
-                                                if (rangeFunction) {
-                                                    const range = rangeFunction();
-                                                    this.props.onChange?.(range[0], range[1]);
-                                                }
-                                            }}>
-                                    {rangeName}</Tag>);
-                            })
-                        }
-                </div>
-            </div>
-        )
-    }
-
-    private renderAdvancedPart() {
-        const {
-            fromValue,
-            toValue,
-            onChange,
-            style,
-            allowClear,
-            renderAsCalendar,
-            hidePopup,
-            align,
-            defaultMode,
-            onModeChange,
-            confirmButtonsRenderer,
-            onPopupVisibleChange,
-            ...props
-        } = this.props;
-        return (
-            <div>
-                <div style={{display: "flex"}}>
-                    <DateTimeInput
-                        {...props}
-                        style={{width: "47%"}}
-                        value={fromValue}
-                        onChange={(value) => {
-                            this.props.onChange?.(value, this.props.toValue);
-                        }}
-                    />
-                    <span style={{width: "6%", paddingTop: 4, color: "rgba(0, 0, 0, 0.65)", textAlign: "center"}}>
-                        {"\u27F7"}
-                    </span>
-                    <DateTimeInput
-                        {...props}
-                        style={{width: "47%"}}
-                        value={toValue}
-                        onChange={(value) => {
-                            this.props.onChange?.(this.props.fromValue, value);
-                        }}
-                    />
-                </div>
-                <DateRangeInputAdvancedPanel
-                    onBeginIntervalChange={unit => {
-                        let from: Dayjs;
-                        if (unit === "15minutes") {
-                            const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
-                            from = dayjs().startOf("hour").minute(roundedMinutes);
-                        } else {
-                            from = dayjs().startOf(unit);
-                        }
-                        this.onChange(from, this.props.toValue);
-                    }}
-                    onIntervalDurationChange={unitOfTime => {
-                        if (this.props.fromValue) {
-                            let to: Dayjs;
-                            if (unitOfTime === "4years") {
-                                to = this.props.fromValue.clone().add(4, "year").subtract(1, "millisecond");
-                            } else {
-                                to = this.props.fromValue.clone().add(1, unitOfTime).subtract(1, "millisecond")
-                            }
-                            this.onChange(this.props.fromValue, to);
-                        }
-                    }}
-                    onTimeShift={(shiftBegin, shiftEnd, unitOfTime, type) => {
-                        let fromValue = this.props.fromValue ?? null;
-                        let toValue = this.props.toValue ?? null;
-
-                        if (shiftBegin && fromValue) {
-                            if (type === TimeShiftDirection.INCREMENT) {
-                                fromValue = fromValue.add(1, unitOfTime);
-                            } else if (type === TimeShiftDirection.DECREMENT) {
-                                fromValue = fromValue.subtract(1, unitOfTime);
-                            }
-                        }
-
-                        if (shiftEnd && toValue) {
-                            if (type === TimeShiftDirection.INCREMENT) {
-                                toValue = toValue.add(1, unitOfTime);
-                            } else if (type === TimeShiftDirection.DECREMENT) {
-                                toValue = toValue.subtract(1, unitOfTime);
-                            }
-                        }
-
-                        this.onChange(fromValue, toValue);
-                    }}
-                    onEndIntervalChange={unit => {
-                        let to: Dayjs;
-                        if (unit === "15minutes") {
-                            const roundedMinutes = Math.floor(dayjs().minute() / 15) * 15;
-                            to = dayjs().startOf("hour").minute(roundedMinutes).subtract(1, "millisecond");
-                        } else {
-                            to = dayjs().startOf(unit).subtract(1, "millisecond");
-                        }
-                        this.onChange(this.props.fromValue, to);
-                    }}
-                />
-            </div>
-        )
-    }
-
-    renderPopup(): React.ReactElement {
-        return (
-            <div onFocus={this.props.onFocus} onBlur={this.props.onBlur}>
-                {this.state.mode === DateRangeInputMode.SIMPLE && this.renderSimplePart()}
-                {this.state.mode === DateRangeInputMode.ADVANCED && this.renderAdvancedPart()}
-                <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
-                    <Switch
-                        style={{float: "right", marginTop: 8}}
-                        checked={this.state.mode === DateRangeInputMode.ADVANCED}
-                        onChange={checked => {
-                            const mode = checked ? DateRangeInputMode.ADVANCED : DateRangeInputMode.SIMPLE;
-                            this.setState({mode: mode});
-                            this.props.onModeChange?.(mode);
-                        }}
-                        checkedChildren={i18n("Advanced Mode")}
-                        unCheckedChildren={i18n("Simple Mode")}
-                    />
-                    {this.props.confirmButtonsRenderer?.()}
-                </div>
-            </div>
-        );
-    }
-
-    renderInput() {
-        const {
-            className,
-            fromValue,
-            toValue,
-            onChange,
-            style,
-            allowClear,
-            renderAsCalendar,
-            hidePopup,
-            align,
-            disabled,
-            defaultMode,
-            onModeChange,
-            confirmButtonsRenderer,
-            onPopupVisibleChange,
-            ...props
-        } = this.props;
-
-        let customClassName = `ant-input ant-input-outlined ${className ?? ""}`;
-        if (disabled || this.state.popupVisible) {
-            customClassName += " ant-input-disabled";
-        }
-
-        return (
-            <div style={{...style, padding: 0, position: "relative"}} className={customClassName} onFocus={this.props.onFocus}
-                 onBlur={this.props.onBlur}>
-                <div style={{display: "flex", paddingRight: 8}}>
-                    <DateTimeInput value={fromValue} {...props}
-                                   disabled={disabled}
-                                   inputDisabled={this.state.popupVisible}
-                                   allowClear={allowClear}
-                                   bordered={false}
-                                   hidePopup={true}
-                                   style={{width: "auto"}}
-                                   inputStyle={{paddingRight: 2}}
-                                   onChange={(value) => {
-                                       this.props.onChange?.(value, this.props.toValue);
-                                   }}
-                    />
-                    <span style={{alignSelf: "center"}}>{"\u27F7"}</span>
-                    <DateTimeInput value={toValue} {...props}
-                                   disabled={disabled}
-                                   inputDisabled={this.state.popupVisible}
-                                   allowClear={allowClear}
-                                   bordered={false}
-                                   hidePopup={true}
-                                   style={{width: "auto"}}
-                                   inputStyle={{paddingLeft: 2}}
-                                   onChange={(value) => {
-                                       this.props.onChange?.(this.props.fromValue, value);
-                                   }}
-                    />
-                    {!hidePopup && !renderAsCalendar &&
-                        <CalendarOutlined
-                            style={{cursor: (disabled || this.state.popupVisible) ? "not-allowed" : "pointer"}}
-                            onClick={(event) => {
-                                if (!disabled && document.createEvent) {
-                                    if (this.state.popupVisible) {
-                                        this.closePopup();
-                                    } else {
-                                        var ev = document.createEvent('HTMLEvents');
-                                        ev.initEvent('contextmenu', true, false);
-                                        event.target.dispatchEvent(ev);
-                                        this.props.onFocus?.();
-                                    }
-                                }
-                            }}
-                        />
-                    }
-                </div>
-            </div>
-        );
-    }
-
-    render(): any {
-        if (this.props.renderAsCalendar) {
-            return this.renderPopup();
-        } else if (this.props.hidePopup) {
-            return this.renderInput();
-        } else {
-            return (
-                <Tooltip color={"white"}
-                         key={"date-range-popup-" + this.state.popupKeyIndex}
-                         trigger={this.props.disabled ? [] : ["contextMenu"]}
-                         align={this.props.align}
-                         placement={this.props.placement}
-                         overlayInnerStyle={{maxHeight: "100vh", overflowY: "auto", overflowX: "hidden"}}
-                         onOpenChange={(visible) => {
-                             if (visible) {
-                                 this.props.onFocus?.();
-                             } else {
-                                 this.props.onBlur?.();
-                             }
-                             this.setState({popupVisible: visible});
-                         }}
-                         overlayClassName={"date-range-picker-popup"}
-                         title={this.renderPopup()}>
-                    {this.renderInput()}
-                </Tooltip>
-            );
-        }
-    }
-}