@wix/design-system
Version:
@wix/design-system
288 lines (286 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _HeaderSt = require("./Header.st.css.js");
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Breadcrumbs = _interopRequireDefault(require("../../../Breadcrumbs"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _Heading = _interopRequireDefault(require("../../../Heading"));
var _IconButton = _interopRequireDefault(require("../../../IconButton"));
var _constants = require("./constants");
var _Transition = _interopRequireDefault(require("../../../Transition"));
var _context = require("../../../WixStyleReactEnvironmentProvider/context");
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.default, {
items: [{
id: '1',
value: getTitle(title, minimized)
}],
activeId: "1",
size: "medium",
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin),
onClick: () => {},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
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.default, {
show: show,
enterAnimation: {
fadeIn: {
duration: 'medium01',
delay: 'short'
}
},
exitAnimation: {
fadeOut: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 7
}
}, content) : /*#__PURE__*/_react.default.createElement(_Transition.default, {
show: show,
enterAnimation: {
fadeIn: true
},
exitAnimation: {
fadeOut: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 7
}
}, content);
};
var {
breadcrumbs,
title,
hasBackgroundImage,
minimized,
skin
} = props;
this.state = {
themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized, skin)
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
var {
breadcrumbs,
title,
hasBackgroundImage,
minimized,
skin
} = this.props;
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 {
dataHook,
breadcrumbs,
onBackClicked,
title,
subtitle,
minimized,
skin,
actionsBar,
showBackButton,
hasBackgroundImage,
className,
backButtonAriaLabel
} = this.props;
var breadcrumbsExists = !!breadcrumbs;
var {
themedBreadcrumbs
} = this.state;
var _title = getTitle(title, minimized);
var isDark = isDarkTheme(hasBackgroundImage, minimized, skin);
var {
pageHeaderId
} = this.context;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.root, {}, className),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _HeaderSt.classes.header,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 11
}
}, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.breadcrumbsContainer, {
withoutBreadcrumbs: !breadcrumbsExists
}),
"data-hook": _constants.dataHooks.breadcrumbs,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}
}, themedBreadcrumbs))), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _HeaderSt.st)(_HeaderSt.classes.titleContainer, {
minimized
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 11
}
}, showBackButton && onBackClicked && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: (0, _HeaderSt.st)(_HeaderSt.classes.titleBackButton, {
darkTheme: isDark
}),
dataHook: _constants.dataHooks.backButton,
onClick: onBackClicked,
ariaLabel: backButtonAriaLabel,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeft, {
className: _HeaderSt.classes.titleBackButtonIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 19
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: _HeaderSt.classes.titleColumn,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 13
}
}, title && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_Heading.default, {
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: 235,
columnNumber: 19
}
}, _title)), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
ellipsis: typeof subtitle === 'string',
light: isDark,
secondary: !isDark,
maxLines: 2,
maxWidth: "288px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 21
}
}, 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: 266,
columnNumber: 11
}
}, typeof actionsBar === 'function' ? actionsBar({
minimized,
hasBackgroundImage,
skin
}) : actionsBar));
}
}
exports.default = Header;
Header.displayName = 'Page.Header';
Header.defaultProps = {
minimized: false
};
Header.contextType = _context.WixStyleReactEnvironmentContext;
//# sourceMappingURL=Header.js.map