react-life-design
Version:
Life Design UI components
114 lines • 6.89 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var R = require("ramda");
var Icons_1 = require("../Icons");
var Input_1 = require("../Input");
var Modal_1 = require("../Modal");
var months_enum_1 = require("./utils/months.enum");
var year_1 = require("./utils/year");
var DatePicker_styled_1 = require("./DatePicker.styled");
var IntroWithSeasons_1 = require("./components/IntroWithSeasons");
var Calendar_1 = require("./components/Calendar");
var default_1 = (function (_super) {
__extends(default_1, _super);
function default_1() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
year: new Date().getFullYear(),
month: new Date().getMonth(),
day: new Date().getDate(),
dayOfTheWeek: new Date().getDay(),
active: false,
input: '',
inValid: false,
};
_this.increaseYear = function () { return _this.setState(function (prevState) { return ({ year: prevState.year + 1 }); }); };
_this.decreaseYear = function () { return _this.setState(function (prevState) { return ({ year: prevState.year - 1 }); }); };
_this.setCorrectDateDigit = function (digit) { return digit > 9 ? digit : "0" + digit; };
_this.dateValue = function (_a) {
var value = _a.currentTarget.value;
return parseInt(value.split('-')[0], 10);
};
_this.setValue = function (e, i) {
var _a = _this.state, year = _a.year, month = _a.month;
var day = _this.dateValue(e);
_this.setState({
day: day,
dayOfTheWeek: i,
input: _this.setCorrectDateDigit(day) + "/" + _this.setCorrectDateDigit(month + 1) + "/" + year,
});
};
_this.onClose = function (active) {
_this.setState({ active: active });
if (_this.state.input === '') {
var _a = _this.state, year = _a.year, month = _a.month, day = _a.day;
_this.setState({
input: _this.setCorrectDateDigit(day) + "/" + _this.setCorrectDateDigit(month + 1) + "/" + year
});
}
};
_this.onChangeMonth = function (event) { return _this.setState({
month: _this.dateValue(event),
input: _this.setCorrectDateDigit(_this.state.day) + "/" + _this.setCorrectDateDigit(_this.dateValue(event) + 1) + "/" + _this.state.year,
}); };
_this.onChangeYear = function (event) { return _this.setState({
year: _this.dateValue(event),
input: _this.setCorrectDateDigit(_this.state.day) + "/" + _this.setCorrectDateDigit(_this.state.month + 1) + "/" + _this.dateValue(event),
}); };
_this.onChangeInput = function (value) { return _this.setState({
day: parseInt(value.split('/')[0], 10),
month: parseInt(value.split('/')[1], 10) - 1,
year: parseInt(value.split('/')[2], 10),
input: value
}); };
_this.isInvalidDate = function () {
var input = _this.state.input;
if (input.match(/(0[1-9]|[12][0-9]|3[01])[/](0[1-9]|1[012])[/](19|20)\d\d/) &&
input.length === 10) {
_this.setState({ inValid: false });
return;
}
_this.setState({ inValid: 'Insira uma data válida por favor' });
};
return _this;
}
default_1.prototype.render = function () {
var _this = this;
var _a = this.state, year = _a.year, month = _a.month, day = _a.day, dayOfTheWeek = _a.dayOfTheWeek, active = _a.active, inValid = _a.inValid;
return (React.createElement(React.Fragment, null,
React.createElement(DatePicker_styled_1.InputWrapper, null,
React.createElement(Input_1.default, { type: 'text', placeholder: 'selecione uma data', value: this.state.input, onChange: function (e) { return _this.onChangeInput(e.target.value); }, isInvalid: inValid, onBlur: this.isInvalidDate }),
React.createElement("button", { onClick: function () { return _this.setState({ active: true }); } },
React.createElement(Icons_1.default.Dashboard, { width: 20, height: 20 }))),
React.createElement(DatePicker_styled_1.ModalStyles, null,
React.createElement("div", { id: 'modal' }),
React.createElement(Modal_1.default, { selector: '#modal', active: active, onClose: this.onClose, onConfirmText: 'Selecionar', onConfirm: false, onConfirmType: 'link' },
React.createElement(IntroWithSeasons_1.default, { dayWeek: dayOfTheWeek, day: day, month: month, year: year }),
React.createElement(DatePicker_styled_1.SelectYearWrapper, null,
React.createElement(DatePicker_styled_1.SelectYear, { id: 'select-month', onChange: this.onChangeMonth, value: month }, R.range(0, 12).map(function (mon) { return (React.createElement("option", { value: mon, key: Math.random() }, months_enum_1.Months[mon])); })),
React.createElement("label", { htmlFor: 'select-month' },
React.createElement(Icons_1.default.Arrow, { degree: 180, width: 15, height: 15 }))),
React.createElement(DatePicker_styled_1.SelectYearWrapper, null,
React.createElement(DatePicker_styled_1.SelectYear, { id: 'select-year', onChange: this.onChangeYear, value: year }, year_1.default.map(function (mappedYear) { return (React.createElement("option", { value: mappedYear, key: Math.random() }, mappedYear)); })),
React.createElement("label", { htmlFor: 'select-year' },
React.createElement(Icons_1.default.Arrow, { degree: 180, width: 15, height: 15 }))),
React.createElement(Calendar_1.default, { year: year, month: month, day: day, dayOfTheWeek: dayOfTheWeek, selectedDayWeek: function (e) { return _this.setState({ dayOfTheWeek: e }); }, onClick: this.setValue })))));
};
return default_1;
}(React.PureComponent));
exports.default = default_1;
//# sourceMappingURL=DatePicker.js.map