@wix/design-system
Version:
@wix/design-system
235 lines (234 loc) • 8.73 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Text = _interopRequireDefault(require("../Text"));
var _Button = _interopRequireDefault(require("../Button"));
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _constants = require("./constants");
var _SectionHelperSt = require("./SectionHelper.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["dataHook", "showCloseButton", "onClose", "onAction", "actionText", "appearance", "title", "size", "fullWidth", "children", "layout", "border", "showPrefixIcon", "prefixIcon"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SectionHelper/SectionHelper.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); }
var DEFAULT_ICONS = {
[_constants.SKIN.Standard]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 20
}
}),
[_constants.SKIN.Success]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusComplete, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 19
}
}),
[_constants.SKIN.Warning]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarning, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 19
}
}),
[_constants.SKIN.Danger]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlert, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 18
}
}),
[_constants.SKIN.Premium]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 19
}
}),
[_constants.SKIN.Preview]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 19
}
}),
[_constants.SKIN.ExperimentalDark]: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 28
}
})
};
var SectionHelper = _ref => {
var {
dataHook,
showCloseButton = false,
onClose,
onAction,
actionText,
appearance = _constants.SKIN.Warning,
// TODO: add default to skin prop once appearance is removed
title,
size = _constants.SIZE.Medium,
fullWidth = false,
children,
layout = _constants.LAYOUT.Vertical,
border = _constants.BORDER.Standard,
showPrefixIcon = false,
prefixIcon
} = _ref,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var skin = props.skin || appearance;
var isExperimentalDark = skin === _constants.SKIN.ExperimentalDark;
var icon = showPrefixIcon && (prefixIcon !== null && prefixIcon !== void 0 ? prefixIcon : DEFAULT_ICONS[skin]);
(0, _react.useEffect)(() => {
if (appearance) {
(0, _deprecationLog.default)('<SectionHelper/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [appearance]);
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
"data-skin": skin,
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.root, {
skin,
withCloseBtn: showCloseButton,
fullWidth,
size,
border,
hasPrefix: showPrefixIcon
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 5
}
}, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.close, {
size
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
dataHook: _constants.dataHooks.closeButton,
size: "medium",
skin: isExperimentalDark ? 'light' : 'dark',
onClick: onClose,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}
})), icon && /*#__PURE__*/_react.default.createElement(_Text.default, {
dataHook: _constants.dataHooks.prefix,
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.prefix),
light: isExperimentalDark,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}
}, icon), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.content, {
size,
layout
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.textContainer),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 9
}
}, title && /*#__PURE__*/_react.default.createElement("div", {
className: _SectionHelperSt.classes.title,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _SectionHelperSt.classes.text,
light: isExperimentalDark,
dataHook: _constants.dataHooks.title,
size: "small",
weight: "bold",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}
}, title)), /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _SectionHelperSt.classes.text,
size: "small",
light: isExperimentalDark,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 11
}
}, children)), actionText && /*#__PURE__*/_react.default.createElement(_Button.default, {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.action),
size: size === 'small' ? 'tiny' : 'small',
skin: isExperimentalDark ? 'standard' : 'dark',
priority: isExperimentalDark ? 'primary' : 'secondary',
onClick: onAction,
dataHook: _constants.dataHooks.actionButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 11
}
}, actionText)));
};
SectionHelper.displayName = 'SectionHelper';
SectionHelper.propTypes = {
dataHook: _propTypes.default.string,
appearance: _propTypes.default.oneOf(['warning', 'standard', 'danger', 'success', 'premium', 'preview', 'experimentalDark']),
skin: _propTypes.default.oneOf(['warning', 'standard', 'danger', 'success', 'premium', 'preview', 'experimentalDark']),
title: _propTypes.default.node,
size: _propTypes.default.oneOf(['small', 'medium']),
showCloseButton: _propTypes.default.bool,
onClose: _propTypes.default.func,
onAction: _propTypes.default.func,
actionText: _propTypes.default.string,
children: _propTypes.default.node,
fullWidth: _propTypes.default.bool,
layout: _propTypes.default.oneOf(['vertical', 'horizontal']),
border: _propTypes.default.oneOf(['standard', 'topBottom']),
showPrefixIcon: _propTypes.default.any,
prefixIcon: _propTypes.default.any
};
var _default = exports.default = SectionHelper;
//# sourceMappingURL=SectionHelper.js.map