@wix/design-system
Version:
@wix/design-system
139 lines • 7.53 kB
JavaScript
import { st, classes } from './Header.st.css.js';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ChevronLeft } from '@wix/wix-ui-icons-common';
import Breadcrumbs from '../../../Breadcrumbs';
import Text from '../../../Text';
import Heading from '../../../Heading';
import IconButton from '../../../IconButton';
import { dataHooks } from './constants';
import Transition from '../../../Transition';
import { WixDesignSystemContext } from '../../../WixDesignSystemProvider/context';
import { WixStyleReactEnvironmentContext } from '../../../WixStyleReactEnvironmentProvider/context';
const isDarkTheme = (hasBackgroundImage, minimized, skin) => {
switch (skin) {
case 'light':
return false;
case 'dark':
return true;
default:
return hasBackgroundImage && !minimized;
}
};
const getBreadcrumbsTheme = (hasBackgroundImage, minimized, skin) => isDarkTheme(hasBackgroundImage, minimized, skin)
? 'onDarkBackground'
: 'onGrayBackground';
const getTitle = (title, minimized) => typeof title === 'function' ? title(minimized) : title;
const generateDefaultBreadcrumbs = (title, hasBackgroundImage, minimized, skin) => (React.createElement(Breadcrumbs, { items: [{ id: '1', value: getTitle(title, minimized) }], activeId: "1", size: "medium", theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin), onClick: () => { } }));
const getBreadcrumbs = (breadcrumbs, minimized) => typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
const generateThemedBreadcrumbs = (breadcrumbs, title, hasBackgroundImage, minimized, skin) => {
if (breadcrumbs) {
// @ts-expect-error
return React.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 PureComponent {
constructor(props) {
super(props);
this._animateComponent = (show, useEnterDelay, content) => {
if (show) {
return content;
}
return useEnterDelay ? (React.createElement(Transition, { show: show, enterAnimation: {
fadeIn: {
duration: 'medium01',
delay: 'short',
},
}, exitAnimation: {
fadeOut: true,
} }, content)) : (React.createElement(Transition, { show: show, enterAnimation: {
fadeIn: true,
}, exitAnimation: {
fadeOut: true,
} }, content));
};
const { breadcrumbs, title, hasBackgroundImage, minimized, skin } = props;
this.state = {
themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized, skin),
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { breadcrumbs, title, hasBackgroundImage, minimized, skin } = this.props;
const newBreadcrumbs = nextProps.breadcrumbs;
const newTitle = nextProps.title;
const newHasBackgroundImage = nextProps.hasBackgroundImage;
const newMinimized = nextProps.minimized;
const newSkin = nextProps.skin;
if (breadcrumbs !== newBreadcrumbs ||
title !== newTitle ||
hasBackgroundImage !== newHasBackgroundImage ||
minimized !== newMinimized ||
skin !== newSkin) {
const themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized, skin);
this.setState({ themedBreadcrumbs });
}
}
render() {
const { dataHook, breadcrumbs, onBackClicked, title, subtitle, minimized, skin, actionsBar, showBackButton, hasBackgroundImage, className, } = this.props;
const breadcrumbsExists = !!breadcrumbs;
const { themedBreadcrumbs } = this.state;
const _title = getTitle(title, minimized);
const isDark = isDarkTheme(hasBackgroundImage, minimized, skin);
const { pageHeaderId } = this.context;
return (React.createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, {}, className), "data-hook": dataHook },
React.createElement("div", { className: classes.header },
React.createElement("div", null, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, React.createElement("div", { className: st(classes.breadcrumbsContainer, {
withoutBreadcrumbs: !breadcrumbsExists,
}), "data-hook": dataHooks.breadcrumbs }, themedBreadcrumbs))),
React.createElement("div", { className: st(classes.titleContainer, { minimized }) },
showBackButton &&
onBackClicked &&
this._animateComponent(!minimized, !breadcrumbsExists, React.createElement(IconButton, { className: st(classes.titleBackButton, {
darkTheme: isDark,
newColorsBranding,
}), dataHook: dataHooks.backButton, onClick: onBackClicked },
React.createElement(ChevronLeft, { className: classes.titleBackButtonIcon }))),
React.createElement("div", { className: classes.titleColumn },
title &&
this._animateComponent(!minimized, !breadcrumbsExists, React.createElement(Heading, { size: "extraLarge", className: st(classes.title, { newColorsBranding }), dataHook: dataHooks.title, ellipsis: typeof _title === 'string', light: isDark, id: pageHeaderId }, _title)),
subtitle &&
this._animateComponent(!minimized, !breadcrumbsExists, React.createElement("div", { "data-hook": dataHooks.subtitle },
React.createElement(Text, { ellipsis: typeof subtitle === 'string', light: isDark, secondary: !isDark, maxLines: 2, maxWidth: "288px" }, subtitle)))))),
actionsBar && (React.createElement("div", { className: st(classes.actionsBar, {
minimized,
withBreadcrumbs: breadcrumbsExists,
}), "data-hook": dataHooks.actionBar }, typeof actionsBar === 'function'
? actionsBar({
minimized,
hasBackgroundImage,
skin,
})
: actionsBar))))));
}
}
Header.displayName = 'Page.Header';
Header.propTypes = {
dataHook: PropTypes.string,
minimized: PropTypes.bool,
hasBackgroundImage: PropTypes.bool,
skin: PropTypes.oneOf(['light', 'dark']),
className: PropTypes.string,
breadcrumbs: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
title: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
subtitle: PropTypes.node,
showBackButton: PropTypes.bool,
onBackClicked: PropTypes.func,
actionsBar: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
};
Header.defaultProps = {
minimized: false,
};
export default Header;
Header.contextType = WixStyleReactEnvironmentContext;
//# sourceMappingURL=Header.js.map