function DateTimeSelector({ timeOptions, onSelectDate, onSelectTime }) { const handleDateChange = (e)=>{ onSelectDate(e.target.value); }; const handleTimeChange = (e)=>{ if (e.target.value !== "") { onSelectTime(e.target.value); e.target.size = 0; } }; const handleClickTime = (e)=>{ e.preventDefault(); e.target.size = timeOptions.options.length; }; return /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 border border-[#ccc] rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full py-2 px-3 border border-[#ccc] rounded cursor-pointer", placeholder: "日程を選択してください", onFocus: (e)=>e.target.type = 'date', onChange: handleDateChange, onBlur: (e)=>{ if (e.target.value) { e.target.placeholder = ""; } else { e.target.placeholder = "日程を選択してください"; } e.target.type = 'text'; }, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "time-selection", className: "mt-2 w-full py-2 px-3 border border-[#ccc] rounded appearance-none cursor-pointer", onClick: handleClickTime, onChange: handleTimeChange, onBlur: (e)=>{ e.target.size = 0; if (!e.target.value) { e.target.value = ""; e.target.firstChild.selected = true; } }, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "ーー"), timeOptions.options.map((time, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: time, __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, time)))); } function DateTimeSelectorStory() { const timeSlots = Array.from({ length: 20 }, (_, index)=>{ const hour = Math.floor(index / 2) + 9; const minutes = index % 2 === 0 ? '00' : '30'; if (hour > 18) return null; return `${hour}:${minutes}`; }).filter(Boolean); const timeOptions = { value: '', options: timeSlots }; const handleSelectDate = (date)=>{ console.log(`Date selected: ${date}`); }; const handleSelectTime = (time)=>{ console.log(`Time selected: ${time}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(DateTimeSelector, { timeOptions: timeOptions, onSelectDate: handleSelectDate, onSelectTime: handleSelectTime, __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this })); } function MainComponent() { const [selectedDates, setSelectedDates] = React.useState([]); const [selectedTimes, setSelectedTimes] = React.useState([]); const handleSelectDate = (date)=>{ if (selectedDates.length >= 3) { alert('最大3つの日程を選択できます。'); return; } if (selectedDates.some((entry)=>entry.date === date)) { alert('この日は既に選択済みです。他の日を選んでください。'); return; } setSelectedDates([ ...selectedDates, { date } ]); }; const handleSelectTime = (time)=>{ if (selectedTimes.length >= 3) { alert('最大3つの時間を選択できます。'); return; } setSelectedTimes([ ...selectedTimes, time ]); }; const validateSubmission = ()=>{ if (selectedDates.length < 3 || selectedTimes.length < 3) { alert('日程と時間を3つ選択してください。'); return false; } return true; }; const handleSubmission = ()=>{ if (!validateSubmission()) return; const confirmation = window.confirm("本当に送信しますか?"); if (confirmation) alert("送信しました"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 font-roboto bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 text-center", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "クライアント用日程調整システム"), Array.from({ length: 3 }).map((_, index)=>/*#__PURE__*/ React.createElement(DateTimeSelector, { key: index, timeOptions: { options: [ '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00' ] }, onSelectDate: handleSelectDate, onSelectTime: handleSelectTime, __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg", onClick: handleSubmission, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "候補日を送信する")); }