@wix/design-system
Version:
@wix/design-system
305 lines (303 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _ComposerHeaderSt = require("./ComposerHeader.st.css.js");
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _Text = _interopRequireDefault(require("../Text/Text"));
var _constants = require("./constants");
var _excluded = ["children", "dataHook"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ComposerHeader/ComposerHeader.jsx",
_this = void 0;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var ComposerHeaderActions = /*#__PURE__*/function (_React$PureComponent) {
function ComposerHeaderActions() {
(0, _classCallCheck2["default"])(this, ComposerHeaderActions);
return _callSuper(this, ComposerHeaderActions, arguments);
}
(0, _inherits2["default"])(ComposerHeaderActions, _React$PureComponent);
return (0, _createClass2["default"])(ComposerHeaderActions, [{
key: "render",
value: function render() {
return '';
}
}]);
}(_react["default"].PureComponent);
ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderActions.defaultProps = {
justifyContent: 'flex-start'
};
var ComposerHeaderMainActions = function ComposerHeaderMainActions() {
return '';
};
var ComposerHeaderSaveStatus = function ComposerHeaderSaveStatus(_ref) {
var saveStatusValue = _ref.saveStatusValue,
saveStatusError = _ref.saveStatusError,
dataHook = _ref.dataHook,
size = _ref.size;
return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
dataHook: dataHook || _constants.dataHooks.saveStatus,
className: _ComposerHeaderSt.classes.saveStatus,
secondary: true,
light: true,
size: size,
skin: saveStatusError ? 'error' : 'standard',
tagName: "span",
weight: "thin",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 3
}
}, saveStatusValue);
};
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
var filterChildren = function filterChildren(_ref2) {
var children = _ref2.children,
displayName = _ref2.displayName;
var actions = _react["default"].Children.map(children, function (child) {
return child;
});
return actions && actions.filter(function (child) {
return /*#__PURE__*/_react["default"].isValidElement(child) && child.type.displayName === displayName;
});
};
var renderSingleAction = function renderSingleAction(_ref3) {
var props = _ref3.props,
index = _ref3.index;
var children = props.children,
dataHook = props.dataHook,
rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
return children && /*#__PURE__*/_react["default"].createElement("div", {
key: index,
"data-hook": dataHook,
style: _objectSpread(_objectSpread({}, rest), {}, {
justifyContent: rest.justifyContent
}),
className: _ComposerHeaderSt.classes.actions,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 7
}
}, children);
};
var BackButton = /*#__PURE__*/_react["default"].memo(function (_ref4) {
var backButtonValue = _ref4.backButtonValue,
onBackClick = _ref4.onBackClick,
size = _ref4.size;
return backButtonValue ? /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
skin: "dark",
prefixIcon: /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.ArrowLeft, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 19
}
}),
dataHook: _constants.dataHooks.backButton,
className: _ComposerHeaderSt.classes.backButton,
size: size,
onClick: onBackClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 5
}
}, backButtonValue) : null;
});
var Actions = /*#__PURE__*/_react["default"].memo(function (_ref5) {
var children = _ref5.children;
var actions = filterChildren({
children: children,
displayName: 'Actions'
});
return actions ? /*#__PURE__*/_react["default"].createElement("div", {
className: _ComposerHeaderSt.classes.container,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 5
}
}, actions.map(function (_ref6, index) {
var props = _ref6.props;
return renderSingleAction({
props: props,
index: index
});
})) : null;
});
var MainActions = /*#__PURE__*/_react["default"].memo(function (_ref7) {
var children = _ref7.children;
var mainActions = filterChildren({
children: children,
displayName: 'MainActions'
});
/**
* We only support one type of main action.
* It will be always the first one the in list.
* */
var exists = mainActions && mainActions[0];
return exists ? /*#__PURE__*/_react["default"].createElement("div", {
className: _ComposerHeaderSt.classes.mainActions,
"data-hook": mainActions[0].props.dataHook || _constants.dataHooks.mainAction,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 5
}
}, mainActions[0] && mainActions[0].props.children) : null;
});
var shouldRenderDivider = function shouldRenderDivider(_ref8) {
var children = _ref8.children,
divider = _ref8.divider;
var actions = filterChildren({
children: children,
displayName: 'Actions'
});
var sides = {
left: {
item: 0,
justifyContent: 'flex-start'
},
right: {
item: actions && actions.length - 1,
justifyContent: 'flex-end'
}
};
if (actions && actions.length === 1) {
return actions[0].props.justifyContent === sides[divider].justifyContent;
}
if (actions && actions.length > 1) {
return actions[sides[divider].item].props.justifyContent === sides[divider].justifyContent;
}
return null;
};
var LeftDivider = /*#__PURE__*/_react["default"].memo(function (_ref9) {
var backButton = _ref9.backButton,
children = _ref9.children;
var shouldRender = backButton && shouldRenderDivider({
children: children,
divider: 'left'
});
return shouldRender ? /*#__PURE__*/_react["default"].createElement("div", {
className: _ComposerHeaderSt.classes.divider,
"data-hook": _constants.dataHooks.leftDivider,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 5
}
}) : null;
});
var RightDivider = /*#__PURE__*/_react["default"].memo(function (_ref0) {
var children = _ref0.children;
var mainActions = filterChildren({
children: children,
displayName: 'MainActions'
});
var shouldRender = mainActions && mainActions[0] && shouldRenderDivider({
children: children,
divider: 'right'
});
return shouldRender ? /*#__PURE__*/_react["default"].createElement("div", {
className: _ComposerHeaderSt.classes.divider,
"data-hook": _constants.dataHooks.rightDivider,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 5
}
}) : null;
});
/** ComposerHeader */
var ComposerHeader = function ComposerHeader(_ref1) {
var children = _ref1.children,
dataHook = _ref1.dataHook,
_ref1$size = _ref1.size,
size = _ref1$size === void 0 ? 'medium' : _ref1$size,
_ref1$dropShadow = _ref1.dropShadow,
dropShadow = _ref1$dropShadow === void 0 ? false : _ref1$dropShadow,
backButtonValue = _ref1.backButtonValue,
onBackClick = _ref1.onBackClick;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _ComposerHeaderSt.st)(_ComposerHeaderSt.classes.root, {
size: size,
dropShadow: dropShadow
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(BackButton, {
size: size,
backButtonValue: backButtonValue,
onBackClick: onBackClick,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(LeftDivider, {
backButton: backButtonValue,
children: children,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(Actions, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 7
}
}, children), /*#__PURE__*/_react["default"].createElement(RightDivider, {
children: children,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 7
}
}), /*#__PURE__*/_react["default"].createElement(MainActions, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 7
}
}, children));
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
var _default = exports["default"] = ComposerHeader;