react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
212 lines (196 loc) • 8.92 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PageHeaderMeta = exports.PageHeaderHeadingTitle = exports.PageHeaderHeading = exports.PageHeaderDetailLabel = exports.PageHeaderDetailItem = exports.PageHeaderDetailBody = exports.PageHeaderDetail = exports.PageHeader = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _excluded = ["children"],
_excluded2 = ["children"],
_excluded3 = ["children", "label"],
_excluded4 = ["children"],
_excluded5 = ["info", "rightActions"],
_excluded6 = ["variant", "className"];
/**
*
*/
var PageHeaderDetailBody = exports.PageHeaderDetailBody = function PageHeaderDetailBody(_ref) {
var children = _ref.children,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
return typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: "slds-truncate",
title: children
}, props), children) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
};
/**
*
*/
var PageHeaderDetailLabel = exports.PageHeaderDetailLabel = function PageHeaderDetailLabel(_ref2) {
var children = _ref2.children,
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
return typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: "slds-text-title slds-truncate",
title: children
}, props), children) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
};
/**
*
*/
var PageHeaderDetailItem = exports.PageHeaderDetailItem = function PageHeaderDetailItem(props) {
var children = props.children,
label = props.label,
pprops = (0, _objectWithoutProperties2["default"])(props, _excluded3);
var manuallyAssembled = !label;
return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({
className: "slds-page-header__detail-block"
}, pprops), !manuallyAssembled ? [/*#__PURE__*/_react["default"].createElement(PageHeaderDetailLabel, {
key: 0
}, label), /*#__PURE__*/_react["default"].createElement(PageHeaderDetailBody, {
key: 1
}, children)] : [children]);
};
/**
*
*/
var PageHeaderDetail = exports.PageHeaderDetail = function PageHeaderDetail(_ref3) {
var children = _ref3.children,
props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded4);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: "slds-page-header__row slds-page-header__row_gutters"
}, props), /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__col-details"
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: "slds-page-header__detail-row"
}, children)));
};
/**
*
*/
var PageHeaderHeadingTitle = exports.PageHeaderHeadingTitle = function PageHeaderHeadingTitle(props) {
var className = props.className,
children = props.children;
var titleClassNames = (0, _classnames["default"])(className, 'slds-page-header__title slds-truncate slds-align-middle');
return /*#__PURE__*/_react["default"].createElement("h1", (0, _extends2["default"])({}, props, {
className: titleClassNames
}), children);
};
/**
*
*/
/**
*
*/
var PageHeaderHeading = exports.PageHeaderHeading = function PageHeaderHeading(props) {
var leftActions = props.leftActions,
rightActions = props.rightActions,
title = props.title,
info = props.info,
breadCrumbs = props.breadCrumbs,
figure = props.figure,
legend = props.legend;
var infoPart = info ? /*#__PURE__*/_react["default"].createElement("p", {
className: "slds-page-header__name-meta"
}, info) : null;
var titlePart = typeof title === 'string' ? /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__name-title"
}, /*#__PURE__*/_react["default"].createElement("h1", null, legend && /*#__PURE__*/_react["default"].createElement("span", null, legend), /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-page-header__title slds-truncate",
title: title
}, title))) : /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__name-title"
}, /*#__PURE__*/_react["default"].createElement("h1", null, title));
var breadCrumbsPart = null;
if (breadCrumbs) {
breadCrumbsPart = /*#__PURE__*/_react["default"].createElement("nav", {
role: "navigation",
"aria-label": "Breadcrumbs"
}, /*#__PURE__*/_react["default"].createElement("ol", {
className: "slds-breadcrumb slds-list_horizontal slds-wrap"
}, breadCrumbs));
}
var mediaContent = /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-media__body"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__name"
}, titlePart, leftActions && /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__name-switcher slds-is-relative"
}, leftActions)), !breadCrumbs && infoPart);
var mediaObject = figure ? /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-media"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-media__figure"
}, /*#__PURE__*/_react["default"].cloneElement(figure, {
className: (0, _classnames["default"])(function () {
var props = figure.props;
var isPropsObject = (0, _typeof2["default"])(props) === 'object' && props !== null;
if (isPropsObject && 'className' in props && typeof props.className === 'string') {
return props.className;
} else {
return null;
}
}(), 'slds-page-header__icon'),
'aria-hidden': 'true'
})), mediaContent) : /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-media"
}, mediaContent);
return /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__row"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__col-title"
}, breadCrumbsPart, mediaObject), rightActions && /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__col-actions"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__controls"
}, Array.isArray(rightActions) ? rightActions.map(function (action, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "slds-page-header__control"
}, action);
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__control"
}, rightActions))));
};
/**
*
*/
var PageHeaderMeta = exports.PageHeaderMeta = function PageHeaderMeta(_ref4) {
var info = _ref4.info,
rightActions = _ref4.rightActions,
props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: "slds-page-header__row"
}, props), /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__col-meta"
}, info && /*#__PURE__*/_react["default"].createElement("p", {
className: "slds-page-header__meta-text"
}, info)), rightActions && /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__col-controls"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__controls"
}, Array.isArray(rightActions) ? rightActions.map(function (action, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "slds-page-header__control"
}, action);
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-page-header__control"
}, rightActions))));
};
/**
*
*/
var PageHeader = exports.PageHeader = function PageHeader(_ref5) {
var variant = _ref5.variant,
className = _ref5.className,
props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded6);
var pageHeaderClassNames = (0, _classnames["default"])('slds-page-header', variant ? "slds-page-header_".concat(variant) : null, className);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
className: pageHeaderClassNames,
role: "banner"
}, props), props.children);
};
//# sourceMappingURL=PageHeader.js.map