@braineet/ui
Version:
Braineet design system
120 lines (119 loc) • 6.14 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../button"));
var _datepicker = require("../datepicker");
var _icon = _interopRequireDefault(require("../icon"));
var _RangeDateInput = _interopRequireDefault(require("./RangeDateInput"));
var _RangeDatePicker = require("./RangeDatePicker.styles");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "form", "field", "minDate", "onChange", "disabled", "autoFocus", "endDateProps", "startDateProps"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
var DatePickerRange = function DatePickerRange(_ref) {
var v = _ref.value,
form = _ref.form,
field = _ref.field,
minDate = _ref.minDate,
onChange = _ref.onChange,
disabled = _ref.disabled,
autoFocus = _ref.autoFocus,
endDateProps = _ref.endDateProps,
startDateProps = _ref.startDateProps,
restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var value = (field == null ? void 0 : field.value) || v;
var startRef = (0, _react.useRef)();
var endRef = (0, _react.useRef)();
var _useState = (0, _react.useState)((value == null ? void 0 : value[0]) || null),
startDate = _useState[0],
setStartDate = _useState[1];
var _useState2 = (0, _react.useState)((value == null ? void 0 : value[1]) || null),
endDate = _useState2[0],
setEndDate = _useState2[1];
var focusEnd = _react.default.useCallback(function () {
startRef.current.setOpen(false);
endRef.current.setFocus();
}, [startRef, endRef]);
var focusStart = _react.default.useCallback(function () {
endRef.current.setOpen(false);
startRef.current.setFocus();
}, [startRef, endRef]);
var handleChange = function handleChange(date, start) {
var dates = [(0, _datepicker.convertLocalToUTCDate)(start ? date : startDate), (0, _datepicker.convertLocalToUTCDate)(start ? endDate : date)];
if (start) {
if (date) focusEnd();
if (!value) setStartDate(date || null);
} else if (!value) setEndDate(date || null);
if (onChange) onChange(dates);
if (field != null && field.name && form) form.setFieldValue(field == null ? void 0 : field.name, dates);
};
_react.default.useEffect(function () {
if (value) {
setStartDate(value[0] ? new Date(value[0]) : null);
setEndDate(value[1] ? new Date(value[1]) : null);
}
}, [value]);
var handleKeyDown = function handleKeyDown(e, start) {
if (e.key === 'Tab' && !e.shiftKey && start) {
e.preventDefault();
focusEnd();
}
if (e.key === 'Tab' && e.shiftKey && !start) {
e.preventDefault();
focusStart();
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RangeDatePicker.RangeContainer, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_datepicker.DatePicker, _extends({
ref: startRef,
selected: (0, _datepicker.convertUTCToLocalDate)(startDate),
startDate: (0, _datepicker.convertUTCToLocalDate)(startDate),
endDate: (0, _datepicker.convertUTCToLocalDate)(endDate),
selectsStart: true,
onChange: function onChange(date) {
return handleChange(date, true);
},
onKeyDown: function onKeyDown(e) {
return handleKeyDown(e, true);
},
customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeDateInput.default, _extends({}, startDateProps == null ? void 0 : startDateProps.inputProps)),
minDate: minDate,
autoFocus: autoFocus,
monthsShown: 2,
placement: "bottom-start",
disabled: disabled
}, restProps, startDateProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
name: "arrow_right_small"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_datepicker.DatePicker, _extends({
ref: endRef,
selected: (0, _datepicker.convertUTCToLocalDate)(endDate),
startDate: (0, _datepicker.convertUTCToLocalDate)(startDate),
endDate: (0, _datepicker.convertUTCToLocalDate)(endDate),
selectsEnd: true,
onChange: function onChange(date) {
return handleChange(date, false);
},
onKeyDown: function onKeyDown(e) {
return handleKeyDown(e, false);
},
minDate: startDate || minDate,
customInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeDateInput.default, _extends({}, endDateProps == null ? void 0 : endDateProps.inputProps)),
showPreviousMonths: false,
monthsShown: 2,
placement: "bottom-end",
openToDate: endDate || startDate,
disabled: disabled
}, restProps, endDateProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
tabIndex: "-1",
icon: "date",
onClick: focusStart,
margin: "0 2px",
disabled: disabled
})]
});
};
var _default = exports.default = DatePickerRange;