crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-06 21:11:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔨 refactor: add title to modal common

Browse Source 
:%s
This commit is contained in:
unknown 2021-08-27 15:26:26 +07:00
parent eace588533
commit eba36de46a
3 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/test.tsx
View File

@ -13,7 +13,7 @@ export default function Test() {
<> <>
<ButtonCommon onClick={onOpen}>open</ButtonCommon> <ButtonCommon onClick={onOpen}>open</ButtonCommon>
<ModalCommon visible={visible} onClose={onClose} > <ModalCommon visible={visible} onClose={onClose} >
<div className="p-10"> <div className="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est? Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est?
</div> </div>
</ModalCommon> </ModalCommon>

7
src/components/common/ModalCommon/ModalCommon.module.scss
View File

@ -6,10 +6,15 @@
@apply flex justify-center items-center min-h-screen; @apply flex justify-center items-center min-h-screen;
.modal{ .modal{
@apply inline-block align-bottom bg-white relative; @apply inline-block align-bottom bg-white relative;
max-width: 50%; max-width: 60rem;
padding: 3.2rem; padding: 3.2rem;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24); box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24);
border-radius: 1.2rem; border-radius: 1.2rem;
.title{
padding: 0 0.8rem 0 0.8rem;
font-size: 3.2rem;
line-height: 4rem;
}
.close{ .close{
@apply absolute; @apply absolute;
&:hover{ &:hover{

22
src/components/common/ModalCommon/ModalCommon.tsx
View File

@ -1,14 +1,16 @@
import React, { useRef } from 'react' import React, { useRef } from 'react'
import { Close } from 'src/components/icons' import { Close } from 'src/components/icons'
import { useOnClickOutside } from 'src/utils/useClickOutSide' import { useOnClickOutside } from 'src/utils/useClickOutSide'
import s from "./ModalCommon.module.scss" import s from './ModalCommon.module.scss'
interface Props { interface Props {
onClose: () => void onClose: () => void
visible: boolean visible: boolean
children:React.ReactNode children: React.ReactNode
title?: string
maxWidth?:string
} }
const ModalCommon = ({ onClose, visible,children }: Props) => { const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => {
const modalRef = useRef<HTMLDivElement>(null) const modalRef = useRef<HTMLDivElement>(null)
const clickOutSide = () => { const clickOutSide = () => {
onClose && onClose() onClose && onClose()
@ -17,16 +19,14 @@ const ModalCommon = ({ onClose, visible,children }: Props) => {
return ( return (
<> <>
{visible && ( {visible && (
<div <div className={s.background}>
className={s.background}
>
<div className={s.warpper}> <div className={s.warpper}>
<div <div className={s.modal} ref={modalRef} style={{maxWidth}}>
className={s.modal} <div className={s.top}>
ref={modalRef} <div className={s.title}>{title}</div>
>
<div className={s.close} onClick={clickOutSide}> <div className={s.close} onClick={clickOutSide}>
<Close/> <Close />
</div>
</div> </div>
{children} {children}
</div> </div>