Web: Components: Adapt Row component to RTL interface

packages/components/row/styled-row.js

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 import { tablet } from "../utils/device";
 import Base from "../themes/base";
 import { isMobile } from "react-device-detect";
+import { getCorrectFourValuesStyle } from "../utils/rtlUtils";
 
 const StyledRow = styled.div`
   cursor: default;
@@ -35,8 +36,11 @@ const StyledRow = styled.div`
   align-content: center;
 
   .row-loader {
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `margin-right: 9px;`
+        : `margin-left: 9px;`}
     padding: 0;
-    margin-left: 9px;
     display: flex;
     align-items: center;
     justify-items: center;
@@ -48,8 +52,14 @@ const StyledRow = styled.div`
     css`
       .checkbox {
         display: ${(props) => (props.checked ? "flex" : "none")};
-        margin-left: -4px;
+
-        padding: 10px 0px 10px 8px;
+        padding: ${getCorrectFourValuesStyle(
+          "10px 0px 10px 8px",
+          props.theme.interfaceDirection
+        )};
+        ${props.theme.interfaceDirection === "rtl"
+          ? `margin-right: -4px;`
+          : `margin-left: -4px;`}
       }
 
       .styled-element {
@@ -57,7 +67,7 @@ const StyledRow = styled.div`
       }
     `}
 `;
-StyledRow.defaultProps = { theme: Base };
+StyledRow.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
 
 const StyledContent = styled.div`
   display: flex;
@@ -72,7 +82,7 @@ const StyledContent = styled.div`
     height: ${(props) => props.theme.rowContent.height};
   }
 `;
-StyledContent.defaultProps = { theme: Base };
+StyledContent.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
 
 const StyledCheckbox = styled.div`
   display: flex;
@@ -104,8 +114,16 @@ const StyledCheckbox = styled.div`
 const StyledElement = styled.div`
   flex: 0 0 auto;
   display: flex;
-  margin-right: ${(props) => props.theme.row.element.marginRight};
+  ${({ theme }) =>
-  margin-left: ${(props) => props.theme.row.element.marginLeft};
+    theme.interfaceDirection === "rtl"
+      ? `
+      margin-left: ${theme.row.element.marginRight};
+      margin-right: ${theme.row.element.marginLeft};
+        `
+      : `
+      margin-right: ${theme.row.element.marginRight};
+      margin-left: ${theme.row.element.marginLeft};
+        `}
   user-select: none;
 
   .react-svg-icon svg {
@@ -115,7 +133,7 @@ const StyledElement = styled.div`
     margin: 4px 0 0 28px;
   } */
 `;
-StyledElement.defaultProps = { theme: Base };
+StyledElement.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
 
 const StyledContentElement = styled.div`
   margin-top: 6px;
@@ -128,15 +146,28 @@ const StyledOptionButton = styled.div`
   justify-content: flex-end;
 
   .expandButton > div:first-child {
-    padding: ${(props) => props.theme.row.optionButton.padding};
+    padding: ${({ theme }) =>
+      getCorrectFourValuesStyle(
+        theme.row.optionButton.padding,
+        theme.interfaceDirection
+      )};
 
-    margin-right: 0px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `margin-left: 0px;`
+        : `margin-right: 0px;`}
 
     @media (min-width: 1024px) {
-      margin-right: -1px;
+      ${({ theme }) =>
+        theme.interfaceDirection === "rtl"
+          ? `margin-left: -1px;`
+          : `margin-right: -1px;`}
     }
     @media (max-width: 516px) {
-      padding-left: 10px;
+      ${({ theme }) =>
+        theme.interfaceDirection === "rtl"
+          ? `padding-right: 10px;`
+          : `padding-left: 10px;`}
     }
   }
 
@@ -145,7 +176,9 @@ const StyledOptionButton = styled.div`
     margin-top: unset;
   }
 `;
-StyledOptionButton.defaultProps = { theme: Base };
+StyledOptionButton.defaultProps = {
+  theme: { ...Base, interfaceDirection: "ltr" },
+};
 
 export {
   StyledOptionButton,