d2coreui 23.0.15 → 23.0.17

package/components/date/durationInput.tsx

@@ -1,375 +0,0 @@
-import React, {HTMLAttributes, RefObject} from "react";
-import MaskedInput from "d2coreui/components/input/maskedInput";
-import dayjs, {isDuration, ManipulateType} from "dayjs";
-import {Duration} from "d2core/dayjs/duration";
-import {LocaleHolder} from "d2core/i18n/localeHolder";
-import {AutoComplete} from "antd";
-import DropdownArrow from "../icons/dropdownArrow";
-import WithInputNumberCss from "d2coreui/components/style/withInputNumberCss";
-import {SizeType} from "antd/lib/config-provider/SizeContext";
-
-interface DurationInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-    mask: string
-    value: Duration | null
-    onChange?: (time: Duration | null) => void
-    predefinedValues?: { key: string, value: string }[]
-    disabled?: boolean
-    inputStyle?: React.CSSProperties
-    autoFocus?: boolean
-    size?: SizeType;
-}
-
-interface DurationInputState {
-    valid: boolean
-    selectionStart: number | null
-    selectionEnd: number | null
-    currentInfo: MaskResult
-    opened: boolean
-    value: string
-}
-
-interface MaskResult {
-    time?: Duration
-    info?: InfoEntry
-    infoFromMask?: EntryValue[]
-    length: number
-}
-
-interface InfoEntry {
-    key: string
-    min: number
-    max: number
-    minLen: number
-    maxLen: number
-    mult: number
-    unit: ManipulateType
-}
-
-interface EntryValue {
-    length: number
-    infoEntry: InfoEntry
-    value: number
-}
-
-const DURATION_DATA_MAP: InfoEntry[] = [
-    {key: "SSS", min: 0, max: 999, minLen: 3, maxLen: 3, mult: 1, unit: "ms"},
-    {key: "s", min: 0, max: 59, minLen: 1, maxLen: 2, mult: 1000, unit: "s"},
-    {key: "m", min: 0, max: 59, minLen: 1, maxLen: 2, mult: 60 * 1000, unit: "m"},
-    {key: "H", min: 0, max: 23, minLen: 1, maxLen: 2, mult: 60 * 60 * 1000, unit: "h"},
-    {key: "D", min: 0, max: 24854, minLen: 1, maxLen: 5, mult: 24 * 60 * 60 * 1000, unit: "d"},
-];
-
-export const MAX_VALID_DURATION = 24854 * 24 * 60 * 60 * 1000 + 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000 + 499;
-
-export function parseDuration(value: string, mask: string, cursorPos?: number, maskResult?: MaskResult): Duration | null {
-    let result: Duration = dayjs.duration(0);
-    const clearMaskResult = () => {
-        if (maskResult) {
-            maskResult.info = undefined;
-            maskResult.length = 0;
-            maskResult.infoFromMask = undefined;
-            maskResult.time = undefined;
-        }
-    }
-    let maskPos: number = 0;
-    let valPos: number;
-
-    for (valPos = 0; valPos < value.length; valPos++) {
-        const c: string = value.charAt(valPos);
-
-        if (['D', 'H', 'm', 's', 'S'].includes(mask.charAt(maskPos))) { // je to maska
-            if (/\d/.test(c)) {
-                const entry: EntryValue | undefined = getInfoFromMask(mask, maskPos);
-
-                if (entry) {
-                    let str = c;
-
-                    while (/\d/.test(value.charAt(valPos + 1))) {
-                        valPos++;
-                        str += value.charAt(valPos);
-                    }
-
-                    if (str.length !== entry.length) {
-                        clearMaskResult();
-                        return null;
-                    }
-
-                    const time: number = parseInt(str);
-
-                    result = result.add(dayjs.duration(time, entry.infoEntry.unit));
-                    if (maskResult) {
-                        const item: EntryValue = {
-                            value: time,
-                            length: str.length,
-                            infoEntry: entry.infoEntry,
-                        }
-
-                        if (maskResult.infoFromMask) {
-                            maskResult.infoFromMask.push(item);
-                        } else {
-                            maskResult.infoFromMask = [item];
-                        }
-                    }
-                    maskPos += entry.length;
-
-                    if (cursorPos !== undefined && maskResult !== undefined && cursorPos >= valPos - str.length + 1 && cursorPos <= valPos + 1) {
-                        maskResult.info = entry.infoEntry;
-                        maskResult.length = str.length;
-                    }
-                } else {
-                    clearMaskResult();
-                    return null;
-                }
-            } else {
-                // non-numeric character when value expected
-                clearMaskResult();
-                return null;
-            }
-        } else {
-            if (c === mask.charAt(maskPos)) {
-                // skip special characters
-                maskPos++;
-            }
-        }
-    }
-
-    if (maskPos === mask.length && valPos === value.length && result.asMilliseconds() <= MAX_VALID_DURATION) {
-        if (maskResult !== undefined) {
-            maskResult.time = result;
-        }
-        return result;
-    }
-
-    clearMaskResult();
-    return null;
-}
-
-export default class DurationInput extends React.Component<DurationInputProps, DurationInputState> {
-    private inputRef: RefObject<MaskedInput> = React.createRef();
-
-    constructor(props: Readonly<DurationInputProps>) {
-        super(props);
-        this.state = {
-            valid: isDuration(props.value),
-            selectionStart: null,
-            selectionEnd: null,
-            currentInfo: {
-                info: undefined,
-                infoFromMask: undefined,
-                time: undefined,
-                length: 0
-            },
-            opened: false,
-            value: formatDuration(props.value, props.mask),
-        };
-
-        this.recalc = this.recalc.bind(this);
-        this.increment = this.increment.bind(this);
-        this.decrement = this.decrement.bind(this);
-    }
-
-    componentDidUpdate(): void {
-        if (this.inputRef.current !== null) {
-            this.inputRef.current.input.selectionStart = this.state.selectionStart;
-            this.inputRef.current.input.selectionEnd = this.state.selectionEnd;
-        }
-
-        const value: string = formatDuration(this.props.value, this.props.mask);
-
-        if (this.state.value !== value) {
-            this.setState({
-                value: value,
-                valid: isDuration(this.props.value),
-            });
-        }
-    }
-
-    recalc(): void {
-        if (this.inputRef.current !== null) {
-            const value: MaskResult = {length: 0};
-            parseDuration(this.inputRef.current.input.value, this.props.mask, this.inputRef.current.input.selectionStart ?? undefined, value);
-            this.setState({
-                currentInfo: value,
-                selectionStart: this.inputRef.current.input.selectionStart,
-                selectionEnd: this.inputRef.current.input.selectionEnd,
-            });
-        }
-    }
-
-    increment(): void {
-        if (this.state.currentInfo.info !== undefined && checkValue(this.state.currentInfo, this.props.value, 1)) {
-            this.props.onChange?.(this.props.value?.add(1, this.state.currentInfo.info.unit) ?? null);
-            this.setState({selectionEnd: this.state.selectionStart});
-        }
-
-        this.inputRef.current?.focus();
-    }
-
-    decrement(): void {
-        if (this.state.currentInfo.info !== undefined && checkValue(this.state.currentInfo, this.props.value, -1)) {
-            this.props.onChange?.(this.props.value?.subtract(1, this.state.currentInfo.info.unit) ?? null);
-            this.setState({selectionEnd: this.state.selectionStart});
-        }
-
-        this.inputRef.current?.focus();
-    }
-
-    get input() {
-        return this.inputRef.current?.input;
-    }
-
-    focus() {
-        this.inputRef.current?.focus();
-    }
-
-    render() {
-        const {mask, value, onChange, style, disabled, predefinedValues, autoFocus, size, ...props} = this.props;
-        const incrementButtonDisabled = this.state.currentInfo.info === undefined || !checkValue(this.state.currentInfo, this.props.value, 1);
-        const decrementButtonDisabled = this.state.currentInfo.info === undefined || !checkValue(this.state.currentInfo, this.props.value, -1);
-
-        return (
-            <WithInputNumberCss>
-            <div style={{width: "100%", ...style}}
-                 {...props}
-                 className={!predefinedValues ? "ant-input-number ant-input-number-outlined" : ""}
-                 onKeyDown={(event) => {
-                     if (event.code === "ArrowUp") { // up
-                         this.increment();
-                         event.preventDefault();
-                         event.stopPropagation();
-                     } else if (event.code === "ArrowDown") { // down
-                         this.decrement();
-                         event.preventDefault();
-                         event.stopPropagation();
-                     }
-                 }}
-            >
-                <AutoComplete
-                    className={this.state.valid ? "" : "invalid"}
-                    options={this.state.opened ? predefinedValues?.map(v => {
-                        return {value: v.value, label: v.key}
-                    }) : []}
-                    defaultOpen={false}
-                    defaultActiveFirstOption={false}
-                    defaultValue={undefined}
-                    disabled={disabled}
-                    autoFocus={autoFocus}
-                    style={{width: "100%", height: "inherit"}}
-                    value={this.state.valid ? this.state.value : ""}
-                    onSelect={(e) => {
-                        const val: Duration = dayjs.duration(Number(e));
-                        this.setState({
-                            opened: false,
-                            valid: isDuration(val),
-                            value: formatDuration(val, this.props.mask),
-                        });
-                        onChange?.(val === undefined ? null : val);
-                    }}
-                    onBlur={() => {
-                        this.setState({opened: false});
-                    }}>
-                    <MaskedInput mask={this.props.mask.replace(/[a-zA-Z]/g, '1')}
-                                 ref={this.inputRef}
-                                 style={{
-                                     border: predefinedValues ? undefined : "none",
-                                     ...this.props.inputStyle
-                                 }}
-                                 size={size}
-                                 placeholder={this.props.mask.replace(/[a-zA-Z]/g, '_')}
-                                 autoFocus={autoFocus}
-                                 onFocus={(event => {
-                                     event.target.selectionStart = event.target.selectionEnd = this.state.selectionStart;
-                                 })}
-                                 suffix={
-                                     this.props.predefinedValues !== undefined && this.props.predefinedValues.length > 0 &&
-                                     <DropdownArrow opened={this.state.opened}
-                                                    onClick={() => {
-                                         if (!this.props.disabled) {
-                                             this.setState({opened: !this.state.opened});
-                                         }
-                                     }}/>
-                                 }
-                                 onMouseUp={this.recalc}
-                                 onKeyUp={this.recalc}
-                                 onChange={(event) => {
-                                     const value: MaskResult = {length: 0};
-                                     parseDuration(event.target.value, this.props.mask, event.target.selectionStart ?? undefined, value);
-                                     onChange?.(value.time === undefined ? null : value.time);
-                                     this.setState({
-                                         valid: isDuration(value.time),
-                                         currentInfo: value,
-                                         value: event.target.value,
-                                     });
-                                 }}
-                    />
-                </AutoComplete>
-                {!predefinedValues && !disabled &&
-                    <div className="ant-input-number-handler-wrap">
-                        <span onClick={this.increment} className={`ant-input-number-handler ant-input-number-handler-up ${incrementButtonDisabled ? "ant-input-number-handler-up-disabled" : ""}`}>
-                            <span className="anticon anticon-up ant-input-number-handler-up-inner">
-                                <svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-                                    <path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path>
-                                </svg>
-                            </span>
-                        </span>
-                        <span onClick={this.decrement} className={`ant-input-number-handler ant-input-number-handler-down ${decrementButtonDisabled ? "ant-input-number-handler-down-disabled" : ""}`}>
-                            <span className="anticon anticon-down ant-input-number-handler-down-inner">
-                                <svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
-                                    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
-                                </svg>
-                            </span>
-                        </span>
-                    </div>
-                }
-            </div>
-            </WithInputNumberCss>
-        );
-    }
-}
-
-function checkValue(info: MaskResult, value: Duration | null, offset = 0): boolean {
-    const currentMillis = value ? value.add(offset, info.info?.unit).asMilliseconds() : 0;
-    const maxValues = info?.infoFromMask ? info.infoFromMask.map((i) => (i.length !== i.infoEntry.maxLen ? (Math.pow(10, i.length) - 1) : i.infoEntry.max) * i.infoEntry.mult) : [];
-    const maxMaskedValue = info?.infoFromMask ? maxValues.reduce((p, n) => p + n, 0) : 0;
-    return !!value && currentMillis >= 0 && currentMillis <= MAX_VALID_DURATION && currentMillis <= maxMaskedValue;
-}
-
-function formatDuration(value: Duration | null, mask: string): string {
-    //@ts-ignore
-    return (isDuration(value) ? value : dayjs.duration(0)).locale("locale.d2000").format(mask, {
-        trim: false,
-        decimalSeparator: LocaleHolder.decimalSeparator,
-        useGrouping: false,
-        groupingSeparator: "",
-        userLocale: LocaleHolder.formattingLocale
-    })
-}
-
-function getInfoFromMask(mask: string, fromPos: number): EntryValue | undefined {
-    if (fromPos < mask.length) {
-        const ch = mask.charAt(fromPos);
-        const info = DURATION_DATA_MAP.find((d) => d.key.includes(ch));
-
-        if (info) {
-            const entry: EntryValue = {
-                length: 1,
-                value: 0,
-                infoEntry: info,
-            }
-
-            for (let i = fromPos + 1; i < mask.length; i++) {
-                const c = mask.charAt(i);
-
-                if (c === ch) {
-                    entry.length++;
-                } else {
-                    break;
-                }
-            }
-
-            return entry;
-        }
-    }
-
-    return undefined;
-}

package/components/form/NiceFormItem.tsx

@@ -1,32 +0,0 @@
-import React, {CSSProperties, ReactNode} from "react";
-import {Form, FormItemProps} from "antd"
-import "../../style/form/niceFormItem.css"
-
-export interface NiceFormItemProps extends FormItemProps {
-    border?: boolean
-    disabled?: boolean
-    labelStyle?: CSSProperties
-}
-
-export interface NiceFormItemState {
-}
-
-export class NiceFormItem extends React.Component<NiceFormItemProps, NiceFormItemState> {
-    constructor(props: Readonly<NiceFormItemProps> | NiceFormItemProps) {
-        super(props);
-    }
-
-    render() {
-        const {label, children, border, disabled, className, labelStyle, ...rest} = this.props;
-        const eLabelStyle = !!labelStyle ? {...labelStyle} : (disabled ? {} : undefined);
-        const classNames = "nice-form-item" + (className ?? "")
-        
-        return (
-            <Form.Item {...rest} className={classNames}>
-                <div className="nice-float-label">
-                    {(border ? <section className="nice-form-item-box">{children as ReactNode}</section> : children) as ReactNode}
-                    <label className="nice-label nice-label-float" style={eLabelStyle}>{label}</label>
-                </div>
-            </Form.Item>);
-    }
-}

package/components/grid/cell/beanAccessor.ts

@@ -1,17 +0,0 @@
-import {BeanCollection, BeanStub, GridApi, NamedBean} from "ag-grid-community";
-
-export interface GridApiWithPrivateAccess extends GridApi {
-    beans: BeanCollection;
-}
-
-export default class BeanAccessor extends BeanStub implements NamedBean {
-    // @ts-ignore
-    beanName = "beanAccessor" as const
-
-    public wireBeans(beans: BeanCollection) {
-        (beans.gridApi as GridApiWithPrivateAccess).beans = beans;
-    }
-
-    public postConstruct(): void {
-    }
-}

package/components/grid/cell/cellEditorUtils.ts

@@ -1,12 +0,0 @@
-import KeyboardUtils from "d2coreui/components/keyboard/keyboardUtils";
-import {Key} from "ts-key-enum";
-import React from 'react';
-
-export class CellEditorUtils {
-    static shouldIgnoreKeyEvent<T>(e: React.KeyboardEvent<T>): boolean {
-        return (
-            (KeyboardUtils.isKeyPressed(Key.Alt) && (e.key === Key.ArrowUp || e.key === Key.ArrowDown)) ||
-            (KeyboardUtils.isKeyPressed(Key.Control) && e.key === "KeyA")
-        );
-    }
-}

package/components/grid/cell/customEnumCellEditor.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import {RefSelectProps} from "antd/es/select";
-import debounce from "lodash/debounce";
-import {Select} from "antd";
-import ReactDOM from "react-dom";
-import {Key} from "ts-key-enum";
-import {CustomCellEditorProps} from "ag-grid-react";
-import {DataGridCellEditorComponent, withAgGridHooks} from "./dataGridCellEditorComponent";
-
-interface CustomEnumCellEditorProps extends CustomCellEditorProps {
-    values: string[]
-    listHeight?: number
-}
-
-interface CustomEnumCellEditorState {
-    value: number | null
-    opened: boolean
-}
-
-class CustomEnumCellEditor extends DataGridCellEditorComponent<CustomEnumCellEditorProps, CustomEnumCellEditorState> {
-    private selectComponent: RefSelectProps | null = null;
-    private wrappingComponent: HTMLDivElement | null = null;
-
-    constructor(props: Readonly<CustomEnumCellEditorProps>) {
-        super(props);
-        this.state = this.getInitialState(props);
-        this.updateValueFromPreselection = debounce(this.updateValueFromPreselection.bind(this), 200, {maxWait: 200});
-    }
-
-    getInitialState(props: Readonly<CustomEnumCellEditorProps>): CustomEnumCellEditorState {
-        let value: number | null;
-        if (props.eventKey === Key.Backspace || props.eventKey === Key.Delete) {
-            // if backspace or delete pressed, we clear the cell
-            value = null;
-            props.onValueChange(null);
-        } else if (props.eventKey && props.eventKey.length === 1) {
-            // if a letter was pressed, we start with the letter
-            const parsedValue = Number.parseInt(props.eventKey);
-            value = isNaN(parsedValue) ? props.value : parsedValue;
-            props.onValueChange(value);
-        } else {
-            // otherwise we start with the current value
-            value = props.initialValue;
-        }
-        return {
-            value: value,
-            opened: true,
-        } as CustomEnumCellEditorState;
-    }
-
-    focus() {
-        this.selectComponent?.focus();
-    }
-
-    select() {
-    }
-
-    placeCursorToEnd() {
-    }
-
-    private updateValueFromPreselection() {
-        setTimeout(() => {
-            let selectables: HTMLElement[] = Array.from(this.wrappingComponent?.getElementsByClassName("ant-select-item-option-active") ?? []) as HTMLElement[];
-            if (selectables.length > 0) {
-                const optionStringValue = selectables[0].dataset?.optionvalue;
-                const optionValue = optionStringValue !== undefined ? Number.parseFloat(optionStringValue) : undefined
-                if (optionValue) {
-                    this.setState({value: optionValue});
-                    this.props.onValueChange(optionValue);
-                }
-            }
-        }, 200)
-    }
-
-    render() {
-        return (
-            <div style={{width: "100%", minWidth: 150, height: 24}}>
-                <Select
-                    ref={(component) => {
-                        this.selectComponent = component;
-                    }}
-                    size={"small"}
-                    virtual={false}
-                    className={"select-with-one-item"}
-                    popupMatchSelectWidth={false}
-                    style={{width: "100%", overflow: "auto", padding: 0, margin: 0}}
-                    dropdownStyle={{width: "100%", maxHeight: 400, overflow: 'auto'}}
-                    showAction={['focus', 'click']}
-                    listHeight={this.props.listHeight}
-                    value={this.state.value !== null ? this.state.value : undefined}
-                    onChange={(value) => {
-                        const valueToSet = value === undefined ? null : value;
-                        this.setState({value: valueToSet});
-                        this.props.onValueChange(valueToSet);
-                    }}
-                    onSelect={(value) => {
-                        const valueToSet = value === undefined ? null : value;
-                        this.setState({value: valueToSet});
-                        this.props.onValueChange(valueToSet);
-                    }}
-                    open={this.state.opened}
-                    onDropdownVisibleChange={(visible) => {
-                        this.setState({opened: visible});
-                    }}
-                    getPopupContainer={(_trigger) => {
-                        // very nasty trick how to keep select's popup within focusable area of ag-grid cell editor popup (prevent closing cell editor when we click in select's dropdown area)
-                        return (ReactDOM.findDOMNode(this)?.parentNode ?? document.body) as HTMLElement;
-                    }}
-                    dropdownRender={(menu) => {
-                        return (
-                            <div ref={(component) => {
-                                this.wrappingComponent = component;
-                            }}>
-                                {menu}
-                            </div>
-                        );
-                    }}
-                >
-                    {this.props.values.map((value, index) => {
-                        return (
-                            <Select.Option value={index} key={index}>{value}</Select.Option>
-                        )
-                    })}
-                </Select>
-            </div>
-        )
-    }
-}
-
-export default withAgGridHooks(CustomEnumCellEditor);

package/components/grid/cell/dataGridCellEditorComponent.tsx

@@ -1,61 +0,0 @@
-import {CustomCellEditorProps, useGridCellEditor} from "ag-grid-react";
-import React, {useRef} from "react";
-import {Key} from "ts-key-enum";
-
-export class DataGridCellEditorComponent<P extends CustomCellEditorProps, S> extends React.Component<P, S> {
-    private focusOpId: number | null = null;
-    private highlightAllOnFocus: boolean = true;
-
-    constructor(props: P) {
-        super(props);
-        if (!!props.eventKey && (props.eventKey.length === 1 || props.eventKey === Key.F2)) {
-            this.highlightAllOnFocus = false;
-        }
-    }
-
-    componentDidMount() {
-        this.focusOpId = window.setTimeout(() => {
-            this.focus();
-            if (this.highlightAllOnFocus) {
-                this.select();
-                this.highlightAllOnFocus = false;
-            } else {
-                this.placeCursorToEnd();
-            }
-        }, 200);
-    }
-
-    componentWillUnmount() {
-        if (this.focusOpId) {
-            clearTimeout(this.focusOpId);
-        }
-    }
-
-    focus() {
-    }
-
-    select() {
-    }
-
-    placeCursorToEnd() {
-    }
-
-    /** Optional: Gets called once after initialised. If you return true, the editor will not be
-     * used and the grid will continue editing. Use this to make a decision on editing
-     * inside the init() function, eg maybe you want to only start editing if the user
-     * hits a numeric key, but not a letter, if the editor is for numbers.
-     */
-    isCancelBeforeStart?(): boolean;
-}
-
-export function withAgGridHooks<P extends CustomCellEditorProps, S>(Component: any) {
-    return (props: CustomCellEditorProps) => {
-        const componentRef: React.MutableRefObject<DataGridCellEditorComponent<P, S> | null> = useRef(null);
-        useGridCellEditor({
-            isCancelBeforeStart: () => {
-                return componentRef.current?.isCancelBeforeStart?.() ?? false;
-            }
-        });
-        return <Component ref={componentRef} {...props} />;
-    };
-}