Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

[improvement] Widget components #1475 - modal widget (#1482)

Browse source 
* new implementation/modal

* title fixed

* removed use of component for getting exposed variable

* renamed useState var

* Rename variable canShowModel to canShowModal on Modal component

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>
This commit is contained in:
Arpit 2021-12-15 09:53:57 +05:30 committed by GitHub
parent 847fe94850
commit 7586fb4e39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/Editor/Components/Modal.jsx
View file

@ -4,53 +4,55 @@ import Button from 'react-bootstrap/Button';
import { SubCustomDragLayer } from '../SubCustomDragLayer';
import { SubContainer } from '../SubContainer';
import { ConfigHandle } from '../ConfigHandle';
import { resolveWidgetFieldValue } from '@/_helpers/utils';
export const Modal = function Modal({ id, component, height, containerProps, currentState, darkMode }) {
const [show, showModal] = useState(false);
export const Modal = function Modal({
id,
component,
height,
containerProps,
darkMode,
properties,
styles,
exposedVariables,
setExposedVariable,
}) {
const [showModal, setShowModal] = useState(false);
const parentRef = useRef(null);
const titleProp = component.definition.properties.title;
const title = titleProp ? titleProp.value : '';
const title = properties.title ?? '';
const size = properties.size ?? 'lg';
const sizeProp = component.definition.properties.size;
const size = sizeProp ? sizeProp.value : 'lg';
const disabledState = component.definition.styles?.disabledState?.value ?? false;
const parsedDisabledState =
typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
const { disabledState } = styles;
useEffect(() => {
const componentState = containerProps.currentState.components[component.name];
const canShowModel = componentState ? componentState.show : false;
showModal(canShowModel);
const canShowModal = exposedVariables.show ?? false;
setShowModal(canShowModal);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [containerProps.currentState.components[component.name]]);
}, [exposedVariables.show]);
function hideModal() {
containerProps.onComponentOptionChanged(component, 'show', false);
showModal(false);
setExposedVariable('show', false);
setShowModal(false);
}
return (
<div data-disabled={parsedDisabledState}>
<div data-disabled={disabledState}>
<BootstrapModal
contentClassName="modal-component"
show={show}
show={showModal}
container={document.getElementsByClassName('canvas-area')[0]}
size={size}
backdrop={true}
keyboard={true}
enforceFocus={false}
animation={false}
onEscapeKeyDown={() => showModal(false)}
onEscapeKeyDown={() => setShowModal(false)}
>
{containerProps.mode === 'edit' && (
<ConfigHandle id={id} component={component} configHandleClicked={containerProps.onComponentClick} />
)}
<BootstrapModal.Header>
<BootstrapModal.Title>{resolveWidgetFieldValue(title, currentState)}</BootstrapModal.Title>
<BootstrapModal.Title>{title}</BootstrapModal.Title>
<div>
<Button variant={darkMode ? 'secondary' : 'light'} size="sm" onClick={hideModal}>
x