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

wix-style-react

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { st, classes } from './Content.st.css';
import React, { useState, useCallback } from 'react';
import Divider from '../../../Divider';
import PropTypes from 'prop-types';
import ScrollableContainer, { AreaY } from '../../../common/ScrollableContainer';
import { ScrollableContainerCommonProps } from '../../../common/PropTypes/ScrollableContainerCommon';
import { dataHooks } from '../../constants';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
export 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 = useBaseModalLayoutContext(),
      contentClassName = _useBaseModalLayoutCo.contentClassName,
      _useBaseModalLayoutCo2 = _useBaseModalLayoutCo.content,
      content = _useBaseModalLayoutCo2 === void 0 ? children : _useBaseModalLayoutCo2;

  var _useState = useState(AreaY.NONE),
      _useState2 = _slicedToArray(_useState, 2),
      scrollAreaY = _useState2[0],
      setScrollAreaY = _useState2[1];

  var onScrollAreaChanged = scrollProps.onScrollAreaChanged;
  var hideContentDividers = hideTopScrollDivider && hideBottomScrollDivider;
  var handleScrollAreaChanged = 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 = useCallback(function () {
    return hideTopScrollDivider || scrollAreaY === AreaY.TOP || scrollAreaY === AreaY.NONE;
  }, [hideTopScrollDivider, scrollAreaY]);
  var isBottomDividerHidden = useCallback(function () {
    return hideBottomScrollDivider || scrollAreaY === AreaY.BOTTOM || scrollAreaY === AreaY.NONE;
  }, [hideBottomScrollDivider, scrollAreaY]);
  var registerToScrollAreaChanges = !hideContentDividers || !!onScrollAreaChanged;
  return content && /*#__PURE__*/React.createElement("div", {
    "data-hook": dataHook,
    "data-hidedividers": hideContentDividers,
    style: {
      overflowY: overflowY
    },
    className: st(classes.root, {
      hideTopDivider: isTopDividerHidden(),
      hideBottomDivider: isBottomDividerHidden()
    }, contentClassName, className)
  }, !hideTopScrollDivider && /*#__PURE__*/React.createElement(Divider, {
    className: classes.topDivider
  }), /*#__PURE__*/React.createElement(ScrollableContainer, {
    style: {
      overflowY: overflowY
    },
    dataHook: dataHooks.contentWrapper,
    className: classes.innerContent,
    onScrollAreaChanged: registerToScrollAreaChanges && handleScrollAreaChanged || null
  }, content), !hideBottomScrollDivider && /*#__PURE__*/React.createElement(Divider, {
    className: classes.bottomDivider
  })) || null;
};
Content.displayName = 'BaseModalLayout.Content';
Content.propTypes = {
  /** additional css classes */
  className: PropTypes.string,

  /** data hook for testing */
  dataHook: PropTypes.string,

  /** the content you want to render in the modal, children passed directly will be treated as `content` as well */
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.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.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.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.shape(ScrollableContainerCommonProps),

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