Skip to content

Commit 25793ea

Browse files
tom-unfacebook-github-bot
tom-un
authored and
facebook-github-bot
committed
Allow iOS PlatformColor strings to be ObjC or Swift UIColor selectors (#28703)
Summary: Per discussion in react-native-community/releases#186 the iOS `PlatformColor()` function is documented to use the semantic color names provided by the system. The referenced HIG documentation itself links to the `UIColor` documentation for semantic colors names. However, these names differ depending on if you are viewing the new Swift API docs or the Objective C docs. The current Objective C implementation in react-native assumes Objective C UIColor selector names that are suffixed 'Color'. But in Swift, Apple provides a Swift Extension on UIColor that makes aliases without the the 'Color' suffix and then makes the original selectors invalid presumably via `NS_UNAVAILABLE_SWIFT`. Since both selector names are valid depending on if you are using Objective C or Swift, let's make both forms be legal for `PlatformColor()`. In `RCTConvert.m` there is a dictionary of legal selector names. The code already supports the ability to have names be aliases of other selectors via a RCTSelector metadata key. The change adds code to the initialization of the map: it iterates over the keys in the map, which are all ObjC style UIColor selectors, and creates aliases by duplicating the entries, creating key names by stripping off the ObjC "Color" suffix, adds the RCTSelector key referring to the original and then appends these new Swift aliases to the map. ## Changelog [iOS] [Changed] - Allow iOS PlatformColor strings to be ObjC or Swift UIColor selectors Pull Request resolved: #28703 Test Plan: The PlatformColorExample.js is updated to use the new, shorter Swift selector names. There are still other examples in the same file and in unit tests that exercise the ObjC selector names. <img width="492" alt="PlatformColor" src="https://user-images.githubusercontent.com/30053638/79809089-89ab7d00-8324-11ea-8a9d-120b92edeedf.png"> Reviewed By: shergin Differential Revision: D21147404 Pulled By: TheSavior fbshipit-source-id: 0273ec855e426b3a7ba97a87645859e05bcd4126
1 parent d639063 commit 25793ea

File tree

2 files changed

+69
-52
lines changed

2 files changed

+69
-52
lines changed

‎RNTester/js/examples/PlatformColor/PlatformColorExample.js

+50-50
Original file line numberDiff line numberDiff line change
@@ -22,94 +22,94 @@ function PlatformColorsExample() {
2222
colors = [
2323
// https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors
2424
// Label Colors
25-
{label: 'labelColor', color: PlatformColor('labelColor')},
25+
{label: 'label', color: PlatformColor('label')},
2626
{
27-
label: 'secondaryLabelColor',
28-
color: PlatformColor('secondaryLabelColor'),
27+
label: 'secondaryLabel',
28+
color: PlatformColor('secondaryLabel'),
2929
},
3030
{
31-
label: 'tertiaryLabelColor',
32-
color: PlatformColor('tertiaryLabelColor'),
31+
label: 'tertiaryLabel',
32+
color: PlatformColor('tertiaryLabel'),
3333
},
3434
{
35-
label: 'quaternaryLabelColor',
36-
color: PlatformColor('quaternaryLabelColor'),
35+
label: 'quaternaryLabel',
36+
color: PlatformColor('quaternaryLabel'),
3737
},
3838
// Fill Colors
39-
{label: 'systemFillColor', color: PlatformColor('systemFillColor')},
39+
{label: 'systemFill', color: PlatformColor('systemFill')},
4040
{
41-
label: 'secondarySystemFillColor',
42-
color: PlatformColor('secondarySystemFillColor'),
41+
label: 'secondarySystemFill',
42+
color: PlatformColor('secondarySystemFill'),
4343
},
4444
{
45-
label: 'tertiarySystemFillColor',
46-
color: PlatformColor('tertiarySystemFillColor'),
45+
label: 'tertiarySystemFill',
46+
color: PlatformColor('tertiarySystemFill'),
4747
},
4848
{
49-
label: 'quaternarySystemFillColor',
50-
color: PlatformColor('quaternarySystemFillColor'),
49+
label: 'quaternarySystemFill',
50+
color: PlatformColor('quaternarySystemFill'),
5151
},
5252
// Text Colors
5353
{
54-
label: 'placeholderTextColor',
55-
color: PlatformColor('placeholderTextColor'),
54+
label: 'placeholderText',
55+
color: PlatformColor('placeholderText'),
5656
},
5757
// Standard Content Background Colors
5858
{
59-
label: 'systemBackgroundColor',
60-
color: PlatformColor('systemBackgroundColor'),
59+
label: 'systemBackground',
60+
color: PlatformColor('systemBackground'),
6161
},
6262
{
63-
label: 'secondarySystemBackgroundColor',
64-
color: PlatformColor('secondarySystemBackgroundColor'),
63+
label: 'secondarySystemBackground',
64+
color: PlatformColor('secondarySystemBackground'),
6565
},
6666
{
67-
label: 'tertiarySystemBackgroundColor',
68-
color: PlatformColor('tertiarySystemBackgroundColor'),
67+
label: 'tertiarySystemBackground',
68+
color: PlatformColor('tertiarySystemBackground'),
6969
},
7070
// Grouped Content Background Colors
7171
{
72-
label: 'systemGroupedBackgroundColor',
73-
color: PlatformColor('systemGroupedBackgroundColor'),
72+
label: 'systemGroupedBackground',
73+
color: PlatformColor('systemGroupedBackground'),
7474
},
7575
{
76-
label: 'secondarySystemGroupedBackgroundColor',
77-
color: PlatformColor('secondarySystemGroupedBackgroundColor'),
76+
label: 'secondarySystemGroupedBackground',
77+
color: PlatformColor('secondarySystemGroupedBackground'),
7878
},
7979
{
80-
label: 'tertiarySystemGroupedBackgroundColor',
81-
color: PlatformColor('tertiarySystemGroupedBackgroundColor'),
80+
label: 'tertiarySystemGroupedBackground',
81+
color: PlatformColor('tertiarySystemGroupedBackground'),
8282
},
8383
// Separator Colors
84-
{label: 'separatorColor', color: PlatformColor('separatorColor')},
84+
{label: 'separator', color: PlatformColor('separator')},
8585
{
86-
label: 'opaqueSeparatorColor',
87-
color: PlatformColor('opaqueSeparatorColor'),
86+
label: 'opaqueSeparator',
87+
color: PlatformColor('opaqueSeparator'),
8888
},
8989
// Link Color
90-
{label: 'linkColor', color: PlatformColor('linkColor')},
90+
{label: 'link', color: PlatformColor('link')},
9191
// Nonadaptable Colors
92-
{label: 'darkTextColor', color: PlatformColor('darkTextColor')},
93-
{label: 'lightTextColor', color: PlatformColor('lightTextColor')},
92+
{label: 'darkText', color: PlatformColor('darkText')},
93+
{label: 'lightText', color: PlatformColor('lightText')},
9494
// https://developer.apple.com/documentation/uikit/uicolor/standard_colors
9595
// Adaptable Colors
96-
{label: 'systemBlueColor', color: PlatformColor('systemBlueColor')},
97-
{label: 'systemBrownColor', color: PlatformColor('systemBrownColor')},
98-
{label: 'systemGreenColor', color: PlatformColor('systemGreenColor')},
99-
{label: 'systemIndigoColor', color: PlatformColor('systemIndigoColor')},
100-
{label: 'systemOrangeColor', color: PlatformColor('systemOrangeColor')},
101-
{label: 'systemPinkColor', color: PlatformColor('systemPinkColor')},
102-
{label: 'systemPurpleColor', color: PlatformColor('systemPurpleColor')},
103-
{label: 'systemRedColor', color: PlatformColor('systemRedColor')},
104-
{label: 'systemTealColor', color: PlatformColor('systemTealColor')},
105-
{label: 'systemYellowColor', color: PlatformColor('systemYellowColor')},
96+
{label: 'systemBlue', color: PlatformColor('systemBlue')},
97+
{label: 'systemBrown', color: PlatformColor('systemBrown')},
98+
{label: 'systemGreen', color: PlatformColor('systemGreen')},
99+
{label: 'systemIndigo', color: PlatformColor('systemIndigo')},
100+
{label: 'systemOrange', color: PlatformColor('systemOrange')},
101+
{label: 'systemPink', color: PlatformColor('systemPink')},
102+
{label: 'systemPurple', color: PlatformColor('systemPurple')},
103+
{label: 'systemRed', color: PlatformColor('systemRed')},
104+
{label: 'systemTeal', color: PlatformColor('systemTeal')},
105+
{label: 'systemYellow', color: PlatformColor('systemYellow')},
106106
// Adaptable Gray Colors
107-
{label: 'systemGrayColor', color: PlatformColor('systemGrayColor')},
108-
{label: 'systemGray2Color', color: PlatformColor('systemGray2Color')},
109-
{label: 'systemGray3Color', color: PlatformColor('systemGray3Color')},
110-
{label: 'systemGray4Color', color: PlatformColor('systemGray4Color')},
111-
{label: 'systemGray5Color', color: PlatformColor('systemGray5Color')},
112-
{label: 'systemGray6Color', color: PlatformColor('systemGray6Color')},
107+
{label: 'systemGray', color: PlatformColor('systemGray')},
108+
{label: 'systemGray2', color: PlatformColor('systemGray2')},
109+
{label: 'systemGray3', color: PlatformColor('systemGray3')},
110+
{label: 'systemGray4', color: PlatformColor('systemGray4')},
111+
{label: 'systemGray5', color: PlatformColor('systemGray5')},
112+
{label: 'systemGray6', color: PlatformColor('systemGray6')},
113113
];
114114
} else if (Platform.OS === 'android') {
115115
colors = [

‎React/Base/RCTConvert.m

+19-2
Original file line numberDiff line numberDiff line change
@@ -604,7 +604,7 @@ +(type)type : (id)json \
604604
{
605605
static NSDictionary<NSString *, NSDictionary *> *colorMap = nil;
606606
if (colorMap == nil) {
607-
colorMap = @{
607+
NSMutableDictionary<NSString *, NSDictionary *> *map = [@{
608608
// https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors
609609
// Label Colors
610610
@"labelColor" : @{
@@ -729,7 +729,22 @@ +(type)type : (id)json \
729729
// iOS 13.0
730730
RCTFallbackARGB : @(0xFFf2f2f7)
731731
},
732+
} mutableCopy];
733+
// The color names are the Objective-C UIColor selector names,
734+
// but Swift selector names are valid as well, so make aliases.
735+
static NSString *const RCTColorSuffix = @"Color";
736+
NSMutableDictionary<NSString *, NSDictionary *> *aliases = [NSMutableDictionary new];
737+
for (NSString *objcSelector in map) {
738+
RCTAssert([objcSelector hasSuffix:RCTColorSuffix], @"A selector in the color map did not end with the suffix Color.");
739+
NSMutableDictionary *entry = [map[objcSelector] mutableCopy];
740+
RCTAssert([entry objectForKey:RCTSelector] == nil, @"Entry should not already have an RCTSelector");
741+
NSString *swiftSelector = [objcSelector substringToIndex:[objcSelector length] - [RCTColorSuffix length]];
742+
entry[RCTSelector] = objcSelector;
743+
aliases[swiftSelector] = entry;
744+
}
745+
[map addEntriesFromDictionary:aliases];
732746
#if DEBUG
747+
[map addEntriesFromDictionary:@{
733748
// The follow exist for Unit Tests
734749
@"unitTestFallbackColor" : @{RCTFallback : @"gridColor"},
735750
@"unitTestFallbackColorIOS" : @{RCTFallback : @"blueColor"},
@@ -743,9 +758,11 @@ +(type)type : (id)json \
743758
RCTIndex : @1,
744759
RCTFallback : @"controlAlternatingRowBackgroundColors"
745760
},
761+
}];
746762
#endif
747-
};
763+
colorMap = [map copy];
748764
}
765+
749766
return colorMap;
750767
}
751768

0 commit comments

Comments
 (0)