<Cthuvien:nd> - <BSSArea>

Mô tả

BSSArea là component React thay thế cho <Cthuvien:nd> cũ. Nó được dùng để nhập văn bản nhiều dòng (<textarea>) với sự hỗ trợ của các tiện ích nâng cao.

Điểm nổi bật của BSSArea:

• Trình soạn thảo mở rộng (Modal): Hỗ trợ nút nhấn (icon) hoặc phím tắt F1 để mở form nhập liệu dạng popup lớn (giúp xem nội dung dài tiện hơn).
• Chống giật Grid (Local State): Khi gõ phím, dữ liệu chỉ lưu ở state nội bộ (local) để UI luôn mượt mà. Việc đẩy dữ liệu ra ngoài (onChange) chỉ xảy ra khi người dùng onBlur, bấm Tab, Enter (không kèm Shift), hoặc khi đóng modal.
• Phím tắt điều hướng: Hỗ trợ chuyển focus tự động sang control kế tiếp khi bấm Enter (khi nằm trong vùng form có id dt_ct).
• Tích hợp Validation: Tự động nhận diện lỗi (error) thông qua context useValidation hoặc truyền trực tiếp qua props.
• Đa ngôn ngữ: Mọi nhãn (label), placeholder, tooltip đều tự động chạy qua hệ thống đa ngôn ngữ (useAppStore t()).

Thuộc tính

So sánh thuộc tính cũ và mới

Dưới đây là bảng tham chiếu các thuộc tính từ control cũ <Cthuvien:nd> chuyển đổi sang <BSSArea>:

<Cthuvien:nd>	<BSSArea>	Kiểu	Mô tả / Chú ý khi chuyển đổi
ten	label	string	Tên/Nhãn của vùng nhập. Hệ thống mới dùng làm nhãn hiển thị và làm key cho đa ngôn ngữ.
nhap	readOnly	bool	Cũ: nhap="false" -> Mới: readOnly={true}.
kt_xoa, kieu_unicode	(Không còn)		Các logic xử lý xóa/giữ form hoặc charset được xử lý tự động bởi store/form handler mới.

Các thuộc tính của <BSSArea>

Tên	Kiểu	Mặc định	Mục đích
label	string		Nhãn hiển thị cho vùng nhập liệu (hỗ trợ dịch tự động).
labelWidth	number / string	var(--bss-label-width)	Độ rộng của nhãn, ví dụ 110, "120px", hoặc "30%".
value	string		Giá trị dữ liệu hiển thị trong ô.
id	string	useId()	Định danh cho control, nếu có truyền sẽ sinh ra id định dạng BSS_{id}.
name	string	sinh tự động	Tên định danh field để trả về trong event onChange hoặc dùng để bắt lỗi validation.
placeholder	string		Text gợi ý nhập liệu (hỗ trợ dịch tự động).
rows	number	3	Số lượng dòng hiển thị tối thiểu của textarea (chiều cao cơ bản).
required	boolean	false	Đánh dấu bắt buộc nhập, sẽ hiển thị thêm dấu sao đỏ * ở label.
readOnly	boolean	false	Đặt thành true để chỉ đọc, khóa chỉnh sửa văn bản.
error	string		Nội dung lỗi hiển thị trực tiếp. Nếu để trống sẽ tự lấy lỗi tương ứng biến name từ context useValidation.
className	string		Lớp CSS mở rộng tùy chỉnh (Tailwind/Custom).
onChange	function		Hàm callback phát ra Event giả lập chứa { target: { name, value } } khi xác nhận thay đổi (commit).

Phím tắt hỗ trợ

• Trong ô nhập liệu (Textarea):

  • F1: Mở Trình soạn thảo chi tiết (Popup Modal).
  • Enter: Lưu giá trị và tự động nhảy trỏ chuột (focus) sang input kế tiếp.
  • Shift + Enter: Xuống dòng bình thường (giữ nguyên focus).
  • Tab: Chuyển tab qua ô khác và lưu giá trị.

• Trong Trình soạn thảo (Popup Modal):

  • Escape: Đóng popup và tự động lưu giá trị.
  • Ctrl + Enter (hoặc Cmd + Enter): Lưu (xác nhận) và đóng popup.

Ví dụ

import { BSSArea } from '@/components/BSSArea';

export default function ExampleForm() {
  const handleChange = (e) => {
    // e.target.name sẽ trả về "plyD"
    // e.target.value sẽ trả về nội dung người dùng mới nhập xong
    console.log(e.target.name, e.target.value);
  };

  return (
    <BSSArea 
      label="Căn cứ pháp lý" 
      name="plyD" 
      value="Nội dung ví dụ..." 
      onChange={handleChange} 
      rows={3} 
      required={true}
      className="w-full" 
    />
  );
}