Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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