Skip to content

Commit 7994a58

Browse files
tiller1010tiller1010
committed
Force close modals
1 parent f561225 commit 7994a58

File tree

6 files changed

+27
-19
lines changed

6 files changed

+27
-19
lines changed

‎js/components/NotificationModal.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ var React = require("react");
44
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
55
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
66
var NotificationModal = function (props) {
7+
var _a = React.useState(false), forceClosed = _a[0], setForceClosed = _a[1];
78
var buttonAnchor = props.buttonAnchor, modalTitle = props.modalTitle, modalContent = props.modalContent;
8-
return (React.createElement("section", { className: "modal--show is-active", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true" },
9+
return (React.createElement("section", { className: "modal--show is-active", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true", style: forceClosed ? { display: 'none' } : {} },
910
React.createElement("div", { className: "modal-inner" },
1011
React.createElement("header", { id: "modal-label" },
1112
React.createElement("h2", null, modalTitle)),
1213
React.createElement("div", { className: "modal-content", dangerouslySetInnerHTML: { __html: modalContent } }),
1314
React.createElement("footer", { className: "flex x-space-around" },
14-
React.createElement("a", { href: "#!", className: "button" },
15+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "button" },
1516
"Close",
1617
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes })))),
17-
React.createElement("a", { href: "#!", className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
18+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
1819
};
1920
exports.default = NotificationModal;

‎js/components/NotificationModal.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,29 @@ import { faUpload, faLongArrowAltRight, faTimes } from '@fortawesome/free-solid-
44

55
const NotificationModal = (props) => {
66

7+
let [forceClosed, setForceClosed] = React.useState(false);
8+
79
let {
810
buttonAnchor,
911
modalTitle,
1012
modalContent,
1113
} = props;
1214

1315
return (
14-
<section className="modal--show is-active" id={buttonAnchor} tabIndex={-1} role="dialog" aria-labelledby="modal-label" aria-hidden="true">
16+
<section className="modal--show is-active" id={buttonAnchor} tabIndex={-1} role="dialog" aria-labelledby="modal-label" aria-hidden="true" style={forceClosed ? { display: 'none' } : {}}>
1517
<div className="modal-inner">
1618
<header id="modal-label">
1719
<h2>{ modalTitle }</h2>
1820
</header>
1921
<div className="modal-content" dangerouslySetInnerHTML={{ __html: modalContent }}></div>
2022
<footer className="flex x-space-around">
21-
<a href="#!" className="button">
23+
<a href="#!" onClick={() => setForceClosed(true)} className="button">
2224
Close
2325
<FontAwesomeIcon icon={faTimes}/>
2426
</a>
2527
</footer>
2628
</div>
27-
<a href="#!" className="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">?</a>
29+
<a href="#!" onClick={() => setForceClosed(true)} className="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">?</a>
2830
</section>
2931
);
3032
}

‎js/components/RemoveConfirmationModal.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ var React = require("react");
44
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
55
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
66
var RemoveConfirmationModal = function (props) {
7+
var _a = React.useState(false), forceClosed = _a[0], setForceClosed = _a[1];
78
var buttonText = props.buttonText, buttonAnchor = props.buttonAnchor, modalTitle = props.modalTitle, modalContent = props.modalContent, handleDelete = props.handleDelete;
8-
return (React.createElement("section", { className: "modal--show", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true" },
9+
return (React.createElement("section", { className: "modal--show", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true", style: forceClosed ? { display: 'none' } : {} },
910
React.createElement("div", { className: "modal-inner" },
1011
React.createElement("header", { id: "modal-label" },
1112
React.createElement("h2", null, modalTitle)),
@@ -14,9 +15,9 @@ var RemoveConfirmationModal = function (props) {
1415
React.createElement("a", { className: "button", href: "#!", onClick: handleDelete },
1516
buttonText,
1617
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTrash })),
17-
React.createElement("a", { href: "#!", className: "button" },
18+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "button" },
1819
"Close",
1920
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes })))),
20-
React.createElement("a", { href: "#!", className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
21+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
2122
};
2223
exports.default = RemoveConfirmationModal;

‎js/components/RemoveConfirmationModal.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { faUpload, faLongArrowAltRight, faTrash, faTimes } from '@fortawesome/fr
44

55
const RemoveConfirmationModal = (props) => {
66

7+
let [forceClosed, setForceClosed] = React.useState(false);
8+
79
let {
810
buttonText,
911
buttonAnchor,
@@ -13,7 +15,7 @@ const RemoveConfirmationModal = (props) => {
1315
} = props;
1416

1517
return (
16-
<section className="modal--show" id={buttonAnchor} tabIndex={-1} role="dialog" aria-labelledby="modal-label" aria-hidden="true">
18+
<section className="modal--show" id={buttonAnchor} tabIndex={-1} role="dialog" aria-labelledby="modal-label" aria-hidden="true" style={forceClosed ? { display: 'none' } : {}}>
1719
<div className="modal-inner">
1820
<header id="modal-label">
1921
<h2>{ modalTitle }</h2>
@@ -26,13 +28,13 @@ const RemoveConfirmationModal = (props) => {
2628
{ buttonText }
2729
<FontAwesomeIcon icon={faTrash}/>
2830
</a>
29-
<a href="#!" className="button">
31+
<a href="#!" onClick={() => setForceClosed(true)} className="button">
3032
Close
3133
<FontAwesomeIcon icon={faTimes}/>
3234
</a>
3335
</footer>
3436
</div>
35-
<a href="#!" className="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">?</a>
37+
<a href="#!" onClick={() => setForceClosed(true)} className="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">?</a>
3638
</section>
3739
);
3840
}

‎public/js/main.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -553,17 +553,18 @@ var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
553553
var react_fontawesome_1 = __webpack_require__(/*! @fortawesome/react-fontawesome */ "./node_modules/@fortawesome/react-fontawesome/index.es.js");
554554
var free_solid_svg_icons_1 = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "./node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
555555
var NotificationModal = function (props) {
556+
var _a = React.useState(false), forceClosed = _a[0], setForceClosed = _a[1];
556557
var buttonAnchor = props.buttonAnchor, modalTitle = props.modalTitle, modalContent = props.modalContent;
557-
return (React.createElement("section", { className: "modal--show is-active", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true" },
558+
return (React.createElement("section", { className: "modal--show is-active", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true", style: forceClosed ? { display: 'none' } : {} },
558559
React.createElement("div", { className: "modal-inner" },
559560
React.createElement("header", { id: "modal-label" },
560561
React.createElement("h2", null, modalTitle)),
561562
React.createElement("div", { className: "modal-content", dangerouslySetInnerHTML: { __html: modalContent } }),
562563
React.createElement("footer", { className: "flex x-space-around" },
563-
React.createElement("a", { href: "#!", className: "button" },
564+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "button" },
564565
"Close",
565566
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes })))),
566-
React.createElement("a", { href: "#!", className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
567+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
567568
};
568569
exports["default"] = NotificationModal;
569570

@@ -2145,8 +2146,9 @@ var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
21452146
var react_fontawesome_1 = __webpack_require__(/*! @fortawesome/react-fontawesome */ "./node_modules/@fortawesome/react-fontawesome/index.es.js");
21462147
var free_solid_svg_icons_1 = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "./node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
21472148
var RemoveConfirmationModal = function (props) {
2149+
var _a = React.useState(false), forceClosed = _a[0], setForceClosed = _a[1];
21482150
var buttonText = props.buttonText, buttonAnchor = props.buttonAnchor, modalTitle = props.modalTitle, modalContent = props.modalContent, handleDelete = props.handleDelete;
2149-
return (React.createElement("section", { className: "modal--show", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true" },
2151+
return (React.createElement("section", { className: "modal--show", id: buttonAnchor, tabIndex: -1, role: "dialog", "aria-labelledby": "modal-label", "aria-hidden": "true", style: forceClosed ? { display: 'none' } : {} },
21502152
React.createElement("div", { className: "modal-inner" },
21512153
React.createElement("header", { id: "modal-label" },
21522154
React.createElement("h2", null, modalTitle)),
@@ -2155,10 +2157,10 @@ var RemoveConfirmationModal = function (props) {
21552157
React.createElement("a", { className: "button", href: "#!", onClick: handleDelete },
21562158
buttonText,
21572159
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTrash })),
2158-
React.createElement("a", { href: "#!", className: "button" },
2160+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "button" },
21592161
"Close",
21602162
React.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes })))),
2161-
React.createElement("a", { href: "#!", className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
2163+
React.createElement("a", { href: "#!", onClick: function () { return setForceClosed(true); }, className: "modal-close", title: "Close this modal", "data-close": "Close", "data-dismiss": "modal" }, "?")));
21622164
};
21632165
exports["default"] = RemoveConfirmationModal;
21642166

‎public/js/main.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)