@wix/design-system
Version:
@wix/design-system
190 lines (188 loc) • 7.91 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FloatingHelperContentSt = require("./FloatingHelperContent.st.css.js");
var _constants = require("../constants");
var _constants2 = require("./constants");
var _Text = _interopRequireDefault(require("../../Text"));
var _Button = _interopRequireDefault(require("../../Button"));
var _constants3 = require("../../Button/constants");
var _deprecationLog = _interopRequireDefault(require("../../utils/deprecationLog"));
var _excluded = ["title", "body", "actionText", "onActionClick", "actionTheme", "image", "appearance", "footer", "direction"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FloatingHelper/FloatingHelperContent/FloatingHelperContent.js";
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); }
var skinToButtonProps = {
[_constants2.actionButtonSkin.white]: {
skin: _constants3.SKINS.light,
priority: _constants3.PRIORITY.secondary
},
[_constants2.actionButtonSkin.standard]: {
skin: _constants3.SKINS.standard,
priority: _constants3.PRIORITY.secondary
},
[_constants2.actionButtonSkin.premium]: {
skin: _constants3.SKINS.premium,
priority: _constants3.PRIORITY.primary
},
[_constants2.actionButtonSkin.standardPrimary]: {
skin: _constants3.SKINS.standard,
priority: _constants3.PRIORITY.primary
},
[_constants2.actionButtonSkin.lightPrimary]: {
skin: _constants3.SKINS.light,
priority: _constants3.PRIORITY.primary
}
};
/** FloatingHelperContent */
var FloatingHelperContent = _ref => {
var {
title,
body,
actionText,
onActionClick,
actionTheme = 'white',
// TODO: add default to actionSkin prop once actionTheme is removed
image,
appearance = 'dark',
// TODO: add default to skin prop once appearance is removed
footer,
direction = 'horizontal'
} = _ref,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var skin = props.skin || appearance;
var actionSkin = props.actionSkin || actionTheme;
(0, _react.useEffect)(() => {
if (appearance) {
(0, _deprecationLog.default)('<FloatingHelperContent/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [appearance]);
(0, _react.useEffect)(() => {
if (actionTheme) {
(0, _deprecationLog.default)('<FloatingHelperContent/> - prop "actionTheme" is deprecated and will be removed in next major release, please use "actionSkin" property instead.');
}
}, [actionTheme]);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.root, {
hasBody: !!body,
direction
}),
"data-direction": direction,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}
}, title && /*#__PURE__*/_react.default.createElement("div", {
className: _FloatingHelperContentSt.classes.title,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants2.dataHooks.title,
weight: "bold",
light: skin === _constants.floatingHelperSkin.dark,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}
}, title)), body && /*#__PURE__*/_react.default.createElement("div", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants2.dataHooks.body,
light: skin === _constants.floatingHelperSkin.dark,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}
}, body)), actionText && onActionClick && actionText.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
className: _FloatingHelperContentSt.classes.action,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, skinToButtonProps[actionSkin], {
dataHook: _constants2.dataHooks.actionButton,
onClick: onActionClick,
size: "small",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}
}), actionText)), footer && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants2.dataHooks.footer,
className: _FloatingHelperContentSt.classes.footer,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 11
}
}, footer)), image && direction && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants2.dataHooks.image,
className: (0, _FloatingHelperContentSt.st)(_FloatingHelperContentSt.classes.image, {
direction
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 9
}
}, image));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
FloatingHelperContent.propTypes = {
/** Adds text as the title */
title: _propTypes.default.string,
/** Adds renderable node as the body */
body: _propTypes.default.node.isRequired,
/** Sets the text of the action button. Needs to be a non-empty string (and onActionClick prop has to be passed) in order for the action button to appear */
actionText: _propTypes.default.string,
/** @deprecated use actionSkin prop instead */
actionTheme: _propTypes.default.oneOf(['standard', 'white', 'premium', 'lightPrimary', 'standardPrimary']),
/** Sets the skin of the action button */
actionSkin: _propTypes.default.oneOf(['standard', 'white', 'premium', 'lightPrimary', 'standardPrimary']),
/** Custom footer node */
footer: _propTypes.default.node,
/** When both onActionClick & actionText are provided, will make an action button appear and invoke onActionClick() upon click */
onActionClick: _propTypes.default.func,
/** Adds an image */
image: _propTypes.default.node,
/** @deprecated Use skin prop instead */
appearance: _propTypes.default.oneOf(['dark', 'light']),
/** Skin : `dark` or `light`. */
skin: _propTypes.default.oneOf(['dark', 'light']),
/** Sets the direction of content and image. */
direction: _propTypes.default.oneOf(['horizontal', 'vertical'])
};
var _default = exports.default = FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map