d2coreui 23.0.14 → 23.0.15

package/components/input/mask/pattern.ts

@@ -0,0 +1,122 @@
+import {DEFAULT_FORMAT_CHARACTERS, DEFAULT_PLACEHOLDER_CHAR, ESCAPE_CHAR, FormatCharacters,} from './helpers';
+
+export class Pattern {
+    placeholderChar: string;
+    formatCharacters: FormatCharacters;
+    source: string;
+
+    /** Pattern characters after escape characters have been processed. */
+    pattern = [];
+
+    /** Length of the pattern after escape characters have been processed. */
+    length = 0;
+
+    /** Index of the first editable character. */
+    firstEditableIndex: null | number = null;
+
+    /** Index of the last editable character. */
+    lastEditableIndex: null | number = null;
+
+    /** Lookup for indices of editable characters in the pattern. */
+    _editableIndices: { [key: number]: boolean } = {};
+
+    /** If true, only the pattern before the last valid value character shows. */
+    isRevealingMask: boolean;
+
+    constructor(
+        source: string,
+        formatCharacters: FormatCharacters,
+        placeholderChar: string,
+        isRevealingMask = false,
+    ) {
+        /** Placeholder character */
+        this.placeholderChar = placeholderChar || DEFAULT_PLACEHOLDER_CHAR;
+        /** Format character definitions. */
+        this.formatCharacters = formatCharacters || DEFAULT_FORMAT_CHARACTERS;
+        /** Pattern definition string with escape characters. */
+        this.source = source;
+
+        this.isRevealingMask = isRevealingMask;
+
+        this._parse();
+    }
+
+    _parse() {
+        var sourceChars = this.source.split('');
+        var patternIndex = 0;
+        var pattern: string[] = [];
+
+        for (var i = 0, l = sourceChars.length; i < l; i++) {
+            var char = sourceChars[i];
+            if (char === ESCAPE_CHAR) {
+                if (i === l - 1) {
+                    throw new Error('InputMask: pattern ends with a raw ' + ESCAPE_CHAR);
+                }
+                char = sourceChars[++i];
+            } else if (char in this.formatCharacters) {
+                if (this.firstEditableIndex === null) {
+                    this.firstEditableIndex = patternIndex;
+                }
+                this.lastEditableIndex = patternIndex;
+                this._editableIndices[patternIndex] = true;
+            }
+
+            pattern.push(char);
+            patternIndex++;
+        }
+
+        if (this.firstEditableIndex === null) {
+            throw new Error(
+                'InputMask: pattern "' + this.source + '" does not contain any editable characters.',
+            );
+        }
+
+        // @ts-ignore
+        this.pattern = pattern;
+        this.length = pattern.length;
+    }
+
+    formatValue(value: string[]): string[] {
+        var valueBuffer = new Array(this.length);
+        var valueIndex = 0;
+
+        for (var i = 0, l = this.length; i < l; i++) {
+            if (this.isEditableIndex(i)) {
+                if (
+                    this.isRevealingMask &&
+                    value.length <= valueIndex &&
+                    !this.isValidAtIndex(value[valueIndex], i)
+                ) {
+                    break;
+                }
+                valueBuffer[i] =
+                    value.length > valueIndex && this.isValidAtIndex(value[valueIndex], i)
+                        ? this.transform(value[valueIndex], i)
+                        : this.placeholderChar;
+                valueIndex++;
+            } else {
+                valueBuffer[i] = this.pattern[i];
+                // Also allow the value to contain static values from the pattern by
+                // advancing its index.
+                if (value.length > valueIndex && value[valueIndex] === this.pattern[i]) {
+                    valueIndex++;
+                }
+            }
+        }
+
+        return valueBuffer;
+    }
+
+    isEditableIndex(index: number) {
+        return !!this._editableIndices[index];
+    }
+
+    isValidAtIndex(char: string, index: number) {
+        return this.formatCharacters[this.pattern[index]].validate(char);
+    }
+
+    transform(char: string, index: number) {
+        var format = this.formatCharacters[this.pattern[index]];
+        return typeof format.transform == 'function' ? format.transform(char) : char;
+    }
+}

package/components/input/maskedInput.tsx

@@ -0,0 +1,275 @@
+import React, {ChangeEvent, ClipboardEvent, Component, KeyboardEvent} from 'react';
+import {Input, InputRef} from 'antd';
+import InputMask from 'd2coreui/components/input/mask/inputMaskCore';
+import {getSelection, isRedo, isUndo, setSelection} from 'd2coreui/components/input/mask/helpers';
+import {InputProps} from 'antd/lib/input';
+
+export type MaskedInputProps = InputProps & {
+    mask: string;
+    formatCharacters?: object;
+    placeholderChar?: string;
+    value?: string;
+};
+
+type TChangeEvent = ChangeEvent<HTMLInputElement>;
+type TKeyboardEvent = KeyboardEvent<HTMLInputElement>;
+type TClipboardEvent = ClipboardEvent<any>;
+
+export default class MaskedInput extends Component<MaskedInputProps, {value?: string}> {
+    mask: InputMask;
+    input!: HTMLInputElement;
+
+    constructor(props: MaskedInputProps) {
+        super(props);
+
+        this.state = {
+            value: this.props.value,
+        }
+
+        let options: any = {
+            pattern: this.props.mask,
+            value: this.props.value,
+            formatCharacters: this.props.formatCharacters
+        };
+
+        if (this.props.placeholderChar) {
+            options.placeholderChar = this.props.placeholderChar;
+        }
+
+        this.mask = new InputMask(options);
+    }
+
+    componentDidMount() {
+        this.setInputValue(this._getDisplayValue());
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: MaskedInputProps) {
+        if (
+            this.props.mask !== nextProps.mask &&
+            this.props.value !== nextProps.mask
+        ) {
+            // if we get a new value and a new mask at the same time
+            // check if the mask.value is still the initial value
+            // - if so use the nextProps value
+            // - otherwise the `this.mask` has a value for us (most likely from paste action)
+            if (this.mask.getValue() === this.mask.emptyValue) {
+                this.mask.setPattern(nextProps.mask, {value: nextProps.value});
+            } else {
+                this.mask.setPattern(nextProps.mask, {
+                    value: this.mask.getRawValue()
+                });
+            }
+        } else if (this.props.mask !== nextProps.mask) {
+            this.mask.setPattern(nextProps.mask, {value: this.mask.getRawValue()});
+        }
+
+        if (this.props.value !== nextProps.value) {
+            this.mask.setValue(nextProps.value);
+            this.setInputValue(this._getDisplayValue());
+        }
+    }
+
+    UNSAFE_componentWillUpdate(nextProps: MaskedInputProps) {
+        if (!this.props.mask) return null;
+        if (nextProps.mask !== this.props.mask) {
+            this._updatePattern(nextProps);
+        }
+        return;
+    }
+
+    componentDidUpdate(prevProps: MaskedInputProps) {
+        if (!this.props.mask) return null;
+        if (prevProps.mask !== this.props.mask && this.mask.selection.start) {
+            this._updateInputSelection();
+        }
+        return;
+    }
+
+    _updatePattern(props: MaskedInputProps) {
+        this.mask.setPattern(props.mask, {
+            value: this.mask.getRawValue(),
+            selection: getSelection(this.input)
+        });
+    }
+
+    _updateMaskSelection() {
+        this.mask.selection = getSelection(this.input);
+    }
+
+    _updateInputSelection() {
+        setSelection(this.input, this.mask.selection);
+    }
+
+    _onChange = (e: TChangeEvent) => {
+        let maskValue = this.mask.getValue();
+        let incomingValue = e.target.value;
+        if (incomingValue !== maskValue) {
+            // only modify mask if form contents actually changed
+            this._updateMaskSelection();
+            this.mask.setValue(incomingValue); // write the whole updated value into the mask
+            this.setInputValue(this._getDisplayValue()); // update the form with pattern applied to the value
+            this._updateInputSelection();
+        }
+
+        if (this.props.onChange) {
+            this.props.onChange(e);
+        }
+    };
+
+    _onKeyDown = (e: TKeyboardEvent) => {
+        setTimeout(() => {
+            this.input.classList[this.input.value ? 'add' : 'remove']('has-value');
+        }, 100);
+
+        if (isUndo(e)) {
+            e.preventDefault();
+            if (this.mask.undo()) {
+                this.setInputValue(this._getDisplayValue());
+                this._updateInputSelection();
+                if (this.props.onChange) {
+                    this.props.onChange(e as unknown as TChangeEvent);
+                }
+            }
+            return;
+        } else if (isRedo(e)) {
+            e.preventDefault();
+            if (this.mask.redo()) {
+                this.setInputValue(this._getDisplayValue());
+                this._updateInputSelection();
+                if (this.props.onChange) {
+                    this.props.onChange(e as unknown as TChangeEvent);
+                }
+            }
+            return;
+        }
+
+        if (e.key === 'Backspace') {
+            e.preventDefault();
+            this._updateMaskSelection();
+            if (this.mask.backspace()) {
+                let value = this._getDisplayValue();
+                this.setInputValue(value);
+                if (value) {
+                    this._updateInputSelection();
+                }
+                if (this.props.onChange) {
+                    this.props.onChange(e as unknown as TChangeEvent);
+                }
+            }
+        }
+    };
+
+    _onKeyPress = (e: TKeyboardEvent) => {
+        // Ignore modified key presses
+        // Ignore enter key to allow form submission
+        if (e.metaKey || e.altKey || e.ctrlKey || e.key === 'Enter') {
+            return;
+        }
+
+        e.preventDefault();
+        this._updateMaskSelection();
+        if (this.mask.input(e.key /*|| e.data*/)) {
+            this.setInputValue(this.mask.getValue());
+            this._updateInputSelection();
+            if (this.props.onChange) {
+                this.props.onChange(e as unknown as TChangeEvent);
+            }
+        }
+    };
+
+    _onPaste = (e: TClipboardEvent) => {
+        e.preventDefault();
+        this._updateMaskSelection();
+        // getData value needed for IE also works in FF & Chrome
+        if (this.mask.paste(e.clipboardData.getData('Text'))) {
+            // @ts-ignore
+            this.setInputValue(this.mask.getValue());
+            // Timeout needed for IE
+            setTimeout(() => this._updateInputSelection(), 0);
+            if (this.props.onChange) {
+                // @ts-ignore
+                this.props.onChange(e);
+            }
+        }
+    };
+
+    _getDisplayValue() {
+        let value = this.mask.getValue();
+        return value === this.mask.emptyValue ? '' : value;
+    }
+
+    _keyPressPropName() {
+        if (typeof navigator !== 'undefined') {
+            return navigator.userAgent.match(/Android/i)
+                ? 'onBeforeInput'
+                : 'onKeyPress';
+        }
+        return 'onKeyPress';
+    }
+
+    _getEventHandlers(): {
+        onChange: (e: TChangeEvent) => void;
+        onKeyDown: (e: TKeyboardEvent) => void;
+        onPaste: (e: TClipboardEvent) => void;
+        onBeforeInput?: (e: TChangeEvent) => void;
+        onKeyPress?: (e: TKeyboardEvent) => void;
+    } {
+        return {
+            onChange: this._onChange,
+            onKeyDown: this._onKeyDown,
+            onPaste: this._onPaste,
+            [this._keyPressPropName()]: this._onKeyPress
+        };
+    }
+
+    focus() {
+        this.input.focus();
+    }
+
+    blur() {
+        this.input.blur();
+    }
+
+    getInputProps = () => {
+        let maxLength = this.mask.pattern.length;
+        let eventHandlers = this._getEventHandlers();
+        let {placeholder = this.mask.emptyValue} = this.props;
+
+        let {placeholderChar, formatCharacters, ...cleanedProps} = this.props;
+        const props = {...cleanedProps, ...eventHandlers, maxLength, placeholder};
+        delete props.value;
+        return props;
+    };
+
+    _lastValue = null as any;
+    setInputValue = (value: string) => {
+        if (!this._Input) return;
+        if (value === this._lastValue) return;
+
+        this.setState({value: value});
+
+        this._lastValue = value;
+        if (this._Input.input) {
+            this._Input.input.value = value;
+        }
+    };
+
+    _Input: InputRef | null = null;
+    handleInputRef = (ref: InputRef) => {
+        if (!ref || !ref.input) return;
+        this._Input = ref;
+        this.input = ref.input;
+
+        if (
+            this._lastValue === null &&
+            typeof this.props.defaultValue === 'string'
+        ) {
+            this.mask.setValue(this.props.defaultValue); // write the whole updated value into the mask
+            this.setInputValue(this._getDisplayValue()); // update the form with pattern applied to the value
+        }
+    };
+
+    render() {
+        return <Input value={this.state.value} {...this.getInputProps()} ref={this.handleInputRef}/>;
+    }
+}

package/components/input/passwordInput.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import {PasswordProps} from "antd/lib/input/Password";
+import {EyeInvisibleOutlined, EyeOutlined} from "@ant-design/icons";
+import {Input} from "antd";
+
+export default class PasswordInput extends React.Component<PasswordProps, unknown> {
+    private component: any | null = null;
+
+    constructor(props: Readonly<PasswordProps>) {
+        super(props);
+    }
+
+    focus() {
+        this.component?.focus?.();
+    }
+
+    getIcon = (visible: boolean) => {
+        const IconRenderer = class IconRend extends React.Component<any, any> {
+            render() {
+                const IconClass = visible ? EyeOutlined : EyeInvisibleOutlined;
+                return (<IconClass
+                    key="password-icon"
+                    className="ant-input-password-icon"
+                    onTouchStart={(e) => {
+                        e.preventDefault();
+                        if (!visible) {
+                            this.props.onClick?.();
+                        }
+                    }}
+                    onTouchEnd={() => {
+                        if (visible) {
+                            this.props.onClick?.();
+                        }
+                    }}
+                    onMouseDown={(e) => {
+                        e.preventDefault();
+                        if (!visible) {
+                            this.props.onClick?.();
+                        }
+                    }}
+                    onMouseUp={() => {
+                        if (visible) {
+                            this.props.onClick?.();
+                        }
+                    }}
+                    onMouseLeave={() => {
+                        if (visible) {
+                            this.props.onClick?.();
+                        }
+                    }}
+                />);
+            };
+        };
+        return <IconRenderer/>;
+    }
+
+    render() {
+        return <Input.Password {...this.props} iconRender={this.getIcon} visibilityToggle={true} ref={(component) => {
+            this.component = component;
+        }}/>
+    }
+}

package/components/input/simpleAutoComplete.tsx

@@ -0,0 +1,60 @@
+import {AutoCompleteProps} from "antd/es/auto-complete";
+import React from "react";
+import {AutoComplete, Input} from "antd";
+import {RefSelectProps} from "antd/es/select";
+import DropdownArrow from "../icons/dropdownArrow";
+
+interface SimpleAutoCompleteState {
+    opened: boolean
+}
+
+export default class SimpleAutoComplete extends React.Component<AutoCompleteProps, SimpleAutoCompleteState> {
+
+    private autocomplete: React.RefObject<RefSelectProps>;
+
+    constructor(props: Readonly<AutoCompleteProps>) {
+        super(props);
+        this.state = {
+            opened: false,
+        };
+
+        this.autocomplete = React.createRef();
+        this.focus = this.focus.bind(this);
+    }
+
+    focus() {
+        this.autocomplete.current?.focus();
+    }
+
+    render() {
+        let {disabled, options, size, ...rest} = this.props;
+        const searchHistoryPresent = this.props.options && this.props.options.length > 0;
+        return (
+            <AutoComplete
+                options={this.state.opened ? options : []}
+                style={{width: 200}}
+                defaultOpen={false}
+                defaultActiveFirstOption={false}
+                disabled={disabled}
+                onSelect={() => {
+                    this.setState({opened: false});
+                }}
+                {...rest}
+            >
+                <Input
+                    size={size}
+                    allowClear={!disabled}
+                    suffix={
+                        searchHistoryPresent &&
+                        <DropdownArrow opened={this.state.opened}
+                                       onClick={() => {
+                                           if (!this.props.disabled) {
+                                               this.setState({opened: !this.state.opened});
+                                           }
+                                       }}/>
+                    }
+                    disabled={disabled} />
+            </AutoComplete>
+        );
+    }
+}

package/components/input/textarea/extractSpansOfClasses.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+class Span {
+    beginIndex: number
+    endIndex: number
+    text: string
+    isMark: boolean
+    markClasses: Set<string>
+
+    constructor(text:string, beginIndex:number) {
+        this.beginIndex = beginIndex;
+        this.endIndex = beginIndex + text.length; // Like String.slice, it is inclusive.
+        this.text = text;
+        this.isMark = false;
+        this.markClasses = new Set();
+    }
+
+    setMark(className: string) {
+        this.isMark = true;
+        if (className) {
+            for (let c of className.split(' ')) {
+                this.markClasses.add(c);
+            }
+        }
+    }
+
+    carve(beginIndex2: number) {
+        // Carves self to take a bit off the right and returns that carving.
+        let rightText = this.text.slice(beginIndex2 - this.beginIndex);
+        this.text = this.text.slice(0, beginIndex2 - this.beginIndex);
+        this.endIndex = beginIndex2;
+
+        let right = new Span(rightText, beginIndex2);
+        right.isMark = this.isMark;
+        right.markClasses = new Set([...this.markClasses]);
+
+        return right;
+    }
+
+    get className() {
+        if (this.markClasses && this.markClasses.size > 0) {
+            return [...this.markClasses].sort().join(" ");
+        } else {
+            return "";
+        }
+    }
+
+    render() {
+        if (this.isMark) {
+            let className = this.className;
+            if (className) {
+                return(
+                    <mark key={this.beginIndex} className={className} title={this.text}>
+                        {this.text}
+                    </mark>
+                );
+            } else {
+                return(<mark key={this.beginIndex} title={this.text}>{this.text}</mark>);
+            }
+        } else {
+            return(<span key={this.beginIndex} title={this.text}>{this.text}</span>);
+        }
+    }
+}
+
+export default function extractSpansOfClasses(value:string, ranges:number[][]) {
+    /* Returns value broken into a series of Span classes.  These
+     * can be converted to JSX via the render command.
+     */
+    
+    let spans = [new Span(value, 0)];
+
+    for (let range of ranges) {
+        let beginIndex = range[0];
+        let endIndex = range[1];
+        let className = (range as any).className as string;
+
+        for (let i = 0; i < spans.length; i++) {
+            let span = spans[i];
+
+            // since spans are sorted, So this is always true: beginIndex >= span.beginIndex.
+            if (beginIndex < span.endIndex) {
+                if (beginIndex == span.beginIndex) {
+                    if (endIndex < span.endIndex) {
+                        // [range]
+                        // [s  p  a  n]
+                        let span2 = span.carve(endIndex);
+                        span.setMark(className);
+                        spans.splice(i + 1, 0, span2);
+                        beginIndex = endIndex;
+                        i += 1;
+                    } else {
+                        // [range]   or   [r a n g e]
+                        // [span-]        [span]
+                        span.setMark(className);
+                        beginIndex = span.endIndex;
+                    }
+                } else {
+                    if (endIndex < span.endIndex) {
+                        //   [range]
+                        // [s  p  a  n]
+                        let span2 = span.carve(beginIndex);
+                        let span3 = span2.carve(endIndex);
+                        span2.setMark(className);
+                        spans.splice(i + 1, 0, span2, span3);
+                        beginIndex = endIndex;
+                        i += 2;
+                    } else {
+                        //   [range]  or     [range]
+                        // [s p a n]       [span]
+                        let span2 = span.carve(beginIndex);
+                        span2.setMark(className);
+                        spans.splice(i + 1, 0, span2);
+                        beginIndex = span2.endIndex;
+                        i += 1;
+                    }
+                }
+            }
+            if (beginIndex == endIndex) {
+                break;
+            }
+        }
+    }
+    return spans;
+}