wix-style-react
Version:
wix-style-react
319 lines (317 loc) • 9.73 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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
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"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ComposerHeader/ComposerHeader.js";
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; }
class ComposerHeaderActions extends _react.default.PureComponent {
render() {
return '';
}
}
ComposerHeaderActions.displayName = 'Actions';
ComposerHeaderActions.defaultProps = {
justifyContent: 'flex-start'
};
var ComposerHeaderMainActions = () => '';
var ComposerHeaderSaveStatus = _ref => {
var {
saveStatusValue,
saveStatusError,
dataHook,
size
} = _ref;
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 3
}
}, saveStatusValue);
};
ComposerHeaderMainActions.displayName = 'MainActions';
ComposerHeaderSaveStatus.displayName = 'SaveStatus';
var filterChildren = _ref2 => {
var {
children,
displayName
} = _ref2;
var actions = _react.default.Children.map(children, child => child);
return actions && actions.filter(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === displayName);
};
var renderSingleAction = _ref3 => {
var {
props,
index
} = _ref3;
var {
children,
dataHook
} = props,
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 7
}
}, children);
};
var BackButton = /*#__PURE__*/_react.default.memo(_ref4 => {
var {
backButtonValue,
onBackClick,
size
} = _ref4;
return backButtonValue && /*#__PURE__*/_react.default.createElement(_TextButton.default, {
skin: "dark",
prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ArrowLeft, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 21
}
}),
dataHook: _constants.dataHooks.backButton,
className: _ComposerHeaderSt.classes.backButton,
size: size,
onClick: onBackClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 7
}
}, backButtonValue);
});
var Actions = /*#__PURE__*/_react.default.memo(_ref5 => {
var {
children
} = _ref5;
var actions = filterChildren({
children,
displayName: 'Actions'
});
return actions && /*#__PURE__*/_react.default.createElement("div", {
className: _ComposerHeaderSt.classes.container,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 7
}
}, actions.map((_ref6, index) => {
var {
props
} = _ref6;
return renderSingleAction({
props,
index
});
}));
});
var MainActions = /*#__PURE__*/_react.default.memo(_ref7 => {
var {
children
} = _ref7;
var mainActions = filterChildren({
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 7
}
}, mainActions[0] && mainActions[0].props.children);
});
var shouldRenderDivider = _ref8 => {
var {
children,
divider
} = _ref8;
var actions = filterChildren({
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(_ref9 => {
var {
backButton,
children
} = _ref9;
var shouldRender = backButton && shouldRenderDivider({
children,
divider: 'left'
});
return shouldRender && /*#__PURE__*/_react.default.createElement("div", {
className: _ComposerHeaderSt.classes.divider,
"data-hook": _constants.dataHooks.leftDivider,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 7
}
});
});
var RightDivider = /*#__PURE__*/_react.default.memo(_ref0 => {
var {
children
} = _ref0;
var mainActions = filterChildren({
children,
displayName: 'MainActions'
});
var shouldRender = mainActions && mainActions[0] && shouldRenderDivider({
children,
divider: 'right'
});
return shouldRender && /*#__PURE__*/_react.default.createElement("div", {
className: _ComposerHeaderSt.classes.divider,
"data-hook": _constants.dataHooks.rightDivider,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 7
}
});
});
/** ComposerHeader */
var ComposerHeader = _ref1 => {
var {
children,
dataHook,
size = 'medium',
dropShadow = false,
backButtonValue,
onBackClick
} = _ref1;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _ComposerHeaderSt.st)(_ComposerHeaderSt.classes.root, {
size,
dropShadow
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(BackButton, {
size: size,
backButtonValue: backButtonValue,
onBackClick: onBackClick,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(LeftDivider, {
backButton: backButtonValue,
children: children,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(Actions, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 7
}
}, children), /*#__PURE__*/_react.default.createElement(RightDivider, {
children: children,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(MainActions, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 7
}
}, children));
};
ComposerHeader.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Defines the label of a back button */
backButtonValue: _propTypes.default.node,
/** Defines what happens when the back button is clicked */
onBackClick: _propTypes.default.func,
/** Sets the height of the component and adjusts the size of the back button */
size: _propTypes.default.oneOf(['small', 'medium']),
/** Applies a drop shadow effect */
dropShadow: _propTypes.default.bool
};
ComposerHeader.displayName = 'ComposerHeader';
ComposerHeader.Actions = ComposerHeaderActions;
ComposerHeader.MainActions = ComposerHeaderMainActions;
ComposerHeader.SaveStatus = ComposerHeaderSaveStatus;
var _default = exports.default = ComposerHeader;
//# sourceMappingURL=ComposerHeader.js.map