@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
418 lines (414 loc) • 14.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Touchable = void 0;
Object.defineProperty(exports, "configure", {
enumerable: true,
get: function get() {
return _config.configure;
}
});
exports["default"] = void 0;
Object.defineProperty(exports, "useTouch", {
enumerable: true,
get: function get() {
return _useTouch["default"];
}
});
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _config = require("./config");
var _Drag = require("./Drag");
var _Flick = require("./Flick");
var _Hold = require("./Hold");
var _Pinch = require("./Pinch");
var _useTouch = _interopRequireDefault(require("./useTouch"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["dragConfig", "flickConfig", "holdConfig", "pinchConfig", "disabled", "noResume", "onBlur", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "onDown", "onDrag", "onDragEnd", "onDragStart", "onFlick", "onHold", "onHoldEnd", "onHoldStart", "onMove", "onPinch", "onPinchEnd", "onPinchStart", "onTap", "onUp"],
_excluded2 = ["disabled", "noResume", "ref"];
/**
* Application support for gestures.
*
* @module ui/Touchable
* @exports Touchable
* @exports configure
*/
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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var selectProps = function selectProps(props) {
var dragConfig = props.dragConfig,
flickConfig = props.flickConfig,
holdConfig = props.holdConfig,
pinchConfig = props.pinchConfig,
disabled = props.disabled,
noResume = props.noResume,
onBlur = props.onBlur,
onClick = props.onClick,
onMouseDown = props.onMouseDown,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
onMouseMove = props.onMouseMove,
onMouseUp = props.onMouseUp,
onTouchEnd = props.onTouchEnd,
onTouchMove = props.onTouchMove,
onTouchStart = props.onTouchStart,
onDown = props.onDown,
onDrag = props.onDrag,
onDragEnd = props.onDragEnd,
onDragStart = props.onDragStart,
onFlick = props.onFlick,
onHold = props.onHold,
onHoldEnd = props.onHoldEnd,
onHoldStart = props.onHoldStart,
onMove = props.onMove,
onPinch = props.onPinch,
onPinchEnd = props.onPinchEnd,
onPinchStart = props.onPinchStart,
onTap = props.onTap,
onUp = props.onUp,
rest = _objectWithoutProperties(props, _excluded);
return {
configForHook: {
/* configs */
dragConfig: dragConfig,
flickConfig: flickConfig,
holdConfig: holdConfig,
pinchConfig: pinchConfig,
/* general props */
disabled: disabled,
noResume: noResume,
/* events to be captured and forwarded by useTouch hook */
onBlur: onBlur,
onClick: onClick,
onMouseDown: onMouseDown,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onMouseMove: onMouseMove,
onMouseUp: onMouseUp,
onTouchEnd: onTouchEnd,
onTouchMove: onTouchMove,
onTouchStart: onTouchStart,
/* custom events to be forwarded by useTouch hook */
onDown: onDown,
onDrag: onDrag,
onDragEnd: onDragEnd,
onDragStart: onDragStart,
onFlick: onFlick,
onHold: onHold,
onHoldEnd: onHoldEnd,
onHoldStart: onHoldStart,
onMove: onMove,
onPinch: onPinch,
onPinchEnd: onPinchEnd,
onPinchStart: onPinchStart,
onTap: onTap,
onUp: onUp
},
propsForWrapped: _objectSpread({
disabled: disabled
}, rest)
};
};
/**
* Default config for `Touchable`.
*
* @memberof ui/Touchable.Touchable
* @hocconfig
*/
var defaultConfig = {
/**
* Configures the prop name to pass the active state to the wrapped component
*
* @type {String}
* @default null
* @memberof ui/Touchable.Touchable.defaultConfig
*/
activeProp: null
};
/**
* A higher-order component that 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`.
* Note: This HoC passes a number of props to the wrapped component that should be passed to the
* main DOM node or consumed by the wrapped component.
*
* @class Touchable
* @memberof ui/Touchable
* @hoc
* @public
*/
var Touchable = exports.Touchable = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var activeProp = config.activeProp;
// eslint-disable-next-line no-shadow
var Touchable = function Touchable(props) {
var _props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$noResume = props.noResume,
noResume = _props$noResume === void 0 ? false : _props$noResume,
_props$ref = props.ref,
ref = _props$ref === void 0 ? null : _props$ref,
rest = _objectWithoutProperties(props, _excluded2);
var _selectProps = selectProps(_objectSpread({
disabled: disabled,
noResume: noResume
}, rest)),
configForHook = _selectProps.configForHook,
propsForWrapped = _selectProps.propsForWrapped;
var hook = (0, _useTouch["default"])(_objectSpread({
getActive: !!activeProp
}, configForHook));
Object.assign(propsForWrapped, hook.handlers);
if (activeProp) {
propsForWrapped[activeProp] = hook.active;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, propsForWrapped), {}, {
ref: ref
}));
};
Touchable.propTypes = {
/**
* Disables the component.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Boolean}
* @default false
* @public
*/
disabled: _propTypes["default"].bool,
/**
* Instance-specific overrides of the drag configuration.
*
* @see {@link ui/Touchable.configure}
* @memberof ui/Touchable.Touchable.prototype
* @type {Object}
* @public
*/
dragConfig: _Drag.dragConfigPropType,
/**
* Instance-specific overrides of the flick configuration.
*
* @see {@link ui/Touchable.configure}
* @memberof ui/Touchable.Touchable.prototype
* @type {Object}
* @public
*/
flickConfig: _Flick.flickConfigPropType,
/**
* Instance-specific overrides of the hold configuration.
*
* @see {@link ui/Touchable.configure}
* @memberof ui/Touchable.Touchable.prototype
* @type {Object}
* @public
*/
holdConfig: _Hold.holdConfigPropType,
/**
* Prevents resuming the touch events and gestures when re-entering the component.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Boolean}
* @default false
* @public
*/
noResume: _propTypes["default"].bool,
/**
* Event handler for 'down' pointer events.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onDown: _propTypes["default"].func,
/**
* Event handler for a drag gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onDrag'`
* * `x` - Horizontal position of the drag, relative to the viewport
* * `y` - Vertical position of the drag, relative to the viewport
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onDrag: _propTypes["default"].func,
/**
* Event handler for the end of a drag gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onDragEnd'`
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onDragEnd: _propTypes["default"].func,
/**
* Event handler for the start of a drag gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onDragStart'`
* * `x` - Horizontal position of the drag, relative to the viewport
* * `y` - Vertical position of the drag, relative to the viewport
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onDragStart: _propTypes["default"].func,
/**
* Event handler for a flick gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onFlick'`
* * `direction` - Primary direction of the flick, either `'horizontal'` or `'vertical'`
* * `velocity` - Velocity of flick
* * `velocityX` - Velocity of flick along te horizontal axis
* * `velocityY` - Velocity of flick along te vertical axis
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onFlick: _propTypes["default"].func,
/**
* Event handler for hold pulse events.
*
* Event payload includes:
*
* * `type` - Type of event, `'onHold'`
* * `time` - Time, in milliseconds, since the hold began
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onHold: _propTypes["default"].func,
/**
* Event handler for the end of hold events.
*
* Event payload includes:
*
* * `type` - Type of event, `'onHoldEnd'`
* * `time` - Time, in milliseconds, since the hold began
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onHoldEnd: _propTypes["default"].func,
/**
* Event handler for hold events.
*
* Event payload includes:
*
* * `type` - Type of event, `'onHoldStart'`
* * `name` - The name of the hold as configured in the events list
* * `time` - Time, in milliseconds, configured for this hold which may vary slightly
* from time since the hold began
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onHoldStart: _propTypes["default"].func,
/**
* Event handler for 'move' pointer events.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onMove: _propTypes["default"].func,
/**
* Event handler for a pinch gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onPinch'`
* * `scale` - The scale factor, calculated from the distance while pinching.
* The default value is 1.0. The value would be a number between
* pinchConfig.minScale and pinchConfig.maxScale.
* * `coords` - The coordinates array of the touch point, relative to the viewport
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onPinch: _propTypes["default"].func,
/**
* Event handler for the end of a pinch gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onPinchEnd'`
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onPinchEnd: _propTypes["default"].func,
/**
* Event handler for the start of a pinch gesture.
*
* Event payload includes:
*
* * `type` - Type of event, `'onPinchStart'`
* * `coords` - The coordinates array of the touch point, relative to the viewport
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onPinchStart: _propTypes["default"].func,
/**
* Event handler for 'tap' pointer events.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onTap: _propTypes["default"].func,
/**
* Event handler for 'up' pointer events.
*
* @memberof ui/Touchable.Touchable.prototype
* @type {Function}
* @public
*/
onUp: _propTypes["default"].func,
/**
* Instance-specific overrides of the pinch configuration.
*
* @see {@link ui/Touchable.configure}
* @memberof ui/Touchable.Touchable.prototype
* @type {Object}
* @public
*/
pinchConfig: _Pinch.pinchConfigPropType,
/**
* Forwards a reference to the DOM element.
*
* @type {Object}
* @private
*/
ref: _propTypes["default"].shape({
current: _propTypes["default"].any
})
};
Touchable.displayName = 'Touchable';
return Touchable;
});
var _default = exports["default"] = Touchable;