d2coreui 23.0.15 → 23.0.17

package/components/input/maskedInput.tsx

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

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

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

@@ -1,125 +0,0 @@
-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;
-}

package/components/input/textarea/getRanges.ts

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

package/components/input/textarea/getType.ts

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

package/components/input/textarea/highlighedContents.tsx

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