diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 0bd9322..8860515 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Pressable, StyleSheet } from 'react-native'; +import { Pressable, StyleSheet, I18nManager } from 'react-native'; import { VariantProps, createRestyleComponent, @@ -34,6 +34,8 @@ const AlertContainer = createRestyleComponent< Theme >([variantVariant], Box); +const isRTL = I18nManager.isRTL; + const Alert = ({ variant = 'info', icon, @@ -57,13 +59,21 @@ const Alert = ({ {caption ? ( - + {caption} ) : null} {description ? ( - {description} + + {description} + ) : null} {children ? ( diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap index c8935ed..a78a8de 100644 --- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap +++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap @@ -124,6 +124,7 @@ exports[`Alert should render alert correctly 1`] = ` "fontWeight": "500", "lineHeight": 16, "paddingBottom": 8, + "textAlign": "right", }, ] } @@ -140,6 +141,7 @@ exports[`Alert should render alert correctly 1`] = ` "color": "#273142", "fontFamily": "Rubik-Regular", "fontSize": 14, + "textAlign": "right", }, ] } diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 2dc4469..7fe66e0 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -6,6 +6,7 @@ import { TextInput, TextInputProps, TextInputFocusEventData, + I18nManager, } from 'react-native'; import theme, { Theme } from '../../theme'; import Box from '../Box/Box'; @@ -35,7 +36,7 @@ import Text from '../Text/Text'; type InputProps = React.ComponentProps & TextInputProps & { label?: string | null; - subLabel?: string | null; + subLabel?: string; labelFixed?: boolean; placeholder?: string; helpText?: string | null; @@ -76,12 +77,14 @@ export type TextInputHandles = Pick< 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' >; +const isRTL = I18nManager.isRTL; + const Input = forwardRef( ( { size = 'large', label, - subLabel, + subLabel = '', labelFixed, placeholder, helpText, @@ -120,7 +123,6 @@ const Input = forwardRef( subLabel, labelFixed, placeholder, - required, value, focused, }); @@ -235,10 +237,8 @@ const Input = forwardRef( ( editable={!disabled} accessibilityLabel={testID} testID={testID} + textAlign={isRTL ? 'right' : 'left'} /> {trailingText ? ( diff --git a/src/components/Input/InputHelpText.tsx b/src/components/Input/InputHelpText.tsx index 034b937..8665e8e 100644 --- a/src/components/Input/InputHelpText.tsx +++ b/src/components/Input/InputHelpText.tsx @@ -2,6 +2,9 @@ import React from 'react'; import Box from '../Box/Box'; import Text from '../Text/Text'; import { getHelpText, getTextColor } from './utils'; +import { I18nManager } from 'react-native'; + +const isRTL = I18nManager.isRTL; export const InputHelpText = React.memo( ({ @@ -33,7 +36,10 @@ export const InputHelpText = React.memo( return content ? ( - + {content} diff --git a/src/components/Input/InputLabel.tsx b/src/components/Input/InputLabel.tsx index 804546d..249d793 100644 --- a/src/components/Input/InputLabel.tsx +++ b/src/components/Input/InputLabel.tsx @@ -1,17 +1,17 @@ import React from 'react'; -import { Animated } from 'react-native'; +import { Animated, I18nManager } from 'react-native'; import Box from '../Box/Box'; import Text from '../Text/Text'; import { AnimatedTextPropsType, AnimatedViewPropsType } from './types'; import { getLabelColor } from './utils'; +const isRTL = I18nManager.isRTL; + export const InputLabel = React.memo( ({ label, subLabel, labelFixed, - required, - requiredText, errorState, successState, animatedViewProps, @@ -21,8 +21,6 @@ export const InputLabel = React.memo( label?: string | null; subLabel?: string | null; labelFixed?: boolean; - required?: boolean; - requiredText?: boolean; errorState: boolean; successState: boolean; animatedViewProps: AnimatedViewPropsType; @@ -44,9 +42,9 @@ export const InputLabel = React.memo( testID="fixed-label"> {label} - {!required && requiredText ? ( + {subLabel ? ( @@ -66,8 +64,9 @@ export const InputLabel = React.memo( height={inputHeight + 6} testID="outlined-label-box"> - {label} - {subLabel ?? ''} + {isRTL + ? `${subLabel ?? ''}${label}` + : `${label}${subLabel ?? ''}`} diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap index 4e2796e..a024a6a 100644 --- a/src/components/Input/__snapshots__/Input.test.tsx.snap +++ b/src/components/Input/__snapshots__/Input.test.tsx.snap @@ -53,8 +53,7 @@ exports[`Input should render disabled input correctly 1`] = ` } } > - label - undefined + label @@ -98,6 +97,7 @@ exports[`Input should render disabled input correctly 1`] = ` ] } testID="input" + textAlign="left" /> @@ -156,8 +156,7 @@ exports[`Input should render input correctly 1`] = ` } } > - label - undefined + label @@ -201,6 +200,7 @@ exports[`Input should render input correctly 1`] = ` ] } testID="input" + textAlign="left" /> @@ -259,8 +259,7 @@ exports[`Input should render input with error state and error text correctly 1`] } } > - label - undefined + label @@ -304,6 +303,7 @@ exports[`Input should render input with error state and error text correctly 1`] ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -497,6 +497,7 @@ exports[`Input should render input with error state correctly 1`] = ` ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -662,6 +662,7 @@ exports[`Input should render input with help text correctly 1`] = ` ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -793,6 +794,7 @@ exports[`Input should render input with icon correctly 1`] = ` ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -1015,6 +1016,7 @@ exports[`Input should render input with leadingText correctly 1`] = ` ] } testID="input" + textAlign="left" /> @@ -1073,8 +1075,7 @@ exports[`Input should render input with medium size correctly 1`] = ` } } > - label - undefined + label @@ -1118,6 +1119,7 @@ exports[`Input should render input with medium size correctly 1`] = ` ] } testID="input" + textAlign="left" /> @@ -1176,8 +1178,7 @@ exports[`Input should render input with small size correctly 1`] = ` } } > - label - undefined + label @@ -1221,6 +1222,7 @@ exports[`Input should render input with small size correctly 1`] = ` ] } testID="input" + textAlign="left" /> @@ -1279,8 +1281,7 @@ exports[`Input should render input with success state and success text correctly } } > - label - undefined + label @@ -1324,6 +1325,7 @@ exports[`Input should render input with success state and success text correctly ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -1517,6 +1519,7 @@ exports[`Input should render input with success state correctly 1`] = ` ] } testID="input" + textAlign="left" /> - label - undefined + label @@ -1682,6 +1684,7 @@ exports[`Input should render input with trailingText correctly 1`] = ` ] } testID="input" + textAlign="left" /> label + + + diff --git a/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap b/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap index 859f8fe..e31cfd6 100644 --- a/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap +++ b/src/components/Input/__snapshots__/InputHelpText.test.tsx.snap @@ -22,6 +22,7 @@ exports[`Input Help Text should render help text correctly 1`] = ` "fontSize": 12, "fontWeight": "400", "lineHeight": 14, + "textAlign": "right", }, ] } diff --git a/src/components/Input/__snapshots__/InputLabel.test.tsx.snap b/src/components/Input/__snapshots__/InputLabel.test.tsx.snap index a296ea9..ac1fca3 100644 --- a/src/components/Input/__snapshots__/InputLabel.test.tsx.snap +++ b/src/components/Input/__snapshots__/InputLabel.test.tsx.snap @@ -96,7 +96,6 @@ exports[`Input Label should render outlined label correctly 1`] = ` style={Object {}} > Label - @@ -126,7 +125,6 @@ exports[`Input Label should render outlined label with optional correctly 1`] = style={Object {}} > Label - diff --git a/src/components/Input/utils.test.ts b/src/components/Input/utils.test.ts index 678837a..8e6bd6f 100644 --- a/src/components/Input/utils.test.ts +++ b/src/components/Input/utils.test.ts @@ -14,7 +14,6 @@ describe('Input Utils', () => { const label = null; const labelFixed = false; const placeholder = null; - const required = false; const focused = false; const value = ''; @@ -23,7 +22,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -32,12 +30,11 @@ describe('Input Utils', () => { expect(result).toBe(''); }); - test('should return placeholder when label null and has placeholder and required', () => { + test('should return placeholder when label null and has placeholder', () => { // given const label = null; const labelFixed = false; const placeholder = 'placeholder'; - const required = true; const focused = false; const value = ''; @@ -46,7 +43,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -55,37 +51,11 @@ describe('Input Utils', () => { expect(result).toBe('placeholder'); }); - test('should return placeholder optional when label null, has placeholder and required false', () => { - // given - const label = null; - const subLabel = null; - const labelFixed = false; - const placeholder = 'placeholder'; - const required = false; - const focused = false; - const value = ''; - - // when - const result = getPlaceholderText({ - label, - subLabel, - labelFixed, - placeholder, - required, - value, - focused, - }); - - // then - expect(result).toBe(`placeholder ${subLabel}`); - }); - test('should return empty text when placeholder null and has label', () => { // given const label = 'label'; const labelFixed = false; const placeholder = null; - const required = false; const focused = false; const value = ''; @@ -94,7 +64,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -108,7 +77,6 @@ describe('Input Utils', () => { const label = 'label'; const labelFixed = true; const placeholder = 'placeholder'; - const required = false; const focused = false; const value = ''; @@ -117,7 +85,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -131,7 +98,6 @@ describe('Input Utils', () => { const label = 'label'; const labelFixed = false; const placeholder = 'placeholder'; - const required = false; const focused = false; const value = ''; @@ -140,7 +106,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -154,7 +119,6 @@ describe('Input Utils', () => { const label = 'label'; const labelFixed = false; const placeholder = 'placeholder'; - const required = false; const focused = true; const value = 'value'; @@ -163,7 +127,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -177,7 +140,6 @@ describe('Input Utils', () => { const label = 'label'; const labelFixed = false; const placeholder = 'placeholder'; - const required = false; const focused = false; const value = 'value'; @@ -186,7 +148,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); @@ -200,7 +161,6 @@ describe('Input Utils', () => { const label = 'label'; const labelFixed = false; const placeholder = 'placeholder'; - const required = false; const focused = true; const value = ''; @@ -209,7 +169,6 @@ describe('Input Utils', () => { label, labelFixed, placeholder, - required, value, focused, }); diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts index 4b54b7f..1a47584 100644 --- a/src/components/Input/utils.ts +++ b/src/components/Input/utils.ts @@ -3,15 +3,13 @@ export const getPlaceholderText = ({ subLabel, labelFixed, placeholder, - required, value, focused, }: { label?: string | null; - subLabel?: string | null; + subLabel?: string; labelFixed?: boolean; placeholder?: string | null; - required: boolean; value?: string; focused: boolean; }) => { @@ -32,10 +30,10 @@ export const getPlaceholderText = ({ } if (!label && placeholder) { - if (required) { - return placeholder; - } else { + if (subLabel) { return `${placeholder} ${subLabel}`; + } else { + return placeholder; } } diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 1eeeaff..182f38f 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -5,6 +5,7 @@ import { ScrollView, StyleSheet, TouchableOpacity, + I18nManager, } from 'react-native'; import theme from '../../theme'; import Box from '../Box/Box'; @@ -32,6 +33,8 @@ export type ModalProps = A11yProps & wrongPressThresholdMs?: number; }>; +const isRTL = I18nManager.isRTL; + const Modal = ({ visible, title, @@ -96,7 +99,8 @@ const Modal = ({ + numberOfLines={2} + textAlign={isRTL ? 'left' : 'right'}> {title} diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap index 0c25052..5628605 100644 --- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap @@ -95,6 +95,7 @@ exports[`Modal should render Modal when visible true with children 1`] = ` "fontSize": 16, "fontWeight": "500", "lineHeight": 20, + "textAlign": "right", }, ] } diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 3395164..5f80ffd 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -13,6 +13,7 @@ import { Pressable, StyleProp, ViewStyle, + I18nManager, } from 'react-native'; import theme, { Theme } from '../../theme'; import Text from '../Text/Text'; @@ -139,6 +140,8 @@ const Switch = ({ return result; }, [testID, accessibilityLabel, accessible]); + const isRTL = I18nManager.isRTL; + return ( handleValueChange(!isEnabled)} {...testProps}> & TextInputProps & { label?: string | null; @@ -237,6 +240,7 @@ const TextArea = forwardRef( editable={!disabled} accessibilityLabel={testID} testID={testID} + textAlign={isRTL ? 'right' : 'left'} /> diff --git a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap index ba9856b..76e0cc8 100644 --- a/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap +++ b/src/components/TextArea/__snapshots__/TextArea.test.tsx.snap @@ -99,6 +99,7 @@ exports[`TextArea should render TextArea correctly 1`] = ` ] } testID="textArea" + textAlign="left" />