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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
const _excluded = ["inputElement", "inputRef", "mask", "guide", "pipe", "placeholderChar", "keepCharPositions", "value", "onChange", "showMask"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import createTextMaskInputElement from './text-mask/createTextMaskInputElement';
import InputModeNumber from './text-mask/InputModeNumber';
import { isNil } from './text-mask/utilities';
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 ? void 0 : _this$inputMode.remove();
  }
  initTextMask() {
    var _this$inputMode2;
    const {
      props,
      props: {
        value,
        inputMode
      }
    } = this;
    const inputElement = this.inputRef.current;
    this.textMaskInputElement = createTextMaskInputElement(_objectSpread(_objectSpread({}, props), {}, {
      inputElement
    }));
    this.textMaskInputElement.update(value);
    if (!inputMode && inputMode !== 'none') {
      this.inputMode = new InputModeNumber();
    }
    (_this$inputMode2 = this.inputMode) === null || _this$inputMode2 === void 0 ? 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 isSettingChanged = Object.keys(settings).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 _this$props = this.props,
      {
        inputElement,
        inputRef,
        mask,
        guide,
        pipe,
        placeholderChar,
        keepCharPositions,
        value,
        onChange,
        showMask
      } = _this$props,
      props = _objectWithoutProperties(_this$props, _excluded);
    const params = _objectSpread({
      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
});
process.env.NODE_ENV !== "production" ? TextMask.propTypes = {
  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.bool, PropTypes.shape({
    mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
    pipe: PropTypes.func
  })]).isRequired,
  inputRef: PropTypes.object,
  inputElement: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  onChange: PropTypes.func,
  guide: PropTypes.bool,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  pipe: PropTypes.func,
  placeholderChar: PropTypes.string,
  keepCharPositions: PropTypes.bool,
  showMask: PropTypes.bool
} : void 0;
//# sourceMappingURL=TextMask.js.map