wix-style-react
Version:
wix-style-react
329 lines (327 loc) • 11.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _PageHeaderSt = require("./PageHeader.st.css");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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("../WixStyleReactProvider/context");
var _context2 = require("../WixStyleReactEnvironmentProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/PageHeader/PageHeader.js";
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: 39,
columnNumber: 3
}
});
var getBreadcrumbs = (breadcrumbs, minimized) => typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
var generateThemedBreadcrumbs = (breadcrumbs, title, hasBackgroundImage, minimized, skin) => {
if (breadcrumbs) {
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 PageHeader extends _react.default.PureComponent {
constructor(props) {
super(props);
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: 119,
columnNumber: 7
}
}, content) : /*#__PURE__*/_react.default.createElement(_Transition.default, {
show: show,
enterAnimation: {
fadeIn: true
},
exitAnimation: {
fadeOut: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
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
} = 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(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.root, {}, className),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _PageHeaderSt.classes.header,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 15
}
}, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.breadcrumbsContainer, {
withoutBreadcrumbs: !breadcrumbsExists
}),
"data-hook": _constants.dataHooks.breadcrumbs,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 19
}
}, themedBreadcrumbs))), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.titleContainer, {
minimized
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 15
}
}, showBackButton && onBackClicked && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.titleBackButton, {
darkTheme: isDark,
newColorsBranding
}),
dataHook: _constants.dataHooks.backButton,
onClick: onBackClicked,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 21
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeft, {
className: _PageHeaderSt.classes.titleBackButtonIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 23
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: _PageHeaderSt.classes.titleColumn,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 17
}
}, title && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement(_Heading.default, {
size: "extraLarge",
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.title, {
newColorsBranding
}),
dataHook: _constants.dataHooks.title,
ellipsis: typeof _title === 'string',
light: isDark,
id: pageHeaderId,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 23
}
}, _title)), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 23
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
ellipsis: typeof subtitle === 'string',
light: isDark,
secondary: !isDark,
maxLines: 2,
maxWidth: "288px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 25
}
}, subtitle)))))), actionsBar && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.actionsBar, {
minimized,
withBreadcrumbs: breadcrumbsExists
}),
"data-hook": _constants.dataHooks.actionBar,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 15
}
}, typeof actionsBar === 'function' ? actionsBar({
minimized,
hasBackgroundImage,
skin
}) : actionsBar));
});
}
}
exports.default = PageHeader;
PageHeader.contextType = _context2.WixStyleReactEnvironmentContext;
PageHeader.displayName = 'Page.Header';
PageHeader.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Changes header appearance to a denser version. Value changes by the state of the scrolled content inside of a \<Page/>. */
minimized: _propTypes.default.bool,
/** Inverts header styles. This property is supplied by \<Page/> component and reflects whether \<Page/> has a background image or not. */
hasBackgroundImage: _propTypes.default.bool,
/** Controls header skin (light or dark) */
skin: _propTypes.default.oneOf(['light', 'dark']),
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Adds an empty container above the page title. It accepts any item as a child element, but should be used to pass \<Breadcrumbs/> component only.<br/>
<br/>
For any custom enquiries contact the WSR team first.
*/
breadcrumbs: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/** Specifies page title text */
title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/** Specifies page subtitle text */
subtitle: _propTypes.default.node,
/** Specifies whether the back button is visible */
showBackButton: _propTypes.default.bool,
/** Defines a callback function which is called every time a back button is clicked */
onBackClicked: _propTypes.default.func,
/** Adds an empty container on the right side of a header. Most commonly used to store primary and secondary actions of a page, but can contain any other element, i.e. dropdown selection.<br/>
<br/>
It receives `minimized` and `hasBackgroundImage` props. */
actionsBar: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
};
PageHeader.defaultProps = {
minimized: false
};
//# sourceMappingURL=PageHeader.js.map