{"version":3,"file":"purify.es-fde60cdc.js","sources":["../../../app/javascript/hooks/useDatetimePickerData.ts","../../../app/javascript/components/templates/YoomDateTimePicker/YoomDateTimePicker.tsx","../../../node_modules/dompurify/dist/purify.es.js"],"sourcesContent":["// @ts-nocheck\nimport moment from \"moment\";\n\nexport const useDatetimePickerData = (year, month, date, hour, minute, datetime) => {\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([year, month, 1]).endOf(\"month\").date() ? moment([year, month, 1]) : moment([year, month, date]);\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(DateTimeFormat).day() : null;\n weeks.forEach((_, i) => {\n if (d === 1 && i < current_day) {\n stashDays[w][i] = moment(DateTimeFormat).subtract(current_day - i, \"days\");\n } else if (d === MonthAllDays && i > current_day) {\n stashDays[w][i] = moment(DateTimeFormat).add(i - current_day, \"days\");\n } else if (current_day !== null && i === current_day) {\n stashDays[w][i] = moment(DateTimeFormat);\n }\n });\n\n if (moment(DateTimeFormat).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 latestDate.year(),\n latestDate.month(),\n latestDate.date(),\n latestDate.hour(),\n latestDate.minute(),\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\";\nimport style from \"./YoomDateTimePicker.module.scss\";\nimport { useDatetimePickerData } from \"../../../hooks/useDatetimePickerData\";\nimport { getImageUrl } from \"../../../commons/assets_path\";\n\nconst weeks = [0, 1, 2, 3, 4, 5, 6];\nconst week_ja = [\"日\", \"月\", \"火\", \"水\", \"木\", \"金\", \"土\"];\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 customFormat,\n}) => {\n const [current, setCurrent] = useState(value ? moment(value) : moment());\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 = customFormat ? customFormat : 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(DateTime));\n setDateFormat(moment(DateTime));\n target.current.value = moment(DateTime).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(DateTime));\n setDateFormat(moment(DateTime));\n target.current.value = moment(DateTime).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(date).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);\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