Skip to content

Commit d2f46c2

Browse files
ryanfchaseryanfchase
authored
Merge pull request #2014 from githelsui/1995-update-address-search
1995-update-addres-search
2 parents 59b4da4 + e3fcc4e commit d2f46c2

File tree

3 files changed

+72
-38
lines changed

3 files changed

+72
-38
lines changed

‎src/components/layout/Main/Desktop/FilterMenu.jsx‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ import Collapse from '@mui/material/Collapse';
1212
import Typography from '@mui/material/Typography';
1313
import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
1414
import DateSelector from '@components/DateSelector/DateSelector';
15+
import MapSearch from '../../../../features/Map/controls/MapSearch';
16+
// import ShareableLinkCreator from '@components/main/Desktop/ShareableLinkCreator';
1517
import TypeSelector from '@components/layout/Main/Desktop/TypeSelector';
1618
import StatusSelector from '@components/layout/Main/Desktop/StatusSelector';
1719
import CouncilSelector from '@components/layout/Main/Desktop/CouncilSelector';
1820
import ExportButton from '@components/layout/Main/Desktop/Export/ExportButton';
1921

20-
// import GearButton from '@components/common/GearButton';
2122
// import clsx from 'clsx';
2223

2324
import sharedStyles from '@theme/styles';
@@ -26,8 +27,8 @@ const useStyles = makeStyles(theme => ({
2627
card: {
2728
width: 325,
2829
backgroundColor: theme.palette.primary.main,
29-
borderTopLeftRadius: 0,
30-
borderTopRightRadius: 0,
30+
borderTopLeftRadius: theme.borderRadius.md,
31+
borderTopRightRadius: theme.borderRadius.md,
3132
borderBottomLeftRadius: theme.borderRadius.md,
3233
borderBottomRightRadius: theme.borderRadius.md,
3334
},
@@ -70,7 +71,7 @@ const useStyles = makeStyles(theme => ({
7071
}));
7172

7273
// const FilterMenu = ({ toggleMenu }) => { //toggleMenu used with GearButton
73-
function FilterMenu({ resetMap, resetAddressSearch }) {
74+
function FilterMenu({ resetMap, resetAddressSearch, map, geoFilterType, councils, onGeocoderResult, onChangeTab, onReset, canReset }) {
7475
const [expanded, setExpanded] = useState(true);
7576
const classes = useStyles();
7677
const sharedClasses = sharedStyles();
@@ -86,7 +87,6 @@ function FilterMenu({ resetMap, resetAddressSearch }) {
8687
}}
8788
title={(
8889
<div className={classes.headerContent}>
89-
{/* <GearButton aria-label="toggle map menu" onClick={toggleMenu} /> */}
9090
<div className={classes.headerMargin}>
9191
<Typography className={sharedClasses.headerTitle} variant="h6">
9292
FILTERS
@@ -108,27 +108,37 @@ function FilterMenu({ resetMap, resetAddressSearch }) {
108108
)}
109109
/>
110110
<Collapse in={expanded}>
111-
<CardContent className={classes.content}>
111+
<CardContent className={classes.content} style={{ borderTop: `1px solid #7A5B21`, paddingBottom: '8px' }}>
112112
<div className={classes.selectorWrapper}>
113-
<CouncilSelector
114-
resetMap={resetMap}
115-
resetAddressSearch={resetAddressSearch}
116-
/>
117-
</div>
118-
<div className={classes.selectorWrapper}>
119-
<DateSelector range />
120-
</div>
121-
<div className={classes.selectorWrapper}>
122-
<TypeSelector />
123-
</div>
124-
<div className={classes.selectorWrapper}>
125-
<StatusSelector />
126-
</div>
127-
{/* <div className={classes.selectorWrapper}>
128-
<ShareableLinkCreator />
129-
</div> */}
130-
<div className={`${classes.selectorWrapper} ${classes.export}`}>
131-
<ExportButton />
113+
<div className={classes.selectorWrapper}>
114+
<MapSearch
115+
map={map}
116+
geoFilterType={geoFilterType}
117+
councils={councils}
118+
onGeocoderResult={onGeocoderResult}
119+
onChangeTab={onChangeTab}
120+
onReset={onReset}
121+
canReset={canReset}
122+
/>
123+
</div>
124+
<div className={classes.selectorWrapper}>
125+
<CouncilSelector
126+
resetMap={resetMap}
127+
resetAddressSearch={resetAddressSearch}
128+
/>
129+
</div>
130+
<div className={classes.selectorWrapper}>
131+
<DateSelector range />
132+
</div>
133+
<div className={classes.selectorWrapper}>
134+
<TypeSelector />
135+
</div>
136+
<div className={classes.selectorWrapper}>
137+
<StatusSelector />
138+
</div>
139+
<div className={`${classes.selectorWrapper} ${classes.export}`}>
140+
<ExportButton />
141+
</div>
132142
</div>
133143
</CardContent>
134144
</Collapse>
@@ -145,10 +155,24 @@ export default connect(null, mapDispatchToProps)(FilterMenu);
145155
FilterMenu.defaultProps = {
146156
resetMap: () => {},
147157
resetAddressSearch: () => {},
158+
map: null,
159+
geoFilterType: '',
160+
councils: [],
161+
onGeocoderResult: () => {},
162+
onChangeTab: () => {},
163+
onReset: () => {},
164+
canReset: false
148165
};
149166

150167
FilterMenu.propTypes = {
151168
resetMap: PropTypes.func,
152169
resetAddressSearch: PropTypes.func,
153-
// toggleMenu: PropTypes.func.isRequired,
170+
toggleMenu: PropTypes.func.isRequired,
171+
map: PropTypes.shape({}),
172+
geoFilterType: PropTypes.string,
173+
councils: PropTypes.arrayOf(PropTypes.shape({})),
174+
onGeocoderResult: PropTypes.func,
175+
onChangeTab: PropTypes.func,
176+
onReset: PropTypes.func,
177+
canReset: PropTypes.bool
154178
};

‎src/features/Map/Map.jsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -821,19 +821,17 @@ class Map extends React.Component {
821821
{this.state.mapReady && requestTypes && (
822822
<>
823823
<div className={classes.menuWrapper}>
824-
<MapSearch
825-
map={this.map}
824+
<FilterMenu
825+
resetMap={this.reset}
826+
resetAddressSearch={this.resetAddressSearch}
827+
map={this.map}
826828
geoFilterType={geoFilterType}
827829
councils={councils}
828830
onGeocoderResult={this.onGeocoderResult}
829831
onChangeTab={this.onChangeSearchTab}
830832
onReset={this.reset}
831833
canReset={!!filterGeo && canReset}
832834
/>
833-
<FilterMenu
834-
resetMap={this.reset}
835-
resetAddressSearch={this.resetAddressSearch}
836-
/>
837835
</div>
838836
</>
839837
)}

‎src/features/Map/controls/MapSearch.jsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,29 @@
33
import React from 'react';
44
import PropTypes from 'prop-types';
55
import withStyles from '@mui/styles/withStyles';
6+
import Typography from '@mui/material/Typography';
67
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
78
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
89
import { GEO_FILTER_TYPES } from '../constants';
910
import settings from '@settings'
11+
import { margin } from '@mui/system';
1012

1113
const TABS = Object.values(GEO_FILTER_TYPES);
1214

1315
const styles = theme => ({
1416
geocoder: {
15-
width: 325,
17+
width: 300,
1618
backgroundColor: theme.palette.primary.dark,
17-
borderTopRightRadius: '10px',
18-
borderTopLeftRadius: '10px',
19-
padding: '10px 15px 10px 15px',
19+
borderTopRightRadius: '5px',
20+
borderTopLeftRadius: '5px',
21+
borderBottomRightRadius: '5px',
22+
borderBottomLeftRadius: '5px',
23+
margin: '10px 5px 5px 0px',
24+
padding: '2px',
2025
'& div.mapboxgl-ctrl': {
2126
width: '100%',
2227
borderRadius: 0,
23-
borderBottom: `1px solid ${theme.palette.primary.focus}`,
28+
borderBottom: 'none',
2429
'& svg': {
2530
color: theme.palette.primary.focus,
2631
fill: theme.palette.primary.focus,
@@ -55,6 +60,12 @@ const styles = theme => ({
5560
backgroundColor: theme.palette.primary.main,
5661
color: theme.palette.text.secondaryLight,
5762
},
63+
header: {
64+
fontSize: '12.47px',
65+
fontWeight: theme.typography.fontWeightMedium,
66+
marginBottom: '8px',
67+
marginTop: '12px'
68+
}
5869
});
5970

6071
class MapSearch extends React.Component {
@@ -82,7 +93,7 @@ class MapSearch extends React.Component {
8293
flyTo: false,
8394
marker: false,
8495
minLength: 1,
85-
placeholder: "Enter an address or location",
96+
placeholder: "Search Address",
8697
localGeocoder: searchTerm => {
8798
const { geoFilterType } = this.props;
8899
const searchFilter = new RegExp(searchTerm, 'i');
@@ -173,6 +184,7 @@ class MapSearch extends React.Component {
173184
</Button>
174185
))}
175186
</div> */}
187+
<Typography className={classes.header}>Search by Address</Typography>
176188
<div id="geocoder" className={classes.geocoder} />
177189
</div>
178190
);

0 commit comments

Comments
 (0)