@scbt-ecom/ui 0.0.29 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env +2 -0
- package/.eslintrc.cjs +134 -0
- package/.github/workflows/npm-publish.yml +22 -0
- package/.github/workflows/publish.yml +49 -0
- package/.github/workflows/setup-node/action.yml +22 -0
- package/.husky/pre-commit +1 -0
- package/.prettierrc +19 -0
- package/.storybook/main.ts +44 -0
- package/.storybook/preview.tsx +37 -0
- package/chromatic.config.json +5 -0
- package/index.html +13 -0
- package/lib/client.ts +80 -0
- package/lib/configs/index.ts +1 -0
- package/lib/configs/tailwindConfigBase.ts +110 -0
- package/lib/server.ts +2 -0
- package/lib/shared/constants/api.ts +2 -0
- package/lib/shared/constants/designSystem/colors.ts +117 -0
- package/lib/shared/constants/designSystem/index.ts +3 -0
- package/lib/shared/constants/designSystem/others.ts +18 -0
- package/lib/shared/constants/designSystem/typography.ts +88 -0
- package/lib/shared/constants/index.ts +2 -0
- package/lib/shared/hooks/index.ts +4 -0
- package/lib/shared/hooks/useBoolean.ts +12 -0
- package/lib/shared/hooks/useClickOutside.ts +19 -0
- package/lib/shared/hooks/useControlledForm.ts +16 -0
- package/lib/shared/hooks/useDebounce.ts +38 -0
- package/lib/shared/style.css +74 -0
- package/lib/shared/ui/Badge.tsx +20 -0
- package/lib/shared/ui/Breadcrumbs.tsx +57 -0
- package/lib/shared/ui/ButtonIcon.tsx +52 -0
- package/lib/shared/ui/CustomLink.tsx +70 -0
- package/lib/shared/ui/Document.tsx +51 -0
- package/lib/shared/ui/Heading.tsx +33 -0
- package/lib/shared/ui/Hint.tsx +62 -0
- package/lib/shared/ui/Loader.tsx +58 -0
- package/lib/shared/ui/PhoneView.tsx +23 -0
- package/lib/shared/ui/Portal.tsx +9 -0
- package/lib/shared/ui/ProgressBar.tsx +43 -0
- package/lib/shared/ui/ResponsiveContainer.tsx +11 -0
- package/lib/shared/ui/Section.tsx +15 -0
- package/lib/shared/ui/Skeleton.tsx +9 -0
- package/lib/shared/ui/TabsSwitcher.tsx +80 -0
- package/lib/shared/ui/accordion/Accordion.tsx +36 -0
- package/lib/shared/ui/accordion/index.ts +1 -0
- package/lib/shared/ui/accordion/model/types.ts +20 -0
- package/lib/shared/ui/accordion/ui/AccordionHeader.tsx +35 -0
- package/lib/shared/ui/brandLogos.tsx +14 -0
- package/lib/shared/ui/button/Button.tsx +111 -0
- package/lib/shared/ui/button/index.ts +1 -0
- package/lib/shared/ui/button/model/helpers.ts +16 -0
- package/lib/shared/ui/calendar/Calendar.tsx +228 -0
- package/lib/shared/ui/calendar/index.ts +231 -0
- package/lib/shared/ui/calendar/model/animation.ts +112 -0
- package/lib/shared/ui/calendar/model/classes.ts +34 -0
- package/lib/shared/ui/calendar/model/helpers.ts +51 -0
- package/lib/shared/ui/calendar/model/hooks/index.ts +2 -0
- package/lib/shared/ui/calendar/model/hooks/useCalendarDropdowns.ts +38 -0
- package/lib/shared/ui/calendar/model/hooks/useDatePicker.ts +103 -0
- package/lib/shared/ui/calendar/ui/CalendarHeader.tsx +54 -0
- package/lib/shared/ui/calendar/ui/Dropdown.tsx +75 -0
- package/lib/shared/ui/calendar/ui/NavigationArrows.tsx +23 -0
- package/lib/shared/ui/calendar/ui/Weekdays.tsx +16 -0
- package/lib/shared/ui/calendar/ui/index.ts +2 -0
- package/lib/shared/ui/formControlElements/CheckboxControl.tsx +92 -0
- package/lib/shared/ui/formControlElements/FormControl.tsx +5 -0
- package/lib/shared/ui/formControlElements/InputControl.tsx +68 -0
- package/lib/shared/ui/formControlElements/InputControlMask.tsx +80 -0
- package/lib/shared/ui/formControlElements/RadioControl.tsx +130 -0
- package/lib/shared/ui/formControlElements/SelectControl.tsx +185 -0
- package/lib/shared/ui/formControlElements/SwitchControl.tsx +79 -0
- package/lib/shared/ui/formControlElements/TextareaControl.tsx +92 -0
- package/lib/shared/ui/formControlElements/calendarControl/CalendarControl.tsx +175 -0
- package/lib/shared/ui/formControlElements/calendarControl/hooks/index.ts +2 -0
- package/lib/shared/ui/formControlElements/calendarControl/hooks/useCalendar.tsx +86 -0
- package/lib/shared/ui/formControlElements/calendarControl/hooks/useCalendarDropdowns.ts +38 -0
- package/{dist/shared/ui/formControlElements/calendarControl/index.d.ts → lib/shared/ui/formControlElements/calendarControl/index.ts} +1 -1
- package/lib/shared/ui/formControlElements/calendarControl/model/helpers.ts +60 -0
- package/lib/shared/ui/formControlElements/calendarControl/model/types.ts +44 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/DaysOfMonth.tsx +53 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/DaysOfWeek.tsx +28 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/Dropdown.tsx +62 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/Header.tsx +51 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/Navigation.tsx +32 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/OptionsList.tsx +44 -0
- package/lib/shared/ui/formControlElements/calendarControl/ui/index.ts +4 -0
- package/lib/shared/ui/formControlElements/dadata/DadataInputControl.tsx +132 -0
- package/{dist/shared/ui/formControlElements/dadata/index.d.ts → lib/shared/ui/formControlElements/dadata/index.ts} +1 -1
- package/lib/shared/ui/formControlElements/dadata/model/api.ts +25 -0
- package/lib/shared/ui/formControlElements/dadata/model/helpers.ts +76 -0
- package/lib/shared/ui/formControlElements/dadata/model/types.ts +52 -0
- package/lib/shared/ui/formControlElements/dadata/model/useDadata.ts +25 -0
- package/{dist/shared/ui/formControlElements/index.d.ts → lib/shared/ui/formControlElements/index.ts} +10 -10
- package/lib/shared/ui/formControlElements/model/classes-types.ts +22 -0
- package/lib/shared/ui/formControlElements/model/index.ts +2 -0
- package/lib/shared/ui/formControlElements/model/props-types.ts +26 -0
- package/lib/shared/ui/formControlElements/ui/FieldAttachment.tsx +66 -0
- package/lib/shared/ui/formControlElements/ui/FieldContainer.tsx +36 -0
- package/lib/shared/ui/formControlElements/ui/FieldWrapper.tsx +55 -0
- package/lib/shared/ui/formControlElements/ui/MessageView.tsx +37 -0
- package/lib/shared/ui/formControlElements/ui/index.ts +4 -0
- package/lib/shared/ui/icon/Icon.tsx +43 -0
- package/{dist/shared/ui/icon/index.d.ts → lib/shared/ui/icon/index.ts} +2 -2
- package/lib/shared/ui/icon/sprite.gen.ts +121 -0
- package/lib/shared/ui/index.ts +56 -0
- package/lib/shared/ui/popover/Popover.tsx +77 -0
- package/lib/shared/ui/popover/index.ts +1 -0
- package/lib/shared/ui/table/Table.tsx +143 -0
- package/lib/shared/ui/table/index.ts +1 -0
- package/lib/shared/ui/table/type.ts +30 -0
- package/lib/shared/utils/capitalize.ts +6 -0
- package/lib/shared/utils/cn.ts +6 -0
- package/lib/shared/utils/deepCompare.ts +1 -0
- package/lib/shared/utils/formatToDate.ts +5 -0
- package/lib/shared/utils/index.ts +5 -0
- package/lib/shared/utils/isClient.ts +1 -0
- package/lib/shared/validation/index.ts +3 -0
- package/lib/shared/validation/messages.ts +12 -0
- package/lib/shared/validation/regExp.ts +5 -0
- package/lib/shared/validation/zodValidation/calendar.ts +32 -0
- package/lib/shared/validation/zodValidation/dadataFio.ts +67 -0
- package/lib/shared/validation/zodValidation/index.ts +2 -0
- package/lib/vite-env.d.ts +2 -0
- package/lib/widgets/Advantages.tsx +45 -0
- package/lib/widgets/banner/Banner.tsx +62 -0
- package/lib/widgets/banner/index.ts +1 -0
- package/lib/widgets/banner/model/helpers.ts +44 -0
- package/lib/widgets/banner/money.png +0 -0
- package/lib/widgets/banner/ui/BannerButtonsGroup.tsx +30 -0
- package/{dist/widgets/index.d.ts → lib/widgets/index.ts} +3 -3
- package/lib/widgets/pageHeader/PageHeader.tsx +54 -0
- package/{dist/widgets/pageHeader/index.d.ts → lib/widgets/pageHeader/index.ts} +1 -1
- package/package.json +10 -12
- package/postcss.config.mjs +8 -0
- package/src/App.tsx +9 -0
- package/src/app/providers/RootProvider.tsx +11 -0
- package/src/app/providers/index.ts +1 -0
- package/src/app/providers/model/types.ts +5 -0
- package/src/app/providers/ui/ToasterProvider.tsx +23 -0
- package/src/app/providers/ui/index.ts +1 -0
- package/src/configs/setup.ts +9 -0
- package/src/configs/storybook.config.ts +23 -0
- package/src/main.tsx +10 -0
- package/src/stories/primitives/Accordion.stories.tsx +66 -0
- package/src/stories/primitives/Badge.stories.tsx +28 -0
- package/src/stories/primitives/Breadcrumbs.stories.tsx +29 -0
- package/src/stories/primitives/Button/Button.stories.tsx +149 -0
- package/src/stories/primitives/Button/Button.test.tsx +150 -0
- package/src/stories/primitives/ButtonIcon.stories.tsx +75 -0
- package/src/stories/primitives/CustomLink.stories.tsx +64 -0
- package/src/stories/primitives/Document.stories.tsx +36 -0
- package/src/stories/primitives/Heading.stories.tsx +29 -0
- package/src/stories/primitives/Hint.stories.tsx +82 -0
- package/src/stories/primitives/Icon.stories.tsx +36 -0
- package/src/stories/primitives/Loader.stories.tsx +39 -0
- package/src/stories/primitives/PhoneView.stories.tsx +22 -0
- package/src/stories/primitives/Popover.stories.tsx +41 -0
- package/src/stories/primitives/ProgressBar.stories.tsx +68 -0
- package/src/stories/primitives/Skeleton.stories.tsx +21 -0
- package/src/stories/primitives/Table.stories.tsx +44 -0
- package/src/stories/primitives/TabsSwitcher.stories.tsx +34 -0
- package/src/stories/primitives/formControl/Calendar.stories.tsx +61 -0
- package/src/stories/primitives/formControl/CalendarControl.stories.tsx +39 -0
- package/src/stories/primitives/formControl/CheckboxControl.stories.tsx +64 -0
- package/src/stories/primitives/formControl/DadataInputControl.stories.tsx +83 -0
- package/src/stories/primitives/formControl/FormControlAllFields.stories.tsx +25 -0
- package/src/stories/primitives/formControl/InputControl.stories.tsx +77 -0
- package/src/stories/primitives/formControl/RadioContol.stories.tsx +63 -0
- package/src/stories/primitives/formControl/SelectControl.stories.tsx +117 -0
- package/src/stories/primitives/formControl/SwitchControl.stories.tsx +51 -0
- package/src/stories/primitives/formControl/TextareaControl.stories.tsx +55 -0
- package/src/stories/primitives/formControl/inputControlMask.stories.tsx +69 -0
- package/src/stories/widgets/Advantages.stories.tsx +42 -0
- package/src/stories/widgets/Banner.stories.tsx +40 -0
- package/src/stories/widgets/PageHeader.stories.tsx +33 -0
- package/src/storybookHelpers/actions.tsx +5 -0
- package/src/storybookHelpers/index.ts +2 -0
- package/src/storybookHelpers/reactHookForm/index.ts +3 -0
- package/src/storybookHelpers/reactHookForm/model/mockData.ts +21 -0
- package/src/storybookHelpers/reactHookForm/model/mocks.tsx +71 -0
- package/src/storybookHelpers/reactHookForm/model/types.ts +62 -0
- package/src/storybookHelpers/reactHookForm/ui/StorybookFieldsMapper.tsx +76 -0
- package/src/storybookHelpers/reactHookForm/ui/StorybookFormProvider.tsx +43 -0
- package/src/storybookHelpers/reactHookForm/ui/index.ts +2 -0
- package/src/storybookHelpers/table/utils/defaultValue.ts +51 -0
- package/static/arrows/arrowCircle.svg +18 -0
- package/static/arrows/arrowLink.svg +3 -0
- package/static/arrows/arrowRight.svg +3 -0
- package/static/brandLogos/logoBlack.svg +14 -0
- package/static/brandLogos/logoBusiness.svg +80 -0
- package/static/brandLogos/logoGray.svg +56 -0
- package/static/brandLogos/logoInsurance.svg +124 -0
- package/static/brandLogos/logoMain.svg +14 -0
- package/static/brandLogos/logoWhite.svg +56 -0
- package/static/files/documentFilled.svg +4 -0
- package/static/files/documentOutline.svg +4 -0
- package/static/general/calendar.svg +3 -0
- package/static/general/check.svg +6 -0
- package/static/general/close.svg +12 -0
- package/static/info/warningCircle.svg +5 -0
- package/tailwind.config.ts +9 -0
- package/tsconfig.json +33 -0
- package/tsconfig.node.json +11 -0
- package/vite.config.ts +63 -0
- package/vitest.config.mjs +12 -0
- package/dist/ExampleBadge.d.ts +0 -5
- package/dist/ExampleContainer.d.ts +0 -5
- package/dist/configs/index.d.ts +0 -1
- package/dist/configs/tailwindConfigBase.d.ts +0 -2
- package/dist/index.d.ts +0 -2
- package/dist/shared/constants/api.d.ts +0 -2
- package/dist/shared/constants/designSystem/colors.d.ts +0 -120
- package/dist/shared/constants/designSystem/index.d.ts +0 -3
- package/dist/shared/constants/designSystem/others.d.ts +0 -16
- package/dist/shared/constants/designSystem/typography.d.ts +0 -75
- package/dist/shared/constants/index.d.ts +0 -2
- package/dist/shared/hooks/index.d.ts +0 -4
- package/dist/shared/hooks/useBoolean.d.ts +0 -3
- package/dist/shared/hooks/useClickOutside.d.ts +0 -2
- package/dist/shared/hooks/useControlledForm.d.ts +0 -7
- package/dist/shared/hooks/useDebounce.d.ts +0 -3
- package/dist/shared/ui/Badge.d.ts +0 -6
- package/dist/shared/ui/Breadcrumbs.d.ts +0 -15
- package/dist/shared/ui/ButtonIcon.d.ts +0 -17
- package/dist/shared/ui/CustomLink.d.ts +0 -15
- package/dist/shared/ui/Document.d.ts +0 -13
- package/dist/shared/ui/Heading.d.ts +0 -12
- package/dist/shared/ui/Hint.d.ts +0 -21
- package/dist/shared/ui/Loader.d.ts +0 -21
- package/dist/shared/ui/PhoneView.d.ts +0 -12
- package/dist/shared/ui/Portal.d.ts +0 -7
- package/dist/shared/ui/ProgressBar.d.ts +0 -18
- package/dist/shared/ui/ResponsiveContainer.d.ts +0 -6
- package/dist/shared/ui/Section.d.ts +0 -6
- package/dist/shared/ui/Skeleton.d.ts +0 -4
- package/dist/shared/ui/TabsSwitcher.d.ts +0 -33
- package/dist/shared/ui/accordion/Accordion.d.ts +0 -13
- package/dist/shared/ui/accordion/index.d.ts +0 -1
- package/dist/shared/ui/accordion/model/types.d.ts +0 -17
- package/dist/shared/ui/accordion/ui/AccordionHeader.d.ts +0 -8
- package/dist/shared/ui/brandLogos.d.ts +0 -5
- package/dist/shared/ui/button/Button.d.ts +0 -17
- package/dist/shared/ui/button/index.d.ts +0 -1
- package/dist/shared/ui/button/model/helpers.d.ts +0 -2
- package/dist/shared/ui/calendar/Calendar.d.ts +0 -20
- package/dist/shared/ui/calendar/index.d.ts +0 -1
- package/dist/shared/ui/calendar/model/animation.d.ts +0 -18
- package/dist/shared/ui/calendar/model/classes.d.ts +0 -24
- package/dist/shared/ui/calendar/model/helpers.d.ts +0 -9
- package/dist/shared/ui/calendar/model/hooks/index.d.ts +0 -2
- package/dist/shared/ui/calendar/model/hooks/useCalendarDropdowns.d.ts +0 -9
- package/dist/shared/ui/calendar/model/hooks/useDatePicker.d.ts +0 -19
- package/dist/shared/ui/calendar/ui/CalendarHeader.d.ts +0 -15
- package/dist/shared/ui/calendar/ui/Dropdown.d.ts +0 -10
- package/dist/shared/ui/calendar/ui/NavigationArrows.d.ts +0 -5
- package/dist/shared/ui/calendar/ui/Weekdays.d.ts +0 -1
- package/dist/shared/ui/calendar/ui/index.d.ts +0 -2
- package/dist/shared/ui/formControlElements/CheckboxControl.d.ts +0 -13
- package/dist/shared/ui/formControlElements/FormControl.d.ts +0 -3
- package/dist/shared/ui/formControlElements/InputControl.d.ts +0 -6
- package/dist/shared/ui/formControlElements/InputControlMask.d.ts +0 -10
- package/dist/shared/ui/formControlElements/RadioControl.d.ts +0 -26
- package/dist/shared/ui/formControlElements/SelectControl.d.ts +0 -27
- package/dist/shared/ui/formControlElements/SwitchControl.d.ts +0 -16
- package/dist/shared/ui/formControlElements/TextareaControl.d.ts +0 -11
- package/dist/shared/ui/formControlElements/calendarControl/CalendarControl.d.ts +0 -13
- package/dist/shared/ui/formControlElements/calendarControl/hooks/index.d.ts +0 -2
- package/dist/shared/ui/formControlElements/calendarControl/hooks/useCalendar.d.ts +0 -16
- package/dist/shared/ui/formControlElements/calendarControl/hooks/useCalendarDropdowns.d.ts +0 -9
- package/dist/shared/ui/formControlElements/calendarControl/model/helpers.d.ts +0 -24
- package/dist/shared/ui/formControlElements/calendarControl/model/types.d.ts +0 -33
- package/dist/shared/ui/formControlElements/calendarControl/ui/DaysOfMonth.d.ts +0 -10
- package/dist/shared/ui/formControlElements/calendarControl/ui/DaysOfWeek.d.ts +0 -6
- package/dist/shared/ui/formControlElements/calendarControl/ui/Dropdown.d.ts +0 -11
- package/dist/shared/ui/formControlElements/calendarControl/ui/Header.d.ts +0 -14
- package/dist/shared/ui/formControlElements/calendarControl/ui/Navigation.d.ts +0 -9
- package/dist/shared/ui/formControlElements/calendarControl/ui/OptionsList.d.ts +0 -5
- package/dist/shared/ui/formControlElements/calendarControl/ui/index.d.ts +0 -4
- package/dist/shared/ui/formControlElements/dadata/DadataInputControl.d.ts +0 -14
- package/dist/shared/ui/formControlElements/dadata/model/api.d.ts +0 -2
- package/dist/shared/ui/formControlElements/dadata/model/helpers.d.ts +0 -7
- package/dist/shared/ui/formControlElements/dadata/model/types.d.ts +0 -42
- package/dist/shared/ui/formControlElements/dadata/model/useDadata.d.ts +0 -7
- package/dist/shared/ui/formControlElements/model/classes-types.d.ts +0 -18
- package/dist/shared/ui/formControlElements/model/index.d.ts +0 -2
- package/dist/shared/ui/formControlElements/model/props-types.d.ts +0 -20
- package/dist/shared/ui/formControlElements/ui/FieldAttachment.d.ts +0 -13
- package/dist/shared/ui/formControlElements/ui/FieldContainer.d.ts +0 -14
- package/dist/shared/ui/formControlElements/ui/FieldWrapper.d.ts +0 -14
- package/dist/shared/ui/formControlElements/ui/MessageView.d.ts +0 -13
- package/dist/shared/ui/formControlElements/ui/index.d.ts +0 -4
- package/dist/shared/ui/icon/Icon.d.ts +0 -10
- package/dist/shared/ui/icon/sprite.gen.d.ts +0 -17
- package/dist/shared/ui/index.d.ts +0 -21
- package/dist/shared/ui/popover/Popover.d.ts +0 -23
- package/dist/shared/ui/popover/index.d.ts +0 -1
- package/dist/shared/ui/table/Table.d.ts +0 -17
- package/dist/shared/ui/table/index.d.ts +0 -1
- package/dist/shared/ui/table/type.d.ts +0 -21
- package/dist/shared/utils/capitalize.d.ts +0 -1
- package/dist/shared/utils/cn.d.ts +0 -2
- package/dist/shared/utils/deepCompare.d.ts +0 -1
- package/dist/shared/utils/formatToDate.d.ts +0 -1
- package/dist/shared/utils/index.d.ts +0 -5
- package/dist/shared/utils/isClient.d.ts +0 -1
- package/dist/shared/validation/index.d.ts +0 -3
- package/dist/shared/validation/messages.d.ts +0 -12
- package/dist/shared/validation/regExp.d.ts +0 -3
- package/dist/shared/validation/zodValidation/calendar.d.ts +0 -2
- package/dist/shared/validation/zodValidation/dadataFio.d.ts +0 -6
- package/dist/shared/validation/zodValidation/index.d.ts +0 -2
- package/dist/style.css +0 -1
- package/dist/ui.es.js +0 -636
- package/dist/ui.umd.js +0 -30
- package/dist/widgets/Advantages.d.ts +0 -17
- package/dist/widgets/banner/Banner.d.ts +0 -28
- package/dist/widgets/banner/index.d.ts +0 -1
- package/dist/widgets/banner/model/helpers.d.ts +0 -4
- package/dist/widgets/banner/ui/BannerButtonsGroup.d.ts +0 -12
- package/dist/widgets/pageHeader/PageHeader.d.ts +0 -16
- /package/{dist → public}/sprites/arrows.svg +0 -0
- /package/{dist → public}/sprites/brandLogos.svg +0 -0
- /package/{dist → public}/sprites/common.svg +0 -0
- /package/{dist → public}/sprites/files.svg +0 -0
- /package/{dist → public}/sprites/general.svg +0 -0
- /package/{dist → public}/sprites/info.svg +0 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import { useMemo, useState } from 'react'
|
|
4
|
+
import { add, eachDayOfInterval, endOfMonth, endOfWeek, format, parse, startOfWeek } from 'date-fns'
|
|
5
|
+
import { ru } from 'date-fns/locale'
|
|
6
|
+
|
|
7
|
+
export const useCalendar = (calendarValue: string) => {
|
|
8
|
+
const [currentDate, setCurrentDate] = useState(calendarValue)
|
|
9
|
+
const [selectedDay, selectedMonth, selectedYear] = currentDate?.split('.') ?? ''
|
|
10
|
+
|
|
11
|
+
const formattedDate = format(new Date(+selectedYear, +selectedMonth - 1, +selectedDay), 'MMM-yyyy')
|
|
12
|
+
const firstDayOfMonth = parse(formattedDate, 'MMM-yyyy', new Date())
|
|
13
|
+
|
|
14
|
+
const daysOfMonth = eachDayOfInterval({
|
|
15
|
+
start: startOfWeek(firstDayOfMonth, { weekStartsOn: 1 }),
|
|
16
|
+
end: endOfWeek(endOfMonth(firstDayOfMonth))
|
|
17
|
+
})
|
|
18
|
+
const memoDaysOfMonth = useMemo(() => daysOfMonth, [daysOfMonth])
|
|
19
|
+
|
|
20
|
+
const formattedMonth = format(selectedMonth, 'MMMM', { locale: ru })
|
|
21
|
+
|
|
22
|
+
const onSelectDay = (day: Date, onChange: (...event: unknown[]) => void) => {
|
|
23
|
+
const updatedDate = format(day, 'dd.MM.yyyy')
|
|
24
|
+
onChange(updatedDate)
|
|
25
|
+
setCurrentDate(updatedDate)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const onSelectMonth = (month: number, onChange: (...event: unknown[]) => void) => {
|
|
29
|
+
const updatedDate = format(new Date(+selectedYear, +month, +selectedDay), 'dd.MM.yyyy')
|
|
30
|
+
onChange(updatedDate)
|
|
31
|
+
setCurrentDate(updatedDate)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const onSelectYear = (year: number, onChange: (...event: unknown[]) => void) => {
|
|
35
|
+
const updatedDate = format(new Date(+year, +selectedMonth - 1, +selectedDay), 'dd.MM.yyyy')
|
|
36
|
+
onChange(format(new Date(+year, +selectedMonth - 1, +selectedDay), 'dd.MM.yyyy'))
|
|
37
|
+
setCurrentDate(updatedDate)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const onChangeMonth = (
|
|
41
|
+
event: React.MouseEvent<HTMLButtonElement>,
|
|
42
|
+
onChange: (...event: unknown[]) => void,
|
|
43
|
+
mode: 'prev' | 'next'
|
|
44
|
+
) => {
|
|
45
|
+
event.preventDefault()
|
|
46
|
+
|
|
47
|
+
switch (mode) {
|
|
48
|
+
case 'next':
|
|
49
|
+
const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 })
|
|
50
|
+
const updatedDateNext = format(firstDayOfNextMonth, 'dd.MM.yyyy')
|
|
51
|
+
onChange(updatedDateNext)
|
|
52
|
+
setCurrentDate(updatedDateNext)
|
|
53
|
+
|
|
54
|
+
break
|
|
55
|
+
case 'prev':
|
|
56
|
+
const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 })
|
|
57
|
+
const updatedDatePrev = format(firstDayOfPrevMonth, 'dd.MM.yyyy')
|
|
58
|
+
onChange(updatedDatePrev)
|
|
59
|
+
setCurrentDate(updatedDatePrev)
|
|
60
|
+
|
|
61
|
+
break
|
|
62
|
+
default:
|
|
63
|
+
break
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const onBlurInput = (inputValue: string, onChange: (...event: unknown[]) => void) => {
|
|
68
|
+
if (inputValue) {
|
|
69
|
+
onChange(inputValue)
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return {
|
|
74
|
+
memoDaysOfMonth,
|
|
75
|
+
firstDayOfMonth,
|
|
76
|
+
selectedDay,
|
|
77
|
+
selectedMonth,
|
|
78
|
+
selectedYear,
|
|
79
|
+
formattedMonth,
|
|
80
|
+
onSelectDay,
|
|
81
|
+
onSelectMonth,
|
|
82
|
+
onSelectYear,
|
|
83
|
+
onBlurInput,
|
|
84
|
+
onChangeMonth
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { useBoolean } from '$/shared/hooks'
|
|
2
|
+
|
|
3
|
+
export const useCalendarDropdowns = () => {
|
|
4
|
+
const [isMonthOpen, monthsSetter] = useBoolean(false)
|
|
5
|
+
const [isYearsOpen, yearsSetter] = useBoolean(false)
|
|
6
|
+
const [isCalendarOpen, calendarSetter] = useBoolean(false)
|
|
7
|
+
|
|
8
|
+
const toggleCalendar = (onClickIcon?: (...args: unknown[]) => unknown) => {
|
|
9
|
+
calendarSetter()
|
|
10
|
+
if (onClickIcon) {
|
|
11
|
+
onClickIcon()
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const toggleMonthDropdown = () => {
|
|
16
|
+
monthsSetter()
|
|
17
|
+
if (isYearsOpen) {
|
|
18
|
+
yearsSetter(false)
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const toggleYearDropdown = () => {
|
|
23
|
+
yearsSetter()
|
|
24
|
+
if (isMonthOpen) {
|
|
25
|
+
monthsSetter(false)
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return {
|
|
30
|
+
calendarSetter,
|
|
31
|
+
toggleCalendar,
|
|
32
|
+
isMonthOpen,
|
|
33
|
+
toggleMonthDropdown,
|
|
34
|
+
isYearsOpen,
|
|
35
|
+
toggleYearDropdown,
|
|
36
|
+
isCalendarOpen
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { CalendarControl, type ICalendarControlProps } from './CalendarControl'
|
|
1
|
+
export { CalendarControl, type ICalendarControlProps } from './CalendarControl'
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { type TDayOfWeek } from './types'
|
|
2
|
+
|
|
3
|
+
export const capitalizeFirstLetter = (query: string): string => {
|
|
4
|
+
return query.charAt(0).toUpperCase() + query.substring(1)
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const colStartClasses = [
|
|
8
|
+
'col-start-1',
|
|
9
|
+
'col-start-2',
|
|
10
|
+
'col-start-3',
|
|
11
|
+
'col-start-4',
|
|
12
|
+
'col-start-5',
|
|
13
|
+
'col-start-6',
|
|
14
|
+
'col-start-7'
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
export const calendarAnimation = {
|
|
18
|
+
initial: { opacity: 0, y: -40 },
|
|
19
|
+
animate: { opacity: 1, y: 0 },
|
|
20
|
+
exit: { opacity: 0, y: -40 },
|
|
21
|
+
transition: { duration: 0.4, ease: 'easeInOut' }
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const getYearsFromCurrentTo = (endYear = 1950) => {
|
|
25
|
+
const currentYear = new Date().getFullYear()
|
|
26
|
+
const years = []
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line no-plusplus
|
|
29
|
+
for (let year = currentYear; year >= endYear; year--) {
|
|
30
|
+
years.push(year)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return years
|
|
34
|
+
}
|
|
35
|
+
export const YEARS_OPTIONS = getYearsFromCurrentTo()
|
|
36
|
+
|
|
37
|
+
export const DAYS_OF_WEEK: TDayOfWeek[] = [
|
|
38
|
+
{ day: 'Пн' },
|
|
39
|
+
{ day: 'Вт' },
|
|
40
|
+
{ day: 'Ср' },
|
|
41
|
+
{ day: 'Чт' },
|
|
42
|
+
{ day: 'Пт' },
|
|
43
|
+
{ day: 'Сб', isWeekend: true },
|
|
44
|
+
{ day: 'Вс', isWeekend: true }
|
|
45
|
+
]
|
|
46
|
+
|
|
47
|
+
export const MONTHS_OPTIONS = [
|
|
48
|
+
'Январь',
|
|
49
|
+
'Февраль',
|
|
50
|
+
'Март',
|
|
51
|
+
'Апрель',
|
|
52
|
+
'Май',
|
|
53
|
+
'Июнь',
|
|
54
|
+
'Июль',
|
|
55
|
+
'Август',
|
|
56
|
+
'Сентябрь',
|
|
57
|
+
'Октябрь',
|
|
58
|
+
'Ноябрь',
|
|
59
|
+
'Декабрь'
|
|
60
|
+
]
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { type TAdditionalInputClassesWithAttachment } from '../../model'
|
|
2
|
+
|
|
3
|
+
export type TDayOfWeek = {
|
|
4
|
+
day: string
|
|
5
|
+
isWeekend?: boolean
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export type TDaysOfMonthClasses = {
|
|
9
|
+
monthWrapper: string
|
|
10
|
+
button: string
|
|
11
|
+
day: string
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type TDaysOfWeekClasses = {
|
|
15
|
+
weekWrapper: string
|
|
16
|
+
weekDay: string
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export type TNavigationClasses = {
|
|
20
|
+
navigationWrapper: string
|
|
21
|
+
swipeButton: string
|
|
22
|
+
arrowIcon: string
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export type TDropdownClasses = {
|
|
26
|
+
dropdownWrapper: string
|
|
27
|
+
dropdownTrigger: string
|
|
28
|
+
dropdownIcon: string
|
|
29
|
+
dropdownOverlay: string
|
|
30
|
+
dropdownOptions: string
|
|
31
|
+
dropdownOption: string
|
|
32
|
+
dropdowns: string
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export type TCalendarClasses = Partial<TDayOfWeek> &
|
|
36
|
+
Partial<TDaysOfMonthClasses> &
|
|
37
|
+
Partial<TDaysOfWeekClasses> &
|
|
38
|
+
Partial<TNavigationClasses> &
|
|
39
|
+
Partial<TDropdownClasses> &
|
|
40
|
+
Partial<TAdditionalInputClassesWithAttachment> & {
|
|
41
|
+
rootWrapper: string
|
|
42
|
+
calendarWrapper: string
|
|
43
|
+
calendarHeader: string
|
|
44
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { format, getDay, isSameMonth, isToday } from 'date-fns'
|
|
2
|
+
import { colStartClasses } from '../model/helpers'
|
|
3
|
+
import { type TDaysOfMonthClasses } from '../model/types'
|
|
4
|
+
import { cn } from '$/shared/utils'
|
|
5
|
+
|
|
6
|
+
interface IDaysOfMonthProps {
|
|
7
|
+
daysList: Date[]
|
|
8
|
+
selectedDay: number
|
|
9
|
+
firstDayOfMonth: Date
|
|
10
|
+
onSelectDay: (day: Date) => void
|
|
11
|
+
classes?: Partial<TDaysOfMonthClasses>
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const DaysOfMonth = ({ daysList, firstDayOfMonth, selectedDay, onSelectDay, classes }: IDaysOfMonthProps) => {
|
|
15
|
+
return (
|
|
16
|
+
<div className={cn('grid grid-cols-7 place-items-center', classes?.monthWrapper)}>
|
|
17
|
+
{daysList?.map((day, idx) => {
|
|
18
|
+
const isCurrentMonth = isSameMonth(day, firstDayOfMonth)
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<div
|
|
22
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
23
|
+
key={idx}
|
|
24
|
+
role='button'
|
|
25
|
+
tabIndex={0}
|
|
26
|
+
onKeyDown={() => onSelectDay(day)}
|
|
27
|
+
onClick={() => onSelectDay(day)}
|
|
28
|
+
className={cn(
|
|
29
|
+
'size-10 cursor-pointer flex items-center justify-center',
|
|
30
|
+
colStartClasses[getDay(+day - 1)],
|
|
31
|
+
classes?.button
|
|
32
|
+
)}
|
|
33
|
+
>
|
|
34
|
+
<span
|
|
35
|
+
className={cn(
|
|
36
|
+
'flex items-center justify-center w-full h-full mob-body-regular-m rounded-sm text-color-dark border border-solid border-transparent transition-colors hover:bg-color-primary-tr-hover hover:border-primary-default',
|
|
37
|
+
{
|
|
38
|
+
'text-color-primary-default relative before:content-[" "] before:w-4 before:h-[2px] before:rounded-[2px] before:bg-icon-primary-default before:absolute before:bottom-1 before:left-1/2 before:-translate-x-1/2':
|
|
39
|
+
isToday(day),
|
|
40
|
+
'!bg-color-primary-default !text-color-white': selectedDay === +format(day, 'dd') && isCurrentMonth,
|
|
41
|
+
'text-color-disabled': !isCurrentMonth
|
|
42
|
+
},
|
|
43
|
+
classes?.day
|
|
44
|
+
)}
|
|
45
|
+
>
|
|
46
|
+
{format(day, 'd')}
|
|
47
|
+
</span>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
})}
|
|
51
|
+
</div>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { capitalizeFirstLetter, DAYS_OF_WEEK } from '../model/helpers'
|
|
2
|
+
import { type TDaysOfWeekClasses } from '../model/types'
|
|
3
|
+
import { cn } from '$/shared/utils'
|
|
4
|
+
|
|
5
|
+
interface IDaysOfWeekProps {
|
|
6
|
+
classes?: Partial<TDaysOfWeekClasses>
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const DaysOfWeek = ({ classes }: IDaysOfWeekProps) => {
|
|
10
|
+
return (
|
|
11
|
+
<div className={cn('grid grid-cols-7 pt-2', classes?.weekWrapper)}>
|
|
12
|
+
{DAYS_OF_WEEK?.map(({ day, isWeekend }) => {
|
|
13
|
+
return (
|
|
14
|
+
<span
|
|
15
|
+
key={day}
|
|
16
|
+
className={cn(
|
|
17
|
+
'mob-body-medium-m size-10 flex items-center justify-center',
|
|
18
|
+
{ 'text-color-negative': isWeekend },
|
|
19
|
+
classes?.weekDay
|
|
20
|
+
)}
|
|
21
|
+
>
|
|
22
|
+
{capitalizeFirstLetter(day)}
|
|
23
|
+
</span>
|
|
24
|
+
)
|
|
25
|
+
})}
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { type TDropdownClasses } from '../model/types'
|
|
2
|
+
import { OptionsList } from './OptionsList'
|
|
3
|
+
import { Icon } from '$/shared/ui'
|
|
4
|
+
import { cn } from '$/shared/utils'
|
|
5
|
+
|
|
6
|
+
export interface IDropdownProps<Value extends string | number> {
|
|
7
|
+
options: Value[]
|
|
8
|
+
selectedValue: string
|
|
9
|
+
isActive: boolean
|
|
10
|
+
onClickTrigger: () => void
|
|
11
|
+
onClickOption: (value: number) => void
|
|
12
|
+
variant?: 'months' | 'years'
|
|
13
|
+
classes?: Partial<TDropdownClasses>
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const Dropdown = <Value extends string | number>({
|
|
17
|
+
onClickTrigger,
|
|
18
|
+
isActive,
|
|
19
|
+
selectedValue,
|
|
20
|
+
options,
|
|
21
|
+
variant = 'months',
|
|
22
|
+
onClickOption,
|
|
23
|
+
classes
|
|
24
|
+
}: IDropdownProps<Value>) => {
|
|
25
|
+
return (
|
|
26
|
+
<div className={cn('w-full z-20', classes?.dropdownWrapper)}>
|
|
27
|
+
<div
|
|
28
|
+
role='button'
|
|
29
|
+
tabIndex={0}
|
|
30
|
+
onKeyDown={onClickTrigger}
|
|
31
|
+
onClick={onClickTrigger}
|
|
32
|
+
className={cn(
|
|
33
|
+
'py-2 px-2 rounded-sm text-color-tetriary desk-body-medium-l flex items-center gap-[2px] transition-colors hover:bg-color-primary-tr-hover',
|
|
34
|
+
{ 'text-color-primary-default': isActive },
|
|
35
|
+
classes?.dropdownTrigger
|
|
36
|
+
)}
|
|
37
|
+
>
|
|
38
|
+
{selectedValue}
|
|
39
|
+
<Icon
|
|
40
|
+
name='arrows/arrowRight'
|
|
41
|
+
className={cn('rotate-90 text-icon-blue-grey-800', { 'text-icon-primary-default': isActive }, classes?.dropdownIcon)}
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div
|
|
46
|
+
className={cn(
|
|
47
|
+
'flex flex-col absolute w-full h-[280px] transition-all bottom-3 left-1/2 overflow-hidden -translate-x-1/2 px-4 z-10 opacity-0 invisible',
|
|
48
|
+
{ 'opacity-100 visible': isActive },
|
|
49
|
+
classes?.dropdownOverlay
|
|
50
|
+
)}
|
|
51
|
+
>
|
|
52
|
+
<OptionsList
|
|
53
|
+
options={options}
|
|
54
|
+
selectedValue={selectedValue}
|
|
55
|
+
isActive={isActive}
|
|
56
|
+
onClickOption={onClickOption}
|
|
57
|
+
variant={variant}
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
)
|
|
62
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { MONTHS_OPTIONS, YEARS_OPTIONS } from '../model/helpers'
|
|
2
|
+
import { type TDropdownClasses } from '../model/types'
|
|
3
|
+
import { Dropdown } from './Dropdown'
|
|
4
|
+
import { cn } from '$/shared/utils'
|
|
5
|
+
|
|
6
|
+
interface IHeaderProps {
|
|
7
|
+
month: string
|
|
8
|
+
year: string
|
|
9
|
+
isYearsOpen: boolean
|
|
10
|
+
isMonthOpen: boolean
|
|
11
|
+
toggleMonthDropdown: () => void
|
|
12
|
+
toggleYearDropdown: () => void
|
|
13
|
+
onSelectMonth: (month: number) => void
|
|
14
|
+
onSelectYear: (year: number) => void
|
|
15
|
+
classes?: Partial<TDropdownClasses>
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const Header = ({
|
|
19
|
+
isMonthOpen,
|
|
20
|
+
isYearsOpen,
|
|
21
|
+
toggleMonthDropdown,
|
|
22
|
+
toggleYearDropdown,
|
|
23
|
+
onSelectMonth,
|
|
24
|
+
onSelectYear,
|
|
25
|
+
month,
|
|
26
|
+
year,
|
|
27
|
+
classes
|
|
28
|
+
}: IHeaderProps) => {
|
|
29
|
+
return (
|
|
30
|
+
<div className={cn('flex items-center', classes?.dropdowns)}>
|
|
31
|
+
<Dropdown
|
|
32
|
+
options={MONTHS_OPTIONS}
|
|
33
|
+
isActive={isMonthOpen}
|
|
34
|
+
selectedValue={MONTHS_OPTIONS[+month - 1]}
|
|
35
|
+
onClickTrigger={toggleMonthDropdown}
|
|
36
|
+
onClickOption={onSelectMonth}
|
|
37
|
+
classes={classes}
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
<Dropdown
|
|
41
|
+
options={YEARS_OPTIONS}
|
|
42
|
+
isActive={isYearsOpen}
|
|
43
|
+
selectedValue={year}
|
|
44
|
+
onClickTrigger={toggleYearDropdown}
|
|
45
|
+
onClickOption={onSelectYear}
|
|
46
|
+
variant='years'
|
|
47
|
+
classes={classes}
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { MouseEventHandler } from 'react'
|
|
2
|
+
import { type TNavigationClasses } from '../model/types'
|
|
3
|
+
import { Icon } from '$/shared/ui'
|
|
4
|
+
import { cn } from '$/shared/utils'
|
|
5
|
+
|
|
6
|
+
interface INavigationProps {
|
|
7
|
+
onClickPrevMonth: MouseEventHandler<HTMLButtonElement>
|
|
8
|
+
onClickNextMonth: MouseEventHandler<HTMLButtonElement>
|
|
9
|
+
classes?: Partial<TNavigationClasses>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const Navigation = ({ onClickPrevMonth, onClickNextMonth, classes }: INavigationProps) => {
|
|
13
|
+
return (
|
|
14
|
+
<div className={cn('flex items-center justify-evenly gap-6', classes?.navigationWrapper)}>
|
|
15
|
+
<button type='button' className={cn('w-6 h-6 cursor-pointer', classes?.swipeButton)} onClick={onClickPrevMonth}>
|
|
16
|
+
<Icon
|
|
17
|
+
name='arrows/arrowRight'
|
|
18
|
+
className={cn(
|
|
19
|
+
'size-6 rotate-180 text-icon-blue-grey-800 hover:text-icon-accent-hover transition-colors',
|
|
20
|
+
classes?.arrowIcon
|
|
21
|
+
)}
|
|
22
|
+
/>
|
|
23
|
+
</button>
|
|
24
|
+
<button type='button' className={cn('w-6 h-6 cursor-pointer', classes?.swipeButton)} onClick={onClickNextMonth}>
|
|
25
|
+
<Icon
|
|
26
|
+
name='arrows/arrowRight'
|
|
27
|
+
className={cn('size-6 text-icon-blue-grey-800 hover:text-icon-accent-hover transition-colors', classes?.arrowIcon)}
|
|
28
|
+
/>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { IDropdownProps } from './Dropdown'
|
|
2
|
+
import { cn } from '$/shared/utils'
|
|
3
|
+
|
|
4
|
+
interface IOptionsListProps<Value extends string | number> extends Omit<IDropdownProps<Value>, 'onClickTrigger'> {}
|
|
5
|
+
|
|
6
|
+
export const OptionsList = <Value extends string | number>({
|
|
7
|
+
isActive,
|
|
8
|
+
variant,
|
|
9
|
+
options,
|
|
10
|
+
onClickOption,
|
|
11
|
+
selectedValue,
|
|
12
|
+
classes
|
|
13
|
+
}: IOptionsListProps<Value>) => {
|
|
14
|
+
const modeMonth = variant === 'months'
|
|
15
|
+
return (
|
|
16
|
+
<div
|
|
17
|
+
className={cn('customScrollbar-y overflow-y-auto px-2 bg-color-white overflow-x-hidden', classes?.dropdownOptions)}
|
|
18
|
+
role='listbox'
|
|
19
|
+
aria-expanded={isActive ? 'true' : 'false'}
|
|
20
|
+
aria-label={variant === 'months' ? 'Выбор месяца' : 'Выбор года'}
|
|
21
|
+
>
|
|
22
|
+
{options?.map((option, index) => {
|
|
23
|
+
return (
|
|
24
|
+
<div
|
|
25
|
+
key={option}
|
|
26
|
+
role='button'
|
|
27
|
+
tabIndex={0}
|
|
28
|
+
onClick={() => onClickOption(modeMonth ? index : (option as number))}
|
|
29
|
+
onKeyDown={() => onClickOption(modeMonth ? index : (option as number))}
|
|
30
|
+
className={cn(
|
|
31
|
+
'transition-colors px-2 py-[10px] rounded-sm bg-color-white text-color-dark cursor-pointer mob-body-regular-m hover:bg-color-primary-tr-hover hover:text-color-primary-hover',
|
|
32
|
+
{
|
|
33
|
+
'!bg-color-primary-default !text-color-white': modeMonth ? selectedValue === option : +selectedValue === option
|
|
34
|
+
},
|
|
35
|
+
classes?.dropdownOption
|
|
36
|
+
)}
|
|
37
|
+
>
|
|
38
|
+
{option}
|
|
39
|
+
</div>
|
|
40
|
+
)
|
|
41
|
+
})}
|
|
42
|
+
</div>
|
|
43
|
+
)
|
|
44
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import * as React from 'react'
|
|
4
|
+
import { Controller, type FieldValues } from 'react-hook-form'
|
|
5
|
+
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
|
|
6
|
+
import type { TAdditionalInputClassesWithAttachment, TControlledInputProps, TInputCommonProps } from '../model'
|
|
7
|
+
import { FieldAttachment, FieldContainer, FieldWrapper, MessageView } from '../ui'
|
|
8
|
+
import type { TDadataBaseUrl, TDadataType } from './model/types'
|
|
9
|
+
import { useDadata } from './model/useDadata'
|
|
10
|
+
import { cn } from '$/shared/utils'
|
|
11
|
+
|
|
12
|
+
type TDadataClasses = Partial<TAdditionalInputClassesWithAttachment> & {
|
|
13
|
+
options?: string
|
|
14
|
+
indentMargin?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface IDadataInputControlProps<T extends FieldValues> extends TControlledInputProps<T>, TInputCommonProps {
|
|
18
|
+
classes?: TDadataClasses
|
|
19
|
+
dadataType?: TDadataType
|
|
20
|
+
dadataBaseUrl?: TDadataBaseUrl
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const DadataInputControl = <T extends FieldValues>({
|
|
24
|
+
control,
|
|
25
|
+
helperText,
|
|
26
|
+
classes,
|
|
27
|
+
size = 'full',
|
|
28
|
+
label,
|
|
29
|
+
disabled,
|
|
30
|
+
dadataType = 'fio',
|
|
31
|
+
dadataBaseUrl = 'cache',
|
|
32
|
+
badge,
|
|
33
|
+
icon,
|
|
34
|
+
swapPosition,
|
|
35
|
+
...props
|
|
36
|
+
}: IDadataInputControlProps<T>) => {
|
|
37
|
+
const { setQuery, suggestionsOptions } = useDadata(dadataType, dadataBaseUrl)
|
|
38
|
+
const inputId = React.useId()
|
|
39
|
+
// TODO: Пофиксить при нажатие на enter очищается инпут, если нет опшенов
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<Controller
|
|
43
|
+
control={control}
|
|
44
|
+
name={props.name}
|
|
45
|
+
render={({ field: { onChange, ref, name, value }, fieldState: { error } }) => {
|
|
46
|
+
return (
|
|
47
|
+
<FieldContainer size={size} classes={classes}>
|
|
48
|
+
<Combobox value={value} onChange={onChange}>
|
|
49
|
+
<FieldWrapper
|
|
50
|
+
fieldId={inputId}
|
|
51
|
+
label={label}
|
|
52
|
+
classes={classes}
|
|
53
|
+
disabled={disabled}
|
|
54
|
+
value={value}
|
|
55
|
+
error={!!error?.message}
|
|
56
|
+
>
|
|
57
|
+
<>
|
|
58
|
+
<ComboboxInput
|
|
59
|
+
className={cn(
|
|
60
|
+
'w-full h-[56px] desk-body-regular-l text-color-dark transition-all bg-color-transparent outline-none pt-5 px-4 rounded-md z-10',
|
|
61
|
+
classes?.input
|
|
62
|
+
)}
|
|
63
|
+
ref={ref}
|
|
64
|
+
name={name}
|
|
65
|
+
value={value} // TODO: capitalize
|
|
66
|
+
displayValue={(currentValue: string) => {
|
|
67
|
+
return currentValue
|
|
68
|
+
}}
|
|
69
|
+
onChange={(event) => {
|
|
70
|
+
onChange(event.target.value)
|
|
71
|
+
setQuery(event.target.value)
|
|
72
|
+
}}
|
|
73
|
+
/>
|
|
74
|
+
{/* //TODO: Пока проблемы с реализацией на других полях */}
|
|
75
|
+
{/* {suggestionsOptions && debounceQuery && (
|
|
76
|
+
<span className='absolute desk-body-regular-l text-color-blue-grey-600 left-[16px] top-[28px] capitalize group-focus-within:visible'>
|
|
77
|
+
{suggestionsOptions[0]?.value}
|
|
78
|
+
</span>
|
|
79
|
+
)} */}
|
|
80
|
+
<FieldAttachment
|
|
81
|
+
badge={badge}
|
|
82
|
+
icon={icon}
|
|
83
|
+
error={!!error?.message}
|
|
84
|
+
classes={classes}
|
|
85
|
+
swapPosition={swapPosition}
|
|
86
|
+
/>
|
|
87
|
+
</>
|
|
88
|
+
</FieldWrapper>
|
|
89
|
+
<MessageView
|
|
90
|
+
className={cn(classes?.message)}
|
|
91
|
+
intent={error?.message ? 'error' : 'simple'}
|
|
92
|
+
text={error?.message || helperText}
|
|
93
|
+
disabled={disabled}
|
|
94
|
+
/>
|
|
95
|
+
<ComboboxOptions
|
|
96
|
+
transition
|
|
97
|
+
className={cn(
|
|
98
|
+
'absolute top-14 w-full data-[closed]:scale-95 data-[closed]:opacity-0 transition-all scrollHidden p-2 rounded-md bg-color-white border-solid border border-blue-grey-700 mt-2 flex flex-col z-10 empty:invisible'
|
|
99
|
+
)}
|
|
100
|
+
>
|
|
101
|
+
<div className='p-2 customScrollbar-y overflow-x-hidden !max-h-[246px]'>
|
|
102
|
+
{suggestionsOptions && suggestionsOptions?.length > 0 ? (
|
|
103
|
+
<>
|
|
104
|
+
{suggestionsOptions?.map(({ value: suggestionValue, additionalText, isDisabled }) => (
|
|
105
|
+
<ComboboxOption
|
|
106
|
+
disabled={isDisabled}
|
|
107
|
+
key={suggestionValue}
|
|
108
|
+
value={suggestionValue ?? ''}
|
|
109
|
+
className='cursor-pointer px-3 py-3 flex items-center justify-between gap-2 hover:bg-color-blue-grey-200 rounded-sm data-[focus]:bg-color-blue-grey-200 data-[disabled]:bg-color-blue-grey-100 data-[disabled]:text-color-disabled data-[disabled]:pointer-events-none'
|
|
110
|
+
>
|
|
111
|
+
<div className='flex flex-col gap-1'>
|
|
112
|
+
<p className='desk-body-regular-l'>{suggestionValue}</p>
|
|
113
|
+
|
|
114
|
+
{additionalText && <span className='desk-body-regular-s text-color-tetriary'>{additionalText}</span>}
|
|
115
|
+
</div>
|
|
116
|
+
</ComboboxOption>
|
|
117
|
+
))}
|
|
118
|
+
</>
|
|
119
|
+
) : (
|
|
120
|
+
<ComboboxOption value='' className='text-color-tetriary desk-body-regular-m'>
|
|
121
|
+
Ничего не найдено
|
|
122
|
+
</ComboboxOption>
|
|
123
|
+
)}
|
|
124
|
+
</div>
|
|
125
|
+
</ComboboxOptions>
|
|
126
|
+
</Combobox>
|
|
127
|
+
</FieldContainer>
|
|
128
|
+
)
|
|
129
|
+
}}
|
|
130
|
+
/>
|
|
131
|
+
)
|
|
132
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { DadataInputControl, type IDadataInputControlProps } from './DadataInputControl'
|
|
1
|
+
export { DadataInputControl, type IDadataInputControlProps } from './DadataInputControl'
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getDadataBaseUrl, getDataByDadataType } from './helpers'
|
|
2
|
+
import type { TDadataBaseUrl, TDadataType } from './types'
|
|
3
|
+
|
|
4
|
+
export const fetchSuggestions = async (searchText: string, dadataType: TDadataType, dadataBaseUrl: TDadataBaseUrl) => {
|
|
5
|
+
try {
|
|
6
|
+
const response = await fetch(`${getDadataBaseUrl(dadataBaseUrl)}/${dadataType}`, {
|
|
7
|
+
method: 'POST',
|
|
8
|
+
headers: {
|
|
9
|
+
'Content-Type': 'application/json',
|
|
10
|
+
Accept: 'application/json'
|
|
11
|
+
},
|
|
12
|
+
body: JSON.stringify({ query: searchText })
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
if (!response.ok) throw new Error('error')
|
|
16
|
+
const data = await response.json()
|
|
17
|
+
|
|
18
|
+
const formattedData = getDataByDadataType(dadataType, data)
|
|
19
|
+
|
|
20
|
+
return formattedData
|
|
21
|
+
} catch (error) {
|
|
22
|
+
console.error(error)
|
|
23
|
+
return []
|
|
24
|
+
}
|
|
25
|
+
}
|