diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index 6aa03305..5bc19061 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
import propTypes from 'prop-types';
import styled from 'styled-components';
@@ -58,161 +58,129 @@ function dayIndex(year, month, day) {
return new Date(year, month, day).getDay();
}
-class DatePicker extends Component {
- static propTypes = {
- className: propTypes.string,
- shadow: propTypes.bool,
- onAccept: propTypes.func,
- onCancel: propTypes.func,
- date: propTypes.instanceOf(Date)
- };
-
- static defaultProps = {
- shadow: true,
- className: '',
- onAccept: null,
- onCancel: null,
- date: null
- };
-
- constructor(props) {
- super(props);
-
- const initialDate = this.convertDateToState(props.date || new Date());
- this.state = initialDate;
- }
-
- convertDateToState = date => {
- const day = date.getDate();
- const month = date.getMonth();
- const year = date.getFullYear();
-
- return { day, month, year };
- };
-
- handleMonthSelect = e => this.setState({ month: e.target.value });
-
- handleYearSelect = year => this.setState({ year });
-
- handleDaySelect = day => this.setState({ day });
-
- handleAccept = () => {
- const { year, month, day } = this.state;
- const { onAccept } = this.props;
- const date = new Date(year, month, day);
-
- onAccept(date);
- };
-
- render() {
- let { day } = this.state;
- const { month, year } = this.state;
- const { shadow, className, onAccept, onCancel } = this.props;
-
- const months = [
- { value: 0, label: 'January' },
- { value: 1, label: 'February' },
- { value: 2, label: 'March' },
- { value: 3, label: 'April' },
- { value: 4, label: 'May' },
- { value: 5, label: 'June' },
- { value: 6, label: 'July' },
- { value: 7, label: 'August' },
- { value: 8, label: 'September' },
- { value: 9, label: 'October' },
- { value: 10, label: 'November' },
- { value: 11, label: 'December' }
- ];
-
- // eslint-disable-next-line
- const dayPickerItems = Array.apply(null, { length: 35 });
- const firstDayIndex = dayIndex(year, month, 1);
-
- const daysNumber = daysInMonth(year, month);
- day = day < daysNumber ? day : daysNumber;
- dayPickerItems.forEach((item, i) => {
- if (i >= firstDayIndex && i < daysNumber + firstDayIndex) {
- const dayNumber = i - firstDayIndex + 1;
-
- dayPickerItems[i] = (
- {
+ const { className, shadow, onAccept, onCancel, date } = props;
+
+ const initialDate = date || new Date();
+
+ const [day, setDay] = useState(initialDate.getDate());
+ const [month, setMonth] = useState(initialDate.getMonth());
+ const [year, setYear] = useState(initialDate.getFullYear());
+
+ // eslint-disable-next-line
+ const dayPickerItems = Array.apply(null, { length: 35 });
+ const firstDayIndex = dayIndex(year, month, 1);
+
+ const daysNumber = daysInMonth(year, month);
+
+ dayPickerItems.forEach((_, i) => {
+ if (i >= firstDayIndex && i < daysNumber + firstDayIndex) {
+ const dayNumber = i - firstDayIndex + 1;
+
+ dayPickerItems[i] = (
+ setDay(dayNumber)}>
+
+ {dayNumber}
+
+
+ );
+ } else {
+ dayPickerItems[i] = ;
+ }
+ });
+
+ return (
+
+
+
+ 📆
+
+ Date
+
+
+
+
+
+
+ S
+ M
+ T
+ W
+ T
+ F
+ S
+
+ {dayPickerItems}
+
+
+
- );
- } else {
- dayPickerItems[i] = (
-
- );
- }
- });
-
- return (
-
-
-
- 📆
-
- Date
-
-
-
-
-
-
-
-
- S
- M
- T
- W
- T
- F
- S
-
- {dayPickerItems}
-
-
-
-
-
-
-
- );
- }
-}
+ Cancel
+
+
+
+
+
+ );
+};
+
+DatePicker.defaultProps = {
+ shadow: true,
+ className: '',
+ onAccept: null,
+ onCancel: null,
+ date: null
+};
+
+DatePicker.propTypes = {
+ className: propTypes.string,
+ shadow: propTypes.bool,
+ onAccept: propTypes.func,
+ onCancel: propTypes.func,
+ date: propTypes.instanceOf(Date)
+};
export default DatePicker;
diff --git a/src/DatePicker/DatePicker.spec.js b/src/DatePicker/DatePicker.spec.js
new file mode 100644
index 00000000..eecccd4a
--- /dev/null
+++ b/src/DatePicker/DatePicker.spec.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../test/utils';
+import DatePicker from './DatePicker';
+
+describe('', () => {
+ it('should call onAccept correctly', () => {
+ const handleAccept = jest.fn();
+
+ const { getByTestId } = renderWithTheme(
+
+ );
+
+ const okButton = getByTestId('ok');
+ okButton.click();
+ expect(handleAccept).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call onCancel correctly', () => {
+ const handleCancel = jest.fn();
+
+ const { getByTestId } = renderWithTheme(
+
+ );
+
+ const cancelButton = getByTestId('cancel');
+ cancelButton.click();
+ expect(handleCancel).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/DatePicker/DatePicker.stories.js b/src/DatePicker/DatePicker.stories.js
index e3654574..44d81d16 100644
--- a/src/DatePicker/DatePicker.stories.js
+++ b/src/DatePicker/DatePicker.stories.js
@@ -1,29 +1,30 @@
-// ⭕️ DON'T SHOW DATEPICKER BEFORE IT'S FINISHED AND TESTED ⭕️
+import React from 'react';
+import DatePicker from './DatePicker';
-// import React from 'react';
-// import { DatePicker } from 'react95';
+export default {
+ title: 'DatePicker',
+ component: DatePicker,
+ decorators: [
+ story => (
+
+ {story()}
+
+ )
+ ]
+};
-// export default {
-// title: 'DatePicker',
-// component: DatePicker,
-// decorators: [
-// story => (
-//
-// {story()}
-//
-// )
-// ]
-// };
+export const Default = () => (
+ alert(`selected day is: ${date}`)}
+ onCancel={() => alert('Cancel')}
+ />
+);
-// export const Default = () => (
-// console.log(date)} />
-// );
-
-// Default.story = {
-// name: 'default'
-// };
+Default.story = {
+ name: 'default'
+};