Skip to content

Commit d08d0ec

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #263 from rvsia/fix-datetimepicket-angle-buttons
fix(pf3): datetimepickers buttons do not show texts
2 parents 89735af + 773042e commit d08d0ec

File tree

4 files changed

+52
-44
lines changed

4 files changed

+52
-44
lines changed

‎packages/pf3-component-mapper/src/form-fields/date-time-picker/intervals.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { Icon } from 'patternfly-react';
3+
4+
export const PrevInterval = (props) => <td { ...props } >
5+
<Icon name="angle-left" aria-label="Prev interval" />
6+
</td>;
7+
8+
export const NextInterval = (props) => <td { ...props } >
9+
<Icon name="angle-right" aria-label="Next interval" />
10+
</td>;

‎packages/pf3-component-mapper/src/form-fields/date-time-picker/navbar.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Icon } from 'patternfly-react';
43
import MomentLocaleUtils from 'react-day-picker/moment';
54
import './date-picker-styles.scss';
5+
import { NextInterval, PrevInterval } from './intervals';
66

77
const Navbar = ({ onNextClick, onPreviousClick, month, onMonthClick, isYear, toggleSelectingYear, locale, disablePrev, disableNext }) => (
88
<table className="year-interval-header">
99
<tbody>
1010
<tr>
11-
<td className={ disablePrev ? 'disabled' : '' } onMouseDown={ () => !disablePrev && onPreviousClick() }>
12-
<Icon name="angle-left"><span>Prev interval</span></Icon>
13-
</td>
11+
<PrevInterval className={ disablePrev ? 'disabled' : '' } onMouseDown={ () => !disablePrev && onPreviousClick() }/>
1412
<td>
1513
{ isYear
1614
? <button className="navbar-center-button" type="button" onClick={ () => toggleSelectingYear(true) }>{ month.getFullYear() }</button>
@@ -24,9 +22,7 @@ const Navbar = ({ onNextClick, onPreviousClick, month, onMonthClick, isYear, tog
2422
</button>
2523
) }
2624
</td>
27-
<td className={ disableNext ? 'disabled' : '' } onMouseDown={ () =>!disableNext && onNextClick() }>
28-
<Icon name="angle-right" ><span>Next interval</span></Icon>
29-
</td>
25+
<NextInterval className={ disableNext ? 'disabled' : '' } onMouseDown={ () =>!disableNext && onNextClick() }/>
3026
</tr>
3127
</tbody>
3228
</table>

‎packages/pf3-component-mapper/src/form-fields/date-time-picker/year-selector.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import React from 'react';
2-
import { Icon } from 'patternfly-react';
32
import PropTypes from 'prop-types';
43
import './date-picker-styles.scss';
4+
import { PrevInterval, NextInterval } from './intervals';
55

66
const YearIntervalSelector = ({ currentInterval, prevInterval, nextInterval }) => (
77
<table className="year-interval-header">
88
<tbody>
99
<tr>
10-
<td onClick={ prevInterval }>
11-
<Icon name="angle-left"><span>Prev interval</span></Icon>
12-
</td>
10+
<PrevInterval onClick={ prevInterval }/>
1311
<td>
1412
<button className="year-interval-button" disabled>{ `${currentInterval[0]} - ${currentInterval[1]}` }</button>
1513
</td>
16-
<td onClick={ nextInterval }>
17-
<Icon name="angle-right" ><span>Next interval</span></Icon>
18-
</td>
14+
<NextInterval onClick={ nextInterval }/>
1915
</tr>
2016
</tbody>
2117
</table>

‎packages/pf3-component-mapper/src/tests/form-fields/date-time-picker/__snapshots__/year-selector.test.js.snap

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,30 @@ exports[`<YearSelector /> should render correctly 1`] = `
2929
>
3030
<tbody>
3131
<tr>
32-
<td
32+
<PrevInterval
3333
onClick={[Function]}
3434
>
35-
<Icon
36-
name="angle-left"
37-
type="fa"
35+
<td
36+
onClick={[Function]}
3837
>
39-
<FontAwesome
38+
<Icon
39+
aria-label="Prev interval"
4040
name="angle-left"
41+
type="fa"
4142
>
42-
<span
43-
aria-hidden={true}
44-
className="fa fa-angle-left"
43+
<FontAwesome
44+
aria-label="Prev interval"
45+
name="angle-left"
4546
>
46-
<span>
47-
Prev interval
48-
</span>
49-
</span>
50-
</FontAwesome>
51-
</Icon>
52-
</td>
47+
<span
48+
aria-hidden={true}
49+
aria-label="Prev interval"
50+
className="fa fa-angle-left"
51+
/>
52+
</FontAwesome>
53+
</Icon>
54+
</td>
55+
</PrevInterval>
5356
<td>
5457
<button
5558
className="year-interval-button"
@@ -58,27 +61,30 @@ exports[`<YearSelector /> should render correctly 1`] = `
5861
2000 - 2019
5962
</button>
6063
</td>
61-
<td
64+
<NextInterval
6265
onClick={[Function]}
6366
>
64-
<Icon
65-
name="angle-right"
66-
type="fa"
67+
<td
68+
onClick={[Function]}
6769
>
68-
<FontAwesome
70+
<Icon
71+
aria-label="Next interval"
6972
name="angle-right"
73+
type="fa"
7074
>
71-
<span
72-
aria-hidden={true}
73-
className="fa fa-angle-right"
75+
<FontAwesome
76+
aria-label="Next interval"
77+
name="angle-right"
7478
>
75-
<span>
76-
Next interval
77-
</span>
78-
</span>
79-
</FontAwesome>
80-
</Icon>
81-
</td>
79+
<span
80+
aria-hidden={true}
81+
aria-label="Next interval"
82+
className="fa fa-angle-right"
83+
/>
84+
</FontAwesome>
85+
</Icon>
86+
</td>
87+
</NextInterval>
8288
</tr>
8389
</tbody>
8490
</table>

0 commit comments

Comments
 (0)