debounce-input-decorator/dist/index.js

Decorator to easily create debounced React inputs

"use strict";

exports.__esModule = true;
exports.Textarea = exports.Input = exports.default = void 0;

var _debounce = _interopRequireDefault(require("lodash/debounce"));

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

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

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var DEFAULT_DELAY = function DEFAULT_DELAY(_ref) {
  var _ref$debounceTimeout = _ref.debounceTimeout,
      debounceTimeout = _ref$debounceTimeout === void 0 ? 250 : _ref$debounceTimeout;
  return debounceTimeout;
};

var getEventValue = function getEventValue(event) {
  var target, value;
  return event != null && (target = event.target) != null && (value = target.value) !== undefined ? value : event;
};

var EMPTY_VALUE = {
  value: undefined
};

var debounceInputDecorator = function debounceInputDecorator(delay) {
  if (delay === void 0) {
    delay = DEFAULT_DELAY;
  }

  return function (Input) {
    return function (_React$Component) {
      _inheritsLoose(DebouncedInput, _React$Component);

      function DebouncedInput(props) {
        var _this;

        _this = _React$Component.call(this) || this;
        _this.state = {};
        _this._notify = (0, _debounce.default)(function (event) {
          _this.props.onChange(event);

          _this.setState(EMPTY_VALUE);
        }, typeof delay === 'function' ? delay(props) : delay);

        _this._onBlur = function (event) {
          _this._notify.flush();

          var onBlur = _this.props.onBlur;

          if (onBlur !== undefined) {
            onBlur(event);
          }
        };

        _this._onChange = function (event) {
          _this.setState({
            value: getEventValue(event)
          });

          if (event != null && typeof event.persist === 'function') {
            event.persist();
          }

          _this._notify(event);
        };

        _this._onKeyDown = function (event) {
          if (event != null && event.key === 'Enter') {
            _this._notify.flush();
          }

          var onKeyDown = _this.props.onKeyDown;

          if (onKeyDown !== undefined) {
            onKeyDown(event);
          }
        };

        _this._wrappedInstance = null;

        _this._onRef = function (ref) {
          _this._wrappedInstance = ref;
        };

        return _this;
      }

      var _proto = DebouncedInput.prototype;

      _proto.componentWillReceiveProps = function componentWillReceiveProps(_ref2) {
        var value = _ref2.value;

        if (value !== this.props.value) {
          this._notify.cancel();

          this.setState(EMPTY_VALUE);
        }
      };

      _proto.componentWillUnmount = function componentWillUnmount() {
        this._notify.flush();
      };

      _proto.getWrappedInstance = function getWrappedInstance() {
        return this._wrappedInstance;
      };

      _proto.render = function render() {
        var props = Object.assign({}, this.props, {
          onBlur: this._onBlur,
          onChange: this._onChange,
          onKeyDown: this._onKeyDown,
          ref: this._onRef
        });
        delete props.debounceTimeout;
        var value = this.state.value;

        if (value !== undefined) {
          props.value = value;
        }

        return _react.default.createElement(Input, props);
      };

      return DebouncedInput;
    }(_react.default.Component);
  };
};

exports.default = debounceInputDecorator;
var Input = debounceInputDecorator()('input');
exports.Input = Input;
var Textarea = debounceInputDecorator()('textarea');
exports.Textarea = Textarea;
//# sourceMappingURL=index.js.map