From 3a3f950daaaf23a45b34cb57120fc4dc1ba6860b Mon Sep 17 00:00:00 2001
From: Ramin <39030920+raminr77@users.noreply.github.com>
Date: Mon, 26 Jul 2021 19:25:01 +0430
Subject: Add RTL Direction & Persian Translation (#79)

* feat: add RTL direction and persian lang

* feat: init RTL direction

* fix: style issues

Co-authored-by: Ramin <r.rezaei@digikala.com>
---
 src/App.js             | 19 +++++++++++++++++--
 src/components/Card.js | 12 +++++++++---
 src/i18n.js            | 25 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index d05f151..5fdb388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,8 +5,22 @@ import './style.css';
 import logo from '../src/images/wifi.png';
 
 function App() {
+  const html = document.querySelector('html');
   const { t, i18n } = useTranslation();
 
+  const changeLanguage = (language) => {
+    if (language === 'fa-IR') {
+      html.style.direction = 'rtl';
+    } else {
+      html.style.direction = 'ltr';
+    }
+    i18n.changeLanguage(language);
+  };
+
+  if (i18n.language === 'fa-IR') {
+    html.style.direction = 'rtl';
+  }
+
   return (
     <div className="App">
       <h1>
@@ -18,7 +32,7 @@ function App() {
         <label>{t('select')}</label>
         <select
           value={i18n.language}
-          onChange={(e) => i18n.changeLanguage(e.target.value)}
+          onChange={(e) => changeLanguage(e.target.value)}
         >
           <option value="en-US">en-US</option>
           <option value="zh-HK">繁體中文🇭🇰</option>
@@ -26,6 +40,7 @@ function App() {
           <option value="es">es</option>
           <option value="pt">Português</option>
           <option value="ja">日本語</option>
+          <option value="fa-IR">Persian</option>
           <option value="ru-RU">Русский</option>
           <option value="uk-UA">Українська</option>
           <option value="nl-NL">Nederlands</option>
@@ -41,7 +56,7 @@ function App() {
         <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>.
       </p>
 
-      <Card />
+      <Card direction={i18n.language === 'fa-IR' ? 'rtl' : 'ltr'} />
     </div>
   );
 }
diff --git a/src/components/Card.js b/src/components/Card.js
index 298f968..bcb7acc 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './style.css';
 
-export const Card = () => {
+export const Card = ({ direction = 'ltr' }) => {
   const firstLoad = useRef(true);
   const [qrvalue, setQrvalue] = useState('');
   const [network, setNetwork] = useState({
@@ -64,7 +64,7 @@ export const Card = () => {
         id="print-area"
         style={{ maxWidth: portrait ? '350px' : '100%' }}
       >
-        <h1 style={{ textAlign: portrait ? 'center' : 'left' }}>
+        <h1 style={{ textAlign: portrait ? 'center' : 'unset' }}>
           {t('wifi.login')}
         </h1>
 
@@ -74,7 +74,13 @@ export const Card = () => {
         >
           <QRCode
             className="qrcode"
-            style={{ paddingRight: portrait ? '' : '1em' }}
+            style={
+              !portrait
+                ? direction === 'ltr'
+                  ? { paddingRight: '1em' }
+                  : { paddingLeft: '1em' }
+                : {}
+            }
             value={qrvalue}
             size={175}
           />
diff --git a/src/i18n.js b/src/i18n.js
index c6e7a06..fcb3ff9 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -209,6 +209,31 @@ const resources = {
       select: 'Выбор языка',
     },
   },
+  'fa-IR': {
+    translation: {
+      title: 'کارت WiFi',
+      'desc.use':
+        'توسط اطلاعات شبکه WiFi خود یک کارت ساده چاپ کنید و آن را به یخچال بچسبانید و یا در کیف پول خود نگه دارید.',
+      'desc.privacy':
+        'اطلاعات شبکه شما هرگز به سرور ارسال نمی‌شود و هیچگونه ردیابی، آنالیز و یا تحلیل در این وب سایت انجام نمی‌شود. مشاهده ',
+      'desc.source': 'سورس کد',
+      'wifi.login': 'اتصال به شبکه WiFi',
+      'wifi.name': 'نام شبکه',
+      'wifi.name.placeholder': 'نام شبکه خود را وارد کنید',
+      'wifi.password': 'رمز‌عبور',
+      'wifi.password.placeholder': 'رمز‌عبور شبکه خود را وارد کنید',
+      'wifi.password.hide': 'رمز‌عبور را بعد از چاپ کارت مخفی کن.',
+      'wifi.password.encryption': 'رمزنگاری',
+      'wifi.tip':
+        'دوربین تلفن خود را روی تصویر (QR Code) گرفته تا به صورت خودکار به شبکه متصل شوید.',
+      'wifi.alert.name': 'اسم شبکه شما نباید خالی باشد.',
+      'wifi.alert.password.length.5': 'رمز‌عبور باید حداقل ۵ حرف داشته باشد.',
+      'wifi.alert.password.8': 'رمز‌عبور باید حداقل ۸ حرف داشته باشد.',
+      'button.rotate': 'چرخاندن',
+      'button.print': 'چاپ',
+      select: 'انتخاب زبان',
+    },
+  },
   'uk-UA': {
     translation: {
       title: 'Карта WiFi',
-- 
cgit v1.2.3