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

♻️ enhan: disable btn when loading

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-28 18:08:17 +07:00
parent 75bea33a0f
commit c0e703e1ae
4 changed files with 49 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
pages/test.tsx
View File

@@ -1,85 +1,19 @@
import { useEffect, useState } from 'react'
import {
FeaturedProductCard,
Layout
} from 'src/components/common';
import { HomeBanner } from 'src/components/modules/home';
// import { RecipeListPage } from 'src/components/modules/recipes';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
const CATEGORY = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
},
{
name: 'Veggie',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Seafood',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Frozen',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Coffee Bean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
},
{
name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
},
]
const BRAND = [
{
name: 'Maggi',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Cholimes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
}]
const FEATURED = [
{
name: 'Best Sellers',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Sales',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'New Item',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Viewed',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
}
];
const data = PRODUCT_DATA_TEST[0]
ButtonCommon, Layout
} from 'src/components/common'
export default function Test() {
const [isLoading, setisLoading] = useState(false)
useEffect(() => {
setTimeout(() => {
setisLoading(true)
}, 3000)
}, [])
return (
<>
<FeaturedProductCard
imageSrc={data.imageSrc}
title="Sale 25% coffee bean"
subTitle="50 first orders within a day"
price={data.price}
originPrice="$20.00" />
<HomeBanner/>
<ButtonCommon loading={isLoading}>Back to home</ButtonCommon>
<ButtonCommon type='light' loading={isLoading}>Back to home</ButtonCommon>
<ButtonCommon type='ghost' loading={isLoading}>Back to home</ButtonCommon>
</>
)
}

60
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@@ -2,6 +2,32 @@
.buttonCommon {
@apply shape-common;
&:hover {
.inner {
@apply shadow-md;
&:not(:disabled) {
filter: brightness(1.05);
}
}
}
&:disabled {
cursor: not-allowed;
.inner {
filter: brightness(0.8) !important;
color: var(--disabled);
}
}
&:focus {
outline: none;
.inner {
filter: brightness(1.05);
}
}
&:focus-visible {
outline: 2px solid var(--text-active);
}
.inner {
padding: 1rem 2rem;
@apply bg-primary transition-all duration-200 text-white font-bold;
@@ -14,37 +40,19 @@
@screen lg {
padding: 1.6rem 3.2rem;
}
&:disabled {
filter: brightness(0.9);
cursor: not-allowed;
color: var(--disabled);
}
&:hover {
@apply shadow-md;
&:not(:disabled) {
filter: brightness(1.05);
}
}
&:focus {
outline: none;
filter: brightness(1.05);
}
&:focus-visible {
outline: 2px solid var(--text-active);
}
}
&.loading {
.inner {
&::after {
content: "";
border-radius: 50%;
width: 1.6rem;
height: 1.6rem;
width: 1.8rem;
height: 1.8rem;
border: 3px solid rgba(170, 170, 170, 0.5);
border-top: 3px solid var(--white);
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin-right: 0.8rem;
margin-left: 0.8rem;
}
}
}
@@ -60,7 +68,7 @@
&.loading {
.inner {
&::after {
border-top-color: var(--primary);
border-top-color: var(--text-active);
}
}
}
@@ -87,7 +95,7 @@
}
&.loading {
.inner::after {
border-top-color: var(--text-active);
border-top-color: var(--primary);
}
}
}
@@ -105,14 +113,14 @@
}
&.small {
.inner {
padding: .5rem 1rem;
padding: 0.5rem 1rem;
&.onlyIcon {
padding: 1rem;
}
@screen md {
padding: .8rem 1.6rem;
padding: 0.8rem 1.6rem;
&.onlyIcon {
padding: .8rem;
padding: 0.8rem;
}
}
}

2
src/components/common/ButtonCommon/ButtonCommon.tsx
View File

@@ -24,7 +24,7 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
[s.preserve]: isIconSuffix,
[s.onlyIcon]: icon && !children,
})}
disabled={disabled}
disabled={disabled || loading}
onClick={onClick}
>
<div className={s.inner}>

2
src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx
View File

@@ -28,6 +28,8 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
const onSignup = () => {
// TODO: validate fields
signup({ email, password })
// TODO:
alert("User created. Please verify your email")
}