<Cthuvien:ma> / <Cthuvien:so> - <BSSInput>

Mô tả

BSSInput là component React cốt lõi để nhập dữ liệu dạng chữ (text, mã) và dạng số (tiền tệ, số thập phân), thay thế cho <Cthuvien:ma> và <Cthuvien:so> cũ.

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

• Chống giật Grid (Local State): Giá trị gõ vào chỉ cập nhật ở giao diện nội bộ và tự động format ngay lập tức (phân cách hàng nghìn, giới hạn ký tự số, chuyển chữ hoa...). Chỉ khi người dùng bấm Tab, Enter hoặc onBlur, nó mới kích hoạt onChange bắn giá trị thô ra ngoài để tránh render lại toàn bộ form/grid gây lag.
• Tự động Format Số/Tiền tệ: Nếu type='number' hoặc 'currency', component sẽ chặn gõ chữ cái, tự động gom nhóm hàng nghìn (dấu phẩy), hỗ trợ số âm (allowNegative) và tự làm tròn số thập phân (so_tp).
• Xử lý Text thông minh: Hỗ trợ đếm ngược ký tự (maxLength), tự động viết hoa (kieu_chu), và tương thích tốt với bộ gõ tiếng Việt có dấu (onCompositionStart/End).
• Phím tắt điều hướng: Hỗ trợ nhảy focus tự động sang control tiếp theo khi nhấn Enter (trong form có #dt_ct).

Thuộc tính

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

Control Cũ	<BSSInput>	Kiểu	Mô tả / Chú ý khi chuyển đổi
ten	label	string	Tên nhãn (hỗ trợ dịch tự động).
nhap	readOnly / editable	bool	Cũ: nhap="K". Mới: Dùng readOnly={true} (đổi màu nền vàng nhạt mặc định).
kieu_chu	kieu_chu	bool	Giữ nguyên ý nghĩa: true sẽ tự động UPPERCASE ký tự. Dùng khi thay thế Cthuvien:ma.
co_dau	allowNegative	bool	Dành cho nhập số. Cũ: "C" -> Mới: true (Cho phép gõ dấu trừ ở đầu).
so_tp	so_tp	number	Số chữ số thập phân cho phép nhập. Cũ là kiểu string giờ chuyển thành number (VD: so_tp={2}).
nhom	type	string	Cũ: nhom="C" để gom dấu phẩy. Mới: gán type="currency" để kích hoạt auto-format số.
kt_xoa	(Không còn)		Logic xóa quản lý ở lớp dữ liệu store/form.

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

Tên	Kiểu	Mặc định	Có thể có	Mục đích
id	string	useId()		Định danh của control. Render ra HTML với prefix BSS_.
name	string	sinh tự động		Tên của trường dữ liệu, bắt buộc khi làm việc với Form và Validation.
label	string			Nhãn hiển thị bên trái của ô nhập liệu (tự động dịch đa ngôn ngữ).
labelWidth	number / string	var(--bss-label-width)	100, '120px', '20%'	Độ rộng của nhãn.
type	string	'text'	'text', 'number', 'currency'	Nếu chọn 'number' hoặc 'currency', giá trị sẽ tự động căn lề phải và bật format số liệu.
value	any			Giá trị thực lưu trong state của cha (VD: Số 1500000 hoặc Chuỗi "NV001").
required	bool	false	true / false	Bắt buộc nhập (hiển thị sao đỏ cạnh label).
readOnly	bool	false	true / false	Chỉ đọc, nền input chuyển thành màu nhấn (#F9F8CF) và khóa sửa.
error	string			Nội dung lỗi hiển thị (hoặc lấy từ context useValidation). Làm viền input chuyển đỏ.
onChange	function		(e) => void	Sự kiện bắn ra khi commit dữ liệu. Giá trị trả ra đã bị lột bỏ format (không còn dấu phẩy).

Các thuộc tính Mở rộng

Tên	Kiểu	Mặc định	Mục đích
maxLength	number		Độ dài chuỗi tối đa. Nếu khai báo, sẽ xuất hiện bộ đếm nhỏ ở góc dưới báo số ký tự còn lại. Khi chạm 0 sẽ chuyển thành số màu đỏ.
kieu_chu	bool	false	Nếu true, luôn biến text nhập vào thành in hoa (áp dụng cho mã).
so_tp	number	0	Số chữ số thập phân tối đa (chỉ dùng cho type='number'/'currency').
allowNegative	bool	false	Bật tính năng nhận diện dấu âm - ở đầu chuỗi (chỉ dùng cho type='number'/'currency').
className	string		CSS mở rộng cho bọc ngoài (thêm tailwind utilities như mt-2, w-1/2...).
fontSizeInput / lineHeight	number	10.5 / 24	Cho phép ép CSS nội tuyến định nghĩa lại font chữ và chiều cao text nhập.

Cơ chế Hoạt động Phía Client

• Nhập liệu Text: Hỗ trợ composition (chữ có dấu như tiếng Việt). Việc gõ chữ không gọi onChange liên tục mà đợi nhả phím hoàn tất (onCompositionEnd) để tránh lỗi bộ gõ.
• Nhập liệu Số/Tiền:
  • Khởi tạo: Số truyền vào 1200.5 -> Được format thành 1,200.50 trên giao diện (nếu so_tp={2}).
  • Khi gõ: Trực tiếp loại bỏ các ký tự chữ (a-z, biểu tượng lạ) bằng regex. Nếu xoá đến trống hoặc chỉ còn dấu -, UI sẽ làm sạch ô, còn giá trị báo ra ngoài là rỗng.
  • Khi xuất (Commit): Trước khi báo ra qua onChange trong các event onBlur/Enter, giá trị đã format sẽ được gọi qua hàm xử lý tiền tệ (CSO_SO) để trả lại chuỗi/số gốc không có dấu phẩy cho hệ thống lưu trữ.
• Tiện ích xóa số không (0) vô nghĩa: Nếu ô số đang có giá trị 0, khi người dùng bấm vào (Focus), ô tự động dọn thành rỗng để gõ số mới liền mạch.

Ví dụ

1. Khai báo mã chuẩn (Mã nhân viên, tự viết hoa):

<BSSInput 
  label="Mã nhân viên" 
  name="ma_nv"
  labelWidth={120}
  required={true}
  kieu_chu={true} // Tự động viết hoa (VD: "nv01" -> "NV01")
  maxLength={20}  // Có hiện bộ đếm ở góc
  value={data.ma_nv}
  onChange={handleChange}
/>

2. Khai báo số liệu / tiền tệ (Có số âm, có thập phân):

<BSSInput 
  label="Số tiền thanh toán" 
  name="tien_tt"
  type="currency" 
  allowNegative={true} // Nhận dấu - 
  so_tp={2}            // 2 số lẻ thập phân
  value={data.tien_tt} // VD: truyền 1250000.5
  onChange={handleChange}
/>

3. Dùng trong GridX (Không có label, cần render nhỏ gọn):

<BSSInput 
  type="text" 
  value={row.ghi_chu} 
  onChange={(e) => updateRowField(row.id, 'ghi_chu', e.target.value)}
  className="w-full h-full border-none bg-transparent"
/>