@wix/design-system
Version:
@wix/design-system
297 lines (296 loc) • 11.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Header = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _SidePanelAPI = require("../../SidePanelAPI");
var _Header = require("./Header.classes");
var _constants = require("../../constants");
var _Heading = require("../../../Heading");
var _Divider = require("../../../Divider");
var _CloseButton = require("../../../CloseButton");
var _Box = require("../../../Box");
var _InfoIcon = require("../../../InfoIcon");
var _Text = require("../../../Text");
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Tooltip = require("../../../Tooltip");
var _WixDesignSystemDefaultPropsProvider = require("../../../WixDesignSystemDefaultPropsProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SidePanel/components/Header/Header.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
class HeaderComponent extends _react.PureComponent {
renderStringTitle(skin) {
var _this$props = this.props,
title = _this$props.title,
infoTooltipContent = _this$props.infoTooltipContent,
infoTooltipProps = _this$props.infoTooltipProps,
maxLines = _this$props.maxLines,
ellipsis = _this$props.ellipsis;
var headerProps = {
placement: 'auto',
ellipsis,
maxLines,
size: 'medium',
as: 'h2',
dataHook: _constants.dataHooks.sidePanelHeaderTitle
};
var HeaderText = () => skin === 'floating' ? /*#__PURE__*/_react.default.createElement(_Text.Text, (0, _extends2.default)({
className: _Header.classes.floatingTitle()
}, headerProps, {
weight: "bold",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 9
}
}), title) : /*#__PURE__*/_react.default.createElement(_Heading.Heading, (0, _extends2.default)({
className: _Header.classes.standardTitle()
}, headerProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 9
}
}), title);
return /*#__PURE__*/_react.default.createElement(_Box.Box, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(HeaderText, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 9
}
}), infoTooltipContent && /*#__PURE__*/_react.default.createElement(_Box.Box, {
marginLeft: "tiny",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
dataHook: _constants.dataHooks.sidePanelHeaderTitleInfoIcon,
content: infoTooltipContent,
tooltipProps: infoTooltipProps,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}
})));
}
renderSubtitle() {
var subtitle = this.props.subtitle;
if (!subtitle) return null;
var isStringSubtitle = typeof subtitle === 'string';
if (!isStringSubtitle) {
return subtitle;
}
return /*#__PURE__*/_react.default.createElement(_Text.Text, {
className: _Header.classes.subtitle(),
skin: "standard",
secondary: true,
dataHook: _constants.dataHooks.sidePanelHeaderSubtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}
}, subtitle);
}
renderBackButton() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
ariaLabel = _ref.ariaLabel,
onClick = _ref.onClick,
onMouseDown = _ref.onMouseDown,
description = _ref.description,
tooltipProps = _ref.tooltipProps;
var backButton = /*#__PURE__*/_react.default.createElement(_CloseButton.CloseButton, {
dataHook: _constants.dataHooks.sidePanelHeaderBackButton,
className: _Header.classes.backButton(),
onClick: onClick,
onMouseDown: onMouseDown,
size: "large",
skin: "dark",
"aria-label": ariaLabel,
children: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 19
}
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 7
}
});
if (description) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, (0, _extends2.default)({}, tooltipProps, {
content: description,
dataHook: _constants.dataHooks.sidePanelHeaderBackButtonTooltip,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 9
}
}), backButton);
}
return backButton;
}
renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps) {
var title = this.props.title;
var isStringTitle = typeof title === 'string';
return /*#__PURE__*/_react.default.createElement("div", {
className: _Header.classes.titleContainer({
noCloseButton: !(closeButtonProps != null && closeButtonProps.onClick)
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 7
}
}, this.props.prefix && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.sidePanelHeaderPrefix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
}, this.props.prefix), (backButtonProps == null ? void 0 : backButtonProps.onClick) && this.renderBackButton(backButtonProps), /*#__PURE__*/_react.default.createElement("div", {
className: _Header.classes.title(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 9
}
}, isStringTitle ? this.renderStringTitle(skin) : title, this.renderSubtitle()), this.renderButtons(closeButtonProps, helpButtonProps));
}
renderButtons(closeButtonProps, helpButtonProps) {
var _helpButtonProps$size, _helpButtonProps$skin, _closeButtonProps$siz, _closeButtonProps$ski;
if (!(closeButtonProps != null && closeButtonProps.onClick) && !(helpButtonProps != null && helpButtonProps.onClick) && !this.props.suffix) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
}
return /*#__PURE__*/_react.default.createElement("div", {
className: _Header.classes.buttonBox(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 7
}
}, this.props.suffix && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.sidePanelHeaderSuffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 11
}
}, this.props.suffix), (helpButtonProps == null ? void 0 : helpButtonProps.onClick) && /*#__PURE__*/_react.default.createElement(_CloseButton.CloseButton, {
dataHook: _constants.dataHooks.sidePanelHeaderHelpButton,
className: _Header.classes.helpButton(),
onClick: helpButtonProps.onClick,
onMouseDown: helpButtonProps.onMouseDown,
size: (_helpButtonProps$size = helpButtonProps.size) !== null && _helpButtonProps$size !== void 0 ? _helpButtonProps$size : 'medium',
skin: (_helpButtonProps$skin = helpButtonProps.skin) !== null && _helpButtonProps$skin !== void 0 ? _helpButtonProps$skin : 'dark',
"aria-label": helpButtonProps.ariaLabel,
children: /*#__PURE__*/_react.default.createElement(_system.Help24, {
className: _Header.classes.helpIcon(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 23
}
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 11
}
}), (closeButtonProps == null ? void 0 : closeButtonProps.onClick) && /*#__PURE__*/_react.default.createElement(_CloseButton.CloseButton, {
dataHook: _constants.dataHooks.sidePanelHeaderCloseButton,
className: _Header.classes.closeButton(),
onClick: closeButtonProps.onClick,
onMouseDown: closeButtonProps.onMouseDown,
size: (_closeButtonProps$siz = closeButtonProps.size) !== null && _closeButtonProps$siz !== void 0 ? _closeButtonProps$siz : 'medium',
"aria-label": closeButtonProps.ariaLabel,
skin: (_closeButtonProps$ski = closeButtonProps.skin) !== null && _closeButtonProps$ski !== void 0 ? _closeButtonProps$ski : 'dark',
autoFocus: closeButtonProps.autoFocus,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 11
}
}));
}
render() {
var _this$props2 = this.props,
children = _this$props2.children,
showDivider = _this$props2.showDivider,
className = _this$props2.className;
return /*#__PURE__*/_react.default.createElement(_SidePanelAPI.SidePanelContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 7
}
}, _ref2 => {
var skin = _ref2.skin,
isDraggable = _ref2.isDraggable,
backButtonProps = _ref2.backButtonProps,
closeButtonProps = _ref2.closeButtonProps,
helpButtonProps = _ref2.helpButtonProps;
return /*#__PURE__*/_react.default.createElement("div", {
className: _Header.classes.root({
skin,
isDraggable
}, className),
"data-hook": _constants.dataHooks.sidePanelHeader,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 11
}
}, this.renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps), children, showDivider && /*#__PURE__*/_react.default.createElement(_Divider.Divider, {
className: _Header.classes.divider(),
dataHook: _constants.dataHooks.sidePanelHeaderDivider,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 15
}
}));
});
}
}
HeaderComponent.displayName = 'SidePanel.Header';
HeaderComponent.defaultProps = {
showDivider: true
};
var Header = exports.Header = (0, _WixDesignSystemDefaultPropsProvider.withDefaultProps)(HeaderComponent, 'SidePanel.Header');
//# sourceMappingURL=Header.js.map