From d3ffaa97f8a3f17bc3667335403b8f1fabebddb6 Mon Sep 17 00:00:00 2001 From: RustamRu Date: Sun, 26 Jan 2025 15:06:11 +0300 Subject: [PATCH] fix: option select (#55) --- src/assets/images/car-body-type/index.ts | 1 + src/assets/images/car-body-type/other.webp | Bin 0 -> 1194 bytes .../form/car-body/car-body-select.tsx | 82 ++++++++---------- .../order-form/form/car-body/helper.ts | 21 ++++- .../form/car-body/option/car-body-option.tsx | 39 +++++++++ .../order-form/form/car-body/option/helper.ts | 19 ++++ .../order-form/form/car-body/option/index.ts | 1 + .../order-form/form/car-body/types.ts | 6 ++ src/components/order-form/form/helper.ts | 1 + 9 files changed, 120 insertions(+), 50 deletions(-) create mode 100644 src/assets/images/car-body-type/other.webp create mode 100644 src/components/order-form/form/car-body/option/car-body-option.tsx create mode 100644 src/components/order-form/form/car-body/option/helper.ts create mode 100644 src/components/order-form/form/car-body/option/index.ts diff --git a/src/assets/images/car-body-type/index.ts b/src/assets/images/car-body-type/index.ts index 81bda6c..12ce38c 100644 --- a/src/assets/images/car-body-type/index.ts +++ b/src/assets/images/car-body-type/index.ts @@ -3,6 +3,7 @@ export { default as CrossoverImg } from './crossover.webp'; export { default as HatchbackImg } from './hatchback.webp'; export { default as LiftbackImg } from './liftback.webp'; export { default as MinivanImg } from './minivan.webp'; +export { default as OtherImg } from './other.webp'; export { default as PickupImg } from './pickup.webp'; export { default as SedanImg } from './sedan.webp'; export { default as SportsCarImg } from './sports-car.webp'; diff --git a/src/assets/images/car-body-type/other.webp b/src/assets/images/car-body-type/other.webp new file mode 100644 index 0000000000000000000000000000000000000000..c628acc6ab3aafc263550aa5102057145a820c05 GIT binary patch literal 1194 zcmWIYbaPw8!oU#j>J$(bU=hK^z`&pY#Pb;#oEaEAot*AOwTNVlZGZWH1B9u)-E51_l8UhPjMd3m9A&>}2^` zoD^9mO=4jv)K%b`lE>2I?;v3yzxHl`Z1TPa`K5I;?j5z?Wj8fk`=^Vo#wq5n@ke9{*u3!PqayOUZ_K>gU@%zB_C?t%$|LTT0BSZn`3v`nY*$q6DF6P z@_!rke*K5vGV!7(MVm~XQ-truRw zx6i}Y`f-`Uh5L`HJ3M$SqJ?yS|23V#*YfjnxaP7&Q_c&vsJ@f@wBPDV1A|KVr_&h% zg#~NGe=MDTB)amkzuiC!3z6Vy%+Z#Z_$`%EcU$k-2Ll`8xwr>_yXdN zXw?7yvUTy__Jp_lvS#Y@Oa9up^WFlFR<+aCl{ar{EPKDj^w`h1h2mk;d{&>oD9QW$ sd_~Tlmb3bQzMd7lzbo|mE%k~}ABV;~2VYONC-Y+^9hfGS2!PT)0BPc&jsO4v literal 0 HcmV?d00001 diff --git a/src/components/order-form/form/car-body/car-body-select.tsx b/src/components/order-form/form/car-body/car-body-select.tsx index ddc873f..ba14f66 100644 --- a/src/components/order-form/form/car-body/car-body-select.tsx +++ b/src/components/order-form/form/car-body/car-body-select.tsx @@ -1,34 +1,38 @@ -import React, { forwardRef, useState } from 'react'; +import React, { forwardRef } from 'react'; import { Input, - Image, - InputProps, Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, - List, - ListItem, + useRadioGroup, + Grid, + GridItem, + UseRadioGroupProps, + useDisclosure, } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; -import { carBodySelectOptions } from './helper'; -import { CarBodySelectOption } from './types'; +import { carBodySelectOptions, getInputValue } from './helper'; +import { CarBodyOption } from './option'; +import { CarBodySelectProps } from './types'; -export const CarBodySelect = forwardRef( +export const CarBodySelect = forwardRef( function CarBodySelect(props, ref) { - const initialOption = carBodySelectOptions.find(({ value }) => value === Number(props.value)); - const [selected, setSelected] = useState>(initialOption); - - const handleOptionClick = (option: CarBodySelectOption) => { - setSelected(option); + const handleOptionClick: UseRadioGroupProps['onChange'] = (value) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - props.onChange(option.value); + props.onChange(value); }; - const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const { value, getRadioProps, getRootProps } = useRadioGroup({ + defaultValue: props.value, + value: props.value, + onChange: handleOptionClick, + }); + + const { isOpen, onOpen, onClose } = useDisclosure(); const { t } = useTranslation('~', { keyPrefix: 'dry-wash.order-create.car-body-select', @@ -37,7 +41,7 @@ export const CarBodySelect = forwardRef( return ( ( setIsDropdownOpen(true)} - onBlur={() => setIsDropdownOpen(false)} + onClick={onOpen} + onBlur={onClose} placeholder={t('placeholder')} /> - - {carBodySelectOptions.map((option) => ( - handleOptionClick(option)} - > - - {t(`options.${option.labelTKey}`)} - + {carBodySelectOptions.map(({ value, img, labelTKey }) => ( + + + ))} - + diff --git a/src/components/order-form/form/car-body/helper.ts b/src/components/order-form/form/car-body/helper.ts index 7b62c4e..955ea12 100644 --- a/src/components/order-form/form/car-body/helper.ts +++ b/src/components/order-form/form/car-body/helper.ts @@ -1,3 +1,6 @@ +import { TFunction } from "i18next"; +import { InputProps } from "@chakra-ui/react"; + import { CoupeImg, CrossoverImg, @@ -8,7 +11,8 @@ import { SedanImg, SportsCarImg, StationWagonImg, - SuvImg + SuvImg, + OtherImg } from "../../../../assets/images"; import { Car } from "../../../../models/landing"; @@ -67,6 +71,17 @@ export const carBodySelectOptions: CarBodySelectOption[] = [ }, { value: Car.BodyStyle.OTHER, - labelTKey: 'other' + labelTKey: 'other', + img: OtherImg }, -]; \ No newline at end of file +]; + +export const getInputValue = (value: Car.BodyStyle, t: TFunction<"~", "dry-wash.order-create.car-body-select">): InputProps['value'] => { + const { labelTKey } = carBodySelectOptions.find((option) => value === option.value) ?? {}; + + if (labelTKey) { + return t(`options.${labelTKey}`); + } + + return; +}; \ No newline at end of file diff --git a/src/components/order-form/form/car-body/option/car-body-option.tsx b/src/components/order-form/form/car-body/option/car-body-option.tsx new file mode 100644 index 0000000..d41cc2b --- /dev/null +++ b/src/components/order-form/form/car-body/option/car-body-option.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + ImageProps, + StackProps, + Image, + useRadio, + chakra, + Box, + UseRadioProps, + Flex, +} from '@chakra-ui/react'; + +import { getPropsByState } from './helper'; + +type CarBodyOptionProps = { + image: ImageProps['src']; + label: StackProps['children']; +} & UseRadioProps; + +export const CarBodyOption = ({ + image, + label, + ...radioProps +}: CarBodyOptionProps) => { + const { state, getInputProps, getRadioProps, htmlProps, getLabelProps } = + useRadio(radioProps); + + return ( + + + + + + {label} + + + + ); +}; diff --git a/src/components/order-form/form/car-body/option/helper.ts b/src/components/order-form/form/car-body/option/helper.ts new file mode 100644 index 0000000..018a658 --- /dev/null +++ b/src/components/order-form/form/car-body/option/helper.ts @@ -0,0 +1,19 @@ +import { + BoxProps, +} from '@chakra-ui/react'; +import { RadioState } from '@chakra-ui/react/dist/types/radio/use-radio'; + +export const getPropsByState = ({ isChecked }: RadioState): BoxProps => { + if (isChecked) { + return { + bgColor: 'primary.200', + _hover: { bgColor: 'primary.100' }, + _active: { bgColor: 'primary.300' }, + }; + } + + return { + _hover: { bgColor: 'primary.50' }, + _active: { bgColor: 'primary.100' }, + }; +}; \ No newline at end of file diff --git a/src/components/order-form/form/car-body/option/index.ts b/src/components/order-form/form/car-body/option/index.ts new file mode 100644 index 0000000..c836803 --- /dev/null +++ b/src/components/order-form/form/car-body/option/index.ts @@ -0,0 +1 @@ +export { CarBodyOption } from './car-body-option'; \ No newline at end of file diff --git a/src/components/order-form/form/car-body/types.ts b/src/components/order-form/form/car-body/types.ts index d8dd708..eadde72 100644 --- a/src/components/order-form/form/car-body/types.ts +++ b/src/components/order-form/form/car-body/types.ts @@ -1,3 +1,5 @@ +import { InputProps } from "@chakra-ui/react"; + import { Car } from "../../../../models/landing"; export type CarBodySelectOption = { @@ -16,3 +18,7 @@ export type CarBodySelectOption = { 'other'; img?: string; }; + +export type CarBodySelectProps = { + value?: string; +} & Pick; \ No newline at end of file diff --git a/src/components/order-form/form/helper.ts b/src/components/order-form/form/helper.ts index 37e2bb7..be237b5 100644 --- a/src/components/order-form/form/helper.ts +++ b/src/components/order-form/form/helper.ts @@ -9,6 +9,7 @@ export const defaultValues: Partial = { phone: '', carNumber: '', carColor: '', + carBody: '', availableDatetimeBegin: '', availableDatetimeEnd: '', }; -- 2.45.2