react-anpicker
Version:
a react date picker for supporting persian dates
270 lines (269 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const helpers_1 = require("../helpers");
const MainProps_1 = require("../Models/MainProps");
var ControlActionTypeEnum;
(function (ControlActionTypeEnum) {
ControlActionTypeEnum[ControlActionTypeEnum["toggle"] = 0] = "toggle";
ControlActionTypeEnum[ControlActionTypeEnum["setMode"] = 1] = "setMode";
ControlActionTypeEnum[ControlActionTypeEnum["setDay"] = 2] = "setDay";
ControlActionTypeEnum[ControlActionTypeEnum["setMonth"] = 3] = "setMonth";
ControlActionTypeEnum[ControlActionTypeEnum["setYear"] = 4] = "setYear";
ControlActionTypeEnum[ControlActionTypeEnum["nextYear"] = 5] = "nextYear";
ControlActionTypeEnum[ControlActionTypeEnum["prevYear"] = 6] = "prevYear";
ControlActionTypeEnum[ControlActionTypeEnum["setYearPageNumber"] = 7] = "setYearPageNumber";
ControlActionTypeEnum[ControlActionTypeEnum["setPopupStyles"] = 8] = "setPopupStyles";
ControlActionTypeEnum[ControlActionTypeEnum["setInnerValue"] = 9] = "setInnerValue";
})(ControlActionTypeEnum || (ControlActionTypeEnum = {}));
const reducer = (state, action) => {
switch (action.type) {
case ControlActionTypeEnum.toggle:
return Object.assign(Object.assign({}, state), { open: action.payload });
case ControlActionTypeEnum.setMode:
return Object.assign(Object.assign({}, state), { mode: action.payload });
case ControlActionTypeEnum.setDay:
return Object.assign(Object.assign({}, state), { day: action.payload });
case ControlActionTypeEnum.setMonth:
return Object.assign(Object.assign({}, state), { month: action.payload });
case ControlActionTypeEnum.setYear:
return Object.assign(Object.assign({}, state), { year: action.payload });
case ControlActionTypeEnum.nextYear:
return state.mode === MainProps_1.Modes.years
? Object.assign(Object.assign({}, state), { yearPageNumber: state.yearPageNumber + 1 }) : Object.assign(Object.assign({}, state), { year: state.year + 1 });
case ControlActionTypeEnum.prevYear:
return state.mode === MainProps_1.Modes.years
? Object.assign(Object.assign({}, state), { yearPageNumber: state.yearPageNumber - 1 }) : Object.assign(Object.assign({}, state), { year: state.year > 1 ? state.year - 1 : 1 });
case ControlActionTypeEnum.setYearPageNumber:
return Object.assign(Object.assign({}, state), { yearPageNumber: action.payload });
case ControlActionTypeEnum.setPopupStyles:
return Object.assign(Object.assign({}, state), { popupStyle: action.payload });
case ControlActionTypeEnum.setInnerValue:
return Object.assign(Object.assign({}, state), { year: action.payload.y, month: action.payload.m, day: action.payload.d });
default:
return state;
}
};
const formatter = (date, format) => {
return format
? format
.replace("0", date.y.toString())
.replace("1", date.m.toString())
.replace("2", date.d.toString())
: `${date.y}/${date.m}/${date.d}`;
};
const getValueDigits = (value, locale) => {
if (!value)
return null;
let arr = value === null || value === void 0 ? void 0 : value.split("/");
if (arr.length !== 3)
return null;
let y = parseInt(arr[0]);
let m = parseInt(arr[1]);
let d = parseInt(arr[2]);
if (isNaN(y) || isNaN(m) || isNaN(d))
return null;
else if (m < 1 || m > 12)
return null;
else if (d < 1 || d > locale.daysOfEachMonth(y, m))
return null;
else
return [y, m, d];
};
const useControl = (props) => {
let init = (0, react_1.useMemo)(() => {
let res = props.value;
if (res) {
const arr = getValueDigits(res, props.locale);
if (!!arr) {
return [arr[0], arr[1], arr[2]];
}
}
let dt = (0, helpers_1.convertToLocalDate)(new Date(), props.locale);
return [dt[0], dt[1], dt[2]];
}, []);
const [tempValue, setTempValue] = (0, react_1.useState)(props.value);
const toggleLock = (0, react_1.useRef)(false);
const [state, dispatch] = (0, react_1.useReducer)(reducer, {
mode: MainProps_1.Modes.days,
year: init[0],
month: init[1],
day: init[2],
open: false,
yearPageNumber: 0,
});
const handleFocus = (e) => {
e.stopPropagation();
if (toggleLock.current)
return;
toggleLock.current = true;
setTimeout(() => (toggleLock.current = false), 1000);
toggle(true);
};
const handleBlure = () => {
if (!props.value || toggleLock.current) {
return;
}
let arr = getValueDigits(props.value, props.locale);
if (!arr) {
return;
}
dispatch({
type: ControlActionTypeEnum.setInnerValue,
payload: {
y: arr[0],
m: arr[1],
d: arr[2],
},
});
};
const toggle = (0, react_1.useCallback)((open) => {
dispatch({ type: ControlActionTypeEnum.toggle, payload: open });
// setPopupStyles({
// left:input
// })
}, []);
const setPopupStyles = (0, react_1.useCallback)((styles) => {
dispatch({ type: ControlActionTypeEnum.setPopupStyles, payload: styles });
}, []);
const handleChange = (e) => {
const v = e.target.value;
setTempValue(v);
toggle(false);
if (!v) {
props.onChange("");
return;
}
let arr = getValueDigits(v, props.locale);
if (!arr)
return;
props.onChange(`${arr[0]}/${arr[1]}/${arr[2]}`, props.locale.convertToDate(arr[0], arr[1], arr[2]));
dispatch({
type: ControlActionTypeEnum.setInnerValue,
payload: {
y: arr[0],
m: arr[1],
d: arr[2],
},
});
};
const onSelectYear = (newYear) => {
dispatch({
type: ControlActionTypeEnum.setYear,
payload: newYear,
});
dispatch({
type: ControlActionTypeEnum.setMode,
payload: MainProps_1.Modes.days,
});
//props.onChange(formatter({ y: newYear, m: state.month, d: 1 }))
};
const onSelectMonth = (newMonth) => {
dispatch({
type: ControlActionTypeEnum.setMonth,
payload: newMonth,
});
dispatch({
type: ControlActionTypeEnum.setMode,
payload: MainProps_1.Modes.days,
});
//props.onChange(formatter({ y: state.year, m: newMonth, d: 1 }))
};
const onSelectDay = (newDay) => {
dispatch({
type: ControlActionTypeEnum.setDay,
payload: newDay,
});
props.onChange(formatter({ y: state.year, m: state.month, d: newDay }), props.locale.convertToDate(state.year, state.month, newDay));
toggle(false);
};
const setMode = (0, react_1.useCallback)((newMode) => {
dispatch({
type: ControlActionTypeEnum.setMode,
payload: newMode,
});
}, []);
const nextYear = (0, react_1.useCallback)(() => {
dispatch({ type: ControlActionTypeEnum.nextYear });
}, []);
const prevYear = (0, react_1.useCallback)(() => {
dispatch({ type: ControlActionTypeEnum.prevYear });
}, []);
const nextMonth = (0, react_1.useCallback)(() => {
dispatch({ type: ControlActionTypeEnum.setDay, payload: 1 });
dispatch({
type: ControlActionTypeEnum.setMonth,
payload: state.month === 12 ? 1 : state.month + 1,
});
dispatch({ type: ControlActionTypeEnum.setMode, payload: MainProps_1.Modes.days });
}, [state.month]);
const prevMonth = (0, react_1.useCallback)(() => {
dispatch({ type: ControlActionTypeEnum.setDay, payload: 1 });
dispatch({
type: ControlActionTypeEnum.setMonth,
payload: state.month === 1 ? 12 : state.month - 1,
});
dispatch({ type: ControlActionTypeEnum.setMode, payload: MainProps_1.Modes.days });
}, [state.month]);
const setToday = () => {
let eqDateArr = (0, helpers_1.convertToLocalDate)(new Date(), props.locale);
dispatch({
type: ControlActionTypeEnum.setInnerValue,
payload: {
y: eqDateArr[0],
m: eqDateArr[1],
d: eqDateArr[2],
},
});
props.onChange(formatter({
y: eqDateArr[0],
m: eqDateArr[1],
d: eqDateArr[2],
}), props.locale.convertToDate(eqDateArr[0], eqDateArr[1], eqDateArr[2]));
toggle(false);
};
(0, react_1.useEffect)(() => {
if (props.value !== tempValue) {
if (!props.value) {
setTempValue("");
return;
}
const arr = getValueDigits(props.value, props.locale);
if (!!arr) {
let v = formatter({
y: arr[0],
m: arr[1],
d: arr[2],
});
setTempValue(v);
dispatch({
type: ControlActionTypeEnum.setInnerValue,
payload: {
y: arr[0],
m: arr[1],
d: arr[2],
},
});
}
}
}, [props.value]);
return {
state,
tempValue,
toggle,
setPopupStyles,
handleFocus,
handleBlure,
handleChange,
setMode,
nextYear,
prevYear,
nextMonth,
prevMonth,
onSelectYear,
onSelectMonth,
onSelectDay,
setToday,
};
};
exports.default = useControl;