IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: Adapt Text component to RTL interface

Browse Source
This commit is contained in:
Aleksandr Lushkin 2023-05-30 13:56:16 +02:00
parent 98e31c2d7a
commit d384e2fc9d
3 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/components/text/common-text-styles.js
View File

@ -1,8 +1,10 @@
import { css } from "styled-components";
import getTextAlign from "./utils/getTextAlign";
const commonTextStyles = css`
font-family: ${(props) => props.theme.fontFamily};
text-align: ${(props) => props.textAlign};
text-align: ${(props) =>
getTextAlign(props.textAlign, props.theme.interfaceDirection)};
color: ${(props) =>
props.colorProp ? props.colorProp : props.theme.text.color};
${(props) =>

2
packages/components/text/styled-text.js
View File

@ -45,6 +45,6 @@ const StyledText = styled.p`
${(props) => props.noSelect && NoUserSelect}
`;
StyledText.defaultProps = { theme: Base };
StyledText.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
export default StyledText;

17
packages/components/text/utils/getTextAlign.js Normal file
View File

@ -0,0 +1,17 @@
/*
* Returns correct text-align value depending on interface direction (ltr/rtl)
*/
const getTextAlign = (currentTextAlign, interfaceDirection) => {
if (interfaceDirection === "ltr") return currentTextAlign;
switch (currentTextAlign) {
case "left":
return "right";
case "right":
return "left";
default:
return currentTextAlign;
}
};
export default getTextAlign;