Skip to content

Commit 30b173e

Browse files
vesameskanenvesameskanen
authored
Merge pull request #5450 from HSLdevcom/AB#107-fix-suggestion-icon-color
AB#107 Fix Autosuggest icons to use route.color if it is available
2 parents 83571d2 + e3ecd0f commit 30b173e

File tree

10 files changed

+88
-63
lines changed

10 files changed

+88
-63
lines changed

‎app/component/map/PositionMarker.js

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import connectToStores from 'fluxible-addons-react/connectToStores';
3-
import pure from 'recompose/pure';
43
import Marker from 'react-leaflet/es/Marker';
54
import { default as L } from 'leaflet';
65

@@ -36,20 +35,16 @@ PositionMarker.defaultProps = {
3635
coordinates: null,
3736
};
3837

39-
export default connectToStores(
40-
pure(PositionMarker),
41-
['PositionStore'],
42-
context => {
43-
const coordinates = context.getStore('PositionStore').getLocationState();
44-
45-
return {
46-
coordinates: coordinates.hasLocation
47-
? {
48-
lat: coordinates.lat,
49-
lon: coordinates.lon,
50-
address: coordinates.address,
51-
}
52-
: null,
53-
};
54-
},
55-
);
38+
export default connectToStores(PositionMarker, ['PositionStore'], context => {
39+
const coordinates = context.getStore('PositionStore').getLocationState();
40+
41+
return {
42+
coordinates: coordinates.hasLocation
43+
? {
44+
lat: coordinates.lat,
45+
lon: coordinates.lon,
46+
address: coordinates.address,
47+
}
48+
: null,
49+
};
50+
});

‎app/component/routepage/TripStopsContainer.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import PropTypes from 'prop-types';
2-
import React, { useState, useRef } from 'react';
2+
import React, { useState, useRef, memo } from 'react';
33
import { createFragmentContainer, graphql } from 'react-relay';
44
import cx from 'classnames';
5-
import pure from 'recompose/pure';
65
import { matchShape } from 'found';
76
import debounce from 'lodash/debounce';
87
import RouteControlPanel from './RouteControlPanel';
@@ -12,7 +11,12 @@ import withBreakpoint from '../../util/withBreakpoint';
1211
import ScrollableWrapper from '../ScrollableWrapper';
1312
import { routeShape } from '../../util/shapes';
1413

15-
function TripStopsContainer({ breakpoint, match, trip, route }) {
14+
const TripStopsContainer = memo(function TripStopsContainer({
15+
breakpoint,
16+
match,
17+
trip,
18+
route,
19+
}) {
1620
const [keepTracking, setTracking] = useState(true);
1721
const humanScrolling = useRef(true);
1822

@@ -59,7 +63,7 @@ function TripStopsContainer({ breakpoint, match, trip, route }) {
5963
/>
6064
</ScrollableWrapper>
6165
);
62-
}
66+
});
6367

6468
TripStopsContainer.propTypes = {
6569
trip: PropTypes.shape({
@@ -79,8 +83,8 @@ TripStopsContainer.defaultProps = {
7983
route: undefined,
8084
};
8185

82-
const pureComponent = pure(withBreakpoint(TripStopsContainer));
83-
const containerComponent = createFragmentContainer(pureComponent, {
86+
const componentWithBreakpoint = withBreakpoint(TripStopsContainer);
87+
const containerComponent = createFragmentContainer(componentWithBreakpoint, {
8488
trip: graphql`
8589
fragment TripStopsContainer_trip on Trip {
8690
stoptimesForDate {

‎digitransit-component/packages/digitransit-component-autosuggest-panel/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digitransit-component/digitransit-component-autosuggest-panel",
3-
"version": "5.2.0",
3+
"version": "5.3.0",
44
"description": "digitransit-component autosuggest-panel module",
55
"main": "index.js",
66
"files": [
@@ -28,7 +28,7 @@
2828
"author": "Digitransit Authors",
2929
"license": "(AGPL-3.0 OR EUPL-1.2)",
3030
"peerDependencies": {
31-
"@digitransit-component/digitransit-component-autosuggest": "^4.2.0",
31+
"@digitransit-component/digitransit-component-autosuggest": "^4.3.0",
3232
"@digitransit-component/digitransit-component-icon": "^1.0.2",
3333
"@hsl-fi/sass": "^0.2.0",
3434
"classnames": "2.5.1",

‎digitransit-component/packages/digitransit-component-autosuggest/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digitransit-component/digitransit-component-autosuggest",
3-
"version": "4.2.0",
3+
"version": "4.3.0",
44
"description": "digitransit-component autosuggest module",
55
"main": "index.js",
66
"files": [
@@ -37,7 +37,7 @@
3737
"peerDependencies": {
3838
"@digitransit-component/digitransit-component-dialog-modal": "^0.3.7",
3939
"@digitransit-component/digitransit-component-icon": "^1.0.2",
40-
"@digitransit-component/digitransit-component-suggestion-item": "^2.0.8",
40+
"@digitransit-component/digitransit-component-suggestion-item": "^2.1.0",
4141
"@hsl-fi/sass": "^0.2.0",
4242
"classnames": "2.5.1",
4343
"i18next": "^22.5.1",

‎digitransit-component/packages/digitransit-component-suggestion-item/package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digitransit-component/digitransit-component-suggestion-item",
3-
"version": "2.0.8",
3+
"version": "2.1.0",
44
"description": "digitransit-component suggestion-item module",
55
"main": "index.js",
66
"files": [
@@ -28,9 +28,6 @@
2828
],
2929
"author": "Digitransit Authors",
3030
"license": "(AGPL-3.0 OR EUPL-1.2)",
31-
"dependencies": {
32-
"recompose": "0.30.0"
33-
},
3431
"peerDependencies": {
3532
"@digitransit-component/digitransit-component-icon": "^1.0.2",
3633
"@hsl-fi/sass": " ^0.2.0",

‎digitransit-component/packages/digitransit-component-suggestion-item/src/index.js

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import PropTypes from 'prop-types';
3-
import React, { useState } from 'react';
3+
import React, { useState, memo } from 'react';
44
import cx from 'classnames';
5-
import pure from 'recompose/pure';
65
import Icon from '@digitransit-component/digitransit-component-icon';
76
import styles from './helpers/styles.scss';
87

@@ -27,7 +26,7 @@ const getRouteMode = props => {
2726
};
2827

2928
function isFavourite(item) {
30-
return item?.type?.includes('Favourite');
29+
return item.type?.includes('Favourite');
3130
}
3231

3332
function getAriaDescription(ariaContentArray) {
@@ -47,7 +46,7 @@ function getIconProperties(
4746
) {
4847
let iconId;
4948
let iconColor = '#888888';
50-
if (item?.properties?.layer === 'bikestation' && getIcons) {
49+
if (item.properties?.layer === 'bikestation' && getIcons) {
5150
return getIcons.citybikes(item);
5251
}
5352
// because of legacy favourites there might be selectedIconId for some stops or stations
@@ -59,22 +58,22 @@ function getIconProperties(
5958
} else if (item.type === 'Route') {
6059
const mode =
6160
modeSet === 'default'
62-
? getRouteMode(item?.properties)
63-
: item?.properties?.mode?.toLowerCase() || 'bus';
61+
? getRouteMode(item.properties)
62+
: item.properties?.mode?.toLowerCase() || 'bus';
6463
return modeSet === 'default'
6564
? [`mode-${mode}`, `mode-${mode}`]
6665
: [`mode-${modeSet}-${mode}`, `mode-${mode}`];
67-
} else if (item.type === 'OldSearch' && item?.properties?.mode) {
66+
} else if (item.type === 'OldSearch' && item.properties?.mode) {
6867
const mode =
6968
modeSet === 'default'
70-
? getRouteMode(item?.properties)
71-
: item?.properties?.mode?.toLowerCase() || 'bus';
69+
? getRouteMode(item.properties)
70+
: item.properties?.mode?.toLowerCase() || 'bus';
7271
return modeSet === 'default'
7372
? [`mode-${mode}`, `mode-${mode}`]
7473
: [`mode-${modeSet}-${mode}`, `mode-${mode}`];
75-
} else if (item && item.selectedIconId) {
74+
} else if (item.selectedIconId) {
7675
iconId = item.selectedIconId;
77-
} else if (item && item.properties) {
76+
} else if (item.properties) {
7877
if (item.properties.layer === 'bikestation') {
7978
return [`citybike-stop-${modeSet}`, 'mode-citybike'];
8079
}
@@ -263,7 +262,7 @@ function hasVehicleStationCode(stationId) {
263262
* loading={false}
264263
* />
265264
*/
266-
const SuggestionItem = pure(
265+
const SuggestionItem = memo(
267266
({
268267
item,
269268
content,
@@ -295,9 +294,16 @@ const SuggestionItem = pure(
295294
const [arrowClicked, setArrowClicked] = useState(false);
296295
const icon = (
297296
<span
298-
className={`${styles[iconId]} ${item?.properties?.mode?.toLowerCase()}`}
297+
className={`${styles[iconId]} ${item.properties?.mode?.toLowerCase()}`}
299298
>
300-
<Icon color={modeIconColor || iconColor} img={iconId} />
299+
<Icon
300+
color={
301+
item.properties?.color
302+
? `#${item.properties.color}`
303+
: modeIconColor || iconColor
304+
}
305+
img={iconId}
306+
/>
301307
</span>
302308
);
303309
let ariaParts;
@@ -448,7 +454,7 @@ const SuggestionItem = pure(
448454
)}
449455
</div>
450456
{iconId !== 'arrow' &&
451-
(item?.properties?.layer !== 'street' ||
457+
(item.properties?.layer !== 'street' ||
452458
!isMobile ||
453459
arrowClicked) && (
454460
<span
@@ -460,7 +466,7 @@ const SuggestionItem = pure(
460466
</span>
461467
)}
462468
{iconId !== 'arrow' &&
463-
item?.properties?.layer === 'street' &&
469+
item.properties?.layer === 'street' &&
464470
!arrowClicked &&
465471
isMobile && (
466472
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
@@ -517,11 +523,32 @@ SuggestionItem.propTypes = {
517523
address: PropTypes.string,
518524
selectedIconId: PropTypes.string,
519525
iconColor: PropTypes.string,
520-
}),
526+
translatedText: PropTypes.string,
527+
properties: PropTypes.shape({
528+
layer: PropTypes.string,
529+
color: PropTypes.string,
530+
localadmin: PropTypes.string,
531+
mode: PropTypes.string,
532+
id: PropTypes.string,
533+
source: PropTypes.string,
534+
arrowClicked: PropTypes.bool,
535+
destination: PropTypes.shape({
536+
name: PropTypes.string,
537+
localadmin: PropTypes.string,
538+
}),
539+
origin: PropTypes.shape({
540+
name: PropTypes.string,
541+
localadmin: PropTypes.string,
542+
}),
543+
}),
544+
}).isRequired,
521545
// eslint-disable-next-line
522546
content: PropTypes.array,
523547
className: PropTypes.string,
524548
isMobile: PropTypes.bool,
549+
ariaFavouriteString: PropTypes.string,
550+
loading: PropTypes.bool,
551+
fillInput: PropTypes.func,
525552
color: PropTypes.string,
526553
accessiblePrimaryColor: PropTypes.string,
527554
fontWeights: PropTypes.shape({
@@ -533,6 +560,9 @@ SuggestionItem.propTypes = {
533560
};
534561

535562
SuggestionItem.defaultProps = {
563+
loading: false,
564+
ariaFavouriteString: '',
565+
fillInput: () => {},
536566
className: undefined,
537567
isMobile: false,
538568
color: '#007ac9',

‎digitransit-component/packages/digitransit-component/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414
"docs": "node -r esm ../../scripts/generate-readmes"
1515
},
1616
"dependencies": {
17-
"@digitransit-component/digitransit-component-autosuggest": "^4.2.0",
18-
"@digitransit-component/digitransit-component-autosuggest-panel": "^5.2.0",
17+
"@digitransit-component/digitransit-component-autosuggest": "^4.3.0",
18+
"@digitransit-component/digitransit-component-autosuggest-panel": "^5.3.0",
1919
"@digitransit-component/digitransit-component-control-panel": "^2.0.1",
2020
"@digitransit-component/digitransit-component-favourite-bar": "2.0.8",
2121
"@digitransit-component/digitransit-component-favourite-editing-modal": "^2.0.4",
2222
"@digitransit-component/digitransit-component-favourite-modal": "^1.0.7",
2323
"@digitransit-component/digitransit-component-icon": "^1.0.2",
24-
"@digitransit-component/digitransit-component-suggestion-item": "^2.0.8",
24+
"@digitransit-component/digitransit-component-suggestion-item": "^2.1.0",
2525
"@digitransit-component/digitransit-component-with-breakpoint": "^0.0.5"
2626
},
2727
"peerDependencies": {

‎digitransit-search-util/packages/digitransit-search-util-query-utils/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@digitransit-search-util/digitransit-search-util-query-utils",
3-
"version": "4.1.5",
3+
"version": "4.2.0",
44
"description": "digitransit-search-util query-utils module",
55
"main": "lib/index.js",
66
"publishConfig": {

‎digitransit-search-util/packages/digitransit-search-util-query-utils/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ const searchRoutesQuery = graphql`
9494
type
9595
shortName
9696
mode
97+
color
9798
longName
9899
patterns {
99100
code

‎yarn.lock

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1996,11 +1996,11 @@ __metadata:
19961996
languageName: unknown
19971997
linkType: soft
19981998

1999-
"@digitransit-component/digitransit-component-autosuggest-panel@^5.2.0, @digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel":
1999+
"@digitransit-component/digitransit-component-autosuggest-panel@^5.3.0, @digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel":
20002000
version: 0.0.0-use.local
20012001
resolution: "@digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel"
20022002
peerDependencies:
2003-
"@digitransit-component/digitransit-component-autosuggest": ^4.2.0
2003+
"@digitransit-component/digitransit-component-autosuggest": ^4.3.0
20042004
"@digitransit-component/digitransit-component-icon": ^1.0.2
20052005
"@hsl-fi/sass": ^0.2.0
20062006
classnames: 2.5.1
@@ -2016,7 +2016,7 @@ __metadata:
20162016
languageName: unknown
20172017
linkType: soft
20182018

2019-
"@digitransit-component/digitransit-component-autosuggest@^4.2.0, @digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest":
2019+
"@digitransit-component/digitransit-component-autosuggest@^4.3.0, @digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest":
20202020
version: 0.0.0-use.local
20212021
resolution: "@digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest"
20222022
dependencies:
@@ -2027,7 +2027,7 @@ __metadata:
20272027
peerDependencies:
20282028
"@digitransit-component/digitransit-component-dialog-modal": ^0.3.7
20292029
"@digitransit-component/digitransit-component-icon": ^1.0.2
2030-
"@digitransit-component/digitransit-component-suggestion-item": ^2.0.8
2030+
"@digitransit-component/digitransit-component-suggestion-item": ^2.1.0
20312031
"@hsl-fi/sass": ^0.2.0
20322032
classnames: 2.5.1
20332033
i18next: ^22.5.1
@@ -2150,11 +2150,9 @@ __metadata:
21502150
languageName: unknown
21512151
linkType: soft
21522152

2153-
"@digitransit-component/digitransit-component-suggestion-item@^2.0.8, @digitransit-component/digitransit-component-suggestion-item@workspace:digitransit-component/packages/digitransit-component-suggestion-item":
2153+
"@digitransit-component/digitransit-component-suggestion-item@^2.1.0, @digitransit-component/digitransit-component-suggestion-item@workspace:digitransit-component/packages/digitransit-component-suggestion-item":
21542154
version: 0.0.0-use.local
21552155
resolution: "@digitransit-component/digitransit-component-suggestion-item@workspace:digitransit-component/packages/digitransit-component-suggestion-item"
2156-
dependencies:
2157-
recompose: 0.30.0
21582156
peerDependencies:
21592157
"@digitransit-component/digitransit-component-icon": ^1.0.2
21602158
"@hsl-fi/sass": " ^0.2.0"
@@ -2206,14 +2204,14 @@ __metadata:
22062204
version: 0.0.0-use.local
22072205
resolution: "@digitransit-component/digitransit-component@workspace:digitransit-component/packages/digitransit-component"
22082206
dependencies:
2209-
"@digitransit-component/digitransit-component-autosuggest": ^4.2.0
2210-
"@digitransit-component/digitransit-component-autosuggest-panel": ^5.2.0
2207+
"@digitransit-component/digitransit-component-autosuggest": ^4.3.0
2208+
"@digitransit-component/digitransit-component-autosuggest-panel": ^5.3.0
22112209
"@digitransit-component/digitransit-component-control-panel": ^2.0.1
22122210
"@digitransit-component/digitransit-component-favourite-bar": 2.0.8
22132211
"@digitransit-component/digitransit-component-favourite-editing-modal": ^2.0.4
22142212
"@digitransit-component/digitransit-component-favourite-modal": ^1.0.7
22152213
"@digitransit-component/digitransit-component-icon": ^1.0.2
2216-
"@digitransit-component/digitransit-component-suggestion-item": ^2.0.8
2214+
"@digitransit-component/digitransit-component-suggestion-item": ^2.1.0
22172215
"@digitransit-component/digitransit-component-with-breakpoint": ^0.0.5
22182216
peerDependencies:
22192217
"@digitransit-component/digitransit-component-dialog-modal": ^0.3.6

0 commit comments

Comments
 (0)