react-mosaic؛ پنلهای کاشیشده توی ریاکت
ریاکت
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
تو مخزن پروژه اومده که react-mosaic یه مدیر پنجرهٔ کاشیای (tiling window manager) برای ریاکته: کاربر پنلها رو با درگ جابهجا میکنه، با کشیدن جداکنندهها اندازهشون رو عوض میده و چیدمان دلخواه خودش رو میسازه. الهامش هم مدیریت پنجره تو IDEها و کاشیکاری سبک i3 بوده.
راهاندازیش کوتاهه؛ به کامپوننت Mosaic میگی هر کاشی چطور رندر بشه و چیدمان اولیه چیه:
<Mosaic<string>
renderTile={(id, path) => (
<MosaicWindow<string> path={path} title={`Panel ${id}`}>
<div style={{ padding: 20 }}>Contents of {id}</div>
</MosaicWindow>
)}
initialValue={{ type: 'split', direction: 'row', children: ['a', 'b'] }}
/>به گفتهٔ نویسنده همین چند خط یه چیدمان دوپنلی میده با جداکنندهٔ درگشدنی، دستگیرهٔ جابهجایی روی نوار عنوان هر پنجره و دکمههای پیشفرض تولبار.
مهمترین تغییر نسخهٔ فعلی درخت n-تاییه: یه split دیگه فقط دو فرزند نداره و میتونه هر تعداد بگیره. تبها هم شهروند درجهیک شدن، یعنی کانتینر تب یه نوع گره تو خود درخت چیدمانه، نه قراردادی که از بیرون بهش چسبونده باشن.
کنترل چیدمان دست خودته: یا value و onChange میدی و درخت رو خودت مدیریت میکنی، یا initialValue میدی و کامپوننت مالکش میشه. درگودراپ روی react-dnd با بکاند HTML5 و لمسی سواره، و تمدهی هم با Blueprint و هم بدون اون کار میکنه؛ یه تم CSS پیشفرض بهعلاوهٔ متغیرهای CSS قابل بازنویسی داره.
مهاجرت از نسخهٔ ۶ هم عملاً رایگانه: درختهای دوتایی قدیمی موقع رندر خودکار تبدیل میشن و برای ارتقای صریح تابع convertLegacyToNary هست. پروژه با لایسنس Apache 2.0 منتشر شده و در اصل کوین وردیک تو Palantir ساختش.
نکات کلیدی:
- مدیر پنجرهٔ کاشیای برای ریاکت با جابهجایی و تغییر اندازهٔ درگی
- درخت چیدمان n-تایی و تب بهعنوان یه نوع گره
- حالت کنترلشده با value و onChange یا کنترلنشده با initialValue
- تبدیل خودکار چیدمانهای نسخهٔ ۶ و تابع convertLegacyToNary
- لایسنس Apache 2.0، در اصل ساختهٔ Palantir
