wix-style-react
Version:
255 lines (216 loc) • 8.98 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ArrowLeft = _interopRequireDefault(require("wix-ui-icons-common/ArrowLeft"));
var _ComposerHeaderSt = require("./ComposerHeader.st.css");
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _Text = _interopRequireDefault(require("../Text/Text"));
var _constants = require("./constants");
var _excluded = ["children", "dataHook"],
_excluded2 = ["children", "dataHook", "size", "dropShadow", "backButtonValue", "onBackClick"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var ComposerHeaderActions = function ComposerHeaderActions() {
return '';
};
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"
}, saveStatusValue);
};
ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
ComposerHeaderActions.defaultProps = {
justifyContent: 'flex-start'
};
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
}, 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(_ArrowLeft["default"], null),
dataHook: _constants.dataHooks.backButton,
className: _ComposerHeaderSt.classes.backButton,
size: size,
onClick: onBackClick
}, backButtonValue);
});
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
}, actions.map(function (_ref6, index) {
var props = _ref6.props;
return renderSingleAction({
props: props,
index: index
});
}));
});
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
}, mainActions[0] && mainActions[0].props.children);
});
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;
};
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
});
});
var RightDivider = /*#__PURE__*/_react["default"].memo(function (_ref10) {
var children = _ref10.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
});
});
/** ComposerHeader */
var ComposerHeader = function ComposerHeader(_ref11) {
var children = _ref11.children,
dataHook = _ref11.dataHook,
size = _ref11.size,
dropShadow = _ref11.dropShadow,
backButtonValue = _ref11.backButtonValue,
onBackClick = _ref11.onBackClick,
rest = (0, _objectWithoutProperties2["default"])(_ref11, _excluded2);
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _ComposerHeaderSt.st)(_ComposerHeaderSt.classes.root, {
size: size,
dropShadow: dropShadow
})
}, /*#__PURE__*/_react["default"].createElement(BackButton, {
size: size,
backButtonValue: backButtonValue,
onBackClick: onBackClick
}), /*#__PURE__*/_react["default"].createElement(LeftDivider, {
backButton: backButtonValue,
children: children
}), /*#__PURE__*/_react["default"].createElement(Actions, null, children), /*#__PURE__*/_react["default"].createElement(RightDivider, {
children: children
}), /*#__PURE__*/_react["default"].createElement(MainActions, null, children));
};
ComposerHeader.propTypes = {
/** hook for testing purposes */
dataHook: _propTypes["default"].string,
/** back button value */
backButtonValue: _propTypes["default"].node,
/** back button callback function */
onBackClick: _propTypes["default"].func,
/** composer header size */
size: _propTypes["default"].oneOf(['small', 'medium']),
/** shadow effect */
dropShadow: _propTypes["default"].bool
};
ComposerHeader.defaultProps = {
size: 'medium'
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
var _default = ComposerHeader;
exports["default"] = _default;