Skip to content

Commit bf9e2b3

Browse files
lidord-wixlidord-wix
authored
Fix/button RTL support (#898)
* fix/Button_RTL_support * update snapshots * add supportRTL to Button icon * add supportRTL to Button icon * remove unused code * remove unused code * remove unused code
1 parent 0cde5f9 commit bf9e2b3

File tree

2 files changed

+122
-13
lines changed

2 files changed

+122
-13
lines changed

‎src/components/button/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 114 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -849,14 +849,27 @@ exports[`Button container size should have no padding of button is an icon butto
849849
}
850850
>
851851
<Image
852+
accessibilityRole="image"
853+
accessible={false}
854+
assetGroup="icons"
852855
source={14}
853856
style={
854857
Array [
855858
Object {
856-
"marginRight": 8,
857-
"tintColor": "#FFFFFF",
859+
"tintColor": undefined,
858860
},
859861
undefined,
862+
undefined,
863+
undefined,
864+
undefined,
865+
Object {},
866+
Array [
867+
Object {
868+
"marginRight": 8,
869+
"tintColor": "#FFFFFF",
870+
},
871+
undefined,
872+
],
860873
]
861874
}
862875
/>
@@ -1643,13 +1656,26 @@ exports[`Button icon should apply color on icon 1`] = `
16431656
}
16441657
>
16451658
<Image
1659+
accessibilityRole="image"
1660+
accessible={false}
1661+
assetGroup="icons"
16461662
source={12}
16471663
style={
16481664
Array [
16491665
Object {
1650-
"tintColor": "green",
1666+
"tintColor": undefined,
16511667
},
16521668
undefined,
1669+
undefined,
1670+
undefined,
1671+
undefined,
1672+
Object {},
1673+
Array [
1674+
Object {
1675+
"tintColor": "green",
1676+
},
1677+
undefined,
1678+
],
16531679
]
16541680
}
16551681
/>
@@ -1684,13 +1710,26 @@ exports[`Button icon should apply color on icon 2`] = `
16841710
}
16851711
>
16861712
<Image
1713+
accessibilityRole="image"
1714+
accessible={false}
1715+
assetGroup="icons"
16871716
source={12}
16881717
style={
16891718
Array [
16901719
Object {
1691-
"tintColor": "#FF563D",
1720+
"tintColor": undefined,
16921721
},
16931722
undefined,
1723+
undefined,
1724+
undefined,
1725+
undefined,
1726+
Object {},
1727+
Array [
1728+
Object {
1729+
"tintColor": "#FF563D",
1730+
},
1731+
undefined,
1732+
],
16941733
]
16951734
}
16961735
/>
@@ -1725,16 +1764,29 @@ exports[`Button icon should include custom iconStyle provided as a prop 1`] = `
17251764
}
17261765
>
17271766
<Image
1767+
accessibilityRole="image"
1768+
accessible={false}
1769+
assetGroup="icons"
17281770
source={12}
17291771
style={
17301772
Array [
17311773
Object {
17321774
"tintColor": undefined,
17331775
},
1734-
Object {
1735-
"marginRight": 9,
1736-
"tintColor": "red",
1737-
},
1776+
undefined,
1777+
undefined,
1778+
undefined,
1779+
undefined,
1780+
Object {},
1781+
Array [
1782+
Object {
1783+
"tintColor": undefined,
1784+
},
1785+
Object {
1786+
"marginRight": 9,
1787+
"tintColor": "red",
1788+
},
1789+
],
17381790
]
17391791
}
17401792
/>
@@ -1771,13 +1823,26 @@ exports[`Button icon should return icon style according to different variations
17711823
}
17721824
>
17731825
<Image
1826+
accessibilityRole="image"
1827+
accessible={false}
1828+
assetGroup="icons"
17741829
source={12}
17751830
style={
17761831
Array [
17771832
Object {
1778-
"tintColor": "#00BBF2",
1833+
"tintColor": undefined,
17791834
},
17801835
undefined,
1836+
undefined,
1837+
undefined,
1838+
undefined,
1839+
Object {},
1840+
Array [
1841+
Object {
1842+
"tintColor": "#00BBF2",
1843+
},
1844+
undefined,
1845+
],
17811846
]
17821847
}
17831848
/>
@@ -1812,13 +1877,26 @@ exports[`Button icon should return icon style according to different variations
18121877
}
18131878
>
18141879
<Image
1880+
accessibilityRole="image"
1881+
accessible={false}
1882+
assetGroup="icons"
18151883
source={12}
18161884
style={
18171885
Array [
18181886
Object {
1819-
"tintColor": "#00BBF2",
1887+
"tintColor": undefined,
18201888
},
18211889
undefined,
1890+
undefined,
1891+
undefined,
1892+
undefined,
1893+
Object {},
1894+
Array [
1895+
Object {
1896+
"tintColor": "#00BBF2",
1897+
},
1898+
undefined,
1899+
],
18221900
]
18231901
}
18241902
/>
@@ -1853,13 +1931,26 @@ exports[`Button icon should return icon style according to different variations
18531931
}
18541932
>
18551933
<Image
1934+
accessibilityRole="image"
1935+
accessible={false}
1936+
assetGroup="icons"
18561937
source={12}
18571938
style={
18581939
Array [
18591940
Object {
18601941
"tintColor": undefined,
18611942
},
18621943
undefined,
1944+
undefined,
1945+
undefined,
1946+
undefined,
1947+
Object {},
1948+
Array [
1949+
Object {
1950+
"tintColor": undefined,
1951+
},
1952+
undefined,
1953+
],
18631954
]
18641955
}
18651956
/>
@@ -2795,13 +2886,26 @@ exports[`Button labelColor should return undefined color if this is an icon butt
27952886
}
27962887
>
27972888
<Image
2889+
accessibilityRole="image"
2890+
accessible={false}
2891+
assetGroup="icons"
27982892
source={12}
27992893
style={
28002894
Array [
28012895
Object {
28022896
"tintColor": undefined,
28032897
},
28042898
undefined,
2899+
undefined,
2900+
undefined,
2901+
undefined,
2902+
Object {},
2903+
Array [
2904+
Object {
2905+
"tintColor": undefined,
2906+
},
2907+
undefined,
2908+
],
28052909
]
28062910
}
28072911
/>

‎src/components/button/index.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {PureComponent} from 'react';
2-
import {Platform, StyleSheet, LayoutAnimation, Image, LayoutChangeEvent, ImageStyle, TextStyle, StyleProp} from 'react-native';
2+
import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, TextStyle, StyleProp} from 'react-native';
3+
import {Image} from 'react-native-ui-lib';
34
import _ from 'lodash';
45
import {
56
asBaseComponent,
@@ -56,6 +57,10 @@ export type ButtonPropTypes = TouchableOpacityProps &
5657
* Should the icon be right to the label
5758
*/
5859
iconOnRight?: boolean;
60+
/**
61+
* whether the icon should flip horizontally on RTL locals
62+
*/
63+
supportRTL?: boolean;
5964
/**
6065
* Color of the button background
6166
*/
@@ -451,14 +456,14 @@ class Button extends PureComponent<Props, ButtonState> {
451456
}
452457

453458
renderIcon() {
454-
const {iconSource} = this.props;
459+
const {iconSource, supportRTL} = this.props;
455460

456461
if (iconSource) {
457462
const iconStyle = this.getIconStyle();
458463
if (typeof iconSource === 'function') {
459464
return iconSource(iconStyle);
460465
} else {
461-
return <Image source={iconSource} style={iconStyle}/>;
466+
return <Image source={iconSource} supportRTL={supportRTL} style={iconStyle}/>;
462467
}
463468
}
464469
return null;

0 commit comments

Comments
 (0)