From a1ed9bf4da7057c7ea0ddb81c195b24e33a8e23e Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Mon, 27 Dec 2021 11:08:05 +0200 Subject: [PATCH] feat: add rtlcss to styled components. --- package.json | 1 + src/components/BankAccounts/index.js | 9 ++------- .../Dashboard/DashboardThemeProvider.js | 11 +++++++++-- .../AccountTransactionsDataTable.js | 4 +--- .../AccountTransactionsDetailsBar.js | 9 +++------ .../SMSMessageDialog/SMSMessageFormContent.js | 18 +++++------------- .../NotifyViaSMS/NotifyViaSMSForm.js | 15 +++------------ src/utils/styled-components.js | 9 --------- 8 files changed, 24 insertions(+), 52 deletions(-) delete mode 100644 src/utils/styled-components.js diff --git a/package.json b/package.json index 1b55b7a1d..b94ddb316 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "semver": "6.3.0", "style-loader": "0.23.1", "styled-components": "^5.3.1", + "stylis-rtlcss": "^2.1.1", "terser-webpack-plugin": "2.3.4", "ts-pnp": "1.1.5", "url-loader": "2.3.0", diff --git a/src/components/BankAccounts/index.js b/src/components/BankAccounts/index.js index 0022eddfa..875889670 100644 --- a/src/components/BankAccounts/index.js +++ b/src/components/BankAccounts/index.js @@ -4,7 +4,6 @@ import styled from 'styled-components'; import { Classes } from '@blueprintjs/core'; import clsx from 'classnames'; import Icon from '../Icon'; -import { whenRtl, whenLtr } from 'utils/styled-components'; const ACCOUNT_TYPE = { CASH: 'cash', @@ -185,9 +184,7 @@ const MetaLineValue = styled.div` text-align: center; color: rgb(23, 43, 77); font-size: 11px; - - ${whenLtr(`margin-left: auto;`)} - ${whenRtl(`margin-right: auto;`)} + margin-left: auto; `; const BankAccountMeta = styled.div` @@ -204,7 +201,5 @@ const AccountIconWrap = styled.div` position: absolute; top: 14px; color: #abb3bb; - - ${whenLtr(`right: 12px;`)} - ${whenRtl(`left: 12px;`)} + right: 12px; `; diff --git a/src/components/Dashboard/DashboardThemeProvider.js b/src/components/Dashboard/DashboardThemeProvider.js index 23300ddb9..7a4289e75 100644 --- a/src/components/Dashboard/DashboardThemeProvider.js +++ b/src/components/Dashboard/DashboardThemeProvider.js @@ -1,9 +1,16 @@ import React from 'react'; -import { ThemeProvider } from 'styled-components'; +import { ThemeProvider, StyleSheetManager } from 'styled-components'; +import rtlcss from 'stylis-rtlcss'; import { useAppIntlContext } from '../AppIntlProvider'; export function DashboardThemeProvider({ children }) { const { direction } = useAppIntlContext(); - return {children}; + return ( + + {children} + + ); } diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js index f6ebecbe4..8b1621db2 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js @@ -18,7 +18,6 @@ import { useAccountTransactionsContext } from './AccountTransactionsProvider'; import { handleCashFlowTransactionType } from './utils'; import { compose } from 'utils'; -import { whenRtl, whenLtr } from 'utils/styled-components'; /** * Account transactions data table. @@ -129,8 +128,7 @@ const CashflowTransactionsTable = styled(DashboardConstrantTable)` .tbody-inner { .tr .td:not(:first-child) { - ${whenLtr(`border-left: 1px solid #e6e6e6;`)} - ${whenRtl(`border-right: 1px solid #e6e6e6;`)} + border-left: 1px solid #e6e6e6; } } } diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js index a41068f09..bdec0f6b0 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.js @@ -14,7 +14,6 @@ import { curry } from 'lodash/fp'; import { Icon } from '../../../components'; import { useAccountTransactionsContext } from './AccountTransactionsProvider'; -import { whenRtl, whenLtr } from 'utils/styled-components'; function AccountSwitchButton() { const { currentAccount } = useAccountTransactionsContext(); @@ -23,7 +22,7 @@ function AccountSwitchButton() { } - > + > {currentAccount.name} ); @@ -161,8 +160,7 @@ const AccountBalanceAmount = styled.span` font-weight: 600; display: inline-block; color: rgb(31, 50, 85); - ${whenLtr(`margin-left: 10px;`)} - ${whenRtl(`margin-right: 10px;`)} + margin-left: 10px; `; const AccountSwitchItemName = styled.div` @@ -180,7 +178,6 @@ const AccountSwitchItemUpdatedAt = styled.div` const AccountSwitchButtonBase = styled(Button)` .bp3-button-text { - ${whenLtr(`margin-right: 5px;`)} - ${whenRtl(`margin-left: 5px;`)} + margin-right: 5px; } `; diff --git a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js index f9f72adad..90e70a27f 100644 --- a/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js +++ b/src/containers/Dialogs/SMSMessageDialog/SMSMessageFormContent.js @@ -12,8 +12,6 @@ import { useSMSMessageDialogContext } from './SMSMessageDialogProvider'; import { SMSMessagePreview } from 'components'; import { getSMSUnits } from '../../NotifyViaSMS/utils'; -import { whenRtl, whenLtr } from 'utils/styled-components'; - /** * SMS message form content. */ @@ -98,22 +96,16 @@ const MessageVariable = styled.div` const FormContent = styled.div` display: flex; `; + const FormFields = styled.div` width: 55%; `; + const FormPreview = styled.div` display: flex; flex-direction: column; width: 45%; - - ${whenLtr(` - padding-left: 25px; - margin-left: 25px; - border-left: 1px solid #dcdcdd; - `)} - ${whenRtl(` - padding-right: 25px; - margin-right: 25px; - border-right: 1px solid #dcdcdd; - `)} + padding-left: 25px; + margin-left: 25px; + border-left: 1px solid #dcdcdd; `; diff --git a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js index 5a51e958b..6af373a5c 100644 --- a/src/containers/NotifyViaSMS/NotifyViaSMSForm.js +++ b/src/containers/NotifyViaSMS/NotifyViaSMSForm.js @@ -15,7 +15,6 @@ import { FormObserver, SMSMessagePreview } from 'components'; import { transformToForm, safeInvoke } from 'utils'; import { getSMSUnits } from './utils'; -import { whenRtl, whenLtr } from 'utils/styled-components'; const defaultInitialValues = { notification_key: '', @@ -147,17 +146,9 @@ const SMSPreviewSectionRoot = styled.div` display: flex; flex-direction: column; width: 45%; - - ${whenLtr(` - padding-left: 25px; - margin-left: 25px; - border-left: 1px solid #dcdcdd; - `)} - ${whenRtl(` - padding-right: 25px; - margin-right: 25px; - border-right: 1px solid #dcdcdd; - `)} + padding-left: 25px; + margin-left: 25px; + border-left: 1px solid #dcdcdd; `; const SMSPreviewSectionNote = styled.div` diff --git a/src/utils/styled-components.js b/src/utils/styled-components.js deleted file mode 100644 index f03c8c2ad..000000000 --- a/src/utils/styled-components.js +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from 'styled-components'; - -export const whenRtl = (restCss) => css` - ${({ theme }) => theme.dir === 'rtl' && restCss} -`; - -export const whenLtr = (restCss) => css` - ${({ theme }) => theme.dir === 'ltr' && restCss} -`;