"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Scroller = exports["default"] = void 0;

var _jsxRuntime = require("react/jsx-runtime");

var _I18nDecorator = require("@enact/i18n/I18nDecorator");

var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));

var _Resizable = require("@enact/ui/Resizable");

var _Scroller = require("@enact/ui/Scroller");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _useScroll2 = _interopRequireDefault(require("../useScroll"));

var _Scrollbar = _interopRequireDefault(require("../useScroll/Scrollbar"));

var _Skinnable = _interopRequireDefault(require("../Skinnable"));

var _useThemeScroller = _interopRequireDefault(require("./useThemeScroller"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var nop = function nop() {};
/**
 * An Agate-styled Scroller, useScroll applied.
 *
 * Usage:
 * ```
 * <Scroller>Scroll me.</Scroller>
 * ```
 *
 * @class Scroller
 * @memberof agate/Scroller
 * @extends ui/Scroller.ScrollerBasic
 * @ui
 * @public
 */


var Scroller = function Scroller(props) {
  // Hooks
  var _useScroll = (0, _useScroll2["default"])(props),
      ScrollContentWrapper = _useScroll.scrollContentWrapper,
      scrollContentHandle = _useScroll.scrollContentHandle,
      isHorizontalScrollbarVisible = _useScroll.isHorizontalScrollbarVisible,
      isVerticalScrollbarVisible = _useScroll.isVerticalScrollbarVisible,
      resizeContextProps = _useScroll.resizeContextProps,
      scrollContainerProps = _useScroll.scrollContainerProps,
      scrollInnerContainerProps = _useScroll.scrollInnerContainerProps,
      scrollContentWrapperProps = _useScroll.scrollContentWrapperProps,
      scrollContentProps = _useScroll.scrollContentProps,
      verticalScrollbarProps = _useScroll.verticalScrollbarProps,
      horizontalScrollbarProps = _useScroll.horizontalScrollbarProps;

  var themeScrollContentProps = (0, _useThemeScroller["default"])(scrollContentProps); // Render

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext.Provider, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, scrollContainerProps), {}, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, scrollInnerContainerProps), {}, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollContentWrapper, _objectSpread(_objectSpread({}, scrollContentWrapperProps), {}, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scroller.ScrollerBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
            ref: scrollContentHandle
          }))
        })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null]
      })), isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null]
    }))
  }));
};

exports.Scroller = Scroller;
Scroller.displayName = 'Scroller';
Scroller.propTypes =
/** @lends agate/Scroller.Scroller.prototype */
{
  /**
   * A callback function that receives a reference to the `scrollTo` feature.
   *
   * Once received, the `scrollTo` method can be called as an imperative interface.
   *
   * - {position: {x, y}} - Pixel value for x and/or y position
   * - {align} - Where the scroll area should be aligned. Values are:
   *   `'left'`, `'right'`, `'top'`, `'bottom'`,
   *   `'topleft'`, `'topright'`, `'bottomleft'`, and `'bottomright'`.
   * - {node} - Node to scroll into view
   * - {animate} - When `true`, scroll occurs with animation. When `false`, no
   *   animation occurs.
   * - {focus} - When `true`, attempts to focus item after scroll. Only valid when scrolling
   *   by `node`.
   * > Note: Only specify one of: `position`, `align`, `node`
   *
   * Example:
   * ```
   *	// If you set cbScrollTo prop like below;
   *	cbScrollTo: (fn) => {this.scrollTo = fn;}
   *	// You can simply call like below;
   *	this.scrollTo({align: 'top'}); // scroll to the top
   * ```
   *
   * @type {Function}
   * @public
   */
  cbScrollTo: _propTypes["default"].func,

  /**
   * This is set to `true` by SpotlightContainerDecorator
   *
   * @type {Boolean}
   * @private
   */
  'data-spotlight-container': _propTypes["default"].bool,

  /**
   * `false` if the content of the scroller could get focus
   *
   * @type {Boolean}
   * @default false
   * @private
   */
  'data-spotlight-container-disabled': _propTypes["default"].bool,

  /**
   * This is passed onto the wrapped component to allow
   * it to customize the spotlight container for its use case.
   *
   * @type {String}
   * @private
   */
  'data-spotlight-id': _propTypes["default"].string,

  /**
   * Direction of the scroller.
   *
   * Valid values are:
   * * `'both'`,
   * * `'horizontal'`, and
   * * `'vertical'`.
   *
   * @type {String}
   * @default 'both'
   * @public
   */
  direction: _propTypes["default"].oneOf(['both', 'horizontal', 'vertical']),

  /**
   * Allows 5-way navigation to the scrollbar controls. By default, 5-way will
   * not move focus to the scrollbar controls.
   *
   * @type {Boolean}
   * @default false
   * @public
   */
  focusableScrollbar: _propTypes["default"].bool,

  /**
   * Specifies how to show horizontal scrollbar.
   *
   * Valid values are:
   * * `'auto'`,
   * * `'visible'`, and
   * * `'hidden'`.
   *
   * @type {String}
   * @default 'auto'
   * @public
   */
  horizontalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden']),

  /**
   * Unique identifier for the component.
   *
   * When defined and when the `Scroller` is within a [Panel]{@link agate/Panels.Panel}, the
   * `Scroller` will store its scroll position and restore that position when returning to the
   * `Panel`.
   *
   * @type {String}
   * @public
   */
  id: _propTypes["default"].string,

  /**
   * Prevents scroll by wheeling on the scroller.
   *
   * @type {Boolean}
   * @default false
   * @private
   */
  noScrollByWheel: _propTypes["default"].bool,

  /**
   * Called when scrolling.
   *
   * Passes `scrollLeft`, `scrollTop`.
   * It is not recommended to set this prop since it can cause performance degradation.
   * Use `onScrollStart` or `onScrollStop` instead.
   *
   * @type {Function}
   * @param {Object} event
   * @param {Number} event.scrollLeft Scroll left value.
   * @param {Number} event.scrollTop Scroll top value.
   * @public
   */
  onScroll: _propTypes["default"].func,

  /**
   * Called when scroll starts.
   *
   * Passes `scrollLeft` and `scrollTop`.
   *
   * Example:
   * ```
   * onScrollStart = ({scrollLeft, scrollTop}) => {
   *     // do something with scrollLeft and scrollTop
   * }
   *
   * render = () => (
   *     <Scroller
   *         ...
   *         onScrollStart={this.onScrollStart}
   *         ...
   *     />
   * )
   * ```
   *
   * @type {Function}
   * @param {Object} event
   * @param {Number} event.scrollLeft Scroll left value.
   * @param {Number} event.scrollTop Scroll top value.
   * @public
   */
  onScrollStart: _propTypes["default"].func,

  /**
   * Called when scroll stops.
   *
   * Passes `scrollLeft` and `scrollTop`.
   *
   * Example:
   * ```
   * onScrollStop = ({scrollLeft, scrollTop}) => {
   *     // do something with scrollLeft and scrollTop
   * }
   *
   * render = () => (
   *     <Scroller
   *         ...
   *         onScrollStop={this.onScrollStop}
   *         ...
   *     />
   * )
   * ```
   *
   * @type {Function}
   * @param {Object} event
   * @param {Number} event.scrollLeft Scroll left value.
   * @param {Number} event.scrollTop Scroll top value.
   * @public
   */
  onScrollStop: _propTypes["default"].func,

  /**
   * Specifies preventing keydown events from bubbling up to applications.
   * Valid values are `'none'`, and `'programmatic'`.
   *
   * When it is `'none'`, every keydown event is bubbled.
   * When it is `'programmatic'`, an event bubbling is not allowed for a keydown input
   * which invokes programmatic spotlight moving.
   *
   * @type {String}
   * @default 'none'
   * @private
   */
  preventBubblingOnKeyDown: _propTypes["default"].oneOf(['none', 'programmatic']),

  /**
   * Sets the hint string read when focusing the next button in the vertical scroll bar.
   *
   * @type {String}
   * @default $L('scroll down')
   * @public
   */
  scrollDownAriaLabel: _propTypes["default"].string,

  /**
   * Sets the hint string read when focusing the previous button in the horizontal scroll bar.
   *
   * @type {String}
   * @default $L('scroll left')
   * @public
   */
  scrollLeftAriaLabel: _propTypes["default"].string,

  /**
   * Specifies how to scroll.
   *
   * Valid values are:
   * * `'translate'`,
   * * `'native'`.
   *
   * @type {('native'|'translate')}
   * @default 'translate'
   * @public
   */
  scrollMode: _propTypes["default"].oneOf(['native', 'translate']),

  /**
   * Sets the hint string read when focusing the next button in the horizontal scroll bar.
   *
   * @type {String}
   * @default $L('scroll right')
   * @public
   */
  scrollRightAriaLabel: _propTypes["default"].string,

  /**
   * Sets the hint string read when focusing the previous button in the vertical scroll bar.
   *
   * @type {String}
   * @default $L('scroll up')
   * @public
   */
  scrollUpAriaLabel: _propTypes["default"].string,

  /**
   * Specifies how to show vertical scrollbar.
   *
   * Valid values are:
   * * `'auto'`,
   * * `'visible'`, and
   * * `'hidden'`.
   *
   * @type {String}
   * @default 'auto'
   * @public
   */
  verticalScrollbar: _propTypes["default"].oneOf(['auto', 'visible', 'hidden'])
};
exports.Scroller = Scroller = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
  overflow: true,
  preserveId: true,
  restrict: 'self-first'
}, (0, _I18nDecorator.I18nContextDecorator)({
  rtlProp: 'rtl'
}, Scroller)));
Scroller.defaultProps = {
  'data-spotlight-container-disabled': false,
  cbScrollTo: nop,
  direction: 'both',
  focusableScrollbar: false,
  horizontalScrollbar: 'auto',
  noScrollByWheel: false,
  onScroll: nop,
  onScrollStart: nop,
  onScrollStop: nop,
  preventBubblingOnKeyDown: 'none',
  scrollMode: 'translate',
  verticalScrollbar: 'auto'
};
var _default = Scroller;
exports["default"] = _default;