react-hichestan-numberinput/dist/NumberInput.js

A serie of react components to numbers in input specially persian numbers.

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _objects = _interopRequireDefault(require("shallow-equal/objects"));

var _util = require("./util");

var _excluded = ["value", "onChange", "onInput", "onPast", "onKeyDown", "pattern", "inputMode", "type", "ref", "inputRef", "getInputRef", "numberFormat", "defaultValue"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var NumberInput = /*#__PURE__*/function (_Component) {
  _inherits(NumberInput, _Component);

  var _super = _createSuper(NumberInput);

  function NumberInput(_props) {
    var _this;

    _classCallCheck(this, NumberInput);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "readValuesFromProps", function (props) {
      var value = props.value || '';

      var valueToShow = _this.mapValue(value, props.numberFormat);

      return {
        value: value,
        valueToShow: valueToShow,
        selectionStart: undefined,
        selectionEnd: undefined
      };
    });

    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
      // console.log('keyCode: ', event.keyCode, 'key: ', event.key);
      if (_this.props.disabled || _this.props.readOnly) {
        event.preventDefault();
      } else if (event.keyCode === 8) {
        //backspace
        event.preventDefault();

        _this.updateState(_this.deleteValue(event.target, -1));
      } else if (event.keyCode === 46) {
        //delete
        event.preventDefault();

        _this.updateState(_this.deleteValue(event.target, 1));
      } else if (event.keyCode >= 48 && event.keyCode <= 57) {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, (event.keyCode - 48).toString(), _this.props.numberFormat));
      } else if (event.keyCode >= 96 && event.keyCode <= 105) {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, (event.keyCode - 96).toString(), _this.props.numberFormat));
      } else if (event.key >= '۰' && event.key <= '۹' || event.key >= '٠' && event.key <= '٩') {
        //digits
        event.preventDefault(); // console.log('digit');

        _this.updateState(_this.updateValue(event.target, event.key, _this.props.numberFormat));
      } else if (event.keyCode >= 35 && event.keyCode <= 40) {//arrows
      } else if (event.keyCode === 9) {//tab
      } else if (event.keyCode === 13) {
        //return
        _this.hideKeyboard();
      } else if ((event.ctrlKey || event.metaKey) && (event.keyCode === 67 || event.keyCode === 86 || event.keyCode === 88)) {//copy/paste/cut
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 82) {//refresh key
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 82) {//refresh key
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 73) {//inspector
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 65) {//select all
      } else if ((event.ctrlKey || event.metaKey) && event.keyCode === 76) {//location focus
      } else if (event.keyCode >= 112 && event.keyCode <= 123) {// All other F keys
      } else if (event.keyCode === 229) {//android bug workaround
      } else {
        // console.log('other');
        // console.log('keyCode: ', event.keyCode, 'key: ', event.key, 'ctrlKey: ', event.ctrlKey);
        // this.rr.current.innerText = `keyCode: ${event.keyCode} key:  ${event.key} ctrlKey: ${event.ctrlKey}`;
        event.preventDefault();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "hideKeyboard", function () {
      _this.inputRef.current.blur();
    });

    _defineProperty(_assertThisInitialized(_this), "handlePaste", function (event) {
      event.preventDefault();
      if (_this.props.disabled || _this.props.readOnly) return;
      var enteredValue = (0, _util.stripAnyThingButDigits)((event.clipboardData || window.clipboardData).getData('text'));

      _this.updateState(_this.updateValue(event.target, enteredValue, _this.props.numberFormat));
    });

    _defineProperty(_assertThisInitialized(_this), "handleInput", function (event) {
      if (_this.props.disabled || _this.props.readOnly) return;
      if (_this.values.valueToShow === event.target.value) return;
      var enteredValue = (0, _util.stripAnyThingButDigits)(event.target.value);

      _this.updateState(_this.recheckValue(event.target, enteredValue, _this.props.numberFormat), true);
    });

    _defineProperty(_assertThisInitialized(_this), "mapValue", function (value, numberFormat) {
      if (numberFormat === _util.NUMBER_FORMAT_FARSI) {
        return (0, _util.mapToFarsi)(value);
      } else if (numberFormat === _util.NUMBER_FORMAT_LATIN) {
        return (0, _util.mapToLatin)(value);
      }

      return (0, _util.mapToFarsi)(value);
    });

    _defineProperty(_assertThisInitialized(_this), "updateState", function (newState, forceFireChange, noFireOnChange) {
      if (!newState) return;
      _this.values = newState;
      var fireOnChangeInTheEnd = false;

      if (_this.inputRef.current.value !== _this.values.valueToShow) {
        fireOnChangeInTheEnd = true;
        _this.inputRef.current.value = _this.values.valueToShow;
      }

      if (_this.inputRef.current === document.activeElement) {
        // console.log('has focus :D');
        _this.inputRef.current.setSelectionRange(_this.values.selectionStart, _this.values.selectionEnd);
      } else {// console.log('has not focus :(');
      }

      if (fireOnChangeInTheEnd || forceFireChange) {
        if (!noFireOnChange) {
          _this.fireOnChange();
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "updateValue", function (element, enteredValue, numberFormat) {
      var enteredValueMapped = _this.mapValue(enteredValue, numberFormat);

      var valueToShow = element.value;
      var selectionStart = element.selectionStart;
      var selectionEnd = element.selectionEnd;
      var lengthToBe = valueToShow.length + enteredValue.length - (selectionEnd - selectionStart);

      if (_this.props.maxLength && lengthToBe > _this.props.maxLength) {
        return;
      }

      valueToShow = valueToShow.substring(0, selectionStart) + enteredValueMapped + valueToShow.substring(selectionEnd);
      selectionStart += enteredValueMapped.length;
      selectionEnd = selectionStart;
      var value = (0, _util.mapToLatin)(valueToShow);
      return {
        value: value,
        valueToShow: valueToShow,
        selectionStart: selectionStart,
        selectionEnd: selectionEnd
      };
    });

    _defineProperty(_assertThisInitialized(_this), "recheckValue", function (element, enteredValue, numberFormat) {
      var valueToShow = _this.mapValue(enteredValue, numberFormat);

      var selectionStart = element.selectionStart;
      var selectionEnd = element.selectionEnd;
      var value = (0, _util.mapToLatin)(valueToShow);
      return {
        value: value,
        valueToShow: valueToShow,
        selectionStart: selectionStart,
        selectionEnd: selectionEnd
      };
    });

    _defineProperty(_assertThisInitialized(_this), "deleteValue", function (element, qty) {
      var valueToShow = element.value;
      var selectionStart = element.selectionStart;
      var selectionEnd = element.selectionEnd; // console.log({selectionStart, selectionEnd})

      if (selectionStart === selectionEnd) {
        if (qty < 0) {
          if (selectionStart === 0) return;
          valueToShow = valueToShow.substring(0, selectionStart + qty) + valueToShow.substring(selectionEnd);
          selectionStart += qty;
        } else {
          if (selectionEnd === valueToShow.length) return;
          valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd + qty);
        }
      } else {
        valueToShow = valueToShow.substring(0, selectionStart) + valueToShow.substring(selectionEnd);
      }

      selectionEnd = selectionStart;
      var value = (0, _util.mapToLatin)(valueToShow);
      return {
        value: value,
        valueToShow: valueToShow,
        selectionStart: selectionStart,
        selectionEnd: selectionEnd
      };
    });

    _defineProperty(_assertThisInitialized(_this), "fireOnChange", function () {
      if (_this.props.onChange) {
        _this.props.onChange({
          target: {
            name: _this.props.name,
            value: _this.values.value
          }
        });
      }
    });

    var ref = _props.inputRef || _props.getInputRef;

    if (ref && typeof ref === 'function') {
      ref = ref();
    }

    _this.inputRef = ref ? ref : /*#__PURE__*/_react.default.createRef(); // this.rr = React.createRef();

    _this.values = _this.readValuesFromProps(_props);
    return _this;
  }

  _createClass(NumberInput, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      if (nextProps.value !== this.values.value || nextProps.numberFormat !== this.props.numberFormat) {
        this.updateState(this.readValuesFromProps(nextProps), false, true);
      }

      if (!(0, _objects.default)(nextProps.style, this.props.style)) {
        return true;
      }

      if (nextProps.className !== this.props.className) {
        this.inputRef.current.className = nextProps.className;
      }

      if (nextProps.disabled !== this.props.disabled) {
        this.inputRef.current.disabled = nextProps.disabled;
      }

      if (nextProps.readOnly !== this.props.readOnly) {
        this.inputRef.current.readOnly = nextProps.readOnly;
      }

      if (nextProps.placeholder !== this.props.placeholder) {
        this.inputRef.current.placeholder = nextProps.placeholder;
      }

      return false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          value = _this$props.value,
          onChange = _this$props.onChange,
          onInput = _this$props.onInput,
          onPast = _this$props.onPast,
          onKeyDown = _this$props.onKeyDown,
          pattern = _this$props.pattern,
          inputMode = _this$props.inputMode,
          type = _this$props.type,
          ref = _this$props.ref,
          inputRef = _this$props.inputRef,
          getInputRef = _this$props.getInputRef,
          numberFormat = _this$props.numberFormat,
          defaultValue = _this$props.defaultValue,
          rest = _objectWithoutProperties(_this$props, _excluded);

      var valueToShow = this.values.valueToShow; // const localInputMode = this.props.type === 'tel' ? 'tel' : 'numeric'; // as we use type=tel, then we do not need it any more
      // const localPattern = '[0-9]*'; // it has problem with the form checking, as we insert persian digit, it is not acceptable for the browser

      return /*#__PURE__*/_react.default.createElement("input", _extends({
        ref: this.inputRef,
        type: "tel" // I tried to use text and using inputMode, but it does not work on Safari
        // inputMode={localInputMode}
        // xInputMode={localnputMode} // in firefox OS it is x-inputmode, I do not know how to handle it
        ,
        dir: "ltr" // pattern={localPattern}
        ,
        defaultValue: valueToShow,
        onKeyDown: this.handleKeyDown,
        onPaste: this.handlePaste,
        onInput: this.handleInput
      }, rest)); //<p ref={this.rr} type={"text"}>empty</p></div>
    }
  }]);

  return NumberInput;
}(_react.Component);

_defineProperty(NumberInput, "propTypes", {
  /**
   * The ref to pass on the input, if empty it will be created internally
   */
  inputRef: _propTypes.default.any,
  getInputRef: _propTypes.default.any,

  /**
   * The name that will be set while firing the onChange event in the target object
   */
  name: _propTypes.default.string,

  /**
   * Callback function that is fired when the cart number value changes.
   */
  onChange: _propTypes.default.func,

  /**
   * Override the inline-styles of the root element.
   */
  style: _propTypes.default.object,

  /**
   * The css class name of the root element.
   */
  className: _propTypes.default.string,

  /**
   * Disables the number input.
   */
  disabled: _propTypes.default.bool,

  /**
   * makes the number input readonly.
   */
  readOnly: _propTypes.default.bool,

  /**
   * accepted number digit count.
   */
  maxLength: _propTypes.default.number,

  /**
   * Callback function that is fired when a click event occurs on the input.
   */
  onClick: _propTypes.default.func,

  /**
   * Callback function that is fired when the input gains focus.
   */
  onFocus: _propTypes.default.func,

  /**
   * Sets the value for the number input.
   */
  value: _propTypes.default.string
});

var _default = NumberInput;
exports.default = _default;