d2coreui 23.0.14 → 23.0.15

package/components/platformSpecific.ts

@@ -0,0 +1,39 @@
+export default class PlatformSpecific {
+    static INSTANCE: PlatformSpecific;
+
+    getCurrentWindowName(): string {
+        return "";
+    }
+
+    configurationChangesDisabled(): boolean {
+        return false;
+    }
+
+    reloadPageInPredefinedState(): void {
+    }
+
+    reloadPageInFactoryState(): void {
+
+    }
+
+    saveWindowConfiguration(): void {
+
+    }
+
+    exportWindowConfiguration(): void {
+
+    }
+
+    saveContent(fileName: string, content: string, encodeContent?: boolean) {
+        var element = document.createElement('a');
+        const encodedContent = encodeContent ? encodeURIComponent(content) : content;
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodedContent);
+        element.setAttribute('download', fileName);
+        element.style.display = 'none';
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+    }
+}
+
+PlatformSpecific.INSTANCE = new PlatformSpecific();

package/components/scrollTo/dom-scroll-into-view.d.ts

@@ -0,0 +1 @@
+declare module "dom-scroll-into-view"

package/components/scrollTo/onlyText.ts

@@ -0,0 +1,36 @@
+import type {ReactElement, ReactNode} from 'react';
+import {Children, isValidElement} from 'react';
+
+const hasChildren = (element: ReactNode): element is ReactElement<{ children: ReactNode[] }> =>
+    isValidElement<{ children?: ReactNode[] }>(element) && Boolean(element.props.children);
+
+export const childToString = (child?: React.Key | boolean | {} | null): string => {
+    if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
+        return '';
+    }
+
+    if (JSON.stringify(child) === '{}') {
+        return '';
+    }
+
+    return (child as number | string).toString();
+};
+
+const onlyText = (children: ReactNode): string => {
+    if (!(children instanceof Array) && !isValidElement(children)) {
+        return childToString(children);
+    }
+    return Children.toArray(children).reduce((text: string, child: ReactNode): string => {
+        let newText = '';
+        if (isValidElement(child) && hasChildren(child)) {
+            newText = onlyText(child.props.children);
+        } else if (isValidElement(child) && !hasChildren(child)) {
+            newText = '';
+        } else {
+            newText = childToString(child);
+        }
+        return text.concat(newText);
+    }, '') as string;
+};
+
+export default onlyText;

package/components/scrollTo/scrollTo.tsx

@@ -0,0 +1,324 @@
+import * as React from 'react'
+import {Component, ReactElement} from 'react'
+import scrollIntoView from "dom-scroll-into-view";
+import debounce from "lodash/debounce"
+import {Tooltip} from "antd";
+import onlyText from './onlyText';
+import memoizeOne from "memoize-one";
+import ReactDOMServer from "react-dom/server";
+import {Key} from "ts-key-enum";
+import KeyboardUtils from "../keyboard/keyboardUtils";
+
+const MarkTextContext = React.createContext("");
+
+interface ScrollToItemProps {
+    /* flag to notify currently selected item*/
+    selected?: boolean
+
+    selectionKey?: string
+
+    markedTextClassName?: string
+
+    dangerouslySetInnerHTML?: string
+
+    children?: React.ReactNode;
+}
+
+/*
+* Item component where user can be scrolled in
+*/
+export class ScrollToItem extends Component<ScrollToItemProps> {
+    static contextType = MarkTextContext;
+
+    constructor(props: Readonly<ScrollToItemProps>) {
+        super(props);
+        this.getChildrenTextContent = memoizeOne(this.getChildrenTextContent.bind(this));
+        this.getChildrenHtmlContent = memoizeOne(this.getChildrenHtmlContent.bind(this));
+    }
+
+    getChildrenTextContent(children: React.ReactNode | undefined) {
+        if (!!this.props.dangerouslySetInnerHTML) {
+            return this.props.dangerouslySetInnerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
+        } else if (children === undefined) {
+            return "";
+        } else {
+            return onlyText(children).toLowerCase();
+        }
+    }
+
+    getChildrenHtmlContent(children: React.ReactNode | undefined, markedString: string) {
+        let htmlCode: string;
+        if (!!this.props.dangerouslySetInnerHTML) {
+            htmlCode = this.props.dangerouslySetInnerHTML;
+        } else {
+            switch (typeof children) {
+                case "string":
+                    htmlCode = children;
+                    break;
+                case "undefined":
+                    htmlCode = "";
+                    break;
+                default:
+                    htmlCode = ReactDOMServer.renderToString(children as ReactElement);
+            }
+        }
+
+        const markedStringIndex = htmlCode.toLowerCase().indexOf(markedString);
+        if (markedStringIndex >= 0) {
+            const markedTextClassName = this.props.markedTextClassName ? this.props.markedTextClassName : "marked-text";
+            return htmlCode.substring(0, markedStringIndex) + "<span class=\"" + markedTextClassName + "\">" + htmlCode.substring(markedStringIndex, markedStringIndex + markedString.length) + "</span>" + htmlCode.substring(markedStringIndex + markedString.length);
+        } else {
+            return htmlCode;
+        }
+    }
+
+    renderChildren() {
+        if (this.context) {
+            const childrenHtmlContent = this.getChildrenHtmlContent(this.props.children, this.context as string);
+            return <span dangerouslySetInnerHTML={{__html: childrenHtmlContent}}/>
+        } else if (!!this.props.dangerouslySetInnerHTML) {
+            return <span dangerouslySetInnerHTML={{__html: this.props.dangerouslySetInnerHTML}}/>
+        } else {
+            return this.props.children;
+        }
+    }
+
+    render() {
+        const textContent = this.getChildrenTextContent(this.props.children);
+        return (
+            <span tabIndex={0}
+                  className={`selectable ${this.props.selected ? "selected" : ""}`}
+                  data-content={textContent}
+                  data-key={this.props.selectionKey}
+            >
+                {this.renderChildren()}
+            </span>
+        );
+    }
+}
+
+interface ScrollToProps {
+    /* scroll to position of first selected ScrollToItem element after initialization*/
+    scrollOnMount?: boolean
+
+    supressKeyboardEvent?(selectionKey: string | undefined, event: React.KeyboardEvent): boolean
+
+    children?: React.ReactNode;
+}
+
+interface ScrollToState {
+    /* current search string entered by user*/
+    searchString: string
+    /* checks if search string is found in at least one item */
+    searchStringFound: boolean
+}
+
+/**
+ * Wrapper component for area with items where user can be scrolled in
+ */
+export default class ScrollTo extends Component<ScrollToProps, ScrollToState> {
+    /* internal reference to wrapping element of container with items*/
+    scrollWrapper: HTMLElement | null = null;
+    /* internal reference to parent element with enabled scrolling */
+    scrollParent: HTMLElement | null = null;
+
+    constructor(props: Readonly<ScrollToProps>) {
+        super(props);
+        this.state = {
+            searchString: "",
+            searchStringFound: false,
+        };
+        this.scrollToElement = debounce(this.scrollToElement, 400, {maxWait: 400});
+    }
+
+    componentDidMount(): void {
+        // initial scrolling to position of selected node
+        if (this.props.scrollOnMount && this.scrollWrapper) {
+            const scrollToElement = this.scrollWrapper.querySelector(".selected");
+            if (scrollToElement) {
+                this.scrollToElement(scrollToElement as HTMLElement);
+            }
+        }
+    }
+
+    scrollToElement(scrollToElem: HTMLElement, scrollingUp = false): void {
+        scrollIntoView(scrollToElem, this.scrollParent, {
+            onlyScrollIfNeeded: true,
+            allowHorizontalScroll: false,
+            alignWithTop: scrollingUp,
+            offsetTop: 50,
+            offsetBottom: 50,
+        });
+    }
+
+    getScrollParent(element: HTMLElement, includeHidden = false): HTMLElement {
+        var style = getComputedStyle(element);
+        var excludeStaticParent = style.position === "absolute";
+        var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+        if (style.position === "fixed") return document.body;
+        let parent: HTMLElement | null;
+        for (parent = element; (parent = parent.parentElement);) {
+            style = getComputedStyle(parent);
+            if (excludeStaticParent && style.position === "static") {
+                continue;
+            }
+            if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+        }
+        return document.body;
+    }
+
+    focusNext(currentElement: HTMLElement, selectables: HTMLElement[]): void {
+        if (currentElement) {
+            const currentElementIndex = selectables.indexOf(currentElement);
+            if (currentElementIndex >= 0 && currentElementIndex < selectables.length - 1) {
+                const scrollToElem = selectables[currentElementIndex + 1];
+                scrollToElem.focus();
+                this.scrollToElement(scrollToElem);
+                return;
+            } else if (currentElementIndex === selectables.length - 1) {
+                return;
+            }
+        }
+        if (selectables.length > 0) {
+            selectables[0].focus();
+            this.scrollToElement(selectables[0])
+        }
+    }
+
+    scrollToLast(): void {
+        if (!!this.scrollWrapper) {
+            let selectables: HTMLElement[] = Array.from(this.scrollWrapper.getElementsByClassName("selectable")) as HTMLElement[]; //get all selectable elements
+            if (selectables.length > 0) {
+                const focusedElement = selectables[selectables.length - 1];
+                this.scrollToElement(focusedElement, false);
+            }
+        }
+    }
+
+    focusToLast(): void {
+        if (!!this.scrollWrapper) {
+            let selectables: HTMLElement[] = Array.from(this.scrollWrapper.getElementsByClassName("selectable")) as HTMLElement[]; //get all selectable elements
+            if (selectables.length > 0) {
+                const focusedElement = selectables[selectables.length - 1];
+                focusedElement.focus();
+                this.scrollToElement(focusedElement, false);
+            }
+        }
+    }
+
+    focusPrev(currentElement: HTMLElement, selectables: HTMLElement[]): void {
+        if (currentElement) {
+            const currentElementIndex = selectables.indexOf(currentElement);
+            if (currentElementIndex > 0) {
+                const scrollToElem = selectables[currentElementIndex - 1];
+                scrollToElem.focus();
+                this.scrollToElement(scrollToElem);
+                return;
+            } else if (currentElementIndex === 0) {
+                return;
+            }
+        }
+        if (selectables.length > 0) {
+            const scrollToElem = selectables[selectables.length - 1];
+            scrollToElem.focus();
+            this.scrollToElement(scrollToElem);
+        }
+    }
+
+    focusBySearchString(searchString: string): HTMLElement {
+        const elementToFocus = this.scrollWrapper?.querySelector(`.selectable[data-content*="${searchString.toLowerCase()}"]`) as any;
+        if (elementToFocus) {
+            elementToFocus.focus();
+            this.scrollToElement(elementToFocus as HTMLElement);
+        }
+        return elementToFocus;
+    }
+
+    render() {
+        return (
+            <div ref={(scrollWrapper) => {
+                this.scrollWrapper = scrollWrapper;
+                if (this.scrollWrapper) {
+                    this.scrollParent = this.getScrollParent(this.scrollWrapper);
+                } else {
+                    this.scrollParent = null;
+                }
+            }}
+                 tabIndex={-1}
+                 onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+                     if (e.target instanceof HTMLInputElement) {
+                         return;
+                     }
+                     if (!this.scrollWrapper) {
+                         return;
+                     }
+                     if (KeyboardUtils.isKeyPressed(Key.Control) || KeyboardUtils.isKeyPressed(Key.Alt)) {
+                         return;
+                     }
+                     const supressKeyboardEvent = this.props.supressKeyboardEvent?.((document.activeElement as any)?.dataset?.key, e);
+                     if (supressKeyboardEvent) {
+                         e.preventDefault();
+                         return;
+                     }
+                     let focusedElement: HTMLElement | null = document.activeElement as HTMLElement;
+                     let selectables: HTMLElement[];
+                     if (this.state.searchString && this.state.searchStringFound) {
+                         selectables = Array.from(this.scrollWrapper.querySelectorAll(`.selectable[data-content*="${this.state.searchString.toLowerCase()}"]`));
+                     } else {
+                         selectables = Array.from(this.scrollWrapper.getElementsByClassName("selectable")) as HTMLElement[]; //get all selectable elements
+                     }
+                     const focusedElementIndex = selectables.indexOf(focusedElement);
+                     if (e.key === Key.ArrowDown || e.key === Key.ArrowUp) {
+                         e.preventDefault();
+                         if (!focusedElement || focusedElementIndex < 0) {
+                             const selectedElements = Array.from(this.scrollWrapper.getElementsByClassName("selected"));
+                             focusedElement = selectedElements.length > 0 ? selectedElements[0] as HTMLElement : null;
+                         }
+                         if (e.key === Key.ArrowDown && focusedElement) {
+                             this.focusNext(focusedElement, selectables);
+                         } else if (e.key === Key.ArrowUp && focusedElement) {
+                             this.focusPrev(focusedElement, selectables);
+                         }
+                     } else if (e.key === Key.Enter && focusedElementIndex >= 0) {
+                         if (typeof focusedElement.click == "function") {
+                             focusedElement.click.apply(focusedElement);
+                         }
+                         this.setState({searchString: "", searchStringFound: false});
+                     } else if (e.key.length === 1) {
+                         const searchString = this.state.searchString + e.key;
+                         const focusedElement = this.focusBySearchString(searchString);
+                         this.setState({searchString: searchString, searchStringFound: !!focusedElement},);
+                     } else if (e.key === Key.Backspace) {
+                         const searchString = this.state.searchString.slice(0, -1);
+                         const focusedElement = this.focusBySearchString(searchString);
+                         this.setState({searchString: searchString, searchStringFound: !!focusedElement})
+                     } else if (e.key === Key.Escape) {
+                         this.setState({searchString: "", searchStringFound: false});
+                     }
+                 }}
+                 onClick={() => {
+                     this.setState({searchString: "", searchStringFound: false});
+                 }}
+                 onBlur={(_: React.FocusEvent<HTMLDivElement>) => {
+                     setTimeout(() => {
+                         if (!document.activeElement?.className?.includes("selectable") && (this.state.searchString !== "" || this.state.searchStringFound)) {
+                             this.setState({searchString: "", searchStringFound: false});
+                         }
+                     }, 0);
+
+                 }}
+            >
+                <div style={{position: "fixed", top: 16, left: 16}}>
+                    <Tooltip
+                        overlayClassName={!this.state.searchStringFound ? "search-string-not-found" : undefined}
+                        align={{points: ["tl", "tl"], overflow: {adjustX: true, adjustY: true}}}
+                        open={!!this.state.searchString} title={this.state.searchString}>
+                        <span/>
+                    </Tooltip>
+                </div>
+                <MarkTextContext.Provider value={this.state.searchString}>
+                    {this.props.children}
+                </MarkTextContext.Provider>
+            </div>);
+    }
+}

package/components/style/withCss.tsx

@@ -0,0 +1,14 @@
+import {BaseReturnType} from 'antd-style';
+import {ReturnStyles} from "antd-style/lib/factories/createStyles/types";
+
+type WithCssChildren<T extends BaseReturnType> = (css: ReturnStyles<T>) => any;
+
+interface WithCssProperties<T extends BaseReturnType> {
+    children: WithCssChildren<T>;
+    useStyles: (props?:any) => ReturnStyles<T>
+}
+
+export default function WithCss<T extends BaseReturnType> ({useStyles, children}:WithCssProperties<T>) {
+    const css = useStyles();
+    return children(css);
+};

package/components/style/withInputNumberCss.tsx

@@ -0,0 +1,18 @@
+import {ConfigContext} from "antd/es/config-provider";
+import React from "react";
+import useCSSVarCls from "antd/es/config-provider/hooks/useCSSVarCls";
+import useStyle from "antd/es/input-number/style/index";
+
+
+interface WithInputNumberCssProperties {
+    children: any;
+}
+
+export default function WithInputNumberCss({children}: WithInputNumberCssProperties) {
+    const {getPrefixCls} = React.useContext(ConfigContext);
+    const prefixCls = getPrefixCls('input-number');
+    const rootCls = useCSSVarCls(prefixCls);
+    // @ts-ignore
+    const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
+    return wrapCSSVar(children);
+};

package/components/svg.d.ts

@@ -0,0 +1 @@
+declare module "*.svg"

package/components/table/dragSortingTable.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import {Table} from 'antd';
+import {DndProvider, DragSource, DropTarget} from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import {TableProps} from "antd/es/table";
+import {createStyles} from "antd-style";
+import WithCss from "d2coreui/components/style/withCss";
+
+const useStyles = createStyles(({css}) => {
+    return {
+        dragSortingTable: css`
+            tr.drop-over-downward td {
+                border-bottom: 2px dashed #1890ff !important;
+            }
+
+            tr.drop-over-upward td {
+                border-top: 2px dashed #1890ff !important;
+            }
+        `,
+    }
+});
+
+let dragingIndex = -1;
+
+class BodyRow extends React.Component<any> {
+    render() {
+        const {isOver, connectDragSource, connectDropTarget, moveRow, ...restProps} = this.props;
+        const style = {...restProps.style, cursor: 'move'};
+        let {className} = restProps;
+        if (isOver) {
+            if (restProps.index > dragingIndex) {
+                className += ' drop-over-downward';
+            }
+            if (restProps.index < dragingIndex) {
+                className += ' drop-over-upward';
+            }
+        }
+        return connectDragSource(
+            connectDropTarget(<tr {...restProps} className={className} style={style}/>),
+        );
+    }
+}
+
+const rowSource = {
+    beginDrag(props: any) {
+        dragingIndex = props.index;
+        return {
+            index: props.index,
+        };
+    },
+};
+
+const rowTarget = {
+    drop(props: any, monitor: any) {
+        const dragIndex = monitor.getItem().index;
+        const hoverIndex = props.index;
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex) {
+            return;
+        }
+        // Time to actually perform the action
+        props.moveRow(dragIndex, hoverIndex);
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        monitor.getItem().index = hoverIndex;
+    },
+};
+
+const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver(),
+}))(
+    DragSource('row', rowSource, connect => ({
+        connectDragSource: connect.dragSource(),
+    }))(BodyRow),
+);
+
+interface DragSortingTableProps<T> extends TableProps<T> {
+    dataSource: T[]
+    onMoveRow: (dragRow: T, dragIndex: number, hoverIndex: number) => void
+}
+
+export default class DragSortingTable<T extends object> extends React.Component<DragSortingTableProps<T>> {
+    components: any;
+
+    constructor(props: Readonly<DragSortingTableProps<T>>) {
+        super(props);
+        this.components = {
+            body: {
+                row: DragableBodyRow,
+            },
+        };
+        this.moveRow = this.moveRow.bind(this);
+    }
+
+    moveRow(dragIndex: number, hoverIndex: number) {
+        const dragRow = this.props.dataSource[dragIndex];
+        this.props.onMoveRow(dragRow, dragIndex, hoverIndex);
+    };
+
+    render() {
+        const {onMoveRow, components, ...restProps} = this.props;
+        //@ts-ignore
+        return (<DndProvider backend={HTML5Backend}>
+                <WithCss useStyles={useStyles}>{
+                    (css)=>(<Table<T>
+                    className={css.styles.dragSortingTable}
+                    {...restProps}
+                    components={components ? Object.assign({}, this.components, components) : this.components}
+                    onRow={(_, index) => {
+                        return {
+                            index,
+                            moveRow: this.moveRow,
+                        } as React.HTMLAttributes<HTMLElement>
+                    }}
+                />)}
+                </WithCss>
+            </DndProvider>
+        );
+    }
+}

package/components/text/impl/innerSize.ts

@@ -0,0 +1,15 @@
+// Calculate height without padding.
+export function innerHeight(el:HTMLElement) {
+    const style = window.getComputedStyle(el, null);
+    return el.clientHeight -
+        parseInt(style.getPropertyValue('padding-top'), 10) -
+        parseInt(style.getPropertyValue('padding-bottom'), 10);
+}
+
+// Calculate width without padding.
+export function innerWidth(el:HTMLElement) {
+    const style = window.getComputedStyle(el, null);
+    return el.clientWidth -
+        parseInt(style.getPropertyValue('padding-left'), 10) -
+        parseInt(style.getPropertyValue('padding-right'), 10);
+}

package/components/text/impl/series.ts

@@ -0,0 +1,37 @@
+/**
+ * Run the functions in the tasks array in series, each one running once the previous function has completed.
+ * If any functions in the series pass an error to its callback, no more functions are run,
+ * and callback is immediately called with the value of the error. Otherwise, callback receives an array of results
+ * when tasks have completed.
+ * Taken from https://github.com/feross/run-series
+ *
+ * @params {Array} tasks An array containing functions to run, each function is passed a callback(err, result) which it must call on completion with an error err (which can be null) and an optional result value.
+ * @params {Function} callback(err, results) - An optional callback to run once all the functions have completed. This function gets a results array containing all the result arguments passed to the task callbacks.
+ */
+
+import process from 'process';
+
+export default function series(tasks: Function[], cb:Function) {
+    const results:any[] = [];
+    let current = 0;
+    let isSync = true;
+
+    function done(err:any) {
+        function end() {
+            if (cb) cb(err, results);
+        }
+        if (isSync) process.nextTick(end);
+        else end();
+    }
+
+    function each(err:any, result:any) {
+        results.push(result);
+        if (++current >= tasks.length || err) done(err);
+        else tasks[current](each);
+    }
+
+    if (tasks.length > 0) tasks[0](each);
+    else done(null);
+
+    isSync = false;
+}

package/components/text/impl/shallowEqual.ts

@@ -0,0 +1,19 @@
+export default function shallowEqual(objA:any, objB:any) {
+    if (objA === objB) {
+        return true;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    // Test for A's keys different from B.
+    const hasOwn = Object.prototype.hasOwnProperty;
+    for (let i = 0; i < keysA.length; i++) {
+        if (!hasOwn.call(objB, keysA[i]) ||
+            objA[keysA[i]] !== objB[keysA[i]]) {
+            return false;
+        }
+    }
+    return true;
+}

package/components/text/impl/uniqueId.ts

@@ -0,0 +1,5 @@
+let uid = 0;
+
+export default function uniqueId() {
+    return uid++;
+}

package/components/text/impl/whilst.ts

@@ -0,0 +1,25 @@
+const noop = () => {};
+
+/**
+ * Repeatedly call fn, while test returns true. Calls callback when stopped, or an error occurs.
+ *
+ * @param {Function} test Synchronous truth test to perform before each execution of fn.
+ * @param {Function} fn A function which is called each time test passes. The function is passed a callback(err), which must be called once it has completed with an optional err argument.
+ * @param {Function} callback A callback which is called after the test fails and repeated execution of fn has stopped.
+ */
+
+export default function whilst(test: ()=>boolean, iterator:Function, callback:Function= noop) {
+    if (test()) {
+        iterator(function next(this: any, err:string, ...args:any) {
+            if (err) {
+                callback(err);
+            } else if (test.apply(this, args)) {
+                iterator(next);
+            } else {
+                callback(null);
+            }
+        });
+    } else {
+        callback(null);
+    }
+}