Scheduler และตารางข้อมูลสำหรับ React

Scheduler และตารางข้อมูลมีให้ใช้เป็นคอมโพเนนต์ React ด้วย ใน @needless-ui/react โดยมีฟีเจอร์ คีย์บอร์ด และการเข้าถึงเหมือนใน Angular ใช้สไตล์ชีตเดียวกัน และสัญญาอนุญาต MIT เดียวกัน คอมโพเนนต์อื่น ๆ กำลังตามมา ทั้งสองต้องใช้ React 19 และทำงานได้กับ Next.js App Router และ Vite

การติดตั้ง

install.sh

pnpm add @needless-ui/react @needless-ui/css

Import สไตล์

คอมโพเนนต์ไม่ได้มาพร้อมสไตล์ ให้ import สไตล์ชีตครั้งเดียวจากไฟล์ CSS ไฟล์หนึ่งในแอปของคุณ

globals.css

/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';

Layer ทำงานเหมือนใน Angular คือ reset อยู่ใน layer ก่อน nui และเมื่อใช้ Tailwind CSS ให้วาง nui ไว้ระหว่าง base ของ Tailwind กับ utilities ตามที่เริ่มต้นใช้งานแสดงไว้

Scheduler

แต่ละคอมโพเนนต์มี entry point ของตัวเอง Scheduler แสดง events ที่คุณส่งเข้าไป และแจ้งคุณเมื่อผู้ใช้ย้ายกิจกรรมหรือเลือกเวลาสำหรับกิจกรรมใหม่ โดยคุณเป็นผู้เก็บกิจกรรมไว้เอง

planner.tsx

ตารางข้อมูล

กำหนด columns ไว้นอกคอมโพเนนต์ เพื่อไม่ให้ตารางทำงานซ้ำทุกครั้งที่เรนเดอร์ การแก้ไขจะเรียก onRowsChange พร้อมแถวชุดใหม่ ส่วนเมธอดอย่างการส่งออกเป็น Excel อยู่ที่ ref ของตาราง

orders.tsx

API ในแบบของ React

คอมโพเนนต์ React ทำตามสเปกเดียวกับคอมโพเนนต์ Angular จึงมี API ที่ตรงกันในแบบของ React หน้า API ของ Scheduler และของตารางข้อมูลแสดง prop ครบทุกตัว

API ของ Angular และคู่แฝดใน React
Angular	React
Model เช่น `[(view)]`	สถานะ: `view` คู่กับ `onViewChange` หรือ `defaultView` ให้คอมโพเนนต์เก็บค่าเอง
Output เช่น `(eventClick)`	Callback เช่น `onEventClick`
เทมเพลต เช่น `<ng-template nuiSchedulerEvent>`	ฟังก์ชันที่ใช้วาด เช่น `renderEvent`
เมธอด เช่น `scheduler.next()`	เมธอดบน `ref` เช่น `ref.current.next()`
`children` สำหรับข้อมูลแบบต้นไม้	`getChildren` เพราะ React สงวน `children` ไว้สำหรับเอลิเมนต์
`locale` ค่าเริ่มต้นคือ `LOCALE_ID` ของแอป	`locale` ค่าเริ่มต้นคือ `en-US`

การเรนเดอร์ฝั่งเซิร์ฟเวอร์

คอมโพเนนต์ทั้งสองเรนเดอร์บนเซิร์ฟเวอร์ได้ แล้วจึง hydrate ในเบราว์เซอร์ แพ็กเกจระบุว่าทั้งสองเป็น client component ดังนั้น Server Component จึงเรนเดอร์คอมโพเนนต์เหล่านี้ได้ด้วย prop ที่ serialize ได้ และฟังก์ชันช่วยอย่าง nuiSchedulerFromIcs ก็ทำงานบนเซิร์ฟเวอร์ได้ แต่ callback ส่งข้ามไปยังเบราว์เซอร์ไม่ได้ คอมโพเนนต์ที่รับ callback จึงต้องอยู่ใน client component ของคุณเอง เหมือนสองตัวอย่างข้างบน

สิ่งที่ขึ้นกับผู้อ่านต้องรอเบราว์เซอร์ ได้แก่เส้นบอกเวลาปัจจุบันของ Scheduler และวันนี้เป็นวันอะไร เมื่อเซิร์ฟเวอร์เรนเดอร์ Scheduler ให้กำหนด defaultDate เพราะวันนี้ของเซิร์ฟเวอร์อาจไม่ใช่วันนี้ของผู้อ่าน