<Cthuvien:nhap> - <BSSButton>

Mô tả

BSSButton là component React thay thế cho <Cthuvien:nhap> cũ. Nó được dùng để tạo các nút tương tác (button) trên giao diện.

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

• Giao diện đa dạng (Variants): Hỗ trợ sẵn các style chuẩn (primary, delete, warning, outline...) để hiển thị màu sắc và trạng thái tương ứng mà không cần viết CSS thủ công.
• Trạng thái Loading: Hỗ trợ truyền cờ loading={true} để tự động khóa nút (disabled), làm mờ nội dung và hiện biểu tượng xoay (spinner) chờ xử lý, thay thế cho cơ chế khóa form_chay / giu cũ.
• Phím tắt toàn cục (Hotkey): Tích hợp sẵn bộ lắng nghe phím tắt (ví dụ CTRL+S, F2). Khi người dùng nhấn phím, nút sẽ tự động kích hoạt sự kiện onClick.
• Đa ngôn ngữ: Nội dung nút (children) hoặc tooltip (title) dạng string sẽ tự động được dịch qua hệ thống đa ngôn ngữ (useAppStore t()).
• Nút Icon (IconButton): Hỗ trợ biến thể nút nhỏ gọn chỉ có biểu tượng thông qua thuộc tính isIconOnly.

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:nhap> chuyển đổi sang <BSSButton>:

<Cthuvien:nhap>	<BSSButton>	Kiểu	Mô tả / Chú ý khi chuyển đổi
Text	children	string / node	Cũ: Gán qua thuộc tính. Mới: Truyền nội dung vào giữa thẻ mở và thẻ đóng của component.
anh	icon	JSX	Cũ: Tên file ảnh (vd: Anhap.png). Mới: Truyền thẳng icon component (vd: <Save size={14} />).
hoi	hotkey	string	Cũ: Vị trí ký tự gạch chân (accesskey). Mới: Chuỗi phím tắt rõ ràng (vd: 'CTRL+S', 'ALT+X').
giu	loading	bool	Cũ: Bật cờ khóa màn hình. Mới: Khi đang call API, truyền loading={true} để khóa nút và hiện spinner.
hoi_xoa	(Không còn)		Việc gọi Dialog Confirm (hỏi trước khi xóa) được tách ra xử lý riêng rẽ trong logic hook/function chứ không gắn cứng vào nút nữa.

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

Tên	Kiểu	Mặc định	Có thể có	Mục đích
id	string			Định danh của control. Tự động gắn thêm tiền tố BSS_ (vd: BSS_btnSave).
children	ReactNode			Nội dung label hiển thị trên nút. Tự động dịch nếu là string.
variant	string	'primary'	'primary', 'reset', 'cancel', 'delete', 'warning', 'success', 'outline', 'neutral'	Quyết định màu sắc và style của nút theo hệ thống thiết kế chuẩn.
icon	ReactNode		<Settings size={14} />	Biểu tượng icon hiển thị bên trái (hoặc chính giữa nếu là Icon Only).
title	string			Tooltip hiển thị khi hover chuột (hỗ trợ dịch tự động).
isIconOnly	bool	false	true / false	Nếu true, render dạng nút vuông nhỏ gọn chỉ chứa icon, ẩn chữ và hotkey.
className	string	''		Class CSS bổ sung (vd: w-full, mt-4).
disabled	bool	false	true / false	Vô hiệu hóa nút (không cho click, làm mờ nút).
loading	bool	false	true / false	Trạng thái đang xử lý. Tự động khóa nút, hiện spinner thay thế text.
hotkey	string		'F2', 'CTRL+S', 'ALT+X'	Khai báo phím tắt toàn cục cho nút (tự động render text phím tắt mờ nhỏ ở góc nút nếu không phải là Icon Only).
onClick	function		(e) => void	Sự kiện click chuột hoặc nhấn đúng tổ hợp hotkey.

Hoạt động phía Client

• Xử lý Hotkey: Nếu có khai báo hotkey, component sẽ tạo một global event listener trên window cho sự kiện keydown. Nó sẽ tự động phân tách chuỗi (vd CTRL+SHIFT+S -> kiểm tra e.ctrlKey, e.shiftKey, e.key === 'S'). Nếu khớp, và nút không ở trạng thái disabled hay loading, nó sẽ gọi onClick. Khi component unmount, sự kiện sẽ tự động được gỡ bỏ.
• Xử lý Loading: Nếu loading={true}, nội dung gốc (children và icon) sẽ bị mờ đi (opacity-0) và một biểu tượng <Loader2> dạng xoay vòng sẽ phủ lên trên nút. Đồng thời nút tự động bị disabled.

Ví dụ

import { BSSButton } from '@/components/BSSButton';
import { Save, Trash2, Settings } from 'lucide-react';

export default function ExampleButtons() {
  const handleSave = () => console.log('Saving...');
  const handleDelete = () => console.log('Deleting...');
  
  return (
    <div className="flex gap-4">
      {/* Nút cơ bản với phím tắt lưu */}
      <BSSButton 
        variant="primary" 
        icon={<Save size={14} />} 
        hotkey="CTRL+S" 
        onClick={handleSave}
      >
        Lưu dữ liệu
      </BSSButton>

      {/* Nút cảnh báo xóa, bật trạng thái loading */}
      <BSSButton 
        variant="delete" 
        icon={<Trash2 size={14} />} 
        loading={true} // Bật cờ này khi đang call API
        onClick={handleDelete}
      >
        Xóa bản ghi
      </BSSButton>

      {/* Nút chỉ hiện icon gọn gàng */}
      <BSSButton 
        variant="outline" 
        icon={<Settings size={16} />} 
        isIconOnly={true} 
        title="Cấu hình hệ thống"
      />
    </div>
  );
}