d2coreui 23.0.14 → 23.0.15

package/components/grid/panel/tablePagination.tsx

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

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

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

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

@@ -0,0 +1,62 @@
+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/draftail.d.ts

@@ -1 +1,186 @@
-export {};
+import * as CSS from 'csstype'
+import * as Draft from 'draft-js'
+import * as React from 'react'
+
+export = Draftail
+export as namespace Draftail
+
+declare namespace Draftail {
+    interface DraftailEditorProps {
+        // Initial content of the editor. Use this to edit pre-existing content.
+        rawContentState?: Draft.RawDraftContentState
+        // Called when changes occured. Use this to persist editor content.
+        onSave?: (contentState: Draft.RawDraftContentState) => void
+
+        editorState?: Draft.EditorState
+        onChange?: (contentState: Draft.EditorState) => void
+        // Displayed when the editor is empty. Hidden if the user changes styling.
+        placeholder?: string
+        // Enable the use of horizontal rules in the editor. [Default: false]
+        enableHorizontalRule?: boolean
+        // Enable the use of line breaks in the editor. [Default: false]
+        enableLineBreak?: boolean
+        // Show undo control in the toolbar. [Default: false]
+        showUndoControl?: boolean
+        // Show redo control in the toolbar. [Default: false]
+        showRedoControl?: boolean
+        // Disable copy/paste of rich text in the editor. [Default: true]
+        stripPastedStyles?: boolean
+        // Set whether spellcheck is turned on for your editor. [Default: false]
+        // See https://draftjs.org/docs/api-reference-editor.html#spellcheck.
+        spellCheck?: boolean
+        // Set whether the editor should be rendered in readOnly mode.
+        // See https://draftjs.org/docs/api-reference-editor.html#readonly
+        readOnly?: boolean,
+        // Optionally set the overriding text alignment for this editor.
+        // See https://draftjs.org/docs/api-reference-editor.html#textalignment.
+        textAlignment?: any
+        // Optionally set the overriding text directionality for this editor.
+        // See https://draftjs.org/docs/api-reference-editor.html#textdirectionality.
+        textDirectionality?: any
+        // Set if auto capitalization is turned on and how it behaves.
+        // See https://draftjs.org/docs/api-reference-editor.html#autocapitalize-string.
+        autoCapitalize?: any
+        // Set if auto complete is turned on and how it behaves.
+        // See https://draftjs.org/docs/api-reference-editor.html#autocomplete-string.
+        autoComplete?: any
+        // Set if auto correct is turned on and how it behaves.
+        // See https://draftjs.org/docs/api-reference-editor.html#autocorrect-string.
+        autoCorrect?: any
+        // See https://draftjs.org/docs/api-reference-editor.html#aria-props.
+        ariaDescribedBy?: any
+        // List of the available block types.
+        blockTypes?: Array<any>
+        // List of the available inline styles.
+        inlineStyles?: Array<any>
+        // List of the available entity types.
+        entityTypes?: Array<any>
+        // List of active decorators.
+        decorators?: Array<any>
+        // Additional React components to render in the toolbar.
+        controls?: Array<any>
+        // Max level of nesting for list items. 0 = no nesting. Maximum = 10. [Default: 1]
+        maxListNesting?: number
+        // Frequency at which to call the save callback (ms). [Default: 250]
+        stateSaveInterval?: number
+        topToolbar: any
+        bottomToolbar: any
+    }
+
+    export class DraftailEditor extends React.Component<DraftailEditorProps> {
+        focus(): void
+    }
+
+    export function createEditorStateFromRaw(rawContentState?: Draft.RawDraftContentState): Draft.EditorState
+
+    export function serialiseEditorStateToRaw(editorState: Draft.EditorState): Draft.RawDraftContentState
+
+    interface InlineStyle {
+        // Unique type shared between inline style instances.
+        type: string
+        // Describes the inline style in the editor UI, concisely.
+        label?: string
+        // Describes the inline style in the editor UI.
+        description?: string
+        // Represents the inline style in the editor UI.
+        icon: any
+        // CSS properties (in JS format) to apply for styling within the editor area.
+        style: CSS.Properties<string | number>
+    }
+
+    interface BlockType {
+        // Unique type shared between block instances.
+        type: string
+        // Describes the block in the editor UI, concisely.
+        label?: string
+        // Describes the block in the editor UI.
+        description?: string
+        // Represents the block in the editor UI.
+        icon?: any
+        // DOM element used to display the block within the editor area.
+        element?: string
+    }
+
+    interface EntityType {
+        // Unique type shared between entity instances.
+        type: string
+        // Describes the entity in the editor UI, concisely.
+        label?: string
+        // Describes the entity in the editor UI.
+        description?: string
+        // Represents the entity in the editor UI.
+        icon: any
+        // React component providing the UI to manage entities of this type.
+        source: React.Component
+        // React component to display inline entities.
+        decorator?: React.Component
+        // React component to display block-level entities.
+        block?: React.Component
+        // Array of attributes the entity uses, to preserve when filtering entities on paste.
+        // If undefined, all entity data is preserved.
+        attributes?: Array<string>
+        // Attribute - regex mapping, to whitelist entities based on their data on paste.
+        // For example, { url: '^https:' } will only preserve links that point to HTTPS URLs.
+        whitelist: { [key: string]: string }
+    }
+
+    interface Decorator {
+        // Determines which pieces of content are to be decorated.
+        strategy?: () => void
+        // React component to display the decoration.
+        component?: React.Component
+    }
+
+    interface Control {
+        // Retrieve the full Draft.js EditorState.
+        getEditorState?: () => void
+        // Change any part of the EditorState.
+        onChange?: () => void
+    }
+
+    // See https://github.com/facebook/draft-js/blob/master/src/model/immutable/DefaultDraftInlineStyle.js
+    export const INLINE_STYLE: {
+        BOLD: 'BOLD'
+        ITALIC: 'ITALIC'
+        CODE: 'CODE'
+        UNDERLINE: 'UNDERLINE'
+        STRIKETHROUGH: 'STRIKETHROUGH'
+        MARK: 'MARK'
+        QUOTATION: 'QUOTATION'
+        SMALL: 'SMALL'
+        SAMPLE: 'SAMPLE'
+        INSERT: 'INSERT'
+        DELETE: 'DELETE'
+        KEYBOARD: 'KEYBOARD'
+        SUPERSCRIPT: 'SUPERSCRIPT'
+        SUBSCRIPT: 'SUBSCRIPT'
+    }
+
+    // See https://github.com/facebook/draft-js/blob/master/src/model/immutable/DefaultDraftBlockRenderMap.js
+    export const BLOCK_TYPE: {
+        // This is used to represent a normal text block (paragraph).
+        UNSTYLED: 'unstyled'
+        HEADER_ONE: 'header-one'
+        HEADER_TWO: 'header-two'
+        HEADER_THREE: 'header-three'
+        HEADER_FOUR: 'header-four'
+        HEADER_FIVE: 'header-five'
+        HEADER_SIX: 'header-six'
+        UNORDERED_LIST_ITEM: 'unordered-list-item'
+        ORDERED_LIST_ITEM: 'ordered-list-item'
+        BLOCKQUOTE: 'blockquote'
+        CODE: 'code-block'
+        // This represents a "custom" block, not for rich text, with arbitrary content.
+        ATOMIC: 'atomic'
+    }
+
+    export const ENTITY_TYPE: {
+        LINK: 'LINK'
+        IMAGE: 'IMAGE'
+        HORIZONTAL_RULE: 'HORIZONTAL_RULE'
+    }
+
+    export const Icon: any
+    export const ToolbarButton: any
+    export const DraftUtils: any
+}

package/components/input/draftail.js

@@ -1,2 +1 @@
-export * from "draftail";
-//# sourceMappingURL=draftail.js.map
+export * from "draftail"

package/components/input/hexaFormattedInput.tsx

@@ -0,0 +1,64 @@
+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}
+            />
+        );
+    }
+}