6852756453

Committed 13 Nov 2023 04:21PM UTC coverage: 90.568% (+0.02%) from 90.553%

Build # 6852756453

Build Type

push

github

Committed by

web-flow

Commit Message

fix(TS): extend Prop interfaces where base element props were not included (#1086)

Run Details

1312 of 1614 branches covered (0.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

9 existing lines in 5 files now uncovered.

3076 of 3231 relevant lines covered (95.2%)

67.64 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

56.89

/src/components/LocationSelector/LocationSelector.tsx

import * as React from 'react';
import { FaMapMarkerAlt } from 'react-icons/fa';
import { bem } from '../../utils';
import { Modal } from '../Modal';
import { FieldWrapper } from '../FieldWrapper';
import {
    LocationSelectorDialogWithGoogleLoader,
    LocationSelectorDialogWithGoogleLoaderProps,
} from './LocationSelectorDialogWithGoogleLoader';
import {
    findGeoCenterForPlaceId,
    getRadiusInMeters,
    convertCoordinatesIntoAddress,
    LocationSelectorLocation,
} from './utils';
import { ENTER_KEY, ESCAPE_KEY } from '../../constants';
import { useBrowserTabVisibilityChange } from '../../hooks';
import styles from './LocationSelector.scss';

const { block, elem } = bem('LocationSelector', styles);

interface Props
    extends LocationSelectorDialogWithGoogleLoaderProps,
        React.HTMLAttributes<HTMLDivElement> {
    /** define id for input element */
    id?: string;
    /** defines if selector has an option of opening the modal window by pressing Enter button */
    openOnEnterPress?: boolean;
    /** default radius value */
    radiusDefaultValue?: number;
    /** radius measurement unit */
    radiusUnits: 'km' | 'mi';
    /** country where search can take place */
    country?: string;
    /** defines if an additional request should be done in order to get address information for selected location */
    shouldGetAddressInfo?: boolean;
    /** A title for the modal that will be used by screenreaders */
    modalContentLabel: string;
    /** placeholder for both main field and autocomplete field in modal */
    inputPlaceholder: string;
    /** placeholder for autocomplete field inside the modal. If not given inputPlaceholder will be used */
    modalInputPlaceholder?: string;
    /** string to be displayed in FieldWrapper when the modal is closed, but locations are selected */
    selectionPlaceholder?: string;
    /** label to be used for Clear buttons of the component */
    clearTooltipLabel: string;
    /** callback function for the Clear button click */
    onRemoveAllLocations: () => void;
    /** callback function for closed modal */
    onBlur?: () => void;
}

const LocationSelector: React.FC<Props> = ({
    /** Google props */
    apiKey,
    language,
    region = undefined,
    additionalGoogleProps = undefined,

    /** FieldWrapper props */
    id,
    clearTooltipLabel,
    onRemoveAllLocations,
    inputPlaceholder,
    selectionPlaceholder,

    /** Modal props */
    modalContentLabel,

    /** LocationCard props */
    hasRadius,
    minRadius = 1,
    maxRadius = 100,
    radiusStep = 1,
    renderRadiusLabel,
    doneLabel,

    /** LocationAutocomplete props */
    modalInputPlaceholder,
    country = undefined,
    initialMapAddress = undefined,
    placeTypes = ['(regions)'],
    noSuggestionsPlaceholder,
    showCountryInSuggestions,
    onLocationAutocompleteError = () => null,

    /** Map props */
    defaultHighlight = undefined,

    /** Internal use */
    openOnEnterPress = true,
    selectedLocations = [],
    radiusDefaultValue = 1,
    radiusUnits,
    shouldGetAddressInfo = false,
    withoutLocationCards = false,
    onAddLocation,
    onUpdateLocation,
    onRemoveLocation,
    onBlur = () => null,
    ...rest
}) => {
    const [isOpen, setIsOpen] = React.useState(false);
    const [isWrapperFocused, setIsWrapperFocused] = React.useState(false);
    const isBrowserTabVisible = useBrowserTabVisibilityChange();
    const buttonRef = React.useRef<HTMLButtonElement>();

    const hasLocationsSelected = selectedLocations && selectedLocations.length > 0;

    const handleOpenModal = () => {
        if (!isOpen && !isWrapperFocused && isBrowserTabVisible) {
            buttonRef.current?.focus();
            setIsOpen(true);
        }
        setIsWrapperFocused(true);
    };

    const handleCloseModal = () => {
        if (isOpen && isBrowserTabVisible) {
            setIsOpen(false);
            onBlur?.();
        }
    };

    function handleButtonKeyPress(e: React.KeyboardEvent<HTMLButtonElement>) {
        if (e.key === ESCAPE_KEY) {
            buttonRef.current?.blur();
        } else if (e.key === ENTER_KEY) {
            if (openOnEnterPress && selectedLocations.length === 0) {
                setIsOpen(true);
            } else {
                // the snippet below looks up for a wrapping form which allows the component
                // to submit it by hitting Enter and to behave like a real input
                const target = e.target as HTMLButtonElement;
                if (target.form) {
                    const form = target.form as HTMLElement;
                    (form.querySelector('[type="submit"]') as HTMLButtonElement).click();
                }
            }
        }
    }

    function handleButtonBlur() {
        if (!isOpen) {
            setIsWrapperFocused(false);
        }
    }

    /**
     * Fetch additional information for the selected place and
     * add it along with passed location object to the selectedLocations array
     * if this location was not selected yet
     */
    const handleAddLocation = (location: LocationSelectorLocation) =>
        findGeoCenterForPlaceId(location.place_id)
            .then((center) => {
                const lng = center.lng();
                const lat = center.lat();
                const isLocationSelected = selectedLocations
                    .map((item) => item.place_id)
                    .includes(location.place_id);
                const locationToAdd: LocationSelectorLocation = {
                    ...location,
                    id: location.place_id,
                    center: { lat, lng },
                    radius: hasRadius && radiusDefaultValue ? radiusDefaultValue : 0,
                };

                if (!isLocationSelected) {
                    if (shouldGetAddressInfo) {
                        convertCoordinatesIntoAddress({ lat, lng }).then(
                            ({ address_components }) => {
                                onAddLocation({
                                    ...locationToAdd,
                                    addressComponents: address_components,
                                });
                            }
                        );
                    } else {
                        onAddLocation(locationToAdd);
                    }
                }
            })
            .catch(/* TODO: add error handling */);

    const getMarkers = () =>
        selectedLocations.map((location) => ({
            description: location.description,
            center: location.center,
            radius: hasRadius ? getRadiusInMeters(location.radius, radiusUnits) : 0,
        }));

    return (
        <div {...rest} {...block({ ...rest })}>
            <FieldWrapper
                {...elem('mainTextButtonWrapper')}
                title={selectionPlaceholder || inputPlaceholder}
                isFocused={isWrapperFocused}
                showClearButton={hasLocationsSelected}
                clearTooltipLabel={clearTooltipLabel}
                onClick={handleOpenModal}
                onClear={onRemoveAllLocations}
            >
                <FaMapMarkerAlt {...elem('icon')} />
                <button
                    id={id}
                    ref={buttonRef}
                    type="button"
                    {...elem('mainTextButton', { muted: !selectionPlaceholder })}
                    onFocus={handleOpenModal}
                    onBlur={handleButtonBlur}
                    onKeyUp={handleButtonKeyPress}
                >
                    {selectionPlaceholder || inputPlaceholder}
                </button>
            </FieldWrapper>
            <Modal
                {...elem('modal')}
                isOpen={isOpen}
                ariaHideApp={false}
                onRequestClose={handleCloseModal}
                contentLabel={modalContentLabel}
                isPositionFixed
            >
                <LocationSelectorDialogWithGoogleLoader
                    apiKey={apiKey}
                    language={language}
                    region={region}
                    {...additionalGoogleProps}
                    inputPlaceholder={modalInputPlaceholder || inputPlaceholder}
                    hasRadius={hasRadius}
                    minRadius={minRadius}
                    maxRadius={maxRadius}
                    radiusStep={radiusStep}
                    renderRadiusLabel={renderRadiusLabel}
                    onRemoveLocation={onRemoveLocation}
                    doneLabel={doneLabel}
                    clearTooltipLabel={clearTooltipLabel}
                    country={country}
                    withoutLocationCards={withoutLocationCards}
                    initialMapAddress={initialMapAddress}
                    defaultHighlight={defaultHighlight}
                    placeTypes={placeTypes}
                    noSuggestionsPlaceholder={noSuggestionsPlaceholder}
                    showCountryInSuggestions={showCountryInSuggestions}
                    onLocationAutocompleteError={onLocationAutocompleteError}
                    onUpdateLocation={onUpdateLocation}
                    onRemoveAllLocations={onRemoveAllLocations}
                    selectedLocations={selectedLocations}
                    getMarkers={getMarkers}
                    onAddLocation={handleAddLocation}
                    onCloseModal={handleCloseModal}
                />
            </Modal>
        </div>
    );
};

LocationSelector.displayName = 'LocationSelector';

export { LocationSelector, Props as LocationSelectorProps };

1	import * as React from 'react';	2✔
2	import { FaMapMarkerAlt } from 'react-icons/fa';	2✔
3	import { bem } from '../../utils';	2✔
4	import { Modal } from '../Modal';	2✔
5	import { FieldWrapper } from '../FieldWrapper';	2✔
6	import {	2✔
7	LocationSelectorDialogWithGoogleLoader,
8	LocationSelectorDialogWithGoogleLoaderProps,
9	} from './LocationSelectorDialogWithGoogleLoader';
10	import {	2✔
11	findGeoCenterForPlaceId,
12	getRadiusInMeters,
13	convertCoordinatesIntoAddress,
14	LocationSelectorLocation,
15	} from './utils';
16	import { ENTER_KEY, ESCAPE_KEY } from '../../constants';	2✔
17	import { useBrowserTabVisibilityChange } from '../../hooks';	2✔
18	import styles from './LocationSelector.scss';	2✔
19
20	const { block, elem } = bem('LocationSelector', styles);	2✔
21
22	interface Props
23	extends LocationSelectorDialogWithGoogleLoaderProps,
24	React.HTMLAttributes<HTMLDivElement> {
25	/** define id for input element */
26	id?: string;
27	/** defines if selector has an option of opening the modal window by pressing Enter button */
28	openOnEnterPress?: boolean;
29	/** default radius value */
30	radiusDefaultValue?: number;
31	/** radius measurement unit */
32	radiusUnits: 'km' \| 'mi';
33	/** country where search can take place */
34	country?: string;
35	/** defines if an additional request should be done in order to get address information for selected location */
36	shouldGetAddressInfo?: boolean;
37	/** A title for the modal that will be used by screenreaders */
38	modalContentLabel: string;
39	/** placeholder for both main field and autocomplete field in modal */
40	inputPlaceholder: string;
41	/** placeholder for autocomplete field inside the modal. If not given inputPlaceholder will be used */
42	modalInputPlaceholder?: string;
43	/** string to be displayed in FieldWrapper when the modal is closed, but locations are selected */
44	selectionPlaceholder?: string;
45	/** label to be used for Clear buttons of the component */
46	clearTooltipLabel: string;
47	/** callback function for the Clear button click */
48	onRemoveAllLocations: () => void;
49	/** callback function for closed modal */
50	onBlur?: () => void;
51	}
52
53	const LocationSelector: React.FC<Props> = ({	2✔
54	/** Google props */
55	apiKey,	5✔
56	language,	5✔
57	region = undefined,	5!
58	additionalGoogleProps = undefined,	5!
59
60	/** FieldWrapper props */
61	id,	5✔
62	clearTooltipLabel,	5✔
63	onRemoveAllLocations,	5✔
64	inputPlaceholder,	5✔
65	selectionPlaceholder,	5✔
66
67	/** Modal props */
68	modalContentLabel,	5✔
69
70	/** LocationCard props */
71	hasRadius,	5✔
72	minRadius = 1,	5!
73	maxRadius = 100,	5!
74	radiusStep = 1,	5!
75	renderRadiusLabel,	5✔
76	doneLabel,	5✔
77
78	/** LocationAutocomplete props */
79	modalInputPlaceholder,	5✔
80	country = undefined,	5!
81	initialMapAddress = undefined,	5!
82	placeTypes = ['(regions)'],	5!
83	noSuggestionsPlaceholder,	5✔
84	showCountryInSuggestions,	5✔
85	onLocationAutocompleteError = () => null,	5!
86
87	/** Map props */
88	defaultHighlight = undefined,	5!
89
90	/** Internal use */
91	openOnEnterPress = true,	5!
92	selectedLocations = [],	5!
93	radiusDefaultValue = 1,	5!
94	radiusUnits,	5✔
95	shouldGetAddressInfo = false,	5!
96	withoutLocationCards = false,	5!
97	onAddLocation,	5✔
98	onUpdateLocation,	5✔
99	onRemoveLocation,	5✔
100	onBlur = () => null,	5!
101	...rest	5✔
102	}) => {
103	const [isOpen, setIsOpen] = React.useState(false);	5✔
104	const [isWrapperFocused, setIsWrapperFocused] = React.useState(false);	5✔
105	const isBrowserTabVisible = useBrowserTabVisibilityChange();	5✔
106	const buttonRef = React.useRef<HTMLButtonElement>();	5✔
107
108	const hasLocationsSelected = selectedLocations && selectedLocations.length > 0;	5✔
109
110	const handleOpenModal = () => {	5✔
111	if (!isOpen && !isWrapperFocused && isBrowserTabVisible) {	4✔
112	buttonRef.current?.focus();	2!
113	setIsOpen(true);	2✔
114	}
115	setIsWrapperFocused(true);	4✔
116	};
117
118	const handleCloseModal = () => {	5✔
119	if (isOpen && isBrowserTabVisible) {	×
120	setIsOpen(false);	×
121	onBlur?.();	×
122	}
123	};
124
125	function handleButtonKeyPress(e: React.KeyboardEvent<HTMLButtonElement>) {
126	if (e.key === ESCAPE_KEY) {	×
127	buttonRef.current?.blur();	×
128	} else if (e.key === ENTER_KEY) {	×
129	if (openOnEnterPress && selectedLocations.length === 0) {	×
130	setIsOpen(true);	×
131	} else {
132	// the snippet below looks up for a wrapping form which allows the component
133	// to submit it by hitting Enter and to behave like a real input
134	const target = e.target as HTMLButtonElement;	×
135	if (target.form) {	×
136	const form = target.form as HTMLElement;	×
137	(form.querySelector('[type="submit"]') as HTMLButtonElement).click();	×
138	}
139	}
140	}
141	}
142
143	function handleButtonBlur() {
144	if (!isOpen) {	2!
145	setIsWrapperFocused(false);	×
146	}
147	}
148
149	/**
150	* Fetch additional information for the selected place and
151	* add it along with passed location object to the selectedLocations array
152	* if this location was not selected yet
153	*/
154	const handleAddLocation = (location: LocationSelectorLocation) =>	5✔
155	findGeoCenterForPlaceId(location.place_id)	×
156	.then((center) => {
157	const lng = center.lng();	×
158	const lat = center.lat();	×
159	const isLocationSelected = selectedLocations	×
160	.map((item) => item.place_id)	×
161	.includes(location.place_id);
162	const locationToAdd: LocationSelectorLocation = {	×
163	...location,
164	id: location.place_id,
165	center: { lat, lng },
166	radius: hasRadius && radiusDefaultValue ? radiusDefaultValue : 0,	×
167	};
168
169	if (!isLocationSelected) {	×
170	if (shouldGetAddressInfo) {	×
171	convertCoordinatesIntoAddress({ lat, lng }).then(	×
172	({ address_components }) => {	×
173	onAddLocation({	×
174	...locationToAdd,
175	addressComponents: address_components,
176	});
177	}
178	);
179	} else {
180	onAddLocation(locationToAdd);	×
181	}
182	}
183	})
184	.catch(/* TODO: add error handling */);
185
186	const getMarkers = () =>	5✔
UNCOV 187	selectedLocations.map((location) => ({	×
188	description: location.description,
189	center: location.center,
190	radius: hasRadius ? getRadiusInMeters(location.radius, radiusUnits) : 0,	×
191	}));
192
193	return (	5✔
194	<div {...rest} {...block({ ...rest })}>
195	<FieldWrapper
196	{...elem('mainTextButtonWrapper')}
197	title={selectionPlaceholder \|\| inputPlaceholder}	10✔
198	isFocused={isWrapperFocused}
199	showClearButton={hasLocationsSelected}
200	clearTooltipLabel={clearTooltipLabel}
201	onClick={handleOpenModal}
202	onClear={onRemoveAllLocations}
203	>
204	<FaMapMarkerAlt {...elem('icon')} />
205	<button
206	id={id}
207	ref={buttonRef}
208	type="button"
209	{...elem('mainTextButton', { muted: !selectionPlaceholder })}
210	onFocus={handleOpenModal}
211	onBlur={handleButtonBlur}
212	onKeyUp={handleButtonKeyPress}
213	>
214	{selectionPlaceholder \|\| inputPlaceholder}	10✔
215	</button>
216	</FieldWrapper>
217	<Modal
218	{...elem('modal')}
219	isOpen={isOpen}
220	ariaHideApp={false}
221	onRequestClose={handleCloseModal}
222	contentLabel={modalContentLabel}
223	isPositionFixed
224	>
225	<LocationSelectorDialogWithGoogleLoader
226	apiKey={apiKey}
227	language={language}
228	region={region}
229	{...additionalGoogleProps}
230	inputPlaceholder={modalInputPlaceholder \|\| inputPlaceholder}	10✔
231	hasRadius={hasRadius}
232	minRadius={minRadius}
233	maxRadius={maxRadius}
234	radiusStep={radiusStep}
235	renderRadiusLabel={renderRadiusLabel}
236	onRemoveLocation={onRemoveLocation}
237	doneLabel={doneLabel}
238	clearTooltipLabel={clearTooltipLabel}
239	country={country}
240	withoutLocationCards={withoutLocationCards}
241	initialMapAddress={initialMapAddress}
242	defaultHighlight={defaultHighlight}
243	placeTypes={placeTypes}
244	noSuggestionsPlaceholder={noSuggestionsPlaceholder}
245	showCountryInSuggestions={showCountryInSuggestions}
246	onLocationAutocompleteError={onLocationAutocompleteError}
247	onUpdateLocation={onUpdateLocation}
248	onRemoveAllLocations={onRemoveAllLocations}
249	selectedLocations={selectedLocations}
250	getMarkers={getMarkers}
251	onAddLocation={handleAddLocation}
252	onCloseModal={handleCloseModal}
253	/>
254	</Modal>
255	</div>
256	);
257	};
258
259	LocationSelector.displayName = 'LocationSelector';	2✔
260
261	export { LocationSelector, Props as LocationSelectorProps };	2✔

textkernel / oneui / 6852756453

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous