dry_wash_inc/dry-wash-pl
dry_wash_inc/dry-wash-pl
3
1
Fork 0
Code Issues 17 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: Improve location input component structure and type handling

Browse Source 
- Extracted base location input component for better separation of concerns
- Updated ref handling to support forwarded refs
- Improved type safety with explicit ref prop
- Minor improvements to input value handling and suggestion logic
This commit is contained in:
RustamRu 2025-03-11 23:08:27 +03:00
parent 2f8a172b12
commit 3f4e077f7c
1 changed files with 114 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
src/components/order-form/form/location/location-input/location-input.tsx
View File

@ -1,4 +1,4 @@
import React, { forwardRef, memo, useEffect, useState } from 'react'; import React, { ForwardedRef, forwardRef, memo, useEffect, useState } from 'react';
import { import {
Input, Input,
Box, Box,
@ -24,129 +24,130 @@ import {
} from './helper'; } from './helper';
import { LocationInputProps } from './types'; import { LocationInputProps } from './types';
export const LocationInput = memo( export const BaseLocationInput = withYMaps(
withYMaps( ({ ymaps, value = '', onChange, inputRef, ...props }: LocationInputProps & { inputRef: ForwardedRef<HTMLInputElement> }) => {
forwardRef<HTMLInputElement, LocationInputProps>(function LocationInput( const [inputValue, setInputValue] = useState<string>('');
{ ymaps, value, onChange, ...props },
ref,
) {
const [inputValue, setInputValue] = useState<string>('');
useEffect(() => { useEffect(() => {
setInputValue(value); setInputValue(value);
}, [value]); }, [value]);
const [suggestions, setSuggestions] = useState<Suggestion[]>([]); const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
const [isSuggestionsPanelOpen, setIsSuggestionsPanelOpen] = const [isSuggestionsPanelOpen, setIsSuggestionsPanelOpen] =
useState<boolean>(false); useState<boolean>(false);
const onInputChange: InputProps['onChange'] = async (e) => { const onInputChange: InputProps['onChange'] = async (e) => {
const newInputValue = e.target.value; const newInputValue = e.target.value;
if ( if (
isValidLocation(newInputValue) && isValidLocation(newInputValue) &&
(await isRealLocation(ymaps, newInputValue)) (await isRealLocation(ymaps, newInputValue))
) { ) {
onChange(newInputValue); onChange(newInputValue);
} else { } else {
setInputValue(newInputValue); setInputValue(newInputValue);
if (newInputValue.trim().length > 3) { if (newInputValue.trim().length > 3) {
try { try {
const address = extractAddress(newInputValue); const address = extractAddress(newInputValue);
const results = await ymaps.suggest(address); const results = await ymaps.suggest(address);
setSuggestions(results); setSuggestions(results);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
}
} else {
setSuggestions([]);
} }
setIsSuggestionsPanelOpen(suggestions.length > 1);
}
};
const onFocus: InputProps['onFocus'] = () => {
setIsSuggestionsPanelOpen(suggestions.length > 1);
};
const onBlur: InputProps['onBlur'] = async (e) => {
const inputValue = e.target.value;
if (
isValidLocation(inputValue) &&
(await isRealLocation(ymaps, inputValue))
) {
onChange(inputValue);
} else { } else {
setInputValue(value); setSuggestions([]);
} }
setIsSuggestionsPanelOpen(false);
};
const handleSuggestionClick = async ({ value: address }: Suggestion) => { setIsSuggestionsPanelOpen(suggestions.length > 1);
try { }
const location = await getLocationByAddress(ymaps, address); };
const newValue = formatLocation(location);
setInputValue(newValue);
onChange(newValue);
} catch (error) {
console.error(error);
}
};
const { t } = useTranslation('~', { const onFocus: InputProps['onFocus'] = () => {
keyPrefix: 'dry-wash.order-create.form.washing-location-field', setIsSuggestionsPanelOpen(suggestions.length > 1);
}); };
return ( const onBlur: InputProps['onBlur'] = async (e) => {
<Box width='100%'> const inputValue = e.target.value;
<Popover if (
isOpen={isSuggestionsPanelOpen} isValidLocation(inputValue) &&
autoFocus={false} (await isRealLocation(ymaps, inputValue))
placement='bottom-start' ) {
> onChange(inputValue);
<PopoverAnchor> } else {
<Input setInputValue(value);
{...props} }
ref={ref} setIsSuggestionsPanelOpen(false);
onBlur={onBlur} };
value={inputValue ?? value}
onChange={onInputChange} const handleSuggestionClick = async ({ value: address }: Suggestion) => {
onFocus={onFocus} try {
placeholder={t('placeholder')} const location = await getLocationByAddress(ymaps, address);
/> const newValue = formatLocation(location);
</PopoverAnchor> setInputValue(newValue);
<PopoverContent width='100%' maxWidth='100%'> onChange(newValue);
<PopoverBody border='1px' borderColor='gray.300' p={0}> } catch (error) {
<List> console.error(error);
{suggestions.map((suggestion, index) => ( }
<ListItem };
key={index}
p={2} const { t } = useTranslation('~', {
cursor='pointer' keyPrefix: 'dry-wash.order-create.form.washing-location-field',
_hover={{ });
bgColor: 'primary.50',
}} return (
_active={{ <Box width='100%'>
bgColor: 'primary.100', <Popover
}} isOpen={isSuggestionsPanelOpen}
onClick={() => handleSuggestionClick(suggestion)} autoFocus={false}
> placement='bottom-start'
{suggestion.displayName} >
</ListItem> <PopoverAnchor>
))} <Input
</List> {...props}
</PopoverBody> ref={inputRef}
</PopoverContent> onBlur={onBlur}
</Popover> value={inputValue || value}
</Box> onChange={onInputChange}
); onFocus={onFocus}
}), placeholder={t('placeholder')}
true, />
['suggest', 'geocode'], </PopoverAnchor>
), <PopoverContent width='100%' maxWidth='100%'>
<PopoverBody border='1px' borderColor='gray.300' p={0}>
<List>
{suggestions.map((suggestion, index) => (
<ListItem
key={index}
p={2}
cursor='pointer'
_hover={{
bgColor: 'primary.50',
}}
_active={{
bgColor: 'primary.100',
}}
onClick={() => handleSuggestionClick(suggestion)}
>
{suggestion.displayName}
</ListItem>
))}
</List>
</PopoverBody>
</PopoverContent>
</Popover>
</Box>
);
},
true,
['suggest', 'geocode'],
); );
export const LocationInput = memo(forwardRef<HTMLInputElement, LocationInputProps>(
function LocationInput(props, ref) {
return <BaseLocationInput {...props} inputRef={ref} />;
},
));
// todo: i18n // todo: i18n
// todo: replace console.error with toast // todo: replace console.error with toast