@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/src/maskedtextbox/MaskedTextBox.tsx

@@ -1,541 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-
-import { MaskingService } from './masking.service';
-import { MaskedTextBoxChangeEvent, MaskedTextBoxProps } from './MaskedTextBoxProps';
-
-import {
-    defaultRules,
-    maskingChanged,
-    returnFalse
-} from './utils';
-
-import {
-    guid,
-    classNames,
-    FormComponent,
-    FormComponentValidity,
-    getTabIndex,
-    withPropsContext,
-    createPropsContext,
-    kendoThemeMaps
-} from '@progress/kendo-react-common';
-
-import { FloatingLabel } from '@progress/kendo-react-labels';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-
-/**
- * @hidden
- */
-interface MaskedTextBoxState {
-    focused?: boolean;
-    value?: string;
-}
-
-/** @hidden */
-export class MaskedTextBoxWithoutContext extends React.Component<MaskedTextBoxProps, MaskedTextBoxState>
-    implements FormComponent {
-    static displayName = 'MaskedTextBox';
-    /**
-     * @hidden
-     */
-    static propTypes = {
-        value: PropTypes.string,
-        defaultValue: PropTypes.string,
-        placeholder: PropTypes.string,
-        title: PropTypes.string,
-        dir: PropTypes.string,
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string,
-        width: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        tabIndex: PropTypes.number,
-        accessKey: PropTypes.string,
-        disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
-        prompt: PropTypes.string,
-        promptPlaceholder: PropTypes.string,
-        includeLiterals: PropTypes.bool,
-        maskValidation: PropTypes.bool,
-        mask: PropTypes.string,
-        rules: function (props: MaskedTextBoxProps, propName: string, componentName: string) {
-            const rules = props.rules;
-            if (rules !== undefined) {
-                const valid = (Object as any).entries(rules)
-                    .some((e: any) => typeof e !== 'string' || !(rules[e] instanceof RegExp));
-                if (!valid) {
-                    return new Error(
-                        'Invalid prop `' + propName + '` supplied to' +
-                        ' `' + componentName + '`. Validation failed.'
-                    );
-                }
-            }
-
-            return null;
-        },
-        selection: PropTypes.shape({
-            start: PropTypes.number.isRequired,
-            end: PropTypes.number.isRequired
-        }),
-        name: PropTypes.string,
-        label: PropTypes.string,
-        validationMessage: PropTypes.string,
-        required: PropTypes.bool,
-        valid: PropTypes.bool,
-        validityStyles: PropTypes.bool,
-        onChange: PropTypes.func,
-        size: PropTypes.oneOf<MaskedTextBoxProps['size']>([null, 'small', 'medium', 'large']),
-        rounded: PropTypes.oneOf<MaskedTextBoxProps['rounded']>([null, 'small', 'medium', 'large', 'full']),
-        fillMode: PropTypes.oneOf<MaskedTextBoxProps['fillMode']>([null, 'solid', 'flat', 'outline'])
-    };
-
-    /**
-     * @hidden
-     */
-    static defaultProps = {
-        prompt: '_',
-        promptPlaceholder: ' ',
-        includeLiterals: false,
-        maskValidation: true,
-        rules: defaultRules,
-        required: false,
-        validityStyles: true,
-        size: 'medium' as MaskedTextBoxProps['size'],
-        rounded: 'medium' as MaskedTextBoxProps['rounded'],
-        fillMode: 'solid' as MaskedTextBoxProps['fillMode']
-    };
-
-    /**
-     * @hidden
-     */
-    state: MaskedTextBoxState = {};
-
-    private _inputId: string = `k-${guid()}`;
-    private _service = new MaskingService();
-    private _isPasted: boolean = false;
-    private _selection: [number | null, number | null] = [null, null];
-    private _input: HTMLInputElement | null = null;
-    private _valueDuringOnChange?: string;
-
-    constructor(props: MaskedTextBoxProps) {
-        super(props);
-        validatePackage(packageMetadata);
-    }
-
-    /**
-     * @hidden
-     */
-    public focus = (): void => {
-        if (this._input) {
-            this._input.focus();
-        }
-    };
-
-    /**
-     * Gets the element of the MaskedTextBox.
-     *
-     * @return - An `HTMLInputElement`.
-     *
-     * @example
-     * ```jsx
-     * class App extends React.Component {
-     *     constructor(props) {
-     *         super(props);
-     *     }
-     *     element = null;
-     *     render() {
-     *         return (
-     *             <div>
-     *                 <MaskedTextBox
-     *                     ref={(component) =>
-     *                         this.element = component ? component.element : null}
-     *                 />
-     *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-     *             </div>
-     *         );
-     *     }
-     * }
-     *
-     * ReactDOM.render(
-     *     <App />,
-     *     document.getElementsByTagName('my-app')[0]
-     * );
-     * ```
-     */
-    public get element(): HTMLInputElement | null {
-        return this._input;
-    }
-
-    /**
-     * Gets the value with the mask of the MaskedTextBox.
-     */
-    public get value(): string {
-        if (this._valueDuringOnChange !== undefined) {
-            return this._valueDuringOnChange;
-        } else if (this.props.value !== undefined) {
-            return this.props.value;
-        } else if (this.state.value !== undefined) {
-            return this.state.value;
-        } else if (this.props.defaultValue !== undefined) {
-            return this.props.defaultValue;
-        }
-        return '';
-    }
-
-    /**
-     * Gets the raw value without the mask of the MaskedTextBox.
-     */
-    public get rawValue(): string {
-        return this._service.rawValue(this.value);
-    }
-
-    /**
-     * Represents the validity state into which the MaskedTextBox is set.
-     */
-    public get validity(): FormComponentValidity {
-        const maskedValue = this.value;
-        const value = this._service.validationValue(maskedValue);
-        const customError = this.props.validationMessage !== undefined;
-        const valid = (this.props.valid !== undefined ?
-            this.props.valid : ((!this.required || !!value)) &&
-            (!this.props.maskValidation || !this.props.prompt || maskedValue.indexOf(this.props.prompt) === -1));
-
-        return {
-            customError,
-            valid,
-            valueMissing: !value
-        };
-    }
-
-    /**
-     * @hidden
-     */
-    protected get validityStyles(): boolean {
-        return this.props.validityStyles !== undefined
-            ? this.props.validityStyles
-            : MaskedTextBoxWithoutContext.defaultProps.validityStyles;
-    }
-
-    /**
-     * @hidden
-     */
-    protected get required(): boolean {
-        return this.props.required !== undefined
-            ? this.props.required
-            : MaskedTextBoxWithoutContext.defaultProps.required;
-    }
-
-    /**
-     * Gets the `name` property of the MaskedTextBox.
-     */
-    public get name(): string | undefined {
-        return this.props.name;
-    }
-
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: MaskedTextBoxProps, prevState: MaskedTextBoxState) {
-        if (this.element && this.state.focused && prevState.focused) {
-            let [start, end] = this._selection;
-            const prevSelection = prevProps.selection;
-            const nextSelection = this.props.selection;
-
-            if ((!prevSelection && nextSelection) ||
-                (prevSelection && nextSelection &&
-                    (prevSelection.start !== nextSelection.start || prevSelection.end !== nextSelection.end))) {
-                start = nextSelection.start;
-                end = nextSelection.end;
-            }
-            if (start !== null && end !== null) {
-                this.element.setSelectionRange(start, end);
-            }
-        }
-
-        if (maskingChanged(prevProps, this.props)) {
-            this.updateService();
-        }
-        this.setValidity();
-    }
-
-    /**
-     * @hidden
-     */
-    componentDidMount() {
-        this.updateService();
-        this.setValidity();
-    }
-
-    /**
-     * @hidden
-     */
-    render() {
-        const {
-            size = MaskedTextBoxWithoutContext.defaultProps.size,
-            fillMode = MaskedTextBoxWithoutContext.defaultProps.fillMode,
-            rounded = MaskedTextBoxWithoutContext.defaultProps.rounded
-        } = this.props;
-        const inputId = this.props.id || this._inputId;
-        const isValid = !this.validityStyles || this.validity.valid;
-        const style = this.props.style || {};
-
-        const component = (
-          <span
-            dir={this.props.dir}
-            className={
-                    classNames(
-                        'k-maskedtextbox k-input',
-                        {
-                            [`k-input-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
-                            [`k-input-${fillMode}`]: fillMode,
-                            [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,
-                            'k-invalid': !isValid,
-                            'k-required': this.required,
-                            'k-disabled': this.props.disabled
-                        },
-                        this.props.className
-                    )
-                }
-            style={!this.props.label
-                    ? { width: this.props.width, ...style }
-                    : style}
-            >
-            <input
-              type="text"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck={false}
-              className="k-input-inner"
-              value={this.value}
-              id={inputId}
-              aria-labelledby={this.props.ariaLabelledBy}
-              aria-describedby={this.props.ariaDescribedBy}
-              name={this.props.name}
-              tabIndex={getTabIndex(this.props.tabIndex, this.props.disabled, true)}
-              accessKey={this.props.accessKey}
-              title={this.props.title}
-              disabled={this.props.disabled || undefined}
-              readOnly={this.props.readonly || undefined}
-              placeholder={this.props.placeholder}
-
-              ref={input => this._input = input}
-
-              onChange={this.onChangeHandler}
-              onPaste={this.pasteHandler}
-              onFocus={this.focusHandler}
-              onBlur={this.blurHandler}
-              onDragStart={returnFalse}
-              onDrop={returnFalse}
-                />
-          </span>
-        );
-
-        return this.props.label
-            ? (
-              <FloatingLabel
-                label={this.props.label}
-                editorId={inputId}
-                editorValue={this.value}
-                editorValid={isValid}
-                editorDisabled={this.props.disabled}
-                editorPlaceholder={this.props.placeholder}
-                children={component}
-                style={{ width: this.props.width }}
-                dir={this.props.dir}
-                />
-            )
-            : component;
-    }
-
-    private pasteHandler = (event: React.ClipboardEvent<HTMLInputElement>) => {
-        const { selectionStart, selectionEnd } = event.target as HTMLInputElement;
-
-        if (selectionEnd === selectionStart) {
-            return;
-        }
-
-        this._isPasted = true;
-        this._selection = [selectionStart || 0, selectionEnd || 0];
-    };
-
-    private onChangeHandler = (event: React.FormEvent<HTMLInputElement>) => {
-        const input: HTMLInputElement = event.currentTarget;
-        const value = input.value;
-        const start = this._selection[0] || 0;
-        const end = this._selection[1] || 0;
-
-        if (!this.props.mask) {
-            this._isPasted = false;
-            this._selection = [null, null];
-            this.triggerOnChange(value, event);
-            return;
-        }
-
-        const maskedValue = this.value;
-        let result: any;
-
-        if (this._isPasted) {
-            this._isPasted = false;
-            const rightPart = maskedValue.length - end;
-            const to = value.length - rightPart;
-            result = this._service.maskInRange(value.slice(start, to), maskedValue, start, end);
-        } else {
-            result = this._service.maskInput(value, maskedValue, input.selectionStart || 0);
-        }
-
-        this._selection = [result.selection, result.selection];
-
-        this.triggerOnChange(result.value, event);
-    };
-
-    private focusHandler = (event: React.FocusEvent<HTMLInputElement>) => {
-        if (!this.state.focused) {
-            this.setState({ focused: true });
-            if (this.props.onFocus) {
-                this.props.onFocus.call(undefined, {
-                    target: this,
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent
-                });
-            }
-        }
-    };
-
-    private blurHandler = (event: React.FocusEvent<HTMLInputElement>) => {
-        if (this.state.focused) {
-            this.setState({ focused: false });
-            if (this.props.onBlur) {
-                this.props.onBlur.call(undefined, {
-                    target: this,
-                    syntheticEvent: event,
-                    nativeEvent: event.nativeEvent
-                });
-            }
-        }
-    };
-
-    private triggerOnChange(maskedValue: string, event: React.SyntheticEvent): void {
-        this.setState({
-            value: maskedValue
-        });
-
-        if (this.props.onChange) {
-            this._valueDuringOnChange = maskedValue;
-            const ev: MaskedTextBoxChangeEvent = {
-                syntheticEvent: event as React.SyntheticEvent<HTMLElement>,
-                nativeEvent: event.nativeEvent,
-                selectionStart: this._selection[0] as number,
-                selectionEnd: this._selection[1] as number,
-                target: this,
-                value: this.value
-            };
-            this.props.onChange.call(undefined, ev);
-            this._valueDuringOnChange = undefined;
-        }
-    }
-
-    private updateService(extra?: any): void {
-        const config = Object.assign({
-            includeLiterals: this.props.includeLiterals,
-            mask: this.props.mask,
-            prompt: this.props.prompt,
-            promptPlaceholder: this.props.promptPlaceholder,
-            rules: this.rules
-        }, extra); // tslint:disable-line:align
-
-        this._service.update(config);
-    }
-
-    private get rules() {
-        return Object.assign({}, defaultRules, this.props.rules);
-    }
-
-    private setValidity = (): void => {
-        if (this.element) {
-            this.element.setCustomValidity(
-                this.validity.valid
-                    ? ''
-                    : this.props.validationMessage || ''
-            );
-        }
-    };
-}
-
-/**
- * Represents the PropsContext of the `MaskedTextBox` component.
- * Used for global configuration of all `MaskedTextBox` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const MaskedTextBoxPropsContext = createPropsContext<MaskedTextBoxProps>();
-
-/**
- * Represent the `ref` of the MaskedTextBox component.
- */
-export interface MaskedTextBoxHandle extends Pick<MaskedTextBoxWithoutContext, keyof MaskedTextBoxWithoutContext> {
-    /**
-     * Gets the element of the MaskedTextBox.
-     *
-     * ```jsx
-     * class App extends React.Component {
-     * constructor(props) {
-     *  super(props);
-     * }
-     * element = null;
-     * render() {
-     *  return (
-     *      <div>
-     *          <MaskedTextBox
-     *              ref={(component) =>
-     *                  this.element = component ? component.element : null}
-     *          />
-     *          <button onClick={() => console.log(this.element)}>console.log the element</button>
-     *      </div>
-     *  );
-     * }
-     * }
-     *
-     * ReactDOM.render(
-     * <App />,
-     * document.getElementsByTagName('my-app')[0]
-     * );
-     * ```
-     */
-    element: HTMLInputElement | null;
-    /**
-     * Gets the `name` property of the MaskedTextBox.
-     */
-    name: string | undefined;
-    /**
-     * Gets the raw value without the mask of the MaskedTextBox.
-     */
-    rawValue: string;
-    /**
-     * Represents the validity state into which the MaskedTextBox is set.
-     */
-    validity: FormComponentValidity;
-    /**
-     * Gets the value with the mask of the MaskedTextBox.
-     */
-    value: string;
-}
-
-/** @hidden */
-export type MaskedTextBox = MaskedTextBoxHandle;
-
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).
- *
- * Accepts properties of type [MaskedTextBoxProps]({% slug api_inputs_maskedtextboxprops %}).
- * Obtaining the `ref` returns an object of type [MaskedTextBoxHandle]({% slug api_inputs_maskedtextboxhandle %}).
- */
-export const MaskedTextBox = withPropsContext(MaskedTextBoxPropsContext, MaskedTextBoxWithoutContext as React.ComponentType<MaskedTextBoxProps>);
-MaskedTextBox.displayName = 'KendoReactMaskedTextBox';