@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
144 lines (136 loc) • 8.86 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
exports.useTouch = useTouch;
var _useClass = _interopRequireDefault(require("@enact/core/useClass"));
var _react = require("react");
var _state = require("./state");
var _Touch = _interopRequireDefault(require("./Touch"));
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 _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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
/**
* Configuration for `useTouch`
*
* @typedef {Object} useTouchConfig
* @memberof ui/Touchable
* @property {Object} dragConfig Instance-specific overrides of the drag configuration
* @property {Object} flickConfig Instance-specific overrides of the flick configuration
* @property {Object} holdConfig Instance-specific overrides of the hold configuration
* @property {Object} pinchConfig Instance-specific overrides of the pinch configuration
* @property {Boolean} getActive Enables active state management
* @property {Boolean} disabled Disables a hook
* @property {Boolean} noResume Prevents resuming the touch events and gestures when re-entering the component
* @property {Function} onBlur Event handler for a blur event
* @property {Function} onClick Event handler for a click event
* @property {Function} onMouseDown Event handler for a mousedown event
* @property {Function} onMouseEnter Event handler for a mouseenter event
* @property {Function} onMouseLeave Event handler for a mouseleave event
* @property {Function} onMouseMove Event handler for a mousemove event
* @property {Function} onMouseUp Event handler for a mouseup event
* @property {Function} onTouchEnd Event handler for a touchend event
* @property {Function} onTouchMove Event handler for a touchmove event
* @property {Function} onTouchStart Event handler for a touchstart event
* @property {Function} onDown Event handler for 'down' pointer events
* @property {Function} onDrag Event handler for a drag gesture
* @property {Function} onDragEnd Event handler for the end of a drag gesture
* @property {Function} onDragStart Event handler for the start of a drag gesture
* @property {Function} onFlick Event handler for a flick gesture
* @property {Function} onHold Event handler for hold pulse events
* @property {Function} onHoldEnd Event handler for the end of hold events
* @property {Function} onHoldStart Event handler for hold events
* @property {Function} onPinch Event handler for pinch gesture
* @property {Function} onPinchEnd Event handler for the end of pinch gesture
* @property {Function} onPinchStart Event handler for pinch gesture
* @property {Function} onMove Event handler for a pointer moving
* @property {Function} onTap Event handler for 'tap' pointer events
* @property {Function} onUp Event handler for 'up' pointer events
* @see {@link ui/Touchable.configure}
* @private
*/
/**
* Object returned by `useTouch`
*
* @typedef {Object} useTouchInterface
* @memberof ui/Touchable
* @property {Boolean} active The active state
* @property {Object} handlers Event handlers that need to be passed to DOM node
* @private
*/
/**
* Provides a consistent set of pointer events -- `onDown`, `onUp`, and `onTap` --
* across mouse and touch interfaces along with support for common gestures including
* `onFlick`, `onDragStart`, `onDrag`, `onDragEnd`, `onHoldStart`, `onHold`, `onHoldEnd`,
* `onPinchStart`, `onPinch`, and `onPinchEnd`.
* @param {useTouchConfig} config Configuration options
* @returns {useTouchInterface}
* @private
*/
function useTouch() {
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _config$getActive = config.getActive,
getActive = _config$getActive === void 0 ? false : _config$getActive,
disabled = config.disabled,
dragConfig = config.dragConfig,
flickConfig = config.flickConfig,
holdConfig = config.holdConfig,
pinchConfig = config.pinchConfig,
onDrag = config.onDrag,
onDragEnd = config.onDragEnd,
onDragStart = config.onDragStart,
onHold = config.onHold,
onHoldEnd = config.onHoldEnd,
onHoldStart = config.onHoldStart,
onFlick = config.onFlick,
onPinch = config.onPinch,
onPinchEnd = config.onPinchEnd,
onPinchStart = config.onPinchStart;
var touch = (0, _useClass["default"])(_Touch["default"]);
var _useState = (0, _react.useState)(_state.States.Inactive),
_useState2 = _slicedToArray(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
touch.setPropsAndContext(_objectSpread(_objectSpread({}, config), {}, {
disabled: !!disabled
}), state, setState);
// componentDidMount and componentWillUnmount
(0, _react.useEffect)(function () {
touch.addGlobalHandlers();
return function () {
touch.disable();
touch.removeGlobalHandlers();
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
(0, _react.useEffect)(function () {
touch.updateGestureConfig(dragConfig, flickConfig, holdConfig, pinchConfig);
}, [dragConfig, flickConfig, holdConfig, pinchConfig]); // eslint-disable-line react-hooks/exhaustive-deps
(0, _react.useEffect)(function () {
touch.updateProps(config);
}, [onDrag, onDragEnd, onDragStart, onHold, onHoldEnd, onHoldStart, onFlick, onPinch, onPinchEnd, onPinchStart]); // eslint-disable-line react-hooks/exhaustive-deps
(0, _react.useEffect)(function () {
if (disabled) {
touch.disable();
}
}, [disabled]); // eslint-disable-line react-hooks/exhaustive-deps
(0, _react.useEffect)(function () {
setState(function (prevState) {
return !getActive || disabled ? _state.States.Inactive : prevState;
});
}, [getActive, disabled]);
return {
active: state !== _state.States.Inactive,
handlers: touch.getHandlers()
};
}
var _default = exports["default"] = useTouch;