formik and yup in request design
This commit is contained in:
hamid zarghami
Generated
+123
@@ -15,6 +15,7 @@
|
||||
"axios": "^1.13.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"formik": "^2.4.9",
|
||||
"html2canvas": "^1.4.1",
|
||||
"i18next": "^25.6.2",
|
||||
"iconsax-react": "^0.0.8",
|
||||
@@ -32,6 +33,7 @@
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"use-image": "^1.1.4",
|
||||
"yup": "^1.7.1",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -2081,6 +2083,18 @@
|
||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
|
||||
"integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@@ -2819,6 +2833,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
@@ -3330,6 +3353,31 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/formik": {
|
||||
"version": "2.4.9",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.4.9.tgz",
|
||||
"integrity": "sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://opencollective.com/formik"
|
||||
}
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"deepmerge": "^2.1.1",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"react-fast-compare": "^2.0.1",
|
||||
"tiny-warning": "^1.0.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@@ -3500,6 +3548,15 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/html-parse-stringify": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
|
||||
@@ -4053,6 +4110,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.18.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
|
||||
"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.18.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
|
||||
"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
@@ -4395,6 +4464,12 @@
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/property-expr": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
|
||||
"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
|
||||
@@ -4510,6 +4585,12 @@
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-i18next": {
|
||||
"version": "16.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.3.0.tgz",
|
||||
@@ -4890,6 +4971,18 @@
|
||||
"utrie": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-case": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
|
||||
"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.15",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||
@@ -4948,6 +5041,12 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/toposort": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
|
||||
"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ts-api-utils": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
|
||||
@@ -4980,6 +5079,18 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/type-fest": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
|
||||
"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
|
||||
"license": "(MIT OR CC0-1.0)",
|
||||
"engines": {
|
||||
"node": ">=12.20"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.9.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
|
||||
@@ -5252,6 +5363,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yup": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
|
||||
"integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"property-expr": "^2.0.5",
|
||||
"tiny-case": "^1.0.3",
|
||||
"toposort": "^2.0.2",
|
||||
"type-fest": "^2.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zustand": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"axios": "^1.13.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"formik": "^2.4.9",
|
||||
"html2canvas": "^1.4.1",
|
||||
"i18next": "^25.6.2",
|
||||
"iconsax-react": "^0.0.8",
|
||||
@@ -34,6 +35,7 @@
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"use-image": "^1.1.4",
|
||||
"yup": "^1.7.1",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
+2
-1
@@ -3,7 +3,8 @@
|
||||
"menu": "منو",
|
||||
"home_page": "صفحه اصلی",
|
||||
"catalog": "کاتالوگ",
|
||||
"logout": "خروج"
|
||||
"logout": "خروج",
|
||||
"request_design": "درخواست طراحی"
|
||||
},
|
||||
"header": {
|
||||
"search": "جستجو",
|
||||
|
||||
+174
-75
@@ -1,11 +1,15 @@
|
||||
import { usePageTitle } from '@/hooks/usePageTitle'
|
||||
import { useMemo, useState, type FC } from 'react'
|
||||
import { type FC } from 'react'
|
||||
import { Form, Formik, type FormikProps } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import Button from '@/components/Button'
|
||||
import DatePicker from '@/components/DatePicker'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
|
||||
import Error from '@/components/Error'
|
||||
import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
|
||||
|
||||
const PRICE_PER_PAGE = 1000
|
||||
|
||||
@@ -17,90 +21,185 @@ const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
|
||||
}
|
||||
})
|
||||
|
||||
export type DesignerRequestFormValues = {
|
||||
title: string
|
||||
count: number
|
||||
desc: string
|
||||
expectedDate: string
|
||||
attachments: string[]
|
||||
}
|
||||
|
||||
const initialValues: DesignerRequestFormValues = {
|
||||
title: '',
|
||||
count: 1,
|
||||
desc: '',
|
||||
expectedDate: '',
|
||||
attachments: [],
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
title: Yup.string().trim().required('عنوان کاتالوگ الزامی است'),
|
||||
count: Yup.number()
|
||||
.min(1, 'حداقل تعداد صفحات ۱ است')
|
||||
.max(20, 'حداکثر تعداد صفحات ۲۰ است')
|
||||
.required('تعداد صفحات الزامی است'),
|
||||
desc: Yup.string().trim(),
|
||||
expectedDate: Yup.string().required('زمان تحویل الزامی است'),
|
||||
attachments: Yup.array().of(Yup.string()),
|
||||
})
|
||||
|
||||
type DesignerRequestFormFieldsProps = FormikProps<DesignerRequestFormValues> & {
|
||||
uploadFile: ReturnType<typeof useSingleUpload>['mutateAsync']
|
||||
isUploading: boolean
|
||||
}
|
||||
|
||||
const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
isSubmitting,
|
||||
setFieldValue,
|
||||
setFieldTouched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
uploadFile,
|
||||
isUploading,
|
||||
}) => {
|
||||
const totalPrice = values.count * PRICE_PER_PAGE
|
||||
|
||||
const handleAttachmentChange = async (files: File[]) => {
|
||||
if (files.length === 0) {
|
||||
await setFieldValue('attachments', [])
|
||||
setFieldTouched('attachments', true)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await uploadFile(files[0])
|
||||
await setFieldValue('attachments', [response.data.url])
|
||||
} catch {
|
||||
await setFieldValue('attachments', [])
|
||||
} finally {
|
||||
setFieldTouched('attachments', true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Form className='mt-6 space-y-5'>
|
||||
<Input
|
||||
label='عنوان کاتالوگ'
|
||||
name='title'
|
||||
value={values.title}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
error_text={touched.title ? errors.title : undefined}
|
||||
/>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
|
||||
<DatePicker
|
||||
label='زمان تحویل موردنظر'
|
||||
placeholder='تاریخ را انتخاب کنید'
|
||||
defaulValue={values.expectedDate}
|
||||
onChange={(date) => {
|
||||
setFieldValue('expectedDate', date)
|
||||
setFieldTouched('expectedDate', true)
|
||||
}}
|
||||
error_text={touched.expectedDate ? errors.expectedDate : undefined}
|
||||
/>
|
||||
<Select
|
||||
label='تعداد صفحات'
|
||||
name='count'
|
||||
value={String(values.count)}
|
||||
items={pageCountOptions}
|
||||
onChange={(event) => setFieldValue('count', Number(event.target.value))}
|
||||
onBlur={handleBlur}
|
||||
error_text={touched.count ? errors.count : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
name='desc'
|
||||
value={values.desc}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className='min-h-[96px]'
|
||||
error_text={touched.desc ? errors.desc : undefined}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className='mb-2 text-sm'>فایل های ضمیمه</div>
|
||||
<UploadBoxDraggble
|
||||
label='فایل مورد نظر را آپلود کنید'
|
||||
onChange={handleAttachmentChange}
|
||||
isMultiple={false}
|
||||
isFile
|
||||
isLoading={isUploading}
|
||||
/>
|
||||
{touched.attachments && errors.attachments ? (
|
||||
<Error errorText={String(errors.attachments)} />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className='flex'>
|
||||
<div className='flex-1'></div>
|
||||
<div className='flex-1 flex gap-4'>
|
||||
<div className='w-[250px]'>
|
||||
<Input
|
||||
label='قیمت به ازای هر صفحه'
|
||||
value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label='مبلغ قابل پرداخت برای شما'
|
||||
value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button
|
||||
type='submit'
|
||||
className='w-fit px-6'
|
||||
disabled={isSubmitting || isUploading}
|
||||
>
|
||||
ثبت درخواست
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
const DesignerRequest: FC = () => {
|
||||
usePageTitle('درخواست طراحی')
|
||||
const [catalogTitle, setCatalogTitle] = useState('')
|
||||
const [, setDeliveryDate] = useState('')
|
||||
const [pageCount, setPageCount] = useState('1')
|
||||
const [description, setDescription] = useState('')
|
||||
const [, setAttachment] = useState<File[]>([])
|
||||
const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload()
|
||||
|
||||
const totalPrice = useMemo(() => {
|
||||
return Number(pageCount || 0) * PRICE_PER_PAGE
|
||||
}, [pageCount])
|
||||
|
||||
const handleAttachmentChange = (files: File[]) => {
|
||||
setAttachment(files)
|
||||
const handleSubmit = (values: DesignerRequestFormValues) => {
|
||||
console.log(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4 w-full'>
|
||||
<h1 className=''>درخواست طراحی کاتالوگ</h1>
|
||||
<div className='rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6'>
|
||||
|
||||
<div className='mt-6 space-y-5'>
|
||||
<Input
|
||||
label='عنوان کاتالوگ'
|
||||
value={catalogTitle}
|
||||
onChange={(event) => setCatalogTitle(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
|
||||
<DatePicker
|
||||
label='زمان تحویل موردنظر'
|
||||
placeholder='تاریخ را انتخاب کنید'
|
||||
onChange={(date) => setDeliveryDate(date)}
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(formikProps) => (
|
||||
<DesignerRequestFormFields
|
||||
{...formikProps}
|
||||
uploadFile={uploadFile}
|
||||
isUploading={isUploading}
|
||||
/>
|
||||
<Select
|
||||
label='تعداد صفحات'
|
||||
value={pageCount}
|
||||
items={pageCountOptions}
|
||||
onChange={(event) => setPageCount(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
className='min-h-[96px]'
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className='mb-2 text-sm'>فایل های ضمیمه</div>
|
||||
<UploadBoxDraggble
|
||||
label='فایل مورد نظر را آپلود کنید'
|
||||
onChange={handleAttachmentChange}
|
||||
isMultiple={false}
|
||||
isFile
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex'>
|
||||
<div className='flex-1'></div>
|
||||
<div className='flex-1 flex gap-4'>
|
||||
<div className='w-[250px]'>
|
||||
<Input
|
||||
label='قیمت به ازای هر صفحه'
|
||||
value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label='مبلغ قابل پرداخت برای شما'
|
||||
value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button className='w-fit px-6'>ثبت درخواست</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DesignerRequest
|
||||
export default DesignerRequest
|
||||
|
||||
+144
-109
@@ -1,124 +1,159 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
DocumentText,
|
||||
Home2,
|
||||
Logout,
|
||||
} from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
import { Paths } from '../config/Paths'
|
||||
import BuyCatalog from './components/BuyCatalog'
|
||||
|
||||
import { Brush2, DocumentText, Home2, Logout } from "iconsax-react";
|
||||
import { type FC, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import LogoSmall from "../assets/images/logo-small.svg";
|
||||
import LogoImage from "../assets/images/logo.svg";
|
||||
import { Paths } from "../config/Paths";
|
||||
import { clx } from "../helpers/utils";
|
||||
import BuyCatalog from "./components/BuyCatalog";
|
||||
import SideBarItem from "./SideBarItem";
|
||||
import { useSharedStore } from "./store/sharedStore";
|
||||
|
||||
const SideBar: FC = () => {
|
||||
const { t } = useTranslation("global");
|
||||
const {
|
||||
openSidebar,
|
||||
setOpenSidebar,
|
||||
hasSubMenu,
|
||||
setSubMenuName,
|
||||
setSubtMenu,
|
||||
subMenuName,
|
||||
} = useSharedStore();
|
||||
const location = useLocation();
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
||||
const location = useLocation()
|
||||
const isActive = (path: string) => {
|
||||
const pathname = location.pathname;
|
||||
if (path === "/") return pathname === "/";
|
||||
return pathname === path || pathname.startsWith(path + "/");
|
||||
};
|
||||
|
||||
const isActive = (path: string) => {
|
||||
const pathname = location.pathname
|
||||
if (path === '/') return pathname === '/'
|
||||
return pathname === path || pathname.startsWith(path + '/')
|
||||
useEffect(() => {
|
||||
const split = location.pathname.split("/");
|
||||
|
||||
if (split[1] === "dashboard" || split[1] === "products") {
|
||||
setSubMenuName(split[1]);
|
||||
setSubtMenu(true);
|
||||
} else {
|
||||
setSubMenuName("");
|
||||
setSubtMenu(false);
|
||||
}
|
||||
}, [location.pathname, setSubMenuName, setSubtMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
const split = location.pathname.split('/')
|
||||
const iconSizeSideBar = 20;
|
||||
|
||||
if (split[1] === 'dashboard' || split[1] === 'products') {
|
||||
setSubMenuName(split[1])
|
||||
setSubtMenu(true)
|
||||
} else {
|
||||
setSubMenuName('')
|
||||
setSubtMenu(false)
|
||||
}
|
||||
}, [location.pathname, setSubMenuName, setSubtMenu])
|
||||
return (
|
||||
<>
|
||||
{openSidebar && (
|
||||
<div
|
||||
className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10"
|
||||
onClick={() => setOpenSidebar(false)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={clx(
|
||||
"fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
|
||||
openSidebar && "opacity-100 visible translate-x-0 block z-40",
|
||||
hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
{!hasSubMenu ? (
|
||||
<img src={LogoImage} className="w-[140px]" />
|
||||
) : (
|
||||
<img src={LogoSmall} className="w-7" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
<div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
|
||||
<div
|
||||
className={clx(
|
||||
"mt-10 px-12 text-header text-sm font-normal",
|
||||
hasSubMenu && "px-2 text-center",
|
||||
)}
|
||||
>
|
||||
{t("sidebar.menu")}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
|
||||
}
|
||||
<div
|
||||
className={clx(
|
||||
'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible translate-x-0 block z-40',
|
||||
hasSubMenu && 'w-24 rounded-tl-none! rounded-bl-none!'
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-center'>
|
||||
{
|
||||
!hasSubMenu ?
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
:
|
||||
<img src={LogoSmall} className='w-7' />
|
||||
}
|
||||
</div>
|
||||
<div className="text-xs text-[#8C90A3]">
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Home2
|
||||
variant={isActive(Paths.home) ? "Bold" : "Outline"}
|
||||
color={isActive(Paths.home) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.home_page")}
|
||||
isActive={isActive(Paths.home)}
|
||||
link={Paths.home}
|
||||
activeName={Paths.home}
|
||||
/>
|
||||
|
||||
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
|
||||
<SideBarItem
|
||||
icon={
|
||||
<DocumentText
|
||||
variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"}
|
||||
color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.catalog")}
|
||||
isActive={isActive(Paths.catalog.list)}
|
||||
link={Paths.catalog.list}
|
||||
activeName={Paths.catalog.list}
|
||||
/>
|
||||
|
||||
<div className={clx(
|
||||
'mt-10 px-12 text-header text-sm font-normal',
|
||||
hasSubMenu && 'px-2 text-center'
|
||||
)}>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Brush2
|
||||
variant={
|
||||
isActive(Paths.designer.request) ? "Bold" : "Outline"
|
||||
}
|
||||
color={isActive(Paths.designer.request) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.request_design")}
|
||||
isActive={isActive(Paths.designer.request)}
|
||||
link={Paths.designer.request}
|
||||
activeName={Paths.designer.request}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Home2 variant={isActive(Paths.home) ? 'Bold' : 'Outline'} color={isActive(Paths.home) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.home_page')}
|
||||
isActive={isActive(Paths.home)}
|
||||
link={Paths.home}
|
||||
activeName={Paths.home}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive(Paths.catalog.list) ? 'Bold' : 'Outline'} color={isActive(Paths.catalog.list) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.catalog')}
|
||||
isActive={isActive(Paths.catalog.list)}
|
||||
link={Paths.catalog.list}
|
||||
activeName={Paths.catalog.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 flex flex-col justify-end mt-14'>
|
||||
<BuyCatalog />
|
||||
<div className='text-xs text-[#8C90A3] mt-5'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title="خروج"
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
isLogout
|
||||
activeName=''
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-end mt-14">
|
||||
<BuyCatalog />
|
||||
<div className="text-xs text-[#8C90A3] mt-5">
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Logout
|
||||
variant={isActive("logout") ? "Bold" : "Outline"}
|
||||
color={isActive("logout") ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title="خروج"
|
||||
isActive={isActive("logout")}
|
||||
link={`#`}
|
||||
isLogout
|
||||
activeName=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* منوی فرعی */}
|
||||
{
|
||||
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
|
||||
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
|
||||
{
|
||||
subMenuName === 'dashboard' ? null
|
||||
// <DashboardSubMenu />
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
{/* منوی فرعی */}
|
||||
{hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
|
||||
<div className="fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border">
|
||||
{subMenuName === "dashboard"
|
||||
? null
|
||||
: // <DashboardSubMenu />
|
||||
null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default SideBar
|
||||
export default SideBar;
|
||||
|
||||
Reference in New Issue
Block a user