feat(location-field): make location group order configurable #771
Conversation
| const OtherFeaturesHeader = () => ( | ||
| <S.MenuGroupHeader as={headingType} bgColor="#333" key="other-header"> | ||
| <FormattedMessage | ||
| description="Text for header above the 'other'" |
There was a problem hiding this comment.
Description looks unfinished, could you fix please?
…/otp-ui into reorder-other-to-first
|
Blocked by #774 |
amy-corson-ibigroup
added
the
BLOCKERS
amy-corson-ibigroup
removed
the
BLOCKERS
| const [otherControl, setOtherControl] = useState(false); | ||
| return ( | ||
| <> | ||
| <label htmlFor="other-input"> |
There was a problem hiding this comment.
Could you make Storybook create the controls using argTypes instead? (Storybook will add that to its "Controls" tab - I should have mentioned that in my previous review but somehow thought you knew) Do that for this story only. Refer to e.g.
| return ( | ||
| <> | ||
| {/* Only include the header if there are features to show */} | ||
| {(title === GeocoderResultsConstants.other || |
There was a problem hiding this comment.
| {(title === GeocoderResultsConstants.other || | |
| {(title === GeocoderResultsConstants.OTHER || |
typo?
| @@ -113,6 +113,8 @@ export interface LocationFieldProps { | |||
| maxNearbyStops?: number; | |||
| type: string; | |||
| }; | |||
| /** Order of geocoder results to display */ | |||
| geocoderResultsOrder?: Array<"STATIONS" | "STOPS" | "OTHER">; | |||
There was a problem hiding this comment.
There might be a fancy way to grab these from the object, but I'm not sure how. @daniel-heppner-ibigroup might now. But for now we should at least add a comment
amy-corson-ibigroup
assigned daniel-heppner-ibigroup and miles-grant-ibigroup and unassigned amy-corson-ibigroup and daniel-heppner-ibigroup
| bgColor, | ||
| title, | ||
| HeaderMessage, | ||
| featuresArray |
There was a problem hiding this comment.
Rename to features? Sort props.
| @@ -159,6 +160,11 @@ const LocationField = ({ | |||
| GeocodedOptionIconComponent = GeocodedOptionIcon, | |||
| geocoderConfig, | |||
| getCurrentPosition, | |||
| geocoderResultsOrder = [ | |||
There was a problem hiding this comment.
I think this prop is better than the original one.
| const Header = () => ( | ||
| <S.MenuGroupHeader as={headingType} bgColor={bgColor} key={title}> | ||
| {HeaderMessage} | ||
| </S.MenuGroupHeader> | ||
| ); |
There was a problem hiding this comment.
Inline this or move this component to top level (avoid creating a new component class on each render).
| let Element; | ||
| switch (result) { | ||
| case GeocoderResultsConstants.OTHER: | ||
| Element = otherFeatures.length > 0 && ( |
There was a problem hiding this comment.
Rename to element lower case.
| /> | ||
| } | ||
| key="other-header" | ||
| featuresArray={otherFeatures} |
There was a problem hiding this comment.
Sort props (multiple instances)
| bgColor="#333" | ||
| HeaderMessage={ | ||
| <FormattedMessage | ||
| id="otpUi.LocationField.other" |
There was a problem hiding this comment.
Default to English? (multiple instances)
| // avoid displaying headers | ||
| const transitFeaturesPresent = | ||
| stopFeatures.length > 0 || stationFeatures.length > 0; | ||
| const FeaturesElements = ({ |
There was a problem hiding this comment.
Move this component to top level (avoid creating a new component class on each render).
| currentPosition={currentPosition} | ||
| geocoderConfig={geocoderConfig} | ||
| getCurrentPosition={getCurrentPosition} | ||
| preferredLayers={["example_layer"]} |
|
@amy-corson-ibigroup Also please update the props in the PR description... |
Allows configuration of the order of the returned location group results, so that if you pass
renderOtherFirstthrough the config, it puts the "other" category first in the results, above stops and stations.