@enact/ui/Touchable/Hold.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.holdConfigPropType = exports.defaultHoldConfig = exports["default"] = exports.Hold = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Hold = exports.Hold = /*#__PURE__*/function () {
  function Hold() {
    var _this = this;
    _classCallCheck(this, Hold);
    this.isHolding = function () {
      return _this.holdConfig != null;
    };
    this.isWithinTolerance = function (_ref) {
      var x = _ref.x,
        y = _ref.y;
      var moveTolerance = _this.holdConfig.moveTolerance;
      var dx = _this.startX - x;
      var dy = _this.startY - y;
      return Math.sqrt(dx * dx + dy * dy) < moveTolerance;
    };
    this.begin = function (defaultConfig, _ref2, _ref3) {
      var holdConfig = _ref2.holdConfig,
        noResume = _ref2.noResume,
        onHoldStart = _ref2.onHoldStart,
        onHoldEnd = _ref2.onHoldEnd,
        onHold = _ref2.onHold;
      var x = _ref3.x,
        y = _ref3.y;
      if (!onHoldStart && !onHold) return;
      _this.startX = x;
      _this.startY = y;
      _this.holdConfig = _objectSpread(_objectSpread(_objectSpread({}, defaultConfig), holdConfig), {}, {
        resume: !noResume
      });
      _this.onHold = onHold;
      _this.onHoldStart = onHoldStart;
      _this.onHoldEnd = onHoldEnd;

      // copy the events array since it is mutated for each hold
      _this.holdConfig.events = _this.holdConfig.events.slice();
      _this.holdConfig.events.sort(function (a, b) {
        if (a.time < b.time) return -1;
        if (a.time > b.time) return 1;
        return 0;
      });
      _this.pulsing = false;
      _this.next = _this.holdConfig.events.shift();
      if (_this.next) {
        _this.holdStart = window.performance.now();
        _this.startJob();
      }
    };
    // This method will get the `onHoldStart`, `onHoldEnd`, `onHold` props.
    this.updateProps = function (_ref4) {
      var onHoldStart = _ref4.onHoldStart,
        onHoldEnd = _ref4.onHoldEnd,
        onHold = _ref4.onHold;
      // check `isHolding` gesture is not in progress. Check if gesture exists before updating the references to the `holdConfig`
      if (!_this.isHolding()) return;

      // Update the original values with new values of the gestures
      _this.onHold = onHold;
      _this.onHoldStart = onHoldStart;
      _this.onHoldEnd = onHoldEnd;
    };
    this.move = function (coords) {
      if (!_this.isHolding()) return;
      var _this$holdConfig = _this.holdConfig,
        cancelOnMove = _this$holdConfig.cancelOnMove,
        resume = _this$holdConfig.resume;
      if (cancelOnMove) {
        var shouldEnd = !_this.isWithinTolerance(coords);
        if (shouldEnd) {
          if (resume) {
            _this.suspend();
          } else {
            _this.end();
          }
        } else if (resume && !shouldEnd) {
          _this.resume();
        }
      }
    };
    this.blur = function () {
      if (!_this.isHolding()) return;
      if (!_this.holdConfig.global) {
        _this.end();
      }
    };
    this.end = function () {
      if (!_this.isHolding()) return;
      if (_this.pulsing && _this.onHoldEnd) {
        var time = window.performance.now() - _this.holdStart;
        _this.onHoldEnd({
          type: 'onHoldEnd',
          time: time
        });
      }
      _this.suspend();
      _this.pulsing = false;
      _this.holdConfig = null;
    };
    this.enter = function () {
      if (!_this.isHolding()) return;
      var _this$holdConfig2 = _this.holdConfig,
        cancelOnMove = _this$holdConfig2.cancelOnMove,
        resume = _this$holdConfig2.resume;
      if (resume && !cancelOnMove) {
        _this.resume();
      }
    };
    this.leave = function () {
      if (!_this.isHolding()) return;
      var _this$holdConfig3 = _this.holdConfig,
        isGlobal = _this$holdConfig3.global,
        resume = _this$holdConfig3.resume;
      if (isGlobal) return;
      if (resume) {
        _this.suspend();
      } else {
        _this.end();
      }
    };
    this.suspend = function () {
      clearInterval(_this.holdJob);
      _this.holdJob = null;
    };
    this.resume = function () {
      if (_this.holdJob !== null) return;
      _this.handlePulse();
      _this.startJob();
    };
    this.handlePulse = function () {
      var holdTime = window.performance.now() - _this.holdStart;
      var n = _this.next;
      while (n && n.time <= holdTime) {
        var events = _this.holdConfig.events;
        _this.pulsing = true;
        if (_this.onHoldStart) {
          _this.onHoldStart(_objectSpread({
            type: 'onHoldStart'
          }, n));
        }

        // if the hold is canceled from the onHoldStart handler, we should bail early and prevent
        // additional hold/pulse events
        if (!_this.isHolding()) {
          _this.pulsing = false;
          break;
        }
        n = _this.next = events && events.shift();
      }
      if (_this.pulsing) {
        if (_this.onHold) {
          _this.onHold({
            type: 'onHold',
            time: holdTime
          });
        }
      }
    };
    this.holdJob = null;
    this.holdStart = null;
    this.pulsing = false;
    this.next = null;
  }
  return _createClass(Hold, [{
    key: "startJob",
    value: function startJob() {
      var frequency = this.holdConfig.frequency;
      if (!this.holdJob) {
        this.holdJob = setInterval(this.handlePulse, frequency);
      }
    }
  }]);
}();
var defaultHoldConfig = exports.defaultHoldConfig = {
  cancelOnMove: false,
  events: [{
    name: 'hold',
    time: 200
  }],
  frequency: 200,
  global: false,
  moveTolerance: 16
};
var holdConfigPropType = exports.holdConfigPropType = _propTypes["default"].shape({
  cancelOnMove: _propTypes["default"].bool,
  events: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    name: _propTypes["default"].string,
    time: _propTypes["default"].number
  })),
  frequency: _propTypes["default"].number,
  global: _propTypes["default"].bool,
  moveTolerance: _propTypes["default"].number
});
var _default = exports["default"] = Hold;