SVAR File Manager: یه فایل‌منیجر آماده برای React
ریاکت
فرانتاندخلاصهٔ کامل‌تر
SVAR React File Manager یه کامپوننت فایل‌منیجره که برای اپ‌های React ساخته شده. یعنی به‌جای این‌که خودتون از صفر یه صفحهٔ مدیریت فایل با درخت پوشه‌ها، لیست فایل‌ها و منوی راست‌کلیک بسازید، این کامپوننت رو می‌ذارید تو صفحه و یه رابط آشنا شبیه File Explorer تحویل می‌گیرید. نسخهٔ فعلیش با React 18 و 19 سازگاره و پشتیبانی کامل TypeScript هم داره.
نکتهٔ اصلیش اینه که به یه بک‌اند خاص گره نخورده. طبق توضیحات پروژه، یه API گسترده داره که باهاش می‌تونید عملیات‌های داده رو گوش بدید، وسطشون دست ببرید (intercept، یعنی قبل از اجرا جلوشون رو بگیرید یا تغییرشون بدید) یا خودتون اجراشون کنید. نتیجه‌ش اینه که میشه پشتش هر چیزی گذاشت: استوریج لوکال، دیتابیس یا سرویس ابری.
امکاناتش کامله: عملیات پایه مثل ساختن، حذف، کپی، کات، پیست و تغییر نام، آپلود و دانلود، نمای درختی، نمای لیست و کاشی‌ای، و یه پنل پیش‌نمایش که حجم و نوع و تاریخ تغییر فایل رو نشون می‌ده. یه حالت split view هم داره که دو تا مسیر رو کنار هم باز می‌کنه تا فایل‌ها رو بینشون جابه‌جا کنید. جستجو، تولبار، منوی راست‌کلیک، ناوبری با کیبورد، نمایش فضای مصرف‌شده، تم روشن و تاریک و پشتیبانی از چندزبانگی هم جزوشه.
برای داده‌های بزرگ هم فکر شده: پوشه‌ها به‌صورت پویا لود می‌شن، یعنی محتوای هر پوشه فقط وقتی بازش می‌کنید گرفته میشه و لازم نیست کل درخت فایل‌ها رو یه‌جا بفرستید. استفاده‌ش هم ساده‌ست؛ پکیج و CSSش رو ایمپورت می‌کنید و یه آرایه از فایل‌ها رو به پراپ data می‌دید. هر آیتم یه id به شکل مسیر داره به‌اضافهٔ size، date و type:
const files = [
{ id: "/Music", size: 4096, date: new Date(2023, 11, 1, 14, 45), type: "folder" },
{ id: "/Info.txt", size: 1000, date: new Date(2023, 10, 30, 6, 13), type: "file" },
];
const myComponent = () => (<FileManager data={files} />);نکات کلیدی:
- پکیج npm با نام @svar-ui/react-filemanager منتشر شده و با React 18 و 19 کار می‌کنه.
- API برای شنیدن، intercept و اجرای عملیات داده داره، پس به هر بک‌اندی وصل میشه.
- لود پویای پوشه‌ها باعث میشه با تعداد خیلی زیاد فایل هم کند نشه.
- split view، پنل پیش‌نمایش، جستجو و ناوبری کیبوردی به‌صورت پیش‌فرض داخلشه.
- تم روشن و تاریک، چندزبانگی و پشتیبانی کامل TypeScript داره.
