@helpscout/hsds-react/components/SidePanel/SidePanel.layouts.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.HeaderAndFooter = HeaderAndFooter;

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

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

var _Button = _interopRequireDefault(require("../Button/"));

var _SidePanelLayouts = require("./SidePanel.layouts.css");

var _useScrollShadow2 = _interopRequireDefault(require("../../hooks/useScrollShadow"));

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

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; }

/* istanbul ignore file */
function noop() {}

function HeaderAndFooter(_ref) {
  var children = _ref.children,
      _ref$mainActionButton = _ref.mainActionButtonContent,
      mainActionButtonContent = _ref$mainActionButton === void 0 ? 'Start' : _ref$mainActionButton,
      _ref$mainActionDisabl = _ref.mainActionDisabled,
      mainActionDisabled = _ref$mainActionDisabl === void 0 ? false : _ref$mainActionDisabl,
      _ref$mainActionNode = _ref.mainActionNode,
      mainActionNode = _ref$mainActionNode === void 0 ? noop : _ref$mainActionNode,
      _ref$onMainActionClic = _ref.onMainActionClick,
      onMainActionClick = _ref$onMainActionClic === void 0 ? noop : _ref$onMainActionClic,
      _ref$panelHeading = _ref.panelHeading,
      panelHeading = _ref$panelHeading === void 0 ? 'Review and Start' : _ref$panelHeading,
      _ref$panelHeadingId = _ref.panelHeadingId,
      panelHeadingId = _ref$panelHeadingId === void 0 ? '' : _ref$panelHeadingId,
      _ref$panelSubHeading = _ref.panelSubHeading,
      panelSubHeading = _ref$panelSubHeading === void 0 ? 'Complete the required details before going live' : _ref$panelSubHeading;
  var headerRef = (0, _react.useRef)(null);
  var bodyRef = (0, _react.useRef)(null);
  var footerRef = (0, _react.useRef)(null);

  var _useScrollShadow = (0, _useScrollShadow2.default)({
    bottomRef: footerRef,
    scrollableRef: bodyRef,
    topRef: headerRef,
    shadows: {
      initial: 'none'
    },
    drawInitialShadowsDelay: 300
  }),
      handleOnScroll = _useScrollShadow[0];

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SidePanelLayouts.HeaderUI, {
      className: "SidePanel__Header",
      ref: headerRef,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        id: panelHeadingId,
        className: "SidePanel__Heading",
        children: panelHeading
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "SidePanel__Subheading",
        children: panelSubHeading
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanelLayouts.BodyUI, {
      className: "SidePanel__Body",
      ref: bodyRef,
      onScroll: handleOnScroll,
      children: children
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SidePanelLayouts.FooterUI, {
      className: "SidePanel__Footer",
      ref: footerRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        size: "xxl",
        theme: "blue",
        className: "SidePanel__MainAction",
        disabled: mainActionDisabled,
        onClick: onMainActionClick,
        ref: mainActionNode,
        children: mainActionButtonContent
      })
    })]
  });
}

HeaderAndFooter.propTypes = {
  /** If the default footer is present, this is the label text for the button */
  mainActionButtonContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),

  /** If the default footer is present, this disables the button */
  mainActionDisabled: _propTypes.default.bool,

  /** Retrieve the Main Action button node */
  mainActionNode: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

  /** If the default Header included, this is the Heading */
  panelHeading: _propTypes.default.string,

  /** ID for the H1, make sure it matches the ariaLabelledBy from the SidePanel */
  panelHeadingId: _propTypes.default.string,

  /** If the default Header included, this is the Subheading */
  panelSubHeading: _propTypes.default.string,

  /** If the default footer is present, this is the callback for the button */
  onMainActionClick: _propTypes.default.func
};