@wix/design-system
Version:
@wix/design-system
226 lines (225 loc) • 8.3 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 _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 _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _excluded = ["dataHook", "showCloseButton", "onClose", "onAction", "actionText", "actionDisabled", "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 SectionHelper = _ref => {
var {
dataHook,
showCloseButton = false,
onClose,
onAction,
actionText,
actionDisabled = false,
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 icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('SectionHelper', {
InfoCircle: _wixUiIconsCommon.InfoCircle,
StatusAlert: _wixUiIconsCommon.StatusAlert,
StatusComplete: _wixUiIconsCommon.StatusComplete,
StatusWarning: _wixUiIconsCommon.StatusWarning
});
var DEFAULT_ICONS = {
[_constants.SKIN.Standard]: /*#__PURE__*/_react.default.createElement(icons.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 22
}
}),
[_constants.SKIN.Success]: /*#__PURE__*/_react.default.createElement(icons.StatusComplete, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 21
}
}),
[_constants.SKIN.Warning]: /*#__PURE__*/_react.default.createElement(icons.StatusWarning, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 21
}
}),
[_constants.SKIN.Danger]: /*#__PURE__*/_react.default.createElement(icons.StatusAlert, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 20
}
}),
[_constants.SKIN.Premium]: /*#__PURE__*/_react.default.createElement(icons.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 21
}
}),
[_constants.SKIN.Preview]: /*#__PURE__*/_react.default.createElement(icons.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 21
}
}),
[_constants.SKIN.ExperimentalDark]: /*#__PURE__*/_react.default.createElement(icons.InfoCircle, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 30
}
})
};
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: 66,
columnNumber: 5
}
}, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.close, {
size
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
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: 80,
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: 90,
columnNumber: 9
}
}, icon), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.content, {
size,
layout
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _SectionHelperSt.st)(_SectionHelperSt.classes.textContainer),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 9
}
}, title && /*#__PURE__*/_react.default.createElement("div", {
className: _SectionHelperSt.classes.title,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 102,
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: 103,
columnNumber: 15
}
}, title)), /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _SectionHelperSt.classes.text,
size: "small",
light: isExperimentalDark,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
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',
disabled: actionDisabled,
onClick: onAction,
dataHook: _constants.dataHooks.actionButton,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 11
}
}, actionText)));
};
SectionHelper.displayName = 'SectionHelper';
var _default = exports.default = SectionHelper;
//# sourceMappingURL=SectionHelper.js.map