3f922921e5
* use instance setting for enabled target geolocations * add validation for enabled geolocations setting * a start on the UI? * backend tweaks for UI * proper crack at autocomplete component * fix region targeting toggle * e2e spec
48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import { h } from 'preact';
|
|
import { useCallback } from 'preact/hooks';
|
|
import { ButtonNew as Button, Icon } from '@crayons';
|
|
import { Close } from '@images/x.svg';
|
|
|
|
/**
|
|
* Higher-order component that returns a template responsible for the layout of
|
|
* a selected location
|
|
*
|
|
* @returns {h.JSX.ElementType}
|
|
*/
|
|
export const SelectedLocation = ({
|
|
displayName,
|
|
onNameClick,
|
|
label,
|
|
ExtraInfo,
|
|
}) => {
|
|
const Template = ({ onEdit: _, onDeselect, ...location }) => {
|
|
const onClick = useCallback(() => onNameClick(location), [location]);
|
|
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label={location.name}
|
|
className="c-autocomplete--multi__tag-selection flex mr-2 mb-2 w-max"
|
|
>
|
|
<Button
|
|
aria-label={label}
|
|
onClick={onClick}
|
|
className="c-autocomplete--multi__selected p-1 flex flex-col"
|
|
>
|
|
{location.name}
|
|
{ExtraInfo && <ExtraInfo {...location} />}
|
|
</Button>
|
|
<Button
|
|
aria-label={`Remove ${location.name}`}
|
|
onClick={onDeselect}
|
|
className="c-autocomplete--multi__selected p-1"
|
|
>
|
|
<Icon src={Close} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Template.displayName = displayName;
|
|
return Template;
|
|
};
|