@imposium-hub/components 2.5.4-2 → 2.5.4-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/confirm-modal/ConfirmModal.d.ts +8 -0
- package/dist/cjs/components/confirm-modal/ConfirmModal.js +39 -0
- package/dist/cjs/components/confirm-modal/ConfirmModal.js.map +1 -0
- package/dist/esm/components/confirm-modal/ConfirmModal.d.ts +8 -0
- package/dist/esm/components/confirm-modal/ConfirmModal.js +29 -0
- package/dist/esm/components/confirm-modal/ConfirmModal.js.map +1 -0
- package/package.json +4 -3
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ConfirmModal = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var react_dom_1 = __importDefault(require("react-dom"));
|
|
9
|
+
var react_hotkeys_hook_1 = require("react-hotkeys-hook");
|
|
10
|
+
var Modal_1 = __importDefault(require("../modal/Modal"));
|
|
11
|
+
var Button_1 = __importDefault(require("../button/Button"));
|
|
12
|
+
var copy_1 = require("../../constants/copy");
|
|
13
|
+
var Section_1 = __importDefault(require("../section/Section"));
|
|
14
|
+
var ConfirmModal = function (_a) {
|
|
15
|
+
var onClose = _a.onClose, isOpen = _a.isOpen, onYes = _a.onYes, onNo = _a.onNo, storyName = _a.storyName;
|
|
16
|
+
(0, react_hotkeys_hook_1.useHotkeys)('enter', onYes, { enableOnFormTags: true });
|
|
17
|
+
var yes = copy_1.confirm.yes, no = copy_1.confirm.no, cancel = copy_1.confirm.cancel, title = copy_1.confirm.title;
|
|
18
|
+
var modal = (react_1.default.createElement(Modal_1.default, { onRequestClose: onClose, wrapperStyle: {
|
|
19
|
+
left: '0px',
|
|
20
|
+
width: '100%',
|
|
21
|
+
}, style: {
|
|
22
|
+
width: '400px',
|
|
23
|
+
height: '13%',
|
|
24
|
+
top: 'calc(50% - 150px)',
|
|
25
|
+
left: 'calc((100% - 400px) / 2)'
|
|
26
|
+
}, isOpen: isOpen },
|
|
27
|
+
react_1.default.createElement(Section_1.default, { title: title.replace('[story]', storyName) },
|
|
28
|
+
react_1.default.createElement("div", { className: 'confirm-modal' },
|
|
29
|
+
react_1.default.createElement("div", { className: 'confirm-buttons' },
|
|
30
|
+
react_1.default.createElement(Button_1.default, { onClick: onClose, size: 'large', color: 'default' }, cancel),
|
|
31
|
+
react_1.default.createElement(Button_1.default, { onClick: onNo, size: 'large', color: 'default' }, no),
|
|
32
|
+
react_1.default.createElement(Button_1.default, { onClick: onYes, size: 'large', style: 'bold', color: 'primary' }, yes))))));
|
|
33
|
+
var PortalContextComponent = function () {
|
|
34
|
+
return react_dom_1.default.createPortal(modal, document.querySelector('#react-root'));
|
|
35
|
+
};
|
|
36
|
+
return react_1.default.createElement(PortalContextComponent, null);
|
|
37
|
+
};
|
|
38
|
+
exports.ConfirmModal = ConfirmModal;
|
|
39
|
+
//# sourceMappingURL=ConfirmModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../../src/components/confirm-modal/ConfirmModal.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,wDAAiC;AACjC,yDAAgD;AAChD,yDAAmC;AACnC,4DAAsC;AACtC,6CAAuD;AACvD,+DAAyC;AAClC,IAAM,YAAY,GAAG,UAAC,EAA2C;QAAzC,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA;IAClE,IAAA,+BAAU,EAAC,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/C,IAAA,GAAG,GAAwB,cAAI,IAA5B,EAAE,EAAE,GAAoB,cAAI,GAAxB,EAAE,MAAM,GAAY,cAAI,OAAhB,EAAE,KAAK,GAAK,cAAI,MAAT,CAAU;IAExC,IAAM,KAAK,GAAG,CACV,8BAAC,eAAK,IACF,cAAc,EAAE,OAAO,EACvB,YAAY,EAAE;YACV,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,MAAM;SAChB,EACD,KAAK,EAAE;YACH,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,0BAA0B;SACnC,EACD,MAAM,EAAE,MAAM;QACd,8BAAC,iBAAO,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/C,uCAAK,SAAS,EAAC,eAAe;gBAC1B,uCAAK,SAAS,EAAC,iBAAiB;oBAC5B,8BAAC,gBAAM,IACH,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,IACd,MAAM,CACF;oBACT,8BAAC,gBAAM,IACH,OAAO,EAAE,IAAI,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,IACd,EAAE,CACE;oBACT,8BAAC,gBAAM,IACH,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,SAAS,IACd,GAAG,CACC,CACP,CACJ,CACA,CACN,CACX,CAAC;IAEF,IAAM,sBAAsB,GAAG;QAC3B,OAAA,mBAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAAnE,CAAmE,CAAC;IAExE,OAAO,8BAAC,sBAAsB,OAAG,CAAC;AACtC,CAAC,CAAC;AAlDW,QAAA,YAAY,gBAkDvB"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom';
|
|
3
|
+
import { useHotkeys } from 'react-hotkeys-hook';
|
|
4
|
+
import Modal from '../modal/Modal';
|
|
5
|
+
import Button from '../button/Button';
|
|
6
|
+
import { confirm as copy } from '../../constants/copy';
|
|
7
|
+
import Section from '../section/Section';
|
|
8
|
+
export const ConfirmModal = ({ onClose, isOpen, onYes, onNo, storyName }) => {
|
|
9
|
+
useHotkeys('enter', onYes, { enableOnFormTags: true });
|
|
10
|
+
const { yes, no, cancel, title } = copy;
|
|
11
|
+
const modal = (React.createElement(Modal, { onRequestClose: onClose, wrapperStyle: {
|
|
12
|
+
left: '0px',
|
|
13
|
+
width: '100%',
|
|
14
|
+
}, style: {
|
|
15
|
+
width: '400px',
|
|
16
|
+
height: '13%',
|
|
17
|
+
top: 'calc(50% - 150px)',
|
|
18
|
+
left: 'calc((100% - 400px) / 2)'
|
|
19
|
+
}, isOpen: isOpen },
|
|
20
|
+
React.createElement(Section, { title: title.replace('[story]', storyName) },
|
|
21
|
+
React.createElement("div", { className: 'confirm-modal' },
|
|
22
|
+
React.createElement("div", { className: 'confirm-buttons' },
|
|
23
|
+
React.createElement(Button, { onClick: onClose, size: 'large', color: 'default' }, cancel),
|
|
24
|
+
React.createElement(Button, { onClick: onNo, size: 'large', color: 'default' }, no),
|
|
25
|
+
React.createElement(Button, { onClick: onYes, size: 'large', style: 'bold', color: 'primary' }, yes))))));
|
|
26
|
+
const PortalContextComponent = () => ReactDOM.createPortal(modal, document.querySelector('#react-root'));
|
|
27
|
+
return React.createElement(PortalContextComponent, null);
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=ConfirmModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfirmModal.js","sourceRoot":"","sources":["../../../../src/components/confirm-modal/ConfirmModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IACxE,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAExC,MAAM,KAAK,GAAG,CACV,oBAAC,KAAK,IACF,cAAc,EAAE,OAAO,EACvB,YAAY,EAAE;YACV,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,MAAM;SAChB,EACD,KAAK,EAAE;YACH,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,mBAAmB;YACxB,IAAI,EAAE,0BAA0B;SACnC,EACD,MAAM,EAAE,MAAM;QACd,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/C,6BAAK,SAAS,EAAC,eAAe;gBAC1B,6BAAK,SAAS,EAAC,iBAAiB;oBAC5B,oBAAC,MAAM,IACH,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,IACd,MAAM,CACF;oBACT,oBAAC,MAAM,IACH,OAAO,EAAE,IAAI,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,IACd,EAAE,CACE;oBACT,oBAAC,MAAM,IACH,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,MAAM,EACZ,KAAK,EAAC,SAAS,IACd,GAAG,CACC,CACP,CACJ,CACA,CACN,CACX,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAChC,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;IAExE,OAAO,oBAAC,sBAAsB,OAAG,CAAC;AACtC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@imposium-hub/components",
|
|
3
|
-
"version": "2.5.4-
|
|
3
|
+
"version": "2.5.4-3",
|
|
4
4
|
"description": "React & Typescript component / asset library for Imposium front-ends",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"js-cookie": "^2.2.1",
|
|
45
45
|
"lodash": "^4.17.21",
|
|
46
46
|
"moment": "^2.29.1",
|
|
47
|
+
"react-hotkeys-hook": "^4.4.1",
|
|
47
48
|
"react-merge-refs": "^1.1.0",
|
|
48
49
|
"react-moveable": "^0.26.1",
|
|
49
50
|
"react-select": "^5.8.0",
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"@fortawesome/pro-light-svg-icons": "^6.1.1",
|
|
57
58
|
"@fortawesome/pro-solid-svg-icons": "^6.1.1",
|
|
58
59
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
59
|
-
"@imposium-hub/react-textarea-autocomplete": "^4.9.13-
|
|
60
|
+
"@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
|
|
60
61
|
"axios": "^0.21.1",
|
|
61
62
|
"hotkeys-js": "^3.6.12",
|
|
62
63
|
"localforage": "^1.7.3",
|
|
@@ -81,7 +82,7 @@
|
|
|
81
82
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
82
83
|
"@imposium-hub/eslint-config": "^1.1.0",
|
|
83
84
|
"@imposium-hub/prettier-config": "^2.1.0",
|
|
84
|
-
"@imposium-hub/react-textarea-autocomplete": "^4.9.13-
|
|
85
|
+
"@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
|
|
85
86
|
"@storybook/addon-actions": "^6.4.22",
|
|
86
87
|
"@storybook/addon-docs": "^6.4.22",
|
|
87
88
|
"@storybook/addon-essentials": "^6.4.22",
|