@dnb/eufemia/components/input-masked/TextMask.js

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import createTextMaskInputElement from "./text-mask/createTextMaskInputElement.js";
import InputModeNumber from "./text-mask/InputModeNumber.js";
import { isNil } from "./text-mask/utilities.js";
export default class TextMask extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "onChange", event => {
      this.textMaskInputElement.update();
      if (typeof this.props.onChange === 'function') {
        return this.props.onChange(event);
      }
    });
    this.inputRef = props.inputRef || React.createRef();
  }
  componentDidMount() {
    this.initTextMask();
  }
  componentWillUnmount() {
    var _this$inputMode;
    (_this$inputMode = this.inputMode) === null || _this$inputMode === void 0 || _this$inputMode.remove();
  }
  initTextMask() {
    var _this$inputMode2;
    const {
      props,
      props: {
        value,
        inputMode
      }
    } = this;
    const inputElement = this.inputRef.current;
    this.textMaskInputElement = createTextMaskInputElement({
      ...props,
      inputElement
    });
    this.textMaskInputElement.update(value);
    if (!inputMode && inputMode !== 'none') {
      this.inputMode = new InputModeNumber();
    }
    (_this$inputMode2 = this.inputMode) === null || _this$inputMode2 === void 0 || _this$inputMode2.setElement(inputElement);
  }
  componentDidUpdate(prevProps) {
    const {
      value,
      pipe,
      mask,
      guide,
      placeholderChar,
      showMask
    } = this.props;
    const settings = {
      guide,
      placeholderChar,
      showMask
    };
    const isPipeChanged = typeof pipe === 'function' && typeof prevProps.pipe === 'function' ? pipe.toString() !== prevProps.pipe.toString() : isNil(pipe) && !isNil(prevProps.pipe) || !isNil(pipe) && isNil(prevProps.pipe);
    const isMaskChanged = mask.toString() !== prevProps.mask.toString();
    const settingsKeys = Object.keys(settings);
    const isSettingChanged = settingsKeys.some(prop => settings[prop] !== prevProps[prop]) || isMaskChanged || isPipeChanged;
    const isValueChanged = value !== this.inputRef.current.value || prevProps.value !== value;
    if (isValueChanged || isSettingChanged) {
      this.initTextMask();
    }
  }
  render() {
    const {
      inputElement,
      inputRef,
      mask,
      guide,
      pipe,
      placeholderChar,
      keepCharPositions,
      value,
      onChange,
      showMask,
      ...props
    } = this.props;
    const params = {
      onChange: this.onChange,
      ...props
    };
    return inputElement ? (React.cloneElement(inputElement, params)) : React.createElement("input", _extends({
      ref: this.inputRef
    }, params));
  }
}
_defineProperty(TextMask, "defaultProps", {
  inputElement: null,
  inputRef: null,
  onChange: null,
  guide: null,
  value: null,
  pipe: null,
  placeholderChar: null,
  keepCharPositions: null,
  showMask: null
});
//# sourceMappingURL=TextMask.js.map