@up-group-ui/react-controls
Version:
Up shared react controls
202 lines • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpDate = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
require("normalize.css/normalize.css");
require("react-dates/initialize");
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var eventListener_1 = require("../../../Common/utils/eventListener");
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var react_dates_1 = require("react-dates");
var helpers_1 = require("../../../Common/utils/helpers");
var fr_1 = (0, tslib_1.__importDefault)(require("./i18n/fr"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var utils_1 = require("../../../Common/utils");
var styles_1 = (0, tslib_1.__importDefault)(require("./styles"));
var typestyle_1 = require("typestyle");
var Select_1 = (0, tslib_1.__importDefault)(require("../Select"));
var helpers_2 = require("../../../Common/utils/helpers");
var types_1 = require("../../../Common/utils/types");
var react_addons_update_1 = (0, tslib_1.__importDefault)(require("react-addons-update"));
moment_1.default.locale('fr');
var MIN_DATE = new Date(-8640000000000);
var MAX_DATE = new Date(+8640000000000);
var UpDate = (function (_super) {
(0, tslib_1.__extends)(UpDate, _super);
function UpDate(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onChange = function (startDate, endDate) {
var value = startDate;
if (!(value instanceof moment_1.default) && (0, moment_1.default)(value, _this.props.format, true).isValid()) {
value = (0, moment_1.default)(value);
}
if ((0, moment_1.default)(value, _this.props.format, true).isValid()) {
var isOutsideRange = _this.props.isOutsideRange || _this.defaultIsOutsideRange;
if (isOutsideRange(value)) {
value = null;
}
_this.handleChangeEvent((0, eventListener_1.eventFactory)(_this.props.name, value), value);
}
else {
_this.handleChangeEvent((0, eventListener_1.eventFactory)(_this.props.name, null), null);
}
};
_this.setInput = function (input) {
if (_this.dateInput == undefined) {
_this.dateInput = input;
if (_this.props.tabIndex) {
_this.dateInput.setAttribute('tabindex', _this.props.tabIndex);
}
}
};
_this.onFocusChange = function (_a) {
var focused = _a.focused;
if (focused) {
_this.onFocus((0, eventListener_1.eventFactory)('focus', true));
}
else {
_this.onBlur((0, eventListener_1.eventFactory)('blur', true));
setTimeout(function () {
_this.resetDateInputValue();
}, 100);
}
};
_this.returnYears = function () {
var years = [];
for (var i = (0, moment_1.default)().year() - 100; i <= (0, moment_1.default)().year(); i++) {
years.push({
id: i,
text: i,
});
}
years = years.sort(function (a, b) { return b.id - a.id; });
return years;
};
_this.formatMonth = function (month) { return (month + 1 < 10 ? "0" + (month + 1) : "" + (month + 1)); };
_this.resetDateInputValue = function (force) {
if (force === void 0) { force = false; }
if (force === true || !_this.currentValue) {
var newState_1 = (0, react_addons_update_1.default)(_this.state, {
extra: { reset: { $set: true } },
});
_this.setState(newState_1, function () {
newState_1 = (0, react_addons_update_1.default)(_this.state, {
extra: { reset: { $set: false } },
});
_this.setState(newState_1);
});
}
};
_this.onCloseCalendar = function (_a) {
var date = _a.date;
if (date == null) {
_this.resetDateInputValue();
}
};
_this.renderMonthElement = function (_a) {
var month = _a.month, onMonthSelect = _a.onMonthSelect, onYearSelect = _a.onYearSelect;
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: {
width: '100%',
display: 'flex',
justifyContent: 'center',
flexShrink: 2,
} }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ style: { width: '30%' } }, { children: (0, jsx_runtime_1.jsx)(Select_1.default, { value: {
id: month.month(),
text: _this.formatMonth(month.month()),
}, menuPlacement: "bottom", data: moment_1.default.months().map(function (label, value) { return ({
id: value,
text: label,
}); }), tooltip: moment_1.default.months().find(function (label, value) { return value == month.month(); }), onChange: function (e) {
onMonthSelect(month, e.target.value.id);
} }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, typestyle_1.style)({ width: '40%' }) }, { children: (0, jsx_runtime_1.jsx)(Select_1.default, { data: _this.returnYears(), menuPlacement: "bottom", value: { id: month.year(), text: month.year() }, isSearchable: true, onChange: function (e) { return onYearSelect(month, e.target.value.id); } }, void 0) }), void 0)] }), void 0));
};
_this.defaultIsOutsideRange = function (day) {
var _day = day;
if (day instanceof Date) {
_day = (0, moment_1.default)(day);
}
var maxDate = _this.props.maxDate;
if (maxDate instanceof moment_1.default) {
maxDate = maxDate.startOf('day');
}
else if (maxDate instanceof Date) {
maxDate = maxDate.setHours(0, 0, 0, 0);
}
var minDate = _this.props.minDate;
if (minDate instanceof moment_1.default) {
minDate = minDate.startOf('day');
}
else if (minDate instanceof Date) {
minDate = minDate.setHours(0, 0, 0, 0);
}
return ((maxDate && _day.toDate().setHours(0, 0, 0, 0) > maxDate) ||
(minDate && _day.toDate().setHours(0, 0, 0, 0) < minDate));
};
_this.state = { value: _this.props.value };
_this.id = (0, helpers_1.generateUniqueId)();
return _this;
}
UpDate.prototype.showError = function () {
return this.props.showError !== undefined
? typeof this.props.showError === 'function'
? this.props.showError(this.state)
: this.props.showError === true
: this.hasError;
};
UpDate.prototype.showSuccess = function () {
return this.props.showSuccess;
};
UpDate.prototype.checkDate = function (e) {
var event = e.target;
if (event && event.value) {
var value = event.value;
var stringsToNumerics = value.split('/').map(function (stringValue) { return (0, helpers_2.isNumeric)(stringValue); });
var unwantedCharacters = stringsToNumerics.some(function (booleanValue) { return !booleanValue; });
if (unwantedCharacters)
event.value = event.value.replace(/[a-zA-Z\u00C0-\u024F\u1E00-\u1EFF!''$%^&*()_+|~=`{}[\]:\\;<>?,.@#§µ²°]/, '');
}
};
UpDate.prototype.componentDidMount = function () {
this.datePicker = document.getElementById(this.id);
if (this.datePicker) {
this.datePicker.addEventListener('input', this.checkDate);
}
if (this.props['dataFor'] && this.datePicker) {
this.datePicker.setAttribute('data-tip', 'tooltip');
this.datePicker.setAttribute('data-for', this.props['dataFor']);
}
};
UpDate.prototype.componentWillUnmount = function () {
if (this.datePicker)
this.datePicker.removeEventListener('input', this.checkDate);
};
UpDate.prototype.getValue = function (newDate) {
return newDate;
};
UpDate.prototype.renderControl = function () {
var _a = this.props, disabled = _a.disabled, minDate = _a.minDate, maxDate = _a.maxDate, floatingLabel = _a.floatingLabel, placeholder = _a.placeholder, iconPosition = _a.iconPosition;
if (this.state.extra && this.state.extra.reset) {
return null;
}
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.default)((0, tslib_1.__assign)({ focused: this.isFocused }, this.props)), 'up-date', this.isFocused ? 'up-input-focused' : null, !(0, utils_1.isEmpty)(this.currentValue) ? 'up-input-valued' : null) }, (0, types_1.getTestableComponentProps)(this.props), { children: [floatingLabel && (0, jsx_runtime_1.jsx)("label", (0, tslib_1.__assign)({ htmlFor: this.id }, { children: floatingLabel }), void 0), (0, jsx_runtime_1.jsx)(react_dates_1.SingleDatePicker, { customInputIcon: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: "calendar", width: "15px", height: "15px" }, void 0), enableOutsideDays: this.props.enableOutsideDays, renderMonthElement: this.props.numberOfMonths == 1 ? this.renderMonthElement : null, numberOfMonths: this.props.numberOfMonths, focused: this.isFocused, onFocusChange: this.onFocusChange, placeholder: floatingLabel ? '' : placeholder, date: this.currentValue, onDateChange: this.onChange, id: this.id, disabled: disabled || this.props.readonly, showClearDate: !this.props.readonly, showDefaultInputIcon: true, noBorder: false, screenReaderInputMessage: floatingLabel ? floatingLabel : placeholder ? placeholder : 'Date', ref: this.setInput, keepOpenOnDateSelect: false, hideKeyboardShortcutsPanel: true, phrases: fr_1.default, isDayBlocked: function (day) { return false; }, inputIconPosition: iconPosition == 'right' ? 'after' : 'before', isOutsideRange: this.props.isOutsideRange || this.defaultIsOutsideRange, daySize: this.props.daySize, onClose: this.onCloseCalendar }, void 0)] }), void 0));
};
UpDate.defaultProps = {
format: 'DD/MM/YYYY',
showError: true,
theme: theming_1.default,
minDate: MIN_DATE,
maxDate: MAX_DATE,
iconPosition: 'right',
numberOfMonths: 2,
enableOutsideDays: true,
daySize: 30,
};
return UpDate;
}(BaseControl_1.BaseControlComponent));
exports.UpDate = UpDate;
exports.default = (0, withTheme_1.default)(UpDate);
//# sourceMappingURL=UpDate.js.map