chayns-components/lib/react-chayns-formatted_input/component/FormattedInput.js

A set of beautiful React components for developing chayns® applications.

import _extends from "@babel/runtime/helpers/extends";
/**
 * @component
 */

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Input from '../../react-chayns-input/component/Input';
import Formatter from '../utils/Formatter';

/**
 * A text input that automatically formats its input with a formatter. Since
 * this component is based on the `Input`-component, it takes any of the
 * `Input`-components props, which are not listed here.
 *
 * This component only works as an uncontrolled component, meaning that it does
 * not take a `value`-prop.
 */
export default class FormattedInput extends Component {
  constructor(props) {
    var _this;
    super(props);
    _this = this;
    this.lastSend = null;
    this.handleInputChange = function (value) {
      const {
        formatter
      } = _this;
      const {
        value: oldValue
      } = _this.state;
      if (!(formatter instanceof Formatter)) {
        return;
      }
      const {
        selectionStart,
        selectionEnd
      } = _this.input;
      const selection = {
        start: selectionStart,
        end: selectionEnd
      };
      const validationInfo = formatter.validate(value, selection);
      const newValue = validationInfo.valid ? value : oldValue;
      if (!validationInfo.valid) {
        _this.selection = validationInfo.selection || null;
      }
      _this.setState({
        value: newValue
      });
      if (validationInfo.valid) {
        const parsedValue = formatter.parse(newValue);
        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }
        _this.handleChangeEvent(parsedValue, ...args);
      }
    };
    this.handleChangeEvent = function (value) {
      const {
        onChange
      } = _this.props;
      if (onChange && value !== _this.lastSend) {
        _this.lastSend = value;
        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }
        onChange(value, ...args);
      }
    };
    this.handleChange = function (value) {
      const {
        formatter
      } = _this;
      if (!(formatter instanceof Formatter)) {
        return;
      }
      const parsedValue = formatter.parse(value);
      _this.setState({
        value: formatter.format(parsedValue)
      });
      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
        args[_key3 - 1] = arguments[_key3];
      }
      _this.handleChangeEvent(parsedValue, ...args);
    };
    this.handleEnter = function (value) {
      const {
        onEnter
      } = _this.props;
      if (onEnter) {
        const {
          formatter
        } = _this;
        if (!(formatter instanceof Formatter)) {
          return;
        }
        const parsedValue = formatter.parse(value);
        for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }
        onEnter(parsedValue, ...args);
      }
    };
    this.formatter = props.initialFormatter;
    this.lastSend = props.defaultValue;
    this.state = {
      value: this.formatter.format(props.defaultValue) || ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
  }
  componentDidUpdate() {
    if (this.selection && this.input) {
      this.input.setSelectionRange(this.selection.start, this.selection.start);
    }
    this.selection = null;
  }
  render() {
    const {
      value
    } = this.state;
    const {
      defaultValue,
      initialFormatter,
      inputRef,
      ...props
    } = this.props;
    if (!(initialFormatter instanceof Formatter)) {
      return null;
    }
    return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
      inputRef: ref => {
        this.input = ref;
        if (inputRef) {
          inputRef(ref);
        }
      },
      value: value,
      onChange: this.handleInputChange,
      onBlur: this.handleChange,
      onEnter: this.handleEnter
    }));
  }
}
FormattedInput.propTypes = {
  /**
   * An instance of a formatter that will be used to format the value of the
   * input.
   */
  initialFormatter: PropTypes.instanceOf(Formatter).isRequired,
  /**
   * The function that will be called on change.
   */
  onChange: PropTypes.func,
  onEnter: PropTypes.func,
  inputRef: PropTypes.func,
  /**
   * The initial value of the input.
   */
  defaultValue: PropTypes.any // eslint-disable-line react/forbid-prop-types
};

FormattedInput.defaultProps = {
  onChange: null,
  onEnter: null,
  defaultValue: null,
  inputRef: null
};
FormattedInput.displayName = 'FormattedInput';
//# sourceMappingURL=FormattedInput.js.map