Checkbox Bug Fixed

temp
Pedram Keshavarzi 3 years ago
parent 6bd1f788d3
commit b073cb6190
  1. 5
      src/components/Checkbox/index.js
  2. 9
      src/components/VerticalExpandableProductFilter/index.js
  3. 164
      src/views/Product/Desktop/ProductOverAll/index.js
  4. 5
      src/views/Product/Desktop/index.js
  5. 6
      src/views/Product/index.js
  6. 4
      src/views/Products/layouts/Sidebar.js
  7. 8
      tailwind.config.js

@ -2,6 +2,7 @@ import React from "react";
import './index.css';
export default function Checkbox(props) {
console.log(props)
return (
<div>
<svg className="checkbox-symbol">
@ -16,8 +17,8 @@ export default function Checkbox(props) {
</svg>
<div className="checkbox-container">
<input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
<label className="checkbox" htmlFor="apples">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
<label className="checkbox" htmlFor={"ch"+props.name}>
<span>
<svg width="12px" height="10px">
<use xlinkHref="#check"></use>

@ -11,6 +11,8 @@ const langDetector = (lang = "fa", option1, option2) => {
export default function VerticalExpandableProductFilter(props) {
const [text, setText] = useState("");
const [searchResult, setSearchResult] = useState([]);
const [checkedBox, setChecked] = useState([]);
const name = props.name||Math.random()
useEffect(() => {
let fakeSearchResult;
fakeSearchResult = props.list.filter(
@ -54,12 +56,17 @@ export default function VerticalExpandableProductFilter(props) {
<ul className="w-full list-none flex flex-col divide-y divide-gray-100">
{(searchResult.length > 0 ? searchResult : props.list)?.map(
(item1, i) => (
<li
key={i}
className="hover:bg-gray-100 px-3 flex flex-row items-center justify-between py-2"
>
{console.log(i)}
<div className="flex flex-row items-center">
<Checkbox />
<Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
checkedBox[i] = !checkedBox[i]
setChecked(checkedBox)
}}/>
<strong className="text-xs font-light text-gray-500">
{item1.name}
</strong>

@ -0,0 +1,164 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../../../redux/actions";
import proxy from "../../../../redux/proxy";
import location from "../../../../utils/location";
import Button from "../../../../components/Button";
import Header from "../../../../components/Header";
import Comment from "../../Comment";
import Rate from "../../Rate";
export const ProductOverAll = ({
productType,
getInfo,
book,
grades,
isDark,
userId,
pushToCart,
headerOptions,
setHeaderOptions,
}) =>{
const [type, setType] = useState("physical");
return (
<div>
<header
className={`w-full flex`}
>
<img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt=""
style={{height: '320px'}}
className="-md py-8 px-16 bg-grayF4 mx-4"
/>
<div className="flex flex-1 flex-col pr-2 pt-2">
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white">
{type === "digital"
? book?.product[0]?.name
: book?.product[1]?.name}
</h1>
<div className="text-blueC0 text-xs dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
</div>
</div>
</header>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.pagesNum} <br /> صفحه
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{"فیزیکی - دیجیتالی"} <br /> در دسترس
</li>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white">
{book?.rate} <br /> امتیاز
</li>
</ul>
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA">
نسخه محصول را انتخاب کنید
</h2>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="نسخه فیزیکی"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="49%"
color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"}
selectable={true}
onClick={() => setType("physical")}
/>
<Button
title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="49%"
selectable={true}
active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")}
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
onClick={() =>
proxy.status()
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title={
"خرید با قیمت" +
" " +
(type === "digital"
? book?.product[0]?.price
: book?.product[1]?.price) +
" " +
"تومان"
}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="65%"
color="text-white"
/>
<Button
title="مشاهده نمونه"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="33%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Button
title="مشاهده دوره ویدئویی این محصول"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
bgOpacity="bg-opacity-10"
width="100%"
color={isDark ? "text-white" : "text-blueC0"}
/>
</div>
<div className="w-full flex flex-col justify-between items-center mt-4">
<Header title="توضیحات" link="#" />
<p className="text-xs text-gray1 mt-2 dark:text-white">
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ
ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ
ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ
ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ
ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ
ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ
ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
</p>
</div>
</div>
)
}
const mapStateToProps = (state) => ({
book: state.book.info,
grades: state.publicApi.grades,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
});
const mapDispatchToProps = {
getInfo: book.info,
pushToCart: userProduct.add,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll);

@ -1,9 +1,10 @@
import React from "react";
import ProductOverAll from "./ProductOverAll";
const DesktopProductLayout = () =>{
return (
<div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
Desktop
<div className="w-4/5 flex flex-row gap-10 px-5 overflow-y-hidden mt-3 mb-64">
<ProductOverAll />
</div>
);
};

@ -174,7 +174,10 @@ export const Product = ({
<Comment key={index} />
))}
</div>
</div>) : <DesktopProductLayout />}
</div>) :<div className="flex flex-col items-center justify-center">
<DesktopProductLayout />
</div>
}
</>
);
};
@ -182,6 +185,7 @@ export const Product = ({
const mapStateToProps = (state) => ({
book: state.book.info,
grades: state.publicApi.grades,
isMobile: state.publicApi.isMobile,
isDark: state.publicApi.isDark,
userId: state.user.status.id,
});

@ -59,8 +59,8 @@ export const Sidebar = ({}) => {
},
]
return <div className="flex flex-col w-1/4 p-4">
<VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
<VerticalExpandableProductFilter btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
<VerticalExpandableProductFilter list={categories} title="دسته بندی" searchAble={false}/>
</div>;
};

@ -49,6 +49,14 @@ module.exports = {
gray70: "#707070",
grayDB: "#DBDBDB",
}),
// height: (theme) =>( {
// sm: '8px',
// md: '16px',
// lg: '24px',
// xl: '48px',
// h420 : '320px',
// full: '100%',
// }),
borderColor: (theme) => ({
...theme("colors"),
blueC0: "#196EC0",

Loading…
Cancel
Save