Feature/pattern input

src/FormGroup/FormGroup.tsx

@@ -51,12 +51,12 @@ export class FormGroup extends React.Component<FormGroupProps, FormGroupState> {
         this.context.onUnmount(this.props.name);
     }
 
-    public handleChange = (value: any) => this.context.onChange(this.props.name, value);
+    public handleChange = async (value: any) => this.context.onChange(this.props.name, value);
 
     public handleBlur = () => this.setState({isFocused: false});
     public handleFocus = () => this.setState({isFocused: true});
 
-    public handleMount = (ref: HTMLElement) => this.context.onMount(this.props.name, ref);
+    public handleMount = async (ref: HTMLElement) => this.context.onMount(this.props.name, ref);
 
     public get value(): ModelValue | undefined {
         return this.context.values.find(

src/Input/BaseInput.tsx

@@ -13,6 +13,7 @@ export class BaseInput<T extends HTMLElement> extends React.Component<React.HTML
             ref: this.context.onMount,
 
             name: this.context.name,
+            value: this.context.value,
 
             onChange: this.handleChange,
             onBlur: this.handleBlur,

src/Input/Input.tsx

@@ -1,6 +1,4 @@
 import * as React from "react";
-import {FormGroupContext, FormGroupContextTypes} from "../FormGroup/FormGroupContext";
-import {InputContext, InputContextTypes} from "./InputContext";
 import {BaseInput} from "./BaseInput";
 
 export class Input extends BaseInput<HTMLInputElement> {

src/Input/InputContext.ts

@@ -6,10 +6,10 @@ export interface InputContext {
     name: string;
     value: any;
 
-    onChange: (value: any) => void;
+    onChange: (value: any) => Promise<void>;
     onFocus: () => void;
     onBlur: () => void;
-    onMount: (ref: HTMLElement) => void;
+    onMount: (ref: HTMLElement) => Promise<void>;
 }
 
 export const InputContextTypes = {

src/MultiplePatternInput/MultiplePatternInputContext.ts

@@ -0,0 +1,15 @@
+import * as PropTypes from "prop-types";
+
+export interface MultiplePatternInputContext {
+    onChange: (event: string) => void
+    onFocus: () => void
+    onBlur: () => void
+    onMount: (ref: HTMLInputElement) => void
+}
+
+export const MultiplePatternInputContextTypes = {
+    onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
+    onBlur: PropTypes.func.isRequired,
+    onMount: PropTypes.func.isRequired,
+};

src/MultiplePatternInput/MultiplePatternInputProps.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import {Pattern} from "./Pattern";
+
+export interface MultiplePatternInputProps extends React.HTMLProps<HTMLElement> {
+    patterns: Array<string|Pattern>;
+}
+
+export const MultiplePatternInputPropTypes = {
+    patterns: PropTypes.oneOfType([
+        PropTypes.instanceOf(RegExp),
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.instanceOf(Pattern),
+                PropTypes.string,
+            ])
+        ),
+    ]),
+};

src/MultiplePatternInput/MultlplePatternInput.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import {Input} from "../Input/Input";
+import {MultiplePatternInputProps, MultiplePatternInputPropTypes} from "./MultiplePatternInputProps";
+import {InputContext, InputContextTypes} from "../Input/InputContext";
+import {MultiplePatternInputContext, MultiplePatternInputContextTypes} from "./MultiplePatternInputContext";
+import {Pattern} from "./Pattern";
+
+export class MultiplePatternInput extends React.Component<MultiplePatternInputProps> {
+    public static propTypes = MultiplePatternInputPropTypes;
+    public static childContextTypes = MultiplePatternInputContextTypes;
+    public static contextTypes = InputContextTypes;
+    public context: InputContext;
+
+    protected input: HTMLInputElement;
+
+    public escapeRegExp(text) {
+        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    }
+
+    public get patternsLength() {
+        return this.props.patterns
+            .reduce((carry, current) => {
+                return carry + current.length;
+            }, 0);
+    }
+
+    public get patternsGroup() {
+        return new RegExp(
+            "["
+            + this.props.patterns
+                .filter((pattern) => pattern instanceof Pattern)
+                .reduce((carry: string, current: Pattern) => {
+                    return carry + current.regex.source;
+                }, "")
+            + "]"
+        );
+    }
+
+    public getChildContext(): MultiplePatternInputContext {
+        return {
+            onChange: this.handleChange,
+            onFocus: this.handleFocus,
+            onBlur: this.handleBlur,
+            onMount: this.handleMount,
+        };
+    }
+
+    public render(): JSX.Element {
+        return <Input/>;
+    }
+
+    protected handleMount = async (ref: HTMLElement) => {
+        this.input = ref as HTMLInputElement;
+        await this.context.onMount(ref);
+    };
+
+    protected handleChange = async (sourceValue: string) => {
+        if (sourceValue === "") {
+            return;
+        }
+
+        const value = this.clearValue(sourceValue);
+        let targetValue = "";
+
+        for (const char of value || [""]) {
+            const result = this.process(targetValue + char, sourceValue);
+            if (result === false) {
+                continue;
+            }
+            targetValue = result;
+        }
+
+        const cursorPosition = this.getCursorPosition(targetValue);
+
+        await this.context.onChange(targetValue.substr(0, this.patternsLength));
+
+        if (this.input) {
+            this.input.setSelectionRange(cursorPosition, cursorPosition);
+        }
+    };
+
+    protected process = (value: string, sourceValue: string) => {
+        let targetPattern = /^/;
+        let endOfStringReached = false;
+
+        const patterns: Array<string | Pattern> = this.props.patterns;
+
+        for (const pattern of patterns) {
+            if (!(pattern instanceof Pattern)) {
+                if (value === "") {
+                    return pattern;
+                }
+
+                const prevPattern = targetPattern;
+                /* Update target pattern using passed string. */
+                targetPattern = new RegExp(targetPattern.source + this.escapeRegExp(pattern));
+
+                /* If value can be concatenated, then there is no more characters in target value. */
+                /* Add passed string and call onChange. */
+                if (endOfStringReached) {
+                    if (
+                        sourceValue.length < this.context.value.length
+                        && this.context.value.endsWith(pattern)
+                    ) {
+                        return sourceValue.substr(0, this.context.value.length - pattern.length - 1);
+                    }
+                    return value + pattern;
+                }
+                /* If passed string was ignored, add it to the target value. */
+                if (!value.match(targetPattern) && !(`${value}${pattern}`).match(targetPattern)) {
+                    /* Get string that satisfies the prev pattern. */
+                    const match = value.match(prevPattern);
+                    const {length} = match[0];
+                    /* Insert passed string on position that equals to length of matched string. */
+                    value = value.slice(0, length) + pattern + value.slice(length);
+                }
+
+                continue;
+            }
+
+            for (let i = 1; i <= pattern.length; i++) {
+                if (endOfStringReached) {
+                    return value;
+                }
+
+                targetPattern = new RegExp(targetPattern.source + pattern.regex.source);
+                if (!value.match(targetPattern)) {
+                    return false;
+                }
+
+                if (value.match(new RegExp(targetPattern.source + "$"))) {
+                    endOfStringReached = true;
+                }
+            }
+        }
+
+        return value;
+    };
+
+    protected getCursorPosition = (value: string): number => {
+        const currentLength = this.context.value.length;
+
+        let start: any = false;
+
+        for (let i = 0; i < currentLength; i++) {
+            if (value[i] !== this.context.value[i]) {
+                start = i;
+                break;
+            }
+        }
+        const maxLength = Math.max(currentLength, value.length);
+        if (start === false) {
+            return maxLength;
+        }
+
+        let count = 1;
+        if (value.length < currentLength) {
+            return start;
+        }
+
+        while (
+            (value[start + count] !== this.context.value[start])
+            && (start + count < maxLength)
+        ) {
+            count++;
+        }
+        return start + count;
+    };
+
+    protected clearValue = (value: string) => {
+        for (const pattern of this.props.patterns) {
+            if (pattern instanceof Pattern) {
+                continue;
+            }
+
+            for (const char of pattern) {
+                const patternIndex = value.indexOf(char);
+                if (patternIndex === -1) {
+                    break;
+                }
+                value = value.substr(0, patternIndex) + value.substr(patternIndex + 1);
+            }
+        }
+        return value;
+    };
+
+    protected handleFocus = async () => {
+        if (
+            this.props.patterns[0] instanceof Pattern
+            || !!this.context.value
+        ) {
+            return;
+        }
+
+        await this.context.onChange(this.props.patterns[0].toString());
+    };
+
+    protected handleBlur = async () => {
+        if (
+            this.props.patterns[0] instanceof Pattern
+            || this.context.value !== this.props.patterns[0]
+        ) {
+            return;
+        }
+
+        await this.context.onChange("");
+    };
+}

src/MultiplePatternInput/Pattern.ts

@@ -0,0 +1,14 @@
+export interface PatternInterface {
+    regex: RegExp;
+    length: number;
+}
+
+export class Pattern implements PatternInterface {
+    public regex: RegExp;
+    public length: number;
+
+    constructor(regex, length) {
+        this.regex = regex;
+        this.length = length;
+    }
+}

src/MultiplePatternInput/index.ts

@@ -0,0 +1,4 @@
+export * from "./MultlplePatternInput";
+export * from "./MultiplePatternInputContext";
+export * from "./MultiplePatternInputProps";
+export * from "./Pattern";

src/PatternInput/PatternInput.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+import {Input} from "../Input/Input";
+import {PatternInputProps, PatternInputPropTypes} from "./PatternInputProps";
+import {PatternInputContext, PatternInputContextTypes} from "./PatternInputContext";
+import {InputContext, InputContextTypes} from "../Input/InputContext";
+
+export class PatternInput extends React.Component<PatternInputProps> {
+    public static propTypes = PatternInputPropTypes;
+
+    public static childContextTypes = PatternInputContextTypes;
+    public static contextTypes = InputContextTypes;
+    public context: InputContext;
+
+    public getChildContext(): PatternInputContext {
+        return {
+            onChange: this.handleChange,
+        };
+    }
+
+    protected get regex(): RegExp {
+        let {regex} = this.props;
+
+        if (regex.source[0] !== "^") {
+            regex = new RegExp("^" + regex.source);
+        }
+        if (regex.source[regex.source.length] !== "$") {
+            regex = new RegExp(regex.source + "$");
+        }
+
+        return regex;
+    }
+
+    public render(): JSX.Element {
+        const {regex, ...childProps} = this.props;
+        return <Input {...childProps as any}/>;
+    }
+
+    protected handleChange = (value: string) => {
+        if (value && !value.match(this.regex)) {
+            return;
+        }
+
+        this.context.onChange(value);
+    };
+}

src/PatternInput/PatternInputContext.ts

@@ -0,0 +1,9 @@
+import * as PropTypes from "prop-types";
+
+export interface PatternInputContext {
+    onChange: (event: string) => void
+}
+
+export const PatternInputContextTypes = {
+    onChange: PropTypes.func.isRequired,
+};

src/PatternInput/PatternInputProps.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+export interface PatternInputProps extends React.HTMLProps<HTMLElement> {
+    regex: RegExp;
+}
+
+export const PatternInputPropTypes = {
+    regex: PropTypes.instanceOf(RegExp),
+};

src/PatternInput/index.ts

@@ -0,0 +1,2 @@
+export * from "./PatternInput";
+export * from "./PatternInputProps";

tests/bootstrap.ts

@@ -1,4 +1,4 @@
-import * as chai from 'chai';
-import * as chaiEnzyme from 'chai-enzyme';
+import * as chai from "chai";
+import * as chaiEnzyme from "chai-enzyme";
 
-chai.use(chaiEnzyme());
+chai.use(chaiEnzyme());