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

package/src/maskedtextbox/MaskedTextBox.tsx

@@ -0,0 +1,541 @@
+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';