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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
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 {
  static defaultProps = {
    inputElement: null,
    inputRef: null,
    onChange: null,
    guide: null,
    value: null,
    pipe: null,
    placeholderChar: null,
    keepCharPositions: null,
    showMask: null
  };
  constructor(props) {
    super(props);
    this.inputRef = props.inputRef || React.createRef();
  }
  componentDidMount() {
    this.initTextMask();
  }
  componentWillUnmount() {
    this.inputMode?.remove();
  }
  initTextMask() {
    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.inputMode?.setElement(inputElement);
  }
  onChange = event => {
    this.textMaskInputElement.update();
    if (typeof this.props.onChange === 'function') {
      return this.props.onChange(event);
    }
  };
  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));
  }
}
//# sourceMappingURL=TextMask.js.map