UNPKG

@dotconnor/grommet

Version:

focus on the essential experience

47 lines (45 loc) 1.77 kB
import React, { useRef, useState } from 'react'; import { Box, Button, Calendar, Grommet, Text } from 'grommet'; import { grommet } from 'grommet/themes'; export var ActiveDate = function ActiveDate() { var _useState = useState(), datesD = _useState[0], setDatesD = _useState[1]; var _useState2 = useState(undefined), activeDate = _useState2[0], setActiveDate = _useState2[1]; var startDateButton = useRef(); var endDateButton = useRef(); return /*#__PURE__*/React.createElement(Grommet, { theme: grommet, full: true }, /*#__PURE__*/React.createElement(Box, { gap: "small", pad: "large" }, /*#__PURE__*/React.createElement(Box, { direction: "row", gap: "small" }, /*#__PURE__*/React.createElement(Button, { ref: startDateButton, active: activeDate === 'start', label: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, "Start Date"), /*#__PURE__*/React.createElement(Text, null, datesD && datesD[0][0] && new Date(datesD[0][0]).toDateString())), onClick: function onClick() { return setActiveDate('start'); } }), /*#__PURE__*/React.createElement(Button, { ref: endDateButton, active: activeDate === 'end', label: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, "End Date"), /*#__PURE__*/React.createElement(Text, null, datesD && datesD[0][1] && new Date(datesD[0][1]).toDateString())), onClick: function onClick() { return setActiveDate('end'); } })), /*#__PURE__*/React.createElement(Calendar, { activeDate: activeDate, dates: datesD, onSelect: function onSelect(arg) { setDatesD(arg); setActiveDate('end'); }, range: "array" }))); };