tp-react-web-masked-text/lib/base-text-component.js

Text and TextInput with mask for React Web applications

import React, { PureComponent } from 'react';
import MaskResolver from './mask-resolver';

export default class BaseTextComponent extends PureComponent {
    constructor(props) {
        super(props);
        this._resolveMaskHandler();
    }

    componentDidMount() {
        this._bindProps(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this._bindProps(nextProps);
    }

    updateValue(text) {
        let maskedText = this._getMaskedValue(text);
        let rawText = this.getRawValueFor(maskedText)

        return {
            maskedText,
            rawText
        }
    }

    isValid() {
        return this._maskHandler.validate(
            this._getDefaultValue(this.props.value),
            this._getOptions()
        );
    }

    getRawValueFor(value) {
        return this._maskHandler.getRawValue(
            this._getDefaultValue(value),
            this._getOptions()
        );
    }

    getRawValue() {
        return this.getRawValueFor(this.props.value)
    }

    get getMaskedValue() {
        return this._getMaskedValue(this.props.value)
    }

    _getOptions() {
        return this.props.options
    }

    _mustUpdateValue(newValue) {
        return this.props.value !== newValue;
    }

    _resolveMaskHandler() {
        this._maskHandler = MaskResolver.resolve(this.props.kind);
    }

    _bindProps(nextProps) {
        if (this.props.kind !== nextProps.kind) {
            this._resolveMaskHandler()
        }
    }

    _getDefaultMaskedValue(value) {
        if (this._getDefaultValue(value) === '') {
            return ''
        }

        return this._getMaskedValue(value)
    }

    _getMaskedValue(value) {
        return this._maskHandler.getValue(
            this._getDefaultValue(value),
            this._getOptions());
    }

    _getDefaultValue(value) {
        if (value === undefined || value === null) {
            return '';
        }

        return value;
    }
}