wix-style-react
Version:
256 lines (208 loc) • 11.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _PageHeaderSt = require("./PageHeader.st.css");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ChevronLeft = _interopRequireDefault(require("wix-ui-icons-common/ChevronLeft"));
var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs"));
var _Text = _interopRequireDefault(require("../Text"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _wixAnimations = require("wix-animations");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _constants = require("./constants");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
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["default"].createElement(_Breadcrumbs["default"], {
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["default"].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) {
(0, _inherits2["default"])(PageHeader, _React$PureComponent);
var _super = _createSuper(PageHeader);
function PageHeader(props) {
var _this;
(0, _classCallCheck2["default"])(this, PageHeader);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_animateComponent", function (show, useEnterDelay, content) {
if (show) {
return content;
}
return useEnterDelay ? /*#__PURE__*/_react["default"].createElement(_wixAnimations.Animator, {
show: show,
opacity: true,
timing: "medium",
delay: {
enter: 100
}
}, content) : /*#__PURE__*/_react["default"].createElement(_wixAnimations.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;
}
(0, _createClass2["default"])(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["default"].createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.root, {}, className),
"data-hook": dataHook
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _PageHeaderSt.classes.header
}, /*#__PURE__*/_react["default"].createElement("div", null, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.breadcrumbsContainer, {
withoutBreadcrumbs: !breadcrumbsExists
}),
"data-hook": _constants.dataHooks.breadcrumbs
}, themedBreadcrumbs))), /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.titleContainer, {
minimized: minimized
})
}, showBackButton && onBackClicked && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.titleBackButton, {
darkTheme: isDarkTheme(hasBackgroundImage, minimized)
}),
dataHook: _constants.dataHooks.backButton,
onClick: onBackClicked
}, /*#__PURE__*/_react["default"].createElement(_ChevronLeft["default"], {
className: _PageHeaderSt.classes.titleBackButtonIcon
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: _PageHeaderSt.classes.titleColumn
}, title && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
appearance: 'H1',
className: _PageHeaderSt.classes.title,
dataHook: _constants.dataHooks.title,
ellipsis: typeof _title === 'string',
light: isDarkTheme(hasBackgroundImage, minimized)
}, _title)), subtitle && this._animateComponent(!minimized, !breadcrumbsExists, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.subtitle
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
ellipsis: typeof subtitle === 'string',
light: isDarkTheme(hasBackgroundImage, minimized),
secondary: !isDarkTheme(hasBackgroundImage, minimized),
maxLines: 2,
maxWidth: "288px"
}, subtitle)))))), actionsBar && /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _PageHeaderSt.st)(_PageHeaderSt.classes.actionsBar, {
minimized: minimized,
withBreadcrumbs: breadcrumbsExists
}),
"data-hook": _constants.dataHooks.actionBar
}, typeof actionsBar === 'function' ? actionsBar({
minimized: minimized,
hasBackgroundImage: hasBackgroundImage
}) : actionsBar));
}
}]);
return PageHeader;
}(_react["default"].PureComponent);
exports["default"] = PageHeader;
PageHeader.displayName = 'Page.Header';
PageHeader.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** This property is being supplied by the Page component, it's value changes by the state of the scrolled content */
minimized: _propTypes["default"].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["default"].bool,
/** A css class to be applied to the component's root element */
className: _propTypes["default"].string,
/** Wix-Style-React Breadcrumbs component */
breadcrumbs: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
/** The main title text */
title: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
/** The subtitle text */
subtitle: _propTypes["default"].node,
/** Should show a back button */
showBackButton: _propTypes["default"].bool,
/** The callback when back button is clicked */
onBackClicked: _propTypes["default"].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["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
};
PageHeader.defaultProps = {
minimized: false
};