@onesy/ui-react
Version:
UI for React
171 lines (168 loc) • 7.68 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from 'react';
import { is, setObjectValue } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import ButtonElement from '../Button';
import ConfirmContext from './Context';
import ModalHeaderElement from '../ModalHeader';
import ModalFooterElement from '../ModalFooter';
import ModalTitleElement from '../ModalTitle';
import ModalMainElement from '../ModalMain';
import ModalTextElement from '../ModalText';
import ModalElement from '../Modal';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const useStyle = styleMethod(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_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyConfirm?.props?.default), props_);
const ModalHeader = theme?.elements?.ModalHeader || ModalHeaderElement;
const ModalFooter = theme?.elements?.ModalFooter || ModalFooterElement;
const ModalTitle = theme?.elements?.ModalTitle || ModalTitleElement;
const ModalMain = theme?.elements?.ModalMain || ModalMainElement;
const ModalText = theme?.elements?.ModalText || ModalTextElement;
const Modal = theme?.elements?.Modal || ModalElement;
const Button = theme?.elements?.Button || ButtonElement;
const {
throwError,
onOpen,
onClose,
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [openModal, setOpenModal] = React.useState(false);
const refs = {
value: React.useRef({}),
modal: React.useRef(null),
props: React.useRef(null),
promise: {
resolve: React.useRef(null),
reject: React.useRef(null)
}
};
refs.props.current = props;
const open = value => {
if (!openModal) {
refs.modal.current = _objectSpread({}, value);
// Defaults
refs.modal.current.name = value?.name !== undefined ? value?.name : l('Confirmation');
refs.modal.current.description = value?.description !== undefined ? value?.description : l('Are you sure you want to proceed?');
if (refs.modal.current.buttons?.negative?.text === undefined) setObjectValue(refs.modal.current, 'buttons.negative.text', '');
if (refs.modal.current.buttons?.positive?.text === undefined) setObjectValue(refs.modal.current, 'buttons.positive.text', '');
refs.modal.current.buttons.negative.text = value?.buttons?.negative?.text !== undefined ? value?.buttons?.negative?.text : l('Cancel');
refs.modal.current.buttons.positive.text = value?.buttons?.positive?.text !== undefined ? value?.buttons?.positive?.text : l('Confirm');
refs.modal.current.throwError = 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 (is('function', onOpen)) onOpen();
return promise;
}
};
const close = (confirm = false) => {
if (openModal) {
setOpenModal(false);
if (is('function', onClose)) onClose();
// Resolve or reject
if (confirm) refs.promise.resolve.current?.(confirm);else !refs.modal.current.throwError ? refs.promise.resolve.current?.(false) : refs.promise.reject.current?.();
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 = _objectWithoutProperties(_ref, _excluded2);
// Add to the value
refs.value.current.open = open;
refs.value.current.close = close;
return /*#__PURE__*/_jsxs(ConfirmContext.Provider, {
value: refs.value.current,
children: [children, /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread(_objectSpread({
open: openModal,
onClose: close,
SurfaceProps: {
tonal: true,
color: 'primary',
className: classNames([classes.surface])
},
className: classNames([staticClassName('Confirm', theme) && [`onesy-Confirm-root`], className, classes.root])
}, other), otherModal), {}, {
children: is('function', modal) ? modal({
resolve: refs.promise.resolve.current,
reject: refs.promise.reject.current
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [name !== false && /*#__PURE__*/_jsx(ModalHeader, {
children: is('string', name) ? /*#__PURE__*/_jsx(ModalTitle, {
version: "t1",
weight: 500,
children: name || l('Confirmation')
}) : name
}), /*#__PURE__*/_jsx(ModalMain, {
children: is('string', description) ? /*#__PURE__*/_jsx(ModalText, {
version: "b1",
weight: 200,
children: description !== undefined ? description : l('Are you sure you want to proceed?')
}) : description
}), /*#__PURE__*/_jsxs(ModalFooter, {
children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
version: "text",
color: "inherit",
tonal: true,
onClick: () => close(false)
}, ButtonNegativeProps), {}, {
children: buttons?.negative?.text !== undefined ? buttons?.negative?.text : l('Cancel')
})), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
version: "text",
color: "inherit",
tonal: true,
onClick: () => close(true)
}, ButtonPositiveProps), {}, {
children: buttons?.positive?.text !== undefined ? buttons?.positive?.text : l('Confirm')
}))]
})]
})
}))]
});
};
Confirm.displayName = 'onesy-Confirm';
export default Confirm;