@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
171 lines (167 loc) • 8.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.ScrollbarBase = exports.Scrollbar = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _Scrollbar = require("@enact/ui/useScroll/Scrollbar");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _ScrollbarTrack = _interopRequireDefault(require("./ScrollbarTrack"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _ScrollbarModule = _interopRequireDefault(require("./Scrollbar.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className"],
_excluded2 = ["aria-label", "cbAlertScrollbarTrack", "focusableScrollbar", "onInteractionForScroll", "rtl", "scrollbarTrackCss"],
_excluded3 = ["css", "minThumbSize", "vertical"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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(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; }
var useThemeScrollbar = function useThemeScrollbar(props) {
var _useScrollbarBase = (0, _Scrollbar.useScrollbar)(props),
restProps = _useScrollbarBase.restProps,
_useScrollbarBase$scr = _useScrollbarBase.scrollbarProps,
scrollbarClassName = _useScrollbarBase$scr.className,
restScrollbarProps = _objectWithoutProperties(_useScrollbarBase$scr, _excluded),
scrollbarTrackProps = _useScrollbarBase.scrollbarTrackProps;
var ariaLabel = restProps['aria-label'],
cbAlertScrollbarTrack = restProps.cbAlertScrollbarTrack,
focusableScrollbar = restProps.focusableScrollbar,
onInteractionForScroll = restProps.onInteractionForScroll,
rtl = restProps.rtl,
scrollbarTrackCss = restProps.scrollbarTrackCss,
rest = _objectWithoutProperties(restProps, _excluded2);
var scrollbarContainerRef = restScrollbarProps.ref,
scrollbarTrackRef = scrollbarTrackProps.ref,
vertical = props.vertical;
var onClick = (0, _react.useCallback)(function (ev) {
// Click on bodyText scrollbar.
var nativeEvent = ev.nativeEvent,
target = ev.target;
if (!focusableScrollbar || !scrollbarTrackRef.current) {
return;
}
// Click the scrollbar area. If user click the thumb, do nothing.
if (target === scrollbarContainerRef.current || target === scrollbarTrackRef.current) {
var clickPoint = nativeEvent[vertical ? 'offsetY' : 'offsetX'],
thumb = scrollbarTrackRef.current.children[0],
thumbPosition = thumb[vertical ? 'offsetTop' : 'offsetLeft'],
thumbSize = thumb[vertical ? 'offsetHeight' : 'offsetWidth'],
clickThumb = clickPoint > thumbPosition && clickPoint < thumbPosition + thumbSize;
if (!clickThumb) {
ev.preventDefault();
ev.nativeEvent.stopImmediatePropagation();
onInteractionForScroll({
inputType: 'track',
isForward: clickPoint > thumbPosition,
isPagination: true,
isVerticalScrollBar: vertical
});
}
}
}, [focusableScrollbar, onInteractionForScroll, scrollbarContainerRef, scrollbarTrackRef, vertical]);
return {
restProps: rest,
scrollbarProps: _objectSpread(_objectSpread({}, restScrollbarProps), {}, {
className: (0, _classnames["default"])(scrollbarClassName, _defineProperty({}, _ScrollbarModule["default"].focusableScrollbar, focusableScrollbar)),
onClick: onClick
}),
scrollbarTrackProps: _objectSpread(_objectSpread({}, scrollbarTrackProps), {}, {
'aria-label': ariaLabel,
cbAlertScrollbarTrack: cbAlertScrollbarTrack,
focusableScrollbar: focusableScrollbar,
onInteractionForScroll: onInteractionForScroll,
rtl: rtl,
scrollbarTrackCss: scrollbarTrackCss
})
};
};
/**
* A Sandstone-styled scrollbar base component.
*
* @class ScrollbarBase
* @memberof sandstone/useScroll
* @ui
* @private
*/
var ScrollbarBase = exports.ScrollbarBase = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var _ref$css = _ref.css,
css = _ref$css === void 0 ? _ScrollbarModule["default"] : _ref$css,
_ref$minThumbSize = _ref.minThumbSize,
minThumbSize = _ref$minThumbSize === void 0 ? 120 : _ref$minThumbSize,
_ref$vertical = _ref.vertical,
vertical = _ref$vertical === void 0 ? true : _ref$vertical,
rest = _objectWithoutProperties(_ref, _excluded3);
var props = _objectSpread({
css: css,
minThumbSize: minThumbSize,
vertical: vertical
}, rest);
var _useThemeScrollbar = useThemeScrollbar(props),
restProps = _useThemeScrollbar.restProps,
scrollbarProps = _useThemeScrollbar.scrollbarProps,
scrollbarTrackProps = _useThemeScrollbar.scrollbarTrackProps;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({}, restProps), scrollbarProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarTrack["default"], _objectSpread({}, scrollbarTrackProps))
}));
});
ScrollbarBase.displayName = 'ScrollbarBase';
ScrollbarBase.propTypes = /** @lends sandstone/useScroll.Scrollbar.prototype */{
/**
* Customizes the component by mapping the supplied collection of CSS class names to the
* corresponding internal elements and states of this component.
*
* The following classes are supported:
*
* * `scrollbar` - The scrollbar component class
*
* @type {Object}
* @public
*/
css: _propTypes["default"].object,
/**
* The minimum size of the thumb.
* This value will be applied ri.scale.
*
* @type {number}
* @public
*/
minThumbSize: _propTypes["default"].number,
/**
* Customizes the component by mapping the supplied collection of CSS class names to the
* corresponding internal elements and states of this component.
*
* The following classes are supported:
*
* * `scrollbarTrack` - The scrollbarTrack component class
* * `thumb` - The scrollbar thumb component class
*
* @type {Object}
* @public
*/
scrollbarTrackCss: _propTypes["default"].object,
/**
* The scrollbar will be oriented vertically.
*
* @type {Boolean}
* @default true
* @public
*/
vertical: _propTypes["default"].bool
};
/**
* A Sandstone-styled scroll bar.
*
* @class Scrollbar
* @memberof sandstone/useScroll
* @ui
* @private
*/
var Scrollbar = exports.Scrollbar = (0, _Skinnable["default"])(ScrollbarBase);
Scrollbar.displayName = 'Scrollbar';
var _default = exports["default"] = Scrollbar;