همین اول بگم از سر بی موضوعی این پست رو می‌نویسم، شاید استارتی شد برای ادامه!

من جدیدا به ReactJS روی آوردم، هنوز خیلی مسلط نشدم که بخوام مطالب پیچیده در موردش بنویسم اما اولین چالشی که باهاش داشتم، پیاده سازی یک پنل مدیریتی تر و تمیز و شیک بود که routeها، منوی راهبری و … توش پیاده شده باشه و من بتونم با خیال راحت کار توسعه رو انجام بدم. از اونجایی که ارادت خاصی به material design داشتم، کمی سرچ کردم و به material-ui رسیدم.

در حال مطالعه و تست کامپوننت‌های مختلفش بودم که رسیدم به این پروژه! پروژه رو ستاپ کردم و اولین مشکل، عدم پشتیبانی از RTL بود و البته فونت مناسب برای زبان فارسی. از اونجایی که خود material-ui به خوبی از RTL پشتیبانی می‌کرد، با توجه به مستندات خودش ، تغییراتی در پروژه‌ی اصلی دادم و کل داشبور رو RTL کردم و فونت زیبای وزیر که کار آقای راستیکردار بود هم بهش اضافه کردم. شما می‌تونید پروژه رو از این آدرس ببینید و اگر دوست داشتید استفاده کنید. یا اینکه ادامه مطلب رو بخونید تا با چگونگی انجامش آشنا شید.

راست‌چین کردن material-ui

مرحله ۱) ابتدا از فایل public/index.html را باز کنید و به body و html پروپرتی direction رو با مقدار rtl بدید.

<html lang="fa_IR" direction="rtl">
...
<body direction="rtl">

مشاهده تغییرات کد در gitHub

مرحله ۲) حالا باید برای پروژه یک theme تعریف کنیم و direction: rtl رو در اون اعمال کنیم. برای اینکار فایل src/layouts/Dashboard/Dashboard.jsx رو باز و این کد‌ها رو به جاهایی که باید اضافه می‌کنیم.

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

در کد بالا که بطور مشخص لوازمی که برای ایجاد قالب نیاز داریم رو import کردیم.

حالا باید با استفاده از متد createMuiTheme کانفیگ قالب خودمون رو ایجاد کنیم. به این شکل:

const theme = createMuiTheme({
  direction: 'rtl'
});

و در پایان باید با استفاده از کامپوننت MuiThemeProvider قالب خودمون (همون ثابت theme) رو به کل پروژه اعمال کنیم.

return (
    <MuiThemeProvider theme={theme}>
	...
	</MuiThemeProvider>
);

مشاهده تغییرات کد در gitHub

دلیل اینکه قالب رو به این کامپوننت اضافه کردیم این بود که در واقع این کامپوننت پس از کامپوننت‌های مربوط به route مادر همه‌ی کامپوننت‌هاست و بقیه تو دل این render می‌شن. پس با این حساب وقتی قالب رو به این اعمال کنیم، یعنی به همه اعمال کردیم.

مرحله ۳) خودشون گفتن از پلاگین jss-rtl استفاده کنیم. پس اول بصورت dependency نصبش می‌کنیم

yarn add jss-rtl

بعد می‌ریم تو همون فایل بالا و این تغییرات رو یکی یکی می‌دیم بره…

اول import کردن چیزایی که لازمه برای اینکار

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

حالا باید jss رو کانفیگ کنیم، به این شکل:

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

در انتها نیز با استفاده از کامپوننت JssProvider کانفیگ رو به کامپوننت App که در اینجا همون کامپوننت مادر باشه اعمال می‌کنیم.

return (
    <MuiThemeProvider theme={theme}>
        <JssProvider jss={jss} generateClassName={generateClassName}>
            ...
        </JssProvider>
    </MuiThemeProvider>
);

مشاهده تغییرات کد در gitHub

اصلاح استایل‌های مربوط به داشبورد

می‌شه گفت بطور کامل مراحل راست‌چین کردن کتابخونه material-ui رو انجام دادیم، اما خروجی هنوز طوری که باید باشه نیست. دلیل این موضوع انگولک‌هایی هست که در پروژه‌ی داشبورد انجام دادن و استایل‌های کاستوم بهش اعمال کردن.

ما برای بهتر کردن خروجی باید بصورت دستی، استایل‌های مربوط به کامپوننت‌های داشبورد رو که در مسیر src/assets/jss هست رو تغییر بدیم.

پس فایل استایلی که مربوط به کامپوننت مادر (src/assets/jss/material-dashboard-react/appStyle.jsx) باشه رو باز می‌کنیم و …

const appStyle = theme => ({
  wrapper: {
    direction: "rtl",
      ...
  },
  mainPanel: {
      ...
    float: "left",
      ...
  },
});

مشاهده تغییرات کد در gitHub

افزودن فونت وزیر

برای اینکار از cdn استفاده می‌کنیم. پس ابتدا فایل public/index.html را باز کنید و کد زیر رو در اون قرار بدید.

<link href="//cdn.rawgit.com/rastikerdar/vazir-font/v18.0.0/dist/font-face.css" rel="stylesheet" type="text/css" />

مشاهده تغییرات کد در gitHub

اما نکته خوب اینکه material-ui برای اعمال font face یک راه بسیار خوب پیش پا قرار داده و اون استفاده از همون custom theme خودمون.

ثابت theme رو که قبلا تعریف کرده بودیم رو بصورت زیر تغییر می‌دیم.

const theme = createMuiTheme({
  direction: 'rtl',
  typography: {
    fontFamily: '"Vazir", sans-serif'
  }
});

مشاهده تغییرات کد در gitHub

الان باید تمامی متون در تمامی کامپوننت‌ها با فونت زیرای وزیر نمایش داده بشن، اما اون انگولک‌ها دست از سرمون بر نداشته هنوز. پس فایل src/assets/jss/material-dashboard-react.jsx رو باز می‌کنیم و ثابت defaultFont رو بصورت زیر تغییر می‌دیم

const defaultFont = {
  fontWeight: "300",
  lineHeight: "1.5em"
};

مشاهده تغییرات کد در gitHub

همه چیز که نباید راست‌چین باشه!

یک ریزه‌کاری هم مونده، و اون اینکه direction چارت‌ها رو به همون شکل چپ‌چین نمایش بدیم تا بهتر دیده شن. پس فایل src/assets/jss/material-dashboard-react/chartCardStyle.jsx رو باز می‌کنیم و …

...
const chartCardStyle = {
  card,
  cardHeader: {
      ...
    direction: "ltr",
      ...
  }

مشاهده تغییرات کد در gitHub

همین!

اگر از عبارات فارسی استفاده کنید می‌بینید که به چه زیبایی نمایش داده می‌شن.

ممنون که این مطلب رو مطالعه کردید. سعی می‌کنم مطالب بعدی پربارتر و تخصصی‌تر باشه.

react reactjs material design