@onesy/ui-react
Version:
UI for React
181 lines (177 loc) • 12.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Button = _interopRequireDefault(require("../Button"));
var _Context = _interopRequireDefault(require("./Context"));
var _ModalHeader = _interopRequireDefault(require("../ModalHeader"));
var _ModalFooter = _interopRequireDefault(require("../ModalFooter"));
var _ModalTitle = _interopRequireDefault(require("../ModalTitle"));
var _ModalMain = _interopRequireDefault(require("../ModalMain"));
var _ModalText = _interopRequireDefault(require("../ModalText"));
var _Modal = _interopRequireDefault(require("../Modal"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["throwError", "onOpen", "onClose", "className", "children"],
_excluded2 = ["name", "description", "buttons", "throwError", "ButtonNegativeProps", "ButtonPositiveProps", "modal"];
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; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
'& .onesy-ModalMain-root': {
padding: `6px 0 10px`
},
'& .onesy-ModalFooter-root': {
padding: `12px 0 12px`
},
'& .onesy-Modal-background:not(.onesy-Modal-background-invisible)': {
background: theme.methods.palette.color.colorToRgb(theme.methods.palette.color.value('default', 10), theme.palette.light ? 20 : 40)
}
},
surface: {
'&.onesy-Surface-root': {
background: theme.palette.color.primary[theme.palette.light ? 99 : 5],
paddingBottom: '8px'
}
}
}), {
name: 'onesy-Confirm'
});
const Confirm = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _buttons$negative, _buttons$negative2, _buttons$positive, _buttons$positive2;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyConfirm) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const ModalHeader = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ModalHeader) || _ModalHeader.default;
const ModalFooter = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ModalFooter) || _ModalFooter.default;
const ModalTitle = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.ModalTitle) || _ModalTitle.default;
const ModalMain = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.ModalMain) || _ModalMain.default;
const ModalText = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ModalText) || _ModalText.default;
const Modal = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Modal) || _Modal.default;
const Button = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Button) || _Button.default;
const {
throwError,
onOpen,
onClose,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [openModal, setOpenModal] = _react.default.useState(false);
const refs = {
value: _react.default.useRef({}),
modal: _react.default.useRef(null),
props: _react.default.useRef(null),
promise: {
resolve: _react.default.useRef(null),
reject: _react.default.useRef(null)
}
};
refs.props.current = props;
const open = value => {
if (!openModal) {
var _refs$modal$current$b, _refs$modal$current$b2, _value$buttons, _value$buttons2, _value$buttons3, _value$buttons4;
refs.modal.current = _objectSpread({}, value);
// Defaults
refs.modal.current.name = (value === null || value === void 0 ? void 0 : value.name) !== undefined ? value === null || value === void 0 ? void 0 : value.name : l('Confirmation');
refs.modal.current.description = (value === null || value === void 0 ? void 0 : value.description) !== undefined ? value === null || value === void 0 ? void 0 : value.description : l('Are you sure you want to proceed?');
if (((_refs$modal$current$b = refs.modal.current.buttons) === null || _refs$modal$current$b === void 0 || (_refs$modal$current$b = _refs$modal$current$b.negative) === null || _refs$modal$current$b === void 0 ? void 0 : _refs$modal$current$b.text) === undefined) (0, _utils.setObjectValue)(refs.modal.current, 'buttons.negative.text', '');
if (((_refs$modal$current$b2 = refs.modal.current.buttons) === null || _refs$modal$current$b2 === void 0 || (_refs$modal$current$b2 = _refs$modal$current$b2.positive) === null || _refs$modal$current$b2 === void 0 ? void 0 : _refs$modal$current$b2.text) === undefined) (0, _utils.setObjectValue)(refs.modal.current, 'buttons.positive.text', '');
refs.modal.current.buttons.negative.text = (value === null || value === void 0 || (_value$buttons = value.buttons) === null || _value$buttons === void 0 || (_value$buttons = _value$buttons.negative) === null || _value$buttons === void 0 ? void 0 : _value$buttons.text) !== undefined ? value === null || value === void 0 || (_value$buttons2 = value.buttons) === null || _value$buttons2 === void 0 || (_value$buttons2 = _value$buttons2.negative) === null || _value$buttons2 === void 0 ? void 0 : _value$buttons2.text : l('Cancel');
refs.modal.current.buttons.positive.text = (value === null || value === void 0 || (_value$buttons3 = value.buttons) === null || _value$buttons3 === void 0 || (_value$buttons3 = _value$buttons3.positive) === null || _value$buttons3 === void 0 ? void 0 : _value$buttons3.text) !== undefined ? value === null || value === void 0 || (_value$buttons4 = value.buttons) === null || _value$buttons4 === void 0 || (_value$buttons4 = _value$buttons4.positive) === null || _value$buttons4 === void 0 ? void 0 : _value$buttons4.text : l('Confirm');
refs.modal.current.throwError = (value === null || value === void 0 ? void 0 : value.throwError) !== undefined ? value.throwError : refs.props.current.throwError;
const promise = new Promise((resolve, reject) => {
refs.promise.resolve.current = resolve;
refs.promise.reject.current = reject;
});
setOpenModal(true);
if ((0, _utils.is)('function', onOpen)) onOpen();
return promise;
}
};
const close = (confirm = false) => {
if (openModal) {
var _refs$promise$resolve, _refs$promise$resolve2, _refs$promise$resolve3, _refs$promise$resolve4, _refs$promise$reject$, _refs$promise$reject;
setOpenModal(false);
if ((0, _utils.is)('function', onClose)) onClose();
// Resolve or reject
if (confirm) (_refs$promise$resolve = (_refs$promise$resolve2 = refs.promise.resolve).current) === null || _refs$promise$resolve === void 0 || _refs$promise$resolve.call(_refs$promise$resolve2, confirm);else !refs.modal.current.throwError ? (_refs$promise$resolve3 = (_refs$promise$resolve4 = refs.promise.resolve).current) === null || _refs$promise$resolve3 === void 0 ? void 0 : _refs$promise$resolve3.call(_refs$promise$resolve4, false) : (_refs$promise$reject$ = (_refs$promise$reject = refs.promise.reject).current) === null || _refs$promise$reject$ === void 0 ? void 0 : _refs$promise$reject$.call(_refs$promise$reject);
refs.promise.resolve.current = undefined;
refs.promise.reject.current = undefined;
}
};
const _ref = refs.modal.current || {},
{
name,
description,
buttons,
throwError: throwError_,
ButtonNegativeProps,
ButtonPositiveProps,
modal
} = _ref,
otherModal = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
// Add to the value
refs.value.current.open = open;
refs.value.current.close = close;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
value: refs.value.current,
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread(_objectSpread({
open: openModal,
onClose: close,
SurfaceProps: {
tonal: true,
color: 'primary',
className: (0, _styleReact.classNames)([classes.surface])
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Confirm', theme) && [`onesy-Confirm-root`], className, classes.root])
}, other), otherModal), {}, {
children: (0, _utils.is)('function', modal) ? modal({
resolve: refs.promise.resolve.current,
reject: refs.promise.reject.current
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [name !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalHeader, {
children: (0, _utils.is)('string', name) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalTitle, {
version: "t1",
weight: 500,
children: name || l('Confirmation')
}) : name
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalMain, {
children: (0, _utils.is)('string', description) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ModalText, {
version: "b1",
weight: 200,
children: description !== undefined ? description : l('Are you sure you want to proceed?')
}) : description
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ModalFooter, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
version: "text",
color: "inherit",
tonal: true,
onClick: () => close(false)
}, ButtonNegativeProps), {}, {
children: (buttons === null || buttons === void 0 || (_buttons$negative = buttons.negative) === null || _buttons$negative === void 0 ? void 0 : _buttons$negative.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$negative2 = buttons.negative) === null || _buttons$negative2 === void 0 ? void 0 : _buttons$negative2.text : l('Cancel')
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
version: "text",
color: "inherit",
tonal: true,
onClick: () => close(true)
}, ButtonPositiveProps), {}, {
children: (buttons === null || buttons === void 0 || (_buttons$positive = buttons.positive) === null || _buttons$positive === void 0 ? void 0 : _buttons$positive.text) !== undefined ? buttons === null || buttons === void 0 || (_buttons$positive2 = buttons.positive) === null || _buttons$positive2 === void 0 ? void 0 : _buttons$positive2.text : l('Confirm')
}))]
})]
})
}))]
});
};
Confirm.displayName = 'onesy-Confirm';
var _default = exports.default = Confirm;