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

init: PaymentInfoForm

Browse Source
This commit is contained in:
unknown 2021-09-08 16:50:40 +07:00
commit 457055772e
18 changed files with 231 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/test.tsx
View File

@ -1,17 +1,12 @@
import { useState } from 'react'
import {
CardItemCheckout,
CheckoutBill,
CustomerInfoForm,
Layout,
ShippingInfoForm,
} from 'src/components/common'
import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
import TabCommon from 'src/components/common/TabCommon/TabCommon'
import { CheckoutInfo } from 'src/components/modules/checkout'
import image5 from '../public/assets/images/image5.png'
import image6 from '../public/assets/images/image6.png'
import image7 from '../public/assets/images/image7.png'
import image8 from '../public/assets/images/image8.png'
const dataTest:CardItemCheckoutProps[] = [
@ -43,27 +38,34 @@ const dataTest:CardItemCheckoutProps[] = [
quantity:2
},
]
export default function Test() {
const [visible, setVisible] = useState(false)
const onClose = () => {
setVisible(false)
}
const onOpen = () => {
setVisible(true)
}
const [visible2, setVisible2] = useState(false)
const onClose2 = () => {
setVisible2(false)
}
const onOpen2 = () => {
setVisible2(true)
}
return (
<>
<div className="w-full flex justify-between" style={{padding: "0 3.2rem"}} >
<CheckoutInfo/>
<CheckoutBill data={dataTest}/>
</div>
<TabCommon center={true}>
<TabPane
active={true}
tabName={'dat datdat datdatdatdatdatdat'}
>
<div className="w-full">
datdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdatdat
</div>
</TabPane>
<TabPane active={true} tabName={'1234567890'}>
<div className="w-full">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit harum sint maiores optio? Perspiciatis, necessitatibus pariatur, ut sed aperiam minus reiciendis alias deleniti eligendi obcaecati illum id maxime accusantium beatae.
</div>
</TabPane>
<TabPane active={true} tabName={'1'}>
<div className="w-full">
11111111111111111111111111111111111111111111111111111111111
</div>
</TabPane>
</TabCommon>
</>
)
}

15
src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
View File

@ -1,15 +0,0 @@
import React from 'react'
import TabCommon from 'src/components/common/TabCommon/TabCommon'
interface PaymentInfoFormProps {
}
const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
return (
<div>
</div>
)
}
export default PaymentInfoForm

43
src/components/common/TabCommon/TabCommon.module.scss
View File

@ -1,21 +1,28 @@
@import '../../../styles/utilities';
.tabCommon {
@apply flex;
position: relative;
border-bottom: 2px solid #FBFBFB;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
width: 100%;
.slider {
@apply inline-block;
height: .2rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
z-index: 1200;
bottom: 0;
transition: all .4s linear;
.tabWapper{
@apply flex flex-col w-full;
.tabHeader{
@apply relative;
.tabList {
@apply flex;
position: relative;
border-bottom: 2px solid #FBFBFB;
padding: 0.8rem 0;
width: 100%;
&.center{
@apply justify-center;
}
}
.slider {
@apply inline-block;
height: .2rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
z-index: 1200;
bottom: 0;
transition: all .25s linear;
}
}
}

97
src/components/common/TabCommon/TabCommon.tsx
View File

@ -1,36 +1,85 @@
import React, { RefObject, useEffect } from "react"
import React, {
Children,
PropsWithChildren,
ReactElement,
RefObject,
useEffect,
useRef,
useState,
cloneElement,
} from 'react'
import s from './TabCommon.module.scss'
import TabItem from './components/TabItem/TabItem'
import { TabPaneProps } from './components/TabPane/TabPane'
import classNames from 'classnames'
interface TabCommonProps {
tabs: {ref:RefObject<HTMLLIElement>, tabName: string, active: boolean, onClick: (tabIndex: number, tabPane?: string) => void}[];
defaultActiveTab: number;
sliderRef : RefObject<HTMLDivElement>;
slideToTab: (ref: any) => void;
defaultActiveTab?: number
children: React.ReactNode
center?:boolean
}
const TabCommon = ({ tabs, defaultActiveTab, sliderRef, slideToTab } : TabCommonProps) => {
const TabCommon = ({
defaultActiveTab = 0,
children,
center
}: TabCommonProps) => {
const [active, setActive] = useState(0)
const slider = useRef<HTMLDivElement>(null)
const headerRef = useRef<HTMLUListElement>(null)
useEffect(() => {
setActive(defaultActiveTab)
}, [])
useEffect(() => {
slideToTab(tabs[defaultActiveTab].ref);
}, [])
useEffect(() => {
slide(active)
}, [active])
return (
<ul className={s.tabCommon}>
{
tabs.map((tab) => {
return (
<li key={tab.tabName} ref={tab.ref}>
<TabItem onClick={tab.onClick} active={tab.active}>{tab.tabName}</TabItem>
</li>
)
})
}
<div ref={sliderRef} className={s.slider}></div>
function slide(index: number) {
const active = headerRef.current?.children
.item(index)
?.getBoundingClientRect()
const current = slider.current
if (current && active) {
let width = active.width - 24 <= 0 ? 24 : active.width - 24
let left = active.left
current.style.width = width.toString() + 'px'
current.style.left = left.toString() + 'px'
}
}
const onTabClick = (index: number) => {
setActive(index)
}
return (
<section className={s.tabWapper}>
<div className={s.tabHeader}>
<ul className={classNames(s.tabList,{[s.center]:center})} ref={headerRef}>
{Children.map(children, (tab, index) => {
let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
return (
<li key={item.props.tabName}>
<TabItem
active={active === index}
onClick={onTabClick}
tabIndex={index}
>
{item.props.tabName}
</TabItem>
</li>
)
})}
</ul>
)
<div ref={slider} className={s.slider}></div>
</div>
<div className={s.tabBody}>
{Children.map(children, (tab, index) => {
let item = tab as ReactElement<PropsWithChildren<TabPaneProps>>
return cloneElement(item, { active:index===active });
})
}</div>
</section>
)
}
export default TabCommon;
export default TabCommon

22
src/components/common/TabCommon/components/TabItem/TabItem.module.scss
View File

@ -1,22 +1,14 @@
@import '../../../../styles/utilities';
@import '../../../../../styles/utilities';
.tabItem {
margin-right: 4.8rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
margin-right:2.4rem;
padding: 0.8rem 0;
min-width: 2.4rem;
&:hover {
@apply cursor-pointer;
}
}
.tabItemActive {
@apply font-bold;
margin-right: 4.8rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
&:hover {
@apply cursor-pointer;
&.tabItemActive {
@apply font-bold;
}
}

37
src/components/common/TabCommon/components/TabItem/TabItem.tsx
View File

@ -1,19 +1,32 @@
import React from "react"
import classNames from 'classnames'
import React, { RefObject, useRef } from 'react'
import s from './TabItem.module.scss'
interface TabItemProps {
active: boolean;
children: string;
onClick: (tabIndex: number, tabPane: string) => void;
active: boolean
children: string
onClick?: (tabIndex: number) => void
tabIndex: number
}
const TabItem = ({ active = false, children, onClick } : TabItemProps) => {
return (
<span onClick={onClick} className={active ? s.tabItemActive : s.tabItem} >
{children}
</span>
)
const TabItem = ({
active = false,
children,
onClick,
tabIndex,
}: TabItemProps) => {
const handleClick = () => {
onClick && onClick(tabIndex)
}
return (
<span
onClick={handleClick}
// className={active ? s.tabItemActive : s.tabItem}
className={classNames(s.tabItem, {[s.tabItemActive]:active})}
>
{children}
</span>
)
}
export default TabItem;
export default TabItem

28
src/components/common/TabCommon/components/TabPane/TabPane.module.scss
View File

@ -1,20 +1,20 @@
@import '../../../../../../styles/utilities';
@import "../../../../../styles/utilities";
.tabPane {
@apply hidden;
animation-duration: 0.6s;
animation-name: appear;
@keyframes appear {
from {
margin-left: 100%;
width: 200%;
}
transition: all 0.6s;
// animation-duration: 0.6s;
// animation-name: appear;
// @keyframes appear {
// from {
// margin-left: 100%;
// width: 200%;
// }
to {
margin-left: 0%;
width: 100%;
}
}
// to {
// margin-left: 0%;
// width: 100%;
// }
// }
&.active {

9
src/components/common/TabCommon/components/TabPane/TabPane.tsx
View File

@ -2,15 +2,16 @@ import classNames from "classnames"
import React from "react"
import s from './TabPane.module.scss'
interface TabPaneProps {
active: string;
export interface TabPaneProps {
active: boolean;
children?: React.ReactNode;
tabName: string
}
const TabPane = ({ active="", children } : TabPaneProps) => {
const TabPane = ({ active, children } : TabPaneProps) => {
return (
<section className={classNames(s.tabPane, {
[s[active]] : active
[s.active] : active
})}>
{children}
</section>

3
src/components/common/index.ts
View File

@ -37,9 +37,6 @@ export { default as CardBlog} from './CardBlog/CardBlog'
export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
export { default as CustomerInfoForm} from './CustomerInfoForm/CustomerInfoForm'
export { default as ShippingInfoForm} from './ShippingInfoForm/ShippingInfoForm'
export { default as PaymentInfoForm} from './PaymentInfoForm/PaymentInfoForm'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'

4
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
View File

@ -1,8 +1,10 @@
import React, { useState } from 'react'
import { CustomerInfoForm, Logo, ShippingInfoForm } from 'src/components/common'
import { Logo } from 'src/components/common'
import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
import { CheckOutForm } from 'src/utils/types.utils'
import s from './CheckoutInfo.module.scss'
import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
interface CheckoutInfoProps {}
const CheckoutInfo = ({}: CheckoutInfoProps) => {

9
src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss Normal file
View File

@ -0,0 +1,9 @@
.warpper{
.title{
min-width: 19.4rem;
@apply text-label;
}
.hightlight{
@apply text-active;
}
}

24
src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react'
import s from './BankTransfer.module.scss'
interface BankTransferProps {}
const BankTransfer = ({}: BankTransferProps) => {
return (
<div className={s.warpper}>
<div className={s.line}>
<div className={s.title}>Account Name:</div>
<div className={s.hightlight}>Duong Dinh Vu</div>
</div>
<div className={s.line}>
<div className={s.title}>Account Number:</div>
<div className={s.hightlight}>1234 1234 1234 1234</div>
</div>
<div className={s.line}>
<div className={s.title}>Bank Name:</div>
<div className={s.hightlight}>Techcombank - HCMC</div>
</div>
</div>
)
}
export default BankTransfer

2
src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss → src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
View File

@ -1,4 +1,4 @@
@import "../../../styles/utilities";
@import "../../../../../../styles/utilities";
.warpper{
@apply u-form;
padding: 0 5.6rem;

0
src/components/common/CustomerInfoForm/CustomerInfoForm.tsx → src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
View File

0
src/components/common/PaymentInfoForm/PaymentInfoForm.module.scss → src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
View File

21
src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
import TabCommon from 'src/components/common/TabCommon/TabCommon'
import s from "./PaymentInfoForm.module.scss"
interface PaymentInfoFormProps {
}
const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
return (
<div className={s.warpper}>
<TabCommon>
{/* <TabPane tabName="Bank Transfer">
</TabPane> */}
</TabCommon>
</div>
)
}
export default PaymentInfoForm

2
src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss → src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
View File

@ -1,4 +1,4 @@
@import "../../../styles/utilities";
@import "../../../../../../styles/utilities";
.warpper{
@apply u-form;

0
src/components/common/ShippingInfoForm/ShippingInfoForm.tsx → src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
View File