orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
160 lines • 4.29 kB
JavaScript
import React, { useState } from "react";
import DatePicker from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import moment from "moment";
import "react-dates/lib/css/_datepicker.css";
import "react-dates/initialize";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/DatePicker",
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
bg: "greyLightest",
height: "400px",
p: "r",
children: storyFn()
})],
component: DatePicker
};
const SingleDate = () => {
const [date, setDate] = useState(null);
const [focused, setFocused] = useState(false);
const onDateChange = selectedDate => {
setDate(selectedDate);
};
const onFocusChange = el => {
setFocused(el.focused);
};
return /*#__PURE__*/_jsx(DatePicker, {
single: true,
date: date,
placeholder: "Date",
focused: focused,
onDateChange: onDateChange,
onFocusChange: onFocusChange,
numberOfMonths: 1,
displayFormat: "DD/MM/YYYY"
});
};
const InvalidRequiredDate = () => {
const [date, setDate] = useState(null);
const [focused, setFocused] = useState(false);
const onDateChange = selectedDate => {
setDate(selectedDate);
};
const onFocusChange = el => {
setFocused(el.focused);
};
return /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(DatePicker, {
id: "invalid date",
single: true,
label: "Project start date - date required",
required: true,
date: date,
invalid: true,
placeholder: "Date",
focused: focused,
onDateChange: onDateChange,
onFocusChange: onFocusChange,
numberOfMonths: 1,
displayFormat: "DD/MM/YYYY"
})
});
};
const DateRange = () => {
const [dates, setDates] = useState({});
const [focused, setFocused] = useState(null);
const onDatesChange = _ref => {
let {
startDate,
endDate
} = _ref;
setDates({
startDate,
endDate
});
};
return /*#__PURE__*/_jsx(DatePicker, {
range: true,
startDate: dates.startDate,
endDate: dates.endDate,
onDatesChange: onDatesChange,
focusedInput: focused,
onFocusChange: setFocused,
displayFormat: "DD/MM/YYYY"
});
};
const ShowClearDates = () => {
const [date, setDate] = useState(moment()); // Default date for single DatePicker
const [dates, setDates] = useState({
startDate: moment(),
endDate: moment()
}); // Default dates for range DatePicker
const [focused1, setFocused1] = useState(null);
const [focused2, setFocused2] = useState(null);
const onDatesChange = _ref2 => {
let {
startDate,
endDate
} = _ref2;
setDates({
startDate,
endDate
});
};
const onDateChange = selectedDate => {
setDate(selectedDate);
};
const onFocusChange = el => {
setFocused1(el.focused);
setFocused2(el.focused);
};
return /*#__PURE__*/_jsxs(Spacer, {
mb: "l",
children: [/*#__PURE__*/_jsx(DatePicker, {
single: true,
showClearDate: true,
date: date,
placeholder: "Date",
focused: focused1,
onDateChange: onDateChange,
onFocusChange: onFocusChange,
numberOfMonths: 1,
displayFormat: "DD/MM/YYYY"
}), /*#__PURE__*/_jsx(DatePicker, {
range: true,
showClearDates: true,
startDate: dates.startDate,
endDate: dates.endDate,
onDatesChange: onDatesChange,
focusedInput: focused2,
onFocusChange: setFocused2,
displayFormat: "DD/MM/YYYY"
})]
});
};
export const singleDate = () => /*#__PURE__*/_jsx(SingleDate, {});
export const invalidRequiredDate = () => /*#__PURE__*/_jsx(InvalidRequiredDate, {});
export const dateRange = () => /*#__PURE__*/_jsx(DateRange, {});
export const showClearDates = () => /*#__PURE__*/_jsx(ShowClearDates, {});
singleDate.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "singleDate"
};
invalidRequiredDate.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "invalidRequiredDate"
};
dateRange.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "dateRange"
};
showClearDates.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "showClearDates"
};