@wix/design-system
Version:
@wix/design-system
298 lines (296 loc) • 11.2 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PageHeader = void 0;
var _HeaderSt = require("./Header.st.css.js");
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Breadcrumbs = require("../../../Breadcrumbs");
var _Text = require("../../../Text");
var _Heading = require("../../../Heading");
var _CloseButton = require("../../../CloseButton");
var _constants = require("./constants");
var _Transition = require("../../../Transition");
var _context = require("../../../WixStyleReactEnvironmentProvider/context");
var _IconThemeContext = require("../../../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Page/components/Header/Header.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var isDarkTheme = (hasBackgroundImage, minimized, skin) => {
switch (skin) {
case 'light':
return false;
case 'dark':
return true;
default:
return hasBackgroundImage && !minimized;
}
};
var getBreadcrumbsTheme = (hasBackgroundImage, minimized, skin) => isDarkTheme(hasBackgroundImage, minimized, skin) ? 'onDarkBackground' : 'onGrayBackground';
var getTitle = (title, minimized) => typeof title === 'function' ? title(minimized) : title;
var generateDefaultBreadcrumbs = (title, hasBackgroundImage, minimized, skin) => /*#__PURE__*/_react.default.createElement(_Breadcrumbs.Breadcrumbs, {
items: [{
id: '1',
value: getTitle(title, minimized)
}],
activeId: "1",
size: "medium",
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin),
onClick: () => {},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 3
}
});
var getBreadcrumbs = (breadcrumbs, minimized) => typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
var generateThemedBreadcrumbs = (breadcrumbs, title, hasBackgroundImage, minimized, skin) => {
if (breadcrumbs) {
// @ts-expect-error
return /*#__PURE__*/_react.default.cloneElement(getBreadcrumbs(breadcrumbs, minimized), {
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin)
});
}
return generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized);
};
/**
* A header that sticks at the top of the container which minimizes on scroll
*/
class Header extends _react.PureComponent {
constructor(props) {
super(props);
this.context = void 0;
this._animateComponent = (show, useEnterDelay, content) => {
if (show) {
return content;
}
return useEnterDelay ? /*#__PURE__*/_react.default.createElement(_Transition.Transition, {
show: show,
enterAnimation: {
fadeIn: {
duration: 'medium01',
delay: 'short'
}
},
exitAnimation: {
fadeOut: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 7
}
}, content) : /*#__PURE__*/_react.default.createElement(_Transition.Transition, {
show: show,
enterAnimation: {
fadeIn: true
},
exitAnimation: {
fadeOut: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 7
}
}, content);
};
var breadcrumbs = props.breadcrumbs,
title = props.title,
hasBackgroundImage = props.hasBackgroundImage,
minimized = props.minimized,
skin = props.skin;
this.state = {
themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized, skin)
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
var _this$props = this.props,
breadcrumbs = _this$props.breadcrumbs,
title = _this$props.title,
hasBackgroundImage = _this$props.hasBackgroundImage,
minimized = _this$props.minimized,
skin = _this$props.skin;
var newBreadcrumbs = nextProps.breadcrumbs;
var newTitle = nextProps.title;
var newHasBackgroundImage = nextProps.hasBackgroundImage;
var newMinimized = nextProps.minimized;
var newSkin = nextProps.skin;
if (breadcrumbs !== newBreadcrumbs || title !== newTitle || hasBackgroundImage !== newHasBackgroundImage || minimized !== newMinimized || skin !== newSkin) {
var themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized, skin);
this.setState({
themedBreadcrumbs
});
}
}
render() {
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
breadcrumbs = _this$props2.breadcrumbs,
onBackClicked = _this$props2.onBackClicked,
title = _this$props2.title,
subtitle = _this$props2.subtitle,
minimized = _this$props2.minimized,
skin = _this$props2.skin,
actionsBar = _this$props2.actionsBar,
showBackButton = _this$props2.showBackButton,
hasBackgroundImage = _this$props2.hasBackgroundImage,
className = _this$props2.className,
backButtonAriaLabel = _this$props2.backButtonAriaLabel;
var breadcrumbsExists = !!breadcrumbs;
var themedBreadcrumbs = this.state.themedBreadcrumbs;
var _title = getTitle(title, minimized);
var isDark = isDarkTheme(hasBackgroundImage, minimized, skin);
var pageHeaderId = this.context.pageHeaderId;
var hasBackButton = !!showBackButton && !!onBackClicked;
var titleHidden = minimized && breadcrumbsExists;
var titleMinimised = minimized && !breadcrumbsExists;
var backButtonIcon = onBackClicked && /*#__PURE__*/_react.default.createElement(_IconThemeContext.IconThemeContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 7
}
}, _ref => {
var _icons$PageHeader;
var icons = _ref.icons;
var BackIcon = ((_icons$PageHeader = icons.PageHeader) == null ? void 0 : _icons$PageHeader.ChevronLeftSmall) || _wixUiIconsCommon.ChevronLeftSmall;
return /*#__PURE__*/_react.default.createElement(_CloseButton.CloseButton, {
className: _HeaderSt.classes.backButton,
skin: "standardFilled",
dataHook: _constants.dataHooks.backButton,
onClick: onBackClicked,
"aria-label": backButtonAriaLabel,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(BackIcon, {
className: _HeaderSt.classes.backButtonIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 15
}
}));
});
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.root, {}, className),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _HeaderSt.classes.header,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 11
}
}, breadcrumbsExists && /*#__PURE__*/_react.default.createElement("div", {
className: _HeaderSt.classes.breadcrumbsContainer,
"data-hook": _constants.dataHooks.breadcrumbs,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 15
}
}, themedBreadcrumbs)), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.titleContainer, {
hidden: titleHidden,
minimised: titleMinimised
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.titleRow, {
withBackButton: hasBackButton
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 13
}
}, hasBackButton && this._animateComponent(!titleHidden, !breadcrumbsExists, backButtonIcon), title && this._animateComponent(!titleHidden, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
size: "extraLarge",
className: (0, _HeaderSt.st)(_HeaderSt.classes.title),
dataHook: _constants.dataHooks.title,
ellipsis: typeof _title === 'string',
light: isDark,
id: pageHeaderId,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 19
}
}, _title))), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.subtitle,
className: (0, _HeaderSt.st)(_HeaderSt.classes.subtitleWrapper),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
className: (0, _HeaderSt.st)(_HeaderSt.classes.subtitle),
ellipsis: typeof subtitle === 'string',
light: isDark,
secondary: !isDark,
maxLines: 2,
maxWidth: "288px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 19
}
}, subtitle))))), actionsBar && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.actionsBar, {
minimized,
withBreadcrumbs: breadcrumbsExists
}),
"data-hook": _constants.dataHooks.actionBar,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 11
}
}, typeof actionsBar === 'function' ? actionsBar({
minimized,
hasBackgroundImage,
skin
}) : actionsBar));
}
}
exports.PageHeader = Header;
Header.displayName = 'Page.Header';
Header.defaultProps = {
minimized: false
};
Header.contextType = _context.WixStyleReactEnvironmentContext;
//# sourceMappingURL=Header.js.map