wix-style-react
Version:
wix-style-react
243 lines (212 loc) • 10.4 kB
JavaScript
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
import s from './PageHeader.scss';
import React from 'react';
import PropTypes from 'prop-types';
import WixComponent from '../BaseComponents/WixComponent';
import classNames from 'classnames';
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 Button from '../Button';
var animateComponent = function animateComponent(show, useEnterDelay, content) {
return useEnterDelay ? React.createElement(
Animator,
{ show: show, opacity: true, timing: 'medium', delay: { enter: 100 } },
content
) : React.createElement(
Animator,
{ show: show, opacity: true, timing: 'medium' },
content
);
};
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 React.createElement(Breadcrumbs, {
items: [{ id: '1', value: getTitle(title, minimized) }],
activeId: '1',
size: 'medium',
theme: getBreadcrumbsTheme(hasBackgroundImage, minimized),
onClick: function onClick() {}
});
};
var generateThemedBreadcrumbs = function generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized) {
if (breadcrumbs) {
return React.cloneElement(breadcrumbs, {
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 = function (_WixComponent) {
_inherits(PageHeader, _WixComponent);
function PageHeader(props) {
_classCallCheck(this, PageHeader);
var _this = _possibleConstructorReturn(this, (PageHeader.__proto__ || Object.getPrototypeOf(PageHeader)).call(this, props));
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: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var _props = this.props,
breadcrumbs = _props.breadcrumbs,
title = _props.title,
hasBackgroundImage = _props.hasBackgroundImage,
minimized = _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 _classNames, _classNames3, _classNames6;
var _props2 = this.props,
breadcrumbs = _props2.breadcrumbs,
onBackClicked = _props2.onBackClicked,
title = _props2.title,
subtitle = _props2.subtitle,
minimized = _props2.minimized,
actionsBar = _props2.actionsBar,
showBackButton = _props2.showBackButton,
hasBackgroundImage = _props2.hasBackgroundImage,
className = _props2.className;
var breadcrumbsExists = !!breadcrumbs;
var themedBreadcrumbs = this.state.themedBreadcrumbs;
return React.createElement(
'div',
{ className: classNames(s.headerContainer, className) },
React.createElement(
'div',
{ className: s.header },
React.createElement(
'div',
null,
animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, React.createElement(
'div',
{
className: classNames(s.breadcrumbsContainer, (_classNames = {}, _defineProperty(_classNames, s.absolute, !breadcrumbsExists), _defineProperty(_classNames, s.minimized, minimized), _classNames)),
'data-hook': 'page-header-breadcrumbs'
},
themedBreadcrumbs
))
),
React.createElement(
'div',
{
className: classNames(s.titleContainer, _defineProperty({}, s.minimized, minimized))
},
showBackButton && onBackClicked && animateComponent(!minimized, !breadcrumbsExists, React.createElement(
'div',
{
className: classNames(s.backButton, (_classNames3 = {}, _defineProperty(_classNames3, s.minimized, minimized), _defineProperty(_classNames3, s.darkTheme, isDarkTheme(hasBackgroundImage, minimized)), _classNames3))
},
React.createElement(
Button,
{
dataHook: 'page-header-backbutton',
onClick: onBackClicked,
theme: 'icon-white'
},
React.createElement(ChevronLeft, { className: s.backButtonIcon })
)
)),
React.createElement(
'div',
{ className: s.titleColumn },
title && animateComponent(!minimized, !breadcrumbsExists, React.createElement(
'div',
{
className: classNames(s.title, _defineProperty({}, s.minimized, minimized)),
'data-hook': 'page-header-title'
},
React.createElement(
Heading,
{ light: isDarkTheme(hasBackgroundImage, minimized) },
getTitle(title, minimized)
)
)),
subtitle && animateComponent(!minimized, !breadcrumbsExists, React.createElement(
'div',
{
className: classNames(_defineProperty({}, s.minimized, minimized)),
'data-hook': 'page-header-subtitle'
},
React.createElement(
Text,
{
light: isDarkTheme(hasBackgroundImage, minimized),
secondary: !isDarkTheme(hasBackgroundImage, minimized)
},
subtitle
)
))
)
)
),
actionsBar && React.createElement(
'div',
{
className: classNames(s.actionsBar, (_classNames6 = {}, _defineProperty(_classNames6, s.minimized, minimized), _defineProperty(_classNames6, s.withBreadcrumbs, breadcrumbsExists), _classNames6)),
'data-hook': 'page-header-actionbar'
},
React.cloneElement(actionsBar, { minimized: minimized, hasBackgroundImage: hasBackgroundImage })
)
);
}
}]);
return PageHeader;
}(WixComponent);
export { PageHeader as default };
PageHeader.displayName = 'Page.Header';
PageHeader.propTypes = {
/** 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.node,
/** 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.node
};
PageHeader.defaultProps = {
minimized: false
};