@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
216 lines (187 loc) • 10.8 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DesktopNotificationUI = DesktopNotificationUI;
exports["default"] = DesktopNotification;
var _react = _interopRequireWildcard(require("react"));
var _defaultProps = require("./props/defaultProps");
var _propTypes = require("./props/propTypes");
var _Layout = require("@zohodesk/components/es/Layout");
var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");
var _AutoClose = _interopRequireDefault(require("../../../actions/AutoClose"));
var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction"));
var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
var _DesktopNotificationModule = _interopRequireDefault(require("./DesktopNotification.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var buttonPaletteObject = {
success: {
buttonPalette: 'successFilled'
},
error: {
buttonPalette: 'dangerFilled'
},
danger: {
buttonPalette: 'dangerFilled'
},
warning: {
buttonPalette: 'dangerFilled'
},
info: {
buttonPalette: 'primaryFilled'
},
notification: {
buttonPalette: 'primaryFilled'
},
primary: {
buttonPalette: 'primaryFilled'
}
};
function DesktopNotificationUI(props) {
var _props$type = props.type,
type = _props$type === void 0 ? '' : _props$type,
submitText = props.submitText,
cancelText = props.cancelText,
submitType = props.submitType,
isMore = props.isMore,
message = props.message,
isAnimate = props.isAnimate,
getBottomContainer = props.getBottomContainer,
getSubmitContainer = props.getSubmitContainer,
onSubmit = props.onSubmit,
onCancel = props.onCancel,
dataId = props.dataId,
dataSelectorId = props.dataSelectorId,
isClose = props.isClose,
needAutoZindex = props.needAutoZindex,
title = props.title,
subTitle = props.subTitle,
needIcon = props.needIcon,
info = props.info,
secondaryInfo = props.secondaryInfo,
titleVariant = props.titleVariant,
getSectionContainer = props.getSectionContainer,
isShrinkView = props.isShrinkView,
size = props.size,
onClose = props.onClose,
needClose = props.needClose,
_props$customClass = props.customClass,
customClass = _props$customClass === void 0 ? {} : _props$customClass,
_props$i18nKeys = props.i18nKeys,
i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
customProps = props.customProps,
responsiveId = props.responsiveId;
var _i18nKeys$closeTitle = i18nKeys.closeTitle,
closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
var containerClass = customClass.containerClass;
var _ref = buttonPaletteObject[type] || {},
_ref$buttonPalette = _ref.buttonPalette,
buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;
var _customProps$ExtraPro = customProps.ExtraProps,
ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
function onClickSubmit(e) {
onSubmit && onSubmit();
}
function onClickCancel(e) {
onCancel && onCancel();
}
var animateClass = isClose ? _DesktopNotificationModule["default"].rightanimate : _DesktopNotificationModule["default"].leftanimate;
var animateRemoveClass = isClose ? _DesktopNotificationModule["default"].rightanimate : _DesktopNotificationModule["default"].leftnoanimate;
var getNextIndex = (0, _ZindexProvider.useZIndex)();
var Zindex = isAnimate ? getNextIndex() : null;
var uiVariantOne = title && (info || secondaryInfo);
var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
function responsiveFunc(_ref2) {
var mediaQueryOR = _ref2.mediaQueryOR;
return {
uptoTablet: mediaQueryOR([{
maxWidth: 760
}])
};
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: _DesktopNotificationModule["default"].parentElement,
style: needAutoZindex && isAnimate ? {
zIndex: "".concat(Zindex)
} : {},
"data-selector-id": dataSelectorId
}, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
query: responsiveFunc,
responsiveId: responsiveId
}, function (_ref3) {
var uptoTablet = _ref3.uptoTablet;
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, " ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
isCover: false,
dataId: dataId,
isInline: uiVariantTwo
}, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
type: type,
title: title,
variant: titleVariant,
needIcon: needIcon,
onClose: onClose,
closeTitle: closeTitle,
dataId: "".concat(dataId, "_close"),
needClose: needClose
})), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
alignBox: "column"
}, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
}, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
}, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
}, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
className: _DesktopNotificationModule["default"].footer
}, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_DesktopNotificationModule["default"].message),
tagName: "p"
}, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
size: "small",
paddingLeftSize: "xmedium"
}, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
onClick: onClickSubmit,
"data-id": "".concat(dataId, "_submitButton"),
"data-test-id": "".concat(dataId, "_submitButton")
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
align: "vertical",
alignBox: "row"
}, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
text: submitText,
palette: submitType ? submitType : buttonPalette
})))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
text: cancelText,
palette: "secondary",
dataId: "".concat(dataId, "_cancelButton"),
onClick: onClickCancel
})) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
}));
}
DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;
function DesktopNotification(props) {
return /*#__PURE__*/_react["default"].createElement(_AutoClose["default"], _extends({}, props, {
Element: DesktopNotificationUI
}));
}
DesktopNotification.propTypes = _propTypes.propTypes;
DesktopNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
// DesktopNotification.docs = {
// componentGroup: 'DesktopNotification',
// folderName: 'Alert'
// };
// }