From 3b2eaef7a6cc6906bd631a2c734ee6b4e49b1bd5 Mon Sep 17 00:00:00 2001 From: DatNguyen Date: Mon, 20 Sep 2021 14:36:37 +0700 Subject: [PATCH] :hammer: refactor: delete keen-silder :%s --- package.json | 1 - pages/_app.tsx | 1 - src/components/common/Banner/Banner.tsx | 1 - .../common/CarouselCommon/CarouselCommon.tsx | 2 - .../CartRecommendation/CartRecommendation.tsx | 1 - .../FeaturedProductCard.tsx | 2 +- .../ListProductWithInfo.tsx | 26 +------------ .../ProductCarousel/ProductCarousel.tsx | 1 - .../common/RecipeCarousel/RecipeCarousel.tsx | 20 ---------- .../RecommendedRecipes/RecommendedRecipes.tsx | 1 - .../BlogPostCarousel/BlogPostCarousel.tsx | 1 - .../FeaturedProductsCarousel.tsx | 39 +++---------------- .../HomeFeatureCarousel.tsx | 23 ----------- yarn.lock | 5 --- 14 files changed, 8 insertions(+), 116 deletions(-) diff --git a/package.json b/package.json index d636f7bd4..bb78b5cf1 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "eslint-config-next": "^11.1.2", "immutability-helper": "^3.1.1", "js-cookie": "^2.2.1", - "keen-slider": "^5.5.1", "lodash.debounce": "^4.0.8", "lodash.random": "^3.2.0", "lodash.throttle": "^4.1.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index ff8845072..d0d633a58 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,6 @@ import { ThemeProvider } from 'next-themes'; import type { AppProps } from 'next/app'; import React, { FC, useEffect } from 'react'; import { CustomShapeSvg, Head } from 'src/components/common'; -import 'keen-slider/keen-slider.min.css'; import '../src/styles/main.scss'; diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index bd83cbd13..dc95c2146 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/src/components/common/Banner/Banner.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider' import React, { memo } from 'react' import { ResponsiveType } from 'react-multi-carousel' import CarouselCommon from '../CarouselCommon/CarouselCommon' diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 72854b4b1..0de1ddd29 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef } from 'react' -import 'keen-slider/keen-slider.min.css' import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow' import s from './CarouselCommon.module.scss' import classNames from 'classnames' @@ -15,7 +14,6 @@ export interface CarouselCommonProps data: T[] Component: React.ComponentType itemKey: String - keenClassname?: string isPadding?: boolean defaultComponentProps?: object responsive?: ResponsiveType diff --git a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx index 203ad40c5..8ae920d7a 100644 --- a/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx +++ b/src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider'; import React from 'react'; import { ResponsiveType } from 'react-multi-carousel'; import { CarouselCommon, ViewAllItem } from 'src/components/common'; diff --git a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx index 9cd84235a..a82b6857b 100644 --- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx +++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx @@ -5,7 +5,7 @@ import { LANGUAGE } from '../../../utils/language.utils' import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ButtonCommon from '../ButtonCommon/ButtonCommon' import { ImgWithLink } from '..' -interface FeaturedProductCardProps extends FeaturedProductProps { +export interface FeaturedProductCardProps extends FeaturedProductProps { buttonText?: string } diff --git a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx index 3afd766f6..5c18f91ed 100644 --- a/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx +++ b/src/components/common/ListProductWithInfo/ListProductWithInfo.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames'; -import { TOptionsEvents } from 'keen-slider'; import React from 'react'; import { ResponsiveType } from 'react-multi-carousel'; import CarouselCommon from '../CarouselCommon/CarouselCommon'; @@ -13,30 +12,7 @@ interface Props { subtitle?: string, hasBorderBottomMobile?: boolean, } -const OPTION_DEFAULT: TOptionsEvents = { - slidesPerView: 2, - mode: 'free', - breakpoints: { - '(min-width: 640px)': { - slidesPerView: 3, - }, - '(min-width: 768px)': { - slidesPerView: 3, - }, - '(min-width: 1008px)': { - slidesPerView: 3.5, - }, - '(min-width: 1024px)': { - slidesPerView: 2.5, - }, - '(min-width: 1280px)': { - slidesPerView: 3.5, - }, - '(min-width: 1440px)': { - slidesPerView: 4.5, - }, - }, -} + const RESPONSIVE:ResponsiveType = { xxl: { breakpoint: { max: 9999, min: 1440 }, diff --git a/src/components/common/ProductCarousel/ProductCarousel.tsx b/src/components/common/ProductCarousel/ProductCarousel.tsx index 3df1dfa72..2f534edab 100644 --- a/src/components/common/ProductCarousel/ProductCarousel.tsx +++ b/src/components/common/ProductCarousel/ProductCarousel.tsx @@ -1,4 +1,3 @@ -// import { TOptionsEvents } from 'keen-slider' import React from 'react' import CarouselCommon, { CarouselCommonProps, diff --git a/src/components/common/RecipeCarousel/RecipeCarousel.tsx b/src/components/common/RecipeCarousel/RecipeCarousel.tsx index 496c0689c..01c519fc4 100644 --- a/src/components/common/RecipeCarousel/RecipeCarousel.tsx +++ b/src/components/common/RecipeCarousel/RecipeCarousel.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider' import React from 'react' import { ResponsiveType } from 'react-multi-carousel' import CarouselCommon, { @@ -10,25 +9,6 @@ import s from './RecipeCarousel.module.scss' interface RecipeCarouselProps extends Omit, 'Component' | 'option'> {} -const OPTION_DEFAULT: TOptionsEvents = { - slidesPerView: 1.25, - mode: 'free', - spacing: 24, - breakpoints: { - '(min-width: 640px)': { - slidesPerView: 2, - }, - '(min-width: 1024px)': { - slidesPerView: 2.5, - }, - '(min-width: 1440px)': { - slidesPerView: 3, - }, - '(min-width: 1536px)': { - slidesPerView: 3.5, - }, - }, -} const RESPONSIVE: ResponsiveType = { largeDesktop: { breakpoint: { max: 9999, min: 1536 }, diff --git a/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx b/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx index 36fc42587..aa1df57d4 100644 --- a/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx +++ b/src/components/common/RecommendedRecipes/RecommendedRecipes.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider'; import React from 'react'; import { ResponsiveType } from 'react-multi-carousel'; import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common'; diff --git a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx index 9c1447a63..c293b7969 100644 --- a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx +++ b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider' import React from 'react' import CarouselCommon, { CarouselCommonProps, diff --git a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx index a0e4cd043..9e52dd6e4 100644 --- a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx +++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx @@ -1,4 +1,3 @@ -import { TOptionsEvents } from 'keen-slider' import React from 'react' import { ResponsiveType } from 'react-multi-carousel' import { CarouselCommon, FeaturedProductCard } from 'src/components/common' @@ -27,40 +26,14 @@ const dataDemo:FeaturedProductCardProps[] = [{ price: "$14.00", imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png" }] - -const OPTION_DEFAULT: TOptionsEvents = { - slidesPerView: 1, - mode: 'free', - breakpoints: { - '(min-width: 300px)': { - slidesPerView: 1.5, - }, - '(min-width: 400px)': { - slidesPerView: 2, - }, - '(min-width: 640px)': { - slidesPerView: 1.25, - }, - '(min-width: 768px)': { - slidesPerView: 1.075, - }, - '(min-width: 968px)': { - slidesPerView: 1.175, - }, - '(min-width: 1024px)': { - slidesPerView: 1.375, - },'(min-width: 1148px)': { - slidesPerView: 1.5, - },'(min-width: 1280px)': { - slidesPerView: 1.75, - },'(min-width: 1440px)': { - slidesPerView: 2.075, - }, - }, - } const RESPONSIVE: ResponsiveType = { + hugeScreen: { + breakpoint: { max: 9999, min: 1500 }, + items: 2.25, + slidesToSlide: 1, // optional, default to 1. + }, largeScreen: { - breakpoint: { max: 9999, min: 1440 }, + breakpoint: { max: 1500, min: 1440 }, items: 2.075, slidesToSlide: 1, // optional, default to 1. }, diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx index 0171a8b56..28e397cde 100644 --- a/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx +++ b/src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx @@ -1,6 +1,4 @@ import React from 'react' -import { TOptionsEvents } from 'keen-slider' - import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem' import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon' import { ResponsiveType } from 'react-multi-carousel' @@ -9,27 +7,6 @@ interface HomeFeatureCarouselProps extends Omit, 'Component' | "option"> { } -const OPTION_DEFAULT: TOptionsEvents = { - slidesPerView: 1.2, - mode: 'free', - breakpoints: { - '(min-width: 640px)': { - slidesPerView: 1.8, - }, - '(min-width: 768px)': { - slidesPerView: 2.1, - }, - '(min-width: 1008px)': { - slidesPerView: 2.3, - }, - '(min-width: 1280px)': { - slidesPerView: 2.8, - }, - '(min-width: 1440px)': { - slidesPerView: 3, - }, - }, - } const RESPONSIVE: ResponsiveType = { largeDesktop: { breakpoint: { max: 9999, min: 1440 }, diff --git a/yarn.lock b/yarn.lock index 321cc8377..b69068411 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4255,11 +4255,6 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" -keen-slider@^5.5.1: - version "5.5.1" - resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.5.1.tgz#1493f552eadf0f5b8229defd83c626eb6dd58c13" - integrity sha512-QXGZGt5Hbe0YufR/RYbOG03MmOk43RQEXqkkSvjr8ZS67sVR7LRp5RIvJALfjl+A7BnHNr1wd1QBOemwy65Lfw== - keyv@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"