5781150346

import * as React from 'react';
import { bem } from '../../../utils';
import { LocationCard, LocationCardProps } from '../../LocationCard';
import { Text } from '../../Text';
import { Slider } from '../../Sliders';
import { Button } from '../../Buttons';
import { LocationAutocomplete, LocationAutocompleteProps } from '../../LocationAutocomplete';
import { Map, CircularMarker } from '../../Map';
import { SIZES, ENTER_KEY } from '../../../constants';
import styles from './LocationSelectorDialog.scss';
import { LocationSelectorLocation } from '../utils';

// Props for child components that we just push through with prop-drilling
type CardPropsForSelectorDialog = Pick<
    LocationCardProps,
    | 'locationId'
    | 'hasRadius'
    | 'sliderLabel'
    | 'minRadius'
    | 'maxRadius'
    | 'radiusStep'
    | 'onRadiusChange'
>;

type AutocompletePropsForSelectorDialog = Pick<
    LocationAutocompleteProps,
    | 'inputPlaceholder'
    | 'noSuggestionsPlaceholder'
    | 'isFocused'
    | 'clearTooltipLabel'
    | 'country'
    | 'placeTypes'
    | 'showCountryInSuggestions'
    | 'onRemoveAllLocations'
>;

interface Props extends CardPropsForSelectorDialog, AutocompletePropsForSelectorDialog {
    /** defines if location cards should be rendered or not */
    withoutLocationCards?: boolean;
    /** stores an array of selected location objects */
    selectedLocations: LocationSelectorLocation[];
    /** radius label renderer e.g. radius => `+ ${radius} km` */
    renderRadiusLabel: (radius: number) => string;
    /** address to make initial map centering more specific */
    initialMapAddress?: string;
    /** function to be executed if error occurs while fetching suggestions */
    onLocationAutocompleteError?: (status: google.maps.places.PlacesServiceStatus) => void; // LocationAutocompleteProps.onError
    /** label for the Done button */
    doneLabel: string;
    /** function called with location object as an argument when it is selected from the suggestions */
    onAddLocation: (location: LocationSelectorLocation) => void; // LocationAutocompleteProps.onSelectionChange
    /** function called with a location details as an argument to be changed */
    onUpdateLocation: (locationId: string | undefined, radius: number) => void; // LocationCardProps.onRadiusChange
    /** function with a locationId as an argument to be removed */
    onRemoveLocation: (locationId: string | undefined) => void; // LocationCardProps.onDelete
    /** function to calculate marker positions in Map  */
    getMarkers?: () => CircularMarker[];
    /** function to be called when teh Done button is clicked */
    onCloseModal?: () => void;
    /** A geoJson description of the area that should be highlighted when there are no other markers present */
    defaultHighlight?: GeoJSON.GeoJsonObject; // MapProps.defaultHighlight
}

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

const LocationSelectorDialog: React.FC<Props> = ({
    /** FieldWrapper props */
    inputPlaceholder,

    /** LocationCard props */
    hasRadius,
    minRadius,
    maxRadius,
    radiusStep,
    renderRadiusLabel,
    onRemoveLocation,
    doneLabel,
    clearTooltipLabel,

    /** LocationAutocomplete props */
    country,
    initialMapAddress = null,
    defaultHighlight = undefined,
    placeTypes,
    noSuggestionsPlaceholder,
    showCountryInSuggestions,
    onLocationAutocompleteError = null,

    /** Internal use */
    withoutLocationCards = false,
    onUpdateLocation,
    selectedLocations,
    getMarkers = () => undefined,
    onAddLocation,
    onRemoveAllLocations,
    onCloseModal = () => null,
}) => {
    const locationInputRef = React.createRef<HTMLInputElement>();

    const [firstSelectedLocation] = selectedLocations;

    function getDefaultArea() {
        if (initialMapAddress || country) {
            return { address: initialMapAddress || country };
        }

        return undefined;
    }

    const handleAddLocation = (location) => {
        if (locationInputRef.current && !withoutLocationCards) {
            setTimeout(() => locationInputRef.current?.focus());
        }
        onAddLocation(location);
    };

    const handleRemoveLocation = (locationId) => {
        if (locationInputRef.current) {
            locationInputRef.current.focus();
        }
        onRemoveLocation(locationId);
    };

    const handleRadiusChange = (radius) => {
        onUpdateLocation(firstSelectedLocation.id, radius);
    };

    function handleInputFormSubmit(e) {
        if (e.key === ENTER_KEY) {
            e.stopPropagation();
            onCloseModal?.();
        }
    }

    return (
        <>
            <div {...elem('inputLine')} role="presentation" onKeyDown={handleInputFormSubmit}>
                <LocationAutocomplete
                    {...elem('searchField')}
                    isFocused
                    inputRef={locationInputRef}
                    defaultInputValue={
                        withoutLocationCards && firstSelectedLocation
                            ? firstSelectedLocation.description
                            : ''
                    }
                    inputPlaceholder={inputPlaceholder}
                    clearTooltipLabel={clearTooltipLabel}
                    noSuggestionsPlaceholder={noSuggestionsPlaceholder}
                    onSelectionChange={handleAddLocation}
                    country={country}
                    placeTypes={placeTypes}
                    singleLocation={withoutLocationCards}
                    showCountryInSuggestions={showCountryInSuggestions}
                    onRemoveAllLocations={onRemoveAllLocations}
                    onError={onLocationAutocompleteError}
                    hidePoweredByGoogleLogo
                />
                {hasRadius && withoutLocationCards && selectedLocations.length === 1 && (
                    <div {...elem('slider')}>
                        <Slider
                            value={firstSelectedLocation.radius}
                            min={minRadius}
                            max={maxRadius}
                            step={radiusStep}
                            railStyle={{ backgroundColor: 'var(--color-neutral-25)' }}
                            onChange={handleRadiusChange}
                        />
                        <Text size={SIZES[0]} {...elem('sliderLabel')}>
                            {renderRadiusLabel(firstSelectedLocation.radius)}
                        </Text>
                    </div>
                )}
                <Button {...elem('button')} onClick={onCloseModal} isPrimary>
                    {doneLabel}
                </Button>
            </div>
            <div {...elem('locationsWrapper')}>
                {!withoutLocationCards && selectedLocations.length > 0 && (
                    <ul {...elem('locationCardsContainer')}>
                        {selectedLocations.map((location) => (
                            <LocationCard
                                {...elem('locationCard')}
                                As="li"
                                key={location.id}
                                locationId={location.id}
                                locationTitle={location.description}
                                distanceRadius={location.radius}
                                sliderLabel={renderRadiusLabel(location.radius)}
                                hasRadius={hasRadius}
                                minRadius={minRadius}
                                maxRadius={maxRadius}
                                radiusStep={radiusStep}
                                onRadiusChange={onUpdateLocation}
                                onDelete={handleRemoveLocation}
                            />
                        ))}
                    </ul>
                )}
                <Map
                    defaultArea={getDefaultArea()}
                    markers={getMarkers?.()}
                    defaultHighlight={defaultHighlight}
                />
            </div>
        </>
    );
};

LocationSelectorDialog.displayName = 'LocationSelectorDialog';

export { LocationSelectorDialog, Props as LocationSelectorDialogProps };

1	import * as React from 'react';	4✔
2	import { bem } from '../../../utils';	4✔
3	import { LocationCard, LocationCardProps } from '../../LocationCard';	4✔
4	import { Text } from '../../Text';	4✔
5	import { Slider } from '../../Sliders';	4✔
6	import { Button } from '../../Buttons';	4✔
7	import { LocationAutocomplete, LocationAutocompleteProps } from '../../LocationAutocomplete';	4✔
8	import { Map, CircularMarker } from '../../Map';	4✔
9	import { SIZES, ENTER_KEY } from '../../../constants';	4✔
10	import styles from './LocationSelectorDialog.scss';	4✔
11	import { LocationSelectorLocation } from '../utils';
12
13	// Props for child components that we just push through with prop-drilling
14	type CardPropsForSelectorDialog = Pick<
15	LocationCardProps,
16	\| 'locationId'
17	\| 'hasRadius'
18	\| 'sliderLabel'
19	\| 'minRadius'
20	\| 'maxRadius'
21	\| 'radiusStep'
22	\| 'onRadiusChange'
23	>;
24
25	type AutocompletePropsForSelectorDialog = Pick<
26	LocationAutocompleteProps,
27	\| 'inputPlaceholder'
28	\| 'noSuggestionsPlaceholder'
29	\| 'isFocused'
30	\| 'clearTooltipLabel'
31	\| 'country'
32	\| 'placeTypes'
33	\| 'showCountryInSuggestions'
34	\| 'onRemoveAllLocations'
35	>;
36
37	interface Props extends CardPropsForSelectorDialog, AutocompletePropsForSelectorDialog {
38	/** defines if location cards should be rendered or not */
39	withoutLocationCards?: boolean;
40	/** stores an array of selected location objects */
41	selectedLocations: LocationSelectorLocation[];
42	/** radius label renderer e.g. radius => `+ ${radius} km` */
43	renderRadiusLabel: (radius: number) => string;
44	/** address to make initial map centering more specific */
45	initialMapAddress?: string;
46	/** function to be executed if error occurs while fetching suggestions */
47	onLocationAutocompleteError?: (status: google.maps.places.PlacesServiceStatus) => void; // LocationAutocompleteProps.onError
48	/** label for the Done button */
49	doneLabel: string;
50	/** function called with location object as an argument when it is selected from the suggestions */
51	onAddLocation: (location: LocationSelectorLocation) => void; // LocationAutocompleteProps.onSelectionChange
52	/** function called with a location details as an argument to be changed */
53	onUpdateLocation: (locationId: string \| undefined, radius: number) => void; // LocationCardProps.onRadiusChange
54	/** function with a locationId as an argument to be removed */
55	onRemoveLocation: (locationId: string \| undefined) => void; // LocationCardProps.onDelete
56	/** function to calculate marker positions in Map */
57	getMarkers?: () => CircularMarker[];
58	/** function to be called when teh Done button is clicked */
59	onCloseModal?: () => void;
60	/** A geoJson description of the area that should be highlighted when there are no other markers present */
61	defaultHighlight?: GeoJSON.GeoJsonObject; // MapProps.defaultHighlight
62	}
63
64	const { elem } = bem('LocationSelectorDialog', styles);	4✔
65
66	const LocationSelectorDialog: React.FC<Props> = ({	4✔
67	/** FieldWrapper props */
68	inputPlaceholder,	4✔
69
70	/** LocationCard props */
71	hasRadius,	4✔
72	minRadius,	4✔
73	maxRadius,	4✔
74	radiusStep,	4✔
75	renderRadiusLabel,	4✔
76	onRemoveLocation,	4✔
77	doneLabel,	4✔
78	clearTooltipLabel,	4✔
79
80	/** LocationAutocomplete props */
81	country,	4✔
82	initialMapAddress = null,	4!
83	defaultHighlight = undefined,	4!
84	placeTypes,	4✔
85	noSuggestionsPlaceholder,	4✔
86	showCountryInSuggestions,	4✔
87	onLocationAutocompleteError = null,	4!
88
89	/** Internal use */
90	withoutLocationCards = false,	4!
91	onUpdateLocation,	4✔
92	selectedLocations,	4✔
93	getMarkers = () => undefined,	4!
94	onAddLocation,	4✔
95	onRemoveAllLocations,	4✔
96	onCloseModal = () => null,	4!
97	}) => {
98	const locationInputRef = React.createRef<HTMLInputElement>();	4✔
99
100	const [firstSelectedLocation] = selectedLocations;	4✔
101
102	function getDefaultArea() {
103	if (initialMapAddress \|\| country) {	4✔
104	return { address: initialMapAddress \|\| country };	4✔
105	}
106
107	return undefined;	×
108	}
109
110	const handleAddLocation = (location) => {	4✔
111	if (locationInputRef.current && !withoutLocationCards) {	×
112	setTimeout(() => locationInputRef.current?.focus());	×
113	}
114	onAddLocation(location);	×
115	};
116
117	const handleRemoveLocation = (locationId) => {	4✔
118	if (locationInputRef.current) {	1✔
119	locationInputRef.current.focus();	1✔
120	}
121	onRemoveLocation(locationId);	1✔
122	};
123
124	const handleRadiusChange = (radius) => {	4✔
125	onUpdateLocation(firstSelectedLocation.id, radius);	×
126	};
127
128	function handleInputFormSubmit(e) {
129	if (e.key === ENTER_KEY) {	5!
130	e.stopPropagation();	×
131	onCloseModal?.();	×
132	}
133	}
134
135	return (	4✔
136	<>
137	<div {...elem('inputLine')} role="presentation" onKeyDown={handleInputFormSubmit}>
138	<LocationAutocomplete
139	{...elem('searchField')}
140	isFocused
141	inputRef={locationInputRef}
142	defaultInputValue={
143	withoutLocationCards && firstSelectedLocation	8!
144	? firstSelectedLocation.description
145	: ''
146	}
147	inputPlaceholder={inputPlaceholder}
148	clearTooltipLabel={clearTooltipLabel}
149	noSuggestionsPlaceholder={noSuggestionsPlaceholder}
150	onSelectionChange={handleAddLocation}
151	country={country}
152	placeTypes={placeTypes}
153	singleLocation={withoutLocationCards}
154	showCountryInSuggestions={showCountryInSuggestions}
155	onRemoveAllLocations={onRemoveAllLocations}
156	onError={onLocationAutocompleteError}
157	hidePoweredByGoogleLogo
158	/>
159	{hasRadius && withoutLocationCards && selectedLocations.length === 1 && (	4!
160	<div {...elem('slider')}>
161	<Slider
162	value={firstSelectedLocation.radius}
163	min={minRadius}
164	max={maxRadius}
165	step={radiusStep}
166	railStyle={{ backgroundColor: 'var(--color-neutral-25)' }}
167	onChange={handleRadiusChange}
168	/>
169	<Text size={SIZES[0]} {...elem('sliderLabel')}>
170	{renderRadiusLabel(firstSelectedLocation.radius)}
171	</Text>
172	</div>
173	)}
174	<Button {...elem('button')} onClick={onCloseModal} isPrimary>
175	{doneLabel}
176	</Button>
177	</div>
178	<div {...elem('locationsWrapper')}>
179	{!withoutLocationCards && selectedLocations.length > 0 && (	12✔
180	<ul {...elem('locationCardsContainer')}>
181	{selectedLocations.map((location) => (	8✔
182	<LocationCard
183	{...elem('locationCard')}
184	As="li"
185	key={location.id}
186	locationId={location.id}
187	locationTitle={location.description}
188	distanceRadius={location.radius}
189	sliderLabel={renderRadiusLabel(location.radius)}
190	hasRadius={hasRadius}
191	minRadius={minRadius}
192	maxRadius={maxRadius}
193	radiusStep={radiusStep}
194	onRadiusChange={onUpdateLocation}
195	onDelete={handleRemoveLocation}
196	/>
197	))}
198	</ul>
199	)}
200	<Map
201	defaultArea={getDefaultArea()}
202	markers={getMarkers?.()}	12!
203	defaultHighlight={defaultHighlight}
204	/>
205	</div>
206	</>
207	);
208	};
209
210	LocationSelectorDialog.displayName = 'LocationSelectorDialog';	4✔
211
212	export { LocationSelectorDialog, Props as LocationSelectorDialogProps };	4✔

textkernel / oneui / 5781150346

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