Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 4x 4x 5x 5x 5x | import React, { FC } from 'react';
import { SvgIcon } from '../SvgIcon';
import { Dropdown, useMedia } from 'ag-ems-ui-library';
const styles = require('./Location.module.css');
export const Location: FC<{
locations: any[];
value: string;
classes?: string;
name?: string;
placeholder?: string;
dropdownMobile?: boolean;
onChange?: (value) => void;
submitText?: string;
breakpoint?: number;
onClick?: () => void;
label?: string;
}> = ({
locations,
value,
classes,
name,
placeholder,
dropdownMobile = false,
onChange,
submitText = 'Confirm',
breakpoint = 1024,
onClick,
label
}) => {
const isMobile = useMedia(`(max-width: ${breakpoint}px)`);
const clickHandler = () => {
if (isMobile && !dropdownMobile) {
onClick && onClick();
}
};
return <div className={`${styles.Location} ${classes ?? ''}`}>
{label
? <label htmlFor="location">{label}</label>
: <label htmlFor="location" className='sr-only'>{placeholder}</label>
}
<div
role="button"
className={`${styles.LocationField}`}
onClick={clickHandler}
aria-label={placeholder}
>
<SvgIcon icon={{ name: 'map-marker-alt', width: 16, height: 16, fill: '#144154' }} />
{!dropdownMobile && <span className="only-sm">{name || placeholder}</span>}
<Dropdown
classes={`${styles.datapicker} ${dropdownMobile ? '' : 'no-sm'}`}
name="location"
options={[{ value: '', name: placeholder }, ...locations]}
submitText={submitText}
value={value ?? ''}
onChange={onChange}
/>
</div>
</div>;
}; |