calcite-react
Version:
Calcite components for React
249 lines (198 loc) • 9.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _moment = _interopRequireDefault(require("moment"));
require("react-dates/lib/css/_datepicker.css");
var _DatePickerStyled = require("./DatePicker-styled");
require("react-dates/initialize");
var _reactDates = require("react-dates");
var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
var _Menu = require("../Menu");
var _CalendarIcon = _interopRequireDefault(require("calcite-ui-icons-react/CalendarIcon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
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; }
var DatePicker = function DatePicker(_ref) {
var field = _ref.field,
form = _ref.form,
onFocusChange = _ref.onFocusChange,
onDateChange = _ref.onDateChange,
disabled = _ref.disabled,
name = _ref.name,
value = _ref.value,
children = _ref.children,
monthYearSelectionMode = _ref.monthYearSelectionMode,
yearSelectDates = _ref.yearSelectDates,
hideKeyboardShortcutsPanel = _ref.hideKeyboardShortcutsPanel,
numberOfMonths = _ref.numberOfMonths,
hideInputIcon = _ref.hideInputIcon,
other = _objectWithoutProperties(_ref, ["field", "form", "onFocusChange", "onDateChange", "disabled", "name", "value", "children", "monthYearSelectionMode", "yearSelectDates", "hideKeyboardShortcutsPanel", "numberOfMonths", "hideInputIcon"]);
var touched, isSubmitting, setFieldValue, setTouched;
if (field) {
value = field.value;
name = field.name;
touched = form.touched;
isSubmitting = form.isSubmitting;
setFieldValue = form.setFieldValue;
setTouched = form.setTouched;
}
var _onDateChange = function _onDateChange(date) {
if (setFieldValue) {
setFieldValue(name, date);
}
if (onDateChange) {
onDateChange(date);
}
};
var _onFocusChange = function _onFocusChange(options) {
if (setTouched && !options.focused) {
setTouched(_objectSpread({}, touched, _defineProperty({}, name, true)));
}
if (onFocusChange) {
onFocusChange(options);
}
};
var getHeaderEl = function getHeaderEl(_ref2) {
var month = _ref2.month,
onMonthSelect = _ref2.onMonthSelect,
onYearSelect = _ref2.onYearSelect;
var weekdays = _moment.default.weekdaysMin();
return _react.default.createElement(_DatePickerStyled.StyledMonthElContainer, null, _react.default.createElement(_DatePickerStyled.StyledMonthYearSelectContainer, null, getMonthEl({
month: month,
onMonthSelect: onMonthSelect
}), getYearEl({
month: month,
onYearSelect: onYearSelect
})), _react.default.createElement(_DatePickerStyled.StyledWeekDayList, null, weekdays.map(function (day) {
return _react.default.createElement(_DatePickerStyled.StyledWeekDay, {
key: day
}, day);
})));
};
var getMonthEl = function getMonthEl(_ref3) {
var month = _ref3.month,
onMonthSelect = _ref3.onMonthSelect;
if (monthYearSelectionMode === 'NONE') {
return _react.default.createElement(_DatePickerStyled.StyledMonthYearHeader, null, month.format('MMMM'));
}
return _react.default.createElement(_DatePickerStyled.StyledMonthSelect, {
selectedValue: month.month(),
renderValue: function renderValue(selectedItem) {
return getMonthRenderValue(selectedItem, month);
},
onChange: function onChange(value) {
onMonthSelect(month, value);
}
}, _moment.default.months().map(function (label, value) {
return _react.default.createElement(_Menu.MenuItem, {
value: value,
key: value
}, label);
}));
};
var getMonthRenderValue = function getMonthRenderValue(selectedItem, month) {
if (monthYearSelectionMode === 'MONTH') {
return "".concat(selectedItem && selectedItem.props.children, " ").concat(month.year());
}
return selectedItem && selectedItem.props.children;
};
var getYearEl = function getYearEl(_ref4) {
var month = _ref4.month,
onYearSelect = _ref4.onYearSelect;
if (monthYearSelectionMode === 'MONTH_YEAR') {
return _react.default.createElement(_DatePickerStyled.StyledYearSelect, {
selectedValue: month.year(),
onChange: function onChange(value) {
onYearSelect(month, value);
}
}, getYears(month.year()));
}
if (monthYearSelectionMode === 'NONE') {
return _react.default.createElement(_DatePickerStyled.StyledMonthYearHeader, null, month.year());
}
};
var getYears = function getYears(year) {
var yearAdded = false;
var yearsArr = [];
for (var currentYear = yearSelectDates.endYear; yearSelectDates.startYear <= currentYear; currentYear--) {
if (currentYear === year) {
yearAdded = true;
}
yearsArr.push(_react.default.createElement(_Menu.MenuItem, {
value: currentYear,
key: currentYear
}, currentYear));
}
if (!yearAdded) {
yearsArr.unshift(_react.default.createElement(_Menu.MenuItem, {
value: year,
key: year
}, year));
yearsArr.sort(function (a, b) {
if (a.props.value < b.props.value) return 1;
if (a.props.value > b.props.value) return -1;
return 0;
});
}
return yearsArr;
};
return _react.default.createElement(_DatePickerStyled.StyledDatePickerContainer, {
hideDoWHeader: monthYearSelectionMode !== 'NONE'
}, _react.default.createElement(_reactDates.SingleDatePicker, _extends({
date: value,
onDateChange: _onDateChange,
onFocusChange: _onFocusChange,
disabled: isSubmitting || disabled,
renderMonthElement: getHeaderEl,
hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
numberOfMonths: numberOfMonths,
customInputIcon: hideInputIcon ? undefined : _react.default.createElement(_CalendarIcon.default, {
size: "16"
})
}, other)));
};
DatePicker.propTypes = {
/** The currently selected moment date object for the component. */
date: _reactMomentProptypes.default.momentObj,
/** Callback function when the selected date is changed. */
onDateChange: _propTypes.default.func.isRequired,
/** Describe whether the DatePicker is currently focused; displays the calendar dropdown. */
focused: _propTypes.default.bool,
/** Callback function when the focus state of the DatePicker is changed. */
onFocusChange: _propTypes.default.func.isRequired,
/** Placeholder text for the DatePicker text field. */
placeholder: _propTypes.default.string,
/** An id supplied to the DatePicker. */
id: _propTypes.default.string.isRequired,
/** Determine if year and/or month dropdowns should be shown in the calendar popup */
monthYearSelectionMode: _propTypes.default.oneOf(['NONE', 'MONTH', 'MONTH_YEAR']),
/** The years that will be used to populate the year dropdown menu */
yearSelectDates: _propTypes.default.shape({
startYear: _propTypes.default.number,
endYear: _propTypes.default.number
}),
/** The number of months to show in the popup */
numberOfMonths: _propTypes.default.number,
/** Toggle visibility of the calendar icon in the input */
hideInputIcon: _propTypes.default.bool
};
DatePicker.defaultProps = {
placeholder: 'Date',
monthYearSelectionMode: 'NONE',
yearSelectDates: {
startYear: new _moment.default().subtract(50, 'year').year(),
endYear: new _moment.default().year()
},
hideKeyboardShortcutsPanel: true,
numberOfMonths: 1
};
DatePicker.displayName = 'DatePicker';
var _default = DatePicker;
exports.default = _default;