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

🐛 bug: fix bug before merge to common

Browse Source 
:%s
This commit is contained in:
unknown
2021-08-27 15:08:32 +07:00
parent c27fbef46b
commit 077020f450
25 changed files with 149 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/CarouselCommon/CaroucelCommon.module.scss → src/components/common/CarouselCommon/CarouselCommon.module.scss
View File

@@ -25,18 +25,18 @@
:global {
.dots {
display: flex;
padding: 10px 0;
padding: 1rem 0;
justify-content: center;
}
.dot {
border: none;
width: 10px;
height: 10px;
width: 1rem;
height: 1rem;
background: #c5c5c5;
border-radius: 50%;
margin: 0 5px;
padding: 5px;
margin: 0 0.5rem;
padding: 0.5rem;
cursor: pointer;
}

6
src/components/common/CarouselCommon/CarouselCommon.tsx
View File

@@ -2,7 +2,7 @@ import { useKeenSlider } from 'keen-slider/react'
import React, { useEffect } from 'react'
import 'keen-slider/keen-slider.min.css'
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
import s from './CaroucelCommon.module.scss'
import s from './CarouselCommon.module.scss'
import { TOptionsEvents } from 'keen-slider'
import classNames from 'classnames'
import CustomDot from './CustomDot/CustomDot'
@@ -47,7 +47,6 @@ const CarouselCommon = <T,>({
useEffect(() => {
if(isDot && slider){
// console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
let array:number[]
array = [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
return (Number(slider.details().slidesPerView)||1)*i
@@ -67,7 +66,6 @@ const CarouselCommon = <T,>({
const onDotClick = (index:number) => {
slider.moveToSlideRelative(Math.floor(index))
// setDotActive(index)
}
return (
<div className={s.navigationWrapper}>
@@ -88,12 +86,10 @@ const CarouselCommon = <T,>({
<CustomCarouselArrow
side="right"
onClick={handleRightArrowClick}
// isDisabled={currentSlide === slider.details().size - 1}
/>
<CustomCarouselArrow
side="left"
onClick={handleLeftArrowClick}
// isDisabled={currentSlide === 0}
/>
</>
)}

17
src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
View File

@@ -1,20 +1,3 @@
// .customArrow{
// width: 64px;
// height: 64px;
// &:focus{
// outline: none;
// }
// @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
// &.leftArrow{
// @apply left-0;
// }
// &.rightArrow{
// @apply right-0;
// }
// &.isDisabled{
// @apply hidden ;
// }
// }
.navigationWrapper{
:global(.customArrow) {
width: 64px;

2
src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react'
import ArrowLeft from 'src/components/icons/ArrowLeft'
import ArrowRight from 'src/components/icons/ArrowRight'
import "./CustomCarouselArrow.module.scss"
// import s from "../CaroucelCommon.module.scss"
interface CustomCarouselArrowProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,7 +17,6 @@ export const CustomCarouselArrow = ({
return (
<button
{...props}
// className={classNames(`${s.customArrow}`, { [`${s[`${side}Arrow`]}`]: side,[`${s.isDisabled}`]:isDisabled })}
className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
>
{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}