| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { useEffect, useState } from "@wordpress/element"; |
| 3 |
import { PanelBody, Spinner } from "@wordpress/components"; |
| 4 |
import { TabControls } from "../../../components"; |
| 5 |
import { CloseIcon, PopoverCrosseIcon } from "../icons/ui"; |
| 6 |
|
| 7 |
const ModulesModal = ({ |
| 8 |
moduleName, |
| 9 |
title = "Hello", |
| 10 |
showSidebar, |
| 11 |
setSidebarToggle, |
| 12 |
GeneralTab = null, |
| 13 |
StyleTab = null, |
| 14 |
SettingsTab = null, |
| 15 |
PreviewTab = null, |
| 16 |
settingsValue, |
| 17 |
setSettingsValue, |
| 18 |
updateModuleSettings, |
| 19 |
}) => { |
| 20 |
const [activePanel, setActivePanel] = useState(title); |
| 21 |
const [loading, setLoading] = useState(false); |
| 22 |
|
| 23 |
const sidebarCloseHandler = () => { |
| 24 |
document.querySelector("body").classList.remove("show-module-sidebar-popup"); |
| 25 |
setSidebarToggle(false); |
| 26 |
}; |
| 27 |
|
| 28 |
useEffect(() => { |
| 29 |
const closeChangeLog = (e) => { |
| 30 |
if (e.target.classList.contains("show-module-sidebar-popup")) { |
| 31 |
document.querySelector("body").classList.remove("show-module-sidebar-popup"); |
| 32 |
setSidebarToggle(false); |
| 33 |
} |
| 34 |
}; |
| 35 |
document.addEventListener("click", closeChangeLog); |
| 36 |
return () => document.removeEventListener("click", closeChangeLog); |
| 37 |
}, []); |
| 38 |
|
| 39 |
useEffect(() => { |
| 40 |
if (!showSidebar) { |
| 41 |
document.querySelector("body").classList.add("show-module-sidebar-popup"); |
| 42 |
} else { |
| 43 |
document.querySelector("body").classList.remove("show-module-sidebar-popup"); |
| 44 |
} |
| 45 |
}, [showSidebar]); |
| 46 |
|
| 47 |
useEffect(() => { |
| 48 |
if (!loading) { |
| 49 |
return; |
| 50 |
} |
| 51 |
const timeout = setTimeout(() => { |
| 52 |
setLoading(false); |
| 53 |
}, 500); |
| 54 |
|
| 55 |
return () => { |
| 56 |
clearTimeout(timeout); |
| 57 |
}; |
| 58 |
}, [loading]); |
| 59 |
|
| 60 |
useEffect(() => { |
| 61 |
const handleKeyDown = (event) => { |
| 62 |
// Check for Ctrl key (or Command key on Mac) and 'S' key |
| 63 |
if ((event.ctrlKey || event.metaKey) && event.key === "s") { |
| 64 |
event.preventDefault(); |
| 65 |
updateModuleSettings(settingsValue); |
| 66 |
setLoading(true); |
| 67 |
} |
| 68 |
}; |
| 69 |
|
| 70 |
document.addEventListener("keydown", handleKeyDown); |
| 71 |
return () => { |
| 72 |
document.removeEventListener("keydown", handleKeyDown); |
| 73 |
}; |
| 74 |
}, [settingsValue]); |
| 75 |
|
| 76 |
return ( |
| 77 |
<div className={`sp-smart-post-modules-popup-settings-wrapper width-sm`}> |
| 78 |
<div className="sp-smart-post-modules-popup-settings-container"> |
| 79 |
<div className="sp-smart-post-sidebar-popup-header"> |
| 80 |
<div className="sp-smart-post-sidebar-popup-heading-top"> |
| 81 |
<div className="sp-smart-post-sidebar-title">{title}</div> |
| 82 |
<span onClick={sidebarCloseHandler} className="sp-smart-post-sidebar-popup-close"> |
| 83 |
<PopoverCrosseIcon /> |
| 84 |
</span> |
| 85 |
</div> |
| 86 |
</div> |
| 87 |
<div className="sp-smart-post-sidebar-popup-content"> |
| 88 |
<div className="sp-smart-post-module-popup-preview-wrapper"> |
| 89 |
{PreviewTab && ( |
| 90 |
<PreviewTab attributes={settingsValue} props={{ moduleName, setSettingsValue }} /> |
| 91 |
)} |
| 92 |
</div> |
| 93 |
<div className="sp-smart-post-module-popup-sidebar-container"> |
| 94 |
<div className="sp-smart-post-module-popup-sidebar-wrapper sp-smart-post-tab-panel"> |
| 95 |
<PanelBody |
| 96 |
title={title} |
| 97 |
opened={activePanel === title} |
| 98 |
onToggle={() => setActivePanel(activePanel ? "" : title)} |
| 99 |
> |
| 100 |
{!SettingsTab && activePanel === title && ( |
| 101 |
<TabControls |
| 102 |
attributes={settingsValue} |
| 103 |
// setSettingsValue={setSettingsValue} |
| 104 |
GeneralTab={GeneralTab && GeneralTab} |
| 105 |
StyleTab={StyleTab && StyleTab} |
| 106 |
props={{ moduleName, setSettingsValue }} |
| 107 |
/> |
| 108 |
)} |
| 109 |
{SettingsTab && activePanel === title && ( |
| 110 |
<SettingsTab |
| 111 |
attributes={settingsValue} |
| 112 |
setSettingsValue={setSettingsValue} |
| 113 |
props={{ moduleName }} |
| 114 |
/> |
| 115 |
)} |
| 116 |
</PanelBody> |
| 117 |
</div> |
| 118 |
<button |
| 119 |
className={`sp-smart-post-module-popup-sidebar-save-btn ${loading ? " is-busy is-disabled" : ""}`} |
| 120 |
onClick={() => { |
| 121 |
updateModuleSettings(settingsValue); |
| 122 |
setLoading(true); |
| 123 |
}} |
| 124 |
disabled={loading} |
| 125 |
> |
| 126 |
{loading |
| 127 |
? __("Saving Changes", "post-carousel") |
| 128 |
: __("Save Changes", "post-carousel")}{" "} |
| 129 |
{loading && ( |
| 130 |
<span className="sp-smart-post-module-popup-sidebar-save-btn-spinner"> |
| 131 |
<Spinner /> |
| 132 |
</span> |
| 133 |
)} |
| 134 |
</button> |
| 135 |
</div> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
</div> |
| 139 |
); |
| 140 |
}; |
| 141 |
export default ModulesModal; |
| 142 |
|
