Skip to content

Commit cad4151

Browse files
arthurdennerarthurdenner
committed
feat(inputs): Adding support to firstDayOfWeek and custom monthNames and weekdayNames
1 parent b71f68d commit cad4151

File tree

7 files changed

+154
-34
lines changed

7 files changed

+154
-34
lines changed

‎src/components/calendar/calendar.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,21 @@ import { Segment } from 'semantic-ui-react';
44
import Button, { TodayButton } from '../button';
55
import CalendarCell from '../cell';
66
import { getToday } from '../../utils';
7-
import { monthNamesShort, weekdayNamesShort } from '../../data';
87
import 'semantic-ui-css/semantic.min.css';
98
import './calendar.css';
109

1110
const Calendar = ({
12-
minDate,
11+
calendars,
12+
getBackProps,
13+
getDateProps,
14+
getForwardProps,
1315
maxDate,
16+
minDate,
17+
monthNames,
1418
selected,
1519
selectedClassName,
1620
showToday,
17-
calendars,
18-
getBackProps,
19-
getForwardProps,
20-
getDateProps,
21+
weekdayNames,
2122
}) => (
2223
<Segment className="clndr-calendars-segment">
2324
<div
@@ -48,8 +49,11 @@ const Calendar = ({
4849
)}
4950
</div>
5051

51-
<span className="clndr-control-month">
52-
{monthNamesShort[calendar.month]} {calendar.year}
52+
<span
53+
className="clndr-control-month"
54+
title={`${monthNames[calendar.month]} ${calendar.year}`}
55+
>
56+
{monthNames[calendar.month].slice(0, 3)} {calendar.year}
5357
</span>
5458

5559
<div
@@ -74,11 +78,12 @@ const Calendar = ({
7478
</div>
7579
</div>
7680
<div className="clndr-days">
77-
{weekdayNamesShort.map(weekday => (
81+
{weekdayNames.map(weekday => (
7882
<CalendarCell
7983
key={`${calendar.year}-${calendar.month}-${weekday}`}
84+
title={weekday}
8085
>
81-
{weekday}
86+
{weekday.slice(0, 2)}
8287
</CalendarCell>
8388
))}
8489
{calendar.weeks.map(week =>
@@ -123,16 +128,18 @@ Calendar.propTypes = {
123128
getForwardProps: PropTypes.func.isRequired,
124129
maxDate: PropTypes.instanceOf(Date),
125130
minDate: PropTypes.instanceOf(Date),
131+
monthNames: PropTypes.array.isRequired,
126132
onDateSelected: PropTypes.func,
127133
selected: PropTypes.instanceOf(Date),
128134
selectedClassName: PropTypes.string,
129135
showToday: PropTypes.bool,
136+
weekdayNames: PropTypes.array.isRequired,
130137
};
131138

132139
Calendar.defaultProps = {
133-
onDateSelected: () => {},
134140
maxDate: null,
135141
minDate: null,
142+
onDateSelected: () => {},
136143
showToday: true,
137144
};
138145

‎src/data.js‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,27 @@ export const semanticInputProps = [
1111
'transparent',
1212
];
1313

14-
export const monthNamesShort = [
15-
'Jan',
16-
'Feb',
17-
'Mar',
18-
'Apr',
14+
export const monthNamesEng = [
15+
'January',
16+
'February',
17+
'March',
18+
'April',
1919
'May',
20-
'Jun',
21-
'Jul',
22-
'Aug',
23-
'Sep',
24-
'Oct',
25-
'Nov',
26-
'Dec',
20+
'June',
21+
'July',
22+
'August',
23+
'September',
24+
'October',
25+
'November',
26+
'December',
2727
];
2828

29-
export const weekdayNamesShort = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
29+
export const weekdayNamesEng = [
30+
'Sunday',
31+
'Monday',
32+
'Tuesday',
33+
'Wednesday',
34+
'Thursday',
35+
'Friday',
36+
'Saturday',
37+
];

‎src/inputs/range.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Input } from 'semantic-ui-react';
4-
import { formatDate, omit, pick } from '../utils';
5-
import { semanticInputProps } from '../data';
4+
import { formatDate, omit, pick, moveElementsByN } from '../utils';
5+
import { monthNamesEng, semanticInputProps, weekdayNamesEng } from '../data';
66
import Calendar from '../components/calendar';
77
import RangeDatePicker from '../dayzed-pickers/RangeDatePicker';
88
import BaseInput from './index';
@@ -17,14 +17,18 @@ class RangeInput extends BaseInput {
1717
static propTypes = {
1818
date: PropTypes.instanceOf(Date),
1919
format: PropTypes.string,
20+
monthNames: PropTypes.array,
2021
onDateChange: PropTypes.func.isRequired,
2122
placeholder: PropTypes.string,
23+
weekdayNames: PropTypes.array,
2224
};
2325

2426
static defaultProps = {
2527
date: undefined,
2628
format: 'YYYY-MM-DD',
29+
monthNames: monthNamesEng,
2730
placeholder: null,
31+
weekdayNames: weekdayNamesEng,
2832
};
2933

3034
state = initialState;
@@ -68,9 +72,16 @@ class RangeInput extends BaseInput {
6872
};
6973
}
7074

75+
get weekdayNames() {
76+
const { firstDayOfWeek } = this.dayzedProps;
77+
const { weekdayNames } = this.props;
78+
79+
return moveElementsByN(firstDayOfWeek, weekdayNames);
80+
}
81+
7182
render() {
7283
const { isVisible, selectedDate, selectedDateFormatted } = this.state;
73-
const { date } = this.props;
84+
const { date, monthNames } = this.props;
7485

7586
return (
7687
<div
@@ -94,7 +105,13 @@ class RangeInput extends BaseInput {
94105
selected={selectedDate}
95106
date={date}
96107
>
97-
{props => <Calendar {...props} />}
108+
{props => (
109+
<Calendar
110+
{...props}
111+
monthNames={monthNames}
112+
weekdayNames={this.weekdayNames}
113+
/>
114+
)}
98115
</RangeDatePicker>
99116
)}
100117
</div>

‎src/inputs/simple.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { Input } from 'semantic-ui-react';
4-
import { formatDate, omit, pick } from '../utils';
5-
import { semanticInputProps } from '../data';
4+
import { formatDate, omit, pick, moveElementsByN } from '../utils';
5+
import { monthNamesEng, semanticInputProps, weekdayNamesEng } from '../data';
66
import Calendar from '../components/calendar';
77
import DatePicker from '../dayzed-pickers/DatePicker';
88
import BaseInput from './index';
@@ -17,14 +17,18 @@ class SimpleInput extends BaseInput {
1717
static propTypes = {
1818
date: PropTypes.instanceOf(Date),
1919
format: PropTypes.string,
20+
monthNames: PropTypes.array,
2021
onDateChange: PropTypes.func.isRequired,
2122
placeholder: PropTypes.string,
23+
weekdayNames: PropTypes.array,
2224
};
2325

2426
static defaultProps = {
2527
date: undefined,
2628
format: 'YYYY-MM-DD',
29+
monthNames: monthNamesEng,
2730
placeholder: null,
31+
weekdayNames: weekdayNamesEng,
2832
};
2933

3034
state = initialState;
@@ -63,9 +67,16 @@ class SimpleInput extends BaseInput {
6367
};
6468
}
6569

70+
get weekdayNames() {
71+
const { firstDayOfWeek } = this.dayzedProps;
72+
const { weekdayNames } = this.props;
73+
74+
return moveElementsByN(firstDayOfWeek, weekdayNames);
75+
}
76+
6677
render() {
6778
const { isVisible, selectedDate, selectedDateFormatted } = this.state;
68-
const { date } = this.props;
79+
const { date, monthNames } = this.props;
6980

7081
return (
7182
<div
@@ -88,7 +99,13 @@ class SimpleInput extends BaseInput {
8899
selected={selectedDate}
89100
date={selectedDate || date}
90101
>
91-
{props => <Calendar {...props} />}
102+
{props => (
103+
<Calendar
104+
{...props}
105+
monthNames={monthNames}
106+
weekdayNames={this.weekdayNames}
107+
/>
108+
)}
92109
</DatePicker>
93110
)}
94111
</div>

‎src/utils/__tests__/index.test.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { weekdayNamesEng } from '../../data';
2+
import { moveElementsByN } from '../index';
3+
4+
describe('moveElementsByN', () => {
5+
it('should return the same array if `n` is zero', () => {
6+
expect(moveElementsByN(0, weekdayNamesEng)).toEqual(weekdayNamesEng);
7+
});
8+
9+
it('should return the correct array if `n` is different than zero', () => {
10+
expect(moveElementsByN(3, weekdayNamesEng)).toEqual([
11+
'Wednesday',
12+
'Thursday',
13+
'Friday',
14+
'Saturday',
15+
'Sunday',
16+
'Monday',
17+
'Tuesday',
18+
]);
19+
20+
expect(moveElementsByN(5, weekdayNamesEng)).toEqual([
21+
'Friday',
22+
'Saturday',
23+
'Sunday',
24+
'Monday',
25+
'Tuesday',
26+
'Wednesday',
27+
'Thursday',
28+
]);
29+
});
30+
});

‎src/utils/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,6 @@ export const pick = (keysToPick, obj) => {
4545

4646
return newObj;
4747
};
48+
49+
export const moveElementsByN = (n = 0, arr = []) =>
50+
arr.slice(n).concat(arr.slice(0, n));

‎stories/index.js‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,56 @@ import { storiesOf } from '@storybook/react';
33
import Range from '../src/inputs/range';
44
import Simple from '../src/inputs/simple';
55

6+
const brazilianMonths = [
7+
'Janeiro',
8+
'Fevereiro',
9+
'Março',
10+
'Abril',
11+
'Maio',
12+
'Junho',
13+
'Julho',
14+
'Agosto',
15+
'Setembro',
16+
'Outubro',
17+
'Novembro',
18+
'Dezembro',
19+
];
20+
21+
const brazilianWeek = [
22+
'Domingo',
23+
'Segunda',
24+
'Terça',
25+
'Quarta',
26+
'Quinta',
27+
'Sexta',
28+
'Sábado',
29+
];
30+
631
storiesOf('Examples', module)
732
.add('Simple', () => <Simple onDateChange={console.log} />)
33+
.add('Simple with firstDayOfWeek', () => (
34+
<Simple firstDayOfWeek={3} onDateChange={console.log} />
35+
))
836
.add('Simple with outside days', () => (
937
<Simple showOutsideDays onDateChange={console.log} />
1038
))
11-
.add('Simple with custom format prop', () => (
39+
.add('Simple with format prop', () => (
1240
<Simple format="DD/MM/YYYY" onDateChange={console.log} />
1341
))
1442
.add('Range', () => <Range onDateChange={console.log} />)
43+
.add('Range with firstDayOfWeek', () => (
44+
<Range firstDayOfWeek={6} onDateChange={console.log} />
45+
))
1546
.add('Range with outside days', () => (
1647
<Range showOutsideDays onDateChange={console.log} />
1748
))
18-
.add('Range with custom format prop', () => (
49+
.add('Range with format prop', () => (
1950
<Range format="DD/MM/YYYY" onDateChange={console.log} />
51+
))
52+
.add('Simple with brazilian labels', () => (
53+
<Simple
54+
onDateChange={console.log}
55+
monthNames={brazilianMonths}
56+
weekdayNames={brazilianWeek}
57+
/>
2058
));

0 commit comments

Comments
 (0)