wix-style-react
Version:
236 lines (202 loc) • 9.7 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import { st, classes } from './PageHeader.st.css';
import React from 'react';
import PropTypes from 'prop-types';
import ChevronLeft from 'wix-ui-icons-common/ChevronLeft';
import Breadcrumbs from '../Breadcrumbs';
import Text from '../Text';
import Heading from '../Heading';
import { Animator } from 'wix-animations';
import IconButton from '../IconButton';
import { dataHooks } from './constants';
var isDarkTheme = function isDarkTheme(hasBackgroundImage, minimized) {
return !minimized && hasBackgroundImage;
};
var getBreadcrumbsTheme = function getBreadcrumbsTheme(hasBackgroundImage, minimized) {
return isDarkTheme(hasBackgroundImage, minimized) ? 'onDarkBackground' : 'onGrayBackground';
};
var getTitle = function getTitle(title, minimized) {
return typeof title === 'function' ? title(minimized) : title;
};
var generateDefaultBreadcrumbs = function generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized) {
return /*#__PURE__*/React.createElement(Breadcrumbs, {
items: [{
id: '1',
value: getTitle(title, minimized)
}],
activeId: "1",
size: "medium",
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized),
onClick: function onClick() {}
});
};
var getBreadcrumbs = function getBreadcrumbs(breadcrumbs, minimized) {
return typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
};
var generateThemedBreadcrumbs = function generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized) {
if (breadcrumbs) {
return /*#__PURE__*/React.cloneElement(getBreadcrumbs(breadcrumbs, minimized), {
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized)
});
}
return generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized);
};
/**
* A header that sticks at the top of the container which minimizes on scroll
*/
var PageHeader = /*#__PURE__*/function (_React$PureComponent) {
_inherits(PageHeader, _React$PureComponent);
var _super = _createSuper(PageHeader);
function PageHeader(props) {
var _this;
_classCallCheck(this, PageHeader);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "_animateComponent", function (show, useEnterDelay, content) {
if (show) {
return content;
}
return useEnterDelay ? /*#__PURE__*/React.createElement(Animator, {
show: show,
opacity: true,
timing: "medium",
delay: {
enter: 100
}
}, content) : /*#__PURE__*/React.createElement(Animator, {
show: show,
opacity: true,
timing: "medium"
}, content);
});
var breadcrumbs = props.breadcrumbs,
title = props.title,
hasBackgroundImage = props.hasBackgroundImage,
minimized = props.minimized;
_this.state = {
themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized)
};
return _this;
}
_createClass(PageHeader, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var _this$props = this.props,
breadcrumbs = _this$props.breadcrumbs,
title = _this$props.title,
hasBackgroundImage = _this$props.hasBackgroundImage,
minimized = _this$props.minimized;
var newBreadcrumbs = nextProps.breadcrumbs;
var newTitle = nextProps.title;
var newHasBackgroundImage = nextProps.hasBackgroundImage;
var newMinimized = nextProps.minimized;
if (breadcrumbs !== newBreadcrumbs || title !== newTitle || hasBackgroundImage !== newHasBackgroundImage || minimized !== newMinimized) {
var themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized);
this.setState({
themedBreadcrumbs: themedBreadcrumbs
});
}
}
}, {
key: "render",
value: function 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,
actionsBar = _this$props2.actionsBar,
showBackButton = _this$props2.showBackButton,
hasBackgroundImage = _this$props2.hasBackgroundImage,
className = _this$props2.className;
var breadcrumbsExists = !!breadcrumbs;
var themedBreadcrumbs = this.state.themedBreadcrumbs;
var _title = getTitle(title, minimized);
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {}, className),
"data-hook": dataHook
}, /*#__PURE__*/React.createElement("div", {
className: classes.header
}, /*#__PURE__*/React.createElement("div", null, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, /*#__PURE__*/React.createElement("div", {
className: st(classes.breadcrumbsContainer, {
withoutBreadcrumbs: !breadcrumbsExists
}),
"data-hook": dataHooks.breadcrumbs
}, themedBreadcrumbs))), /*#__PURE__*/React.createElement("div", {
className: st(classes.titleContainer, {
minimized: minimized
})
}, showBackButton && onBackClicked && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/React.createElement(IconButton, {
className: st(classes.titleBackButton, {
darkTheme: isDarkTheme(hasBackgroundImage, minimized)
}),
dataHook: dataHooks.backButton,
onClick: onBackClicked
}, /*#__PURE__*/React.createElement(ChevronLeft, {
className: classes.titleBackButtonIcon
}))), /*#__PURE__*/React.createElement("div", {
className: classes.titleColumn
}, title && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/React.createElement(Heading, {
appearance: 'H1',
className: classes.title,
dataHook: dataHooks.title,
ellipsis: typeof _title === 'string',
light: isDarkTheme(hasBackgroundImage, minimized)
}, _title)), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/React.createElement("div", {
"data-hook": dataHooks.subtitle
}, /*#__PURE__*/React.createElement(Text, {
ellipsis: typeof subtitle === 'string',
light: isDarkTheme(hasBackgroundImage, minimized),
secondary: !isDarkTheme(hasBackgroundImage, minimized),
maxLines: 2,
maxWidth: "288px"
}, subtitle)))))), actionsBar && /*#__PURE__*/React.createElement("div", {
className: st(classes.actionsBar, {
minimized: minimized,
withBreadcrumbs: breadcrumbsExists
}),
"data-hook": dataHooks.actionBar
}, typeof actionsBar === 'function' ? actionsBar({
minimized: minimized,
hasBackgroundImage: hasBackgroundImage
}) : actionsBar));
}
}]);
return PageHeader;
}(React.PureComponent);
export { PageHeader as default };
PageHeader.displayName = 'Page.Header';
PageHeader.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** This property is being supplied by the Page component, it's value changes by the state of the scrolled content */
minimized: PropTypes.bool,
/** This property is being supplied by the Page component, it's value reflects if the Page has a background image or not */
hasBackgroundImage: PropTypes.bool,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** Wix-Style-React Breadcrumbs component */
breadcrumbs: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/** The main title text */
title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
/** The subtitle text */
subtitle: PropTypes.node,
/** Should show a back button */
showBackButton: PropTypes.bool,
/** The callback when back button is clicked */
onBackClicked: PropTypes.func,
/** A placeholder for a component that can contain actions / anything else. It should be a React component that receives `minimized` and `hasBackgroundImage` props. */
actionsBar: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};
PageHeader.defaultProps = {
minimized: false
};