wix-style-react/dist/src/BaseModalLayout/LayoutBlocks/Content/Content.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Content = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _ContentSt = require("./Content.st.css");

var _react = _interopRequireWildcard(require("react"));

var _Divider = _interopRequireDefault(require("../../../Divider"));

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

var _ScrollableContainer = _interopRequireWildcard(require("../../../common/ScrollableContainer"));

var _ScrollableContainerCommon = require("../../../common/PropTypes/ScrollableContainerCommon");

var _constants = require("../../constants");

var _BaseModalLayoutContext = require("../../BaseModalLayoutContext");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var Content = function Content(_ref) {
  var dataHook = _ref.dataHook,
      className = _ref.className,
      children = _ref.children,
      hideTopScrollDivider = _ref.hideTopScrollDivider,
      hideBottomScrollDivider = _ref.hideBottomScrollDivider,
      overflowY = _ref.overflowY,
      _ref$scrollProps = _ref.scrollProps,
      scrollProps = _ref$scrollProps === void 0 ? {} : _ref$scrollProps;

  var _useBaseModalLayoutCo = (0, _BaseModalLayoutContext.useBaseModalLayoutContext)(),
      contentClassName = _useBaseModalLayoutCo.contentClassName,
      _useBaseModalLayoutCo2 = _useBaseModalLayoutCo.content,
      content = _useBaseModalLayoutCo2 === void 0 ? children : _useBaseModalLayoutCo2;

  var _useState = (0, _react.useState)(_ScrollableContainer.AreaY.NONE),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      scrollAreaY = _useState2[0],
      setScrollAreaY = _useState2[1];

  var onScrollAreaChanged = scrollProps.onScrollAreaChanged;
  var hideContentDividers = hideTopScrollDivider && hideBottomScrollDivider;
  var handleScrollAreaChanged = (0, _react.useCallback)(function (_ref2) {
    var area = _ref2.area,
        target = _ref2.target;

    if (scrollAreaY !== area.y) {
      if (!hideContentDividers) {
        setScrollAreaY(area.y);
      }

      if (onScrollAreaChanged) {
        onScrollAreaChanged({
          area: area,
          target: target
        });
      }
    }
  }, [hideContentDividers, onScrollAreaChanged, scrollAreaY]);
  var isTopDividerHidden = (0, _react.useCallback)(function () {
    return hideTopScrollDivider || scrollAreaY === _ScrollableContainer.AreaY.TOP || scrollAreaY === _ScrollableContainer.AreaY.NONE;
  }, [hideTopScrollDivider, scrollAreaY]);
  var isBottomDividerHidden = (0, _react.useCallback)(function () {
    return hideBottomScrollDivider || scrollAreaY === _ScrollableContainer.AreaY.BOTTOM || scrollAreaY === _ScrollableContainer.AreaY.NONE;
  }, [hideBottomScrollDivider, scrollAreaY]);
  var registerToScrollAreaChanges = !hideContentDividers || !!onScrollAreaChanged;
  return content && /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": dataHook,
    "data-hidedividers": hideContentDividers,
    style: {
      overflowY: overflowY
    },
    className: (0, _ContentSt.st)(_ContentSt.classes.root, {
      hideTopDivider: isTopDividerHidden(),
      hideBottomDivider: isBottomDividerHidden()
    }, contentClassName, className)
  }, !hideTopScrollDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
    className: _ContentSt.classes.topDivider
  }), /*#__PURE__*/_react["default"].createElement(_ScrollableContainer["default"], {
    style: {
      overflowY: overflowY
    },
    dataHook: _constants.dataHooks.contentWrapper,
    className: _ContentSt.classes.innerContent,
    onScrollAreaChanged: registerToScrollAreaChanges && handleScrollAreaChanged || null
  }, content), !hideBottomScrollDivider && /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
    className: _ContentSt.classes.bottomDivider
  })) || null;
};

exports.Content = Content;
Content.displayName = 'BaseModalLayout.Content';
Content.propTypes = {
  /** additional css classes */
  className: _propTypes["default"].string,

  /** data hook for testing */
  dataHook: _propTypes["default"].string,

  /** the content you want to render in the modal, children passed directly will be treated as `content` as well */
  content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** whether to show divider above content (default: false)
   * when set to true - top divider is never shown
   * when set to false - shows top divider when scroll position is greater than 0
   */
  hideTopScrollDivider: _propTypes["default"].bool,

  /** whether to show divider below content (default: false)
   * when set to true - bottom divider is never shown
   * when set to false - shows bottom divider until content is scrolled to the boottom
   */
  hideBottomScrollDivider: _propTypes["default"].bool,

  /** Props related to the scrollable content.
   *
   * **onScrollAreaChanged** - A Handler for scroll area changes, will be triggered only when the user scrolls to a
   * different area of the scrollable content, see signature for possible areas
   * ##### Signature:
   * `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void`
   *
   * `AreaY`: top | middle | bottom | none
   *
   * `AreaX`: start | middle | end | none (not implemented yet)
   *
   * **onScrollAreaChanged** - A Generic Handler for scroll changes with throttling (100ms)
   * ##### Signature:
   * `function({target: HTMLElement}) => void`
   * */
  scrollProps: _propTypes["default"].shape(_ScrollableContainerCommon.ScrollableContainerCommonProps),

  /**
   * Sets overflow-y value
   * @default auto
   * */
  overflowY: _propTypes["default"].string
};
Content.defaultProps = {
  overflowY: 'auto',
  hideTopScrollDivider: false,
  hideBottomScrollDivider: false
};