‏react-resizable-panels 4.16 با کامپوننت Workspace

نسخهٔ 4.16.0 کتابخونهٔ react-resizable-panels منتشر شده و مهم‌ترین چیزش کامپوننت جدید Workspace هست. Workspace یعنی یه چیدمان از چند tabset (یعنی گروهی از تب‌ها که کنار هم نشستن). کاربر می‌تونه یه تب رو بکشه و ببره تو یه tabset دیگه، ترتیب تب‌ها رو عوض کنه، یا تب رو بندازه لبهٔ یه tabset تا اونو دو تیکه کنه. tabsetها رو هم می‌شه تغییر اندازه داد یا maximize کرد.

کل چیدمان با یه مدل serializable توصیف می‌شه، یعنی می‌شه اونو ذخیره کرد و بعداً برگردوند. یه نکتهٔ مهم دیگه اینه که وقتی تب جابه‌جا می‌شه، محتواش دوباره mount نمی‌شه؛ پس state داخل تب از دست نمی‌ره. پشتیبانی از موس، لمس و کیبورد هم داره.

برای شخصی‌سازی، propهای renderTab، renderTabsetToolbar و renderEmptyTabset و کامپوننت TabCloseButton اومدن و استایل‌دهی با classNames و styles انجام می‌شه. Workspace مثل Group به‌صورت uncontrolled کار می‌کنه و هوک‌های useWorkspaceRef و useWorkspaceCallbackRef دسترسی به API دستوریش رو می‌دن. محتوای داخل تب‌ها هم می‌تونه با هوک‌هایی مثل useParentTabset و useParentTabState از وضعیت اطرافش خبردار بشه.

برای تب‌هایی که انتخاب نشدن سه حالت هست (با hiddenTabBehavior): mount بمونن (پیش‌فرض)، unmount بشن، یا داخل یه مخفی React رندر بشن. تب انتخاب‌شده هم می‌تونه با serverRenderTabContent روی سرور رندر بشه.

چند باگ هم درست شده. اول، وقتی یکی از والدها zoom یا scale داشت، جداکننده‌ها بیشتر یا کمتر از نشانگر موس حرکت می‌کردن (مثلاً با zoom: 2 دو برابر). حالا حرکت نشانگر اول از پیکسل صفحه به پیکسل layout تبدیل می‌شه. دوم، جداکننده‌ها وقتی موس روی iframe داخل یه پنجرهٔ popup می‌رفت تو حالت hover گیر می‌کردن، چون چک instanceof HTMLIFrameElement برای iframe پنجرهٔ دیگه false برمی‌گشت. سوم، پیش‌نمایش resize با resizePreviewMode="separator" تو پنجرهٔ دیگه استایل جداکننده رو نداشت.

نکات کلیدی:

• کامپوننت جدید Workspace برای چیدمان تب‌هایی که با درگ جابه‌جا، تقسیم، resize و maximize می‌شن
• محتوای تب موقع جابه‌جایی remount نمی‌شه و چیدمان با یه مدل serializable ذخیره می‌شه
• hiddenTabBehavior سه حالت داره: mount موندن، unmount، یا رندر داخل مخفی
• رفع باگ حرکت نادرست جداکننده‌ها زیر CSS zoom یا scale transform
• رفع دو باگ مربوط به iframe و استایل‌ها تو پنجره‌های popup