@procore/core-react/dist/PageTemplate/PageHeaderTemplate/PageHeaderTemplate.js

React library of Procore Design Guidelines

var _excluded = ["children"],
  _excluded2 = ["actions", "banner", "beforeTitleZone", "breadcrumbs", "children", "heading", "pills", "subheading", "tabs", "toggleAction"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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; }
import React from 'react';
import { Box } from '../../Box';
import { H1 } from '../../Semantic';
import { Title } from '../../Title';
import { Typography } from '../../Typography';
import { spacing } from '../../_styles/spacing';
import { StyledActions, StyledPageHeader, StyledToggleActionBox } from './PageHeaderTemplate.styles';
import { usePageHeaderTemplateLayout } from './PageHeaderTemplate.utils';
var PageHeaderTemplateActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    boxProps = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(StyledActions, _extends({}, boxProps, {
    display: "flex",
    gap: "sm",
    ref: ref
  }), children);
});
export var PageHeaderTemplate = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var actions = _ref2.actions,
    banner = _ref2.banner,
    beforeTitleZone = _ref2.beforeTitleZone,
    breadcrumbs = _ref2.breadcrumbs,
    children = _ref2.children,
    heading = _ref2.heading,
    pills = _ref2.pills,
    subheading = _ref2.subheading,
    tabs = _ref2.tabs,
    toggleAction = _ref2.toggleAction,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var _usePageHeaderTemplat = usePageHeaderTemplateLayout(),
    headerRef = _usePageHeaderTemplat.headerRef,
    breadcrumbsWrapperRef = _usePageHeaderTemplat.breadcrumbsWrapperRef,
    breadcrumbsRef = _usePageHeaderTemplat.breadcrumbsRef,
    actionsRef = _usePageHeaderTemplat.actionsRef,
    headingRef = _usePageHeaderTemplat.headingRef,
    actionsPosition = _usePageHeaderTemplat.actionsPosition;
  var flexWrap = React.useMemo(function () {
    if (actionsPosition === 'bottom') {
      return 'wrap';
    }
    return 'nowrap';
  }, [actionsPosition, breadcrumbs]);
  var hasBottomRow = Boolean(tabs || toggleAction);
  return /*#__PURE__*/React.createElement(React.Suspense, {
    fallback: null
  }, /*#__PURE__*/React.createElement(StyledPageHeader, _extends({
    ref: ref,
    "data-core-react": "page-header-template",
    $hasPaddingBottom: !hasBottomRow
  }, props), /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    flexDirection: "column",
    gap: "md"
  }, banner, /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: breadcrumbs ? 'column' : 'row',
    gap: breadcrumbs ? undefined : 'md',
    flexWrap: flexWrap,
    ref: headerRef
  }, breadcrumbs && /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    justifyContent: "space-between",
    gap: "lg",
    flexWrap: "wrap",
    ref: breadcrumbsWrapperRef,
    style: {
      minHeight: spacing.xl
    }
  }, /*#__PURE__*/React.createElement(Box, {
    marginBottom: "md",
    ref: breadcrumbsRef
  }, breadcrumbs), actionsPosition === 'top' && /*#__PURE__*/React.createElement(PageHeaderTemplateActions, {
    ref: actionsRef
  }, actions)), /*#__PURE__*/React.createElement(Title, {
    ref: headingRef
  }, beforeTitleZone && /*#__PURE__*/React.createElement(Title.Assets, null, beforeTitleZone), heading && /*#__PURE__*/React.createElement(Title.Text, null, /*#__PURE__*/React.createElement(H1, null, heading)), pills && /*#__PURE__*/React.createElement(Title.Pills, null, pills), subheading && /*#__PURE__*/React.createElement(Title.Subtext, null, /*#__PURE__*/React.createElement(Typography, {
    color: "gray45"
  }, subheading))), (!breadcrumbs || actionsPosition === 'bottom') && /*#__PURE__*/React.createElement(PageHeaderTemplateActions, {
    ref: actionsRef,
    flexWrap: flexWrap,
    marginTop: breadcrumbs && actionsPosition === 'bottom' ? 'md' : undefined
  }, actions)), hasBottomRow && /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    gap: "xs",
    alignItems: "flex-end",
    justifyContent: tabs ? 'space-between' : 'flex-end'
  }, tabs, toggleAction && /*#__PURE__*/React.createElement(StyledToggleActionBox, null, toggleAction)))));
});
//# sourceMappingURL=PageHeaderTemplate.js.map