بیایید جدول داده ها را ایجاد کنیم. قسمت 7: تم تاریک و بازسازی

این یک مقاله واحد از یک سری در مورد ایجاد یک جزء پیشرفته جدول داده با استفاده از است واکنش نشان دهید، TanStack Table 8، Tailwind CSS و رابط کاربری بدون سر.

در قسمت قبل، ویژگی فیلترینگ ستون را برای ستون های جدول پیاده سازی کردیم.

این مقاله بر مجموعه ای از پیشرفت های کوچکتر و در عین حال تاثیرگذار در پروژه ما تمرکز خواهد کرد. آن را به عنوان یک قسمت کابل بین‌بعدی در Rick and Morty در نظر بگیرید که به چند ویژگی مهم و بازسازی‌ها می‌پردازد که اگرچه رویداد اصلی نیستند، اما برای بهبود کیفیت کلی کد، قابلیت نگهداری و تجربه کاربر بسیار مهم هستند.

توکن سازی

توکن سازی به عمل نمایش عناصر طراحی و ویژگی های آنها به عنوان متغیرهای قابل استفاده مجدد (توکن) اشاره دارد.

از آنجایی که ما از اندازه ها و بالشتک های Tailwind استفاده می کنیم، باید فقط مقادیر رنگ را نشانه گذاری کنیم. به جای مقادیر خاص کدگذاری سخت (به عنوان مثال، teal-600، نام های معنی دار را به این عناصر اختصاص می دهیم (primary، secondaryو غیره).

به این ترتیب، تغییرات یک توکن بر تمام عناصری که از آن استفاده می‌کنند، تأثیر می‌گذارد و از ثبات در کل برنامه اطمینان حاصل می‌کند. این امر به ویژه برای تم تاریک.

ما رنگ های توکن شده خود را در آن قرار می دهیم ./tailwind.config.js فایل به عنوان موضوع

const colors = require('tailwindcss/colors');

export default {
  //...
  theme: {
    extend: {
      colors: {
        primary: colors.stone['600'],
        secondary: colors.cyan['800'],
        backgroundLight: colors.white,
        textDark: colors.stone['100'],
        textLight: colors.stone['950'],
        hoverColor: colors.cyan['100'],
        borderColor: colors.stone['300'],
      },
    },
  },
};

سپس به جای استفاده مستقیم از رنگ‌های Tailwind، این متغیرهای تم را اعمال می‌کنیم. بنابراین bg-stone-600 کلاس CSS می شود bg-primary و غیره

تم تاریک

در گذشته، ویندوز 95 صفحه‌نمایش‌های ما را با پس‌زمینه‌های عمدتاً سفید مایل به آبی، که نشانه‌ای از زمان خود بود، زیبا می‌کرد. به عنوان یک سیستم عامل پیشرفته، مجهز به سخت‌افزار و نرم‌افزار پیشرفته‌ای بود که از نسل من استقبال زیادی کرد. پارادایم رابط WYSYWIG یک انحراف تازه از محیط های قدیمی تر و مبتنی بر ترمینال بود که توسط رنگ های سیاه و سبز تسلط داشتند. جالب اینجاست که روند امروز در جهت مخالف تغییر کرده است.

اکنون وقتی رنگ‌هایمان را مرتب کرده‌ایم، می‌توانیم شروع به ساخت تم تیره کنیم تا به ترجیحات زیبایی‌شناختی نسل مدرن احترام بگذاریم.

مرورگرهای مدرن پشتیبانی داخلی از تنظیمات حالت تاریک را از طریق prefers-color-scheme پرس و جو رسانه ای این پرسش رسانه ای به عنوان پلی بین تنظیمات حالت تاریک کاربر در سراسر سیستم و سبک های برنامه شما عمل می کند.

Tailwind CSS یک راه راحت برای پیاده سازی حالت تاریک با خود ارائه می دهد dark: کلاس کمکی این کلاس به شما این امکان را می دهد که به راحتی سبک های خاص ارائه حالت تاریک را تعریف کنید.

در اینجا نشانه های رنگ تیره جدید ما هستند. ما داریم background توکن اختصاص داده شده است #000 مقدار (مشکی خالص) برای تیره کردن جدول. برای بقیه توکن‌ها، ما اشباع را تنظیم کردیم تا به کنتراست مشابهی با پس‌زمینه سفید دست پیدا کنیم.

برای دستیابی به یک تجربه حالت تاریک بدون درز، با گسترش تم موجود شما شروع می‌کنیم تا انواع تیره نشانه‌های رنگی شما را نیز شامل شود. از این نشانه های رنگ تیره برای استایل دادن به جدول داده در حالت تاریک استفاده می شود. برای مثال، می‌توانیم توکن پس‌زمینه را روی #000 (مشکی خالص) تنظیم کنیم تا پس‌زمینه‌ای تیره برای جدول ایجاد کنیم.

برای نمادهای رنگی باقیمانده، تنظیم سطوح اشباع آنها ضروری است. این تضمین می کند که متن و سایر عناصر کنتراست کافی را در برابر پس زمینه تاریک حفظ می کنند و خوانایی را حفظ می کنند.

primaryDark: colors.stone['700'],
backgroundDark: colors.black,
textDark: colors.stone['100'],
hoverColorDark: colors.cyan['600'],
borderColorDark: colors.stone['600'],

در اینجا نحوه اعمال تم تیره روی کامپوننت آمده است.

<Input
  //...
  className={classNames(
    //..
    // focus styles light
    'focus:bg-backgroundLight/85 focus:text-textLight focus:placeholder-transparent',
    // focus styles dark
    'dark:focus:bg-backgroundDark/85 dark:focus:text-textDark',
    'transition-all duration-200',
  )}
/>

مجوزهای ستون ها

برای بهبود تجربه کاربری جدول، می‌خواهیم قابلیت‌های ستون را تنظیم کنیم. هدف این است که برخی از ویژگی ها را برای برخی از ستون ها غیرفعال کنید.

ما قلاب موجود را گسترش خواهیم داد src/DataTable/features/useColumnActions.tsx شامل یک ملک جدید: disabled.
این ویژگی یک پرچم بولی خواهد بود که نشان می دهد آیا یک ویژگی خاص برای ستون فعلی غیرفعال است یا خیر. اطلاعات لازم در مورد پیکربندی ستون از TanStack Table Context API بازیابی خواهد شد.

type ColumnAction = {
  //...
  /** True when table capability is disabled by config */
  disabled?: boolean;
};

/**
 * React hook which returns an array of table column actions config objects
 */
export const useColumnActions = (
  context: HeaderContext<Row, unknown>,
): ColumnAction[] => {
  //...
  return useMemo<ColumnAction[]>(
    () => [
      // Pin left button
      {
        // ...
        disabled: !context.column.getCanPin(),
      },
      // Pin right button
      {
        //...
        disabled: !context.column.getCanPin(),
      },
      // Sort ASC button
      {
        //...
        disabled: !context.column.getCanSort(),
      },
      // Sort DESC button
      {
        //...
        disabled: !context.column.getCanSort(),
      },
      // Filter button
      {
        //...
        disabled: !context.column.getCanFilter(),
      },
    ],
    [/*...*/],
  );
};

حال از این منطق در داخل استفاده خواهیم کرد src/DataTable/cells/HeaderCell.tsx. را وصل می کنیم disabled دارایی از قلاب به مربوطه Button تکیه گاه جزء همچنین، رویدادهای اشاره گر را غیرفعال می کنیم و با استفاده از کمک کننده Tailwind CSS مربوطه، کدورت 30 درصد را برای حالت غیرفعال تنظیم می کنیم.

در src/DataTable/cells/HeaderCell.tsx، ما را ادغام خواهیم کرد disabled اموال به دست آمده از useColumnActions قلاب به مربوطه Button جزء

اگر پرچم غیرفعال شده روی true تنظیم شده باشد:

• جزء دکمه در حالت غیرفعال ارائه می شود.

• رویدادهای اشاره گر برای دکمه با استفاده از Tailwind CSS غیرفعال خواهند شد pointer-events-none کلاس

• کدورت متن و نماد به 30٪ کاهش می یابد تا وضعیت دکمه را به صورت بصری نشان دهد.

{items.map(({ label, icon: Icon, onClick, disabled }) => (
  <MenuItem key={label} as={Fragment}>
    {() => (
      <Button
        disabled={disabled}
        onClick={onClick}
        className={classNames(
          // ...
          // disabled styles
          'disabled:text-textDark/30 disabled:pointer-events-none'
        )}
      >
        {Icon}
        <div>{label}div>
      Button>
    )}
  MenuItem>
))}

بالاخره باید تنظیم کنیم enableColumnFilter، enablePinning و enableSorting خواص برای ستون های جدول در داخل src/DataTable/columnsConfig.tsx.

const columnHelper = createColumnHelper<Row>();

export const columns = [
  //...
  columnHelper.accessor('randomDecimal', {
    enableColumnFilter: false,
    enablePinning: false,
    enableSorting: false,
    //...
  }
  //...
]

حالت اشکال زدایی

آخرین تغییر بهبود کیفیت زندگی است. Tanstack دارای ابزارهای اشکال زدایی مناسبی است. بنابراین ما قصد داریم حالت debugAll را پیاده سازی کنیم.

داخل src/DataTable/DataTable.tsx ما لوازم جانبی را با آن گسترش خواهیم داد debug دارایی و این ویژگی را در useReactTable پارامترهای قلاب

type Props = {
  //...
  /**
   * Enable TanStack table debug mode
   * @see https://tanstack.com/table/latest/docs/api/core/table#debugall
   */
  debug?: boolean;
};

export const DataTable: FC<Props> = ({ tableData, locale = 'en-US', debug }) => {
  //...

  const table = useReactTable({
    //...
    debugAll: debug
  });
 //...
};

خلاصه فصل

در این 7 مقاله ما جزء جدول داده ها را از ابتدا با استفاده از جدول TanStack، Tailwind CSS و Headless UI ایجاد کردیم. ما ویژگی های زیر را پیاده سازی کردیم:

• اسکرول چند بعدی: پیمایش صاف و همگام شده را در هر دو جهت افقی و عمودی فعال می کند، با هدر چسبنده که تراز را در سراسر نمای درگاه حفظ می کند.

• طراحی واکنشگرا: به طور یکپارچه با اندازه های مختلف صفحه تطبیق می یابد و از طیف گسترده ای از انواع داده ها، از جمله متن، اعداد، تاریخ ها و لیست های محدود قابل شمارش پشتیبانی می کند.

• اجزای فرعی قابل تنظیم: دیالوگ ها، منوهای کشویی و فیلدهای ورودی سفارشی برای تعامل بهتر با کاربر.

• مجازی سازی با کارایی بالا: تکنیک‌های مجازی‌سازی را قادر می‌سازد تا حدود 50000 ردیف را بدون کاهش قابل توجه عملکرد، حتی در ماشین‌های کم‌قدرت‌تر، به‌طور مؤثر ارائه دهند.

• پین کردن ستون: به کاربران این امکان را می دهد که ستون ها را در سمت چپ یا راست نمای درگاه پین ​​کنند و فوکوس داده و خوانایی آن را بهبود می بخشد.

• مرتب سازی و فیلترینگ پیشرفته: مکانیسم‌های مرتب‌سازی و فیلتر هوشمند را پیاده‌سازی می‌کند که فرمت‌های داده خاص هر ستون را در نظر می‌گیرد.

• پشتیبانی از حالت تاریک: گزینه حالت تاریک کاربر پسند را ارائه می دهد.

در اینجا نسخه ی نمایشی کامل تمرین است.

ادامه دارد.