-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.jsx
81 lines (76 loc) · 2.25 KB
/
index.jsx
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import Portal from '@shopgate/pwa-common/components/Portal';
import { FAVORITES_PATH } from '@shopgate/pwa-common-commerce/favorites/constants';
import FavoritesIcon from '@shopgate/pwa-ui-shared/icons/HeartIcon';
import { i18n } from '@shopgate/engage/core';
import * as portals from '../../constants';
import FavoritesIconBadge from './components/FavoritesIconBadge'; // eslint-disable-line import/no-named-as-default
import TabBarAction from '../TabBarAction';
import connect from '../connector';
import connectBadge from './components/FavoritesIconBadge/connector';
import styles from './style';
/**
* The tab bar favorites action.
*/
class TabBarFavoritesAction extends Component {
static propTypes = {
navigate: PropTypes.func.isRequired,
path: PropTypes.string.isRequired,
...TabBarAction.propTypes,
};
static defaultProps = TabBarAction.defaultProps;
/**
* Handles the click action.
*/
handleClick = () => {
this.props.navigate({ pathname: FAVORITES_PATH });
};
/**
* Renders the component.
* @return {JSX}
*/
render() {
const { label, favoritesCount } = this.props;
const ariaLabel = `${i18n.text(label)}. ${i18n.text('common.products')}: ${favoritesCount}.`;
return (
<Fragment>
<Portal
name={portals.TAB_BAR_FAVORITES_BEFORE}
props={{
...this.props,
TabBarAction,
}}
/>
<Portal
name={portals.TAB_BAR_FAVORITES}
props={{
...this.props,
TabBarAction,
}}
>
<TabBarAction
{...this.props}
aria-label={ariaLabel}
icon={(
<Portal name={portals.TAB_BAR_FAVORITES_ICON}>
<FavoritesIcon className={styles} />
</Portal>
)}
onClick={this.handleClick}
>
<FavoritesIconBadge />
</TabBarAction>
</Portal>
<Portal
name={portals.TAB_BAR_FAVORITES_AFTER}
props={{
...this.props,
TabBarAction,
}}
/>
</Fragment>
);
}
}
export default connect(connectBadge(TabBarFavoritesAction));