d2coreui 23.0.13 → 23.0.15

package/components/date/durationInput.tsx

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

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

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

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

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

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