d2coreui 23.0.15 → 23.0.17

package/components/input/textarea/highlightedTextarea.css

@@ -1,61 +0,0 @@
-.highlight-container {
-	display: inline-block;
-	position: relative;
-	overflow: hidden !important;
-	-webkit-text-size-adjust: none !important;
-}
-
-.highlight-backdrop {
-	position: absolute !important;
-	top: 0 !important;
-	right: calc(2em + 20px) !important; /* important due to style ".dictionary-autocomplete > textarea" externalize if this should be used elsewhere as */
-	bottom: 0 !important;
-	left: 0 !important;
-	overflow-x: hidden !important;
-	overflow-y: hidden !important;
-}
-
-.highlight-highlights {
-    padding: 4px 11px !important;
-	width: auto !important;
-	height: auto !important;
-	border-color: transparent !important;
-	white-space: pre-wrap !important;
-	word-wrap: break-word !important;
-	color: transparent !important;
-	overflow: hidden !important;
-}
-
-.highlight-input textarea{
-	display: block !important;
-	position: relative !important;
-	margin: 0;
-	padding: 4px 11px;
-	border-radius: 0;
-	font: inherit;
-	overflow-x: hidden !important;
-    white-space: pre-wrap !important;
-    word-wrap: break-word !important;
-}
-
-.highlight-content {
-    background: none transparent !important;
-}
-
-.highlight-content textarea {
-	background: none transparent !important;
-}
-
-.highlight-content mark {
-	padding: 0 !important;
-    color: transparent;
-}
-
-.highlight-error {
-    background-color: #ffccc7;
-}
-
-.highlight-warning {
-    background-color: #ffec3d;
-}
-

package/components/input/textarea/mentionsWithHighlighting.tsx

@@ -1,95 +0,0 @@
-import React, {CSSProperties} from 'react';
-import './highlightedTextarea.css';
-import HighlighedContents from './highlighedContents';
-import {MentionProps} from "antd/lib/mentions";
-import {Mentions} from "antd";
-
-export interface HighlightItem {
-    highlight: HighlightType
-    className: string
-}
-
-export type AssignHighlightFunction = (value: string) => HighlightType;
-export type HighlightType =
-    boolean
-    | string
-    | RegExp
-    | [number, number]
-    | HighlightType[]
-    | AssignHighlightFunction
-    | HighlightItem[];
-
-interface MentionsWithHighlightingProps extends MentionProps {
-    highlight?: HighlightType
-    containerStyle?: CSSProperties
-    containerClassName?: string
-}
-
-interface MentionsWithHighlightingState {
-    fakeValue: string
-}
-
-/**
- * Merged antd Mentions component with code from https://github.com/bonafideduck/react-highlight-within-textarea
- */
-export class MentionsWithHighlighting extends React.Component<MentionsWithHighlightingProps, MentionsWithHighlightingState> {
-    mentionsComponent: any | null = null;
-    backdropComponent: HTMLDivElement | null = null;
-
-    constructor(props: Readonly<MentionsWithHighlightingProps>) {
-        super(props);
-        this.state = {
-            fakeValue: props.value ?? ""
-        }
-    }
-
-    handleScroll = () => {
-        if (this.backdropComponent) {
-            if (this.mentionsComponent) {
-                const textArea = (this.mentionsComponent as any).textarea as HTMLTextAreaElement
-                this.backdropComponent.scrollTop = textArea.scrollTop;
-                this.backdropComponent.scrollLeft = textArea.scrollLeft;
-            }
-        }
-    };
-
-    onChange = (value?:string) => {
-        // To properly work, value and onChange must be supplied.  Give a hint for new users.
-        if (value == undefined) {
-            value = this.state.fakeValue;
-        }
-        this.setState({fakeValue: value});
-    };
-
-    get textarea() : HTMLTextAreaElement | undefined {
-        return (this.mentionsComponent as any)?.textarea as HTMLTextAreaElement;
-    }
-
-    render() {
-        let {value, onChange, highlight = {}, className = "", style = {}, containerStyle = {}, containerClassName = "", onScroll, ...restProps} = this.props;
-
-        className = `highlight-input ${!this.props.disabled ? "highlight-content": ""} ${className}`;
-        containerClassName = `highlight-container ${containerClassName}`;
-
-        // Resizing is currently not supported
-        style.resize = "none";
-        style.wordWrap = "break-word";
-
-
-
-        return (
-            <div className={containerClassName} style={containerStyle}>
-                <div className={"highlight-backdrop"} ref={(component)=> {
-                    this.backdropComponent = component;
-                }}>
-                    <HighlighedContents value={value} highlight={highlight}/>
-                </div>
-                <Mentions value={value} onChange={onChange} style={{...style}} className={className} {...restProps}
-                          onScroll={this.handleScroll} ref={(component) => {
-                              this.mentionsComponent = component
-                }}>
-                </Mentions>
-            </div>
-        );
-    }
-}

package/components/keyboard/keyboardUtils.ts

@@ -1,42 +0,0 @@
-import {Key} from "ts-key-enum";
-
-const pressedKeys: any = {};
-let mouseDown: number = 0;
-
-function keyDown(e: KeyboardEvent) {
-    pressedKeys[e.key] = true;
-}
-
-function keyUp(e: KeyboardEvent) {
-    pressedKeys[e.key] = false;
-}
-
-function reset() {
-    Object.keys(pressedKeys).forEach((key) => {
-        pressedKeys[key] = false;
-    });
-}
-
-function onMouseDown() {
-    mouseDown++;
-}
-
-function onMouseUp() {
-    mouseDown--;
-}
-
-window.addEventListener("keydown", keyDown);
-window.addEventListener("keyup", keyUp);
-window.addEventListener("blur", reset);
-window.addEventListener("mousedown", onMouseDown);
-window.addEventListener("mouseup", onMouseUp);
-
-export default class KeyboardUtils {
-    static isKeyPressed(key: Key): boolean {
-        return !!pressedKeys[key];
-    }
-
-    static isMouseDown() :boolean {
-        return mouseDown > 0;
-    }
-}

package/components/modal/draggableModalProvider.tsx

@@ -1,37 +0,0 @@
-// https://github.com/CUBETIQ/antd-modal/
-
-import * as React from 'react'
-import {useEffect, useReducer} from 'react'
-import {DraggableModalContext} from 'd2coreui/components/modal/impl/draggableModalContext'
-import {getWindowSize} from 'd2coreui/components/modal/impl/getWindowSize'
-import {draggableModalReducer, initialModalsState} from 'd2coreui/components/modal/impl/draggableModalReducer'
-
-export const DraggableModalProvider = ({
-    children,
-}: {
-    children: React.ReactNode
-}): React.ReactElement => {
-    const [state, dispatch] = useReducer(draggableModalReducer, initialModalsState)
-
-    useEffect(() => {
-        if (typeof window !== 'object') {
-            // @ts-ignore
-            return;
-        }
-        const onResize = (): void => dispatch({ type: 'windowResize', size: getWindowSize() })
-        window.addEventListener('resize', onResize)
-        onResize()
-        return () => window.removeEventListener('resize', onResize)
-    }, [dispatch])
-
-    return (
-        <DraggableModalContext.Provider
-            value={{
-                state,
-                dispatch,
-            }}
-        >
-            {children}
-        </DraggableModalContext.Provider>
-    )
-}

package/components/modal/impl/clamp.ts

@@ -1,4 +0,0 @@
-// https://github.com/CUBETIQ/antd-modal/
-
-export const clamp = (min: number, max: number, value: number): number =>
-    Math.max(min, Math.min(max, value));

package/components/modal/impl/draggableModal.tsx

@@ -1,36 +0,0 @@
-// https://github.com/CUBETIQ/antd-modal/
-
-import * as React from 'react'
-import {FunctionComponent, useContext} from 'react'
-import {useUID} from 'react-uid'
-import {DraggableModalContext} from './draggableModalContext'
-import {DraggableModalInner} from './draggableModalInner'
-import {getModalState} from './draggableModalReducer'
-import {ModalProps} from 'antd/lib/modal'
-import '../../../style/modal/DraggableModal.css'
-
-export interface DraggableModalProps extends Omit<ModalProps, "width"> {
-    initialWidth?: number,
-    initialHeight?: number
-    // resize dialog handler
-    onResize?(size: { width: number, height: number }): void
-}
-
-export const DraggableModal: FunctionComponent<DraggableModalProps> = (props: DraggableModalProps): React.ReactElement => {
-    // Get the unique ID of this modal.
-    const id = useUID();
-
-    // Get modal provider.
-    const modalProvider = useContext(DraggableModalContext);
-    if (!modalProvider) {
-        throw new Error('No Provider')
-    }
-
-    const {dispatch, state} = modalProvider;
-    const modalState = getModalState({state, id, initialWidth: props.initialWidth, initialHeight: props.initialHeight});
-
-    // We do this so that we don't re-render all modals for every state change.
-    // DraggableModalInner uses React.memo, so it only re-renders if
-    // if props change (e.g. modalState).
-    return <DraggableModalInner id={id} dispatch={dispatch} modalState={modalState} {...props} />
-};

package/components/modal/impl/draggableModalContext.ts

@@ -1,14 +0,0 @@
-// https://github.com/CUBETIQ/antd-modal/
-
-import * as React from 'react'
-import {Action, ModalsState} from './draggableModalReducer'
-
-export interface DraggableModalContextMethods {
-    dispatch: (action: Action) => void
-}
-
-export interface DraggableModalContextValue extends DraggableModalContextMethods {
-    state: ModalsState
-}
-
-export const DraggableModalContext = React.createContext<DraggableModalContextValue | null>(null)

package/components/modal/impl/draggableModalInner.tsx

@@ -1,114 +0,0 @@
-// https://github.com/CUBETIQ/antd-modal/
-
-import * as React from 'react'
-import {memo, useCallback, useEffect, useMemo} from 'react'
-import {Modal} from 'antd'
-import {ResizeHandle} from './resizeHandle'
-import {useDrag} from './useDrag'
-import {DraggableModalContextMethods} from './draggableModalContext'
-import {usePrevious} from './usePrevious'
-import {ModalID, ModalState} from './draggableModalReducer'
-import {useResize} from './useResize'
-import {DraggableModalProps} from "./draggableModal";
-
-const modalStyle: React.CSSProperties = {margin: 0, paddingBottom: 0, pointerEvents: 'auto'}
-
-interface ContextProps extends DraggableModalContextMethods {
-    id: ModalID
-    modalState: ModalState
-    initialWidth?: number
-    initialHeight?: number
-}
-
-//export type DraggableModalInnerProps = ModalProps & { children?: React.ReactNode } & ContextProps
-export interface DraggableModalInnerProps extends DraggableModalProps, ContextProps {
-    children?: React.ReactNode
-}
-
-export const DraggableModalInner = memo(
-    ({
-         id,
-         modalState,
-         dispatch,
-         open,
-         children,
-         title,
-         initialWidth,
-         initialHeight,
-         onResize,
-         ...otherProps
-     }: DraggableModalInnerProps) => {
-        // Call on mount and unmount.
-        useEffect(() => {
-            dispatch({type: 'mount', id, intialState: {initialWidth, initialHeight}});
-            return () => dispatch({type: 'unmount', id})
-        }, [dispatch, id, initialWidth, initialHeight]);
-
-        // Bring this to the front if it's been opened with props.
-        const visiblePrevious = usePrevious(open);
-        useEffect(() => {
-            if (open !== visiblePrevious) {
-                if (open) {
-                    dispatch({type: 'show', id})
-                } else {
-                    dispatch({type: 'hide', id})
-                }
-            }
-        }, [open, visiblePrevious, id, dispatch]);
-
-        const {zIndex, x, y, width, height} = modalState;
-
-        const style: React.CSSProperties = useMemo(
-            () => ({...modalStyle, top: y, left: x, height}),
-            [y, x, height],
-        );
-
-        const onFocus = useCallback(() => dispatch({type: 'focus', id}), [id, dispatch])
-
-        const onDragWithID = useCallback((args: any) => dispatch({type: 'drag', id, ...args}), [
-            dispatch,
-            id,
-        ]);
-
-        const onResizeWithID = useCallback((args: any) => {
-            onResize?.({width: args.width, height: args.height});
-            return dispatch({type: 'resize', id, ...args})
-        }, [dispatch, id,]);
-
-        const onMouseDrag = useDrag(x, y, onDragWithID);
-        const onMouseResize = useResize(x, y, width, height, onResizeWithID);
-
-        const titleElement = useMemo(
-            () => (
-                <div
-                    className="ant-design-draggable-modal-title"
-                    onMouseDown={onMouseDrag}
-                    onClick={onFocus}
-                >
-                    {title}
-                </div>
-            ),
-            [onMouseDrag, onFocus, title],
-        );
-
-        return (
-            <Modal
-                wrapClassName="ant-design-draggable-modal"
-                style={style}
-                destroyOnClose={true}
-                width={width}
-                zIndex={zIndex}
-                title={titleElement}
-                open={open}
-                {...otherProps}
-            >
-                {children}
-                <ResizeHandle onMouseDown={onMouseResize}/>
-            </Modal>
-        )
-    }
-);
-
-if (process.env.NODE_ENV !== 'production') {
-    DraggableModalInner.displayName = 'DraggableModalInner'
-}

package/components/modal/impl/draggableModalReducer.ts

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

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