d2coreui 23.0.14 → 23.0.15

package/components/input/textarea/getRanges.ts

@@ -0,0 +1,82 @@
+import getType from './getType';
+
+export default function getRanges(input: any, highlight: any): number[][] {
+    let type = getType(highlight);
+    switch (type) {
+        case 'array':
+            return getArrayRanges(input, highlight);
+        case 'function':
+            return getFunctionRanges(input, highlight);
+        case 'regexp':
+            return getRegExpRanges(input, highlight);
+        case 'string':
+            return getStringRanges(input, highlight);
+        case 'range':
+            return getRangeRanges(input, highlight);
+        case 'custom':
+            return getCustomRanges(input, highlight);
+        default:
+            if (!highlight) {
+                // do nothing for falsey values
+                return [];
+            } else {
+                console.error('unrecognized highlight type');
+                return [];
+            }
+    }
+}
+
+function getArrayRanges(input: any[], arr: any[]): number[][] {
+    let ranges = arr.map(getRanges.bind(null, input));
+    return Array.prototype.concat.apply([], ranges);
+}
+
+function getFunctionRanges(input: string, func: (input: string) => string): number[][] {
+    return getRanges(input, func(input));
+}
+
+function getRegExpRanges(input: string, regex: RegExp) {
+    let ranges = [];
+    let match;
+    while (match = regex.exec(input), match !== null) {
+        ranges.push([match.index, match.index + match[0].length]);
+        if (!regex.global) {
+            // non-global regexes do not increase lastIndex, causing an infinite loop,
+            // but we can just break manually after the first match
+            break;
+        }
+    }
+    return ranges;
+}
+
+function getStringRanges(input: string, str: string): number[][] {
+    let ranges = [];
+    let inputLower = input.toLowerCase();
+    let strLower = str.toLowerCase();
+    let index = 0;
+    while (index = inputLower.indexOf(strLower, index), index !== -1) {
+        ranges.push([index, index + strLower.length]);
+        index += strLower.length;
+    }
+    return ranges;
+}
+
+function getRangeRanges(_input: string, range: number[]): number[][] {
+    return [range];
+}
+
+function getCustomRanges(input: string, custom: { className?: string, highlight: any }): number[][] {
+    let ranges = getRanges(input, custom.highlight);
+    if (custom.className) {
+        ranges.forEach(function (range) {
+            // persist class name as a property of the array
+            let customRange = range as any;
+            if (customRange.className) {
+                customRange.className = custom.className + ' ' + customRange.className;
+            } else {
+                customRange.className = custom.className;
+            }
+        });
+    }
+    return ranges;
+}

package/components/input/textarea/getType.ts

@@ -0,0 +1,23 @@
+// returns identifier strings that aren't necessarily "real" JavaScript types
+export default function getType(instance:any):string {
+    let type = typeof instance;
+    if (!instance) {
+        return 'falsey';
+    } else if (Array.isArray(instance)) {
+        if (instance.length === 2 && typeof instance[0] === 'number' && typeof instance[1] === 'number') {
+            return 'range';
+        } else {
+            return 'array';
+        }
+    } else if (type === 'object') {
+        if (instance instanceof RegExp) {
+            return 'regexp';
+        } else if (instance.hasOwnProperty('highlight')) {
+            return 'custom';
+        }
+    } else if (type === 'function' || type === 'string') {
+        return type;
+    }
+
+    return 'other';
+}

package/components/input/textarea/highlighedContents.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import getRanges from './getRanges';
+import extractSpansOfClasses from './extractSpansOfClasses';
+
+// @ts-ignore
+const HighlighedContents = ({value, highlight}) => {
+    
+    let ranges = getRanges(value, highlight);
+    let parts = extractSpansOfClasses(value, ranges);
+
+    return (
+        <div>
+            <div className={`highlight-highlights highlight-content`} >
+                {parts.map(part => part.render())}
+             </div>
+        </div>
+    );       
+}
+
+export default HighlighedContents

package/components/input/textarea/highlightedTextarea.css

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

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

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

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

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

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

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

@@ -0,0 +1,114 @@
+// 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'
+}