d2coreui 23.0.15 → 23.0.17

package/components/grid/panel/tablePagination.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import {CheckOutlined} from "@ant-design/icons";
-import {Button, InputNumber, Pagination, Popover, Space} from "antd";
-import i18n from "d2core/i18n/i18n";
-import {PaginationProps} from "antd/es/pagination";
-
-interface PaginationComponentState {
-    gotoPageNumber?: number | null
-}
-
-export default class PaginationComponent extends React.Component<PaginationProps, PaginationComponentState> {
-    constructor(props: Readonly<PaginationProps>) {
-        super(props);
-        this.state = {
-            gotoPageNumber: null
-        }
-    }
-
-    render() {
-        const pageCount = this.props.total && this.props.pageSize ? Math.ceil(this.props.total / this.props.pageSize) : 1;
-        return (
-            <div>
-                <Pagination
-                    showSizeChanger={false}
-                    {...this.props}
-                    itemRender={(page, type, originalElement) => {
-                        if (page === this.props.current && type === "page") {
-                            return (
-                                <Popover
-                                    title=""
-                                    placement="bottom"
-                                    content={
-                                        <Space.Compact>
-                                            <InputNumber min={1} max={pageCount}
-                                                         value={this.state.gotoPageNumber ? this.state.gotoPageNumber : this.props.current}
-                                                         onChange={(newValue) => {
-                                                             if (typeof newValue === "number") {
-                                                                 this.setState({gotoPageNumber: newValue});
-                                                             }
-                                                         }}
-                                                         onKeyDown={(e) => {
-                                                             if (e.code === "Enter") {
-                                                                 if (this.state.gotoPageNumber && this.props.onChange) {
-                                                                     this.props.onChange(this.state.gotoPageNumber, this.props.pageSize!);
-                                                                 }
-                                                             }
-                                                         }}
-                                            />
-                                            <Button title={i18n("Goto Page")} type="primary" onClick={() => {
-                                                if (this.state.gotoPageNumber && this.props.onChange) {
-                                                    this.props.onChange(this.state.gotoPageNumber, this.props.pageSize!);
-                                                }
-                                            }}>
-                                                <CheckOutlined/>
-                                            </Button>
-                                        </Space.Compact>
-                                    }
-                                    trigger="hover"
-                                    onOpenChange={(visible) => {
-                                        if (!visible) {
-                                            this.setState({gotoPageNumber: null});
-                                        }
-                                    }}
-                                    overlayClassName="control-panel-popover"
-                                >
-                                    {originalElement}
-                                </Popover>
-                            );
-                        } else {
-                            return originalElement;
-                        }
-                    }}
-                />
-            </div>
-        );
-    }
-}

package/components/icons/dropdownArrow.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import {createStyles} from "antd-style";
-import {DownOutlined} from "@ant-design/icons";
-import WithCss from "d2coreui/components/style/withCss";
-import {AntdIconProps} from "@ant-design/icons/lib/components/AntdIcon";
-
-// @ts-ignore
-const useStyles = createStyles(({token, css, cx}) => {
-    return {
-        dropdownArrow: css`
-            transform-origin: 50% 50%;
-            margin-left: ${token.controlPaddingHorizontalSM}px;
-        `,
-
-        dropdownArrowIcon: css`
-            color: ${token.colorTextDisabled};
-            font-size: ${token.fontSizeSM}px;
-            vertical-align: center;
-            cursor: pointer;
-            transition: color 0.3s;
-
-            &:hover {
-                color: ${token.colorTextSecondary};
-            }
-
-            &:active {
-                color: ${token.colorText};
-            }
-
-            + i {
-                margin-left: 6px;
-            }
-
-            svg {
-                transition: transform 0.3s;
-            }
-        `,
-
-        dropdownArrowIconOpen: css`
-            svg {
-                transform: rotate(180deg);
-            }
-        `
-    };
-}, {label: "dropdownArrow"});
-
-export interface DropdownArrowProps extends AntdIconProps {
-    opened?: boolean
-}
-
-export default class DropdownArrow extends React.PureComponent<DropdownArrowProps> {
-    render() {
-        const {opened, ...restProps} = this.props;
-
-        return (
-            <WithCss useStyles={useStyles}>{
-                (css) =>
-                    <span className={css.styles.dropdownArrow}>
-                        <DownOutlined {...restProps}
-                                      className={opened ? css.cx(css.styles.dropdownArrowIcon, css.styles.dropdownArrowIconOpen) : css.styles.dropdownArrowIcon}
-                                      role="button" tabIndex={-1}
-                        />
-                </span>
-            }</WithCss>
-        );
-    }
-}

package/components/icons/undoIcon.tsx

@@ -1,16 +0,0 @@
-import React, {CSSProperties} from "react";
-import Icon from "@ant-design/icons/es/components/Icon";
-
-const UndoIcon = (props: { style?: CSSProperties }) => (
-    <Icon component={() => <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 14 14" width={14} height={14}
-                                style={props.style}>
-        <path
-            d="m 8.327691,3.3283097 c 2.800837,0 5.07135,2.3743226 5.07135,5.303197 0,2.9288733 -2.270513,5.3031963 -5.07135,5.3031963 H 4.946796 v -0.883866 h 3.380895 c 2.334032,0 4.226127,-1.978602 4.226127,-4.4193303 0,-2.4407292 -1.892095,-4.4193308 -4.226127,-4.4193308 H 2.338436 L 4.904535,6.8955935 4.306962,7.5204869 0.720677,3.7702428 4.306962,0.01999879 4.904535,0.64489216 2.338436,3.3283097 Z"
-            style={{display: "inline", fill: "currentColor"}}/>
-    </svg>}/>);
-
-const UndoMenuIcon = (props: { style?: CSSProperties }) => (
-    <UndoIcon style={Object.assign({marginRight: 6, width: 12, height: 12}, props.style)}/>
-)
-
-export {UndoIcon, UndoMenuIcon};

package/components/input/autoCompleteInput.tsx

@@ -1,174 +0,0 @@
-import React from "react"
-import {AutoComplete, Input} from "antd";
-import {AutoCompleteProps} from "antd/es/auto-complete";
-import {DefaultOptionType, RefSelectProps} from "antd/es/select";
-import {Key} from "ts-key-enum";
-import DropdownArrow from "../icons/dropdownArrow";
-
-interface InputSearchWithHistoryProps extends Omit<AutoCompleteProps, "onChange" | "onSearch" | "placeholder" | "options"> {
-    value?: string
-
-    options?: string[]
-
-    placeholder?: string
-
-    prefix?: React.ReactNode
-
-    onChange(searchString: string): void
-
-    onSearch(): void
-
-    onPressEnter?(): void
-
-    stringFormatter?(rawString: string): string
-}
-
-interface InputSearchWithHistoryState {
-    opened: boolean
-    loading: boolean
-    searchString?: string
-}
-
-export default class AutoCompleteInput extends React.Component<InputSearchWithHistoryProps, InputSearchWithHistoryState> {
-    static get defaultProps() {
-        return {
-            onSearch: () => {
-            },
-            onChange: () => {
-            }
-        };
-    }
-
-    private autocomplete: React.RefObject<RefSelectProps>;
-
-    constructor(props: Readonly<InputSearchWithHistoryProps>) {
-        super(props);
-        this.state = {
-            opened: false,
-            loading: false,
-        };
-
-        this.autocomplete = React.createRef();
-        this.focus = this.focus.bind(this);
-    }
-
-    focus() {
-        this.autocomplete.current?.focus();
-    }
-
-    /**
-     * Handling setting search string from parent component
-     */
-    static getDerivedStateFromProps(props: InputSearchWithHistoryProps, state: InputSearchWithHistoryState): Partial<InputSearchWithHistoryState> {
-        const newState: Partial<InputSearchWithHistoryState> = {};
-        if (props.value !== state.searchString) {
-            newState.searchString = props.value;
-        }
-        return newState;
-    }
-
-    setSearchString(searchString: string) {
-        if(this.props.stringFormatter) {
-            if (searchString.indexOf("ðð") < 0 && this.props.options && this.props.options.length > 0) {
-                for (let i = 0; i < this.props.options.length; i++) {
-                    if (searchString === this.props.stringFormatter(this.props.options[i])) {
-                        searchString = this.props.options[i];
-                        break;
-                    }
-                }
-            }
-            if (this.state.searchString !== searchString) {
-                this.setState({opened: false, searchString: searchString}, () => {
-                    this.props.onChange(searchString);
-                });
-            } else {
-                this.setState({opened: false});
-            }
-        } else {
-            this.setState({opened: false, searchString: searchString});
-            this.props.onChange(searchString);
-        }
-    }
-
-    getAutocompleteOptions(): DefaultOptionType[] {
-        const autocompleteData = [];
-        if (this.props.options && this.props.options.length > 0) {
-            autocompleteData.push(...this.props.options);
-        }
-        return autocompleteData.filter((e) => !!e).map((e) => {
-            return ({
-                value: "" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e),
-                label: "" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e)
-            });
-        });
-    }
-
-    /**
-     * Handling search confirmation by pressing enter
-     */
-    onSearch() {
-        this.props.onSearch();
-    }
-
-    onSelect(searchString: string) {
-        this.setSearchString(searchString);
-    }
-
-    render() {
-        let {disabled, stringFormatter, onChange, onSearch, placeholder, onPressEnter, options, value, size, ...rest} = this.props;
-        const searchHistoryPresent = this.props.options && this.props.options.length > 0;
-        return (
-            <AutoComplete
-                options={this.state.opened ? this.getAutocompleteOptions() : []}
-                style={{width: 200}}
-                value={this.state.searchString && stringFormatter ? stringFormatter(this.state.searchString) : this.state.searchString}
-                defaultOpen={false}
-                defaultActiveFirstOption={false}
-                onChange={(searchString) => {
-                    if (typeof searchString === "string") {
-                        this.setSearchString(searchString as string);
-                    }
-                }}
-                onSelect={(searchString) => {
-                    if (typeof searchString === "string") {
-                        this.onSelect(searchString as string);
-                    }
-                }}
-                onBlur={() => {
-                    this.setState({opened: false});
-                }}
-                {...rest}
-                disabled={disabled || this.state.loading}
-            >
-                <Input
-                    size={size}
-                    allowClear={!disabled}
-                    onKeyDown={(e) => {
-                        if (!this.state.opened && e.key === Key.ArrowDown) {
-                            this.setState({opened: true});
-                        } else if (e.key === Key.Escape) {
-                            this.setState({opened: false});
-                        } else if (this.state.opened && e.key === Key.Enter) {
-                            this.setState({opened: false});
-                            this.onSearch();
-                        } else if (!this.state.opened && e.key === Key.Enter) {
-                            this.onSearch();
-                        }
-                    }}
-                    placeholder={placeholder}
-                    prefix={this.props.prefix}
-                    suffix={
-                        searchHistoryPresent &&
-                        <DropdownArrow opened={this.state.opened}
-                                       onClick={() => {
-                                           if (!this.props.disabled && !this.state.loading) {
-                                               this.setState({opened: !this.state.opened});
-                                           }
-                                       }}/>
-                    }
-                    disabled={disabled || this.state.loading}
-                    onPressEnter={this.state.opened ? undefined : onPressEnter}/>
-            </AutoComplete>
-        );
-    }
-}

package/components/input/draftUtils.tsx

@@ -1,62 +0,0 @@
-import {convertFromRaw, DraftInlineStyleType, RawDraftContentState} from "draft-js"
-import {convertToHTML, IConvertToHTMLConfig} from "draft-convert"
-import {BLOCK_TYPE, ENTITY_TYPE} from "./draftail"
-import React from "react";
-
-const exporterConfig: IConvertToHTMLConfig = {
-    styleToHTML: (style: DraftInlineStyleType) => {
-        if ((style as string)=== 'MARK') {
-            return <span className={"marked-message-content"} />;
-        }
-        style;
-        // @ts-ignore
-        return;
-    },
-
-    blockToHTML: (block) => {
-        if ((block as any).type === BLOCK_TYPE.BLOCKQUOTE) {
-            return <blockquote/>
-        }
-
-        // Discard atomic blocks, as they get converted based on their entity.
-        if ((block as any).type === BLOCK_TYPE.ATOMIC) {
-            return {
-                start: "",
-                end: "",
-            }
-        }
-
-        return null
-    },
-
-    entityToHTML: (entity, originalText) => {
-        if (entity.type === ENTITY_TYPE.LINK) {
-            return <a href={entity.data.url}>{originalText}</a>
-        }
-
-        if (entity.type === ENTITY_TYPE.IMAGE) {
-            return <img src={entity.data.src} alt={entity.data.alt}/>
-        }
-
-        if (entity.type === ENTITY_TYPE.HORIZONTAL_RULE) {
-            return <hr/>
-        }
-
-        return originalText
-    },
-}
-
-
-const conversionFunction = convertToHTML(exporterConfig);
-
-export default class DraftUtils {
-
-    static toHTML(raw: RawDraftContentState): string {
-        if (raw) {
-            return conversionFunction(convertFromRaw(raw));
-        } else {
-            return "";
-        }
-    }
-
-}

package/components/input/hexaFormattedInput.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import {Input, InputRef} from "antd";
-import {InputProps} from "antd/es";
-
-interface HexaFormattedInputProps extends Omit<InputProps, "value" | "onChange"> {
-    value: string
-    maxLength: number
-
-    onChange(value: string | undefined): void
-}
-
-export default class HexaFormattedInput extends React.Component<HexaFormattedInputProps, any> {
-    private inputRef: InputRef | null = null;
-
-    constructor(props: Readonly<HexaFormattedInputProps>) {
-        super(props);
-    }
-
-    get input() {
-        return this.inputRef?.input;
-    }
-
-    focus() {
-        this.inputRef?.focus();
-    }
-
-    private getFormattedValue(value: string): string {
-        let valueToFormat = value;
-        for (let i = 0; i < this.props.maxLength - value.length; i++) {
-            valueToFormat = "0" + valueToFormat;
-        }
-        return valueToFormat.toUpperCase();
-    }
-
-    render() {
-        const {value, maxLength, onChange, ...rest} = this.props;
-
-        return (
-            <Input
-                {...rest}
-                ref={component => {
-                    this.inputRef = component;
-                }}
-                value={this.props.value.toUpperCase()}
-                onChange={event => {
-                    const value = event.target.value;
-                    if (/^[0-9A-Fa-f]+$/.test(value) || value === "") {
-                        this.props.onChange(value);
-                    }
-                }}
-                onBlur={event => {
-                    let value = event.target.value;
-                    if (!value) {
-                        this.props.onChange(undefined);
-                    } else {
-                        const formattedValue = this.getFormattedValue(value);
-                        this.props.onChange(formattedValue);
-                    }
-                }}
-                maxLength={this.props.maxLength}
-            />
-        );
-    }
-}

package/components/input/mask/helpers.ts

@@ -1,154 +0,0 @@
-import {KeyboardEvent} from 'react';
-
-let KEYCODE_Z = "KeyZ";
-let KEYCODE_Y = "KeyY";
-
-export function isUndo(e: KeyboardEvent): boolean {
-    return (
-        (e.ctrlKey || e.metaKey) &&
-        e.code === (e.shiftKey ? KEYCODE_Y : KEYCODE_Z)
-    );
-}
-
-export function isRedo(e: KeyboardEvent): boolean {
-    return (
-        (e.ctrlKey || e.metaKey) &&
-        e.code === (e.shiftKey ? KEYCODE_Z : KEYCODE_Y)
-    );
-}
-
-type GetSelectionResult = { start: number; end: number };
-
-export function getSelection(el: HTMLInputElement): GetSelectionResult {
-    let start, end;
-    if (el.selectionStart !== undefined) {
-        start = el.selectionStart;
-        end = el.selectionEnd;
-    } else {
-        try {
-            el.focus();
-            // @ts-ignore (IE only)
-            let rangeEl = el.createTextRange();
-            let clone = rangeEl.duplicate();
-
-            // @ts-ignore (IE only)
-            rangeEl.moveToBookmark(document.selection.createRange().getBookmark());
-            clone.setEndPoint('EndToStart', rangeEl);
-
-            start = clone.text.length;
-            end = start + rangeEl.text.length;
-        } catch (e) {
-            /* not focused or not visible */
-        }
-    }
-
-    return { start, end };
-}
-
-let selectionTimeout: any;
-export function setSelection(
-    el: HTMLInputElement,
-    selection: GetSelectionResult
-) {
-    clearTimeout(selectionTimeout);
-
-    try {
-        if (
-            el.selectionStart === selection.start &&
-            el.selectionEnd === selection.end
-        ) {
-            return;
-        }
-
-        if (el.selectionStart !== undefined) {
-            el.focus();
-            el.setSelectionRange(selection.start, selection.end);
-
-            // fix https://bugs.chromium.org/p/chromium/issues/detail?id=32865
-            selectionTimeout = setTimeout(() => {
-                setSelection(el, selection);
-            }, 0);
-
-        } else {
-            el.focus();
-            // @ts-ignore (IE only)
-            let rangeEl = el.createTextRange();
-            rangeEl.collapse(true);
-            rangeEl.moveStart('character', selection.start);
-            rangeEl.moveEnd('character', selection.end - selection.start);
-            rangeEl.select();
-        }
-    } catch (e) {
-        /* not focused or not visible */
-    }
-}
-
-/**
- * Merge an object defining format characters into the defaults.
- * Passing null/undefined for en existing format character removes it.
- * Passing a definition for an existing format character overrides it.
- */
-export function mergeFormatCharacters(formatCharacters: FormatCharacters) {
-    var merged = { ...DEFAULT_FORMAT_CHARACTERS };
-    if (formatCharacters) {
-        var chars = Object.keys(formatCharacters);
-        for (var i = 0, l = chars.length; i < l; i++) {
-            var char = chars[i];
-            if (formatCharacters[char] == null) {
-                delete merged[char];
-            } else {
-                merged[char] = formatCharacters[char];
-            }
-        }
-    }
-    return merged;
-}
-
-export const ESCAPE_CHAR = '\\';
-
-export const DIGIT_RE = /^\d$/;
-export const LETTER_RE = /^[A-Za-z]$/;
-export const ALPHANNUMERIC_RE = /^[\dA-Za-z]$/;
-
-export const DEFAULT_PLACEHOLDER_CHAR = '_';
-
-export const DEFAULT_FORMAT_CHARACTERS: FormatCharacters = {
-    '*': {
-        validate: function(char: string) {
-            return ALPHANNUMERIC_RE.test(char);
-        }
-    },
-    '1': {
-        validate: function(char: string) {
-            return DIGIT_RE.test(char);
-        }
-    },
-    a: {
-        validate: function(char: string) {
-            return LETTER_RE.test(char);
-        }
-    },
-    A: {
-        validate: function(char: string) {
-            return LETTER_RE.test(char);
-        },
-        transform: function(char: string) {
-            return char.toUpperCase();
-        }
-    },
-    '#': {
-        validate: function(char: string) {
-            return ALPHANNUMERIC_RE.test(char);
-        },
-        transform: function(char: string) {
-            return char.toUpperCase();
-        }
-    }
-};
-
-export type FormatCharacters = {
-    [key: string]: {
-        transform?(str: string): string;
-        validate(str: string): boolean;
-    };
-};