@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
214 lines (209 loc) • 9.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ScrollbarBase = exports.Scrollbar = void 0;
Object.defineProperty(exports, "ScrollbarTrack", {
enumerable: true,
get: function get() {
return _ScrollbarTrack["default"];
}
});
exports.useScrollbar = exports["default"] = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _util = require("@enact/core/util");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _resolution = _interopRequireDefault(require("../resolution"));
var _ScrollbarTrack = _interopRequireDefault(require("./ScrollbarTrack"));
var _ScrollbarModule = _interopRequireDefault(require("./Scrollbar.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "clientSize", "corner", "css", "minThumbSize", "scrollbarHandle", "vertical"],
_excluded2 = ["corner", "css", "minThumbSize", "vertical"];
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 scrollbarTrackHidingDelay = 900; // 900ms + 100ms(fade out duration) = 1000ms.
var addClass = function addClass(element, className) {
if (element) {
element.classList.add(className);
}
};
var removeClass = function removeClass(element, className) {
if (element) {
element.classList.remove(className);
}
};
/*
* Set CSS Variable value.
*
* @method
* @param {Node} element - Node.
* @param {String} variable - CSS Variable property.
* @param {String} value - CSS Variable value.
*/
var setCSSVariable = function setCSSVariable(element, variable, value) {
element.style.setProperty(variable, value);
};
/**
* A custom hook that passes scrollbar behavior information as its render prop.
*
* @class
* @memberof ui/useScroll
* @ui
* @private
*/
var useScrollbar = exports.useScrollbar = function useScrollbar(props) {
var className = props.className,
clientSize = props.clientSize,
corner = props.corner,
css = props.css,
minThumbSize = props.minThumbSize,
scrollbarHandle = props.scrollbarHandle,
vertical = props.vertical,
rest = _objectWithoutProperties(props, _excluded);
// Refs
var scrollbarContainerRef = (0, _react.useRef)();
var scrollbarTrackRef = (0, _react.useRef)();
var hideScrollbarTrackJob = (0, _react.useRef)(null);
hideScrollbarTrackJob.current = hideScrollbarTrackJob.current || new _util.Job(hideScrollbarTrack, scrollbarTrackHidingDelay);
function hideScrollbarTrack() {
removeClass(scrollbarTrackRef.current, css.scrollbarTrackShown);
}
(0, _react.useEffect)(function () {
return function () {
hideScrollbarTrackJob.current.stop();
};
}, []);
function getContainerRef() {
return scrollbarContainerRef;
}
function showScrollbarTrack() {
hideScrollbarTrackJob.current.stop();
addClass(scrollbarTrackRef.current, css.scrollbarTrackShown);
}
function startHidingScrollbarTrack() {
hideScrollbarTrackJob.current.start();
}
function update(bounds) {
var primaryDimension = vertical ? 'clientHeight' : 'clientWidth',
trackSize = clientSize ? clientSize[primaryDimension] : scrollbarContainerRef.current[primaryDimension],
scrollViewSize = vertical ? bounds.clientHeight : bounds.clientWidth,
scrollContentSize = vertical ? bounds.scrollHeight : bounds.scrollWidth,
scrollOrigin = vertical ? bounds.scrollTop : bounds.scrollLeft,
scrollbarThumbSizeRatioBase = scrollContentSize !== 0 ? scrollViewSize / scrollContentSize : 1,
scrollbarThumbProgressRatio = scrollContentSize - scrollViewSize !== 0 ? scrollOrigin / (scrollContentSize - scrollViewSize) : 0,
scrollbarThumbSizeRatio = trackSize !== 0 ? Math.max(_resolution["default"].scale(minThumbSize) / trackSize, Math.min(1, scrollbarThumbSizeRatioBase)) : 1;
setCSSVariable(scrollbarTrackRef.current, '--scrollbar-thumb-size-ratio', scrollbarThumbSizeRatio);
setCSSVariable(scrollbarTrackRef.current, '--scrollbar-thumb-progress-ratio', scrollbarThumbProgressRatio);
}
if (scrollbarHandle) {
scrollbarHandle.current = {
getContainerRef: getContainerRef,
showScrollbarTrack: showScrollbarTrack,
startHidingScrollbarTrack: startHidingScrollbarTrack,
update: update
};
}
return {
restProps: rest,
scrollbarProps: {
className: (0, _classnames["default"])(className, corner ? css.corner : null, css.scrollbar, vertical ? css.vertical : css.horizontal),
ref: scrollbarContainerRef
},
scrollbarTrackProps: {
ref: scrollbarTrackRef,
vertical: vertical
}
};
};
/**
* An unstyled scroll bar.
*
* @class Scrollbar
* @memberof ui/useScroll
* @ui
* @private
*/
var Scrollbar = exports.ScrollbarBase = exports.Scrollbar = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var _ref$corner = _ref.corner,
corner = _ref$corner === void 0 ? false : _ref$corner,
_ref$css = _ref.css,
css = _ref$css === void 0 ? _ScrollbarModule["default"] : _ref$css,
_ref$minThumbSize = _ref.minThumbSize,
minThumbSize = _ref$minThumbSize === void 0 ? 18 : _ref$minThumbSize,
_ref$vertical = _ref.vertical,
vertical = _ref$vertical === void 0 ? true : _ref$vertical,
rest = _objectWithoutProperties(_ref, _excluded2);
var props = _objectSpread({
corner: corner,
css: css,
minThumbSize: minThumbSize,
vertical: vertical
}, rest);
var _useScrollbar = useScrollbar(props),
restProps = _useScrollbar.restProps,
scrollbarProps = _useScrollbar.scrollbarProps,
scrollbarTrackProps = _useScrollbar.scrollbarTrackProps;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({}, restProps), scrollbarProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollbarTrack["default"], _objectSpread({}, scrollbarTrackProps))
}));
});
Scrollbar.displayName = 'ui:Scrollbar';
Scrollbar.propTypes = /** @lends ui/useScroll.Scrollbar.prototype */{
/**
* Client size of the container; valid values are an object that has `clientWidth` and `clientHeight`.
*
* @type {Object}
* @property {Number} clientHeight The client height of the list.
* @property {Number} clientWidth The client width of the list.
* @public
*/
clientSize: _propTypes["default"].shape({
clientHeight: _propTypes["default"].number.isRequired,
clientWidth: _propTypes["default"].number.isRequired
}),
/**
* Adds a corner between the vertical and horizontal scrollbars.
*
* @type {Boolean}
* @default false
* @public
*/
corner: _propTypes["default"].bool,
/**
* 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 scaled.
*
* @type {number}
* @public
*/
minThumbSize: _propTypes["default"].number,
/**
* If `true`, the scrollbar will be oriented vertically.
*
* @type {Boolean}
* @default true
* @public
*/
vertical: _propTypes["default"].bool
};
var _default = exports["default"] = Scrollbar;