From db0d16b2c1311ee44d0965674b897ae149c4cb58 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Fri, 3 Sep 2021 20:42:54 +0700 Subject: [PATCH] feat: create component MenuNavigationProductList --- public/assets/svg/check.svg | 3 + .../MenuNavigationProductList.module.scss | 43 ++++++++++++ .../MenuNavigationProductList.tsx | 57 ++++++++++++++++ .../MenuSort/MenuSort.module.scss | 46 +++++++++++++ .../MenuSort/MenuSort.tsx | 67 +++++++++++++++++++ 5 files changed, 216 insertions(+) create mode 100644 public/assets/svg/check.svg create mode 100644 src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss create mode 100644 src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx create mode 100644 src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss create mode 100644 src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx diff --git a/public/assets/svg/check.svg b/public/assets/svg/check.svg new file mode 100644 index 000000000..c1f952011 --- /dev/null +++ b/public/assets/svg/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss new file mode 100644 index 000000000..37d06e555 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -0,0 +1,43 @@ +@import "../../../styles/utilities"; +.menuNavigationProductListDesktop{ + @apply hidden; +} +.menuNavigationProductListMobile{ + @apply hidden; + @screen md { + @apply hidden; + } + &.isShow{ + @apply block; + } + .menuNavigationProductModal{ + background: rgba(0, 0, 0, 0.5); + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10000; + .content{ + @apply spacing-horizontal; + margin-top: 3rem; + padding-top: 2rem ; + padding-bottom: 5rem; + background-color: white; + overflow: auto; + height: 100%; + border-radius: 2.4rem 2.4rem 0 0; + .head{ + @apply flex justify-between; + h3{ + @apply heading-3 font-bold; + color:var(--text-base); + } + } + button{ + margin-top: 2rem; + width: 100%; + } + } + } +} \ No newline at end of file diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx new file mode 100644 index 000000000..be067a184 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import {ButtonCommon, MenuFilter, MenuNavigation} from 'src/components/common'; +import s from './MenuNavigationProductList.module.scss'; +import {IconHide} from 'src/components/icons'; +import MenuSort from './MenuSort/MenuSort'; +import {LANGUAGE} from 'src/utils/language.utils'; +import classNames from 'classnames' +interface Props{ + categories:{name:string,link:string}[], + brands:{name:string,link:string}[], + featured:{name:string,link:string}[], +} + +const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{ + + const [dataSort,setDataSort] = useState({}); + const [isShow,setIsShow] = useState(true); + + function handleValue(value:Object){ + setDataSort({...dataSort,...value}); + } + function filter(){ + console.log(dataSort) + } + + function hideMenu(){ + if(isShow === true){ + setIsShow(false); + } + } + return( + <> +
+ + + +
+
+
+
+
+

FILTER

+
+
+ + + + + {LANGUAGE.BUTTON_LABEL.CONFIRM} +
+
+
+ + ) +} + +export default MenuNavigationProductList \ No newline at end of file diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss new file mode 100644 index 000000000..a25752901 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss @@ -0,0 +1,46 @@ +@import "../../../../styles/utilities"; +.menuSortWrapper{ + + @screen md { + @apply hidden; + } + .menuSortHeading{ + @apply sub-headline font-bold ; + color: var(--text-active); + font-feature-settings: 'salt' on; + margin: 0.8rem 0; + } + .menuSortList{ + box-sizing: border-box; + &::after{ + @apply absolute; + top: 110%; + content: ""; + width: 100%; + border-bottom: 1px solid var(--border-line); + } + li{ + div{ + height: 4.8rem; + line-height: 4.8rem; + padding: 0 1.6rem; + margin-right: 0.8rem; + border-radius: 0.8rem; + &.active { + @apply font-bold relative; + color:var(--text-active); + background-color: var(--primary-lightest); + &::after{ + @apply absolute; + content:""; + background-image: url('/assets/svg/check.svg'); + right: 1.6rem; + top: calc(50% - 24px/2); + width: 2.4rem; + height: 2.4rem; + } + } + } + } + } +} diff --git a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx new file mode 100644 index 000000000..2e66dfc83 --- /dev/null +++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx @@ -0,0 +1,67 @@ +import classNames from 'classnames'; +import { useEffect, useState } from 'react'; +import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; +import s from './MenuSort.module.scss'; + +interface Props { + children?: any, + heading:string, + type:string, + onChangeValue?: (value: Object) => void +} +const SORT = [ + { + name: 'By Name', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`, + }, + { + name: 'Price(High to Low)', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`, + }, + { + name: 'Price (Low to High)', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`, + }, + { + name: 'On Sale', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`, + }, + ]; + + +const MenuSort = ({heading,type,onChangeValue}:Props)=> { + const [active, setActive] = useState(''); + + function handleClick(link:string){ + setActive(link); + + if(active === link){ + setActive(''); + } + } + + useEffect(()=>{ + + let href = active?.split("="); + const linkValue = href[1]; + + onChangeValue && onChangeValue({[type]:linkValue}); + },[active]) + + return ( +
+

{heading}

+
    + { + SORT.map(item =>
  • +
    handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}> + {item.name} +
    +
    • ) + } +
+
+ ) +} + +export default MenuSort