react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
206 lines (190 loc) • 7.4 kB
JavaScript
import _typeof from "@babel/runtime/helpers/typeof";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children"],
_excluded2 = ["children"],
_excluded3 = ["children", "label"],
_excluded4 = ["children"],
_excluded5 = ["info", "rightActions"],
_excluded6 = ["variant", "className"];
import React from 'react';
import classNames from 'classnames';
/**
*
*/
export var PageHeaderDetailBody = function PageHeaderDetailBody(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, _excluded);
return typeof children === 'string' ? /*#__PURE__*/React.createElement("div", _extends({
className: "slds-truncate",
title: children
}, props), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
};
/**
*
*/
export var PageHeaderDetailLabel = function PageHeaderDetailLabel(_ref2) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, _excluded2);
return typeof children === 'string' ? /*#__PURE__*/React.createElement("div", _extends({
className: "slds-text-title slds-truncate",
title: children
}, props), children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
};
/**
*
*/
export var PageHeaderDetailItem = function PageHeaderDetailItem(props) {
var children = props.children,
label = props.label,
pprops = _objectWithoutProperties(props, _excluded3);
var manuallyAssembled = !label;
return /*#__PURE__*/React.createElement("li", _extends({
className: "slds-page-header__detail-block"
}, pprops), !manuallyAssembled ? [/*#__PURE__*/React.createElement(PageHeaderDetailLabel, {
key: 0
}, label), /*#__PURE__*/React.createElement(PageHeaderDetailBody, {
key: 1
}, children)] : [children]);
};
/**
*
*/
export var PageHeaderDetail = function PageHeaderDetail(_ref3) {
var children = _ref3.children,
props = _objectWithoutProperties(_ref3, _excluded4);
return /*#__PURE__*/React.createElement("div", _extends({
className: "slds-page-header__row slds-page-header__row_gutters"
}, props), /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__col-details"
}, /*#__PURE__*/React.createElement("ul", {
className: "slds-page-header__detail-row"
}, children)));
};
/**
*
*/
export var PageHeaderHeadingTitle = function PageHeaderHeadingTitle(props) {
var className = props.className,
children = props.children;
var titleClassNames = classNames(className, 'slds-page-header__title slds-truncate slds-align-middle');
return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
className: titleClassNames
}), children);
};
/**
*
*/
/**
*
*/
export var 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.createElement("p", {
className: "slds-page-header__name-meta"
}, info) : null;
var titlePart = typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__name-title"
}, /*#__PURE__*/React.createElement("h1", null, legend && /*#__PURE__*/React.createElement("span", null, legend), /*#__PURE__*/React.createElement("span", {
className: "slds-page-header__title slds-truncate",
title: title
}, title))) : /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__name-title"
}, /*#__PURE__*/React.createElement("h1", null, title));
var breadCrumbsPart = null;
if (breadCrumbs) {
breadCrumbsPart = /*#__PURE__*/React.createElement("nav", {
role: "navigation",
"aria-label": "Breadcrumbs"
}, /*#__PURE__*/React.createElement("ol", {
className: "slds-breadcrumb slds-list_horizontal slds-wrap"
}, breadCrumbs));
}
var mediaContent = /*#__PURE__*/React.createElement("div", {
className: "slds-media__body"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__name"
}, titlePart, leftActions && /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__name-switcher slds-is-relative"
}, leftActions)), !breadCrumbs && infoPart);
var mediaObject = figure ? /*#__PURE__*/React.createElement("div", {
className: "slds-media"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-media__figure"
}, /*#__PURE__*/React.cloneElement(figure, {
className: classNames(function () {
var props = figure.props;
var isPropsObject = _typeof(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.createElement("div", {
className: "slds-media"
}, mediaContent);
return /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__row"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__col-title"
}, breadCrumbsPart, mediaObject), rightActions && /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__col-actions"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__controls"
}, Array.isArray(rightActions) ? rightActions.map(function (action, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: "slds-page-header__control"
}, action);
}) : /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__control"
}, rightActions))));
};
/**
*
*/
export var PageHeaderMeta = function PageHeaderMeta(_ref4) {
var info = _ref4.info,
rightActions = _ref4.rightActions,
props = _objectWithoutProperties(_ref4, _excluded5);
return /*#__PURE__*/React.createElement("div", _extends({
className: "slds-page-header__row"
}, props), /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__col-meta"
}, info && /*#__PURE__*/React.createElement("p", {
className: "slds-page-header__meta-text"
}, info)), rightActions && /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__col-controls"
}, /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__controls"
}, Array.isArray(rightActions) ? rightActions.map(function (action, index) {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: "slds-page-header__control"
}, action);
}) : /*#__PURE__*/React.createElement("div", {
className: "slds-page-header__control"
}, rightActions))));
};
/**
*
*/
export var PageHeader = function PageHeader(_ref5) {
var variant = _ref5.variant,
className = _ref5.className,
props = _objectWithoutProperties(_ref5, _excluded6);
var pageHeaderClassNames = classNames('slds-page-header', variant ? "slds-page-header_".concat(variant) : null, className);
return /*#__PURE__*/React.createElement("div", _extends({
className: pageHeaderClassNames,
role: "banner"
}, props), props.children);
};
//# sourceMappingURL=PageHeader.js.map