forked from crowetic/commerce
Toast Component Wip
This commit is contained in:
parent
1a3a683d6e
commit
a59d07291a
@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
|
|||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import { CommerceProvider } from '@lib/bigcommerce'
|
import { CommerceProvider } from '@lib/bigcommerce'
|
||||||
import { CartSidebarView } from '@components/cart'
|
import { CartSidebarView } from '@components/cart'
|
||||||
import { Container, Sidebar, Button, Modal } from '@components/ui'
|
import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
|
||||||
import { Navbar, Featurebar, Footer } from '@components/core'
|
import { Navbar, Featurebar, Footer } from '@components/core'
|
||||||
import { LoginView, SignUpView } from '@components/auth'
|
import { LoginView, SignUpView } from '@components/auth'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
@ -24,6 +24,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
closeSidebar,
|
closeSidebar,
|
||||||
closeModal,
|
closeModal,
|
||||||
modalView,
|
modalView,
|
||||||
|
toastText,
|
||||||
|
closeToast,
|
||||||
|
displayToast,
|
||||||
} = useUI()
|
} = useUI()
|
||||||
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
||||||
const [hasScrolled, setHasScrolled] = useState(false)
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
@ -67,6 +70,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
<Sidebar open={displaySidebar} onClose={closeSidebar}>
|
<Sidebar open={displaySidebar} onClose={closeSidebar}>
|
||||||
<CartSidebarView />
|
<CartSidebarView />
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
|
||||||
<Modal open={displayModal} onClose={closeModal}>
|
<Modal open={displayModal} onClose={closeModal}>
|
||||||
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
||||||
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
||||||
@ -81,6 +85,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
{/* <Toast open={displayToast} onClose={closeModal}>
|
||||||
|
{toastText}
|
||||||
|
</Toast> */}
|
||||||
</div>
|
</div>
|
||||||
</CommerceProvider>
|
</CommerceProvider>
|
||||||
)
|
)
|
||||||
|
9
components/ui/Toast/Toast.module.css
Normal file
9
components/ui/Toast/Toast.module.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
.root {
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
@apply absolute bg-primary text-primary flex items-center border border-accents-1
|
||||||
|
rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
|
||||||
|
width: 420px;
|
||||||
|
z-index: 20000;
|
||||||
|
}
|
73
components/ui/Toast/Toast.tsx
Normal file
73
components/ui/Toast/Toast.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import cn from 'classnames'
|
||||||
|
import { FC, useRef, useEffect, useCallback } from 'react'
|
||||||
|
import s from './Toast.module.css'
|
||||||
|
import { useDialog } from '@react-aria/dialog'
|
||||||
|
import { FocusScope } from '@react-aria/focus'
|
||||||
|
import { Transition } from '@headlessui/react'
|
||||||
|
import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
className?: string
|
||||||
|
children?: any
|
||||||
|
open?: boolean
|
||||||
|
onClose: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Toast: FC<Props> = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
open = false,
|
||||||
|
onClose,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const rootClassName = cn(s.root, className)
|
||||||
|
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
||||||
|
let { modalProps } = useModal()
|
||||||
|
let { dialogProps } = useDialog({}, ref)
|
||||||
|
let { overlayProps } = useOverlay(
|
||||||
|
{
|
||||||
|
isOpen: open,
|
||||||
|
isDismissable: true,
|
||||||
|
onClose: onClose,
|
||||||
|
...props,
|
||||||
|
},
|
||||||
|
ref
|
||||||
|
)
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// useCallback(onClose, [])
|
||||||
|
// }, 400)
|
||||||
|
// })
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Transition show={open}>
|
||||||
|
<OverlayContainer>
|
||||||
|
<FocusScope contain restoreFocus autoFocus>
|
||||||
|
<div className={rootClassName}>
|
||||||
|
<Transition.Child
|
||||||
|
enter="transition-opacity ease-linear duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="transition-opacity ease-linear duration-300"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={s.toast}
|
||||||
|
{...overlayProps}
|
||||||
|
{...dialogProps}
|
||||||
|
{...modalProps}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</Transition.Child>
|
||||||
|
</div>
|
||||||
|
</FocusScope>
|
||||||
|
</OverlayContainer>
|
||||||
|
</Transition>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Toast
|
1
components/ui/Toast/index.ts
Normal file
1
components/ui/Toast/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Toast'
|
@ -6,7 +6,9 @@ export interface State {
|
|||||||
displaySidebar: boolean
|
displaySidebar: boolean
|
||||||
displayDropdown: boolean
|
displayDropdown: boolean
|
||||||
displayModal: boolean
|
displayModal: boolean
|
||||||
|
displayToast: boolean
|
||||||
modalView: string
|
modalView: string
|
||||||
|
toastText: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
@ -14,6 +16,8 @@ const initialState = {
|
|||||||
displayDropdown: false,
|
displayDropdown: false,
|
||||||
displayModal: false,
|
displayModal: false,
|
||||||
modalView: 'LOGIN_VIEW',
|
modalView: 'LOGIN_VIEW',
|
||||||
|
displayToast: false,
|
||||||
|
toastText: 'HOLAAAA',
|
||||||
}
|
}
|
||||||
|
|
||||||
type Action =
|
type Action =
|
||||||
@ -23,6 +27,16 @@ type Action =
|
|||||||
| {
|
| {
|
||||||
type: 'CLOSE_SIDEBAR'
|
type: 'CLOSE_SIDEBAR'
|
||||||
}
|
}
|
||||||
|
| {
|
||||||
|
type: 'OPEN_TOAST'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: 'CLOSE_TOAST'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: 'SET_TOAST_TEXT'
|
||||||
|
text: ToastText
|
||||||
|
}
|
||||||
| {
|
| {
|
||||||
type: 'OPEN_DROPDOWN'
|
type: 'OPEN_DROPDOWN'
|
||||||
}
|
}
|
||||||
@ -45,6 +59,7 @@ type Action =
|
|||||||
}
|
}
|
||||||
|
|
||||||
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
|
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
|
||||||
|
type ToastText = string
|
||||||
|
|
||||||
export const UIContext = React.createContext<State | any>(initialState)
|
export const UIContext = React.createContext<State | any>(initialState)
|
||||||
|
|
||||||
@ -88,12 +103,30 @@ function uiReducer(state: State, action: Action) {
|
|||||||
displayModal: false,
|
displayModal: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
case 'OPEN_TOAST': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displayToast: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case 'CLOSE_TOAST': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
displayToast: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
case 'SET_MODAL_VIEW': {
|
case 'SET_MODAL_VIEW': {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
modalView: action.view,
|
modalView: action.view,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
case 'SET_TOAST_TEXT': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
toastText: action.text,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -109,6 +142,9 @@ export const UIProvider: FC = (props) => {
|
|||||||
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
|
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
|
||||||
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
|
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
|
||||||
|
|
||||||
|
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
|
||||||
|
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
|
||||||
|
|
||||||
const setModalView = (view: MODAL_VIEWS) =>
|
const setModalView = (view: MODAL_VIEWS) =>
|
||||||
dispatch({ type: 'SET_MODAL_VIEW', view })
|
dispatch({ type: 'SET_MODAL_VIEW', view })
|
||||||
|
|
||||||
@ -121,8 +157,14 @@ export const UIProvider: FC = (props) => {
|
|||||||
openModal,
|
openModal,
|
||||||
closeModal,
|
closeModal,
|
||||||
setModalView,
|
setModalView,
|
||||||
|
openToast,
|
||||||
|
closeToast,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
openToast()
|
||||||
|
}, 200)
|
||||||
|
|
||||||
return <UIContext.Provider value={value} {...props} />
|
return <UIContext.Provider value={value} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -10,3 +10,4 @@ export { default as Skeleton } from './Skeleton'
|
|||||||
export { default as Modal } from './Modal'
|
export { default as Modal } from './Modal'
|
||||||
export { default as Text } from './Text'
|
export { default as Text } from './Text'
|
||||||
export { default as Input } from './Input'
|
export { default as Input } from './Input'
|
||||||
|
export { default as Toast } from './Toast'
|
||||||
|
Loading…
x
Reference in New Issue
Block a user