smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
1,133 lines (1,071 loc) • 43.7 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var index = require('./index-6d498b59.js');
var DOMHelper = require('./DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var Div = require('./element/Div.js');
var Svg = require('./element/Svg.js');
var Span = require('./element/Span.js');
var CSSTransition = require('./CSSTransition-5a3ab124.js');
var Button = require('./Button-0d381a87.js');
var TransitionSwitch = require('./TransitionSwitch-c80def34.js');
const DMY = 1;
const MDY = 2;
var DT = /*#__PURE__*/Object.freeze({
__proto__: null,
DMY: DMY,
MDY: MDY
});
const $12 = 1;
const $24 = 2;
var HT = /*#__PURE__*/Object.freeze({
__proto__: null,
$12: $12,
$24: $24
});
const DATE = 1;
const HOUR = 2;
const DATE_HOUR = 4;
var PT = /*#__PURE__*/Object.freeze({
__proto__: null,
DATE: DATE,
HOUR: HOUR,
DATE_HOUR: DATE_HOUR
});
const SUNDAY = 0;
const MONDAY = 1;
const TUESDAY = 2;
const WEDNESDAY = 3;
const THURSDAY = 4;
const FRIDAY = 5;
const SATURDAY = 6;
var W = /*#__PURE__*/Object.freeze({
__proto__: null,
SUNDAY: SUNDAY,
MONDAY: MONDAY,
TUESDAY: TUESDAY,
WEDNESDAY: WEDNESDAY,
THURSDAY: THURSDAY,
FRIDAY: FRIDAY,
SATURDAY: SATURDAY
});
var size = {
small: {
width: "210px",
iconContainerSize: "25px",
bodyHeight: "225px",
dateHeaderPaddingY: "5px",
dateWeekItemSize: "20px",
dateWeekItemSpace: "2.5px",
dateListItemSize: "43.75px",
dateListItemSpace: "0",
hourItemSize: "45px",
hourIconSize: "35px",
hourItemFontSize: "13px",
buttonsPadding: "0 20px 10px 10px",
buttonMarginLeft: "5px"
},
default: {
width: "310px",
spanMarginLeft: "9px",
iconContainerSize: "40px",
bodyHeight: "340px",
dateHeaderPaddingY: "10px",
dateWeekItemSize: "30px",
dateWeekItemSpace: "5px",
dateListItemSize: "60px",
dateListItemSpace: "5px",
hourItemSize: "60px",
hourIconSize: "40px",
hourItemFontSize: "20px",
buttonsPadding: "0 25px 15px 15px",
buttonMarginLeft: "10px"
},
large: {
width: "380px",
iconContainerSize: "50px",
bodyHeight: "340px",
dateHeaderPaddingY: "10px",
dateWeekItemSize: "30px",
dateWeekItemSpace: "5px 10px",
dateListItemSize: "60px",
dateListItemSpace: "13.75px",
hourItemSize: "60px",
hourIconSize: "40px",
hourItemFontSize: "20px",
buttonsPadding: "0 30px 15px 15px",
buttonMarginLeft: "10px"
},
paddingX: "15px",
paddingY: "10px",
radius: "4px",
fontSize: "14px",
headerIconSize: "16px",
dateHeaderIconSize: "20px",
hourSpace: "10px"
};
var DEFAULT_LANGUAGE = {
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
am: "AM",
pm: "PM",
cancel: "CANCEL",
save: "OK"
};
const MIN_YEAR = 100;
const MAX_YEAR = 9999;
class DatePickerHelper {
/**
* Gets day count of the given month.
*
* @param month
* @param year
*/
static getDayCount(month, year) {
switch (month) {
case 0:
case 2:
case 4:
case 6:
case 7:
case 9:
case 11:
return 31;
case 3:
case 5:
case 8:
case 10:
return 30;
case 1:
return this.isLeapYear(year) ? 29 : 28;
}
}
/**
* Checks if the given year is a leap year or not.
*
* @param year
*/
static isLeapYear(year) {
return year % 4 == 0;
}
/**
* Gets decade by the given year.
*
* @param year
*/
static getDecade(year) {
let start = year;
while (start % 10 != 0)
start -= 1;
return [start, start + 10];
}
/**
* Gets week days as an array.
*
* @param startDay
*/
static getWeekDays(startDay) {
const arr = [0, 1, 2, 3, 4, 5, 6];
return [...arr.slice(startDay, 7), ...arr.slice(0, startDay)];
}
/**
* Gets value as object.
*
* @param value
* @param pickerType
* @param hourType
*/
static getValueObject(value, pickerType, hourType) {
let result = {};
if (typeof value === "string" || value.constructor == Date) {
let date;
if (typeof value === "string" && pickerType == HOUR)
date = new Date(`1/1/2020 ${value}`);
else
date = typeof value === "string" ? new Date(value) : value;
if (!isNaN(date.getTime())) {
if (pickerType != HOUR)
result.date = {
day: date.getDate(),
weekDay: date.getDay(),
month: date.getMonth(),
year: date.getFullYear(),
decade: DatePickerHelper.getDecade(date.getFullYear())
};
if (pickerType != DATE) {
result.hour = {
hour: date.getHours(),
minute: date.getMinutes()
};
if (hourType == $12) {
if (result.hour.hour < 12) {
result.hour.am = true;
if (result.hour.hour == 0)
result.hour.hour = 12;
}
else {
result.hour.am = false;
if (result.hour.hour > 12)
result.hour.hour -= 12;
}
}
}
}
else
result = null;
}
else {
result = value;
try {
if (pickerType & (DATE | DATE_HOUR)) {
if (pickerType == DATE)
delete result.hour;
result.date.year = Math.max(MIN_YEAR, result.date.year);
result.date.year = Math.min(MAX_YEAR, result.date.year);
result.date.decade = DatePickerHelper.getDecade(result.date.year);
result.date.month = Math.max(0, result.date.month);
result.date.month = Math.min(11, result.date.month);
result.date.day = Math.max(1, result.date.day);
result.date.day = Math.min(DatePickerHelper.getDayCount(result.date.month, result.date.year), result.date.day);
result.date.weekDay = new Date(result.date.year, result.date.month, result.date.day).getDay();
}
if (pickerType & (HOUR | DATE_HOUR)) {
if (pickerType == HOUR)
delete result.date;
result.hour.minute = Math.max(0, result.hour.minute);
result.hour.minute = Math.min(59, result.hour.minute);
if (hourType == $12) {
result.hour.am = result.hour.am ? true : false;
result.hour.hour = Math.max(1, result.hour.hour);
result.hour.hour = Math.min(12, result.hour.hour);
}
else {
result.hour.hour = Math.max(0, result.hour.hour);
result.hour.hour = Math.min(23, result.hour.hour);
}
}
}
catch (ignored) {
result = null;
}
}
return result;
}
}
const WEEK = 1;
const YEAR = 2;
const DECADE = 4;
const customKeys = {
size: v => `
width: ${size[v].width};
.src-date-picker-span-element {
margin-left: ${size[v].spanMarginLeft};
}
.src-date-picker-icon-container {
width: ${size[v].iconContainerSize};
}
.src-date-picker-body {
height: ${size[v].bodyHeight};
}
.src-date-picker-date-header {
padding: ${size[v].dateHeaderPaddingY} 0;
}
.src-date-picker-week-item {
width: ${size[v].dateWeekItemSize};
height: ${size[v].dateWeekItemSize};
margin: ${size[v].dateWeekItemSpace};
}
.src-date-picker-date-item {
width: ${size[v].dateListItemSize};
height: ${size[v].dateListItemSize};
margin: ${size[v].dateListItemSpace};
}
.src-date-picker-hour-element {
width: ${size[v].hourItemSize};
height: ${size[v].hourItemSize};
}
.src-date-picker-hour-arrow-container svg {
width: ${size[v].hourIconSize};
height: ${size[v].hourIconSize};
}
.src-date-picker-hour-input {
font-size: ${size[v].hourItemFontSize};
}
.src-date-picker-buttons {
padding: ${size[v].buttonsPadding};
> div {
margin-left: ${size[v].buttonMarginLeft};
}
}
`
};
var DatePickerElement = styled__default(Div).attrs({ customKeys })(({ theme, type }) => `
overflow: hidden;
flex: 0 0 auto;
border-radius: ${size.radius};
background: ${theme.src.datePicker.background};
color: ${theme.src.datePicker.font};
font-family: "Open Sans", sans-serif;
font-size: ${size.fontSize};
.src-date-picker-body {
box-sizing: border-box;
user-select: none;
}
.src-date-picker-item {
&.src-date-picker-item-inactive {
color: ${theme.src.datePicker.inactive};
font-weight: 400;
}
&.src-date-picker-item-active {
background: ${theme.src.type[type].main};
color: ${theme.src.type[type].font};
}
}
.src-date-picker-hour-input {
background: ${theme.src.type[type].main};
color: ${theme.src.type[type].font};
&:focus {
background: ${theme.src.type[type].active};
}
}
`);
var IconContainer = styled__default.div.attrs({
className: "src-date-picker-icon-container"
}) `
display: flex;
justify-content: center;
align-items: center;
`;
var HourIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" }),
viewBox: "0 0 1792 1792"
}) ``;
var DateIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M192 1664h1408v-1024h-1408v1024zm384-1216v-288q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v288q0 14 9 23t23 9h64q14 0 23-9t9-23zm768 0v-288q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v288q0 14 9 23t23 9h64q14 0 23-9t9-23zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z" }),
viewBox: "0 0 1792 1792"
}) ``;
var CloseIcon = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" }),
viewBox: "0 0 1792 1792"
}) ``;
const HeaderElement = styled__default.header(({ theme, type }) => `
display: flex;
justify-content: space-between;
align-items: center;
padding: ${size.paddingY} ${size.paddingX};
background: ${theme.src.type[type].main};
${IconContainer} {
position: relative;
div {
position: absolute;
display: inline-flex;
}
svg {
width: ${size.headerIconSize};
height: ${size.headerIconSize};
fill: ${theme.src.type[type].darker};
transition: fill 150ms 0s ease-in-out;
&:hover {
fill: ${theme.src.type[type].darkest};
}
}
}
`);
const Header = ({ valueObject, today, selectedPicker, setSelectedPicker, type, pickerType, showCloseIcon, lang, onClose }) => {
const getValue = () => {
let date = (valueObject && valueObject.date) ? valueObject.date : today;
return `${lang.days[date.weekDay]}, ${date.day} ${lang.months[date.month].substr(0, 3)} ${date.year}`;
};
const [value, setValue] = React__default.useState(() => getValue());
/**
* Calls onClose method.
*/
const close = () => {
if (onClose)
onClose();
};
React__default.useEffect(() => setValue(getValue()), [valueObject]);
return (React__default.createElement(HeaderElement, { type: type },
React__default.createElement(Span, { color: `${type}.font`, className: "src-date-picker-span-element" }, value),
React__default.createElement(Div, { display: "flex", alignItems: "center" },
React__default.createElement(IconContainer, null, pickerType == DATE_HOUR && (React__default.createElement(React__default.Fragment, null,
React__default.createElement(CSSTransition.CSSTransition, { status: selectedPicker == DATE, className: "src-fade", duration: 150 },
React__default.createElement("div", null,
React__default.createElement(HourIcon, { onClick: () => setSelectedPicker(HOUR) }))),
React__default.createElement(CSSTransition.CSSTransition, { status: selectedPicker == HOUR, className: "src-fade", duration: 150 },
React__default.createElement("div", null,
React__default.createElement(DateIcon, { onClick: () => setSelectedPicker(DATE) })))))),
showCloseIcon && (React__default.createElement(IconContainer, null,
React__default.createElement(CloseIcon, { onClick: close }))))));
};
var ArrowUp = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z" }),
viewBox: "0 0 1792 1792"
}) ``;
var ArrowDown = styled__default(Svg).attrs({
children: React__default.createElement("path", { d: "M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" }),
viewBox: "0 0 1792 1792"
}) ``;
const HeaderElement$1 = styled__default.header.attrs({
className: "src-date-picker-date-header"
}) `
display: flex;
justify-content: space-between;
> span {
cursor: default;
font-weight: 600;
}
svg {
width: ${size.dateHeaderIconSize};
}
`;
const DateHeader = ({ date, setDate, selectedDatePicker, setSelectedDatePicker, orientation, lang }) => {
const getValue = () => {
if (selectedDatePicker == WEEK)
return `${lang.months[date.month]} ${date.year}`;
else if (selectedDatePicker == YEAR)
return `${date.year}`;
else
return `${date.decade[0]} - ${date.decade[1]}`;
};
const [value, setValue] = React__default.useState(() => getValue());
React__default.useEffect(() => setValue(getValue()), [date, selectedDatePicker]);
/**
* Sets "selected date picker"
*/
const setSelectedDatePicker$ = () => {
if (selectedDatePicker == WEEK)
setSelectedDatePicker(YEAR);
else if (selectedDatePicker == YEAR)
setSelectedDatePicker(DECADE);
};
/**
* Sets date
*
* @param up
*/
const setDate$ = (up) => {
const inc = orientation ? up : !up;
const val = Object.assign({}, date);
if (inc) {
if (selectedDatePicker == WEEK) {
if (val.month < 11)
val.month++;
else if (val.year < MAX_YEAR) {
val.month = 0;
val.year++;
}
}
else if (selectedDatePicker == YEAR) {
if (val.year < MAX_YEAR)
val.year++;
}
else if (selectedDatePicker == DECADE) {
if (val.decade[1] < MAX_YEAR)
val.decade = [val.decade[1], val.decade[1] + 10];
}
}
else {
if (selectedDatePicker == WEEK) {
if (val.month > 0)
val.month--;
else if (val.year > MIN_YEAR) {
val.month = 11;
val.year--;
}
}
else if (selectedDatePicker == YEAR) {
if (val.year > MIN_YEAR)
val.year--;
}
else if (selectedDatePicker == DECADE) {
if (val.decade[0] > MIN_YEAR)
val.decade = [val.decade[0] - 10, val.decade[0]];
}
}
setDate(val);
};
return (React__default.createElement(HeaderElement$1, null,
React__default.createElement("span", { className: "src-date-picker-span-element", onClick: setSelectedDatePicker$ }, value),
React__default.createElement(Div, { display: "flex", alignItems: "center" },
React__default.createElement(IconContainer, null,
React__default.createElement(ArrowUp, { onClick: () => setDate$(true) })),
React__default.createElement(IconContainer, null,
React__default.createElement(ArrowDown, { onClick: () => setDate$(false) })))));
};
var DateList = styled__default.ul `
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
`;
var DateItem = styled__default.li.attrs(({ className, active, inactive }) => ({
className: `${className} src-date-picker-item ${active ? "src-date-picker-item-active" : ""} ${inactive ? "src-date-picker-item-inactive" : ""}`
})) `
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
line-height: 100%;
font-weight: 600;
`;
const DateWeek = ({ valueObject, date, setValue, weekStartDay, lang }) => {
const getHeader = () => {
const weekDays = DatePickerHelper.getWeekDays(weekStartDay);
const result = [];
weekDays.forEach(item => result.push(React__default.createElement(DateItem, { className: "src-date-picker-week-item", key: item, inactive: true }, lang.days[item].substring(0, 2))));
return result;
};
const getList = () => {
const result = Array(6).fill(null).map((item, index) => React__default.createElement(DateList, { key: index, children: [] }));
const prevMonth = date.month == 0 ? 11 : date.month - 1;
const prevYear = prevMonth == 11 ? date.year - 1 : date.year;
const nextMonth = date.month < 11 ? date.month + 1 : 1;
const nextYear = nextMonth == 0 ? date.year + 1 : date.year;
const weekDays = DatePickerHelper.getWeekDays(weekStartDay);
const firstMonthDay = new Date(date.year, date.month, 1).getDay();
const weekStartIndex = weekDays.indexOf(firstMonthDay);
const weekDayCount = DatePickerHelper.getDayCount(date.month, date.year);
const prevDayLimit = firstMonthDay - weekStartIndex;
const prevMountCount = DatePickerHelper.getDayCount(prevMonth, prevYear);
let prevDay = prevMountCount - prevDayLimit;
let weekDay = 1;
let nextWeekDay = 1;
let index = 0;
for (let i = 0; i < 42; i++) {
let dateItem;
let isInactive;
if (prevDay <= prevMountCount) {
dateItem = {
day: prevDay,
month: prevMonth,
year: prevYear
};
prevDay++;
isInactive = true;
}
else if (weekDay <= weekDayCount) {
dateItem = {
day: weekDay,
month: date.month,
year: date.year
};
weekDay++;
}
else {
dateItem = {
day: nextWeekDay,
month: nextMonth,
year: nextYear
};
nextWeekDay++;
isInactive = true;
}
let isActive;
if (valueObject &&
dateItem.day == valueObject.date.day &&
dateItem.month == valueObject.date.month &&
dateItem.year == valueObject.date.year)
isActive = true;
else
isActive = false;
result[index].props.children.push(React__default.createElement(DateItem, { className: "src-date-picker-week-item", key: i, active: isActive, inactive: isInactive, onClick: () => setValue$(dateItem.day, dateItem.month, dateItem.year) }, dateItem.day));
if (i % 7 == 6)
index++;
}
return result;
};
const [header, setHeader] = React__default.useState(() => getHeader());
const headerInit = React__default.useRef(false);
const [list, setList] = React__default.useState(() => getList());
const listInit = React__default.useRef(false);
React__default.useEffect(() => {
if (!headerInit.current)
headerInit.current = true;
else
setHeader(getHeader());
}, [lang, weekStartDay]);
React__default.useEffect(() => {
if (!listInit.current)
listInit.current = true;
else
setList(getList());
}, [valueObject, date]);
/**
* Sets value.
*
* @param day
* @param month
* @param year
*/
const setValue$ = (day, month, year) => {
if (year >= MIN_YEAR && year <= MAX_YEAR)
setValue({ day, month, year }, null);
};
return (React__default.createElement("div", null,
React__default.createElement(DateList, null, header),
list));
};
const DateYear = ({ date, setDate, setSelectedDatePicker, lang }) => {
const getList = () => {
const result = Array(4).fill(null).map((item, index) => React__default.createElement(DateList, { key: index, children: [] }));
let index = 0;
for (let i = 0; i < 16; i++) {
const month = i < 12 ? i : i - 12;
const year = i < 12 ? date.year : date.year + 1;
const isInactive = year != date.year;
const isActive = date.selectedMonth.month == month && date.selectedMonth.year == year;
result[index].props.children.push(React__default.createElement(DateItem, { className: "src-date-picker-date-item", key: i, inactive: isInactive, active: isActive, onClick: () => setValue(month, year) }, lang.months[month].substr(0, 3)));
if (i % 4 == 3)
index++;
}
return result;
};
const [list, setList] = React__default.useState(() => getList());
const listInit = React__default.useRef(false);
React__default.useEffect(() => {
if (!listInit.current)
listInit.current = true;
else
setList(getList());
}, [date, lang]);
/**
* Sets date.
*
* @param month
* @param year
*/
const setValue = (month, year) => {
if (year >= MIN_YEAR && year <= MAX_YEAR) {
setSelectedDatePicker(WEEK);
setDate(Object.assign(Object.assign({}, date), { month, year, selectedMonth: { month, year } }));
}
};
return (React__default.createElement("div", null, list));
};
const DateDecade = ({ date, setDate, setSelectedDatePicker }) => {
const getList = () => {
const result = Array(4).fill(null).map((item, index) => React__default.createElement(DateList, { key: index, children: [] }));
let index = 0;
for (let i = 0; i < 16; i++) {
const year = date.decade[0] + i;
const isInactive = year >= date.decade[1];
const isActive = year == date.year;
result[index].props.children.push(React__default.createElement(DateItem, { className: "src-date-picker-date-item", key: i, inactive: isInactive, active: isActive, onClick: () => setValue(year) }, year));
if (i % 4 == 3)
index++;
}
return result;
};
const [list, setList] = React__default.useState(() => getList());
const listInit = React__default.useRef(false);
React__default.useEffect(() => {
if (!listInit.current)
listInit.current = true;
else
setList(getList());
}, [date]);
/**
* Sets date.
*
* @param year
*/
const setValue = (year) => {
if (year >= MIN_YEAR && year <= MAX_YEAR) {
setSelectedDatePicker(YEAR);
setDate(Object.assign(Object.assign({}, date), { year }));
}
};
return React__default.createElement("div", null, list);
};
const PickerElement = styled__default.div `
height: 100%;
padding: 0 ${size.paddingX};
`;
const DatePickerItem = ({ valueObject, date, setDate, selectedDatePicker, setSelectedDatePicker, setValue, orientation, weekStartDay, lang }) => {
const previousSelectedDatePicker = React__default.useRef(null);
React__default.useEffect(() => {
previousSelectedDatePicker.current = selectedDatePicker;
}, [selectedDatePicker]);
return (React__default.createElement(PickerElement, null,
React__default.createElement(DateHeader, { date: date, setDate: setDate, selectedDatePicker: selectedDatePicker, setSelectedDatePicker: setSelectedDatePicker, orientation: orientation, lang: lang }),
React__default.createElement("div", null,
React__default.createElement(TransitionSwitch.TransitionSwitch, { active: selectedDatePicker },
React__default.createElement(CSSTransition.CSSTransition, { value: WEEK, className: "src-dp-fade-in", duration: 150 },
React__default.createElement(DateWeek, { valueObject: valueObject, date: date, setValue: setValue, weekStartDay: weekStartDay, lang: lang })),
React__default.createElement(CSSTransition.CSSTransition, { value: YEAR, className: `${(previousSelectedDatePicker.current == WEEK || selectedDatePicker == WEEK) ? "src-dp-fade-out" : "src-dp-fade-in"}`, duration: 150 },
React__default.createElement(DateYear, { date: date, setDate: setDate, setSelectedDatePicker: setSelectedDatePicker, lang: lang })),
React__default.createElement(CSSTransition.CSSTransition, { value: DECADE, className: "src-dp-fade-out", duration: 150 },
React__default.createElement(DateDecade, { date: date, setDate: setDate, setSelectedDatePicker: setSelectedDatePicker }))))));
};
const HOUR$1 = 1;
const MINUTE = 2;
const AM = 4;
class StringHelper {
/**
* Renders a number with given digits as string.
*
* @param value
* @param digit
* @param placeholder
*/
static renderNumber(value, digit, placeholder) {
let str = value.toString();
while (str.length < digit)
str = placeholder + str;
return str;
}
}
const Container = styled__default.div `
display: flex;
justify-content: center;
align-items: center;
`;
const ArrowContainer = styled__default.div.attrs({
className: "src-date-picker-hour-arrow-container src-date-picker-hour-element"
})(({ theme }) => `
display: flex;
justify-content: center;
align-items: center;
margin: ${size.hourSpace};
svg {
fill: ${theme.src.datePicker.font};
&:active {
fill: ${theme.src.datePicker.arrowActive};
}
}
`);
const Input = styled__default.input.attrs({
className: "src-date-picker-hour-input src-date-picker-hour-element",
spellCheck: false
}) `
box-sizing: border-box;
padding: ${size.hourSpace};
margin: ${size.hourSpace};
border: 0;
border-radius: ${size.radius};
text-align: center;
&:focus,
&:active {
outline: 0;
}
`;
const HourPickerItem = ({ valueObject, setValue, hourType, orientation, lang }) => {
const focusInputType = React__default.useRef(null);
const valueObjectRef = React__default.useRef(null); // holds value for wheel input event
const hourInput = React__default.useRef(null);
const minuteInput = React__default.useRef(null);
const amInput = React__default.useRef(null);
/**
* Gets default hour.
*/
const getDefaultHour = (valueObj) => {
if (valueObj)
return Object.assign({}, valueObj.hour);
else {
const hour = {
hour: 12,
minute: 0
};
if (hourType == $12)
hour.am = false;
return hour;
}
};
/**
* Sets focus input type.
*
* @param type
*/
const focusInput = (type) => {
focusInputType.current = type;
DOMHelper.DOMHelper.addEventListener(document, DOMHelper.DOMHelper.MOUSE_WHEEL, wheelInput, { passive: false });
};
/**
* Sets input value by focus input type.
*/
const leaveInput = () => {
const hour = getDefaultHour(valueObject);
if (focusInputType.current == HOUR$1) {
let value = parseInt(hourInput.current.value);
if (isNaN(value))
hourInput.current.value = valueObject ? StringHelper.renderNumber(valueObject.hour.hour, 2, "0") : "";
else {
if (hourType == $12) {
value = Math.max(1, value);
value = Math.min(12, value);
}
else {
value = Math.max(0, value);
value = Math.min(23, value);
}
hour.hour = value;
}
}
else if (focusInputType.current == MINUTE) {
let value = parseInt(minuteInput.current.value);
if (isNaN(value))
minuteInput.current.value = valueObject ? StringHelper.renderNumber(valueObject.hour.minute, 2, "0") : "";
else {
value = Math.max(0, value);
value = Math.min(59, value);
hour.minute = value;
}
}
else if (focusInputType.current == AM) {
let value = amInput.current.value;
if (value != lang.am && value != lang.pm)
amInput.current.value = valueObject ? lang[valueObject.hour.am ? "am" : "pm"] : "";
else
hour.am = value == lang.am;
}
focusInputType.current = null;
DOMHelper.DOMHelper.removeEventListener(document, DOMHelper.DOMHelper.MOUSE_WHEEL, wheelInput, {});
setValue(null, hour);
};
/**
* Gets wheel orientation and sets value by focus input type.
*
* @param e
*/
const wheelInput = React__default.useCallback((e) => {
const delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
const up = delta < 0;
if (focusInputType.current == HOUR$1)
changeHour(up);
else if (focusInputType.current == MINUTE)
changeMinute(up);
else if (focusInputType.current == AM)
changeAM();
e.preventDefault();
e.stopPropagation();
}, []);
/**
* Sets hour value.
*
* @param up
*/
const changeHour = (up, hour) => {
const inc = orientation ? up : !up;
hour = hour || getDefaultHour(valueObjectRef.current);
if (inc) {
if (hourType == $12) {
if (hour.hour == 11) {
hour.am = !hour.am;
hour.hour = 12;
}
else if (hour.hour == 12)
hour.hour = 1;
else
hour.hour++;
}
else if (hourType == $24) {
if (hour.hour == 23)
hour.hour = 0;
else
hour.hour++;
}
}
else {
if (hourType == $12) {
if (hour.hour == 12) {
hour.am = !hour.am;
hour.hour = 11;
}
else if (hour.hour == 1)
hour.hour = 12;
else
hour.hour--;
}
else if (hourType == $24) {
if (hour.hour == 0)
hour.hour = 23;
else
hour.hour--;
}
}
setValue(null, hour);
};
/**
* Sets minute value and changes hour value by minute.
*
* @param up
*/
const changeMinute = (up) => {
const inc = orientation ? up : !up;
const hour = getDefaultHour(valueObjectRef.current);
if (inc) {
if (hour.minute < 59)
hour.minute++;
else {
hour.minute = 0;
changeHour(up, hour);
return;
}
}
else {
if (hour.minute > 0)
hour.minute--;
else {
hour.minute = 59;
changeHour(up, hour);
return;
}
}
setValue(null, hour);
};
/**
* Toggles am/pm value.
*/
const changeAM = () => {
const hour = getDefaultHour(valueObjectRef.current);
hour.am = !hour.am;
setValue(null, hour);
};
React__default.useEffect(() => {
valueObjectRef.current = valueObject;
if (valueObject) {
hourInput.current.value = StringHelper.renderNumber(valueObject.hour.hour, 2, "0");
minuteInput.current.value = StringHelper.renderNumber(valueObject.hour.minute, 2, "0");
if (amInput.current)
amInput.current.value = lang[valueObject.hour.am ? "am" : "pm"];
}
}, [valueObject]);
return (React__default.createElement(Div, { height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-around", alignItems: "center" },
React__default.createElement(Container, null,
React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowUp, { onClick: () => changeHour(true) })),
React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowUp, { onClick: () => changeMinute(true) })),
hourType == $12 && (React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowUp, { onClick: changeAM })))),
React__default.createElement(Container, null,
React__default.createElement(Input, { defaultValue: valueObject ? StringHelper.renderNumber(valueObject.hour.hour, 2, "0") : "", ref: hourInput, onFocus: () => focusInput(HOUR$1), onBlur: leaveInput }),
React__default.createElement(Input, { defaultValue: valueObject ? StringHelper.renderNumber(valueObject.hour.minute, 2, "0") : "", ref: minuteInput, onFocus: () => focusInput(MINUTE), onBlur: leaveInput }),
hourType == $12 && React__default.createElement(Input, { defaultValue: valueObject ? lang[valueObject.hour.am ? "am" : "pm"] : "", ref: amInput, onFocus: () => focusInput(AM), onBlur: leaveInput })),
React__default.createElement(Container, null,
React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowDown, { onClick: () => changeHour(false) })),
React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowDown, { onClick: () => changeMinute(false) })),
hourType == $12 && (React__default.createElement(ArrowContainer, null,
React__default.createElement(ArrowDown, { onClick: changeAM }))))));
};
const Buttons = ({ value, setValue, initialValue, setInitialValue, onSave, onCancel, type, lang }) => {
/**
* Sets initial value as value.
*/
const cancel = () => {
setValue(initialValue);
if (onCancel)
onCancel();
};
/**
* Sets value as initial value.
*/
const save = () => {
setInitialValue(value);
if (onSave)
onSave();
};
return (React__default.createElement(Div, { className: "src-date-picker-buttons", display: "flex", justifyContent: "flex-end", alignItems: "center" },
React__default.createElement(Button.Button, { type: type, link: true, waveEffect: "dark", elementProps: { onClick: cancel } }, lang.cancel),
React__default.createElement(Button.Button, { type: type, link: true, waveEffect: "dark", elementProps: { onClick: save } }, lang.save)));
};
const Body = styled__default.div.attrs({
className: "src-date-picker-body"
}) `
box-sizing: border-box;
padding: ${size.paddingY} 0;
`;
const DatePicker = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, elementProps = index.DV.JSX_ELEMENT_PROPS, value, setValue, type = "primary", pickerType = DATE_HOUR, hourType = $12, showCloseIcon, showButtons, weekStartDay = MONDAY, orientation, lang = DEFAULT_LANGUAGE, onClose, onSave, onCancel }) => {
const [valueObject, setValueObject] = React__default.useState(() => DatePickerHelper.getValueObject(value, pickerType, hourType));
const [initialValue, setInitialValue] = React__default.useState(() => value);
const [today] = React__default.useState(() => {
const date = new Date();
return {
day: date.getDate(),
weekDay: date.getDay(),
month: date.getMonth(),
year: date.getFullYear(),
decade: DatePickerHelper.getDecade(date.getFullYear())
};
});
const [date, setDate] = React__default.useState(() => {
const dateObject = valueObject && valueObject.date ? valueObject.date : today;
return {
month: dateObject.month,
year: dateObject.year,
decade: dateObject.decade,
selectedMonth: {
month: dateObject.month,
year: dateObject.year
}
};
});
const [selectedPicker, setSelectedPicker] = React__default.useState(() => (pickerType & (DATE | DATE_HOUR)) ? DATE : HOUR);
const [selectedDatePicker, setSelectedDatePicker] = React__default.useState(() => WEEK);
const valueInit = React__default.useRef(false);
React__default.useEffect(() => {
if (!valueInit.current)
valueInit.current = true;
else
setValueObject(DatePickerHelper.getValueObject(value, pickerType, hourType));
}, [value, pickerType, hourType]);
/**
* Sets value.
*
* @param date
* @param hour
*/
const setValue$ = (date, hour) => {
if (!date && !hour)
setValue(null);
else {
date = date || (valueObject ? valueObject.date : today);
hour = hour || (valueObject ? valueObject.hour : { hour: 1, minute: 0, am: false });
if (typeof value == "string" || value.constructor == Date) {
let result = "";
if (pickerType != HOUR)
result += `${date.month + 1}/${date.day}/${date.year}`;
if (pickerType != DATE) {
if (result != "")
result += " ";
result += `${hour.hour}:${hour.minute}`;
if (hourType == $12)
result += ` ${hour.am ? "AM" : "PM"}`;
}
setValue(typeof value == "string" ? result : new Date(result));
}
else
setValue({
date,
hour
});
}
};
return (React__default.createElement(DatePickerElement, Object.assign({}, elementProps, { size: size, sizeSm: sizeSm, sizeMd: sizeMd, sizeLg: sizeLg, sizeXl: sizeXl, type: type }),
React__default.createElement(Header, { valueObject: valueObject, today: today, selectedPicker: selectedPicker, setSelectedPicker: setSelectedPicker, type: type, pickerType: pickerType, showCloseIcon: showCloseIcon, lang: lang, onClose: onClose }),
React__default.createElement(Body, null,
React__default.createElement(TransitionSwitch.TransitionSwitch, { active: selectedPicker },
React__default.createElement(CSSTransition.CSSTransition, { value: DATE, className: "src-dp-fade-in", duration: 150 },
React__default.createElement(DatePickerItem, { valueObject: valueObject, date: date, setDate: setDate, selectedDatePicker: selectedDatePicker, setSelectedDatePicker: setSelectedDatePicker, setValue: setValue$, orientation: orientation, weekStartDay: weekStartDay, lang: lang })),
React__default.createElement(CSSTransition.CSSTransition, { value: HOUR, className: "src-dp-fade-out", duration: 150 },
React__default.createElement(HourPickerItem, { valueObject: valueObject, setValue: setValue$, hourType: hourType, orientation: orientation, lang: lang })))),
showButtons && React__default.createElement(Buttons, { value: value, setValue: setValue, initialValue: initialValue, setInitialValue: setInitialValue, onSave: onSave, onCancel: onCancel, type: type, lang: lang })));
};
exports.$12 = $12;
exports.DATE_HOUR = DATE_HOUR;
exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
exports.DMY = DMY;
exports.DT = DT;
exports.DatePicker = DatePicker;
exports.DatePickerHelper = DatePickerHelper;
exports.HT = HT;
exports.MDY = MDY;
exports.PT = PT;
exports.StringHelper = StringHelper;
exports.W = W;