PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved modal component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-25 12:34:55 +08:00
parent 4db6c89fd1
commit 5e0afdfa66
1 changed files with 22 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/Modal/Modal.tsx
View file

@ -1,27 +1,25 @@
import './Modal.sass' import './Modal.sass'
import { type JSXElement, Show } from 'solid-js' import { type JSXElement, Show } from 'solid-js'
import gsap from 'gsap' import gsap from 'gsap'
import Button from '../Button/Button'
interface Props { interface Props {
children: JSXElement children: JSXElement
background?: string background?: string
color?: string color?: string
border?: string border?: string
trigger: boolean
} }
export default (props: Props) => { export default (props: Props) => {
let dialogRef!: HTMLDivElement let dialogRef!: HTMLDivElement
// const [open, setOpen] = createSignal(false) // const openHandler = () => {
// gsap.to(dialogRef, {
const openHandler = () => { // duration: 0,
gsap.to(dialogRef, { // display: 'flex',
duration: 0, // ease: 'power2.out',
display: 'flex', // })
ease: 'power2.out', // }
})
}
const closeHandler = () => { const closeHandler = () => {
gsap.to(dialogRef, { gsap.to(dialogRef, {
@ -33,20 +31,21 @@ export default (props: Props) => {
return ( return (
<> <>
<Button label="OpenDialog" onClick={openHandler}></Button> <Show when={props.trigger}>
<div class="modal" ref={dialogRef} onClick={closeHandler}> <div class="modal" ref={dialogRef} onClick={closeHandler}>
<Show when={props.border}> <Show when={props.border}>
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}> <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
{props.children} {props.children}
</div> </div>
</Show> </Show>
<Show when={!props.border}> <Show when={!props.border}>
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}> <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
{props.children} {props.children}
</div> </div>
</Show> </Show>
</div> </div>
</Show>
</> </>
) )
} }