@braineet/ui
Version:
Braineet design system
118 lines (116 loc) • 6.18 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
var _modal = require("../modal");
var _DatePickerHeader = _interopRequireDefault(require("./components/DatePickerHeader"));
var _DatePickerInput = _interopRequireDefault(require("./components/DatePickerInput"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["value", "onChange", "placement", "locale", "placeholder", "portalId", "monthsShown", "customInput", "field", "form", "onCalendarClose", "shouldCloseOnSelect", "inputProps"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**
* https://reactdatepicker.com/
* PropTypes: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L134
*/
var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
var v = _ref.value,
onChange = _ref.onChange,
placement = _ref.placement,
locale = _ref.locale,
placeholder = _ref.placeholder,
portalId = _ref.portalId,
monthsShown = _ref.monthsShown,
customInput = _ref.customInput,
field = _ref.field,
form = _ref.form,
onCalendarClose = _ref.onCalendarClose,
shouldCloseOnSelect = _ref.shouldCloseOnSelect,
inputProps = _ref.inputProps,
restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
var value = (field == null ? void 0 : field.value) || v;
var modal = (0, _modal.useModalContext)();
var _useState = (0, _react.useState)(value),
date = _useState[0],
setDate = _useState[1];
var _useState2 = (0, _react.useState)('days'),
mode = _useState2[0],
setMode = _useState2[1];
var _useState3 = (0, _react.useState)(date),
displayDate = _useState3[0],
setDisplayDate = _useState3[1];
var datePickerRef = (0, _react.useRef)();
_react.default.useImperativeHandle(ref, function () {
return datePickerRef.current;
});
var focusInput = (0, _react.useCallback)(function () {
var _datePickerRef$curren;
(_datePickerRef$curren = datePickerRef.current) == null ? void 0 : _datePickerRef$curren.setFocus();
}, [datePickerRef]);
(0, _react.useEffect)(function () {
setDate(value);
}, [value]);
var handleChangeMode = function handleChangeMode(m) {
setMode(function (prevMode) {
if (prevMode === m) return 'days';
return m;
});
};
var resetMode = function resetMode() {
return handleChangeMode('days');
};
var handleChange = function handleChange(dateValue) {
if (mode === 'days') {
if (field && form) form.setFieldValue(field.name, dateValue);else setDate(dateValue);
if (onChange) onChange(dateValue);
} else {
setDisplayDate(dateValue);
resetMode();
}
};
var handleCalendarClose = function handleCalendarClose() {
if (onCalendarClose) onCalendarClose();
if (mode !== 'days') resetMode();
};
var inputComponent = customInput || /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerInput.default, _extends({
focusInput: focusInput
}, inputProps));
var portalID = portalId || (modal == null ? void 0 : modal.modalID);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, _extends({
ref: datePickerRef,
selected: date,
onChange: handleChange,
showMonthYearPicker: mode === 'month',
showFourColumnMonthYearPicker: true,
showYearPicker: mode === 'year',
customInput: inputComponent,
locale: locale,
renderCustomHeader: function renderCustomHeader(p) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerHeader.default, _extends({
handleChangeMode: handleChangeMode,
monthsShown: mode === 'days' ? monthsShown : 1,
display: displayDate,
locale: locale,
mode: mode
}, p));
},
calendarStartDay: 1,
onCalendarClose: handleCalendarClose,
monthsShown: mode === 'days' ? monthsShown : 1,
placeholderText: placeholder,
popperPlacement: placement,
showPopperArrow: false,
shouldCloseOnSelect: shouldCloseOnSelect && !['month', 'year'].includes(mode),
portalId: portalID
}, restProps));
});
DatePicker.defaultProps = {
placement: 'bottom-end',
shouldCloseOnSelect: true
};
var _default = /*#__PURE__*/_react.default.memo(DatePicker);
exports.default = _default;