d2coreui 23.0.14 → 23.0.15

package/components/modal/impl/draggableModalReducer.ts

@@ -0,0 +1,285 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+import {getWindowSize} from './getWindowSize'
+import {clamp} from './clamp'
+
+const mapObject = <T>(o: { [key: string]: T }, f: (value: T) => T): { [key: string]: T } =>
+    Object.assign({}, ...Object.keys(o).map(k => ({[k]: f(o[k])})))
+
+// ID for a specific modal.
+export type ModalID = string
+
+// State for a specific modal.
+export interface ModalState {
+    x: number
+    y: number
+    width: number
+    height: number
+    zIndex: number
+    visible: boolean
+}
+
+// State of all modals.
+export interface ModalsState {
+    maxZIndex: number
+    windowSize: {
+        width: number
+        height: number
+    }
+    modals: {
+        [key: string]: ModalState
+    }
+}
+
+export const initialModalsState: ModalsState = {
+    maxZIndex: 0,
+    windowSize: getWindowSize(),
+    modals: {},
+};
+
+export const initialModalState: ModalState = {
+    x: 0,
+    y: 0,
+    width: 400,
+    height: 400,
+    zIndex: 0,
+    visible: false,
+};
+
+const getInitialModalState = ({
+                                  initialWidth = initialModalState.width,
+                                  initialHeight = initialModalState.height,
+                              }: {
+    initialWidth?: number
+    initialHeight?: number
+}) => {
+    return {
+        ...initialModalState,
+        width: initialWidth,
+        height: initialHeight,
+    }
+}
+
+export type Action =
+    | { type: 'show'; id: ModalID }
+    | { type: 'hide'; id: ModalID }
+    | { type: 'focus'; id: ModalID }
+    | { type: 'unmount'; id: ModalID }
+    | { type: 'mount'; id: ModalID, intialState: { initialWidth?: number; initialHeight?: number } }
+    | { type: 'windowResize'; size: { width: number; height: number } }
+    | { type: 'drag'; id: ModalID; x: number; y: number }
+    | {
+    type: 'resize'
+    id: ModalID
+    x: number
+    y: number
+    width: number
+    height: number
+}
+
+export const getModalState = ({
+                                  state,
+                                  id,
+                                  initialWidth,
+                                  initialHeight,
+                              }: {
+    state: ModalsState
+    id: ModalID
+    initialWidth?: number
+    initialHeight?: number
+}): ModalState => state.modals[id] || getInitialModalState({ initialWidth, initialHeight })
+
+const getNextZIndex = (state: ModalsState, id: string): number =>
+    getModalState({state, id}).zIndex === state.maxZIndex ? state.maxZIndex : state.maxZIndex + 1;
+
+const clampDrag = (
+    windowWidth: number,
+    windowHeight: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+): { x: number; y: number } => {
+    const maxX = windowWidth - width;
+    const maxY = windowHeight - height;
+    const clampedX = clamp(0, maxX, x);
+    const clampedY = clamp(0, maxY, y);
+    return {x: clampedX, y: clampedY}
+}
+
+const clampResize = (
+    windowWidth: number,
+    windowHeight: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+): { width: number; height: number } => {
+    const maxWidth = windowWidth - x;
+    const maxHeight = windowHeight - y;
+    const clampedWidth = clamp(200, maxWidth, width);
+    const clampedHeight = clamp(200, maxHeight, height);
+    return {width: clampedWidth, height: clampedHeight}
+}
+
+export const draggableModalReducer = (state: ModalsState, action: Action): ModalsState => {
+    switch (action.type) {
+        case 'resize':
+            const size = clampResize(
+                state.windowSize.width,
+                state.windowSize.height,
+                action.x,
+                action.y,
+                action.width,
+                action.height,
+            )
+            return {
+                ...state,
+                maxZIndex: getNextZIndex(state, action.id),
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...state.modals[action.id],
+                        ...size,
+                        zIndex: getNextZIndex(state, action.id),
+                    },
+                },
+            }
+        case 'drag':
+            return {
+                ...state,
+                maxZIndex: getNextZIndex(state, action.id),
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...state.modals[action.id],
+                        ...clampDrag(
+                            state.windowSize.width,
+                            state.windowSize.height,
+                            action.x,
+                            action.y,
+                            state.modals[action.id].width,
+                            state.modals[action.id].height,
+                        ),
+                        zIndex: getNextZIndex(state, action.id),
+                    },
+                },
+            }
+        case 'show': {
+            const modalState = state.modals[action.id]
+            const centerX = state.windowSize.width / 2 - modalState.width / 2
+            const centerY = state.windowSize.height / 2 - modalState.height / 2
+            const position = clampDrag(
+                state.windowSize.width,
+                state.windowSize.height,
+                centerX,
+                centerY,
+                modalState.width,
+                modalState.height,
+            )
+            const size = clampResize(
+                state.windowSize.width,
+                state.windowSize.height,
+                position.x,
+                position.y,
+                modalState.width,
+                modalState.height,
+            )
+            return {
+                ...state,
+                maxZIndex: state.maxZIndex + 1,
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...modalState,
+                        ...position,
+                        ...size,
+                        zIndex: state.maxZIndex + 1,
+                        visible: true,
+                    },
+                },
+            }
+        }
+        case 'focus':
+            const modalState = state.modals[action.id]
+            return {
+                ...state,
+                maxZIndex: state.maxZIndex + 1,
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...modalState,
+                        zIndex: state.maxZIndex + 1,
+                    },
+                },
+            }
+        case 'hide': {
+            const modalState = state.modals[action.id]
+            return {
+                ...state,
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...modalState,
+                        visible: false,
+                    },
+                },
+            }
+        }
+        case 'mount':
+            const initialState = getInitialModalState(action.intialState);
+            return {
+                ...state,
+                maxZIndex: state.maxZIndex + 1,
+                modals: {
+                    ...state.modals,
+                    [action.id]: {
+                        ...initialState,
+                        x: state.windowSize.width / 2 - initialState.width / 2,
+                        y: state.windowSize.height / 2 - initialState.height / 2,
+                        zIndex: state.maxZIndex + 1,
+                    },
+                },
+            };
+        case 'unmount':
+            const modalsClone = {...state.modals};
+            delete modalsClone[action.id];
+            return {
+                ...state,
+                modals: modalsClone,
+            };
+        case 'windowResize':
+            return {
+                ...state,
+                windowSize: action.size,
+                modals: mapObject(state.modals, (modalState: ModalState) => {
+                    if (!modalState.visible) {
+                        return modalState
+                    }
+                    const position = clampDrag(
+                        state.windowSize.width,
+                        state.windowSize.height,
+                        modalState.x,
+                        modalState.y,
+                        modalState.width,
+                        modalState.height,
+                    )
+                    const size = clampResize(
+                        state.windowSize.width,
+                        state.windowSize.height,
+                        position.x,
+                        position.y,
+                        modalState.width,
+                        modalState.height,
+                    )
+                    return {
+                        ...modalState,
+                        ...position,
+                        ...size,
+                    }
+                }),
+            }
+        default:
+            throw new Error()
+    }
+}

package/components/modal/impl/getWindowSize.ts

@@ -0,0 +1,6 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+export const getWindowSize = (): { width: number; height: number } => ({
+    width: window.innerWidth || 0,
+    height: window.innerHeight || 0,
+})

package/components/modal/impl/index.ts

@@ -0,0 +1,5 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+export * from './draggableModal'
+export * from './draggableModalContext'
+export * from '../draggableModalProvider'

package/components/modal/impl/resizeHandle.tsx

@@ -0,0 +1,12 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+import * as React from 'react'
+import '../../../style/modal/ResizeHandle.css'
+
+export const ResizeHandle = (
+    props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+): React.ReactElement => (
+    <div className="ant-design-draggable-modal-resize-handle" {...props}>
+        <div className="ant-design-draggable-modal-resize-handle-inner" />
+    </div>
+)

package/components/modal/impl/useDrag.ts

@@ -0,0 +1,57 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+import * as React from 'react'
+import {useCallback, useEffect, useState} from 'react'
+
+export const useDrag = (
+    x: number,
+    y: number,
+    onDrag: (args: { x: number; y: number }) => void,
+): ((e: React.MouseEvent) => void) => {
+    const [dragging, setDragging] = useState(false)
+    const [initialDragState, setInitialDragState] = useState({
+        initX: 0,
+        initY: 0,
+        mouseDownX: 0,
+        mouseDownY: 0,
+    })
+
+    const onMouseDown = useCallback(
+        (e: React.MouseEvent) => {
+            e.preventDefault()
+            setInitialDragState({
+                initX: x,
+                initY: y,
+                mouseDownX: e.clientX,
+                mouseDownY: e.clientY,
+            })
+            setDragging(true)
+        },
+        [x, y, setDragging, setInitialDragState],
+    )
+
+    useEffect(() => {
+        const onMouseMove = (e: MouseEvent): void => {
+            if (dragging) {
+                const { initX, mouseDownX, initY, mouseDownY } = initialDragState
+                let dx = e.clientX - mouseDownX
+                let dy = e.clientY - mouseDownY
+                const x = initX + dx
+                const y = initY + dy
+                onDrag({ x, y })
+            }
+        }
+        window.addEventListener('mousemove', onMouseMove, { passive: true })
+        return () => window.removeEventListener('mousemove', onMouseMove)
+    }, [initialDragState, dragging, onDrag])
+
+    useEffect(() => {
+        const onMouseUp = (): void => {
+            setDragging(false)
+        }
+        window.addEventListener('mouseup', onMouseUp)
+        return () => window.removeEventListener('mouseup', onMouseUp)
+    }, [setDragging])
+
+    return onMouseDown
+}

package/components/modal/impl/usePrevious.ts

@@ -0,0 +1,11 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+import {useEffect, useRef} from 'react'
+
+export const usePrevious = <T>(value: T): T => {
+    const ref = useRef<T>(value)
+    useEffect(() => {
+        ref.current = value
+    }, [value])
+    return ref.current
+}

package/components/modal/impl/useResize.ts

@@ -0,0 +1,79 @@
+// https://github.com/CUBETIQ/antd-modal/
+
+import * as React from 'react'
+import {useCallback, useEffect, useState} from 'react'
+
+interface InitialState {
+    initX: number
+    initY: number
+    initWidth: number
+    initHeight: number
+    mouseDownX: number
+    mouseDownY: number
+}
+
+export const useResize = (
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    onResize: (args: { x: number; y: number; width: number; height: number }) => void,
+): ((e: React.MouseEvent) => void) => {
+    const [dragging, setDragging] = useState(false);
+    const [initialDragState, setInitialDragState] = useState<InitialState>({
+        initX: 0,
+        initY: 0,
+        initWidth: 0,
+        initHeight: 0,
+        mouseDownX: 0,
+        mouseDownY: 0,
+    })
+
+    const onMouseDown = useCallback(
+        (e: React.MouseEvent) => {
+            e.preventDefault()
+            setInitialDragState({
+                initX: x,
+                initY: y,
+                initWidth: width,
+                initHeight: height,
+                mouseDownX: e.clientX,
+                mouseDownY: e.clientY,
+            })
+            setDragging(true)
+        },
+        [width, height, setDragging, setInitialDragState, x, y],
+    )
+
+    useEffect(() => {
+        const onMouseMove = (e: MouseEvent): void => {
+            if (dragging) {
+                const {
+                    initX,
+                    initY,
+                    initWidth,
+                    mouseDownX,
+                    initHeight,
+                    mouseDownY,
+                } = initialDragState
+                let dx = e.clientX - mouseDownX
+                let dy = e.clientY - mouseDownY
+                const width = initWidth + dx;
+                const height = initHeight + dy;
+                return onResize({ x: initX, y: initY, width, height })
+            }
+        }
+        window.addEventListener('mousemove', onMouseMove, { passive: true })
+        return () => window.removeEventListener('mousemove', onMouseMove)
+    }, [initialDragState, dragging, onResize])
+
+    useEffect(() => {
+        const onMouseUp = (): void => {
+            setDragging(false)
+        }
+        window.addEventListener('mouseup', onMouseUp);
+        return () => window.removeEventListener('mouseup', onMouseUp)
+    }, [setDragging])
+
+    return onMouseDown
+}

package/components/modal/modalDialog.tsx

@@ -0,0 +1,172 @@
+import React from "react";
+import {Button, Modal} from "antd";
+import {ModalFuncProps, ModalProps} from "antd/es/modal";
+import i18n from "d2core/i18n/i18n";
+import {DraggableModal} from "d2coreui/components/modal/impl";
+
+export const enum ModalDialogMode {
+    NO_BUTTONS = "NO_BUTTONS",
+    OK_CANCEL = "OK_CANCEL",
+    YES_NO = "YES_NO",
+    YES_NO_CANCEL = "YES_NO_CANCEL",
+    OK = "OK",
+}
+
+export interface ModalDialogFuncProps extends ModalFuncProps {
+    mode: ModalDialogMode
+    denyText?: string
+    onDeny?: (...args: any[]) => any;
+}
+
+export interface ModalDialogProps extends Omit<ModalProps, "width"> {
+    mode: ModalDialogMode
+    initialWidth?: number,
+    initialHeight?: number
+
+    // resize dialog handler
+    onResize?(size: { width: number, height: number }): void
+}
+
+export class ModalDialog extends React.Component<ModalDialogProps, {}> {
+    constructor(props: Readonly<ModalDialogProps>) {
+        super(props);
+    }
+
+    public static confirm(props: ModalDialogFuncProps): { destroy: () => void; update: (newConfig: ModalFuncProps) => void } {
+        let dialogHandler: { destroy: () => void; update: (newConfig: ModalFuncProps) => void };
+        const modalDialogProperties = ModalDialog.getModalFuncProperties(props, () => {
+            dialogHandler?.destroy();
+        });
+        dialogHandler = Modal.confirm(modalDialogProperties);
+        return dialogHandler;
+    }
+
+    public static error(props: ModalDialogFuncProps): { destroy: () => void; update: (newConfig: ModalFuncProps) => void } {
+        let dialogHandler: { destroy: () => void; update: (newConfig: ModalFuncProps) => void };
+        const modalDialogProperties = ModalDialog.getModalFuncProperties(props, () => {
+            dialogHandler?.destroy();
+        });
+        dialogHandler = Modal.error(modalDialogProperties);
+        return dialogHandler;
+    }
+
+    public static delete(props: ModalDialogFuncProps): { destroy: () => void; update: (newConfig: ModalFuncProps) => void } {
+        let dialogHandler: { destroy: () => void; update: (newConfig: ModalFuncProps) => void };
+        const modalDialogProperties = ModalDialog.getModalFuncProperties(props, () => {
+            dialogHandler?.destroy();
+        });
+        if (props.okButtonProps) {
+            props.okButtonProps.danger = true;
+        }
+        dialogHandler = Modal.confirm(modalDialogProperties);
+        return dialogHandler;
+    }
+
+    public static success(props: ModalDialogFuncProps): { destroy: () => void; update: (newConfig: ModalFuncProps) => void } {
+        let dialogHandler: { destroy: () => void; update: (newConfig: ModalFuncProps) => void };
+        const modalDialogProperties = ModalDialog.getModalFuncProperties(props, () => {
+            dialogHandler?.destroy();
+        });
+        dialogHandler = Modal.success(modalDialogProperties);
+        return dialogHandler;
+    }
+
+    public static info(props: ModalDialogFuncProps): { destroy: () => void; update: (newConfig: ModalFuncProps) => void } {
+        let dialogHandler: { destroy: () => void; update: (newConfig: ModalFuncProps) => void };
+        const modalDialogProperties = ModalDialog.getModalFuncProperties(props, () => {
+            dialogHandler?.destroy();
+        });
+        dialogHandler = Modal.info(modalDialogProperties);
+        return dialogHandler;
+    }
+
+    render() {
+        const modalDialogProperties = ModalDialog.getModalProperties(this.props);
+        return (
+            <DraggableModal  {...modalDialogProperties}>
+                {this.props.children}
+            </DraggableModal>);
+    }
+
+    private static getModalProperties(props: ModalDialogProps) {
+        const {mode, ...rest} = props;
+        if (mode === ModalDialogMode.NO_BUTTONS) {
+            if (rest.footer === undefined) {
+                rest.footer = null;
+            }
+        } else {
+            switch (mode) {
+                case ModalDialogMode.OK_CANCEL:
+                    rest.okText = props.okText ?? i18n("OK");
+                    rest.cancelText = props.cancelText ?? i18n("Cancel");
+                    break;
+                case ModalDialogMode.YES_NO:
+                    rest.okText = props.okText ?? i18n("Yes");
+                    rest.cancelText = props.cancelText ?? i18n("No");
+                    break;
+                case ModalDialogMode.OK:
+                    rest.okText = props.okText ?? i18n("OK");
+                    rest.cancelButtonProps = undefined;
+                    break;
+            }
+
+            rest.okButtonProps = Object.assign(rest.okButtonProps !== undefined ? rest.okButtonProps : {}, {style: {marginRight: 8}});
+            rest.cancelButtonProps = Object.assign(rest.cancelButtonProps !== undefined ? rest.cancelButtonProps : {}, {style: {float: "right"}});
+        }
+        return rest;
+    }
+
+    private static getModalFuncProperties(props: ModalDialogFuncProps, performClose: () => void) {
+        const {mode, denyText, onDeny, ...rest} = props;
+        switch (mode) {
+            case ModalDialogMode.OK_CANCEL:
+                rest.okText = rest.okText ?? i18n("OK");
+                rest.cancelText = rest.cancelText ?? i18n("Cancel");
+                break;
+            case ModalDialogMode.YES_NO:
+                rest.okText = rest.okText ?? i18n("Yes");
+                rest.cancelText = rest.cancelText ?? i18n("No");
+                break;
+            case ModalDialogMode.YES_NO_CANCEL:
+                rest.okText = rest.okText ?? i18n("Yes");
+                rest.cancelText = (<React.Fragment>
+                        <Button onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            e.nativeEvent.stopImmediatePropagation();
+                            onDeny?.(e);
+                            performClose();
+                        }}>{denyText ?? i18n("No")}</Button>
+                        <Button>{rest.cancelText ?? i18n("Cancel")}</Button>
+                    </React.Fragment>
+                );
+                if (!rest.cancelButtonProps) {
+                    rest.cancelButtonProps = {};
+                }
+                rest.cancelButtonProps.type = "text";
+                break;
+            case ModalDialogMode.OK:
+                rest.okText = props.okText ?? i18n("OK");
+                rest.cancelButtonProps = {style: {display: "none"}};
+        }
+        if (rest.autoFocusButton === undefined) {
+            rest.autoFocusButton = "ok";
+        }
+
+        rest.okButtonProps = Object.assign(rest.okButtonProps !== undefined ? rest.okButtonProps : {}, {style: {marginRight: 8}});
+
+        if (mode !== ModalDialogMode.OK) {
+            rest.cancelButtonProps = Object.assign(rest.cancelButtonProps !== undefined ? rest.cancelButtonProps : {}, {style: {float: "right"}});
+        }
+
+        if (mode === ModalDialogMode.YES_NO_CANCEL) {
+            if (rest.cancelButtonProps && rest.cancelButtonProps.style) {
+                rest.cancelButtonProps.style.padding = 0;
+                rest.cancelButtonProps.style.marginTop = -1;
+                rest.cancelButtonProps.style.cursor = "default";
+                rest.cancelButtonProps.style.background = "transparent";
+            }
+        }
+        return rest;
+    }
+}

package/components/picker/enumValuePicker.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {Select, SelectProps} from "antd";
+import i18n from "d2core/i18n/i18n";
+
+type EnumRepresentation<T extends string> = {[key in string]: T};
+
+export interface EnumValuePickerProps<T extends string> extends Omit<SelectProps<T>, "onChange"> {
+    allowedValueTypes?: T[]
+    values: EnumRepresentation<T>
+    translateValue?: boolean
+    translationPrefix?: string
+
+    onChange(value?: T): void
+}
+
+export default class EnumValuePicker<T extends string> extends React.Component<EnumValuePickerProps<T>, any> {
+    render() {
+        const {value, allowedValueTypes, onChange, translationPrefix, values, translateValue, ...others} = this.props;
+        let selectValue: T | null | undefined = value;
+
+        if (selectValue !== undefined && selectValue !== null && allowedValueTypes) {
+            if (!allowedValueTypes.includes(selectValue)) {
+                selectValue = undefined;
+            }
+        }
+
+        return (
+            <Select<T> value={selectValue}
+                       onChange={(value) => {
+                           onChange(value !== "" ? value : undefined);
+                       }}
+                       {...others}>
+                {(allowedValueTypes ?? Object.values(values) as T[]).map((val) => {
+                    let text: string = val;
+                    if (translateValue) {
+                        text = i18n(translationPrefix ? translationPrefix + text : text);
+                    }
+
+                    return (
+                        <Select.Option value={val} key={val}>
+                            {text}
+                        </Select.Option>
+                    );
+                })}
+            </Select>
+        );
+    }
+}