Skip to content

Commit 67d7a8e

Browse files
vesameskanenvesameskanen
authored
Merge pull request #5677 from HSLdevcom/AB#450-next-2
Ab#450 next 2
2 parents 7efe41f + 3f9dc07 commit 67d7a8e

27 files changed

+2127
-2088
lines changed

‎app/component/AddressRow.js‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,10 @@ import { FormattedMessage } from 'react-intl';
44
import StopCode from './StopCode';
55

66
const AddressRow = props => (
7-
<div
8-
className="route-address-row-container"
9-
ref={el => {
10-
if (el) {
11-
/* eslint-disable no-param-reassign */
12-
el.style.width = null;
13-
const rounded = Math.ceil(el.offsetWidth + 1);
14-
el.style.width = `${rounded}px`;
15-
}
16-
}}
17-
>
7+
<div className="route-address-row-container">
188
<span className="route-stop-address-row">{props.desc}</span>
199
{props.code && <StopCode code={props.code} />}
20-
{props.isTerminal && (
21-
<p className="card-code terminal">
22-
<FormattedMessage id="station" />
23-
</p>
24-
)}
10+
{props.isTerminal && <StopCode code={<FormattedMessage id="station" />} />}
2511
</div>
2612
);
2713

‎app/component/BackButton.js‎

Lines changed: 38 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,26 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { routerShape, matchShape } from 'found';
4-
import { intlShape } from 'react-intl';
5-
import { configShape } from '../util/shapes';
64
import Icon from './Icon';
5+
import { useConfigContext } from '../configurations/ConfigContext';
6+
import { useTranslationsContext } from '../util/useTranslationsContext';
77

8-
export default class BackButton extends React.Component {
9-
static contextTypes = {
10-
intl: intlShape.isRequired,
11-
router: routerShape,
12-
match: matchShape,
13-
config: configShape,
14-
};
15-
16-
static propTypes = {
17-
icon: PropTypes.string,
18-
color: PropTypes.string,
19-
iconClassName: PropTypes.string,
20-
title: PropTypes.node,
21-
titleClassName: PropTypes.string,
22-
className: PropTypes.string,
23-
onBackBtnClick: PropTypes.func,
24-
fallback: PropTypes.string,
25-
};
8+
export default function BackButton(props, context) {
9+
const config = useConfigContext();
10+
const intl = useTranslationsContext();
2611

27-
static defaultProps = {
28-
icon: 'icon_arrow-left',
29-
color: undefined,
30-
iconClassName: '',
31-
title: undefined,
32-
titleClassName: undefined,
33-
className: 'back-button',
34-
fallback: undefined,
35-
onBackBtnClick: undefined,
36-
};
37-
38-
goBack = url => {
39-
const { router, match } = this.context;
12+
const goBack = url => {
13+
const { router, match } = context;
4014
const { location } = match;
4115

4216
if (
4317
location.index > 0 ||
4418
// eslint-disable-next-line no-restricted-globals
45-
(history.length > 1 && this.props.fallback === 'back')
19+
(history.length > 1 && props.fallback === 'back')
4620
) {
4721
router.go(-1);
4822
} else if (
49-
this.props.fallback === 'pop' &&
23+
props.fallback === 'pop' &&
5024
location.pathname.split('/').length > 1
5125
) {
5226
const parts = location.pathname.split('/');
@@ -63,46 +37,35 @@ export default class BackButton extends React.Component {
6337
}
6438
};
6539

66-
render() {
67-
let url;
68-
const { config, intl } = this.context;
69-
// apply rootlink only in production, it is annoying locally
70-
if (!this.props.onBackBtnClick && config.NODE_ENV !== 'development') {
71-
if (config.passLanguageToRootLink && intl.locale !== 'fi') {
72-
url = `${config.URL.ROOTLINK}/${intl.locale}`;
73-
} else {
74-
url = config.URL.ROOTLINK;
75-
}
40+
let url;
41+
// apply rootlink only in production, it is annoying locally
42+
if (config.NODE_ENV !== 'development') {
43+
if (config.passLanguageToRootLink && intl.locale !== 'fi') {
44+
url = `${config.URL.ROOTLINK}/${intl.locale}`;
45+
} else {
46+
url = config.URL.ROOTLINK;
7647
}
77-
return (
78-
<div className={this.props.className} style={{ display: 'flex' }}>
79-
{this.props.title && !this.props.titleClassName && (
80-
<h1 className="h1">{this.props.title}</h1>
81-
)}
82-
{this.props.title && this.props.titleClassName && (
83-
<span className={this.props.titleClassName}>{this.props.title}</span>
84-
)}
85-
<button
86-
type="button"
87-
className="icon-holder noborder cursor-pointer"
88-
onClick={
89-
this.props.onBackBtnClick
90-
? this.props.onBackBtnClick
91-
: () => this.goBack(url)
92-
}
93-
aria-label={this.context.intl.formatMessage({
94-
id: 'back-button-title',
95-
defaultMessage: 'Go back to previous page',
96-
})}
97-
tabIndex={0}
98-
>
99-
<Icon
100-
img={this.props.icon}
101-
color={this.props.color || this.context.config.colors.primary}
102-
className={`${this.props.iconClassName} cursor-pointer`}
103-
/>
104-
</button>
105-
</div>
106-
);
10748
}
49+
return (
50+
<div className="back-button">
51+
{props.title && <h1>{props.title}</h1>}
52+
<button
53+
type="button"
54+
className="icon-holder noborder cursor-pointer"
55+
onClick={() => goBack(url)}
56+
aria-label={intl.formatMessage({ id: 'back-button-title' })}
57+
tabIndex={0}
58+
>
59+
<Icon
60+
img="icon_arrow-collapse--left"
61+
color={config.colors.primary}
62+
className="arrow-icon"
63+
/>
64+
</button>
65+
</div>
66+
);
10867
}
68+
69+
BackButton.contextTypes = { router: routerShape, match: matchShape };
70+
BackButton.propTypes = { title: PropTypes.node, fallback: PropTypes.string };
71+
BackButton.defaultProps = { title: undefined, fallback: undefined };

‎app/component/CardHeader.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,7 @@ export default function CardHeader(
3636
return (
3737
<Fragment>
3838
<div className={cx('card-header', className)}>
39-
{showBackButton && (
40-
<BackButton
41-
icon="icon_arrow-collapse--left"
42-
iconClassName="arrow-icon"
43-
/>
44-
)}
39+
{showBackButton && <BackButton />}
4540
<div className="card-header-content">
4641
{icon ? (
4742
<div

‎app/component/DesktopView.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,8 @@ export default function DesktopView({
1818
<div className="desktop">
1919
<div className="main-content" role="main" id="main-content">
2020
{bckBtnVisible && (
21-
<div className="desktop-title">
22-
<div className="title-container h2">
23-
<BackButton
24-
title={title}
25-
icon="icon_arrow-collapse--left"
26-
iconClassName="arrow-icon"
27-
fallback={bckBtnFallback}
28-
/>
29-
</div>
21+
<div className="desktop-title h1">
22+
<BackButton title={title} fallback={bckBtnFallback} />
3023
</div>
3124
)}
3225
<ScrollableWrapper scrollable={scrollable}>

‎app/component/ParkOrStationHeader.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,7 @@ const ParkOrBikeStationHeader = (
4848
const cn = withSeparator ? 'station-header-with-separator' : 'station-header';
4949
return (
5050
<div className={cn}>
51-
{breakpoint === 'large' && backButton && (
52-
<BackButton
53-
icon="icon_arrow-collapse--left"
54-
iconClassName="arrow-icon"
55-
/>
56-
)}
51+
{breakpoint === 'large' && backButton && <BackButton />}
5752
<div className="header">
5853
<h3>{name}</h3>
5954
<div className="station-sub-header">

‎app/component/RentalVehicleContent.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,7 @@ const RentalVehicleContent = (
4646
return (
4747
<div className="scooter-page-container">
4848
<div className="scooter-cluster-back-button-container">
49-
{breakpoint === 'large' && (
50-
<BackButton
51-
icon="icon_arrow-collapse--left"
52-
iconClassName="arrow-icon"
53-
/>
54-
)}
49+
{breakpoint === 'large' && <BackButton />}
5550
</div>
5651
<div className="scooter-sub-header scooters-available">
5752
<FormattedMessage id="e-scooters-available" />
@@ -84,12 +79,7 @@ const RentalVehicleContent = (
8479
<div className="scooter-content-container">
8580
<Icon img={vehicleIcon} />
8681
<div className="scooter-header">
87-
{breakpoint === 'large' && (
88-
<BackButton
89-
icon="icon_arrow-collapse--left"
90-
iconClassName="arrow-icon"
91-
/>
92-
)}
82+
{breakpoint === 'large' && <BackButton />}
9383
<div className="header">
9484
<h1>
9585
{networkConfig.name[language] ||

‎app/component/SelectFromMapHeader.js‎

Lines changed: 36 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,60 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import { intlShape } from 'react-intl';
4-
import { configShape } from '../util/shapes';
3+
import { FormattedMessage } from 'react-intl';
54
import Icon from './Icon';
5+
import { useConfigContext } from '../configurations/ConfigContext';
6+
import { useTranslationsContext } from '../util/useTranslationsContext';
67

7-
export default function SelectFromMapHeaderComponent(props, { config, intl }) {
8-
const title =
9-
props.titleId !== undefined
10-
? intl.formatMessage({
11-
id: props.titleId,
12-
defaultMessage: 'Select viaPoint',
13-
})
14-
: '';
15-
16-
const backBtnCursorPointerClassName = `${
17-
props.hideBackBtn ? 'no-pointer' : 'cursor-pointer'
18-
}`;
19-
const closeBtnCursorPointerClassName = `${
20-
props.hideCloseBtn ? 'no-pointer' : 'cursor-pointer'
21-
}`;
8+
export default function SelectFromMapHeader(props) {
9+
const { colors } = useConfigContext();
10+
const intl = useTranslationsContext();
2211

2312
return (
2413
<div className="select-from-map-nav-container">
25-
<button
26-
type="button"
27-
className={`from-map-modal-nav-button ${backBtnCursorPointerClassName}`}
28-
onClick={props.hideBackBtn ? undefined : props.onBackBtnClick}
29-
aria-label={intl.formatMessage({
30-
id: 'back-button-title',
31-
defaultMessage: 'Go back to previous page',
32-
})}
33-
>
34-
{!props.hideBackBtn && (
35-
<Icon
36-
img={props.backBtnIcon}
37-
color={config.colors.primary}
38-
className={`${props.iconClassName} ${backBtnCursorPointerClassName}`}
39-
/>
40-
)}
41-
</button>
42-
{title && !props.titleClassName && (
43-
<div className="select-from-map-nav-title">{title}</div>
14+
{!props.hideBackBtn && (
15+
<button
16+
type="button"
17+
className="from-map-modal-nav-button"
18+
onClick={props.hideBackBtn ? undefined : props.onBackBtnClick}
19+
aria-label={intl.formatMessage({
20+
id: 'back-button-title',
21+
defaultMessage: 'Go back to previous page',
22+
})}
23+
>
24+
<Icon img="icon_arrow-left" color={colors.primary} />
25+
</button>
4426
)}
45-
{title && props.titleClassName && (
46-
<span className={props.titleClassName}>{title}</span>
27+
<div className="select-from-map-nav-title">
28+
<FormattedMessage id={props.titleId} />
29+
</div>
30+
{!props.hideCloseBtn && (
31+
<button
32+
type="button"
33+
className="from-map-modal-nav-button"
34+
onClick={props.hideCloseBtn ? undefined : props.onCloseBtnClick}
35+
aria-label={intl.formatMessage({
36+
id: 'back-button-title',
37+
defaultMessage: 'Go back to previous page',
38+
})}
39+
>
40+
<Icon img="icon_close" color={colors.primary} />
41+
</button>
4742
)}
48-
<button
49-
type="button"
50-
className={`from-map-modal-nav-button ${closeBtnCursorPointerClassName}`}
51-
onClick={props.hideCloseBtn ? undefined : props.onCloseBtnClick}
52-
aria-label={intl.formatMessage({
53-
id: 'back-button-title',
54-
defaultMessage: 'Go back to previous page',
55-
})}
56-
>
57-
{!props.hideCloseBtn && (
58-
<Icon
59-
img={props.closeBtnIcon}
60-
color={config.colors.primary}
61-
className={`${props.iconClassName} ${closeBtnCursorPointerClassName}`}
62-
/>
63-
)}
64-
</button>
6543
</div>
6644
);
6745
}
6846

69-
SelectFromMapHeaderComponent.propTypes = {
70-
titleId: PropTypes.string,
47+
SelectFromMapHeader.propTypes = {
48+
titleId: PropTypes.string.isRequired,
7149
onBackBtnClick: PropTypes.func,
7250
onCloseBtnClick: PropTypes.func,
73-
backBtnIcon: PropTypes.string,
74-
closeBtnIcon: PropTypes.string,
7551
hideBackBtn: PropTypes.bool,
7652
hideCloseBtn: PropTypes.bool,
77-
titleClassName: PropTypes.string,
78-
iconClassName: PropTypes.string,
7953
};
8054

81-
SelectFromMapHeaderComponent.defaultProps = {
82-
titleId: undefined,
83-
backBtnIcon: 'icon_arrow-left',
84-
closeBtnIcon: 'icon_close',
55+
SelectFromMapHeader.defaultProps = {
8556
onBackBtnClick: PropTypes.func,
8657
onCloseBtnClick: PropTypes.func,
8758
hideBackBtn: false,
8859
hideCloseBtn: false,
89-
titleClassName: undefined,
90-
iconClassName: undefined,
91-
};
92-
93-
SelectFromMapHeaderComponent.contextTypes = {
94-
config: configShape.isRequired,
95-
intl: intlShape.isRequired,
9660
};

‎app/component/StopCode.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ const StopCode = ({ code }) =>
66

77
StopCode.displayName = 'StopCode';
88
StopCode.propTypes = {
9-
code: PropTypes.string.isRequired,
9+
code: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
1010
};
1111
export default StopCode;

0 commit comments

Comments
 (0)