{"version":3,"file":"MyAppCreateForm-CBVBSyys.js","sources":["../../../app/javascript/hooks/useDatetimePickerData.ts","../../../app/javascript/components/templates/YoomDateTimePicker/YoomDateTimePicker.tsx","../../../app/javascript/components/templates/myApp/MyAppCreateForm.tsx"],"sourcesContent":["// @ts-nocheck\nimport moment from \"moment-timezone\";\nimport timeZoneMapping from \"../entries/_modules/time_zone/config\";\n\nexport const useDatetimePickerData = (year, month, date, hour, minute, datetime, timeZone) => {\n const weeks = [0, 1, 2, 3, 4, 5, 6];\n const stashDays = new Array(6);\n let d = 1;\n let w = 0;\n stashDays[w] = [];\n const day =\n date > moment.tz([year, month, 1], timeZoneMapping[timeZone]).endOf(\"month\").date()\n ? moment.tz([year, month, 1], timeZoneMapping[timeZone])\n : moment.tz([year, month, date], timeZoneMapping[timeZone]);\n const MonthAllDays = day.daysInMonth();\n while (d <= MonthAllDays) {\n let DateTimeFormat;\n if (datetime) {\n DateTimeFormat = [year, month, d, hour, minute];\n } else {\n DateTimeFormat = [year, month, d];\n }\n\n const current_day = d <= MonthAllDays ? moment.tz(DateTimeFormat, timeZoneMapping[timeZone]).day() : null;\n weeks.forEach((_, i) => {\n if (d === 1 && i < current_day) {\n stashDays[w][i] = moment.tz(DateTimeFormat, timeZoneMapping[timeZone]).subtract(current_day - i, \"days\");\n } else if (d === MonthAllDays && i > current_day) {\n stashDays[w][i] = moment.tz(DateTimeFormat, timeZoneMapping[timeZone]).add(i - current_day, \"days\");\n } else if (current_day !== null && i === current_day) {\n stashDays[w][i] = moment.tz(DateTimeFormat, timeZoneMapping[timeZone]);\n }\n });\n\n if (moment.tz(DateTimeFormat, timeZoneMapping[timeZone]).day() === 6 || (d === MonthAllDays && w < 5)) {\n w += 1;\n stashDays[w] = [];\n }\n d += 1;\n }\n if (stashDays[5] && !stashDays[5].length) {\n const latestDate = stashDays[4][6];\n weeks.forEach((_, i) => {\n stashDays[5][i] = moment\n .tz(\n [latestDate.year(), latestDate.month(), latestDate.date(), latestDate.hour(), latestDate.minute()],\n timeZoneMapping[timeZone],\n )\n .add(i + 1, \"days\");\n });\n }\n\n return stashDays;\n};\n","// @ts-nocheck\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport moment from \"moment-timezone\";\nimport style from \"./YoomDateTimePicker.module.scss\";\nimport { useDatetimePickerData } from \"../../../hooks/useDatetimePickerData\";\nimport { getImageUrl } from \"../../../commons/assets_path\";\nimport { useTranslation } from \"react-i18next\";\nimport timeZoneMapping from \"../../../entries/_modules/time_zone/config\";\n\nconst weeks = [0, 1, 2, 3, 4, 5, 6];\n\nexport const YoomDateTimePicker = ({\n datetime,\n target,\n value = null,\n setDateFormat,\n open = false,\n editCell = null,\n keyFlag = false,\n customSelectedStyle = \"\",\n setKeyFlag,\n timeZone,\n}) => {\n const { t } = useTranslation();\n const week_ja = [\n t(\"YoomDateTimePicker.日\"),\n t(\"YoomDateTimePicker.月\"),\n t(\"YoomDateTimePicker.火\"),\n t(\"YoomDateTimePicker.水\"),\n t(\"YoomDateTimePicker.木\"),\n t(\"YoomDateTimePicker.金\"),\n t(\"YoomDateTimePicker.土\"),\n ];\n\n const [current, setCurrent] = useState(\n value ? moment.tz(value, timeZoneMapping[timeZone]) : moment.tz(timeZoneMapping[timeZone]),\n );\n const [days, setDays] = useState([]);\n const [year, setYear] = useState(current.year());\n const [month, setMonth] = useState(current.month());\n const [date, setDate] = useState(current.date());\n const [hour, setHour] = useState(current.hours());\n const [minute, setMinute] = useState(current.minute());\n const [isOpen, setOpen] = useState(open);\n const [fade, setFade] = useState(false);\n const [wrapStyle, setStyle] = useState();\n const [openPullDown, setOpenPullDown] = useState(false);\n const [hourFocus, setHourFocus] = useState(false);\n const [minuteFocus, setMinuteFocus] = useState(false);\n const pullDownRef = useRef();\n\n const format = datetime ? \"YYYY-MM-DD HH:mm\" : \"YYYY-MM-DD\";\n\n const next = (month, year) => {\n if (month < 11) {\n setMonth(month + 1);\n } else {\n setMonth(0);\n setYear(year + 1);\n }\n };\n\n const prev = (month, year) => {\n if (month > 0) {\n setMonth(month - 1);\n } else {\n setMonth(11);\n setYear(year - 1);\n }\n };\n\n const timeHourInput = (hour) => {\n hour = Number(hour);\n if (hour >= 0) {\n if (hour < 0 || hour > 23) {\n hour = 0;\n }\n setHour(hour);\n const DateTime = [year, month, date, hour, minute];\n setCurrent(moment.tz(DateTime, timeZoneMapping[timeZone]));\n setDateFormat(moment.tz(DateTime, timeZoneMapping[timeZone]));\n target.current.value = moment.tz(DateTime, timeZoneMapping[timeZone]).format(format);\n target.current.focus();\n }\n };\n\n const timeMinuteInput = (minute) => {\n minute = Number(minute);\n if (minute >= 0) {\n if (minute < 0 || minute > 59) {\n minute = 0;\n }\n setMinute(minute);\n const DateTime = [year, month, date, hour, minute];\n setCurrent(moment.tz(DateTime, timeZoneMapping[timeZone]));\n setDateFormat(moment.tz(DateTime, timeZoneMapping[timeZone]));\n target.current.value = moment.tz(DateTime, timeZoneMapping[timeZone]).format(format);\n }\n };\n\n const select = (date) => {\n if (date.month() !== month) {\n setMonth(date.month());\n setYear(date.year());\n }\n setCurrent(date);\n setDate(date.date());\n setDateFormat(date);\n target.current.value = moment.tz(date, timeZoneMapping[timeZone]).format(format);\n if (editCell !== null) {\n target.current.focus();\n }\n target.current.focus();\n };\n\n useEffect(() => {\n if (keyFlag) {\n setOpenPullDown(false);\n setKeyFlag(false);\n }\n function onFocus() {\n setOpen(true);\n }\n\n function onBlur() {\n setOpen(false);\n }\n\n function onMouseOver() {\n if (!keyFlag) {\n target.current.focus();\n setOpenPullDown(true);\n setOpen(true);\n }\n }\n\n function onMouseOut() {\n setOpenPullDown(false);\n }\n\n if (target.current) {\n const offsetHeight = target.current.offsetHeight;\n setStyle({\n position: \"absolute\",\n top: `${offsetHeight === 0 ? 34 : offsetHeight}px`,\n bottom: \"auto\",\n });\n target.current.addEventListener(\"focus\", onFocus);\n target.current.addEventListener(\"click\", onFocus);\n target.current.addEventListener(\"blur\", onBlur);\n }\n\n pullDownRef.current.addEventListener(\"mouseover\", onMouseOver);\n pullDownRef.current.addEventListener(\"mouseout\", onMouseOut);\n }, [target.current, keyFlag]);\n\n useEffect(() => {\n if (isOpen || openPullDown) {\n if (!fade) {\n setFade(true);\n }\n } else {\n if (fade) {\n setFade(false);\n }\n }\n }, [isOpen, openPullDown]);\n useEffect(() => {\n if (editCell !== null) {\n setFade(true);\n }\n }, [target.current]);\n\n useEffect(() => {\n const stashDays = useDatetimePickerData(year, month, date, hour, minute, datetime, timeZone);\n setDays(stashDays);\n }, [year, month, hour, minute, target]);\n\n return (\n
{week_ja[day] ? week_ja[day] : ``} | \n ))}\n
---|
select(moment)}\n >\n {moment.date()}\n | \n ))}\n