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

package/src/maskedtextbox/MaskedTextBoxProps.ts

@@ -0,0 +1,215 @@
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { MaskedTextBox } from './MaskedTextBox';
+
+/**
+ * The arguments for a MaskedTextBox event.
+ */
+export interface MaskedTextBoxEvent {
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: Event;
+
+    /**
+     * A React [`SyntheticEvent`](https://reactjs.org/docs/events.html).
+     */
+    syntheticEvent: React.SyntheticEvent<HTMLElement>;
+
+    /**
+     * An event target.
+     */
+    target: MaskedTextBox;
+}
+
+/**
+ * The arguments for the `change` event of the MaskedTextBox.
+ */
+export interface MaskedTextBoxChangeEvent extends MaskedTextBoxEvent {
+    /**
+     * Specifies the start of the selection which will be set to the MaskedTextBox when it is updated.
+     */
+    selectionStart: number;
+
+    /**
+     * Specifies the end of the selection which will be set to the MaskedTextBox when it is updated.
+     */
+    selectionEnd: number;
+
+    /**
+     * The current value of the component.
+     */
+    value: any;
+}
+
+/* eslint-disable max-len */
+/**
+ * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).
+ */
+export interface MaskedTextBoxProps extends FormComponentProps {
+    /**
+     * Sets a class of the MaskedTextBox DOM element.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the MaskedTextBox DOM element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies the value of the MaskedTextBox.
+     */
+    value?: string;
+
+    /**
+     * Specifies the initial value. Leaves the subsequent updates uncontrolled.
+     */
+    defaultValue?: string;
+
+    /**
+     * Specifies the input placeholder.
+     */
+    placeholder?: string;
+
+    /**
+     * Sets the title of the `input` element of the MaskedTextBox.
+     */
+    title?: string;
+
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+
+    /**
+     * Sets the `tabIndex` property of the MaskedTextBox.
+     */
+    tabIndex?: number;
+
+    /**
+     * Specifies the `accessKey` of the MaskedTextBox.
+     */
+    accessKey?: string;
+
+    /**
+     * Specifies the width of the MaskedTextBox.
+     */
+    width?: number | string;
+
+    /**
+     * Determines whether the MaskedTextBox is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * Renders a floating label for the MaskedTextBox.
+     */
+    label?: string;
+
+    /**
+     * Sets the `id` of the `input` DOM element.
+     */
+    id?: string;
+
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+
+    /**
+     * Determines whether the MaskedTextBox is in its read-only state.
+     */
+    readonly?: boolean;
+
+    /**
+     * Represents a prompt character for the masked value. Defaults to `_`.
+     */
+    prompt?: string;
+
+    /**
+     * Indicates a character which represents an empty position in the raw value. Defaults to ` `.
+     */
+    promptPlaceholder?: string;
+
+    /**
+     * Indicates whether to include literals in the raw value. Defaults to `false`.
+     */
+    includeLiterals?: boolean;
+
+    /**
+     * Determines whether the built-in mask validator is enforced when a form is validated. Defaults to `true`.
+     */
+    maskValidation?: boolean;
+
+    /**
+     * Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input.
+     */
+    mask?: string;
+
+    /**
+     * Represents the RegExp-based mask validation array.
+     */
+    rules?: { [key: string]: RegExp };
+
+    /**
+     * Represents the beginning and ending of the selected portion of the input content that will be applied the next time when the MaskedTextBox is rendered.
+     */
+    selection?: { start: number; end: number };
+
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: MaskedTextBoxChangeEvent) => void;
+
+    /**
+     * Fires each time the user focuses the MaskedTextBox.
+     */
+    onFocus?: (event: MaskedTextBoxEvent) => void;
+
+    /**
+     * Fires each time the MaskedTextBox gets blurred.
+     */
+    onBlur?: (event: MaskedTextBoxEvent) => void;
+    /**
+     * Configures the `size` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MaskedTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+
+}
+// tslint:enable:max-line-length

package/src/maskedtextbox/masking.service.ts

@@ -0,0 +1,230 @@
+import { greedy, sequence } from './parsing/combinators';
+import {
+    literal,
+    mask as maskParser,
+    rawLiteral,
+    rawMask,
+    token,
+    unliteral,
+    unmask
+} from './parsing/parsers';
+
+/**
+ * @hidden
+ */
+export class MaskingService {
+    public rules: { [key: string]: RegExp } = {};
+    public prompt: string = '_';
+    public mask: string = '';
+    public promptPlaceholder: string = ' ';
+    public includeLiterals: boolean = false;
+    public maskTokens: any[] = [];
+    public unmaskTokens: any[] = [];
+    public rawTokens: any[] = [];
+    public validationTokens: any[] = [];
+
+    public update({ mask = '', prompt = '', promptPlaceholder = ' ', rules = {}, includeLiterals = false }: any): void {
+        this.mask = mask;
+        this.prompt = prompt;
+        this.promptPlaceholder = promptPlaceholder;
+        this.rules = rules;
+        this.includeLiterals = includeLiterals;
+
+        this.tokenize();
+    }
+
+    public validationValue(maskedValue: string = ''): string {
+        let value = maskedValue;
+
+        sequence(this.validationTokens)
+            .run(maskedValue)
+            .fold((unmasked: any) => {
+                value = unmasked.join('');
+            });
+
+        return value;
+    }
+
+    public rawValue(maskedValue: string = ''): string {
+        let value = maskedValue;
+
+        if (!this.rawTokens.length) {
+            return value;
+        }
+
+        sequence(this.rawTokens)
+            .run(maskedValue)
+            .fold((unmasked: any) => {
+                value = unmasked.join('');
+            });
+
+        return value;
+    }
+
+    /**
+     * @hidden
+     */
+    public maskRaw(rawValue: string = ''): string {
+        let value = rawValue;
+
+        if (!this.maskTokens.length) {
+            return value;
+        }
+
+        sequence(this.maskTokens)
+            .run(rawValue)
+            .fold((masked: any) => {
+                value = masked.join('');
+            });
+
+        return value;
+    }
+
+    public maskInput(input: string, control: string, splitPoint: number): any {
+        if (input.length < control.length) {
+            return this.maskRemoved(input, control, splitPoint);
+        }
+
+        return this.maskInserted(input, control, splitPoint);
+
+    }
+
+    public maskInRange(pasted: string, oldValue: string, start: number, end: number): any {
+        let value = '';
+        let selection = end;
+
+        const beforeChange = oldValue.split('').slice(0, start);
+        const afterChange = oldValue.split('').slice(end);
+
+        sequence(this.maskTokens.slice(start, end))
+            .run(pasted)
+            .fold((masked: any) => {
+                value = beforeChange
+                    .concat(masked)
+                    .concat(afterChange)
+                    .join('');
+            });
+
+        return {
+            selection,
+            value
+        };
+    }
+
+    private maskRemoved(input: string, control: string, splitPoint: number): any {
+        let value = '';
+        let selection = splitPoint;
+
+        const unchanged = input.split('').slice(splitPoint);
+        const changed = input.split('').slice(0, splitPoint).join('');
+        const take = this.maskTokens.length - (input.length - splitPoint);
+
+        sequence(this.maskTokens.slice(0, take))
+            .run(changed, control)
+            .fold((masked: any) => {
+                selection = this.adjustPosition(masked, selection);
+                value = masked.concat(unchanged).join('');
+            });
+
+        return {
+            selection,
+            value
+        };
+    }
+
+    private adjustPosition(input: string[], selection: number): number {
+        const caretChar = input[selection];
+        const isLiteral = this.maskTokens[selection].isLiteral(caretChar);
+
+        if (!isLiteral && caretChar !== this.prompt) {
+            return selection + 1;
+        }
+        return selection;
+    }
+
+    private maskInserted(input: string, control: string, splitPoint: number): any {
+        let value = '';
+        let selection = splitPoint;
+
+        const changed = input.slice(0, splitPoint);
+
+        sequence(this.unmaskTokens)
+            .run(changed, control)
+            .chain((unmasked: any) => {
+                selection = unmasked.join('').length;
+
+                const unchanged = control.slice(selection);
+
+                return sequence(this.maskTokens)
+                    .run(unmasked.join('') + unchanged, control);
+            })
+            .fold((masked: any) => {
+                value = masked.join('');
+            });
+
+        return {
+            selection,
+            value
+        };
+    }
+
+    protected get maskTokenCreator(): { [key: string]: Function } {
+        const { prompt, promptPlaceholder } = this;
+
+        return {
+            literal: (rule: any) => literal(rule),
+            mask: (rule: any) => maskParser({prompt, promptPlaceholder})(rule)
+        };
+    }
+
+    protected get unmaskTokenCreator(): { [key: string]: Function } {
+        return {
+            literal: (rule: any) => unliteral(rule),
+            mask: (rule: any) => unmask(this.prompt)(rule)
+        };
+    }
+
+    protected get rawTokenCreator(): { [key: string]: Function } {
+        const { prompt, promptPlaceholder, includeLiterals } = this;
+
+        return {
+            literal: (_: any) => rawLiteral(includeLiterals),
+            mask: (_: any) => rawMask({prompt, promptPlaceholder})
+        };
+    }
+
+    protected get validationTokenCreator(): { [key: string]: Function } {
+        const { prompt } = this;
+
+        return {
+            literal: (_: any) => rawLiteral(false),
+            mask: (_: any) => rawMask({prompt,  promptPlaceholder: ''})
+        };
+    }
+
+    private tokenize(): void {
+        greedy(token(this.rules, this.maskTokenCreator))
+            .run(this.mask)
+            .fold((tokens: any, _: any) => {
+                this.maskTokens = tokens;
+            });
+
+        greedy(token(this.rules, this.unmaskTokenCreator))
+            .run(this.mask)
+            .fold((tokens: any, _: any) => {
+                this.unmaskTokens = tokens;
+            });
+
+        greedy(token(this.rules, this.rawTokenCreator))
+            .run(this.mask)
+            .fold((tokens: any, _: any) => {
+                this.rawTokens = tokens;
+            });
+
+        greedy(token(this.rules, this.validationTokenCreator))
+            .run(this.mask)
+            .fold((tokens: any, _: any) => {
+                this.validationTokens = tokens;
+            });
+    }
+}

package/src/maskedtextbox/parsing/combinators.ts

@@ -0,0 +1,30 @@
+import { Parser } from './parsers';
+import { Result } from './result';
+
+/**
+ * @hidden
+ */
+const always = (value: any) => new Parser((stream: any) => new Result(value, stream));
+
+/**
+ * @hidden
+ */
+const append = (p1: any, p2: any) => p1.chain((vs: any) => p2.map((v: any) => vs.concat([v])));
+
+/**
+ * @hidden
+ */
+export const sequence = (list: any) => list.reduce((acc: any, parser: any) => append(acc, parser), always([]));
+
+/**
+ * @hidden
+ */
+export const greedy = (parser: any) => new Parser((stream: any) => {
+    let result = new Result([], stream);
+
+    while (!stream.eof()) {
+        result = result.concat(parser.run(stream));
+    }
+
+    return result;
+});

package/src/maskedtextbox/parsing/parsers.ts

@@ -0,0 +1,179 @@
+import { Result, ResultType } from './result';
+import { Stream } from './stream';
+
+const toArray = (value: string) => (value || '').split('');
+
+const ESCAPE_CHARACTER = '\\';
+
+/**
+ * @hidden
+ */
+export class Parser {
+    constructor(private parse: Function) { }
+
+    public run(input: Stream | string, control: string = ''): Result {
+        if (input instanceof Stream) {
+            return this.parse(input);
+        } else {
+            return this.parse(new Stream(toArray(input), toArray(control)));
+        }
+    }
+
+    // map :: Functor f => f a ~> (a -> b) -> f b
+    public map(f: Function): Parser {
+        return new Parser((stream: any) => this.parse(stream).map(f));
+    }
+
+    // chain :: Chain m => m a ~> (a -> m b) -> m b
+    public chain(f: Function): Parser {
+        return new Parser((stream: any) => this.parse(stream).chain((v: any, s: any) => f(v).run(s)));
+    }
+
+    public isLiteral(c: string): boolean {
+        return this.run(c).type === ResultType.Literal;
+    }
+}
+
+/**
+ * @hidden
+ */
+export const mask = (args: {prompt: any; promptPlaceholder: any}) => (rule: any) => new Parser((stream: any) => {
+    const {prompt, promptPlaceholder} = args;
+    while (!stream.eof()) {
+        const {char, control} = stream.peek();
+
+        if (char === control && control === prompt) {
+            stream.eat();
+            return new Result(prompt, stream, ResultType.Mask);
+        }
+
+        if (rule.test(char)) {
+            stream.eat();
+            return new Result(char, stream, ResultType.Mask);
+        }
+
+        if (char === promptPlaceholder) {
+            stream.eat();
+            return new Result(prompt, stream, ResultType.Mask);
+        }
+
+        stream.eat_input();
+    }
+
+    stream.eat();
+    return new Result(prompt, stream, ResultType.Mask);
+});
+
+/**
+ * @hidden
+ */
+export const literal = (_token: any) => new Parser((stream: any) => {
+//    let {char, control} = stream.peek();
+    let char = stream.peek().char;
+
+    if (char === _token) {
+        stream.eat();
+        return new Result(_token, stream, ResultType.Literal);
+    }
+
+    //    if (control === _token) {
+    //        while (!stream.eof() && char !== _token) {
+    //            stream.eat_input();
+    //            char = stream.peek().char;
+    //        }
+    //    }
+    //
+    //    if (control !== undefined) {
+    //        stream.eat();
+    //    }
+
+    return new Result(_token, stream, ResultType.Literal);
+});
+
+/**
+ * @hidden
+ */
+export const unmask = (prompt: any) => (rule: any) => new Parser((stream: any) => {
+    while (!stream.eof()) {
+        const { char, control } = stream.peek();
+
+        if (char === prompt && control === prompt) {
+            stream.eat();
+            return new Result(char, stream);
+        }
+
+        if (rule.test(char)) {
+            stream.eat();
+            return new Result(char, stream);
+        }
+
+        stream.eat_input();
+    }
+
+    stream.eat();
+    return new Result('', stream);
+});
+
+/**
+ * @hidden
+ */
+export const unliteral = (_token: any) => new Parser((stream: any) => {
+    if (stream.eof()) {
+        return new Result('', stream);
+    }
+
+    const { char } = stream.peek();
+
+    if (char === _token) {
+        stream.eat();
+    }
+
+    return new Result(_token, stream);
+});
+
+/**
+ * @hidden
+ */
+export const token = (rules: any, creator: any) => new Parser((stream: any) => {
+    let { char } = stream.next();
+    const rule = rules[char];
+
+    if (char === ESCAPE_CHARACTER) {
+        char = stream.next().char;
+
+        return new Result(creator.literal(char), stream);
+    }
+
+    if (!rule) {
+        return new Result(creator.literal(char), stream);
+    }
+
+    return new Result(creator.mask(rule), stream);
+});
+
+/**
+ * @hidden
+ */
+export const rawMask = (args: {prompt: any; promptPlaceholder: any}) => new Parser((stream: any) => {
+    const {prompt, promptPlaceholder} = args;
+    let { char } = stream.next();
+
+    if (char === prompt) {
+        return new Result(promptPlaceholder, stream);
+    }
+
+    return new Result(char, stream);
+});
+
+/**
+ * @hidden
+ */
+export const rawLiteral = (includeLiterals: any) => new Parser((stream: any) => {
+    let { char } = stream.next();
+
+    if (includeLiterals) {
+        return new Result(char, stream);
+    }
+
+    return new Result('', stream);
+});

package/src/maskedtextbox/parsing/result.ts

@@ -0,0 +1,39 @@
+import { Stream } from './stream';
+
+/**
+ * @hidden
+ */
+export enum ResultType {
+    Literal,
+    Mask,
+    Undefined
+}
+
+/**
+ * @hidden
+ */
+export class Result {
+    constructor(private value: any, private rest: Stream, public type: ResultType = ResultType.Undefined) {}
+
+    // map :: Functor f => f a ~> (a -> b) -> f b
+    public map(fn: Function): Result {
+        return new Result(fn(this.value), this.rest);
+    }
+
+    // chain :: Chain m => m a ~> (a -> m b) -> m b
+    public chain(fn: Function): Result {
+        return fn(this.value, this.rest);
+    }
+
+    public fold(s: Function, _?: Function/* we don't need it*/): Result {
+        return s(this.value, this.rest);
+    }
+
+    public concat(r: Result): Result {
+        return this.map((vs: any, _: any) => r.chain((v: any, __: any) => vs.concat([v])));
+    }
+
+    public toString(): string {
+        return `Result({ value: '${this.value}', rest: ${this.rest} })`;
+    }
+}