@kbfront/kb-ui
Version:
KB React UI Library
309 lines • 15.2 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EDatepickerType = exports.ELanguage = void 0;
var react_1 = __importStar(require("react"));
var index_1 = require("index");
var formatter_1 = require("utils/formatter");
require("./index.scss");
var ELanguage;
(function (ELanguage) {
ELanguage["AZ"] = "az";
ELanguage["EN"] = "en";
ELanguage["RU"] = "ru";
})(ELanguage = exports.ELanguage || (exports.ELanguage = {}));
var EDatepickerType;
(function (EDatepickerType) {
EDatepickerType["DDMMYYYY"] = "dd.mm.yyyy";
EDatepickerType["YYYYMMDD"] = "yyyy.mm.dd";
})(EDatepickerType = exports.EDatepickerType || (exports.EDatepickerType = {}));
var Datepicker = react_1.forwardRef(function (props, ref) {
var _a = props.language, language = _a === void 0 ? localStorage.getItem("lang") || ELanguage.AZ : _a, value = props.value, name = props.name, defaultValue = props.defaultValue, _ignore = props._ignore, _required = props._required, errorText = props.errorText, onChange = props.onChange, label = props.label, _b = props.className, className = _b === void 0 ? "" : _b, _c = props.join, join = _c === void 0 ? "." : _c, _d = props.type, type = _d === void 0 ? EDatepickerType.DDMMYYYY : _d;
var langs = require("./lang/" + language + ".json");
var tbody = react_1.useRef(null);
var today = new Date(value);
var _e = react_1.useState(today.getDate()), selectedDate = _e[0], setSelectedDate = _e[1];
var _f = react_1.useState(today.getMonth()), selectedMonth = _f[0], setSelectedMonth = _f[1];
var _g = react_1.useState(today.getFullYear()), selectedYear = _g[0], setSelectedYear = _g[1];
var _h = react_1.useState(""), keyType = _h[0], setKeyType = _h[1];
var _j = react_1.useState(false), show = _j[0], setShow = _j[1];
var _k = react_1.useState(false), showMonths = _k[0], setShowMonths = _k[1];
var _l = react_1.useState(false), showYears = _l[0], setShowYears = _l[1];
var _m = react_1.useState(value), inputValue = _m[0], setInputValue = _m[1];
var _o = react_1.useState([]), years = _o[0], setYears = _o[1];
/**
* KB DATEPICKER
* @param {language} props - FOR DATEPICKER LANGUAGE
* @param {type} props - FOR DATEPICKER DATE TYPE
*
*/
var Makecalendar = function (month, year) {
if (tbody.current) {
setSelectedMonth(month);
setSelectedYear(year);
tbody.current.innerHTML = "";
/**
* Every Month first day week
*/
var firstDay = new Date(year, month).getDay();
var date = 1;
for (var i = 0; i < 6; i++) {
var row = document.createElement("tr");
for (var k = 0; k < 7; k++) {
if (i === 0 && k < firstDay) {
var cell = document.createElement("td");
var cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
}
else if (date > daysInMonth(month, year)) {
break;
}
else {
var cell = document.createElement("td");
cell.onclick = function (e) { return selectDate(+e.target.innerText); };
if (date === selectedDate)
cell.classList.add("selected");
var cellText = document.createTextNode(date);
if (date === today.getDate() &&
year === today.getFullYear() &&
month === today.getMonth())
cell.classList.add("active"); //current day
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
tbody.current.appendChild(row);
}
}
};
var daysInMonth = function (iMonth, iYear) {
return 32 - new Date(iYear, iMonth, 32).getDate();
};
/**
* SELECT DATE
*/
var selectDate = function (date) {
setShow(false);
setSelectedDate(date);
};
/**
* DATEPICKER TYPE
*/
var datepickerType = function (val) {
today.setDate(val);
today.setMonth(selectedMonth);
today.setUTCFullYear(selectedYear);
onChange(today.toString());
setInputValue(formatter_1.dateFormatter.display(today.toString(), type, join));
};
var getDatepicker = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, setShow(!show)];
case 1:
_a.sent();
return [4 /*yield*/, Makecalendar(selectedMonth, selectedYear)];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); };
/**
* CREATE ARRAy for YEARS
*/
react_1.useEffect(function () {
setYears([]);
var _loop_1 = function (i) {
setYears(function (oldYear) { return __spreadArrays(oldYear, [i]); });
};
for (var i = new Date().getFullYear() - 100; i <= new Date().getFullYear() + 100; i++) {
_loop_1(i);
}
}, [today.getFullYear()]);
react_1.useEffect(function () {
datepickerType(selectedDate);
}, [selectedDate, selectedMonth, selectedYear]);
/**
* PREVIOUS MONTH
*/
var prevMonthFn = function (month, year) {
var prevMonth = month === 0 ? 11 : month - 1, prevYear = month === 11 ? year - 1 : year;
return Makecalendar(prevMonth, prevYear);
};
/**
* NEXT MONTH
*/
var nextMonthFn = function (month, year) {
var nextMonth = (month + 1) % 12, nextYear = month === 11 ? year + 1 : year;
return Makecalendar(nextMonth, nextYear);
};
/**
* SELECT MONTH
*/
var selectMonth = function (month) {
setShowMonths(false);
return Makecalendar(month, selectedYear);
};
/**
* SELECT YEAR
*/
var selectYear = function (year) {
setShowYears(false);
return Makecalendar(selectedMonth, year);
};
/**
* CLICK OUTSIDE FUNCTION
*/
var handleClickOutside = function (e) {
if (e.target.closest(".kb-datepicker") === null &&
e.target.nodeName !== "LI") {
setShow(false);
}
};
var validate = function (e) {
var value = e.currentTarget.value.replace(/[^0-9.]/g, "");
if (value.length > 10) {
return;
}
if (keyType == "Backspace") {
return setInputValue(value);
}
switch (value.length) {
case 2:
setInputValue(function (val) { return value + join; });
break;
case 5:
setInputValue(function (val) { return value + join; });
break;
case 8:
default:
setInputValue(value);
break;
}
};
/**
* PROPS INPUT VALUE
*/
react_1.useEffect(function () {
if (defaultValue === "false") {
setInputValue("");
}
else if (defaultValue !== "false" && defaultValue) {
setInputValue(defaultValue);
}
else {
setInputValue(formatter_1.dateFormatter.display(value, type, join));
}
document.addEventListener("click", handleClickOutside);
}, []);
var weekList = langs["WEEK"].map(function (week, i) { return (react_1.default.createElement("th", { key: i }, week)); });
var monthslist = langs["MONTH"].map(function (month, i) { return (react_1.default.createElement("li", { onClick: function () { return selectMonth(i); }, key: i, className: i === selectedMonth ? "active" : "" }, month)); });
var yearsList = years.map(function (year, i) { return (react_1.default.createElement("li", { key: i, onClick: function () { return selectYear(year); }, className: year === selectedYear ? "active" : "" }, year)); });
return (react_1.default.createElement("div", { className: "kb-datepicker " + (show ? "show" : "") + " " + className },
react_1.default.createElement(index_1.FormControl, __assign({}, { name: name, _ignore: _ignore, _required: _required, errorText: errorText, ref: ref, label: label }, { value: inputValue, onChange: validate, type: index_1.EFormControlType.TEL, onKeyDown: function (e) { return setKeyType(e.key); }, placeholder: type }, { defaultValue: defaultValue }, { className: "kb-datepicker__input", iconAction: getDatepicker, icon: ["fal", "calendar"] })),
show && (react_1.default.createElement("div", { className: "kb-datepicker__container" },
showMonths && (react_1.default.createElement("div", { className: "kb-datepicker__container-months " + (showMonths ? "show" : "") },
react_1.default.createElement("ul", null, monthslist))),
showYears && (react_1.default.createElement("div", { className: "kb-datepicker__container-years " + (showYears ? "show" : "") },
react_1.default.createElement("ul", null, yearsList))),
react_1.default.createElement("div", { className: "kb-datepicker__container-header" },
react_1.default.createElement(index_1.Button, { onClick: function () {
prevMonthFn(selectedMonth, selectedYear);
} },
react_1.default.createElement(index_1.Icon, { color: index_1.EColor.DARK, path: ["fal", "arrow-left"] }),
" "),
react_1.default.createElement(index_1.Typography, { variant: "5", component: "h3" },
react_1.default.createElement("span", { onClick: function () {
setShowMonths(true);
} }, langs["MONTH"][selectedMonth]),
react_1.default.createElement("span", { onClick: function () {
setShowYears(true);
} }, selectedYear)),
react_1.default.createElement(index_1.Button, { onClick: function () {
nextMonthFn(selectedMonth, selectedYear);
} },
react_1.default.createElement(index_1.Icon, { path: ["fal", "arrow-right"], color: index_1.EColor.DARK }),
" ")),
react_1.default.createElement("div", { className: "kb-datepicker__container-body" },
react_1.default.createElement("table", null,
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null, weekList)),
react_1.default.createElement("tbody", { ref: tbody })))))));
});
exports.default = Datepicker;
//# sourceMappingURL=index.js.map