Skip to content

Commit 5a3ee83

Browse files
SaadnajmiSaadnajmi
authored
Add ColorWithSystemEffectMacOS API to react-native-macos (#751)
* add pull yml * remove yml * Getting there.. * Closer.. * Remove commented out code * More simplification * remove typo * Make ColorWithSystemEffect it's own sub-object * It works! * Add examples of DynamicColorMacOS with a SystemEffect (currently broken) * Add None Effect too * Fix typo * Essentially feature complete * Rename API * Missed a file * Fix the bug where we call processColor too many times * Replace blah with the issue number * Change one more title * Stub out test on other platforms * Add ifdef macos check, some null checks, and fix up a bunch of the tags * Fix more of the tags * Fix lint errors * ifdef around colorWithEffect method
1 parent e9e4980 commit 5a3ee83

File tree

8 files changed

+307
-33
lines changed

8 files changed

+307
-33
lines changed

‎Libraries/StyleSheet/PlatformColorValueTypes.macos.js‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,35 @@ export opaque type NativeColorValue = {
1919
light: ?(ColorValue | ProcessedColorValue),
2020
dark: ?(ColorValue | ProcessedColorValue),
2121
},
22+
colorWithSystemEffect?: {
23+
baseColor: ?(ColorValue | ProcessedColorValue),
24+
systemEffect: SystemEffectMacOSPrivate,
25+
},
2226
};
2327

2428
export const PlatformColor = (...names: Array<string>): ColorValue => {
2529
return {semantic: names};
2630
};
2731

32+
export type SystemEffectMacOSPrivate =
33+
| 'none'
34+
| 'pressed'
35+
| 'deepPressed'
36+
| 'disabled'
37+
| 'rollover';
38+
39+
export const ColorWithSystemEffectMacOSPrivate = (
40+
color: ColorValue,
41+
effect: SystemEffectMacOSPrivate,
42+
): ColorValue => {
43+
return {
44+
colorWithSystemEffect: {
45+
baseColor: color,
46+
systemEffect: effect,
47+
},
48+
};
49+
};
50+
2851
export type DynamicColorMacOSTuplePrivate = {
2952
light: ColorValue,
3053
dark: ColorValue,
@@ -54,8 +77,20 @@ export const normalizeColorObject = (
5477
},
5578
};
5679
return dynamicColor;
80+
} else if (
81+
'colorWithSystemEffect' in color &&
82+
color.colorWithSystemEffect != null
83+
) {
84+
const processColor = require('./processColor');
85+
const colorWithSystemEffect = color.colorWithSystemEffect;
86+
const colorObject: NativeColorValue = {
87+
colorWithSystemEffect: {
88+
baseColor: processColor(colorWithSystemEffect.baseColor),
89+
systemEffect: colorWithSystemEffect.systemEffect,
90+
},
91+
};
92+
return colorObject;
5793
}
58-
5994
return null;
6095
};
6196

@@ -72,6 +107,19 @@ export const processColorObject = (
72107
},
73108
};
74109
return dynamicColor;
110+
} else if (
111+
'colorWithSystemEffect' in color &&
112+
color.colorWithSystemEffect != null
113+
) {
114+
const processColor = require('./processColor');
115+
const colorWithSystemEffect = color.colorWithSystemEffect;
116+
const colorObject: NativeColorValue = {
117+
colorWithSystemEffect: {
118+
baseColor: processColor(colorWithSystemEffect.baseColor),
119+
systemEffect: colorWithSystemEffect.systemEffect,
120+
},
121+
};
122+
return colorObject;
75123
}
76124
return color;
77125
};

‎Libraries/StyleSheet/PlatformColorValueTypesMacOS.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,20 @@ export const DynamicColorMacOS = (
2222
): ColorValue => {
2323
throw new Error('DynamicColorMacOS is not available on this platform.');
2424
};
25+
26+
export type SystemEffectMacOS =
27+
| 'none'
28+
| 'pressed'
29+
| 'deepPressed'
30+
| 'disabled'
31+
| 'rollover';
32+
33+
export const ColorWithSystemEffectMacOS = (
34+
color: ColorValue,
35+
effect: SystemEffectMacOS,
36+
): ColorValue => {
37+
throw new Error(
38+
'ColorWithSystemEffectMacOS is not available on this platform.',
39+
);
40+
};
2541
// ]TODO(macOS ISS#2323203)

‎Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
'use strict';
1212

1313
import type {ColorValue} from './StyleSheetTypes';
14-
import {DynamicColorMacOSPrivate} from './PlatformColorValueTypes';
14+
import {
15+
DynamicColorMacOSPrivate,
16+
ColorWithSystemEffectMacOSPrivate,
17+
} from './PlatformColorValueTypes';
1518

1619
export type DynamicColorMacOSTuple = {
1720
light: ColorValue,
@@ -23,4 +26,18 @@ export const DynamicColorMacOS = (
2326
): ColorValue => {
2427
return DynamicColorMacOSPrivate({light: tuple.light, dark: tuple.dark});
2528
};
29+
30+
export type SystemEffectMacOS =
31+
| 'none'
32+
| 'pressed'
33+
| 'deepPressed'
34+
| 'disabled'
35+
| 'rollover';
36+
37+
export const ColorWithSystemEffectMacOS = (
38+
color: ColorValue,
39+
effect: SystemEffectMacOS,
40+
): ColorValue => {
41+
return ColorWithSystemEffectMacOSPrivate(color, effect);
42+
};
2643
// ]TODO(macOS ISS#2323203)

‎RNTester/Podfile.lock‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -520,8 +520,8 @@ SPEC CHECKSUMS:
520520
CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845
521521
CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
522522
DoubleConversion: 2b45d0f8e156a5b02354c8a4062de64d41ccb4e0
523-
FBLazyVector: 92d78d01de741fe34b2d751e55a037653358ac0c
524-
FBReactNativeSpec: e8382054abb3fb8270af2bca565a9f0577830525
523+
FBLazyVector: 29fb6e7901d1f0a80f920b6f40e29b459e3ec4d1
524+
FBReactNativeSpec: 2abf54e37e2606a820a73b437b997605c563c2ff
525525
Flipper: be611d4b742d8c87fbae2ca5f44603a02539e365
526526
Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
527527
Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3
@@ -534,34 +534,34 @@ SPEC CHECKSUMS:
534534
libevent: 59938c595b8c19e50c83250628ffed9ebf662183
535535
OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
536536
RCT-Folly: 55d0039b24e192081ec0b2257f7bd9f42e382fb7
537-
RCTRequired: 12daee8719711b00cac01ab3f90678356431596e
538-
RCTTypeSafety: a4fd9c36901830973a05d074afc75a5147b3e6f2
539-
React: 7cf7caa74c0c289d292ae2b2022a259e83b1c4c3
540-
React-ART: d50f359f8ba778f8d184cd4b7d5bade4bd3aad81
541-
React-callinvoker: 366e5648b012f7b02e1577d6c3d021763a10c9cc
542-
React-Core: 712fe9e8aedce8c8f27d46f171a899487617403f
543-
React-CoreModules: 75fc59024dea0708b2da5415298f491881de74e7
544-
React-cxxreact: 1935fb10e2eecdcea1b225b6679e329b00889611
545-
React-jsi: f7c5b9f6ed6bcc2b3ee6aa7a791d317ccbb8313f
546-
React-jsiexecutor: cea9a058f0fcb1b8d4c1fad3fc3bb5088c2979bd
547-
React-jsinspector: 6b83e9193f44d73358302e53a913e932c385cfa7
548-
React-RCTActionSheet: 3f81bc159b69758f2c859f3cd85b15bb9c223ecb
549-
React-RCTAnimation: af41afc5b073b180274fcdb2026b9b7b10c3b798
550-
React-RCTBlob: 5a48ac364cc476941099367f5fbeffee0673fa87
551-
React-RCTImage: 39e2de7650342313728d40955fabd278e5c4c134
552-
React-RCTLinking: ed8eb075cff2349e89402663585ffef0381848a2
553-
React-RCTNetwork: 9de10fa1593b0db1cca5bbfd5b2a82e809c8758b
554-
React-RCTPushNotification: 1e7591f9ef1fa557f017b1eaf99e5c88fd5c8e6f
555-
React-RCTSettings: e7a081bcc8c518ce59749ba3803a040f90483ffc
556-
React-RCTTest: aa3ca9247f85c78eee060d74d4a8dbdb0e90c47e
557-
React-RCTText: efbf71e9af9d6e6a7f9fa5ac87b4bd8baf1d8249
558-
React-RCTVibration: d8ef2a3e93ebb0de2c4e0dbbaee56cdd54c5441b
537+
RCTRequired: 57e1ef095e22d885256164d8c6df479dbd21da07
538+
RCTTypeSafety: f72f3ec5db9ee5fa6bb29fe9f7fa7dacf50adfdf
539+
React: b97bad9179f2d53c1c1bb1d0c66e2acef1742872
540+
React-ART: 0ad249875e1b8884b3cd1c489e4647ff34996485
541+
React-callinvoker: 9d92ac3e7ede9a0a85f037a83910a4d66b0c92ca
542+
React-Core: 51a5896743a633f4156873166f8df2ed9cb0b0d5
543+
React-CoreModules: e2b16910bbce831fba4ca8ac829b816d82c8eef1
544+
React-cxxreact: a32457255e1ec50d5a07f9af396870f4b9ed5bdd
545+
React-jsi: 651f42a24396052d7597fec149a7f81ca812165b
546+
React-jsiexecutor: bfe7c0dbc6682c6beb1202c0c6afac92493e6cea
547+
React-jsinspector: 76b4c121774407834f4e595bffbab9ab2b52b32c
548+
React-RCTActionSheet: d2197778c865bbcfb1017ee3fd2c50a19318005b
549+
React-RCTAnimation: c9bc756f8fe2bf0b3bd6940c7ab03cd757d8a032
550+
React-RCTBlob: 1109c2570e7eb5fb33385b4cca2eec4dc302478c
551+
React-RCTImage: 8390b4f788ffc069d0a7c284bb9b21650bc66116
552+
React-RCTLinking: 11d1b2a7cbc16e38c717cc4a5e77fe30870ba19f
553+
React-RCTNetwork: 5e1de525f5e12e74dae2f34e534dbf2cca1d63d3
554+
React-RCTPushNotification: 3d65a4c1e7024261d74c764dd6faff4938cc01cb
555+
React-RCTSettings: 73c143d2537688995cac0511e1285f9bec202a46
556+
React-RCTTest: f8ad362f336933a7ac2aca51bb72d351b62d0655
557+
React-RCTText: dba6bfe53bb0ecf817492cda78f6da8c4677e1ab
558+
React-RCTVibration: a1e909ab9ae0b1f4090530e2e90b30ba598d67b4
559559
React-TurboModuleCxx-RNW: 18bb71af41fe34c8b12a56bef60aae7ee32b0817
560-
React-TurboModuleCxx-WinRTPort: 4719553bda4c93a64b8e1d6a474a8afceb49419c
561-
ReactCommon: f399d6afd467e33cc3042a9f2eed99e9b8c57eb3
562-
Yoga: 831921041b154f425e43cd8c236502457c632d71
560+
React-TurboModuleCxx-WinRTPort: 91af7d60f381ea47e2b43a2c0951175dda50218f
561+
ReactCommon: eaa845b24197ed3e1f7a3f77d17cb45d98173975
562+
Yoga: 8b5431dfe1c915fb925390f0769410304a86e04c
563563
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
564564

565565
PODFILE CHECKSUM: baaa75a5807a228f32c4218f28c9260336518038
566566

567-
COCOAPODS: 1.9.1
567+
COCOAPODS: 1.10.1

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

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const ReactNative = require('react-native');
1515
import Platform from '../../../../Libraries/Utilities/Platform';
1616
const {
1717
ColorAndroid,
18+
ColorWithSystemEffectMacOS, // TODO(macOS GH#750)
1819
DynamicColorIOS,
1920
DynamicColorMacOS,
2021
PlatformColor,
@@ -352,6 +353,144 @@ function VariantColorsExample() {
352353
);
353354
}
354355

356+
// [TODO(macOS GH#750)
357+
function ColorWithSystemEffectMacOSExample() {
358+
function createTable() {
359+
let colors = [
360+
{label: 'gray', color: 'gray'},
361+
{
362+
label: "ColorWithSystemEffectMacOS('gray', 'none')",
363+
color: ColorWithSystemEffectMacOS('gray', 'none'),
364+
},
365+
{
366+
label: "ColorWithSystemEffectMacOS('gray', 'pressed')",
367+
color: ColorWithSystemEffectMacOS('gray', 'pressed'),
368+
},
369+
{
370+
label: "ColorWithSystemEffectMacOS('gray', 'deepPressed')",
371+
color: ColorWithSystemEffectMacOS('gray', 'deepPressed'),
372+
},
373+
{
374+
label: "ColorWithSystemEffectMacOS('gray', 'disabled')",
375+
color: ColorWithSystemEffectMacOS('gray', 'disabled'),
376+
},
377+
{
378+
label: "ColorWithSystemEffectMacOS('gray', 'rollover')",
379+
color: ColorWithSystemEffectMacOS('gray', 'rollover'),
380+
},
381+
{
382+
label: "PlatformColor('systemBlueColor')",
383+
color: PlatformColor('systemBlueColor'),
384+
},
385+
{
386+
label:
387+
"ColorWithSystemEffectMacOS(PlatformColor('systemBlueColor'), 'none')",
388+
color: ColorWithSystemEffectMacOS(
389+
PlatformColor('systemBlueColor'),
390+
'none',
391+
),
392+
},
393+
{
394+
label:
395+
"ColorWithSystemEffectMacOS(PlatformColor('systemBlueColor'), 'pressed')",
396+
color: ColorWithSystemEffectMacOS(
397+
PlatformColor('systemBlueColor'),
398+
'pressed',
399+
),
400+
},
401+
{
402+
label:
403+
"ColorWithSystemEffectMacOS(PlatformColor('systemBlueColor'), 'deepPressed')",
404+
color: ColorWithSystemEffectMacOS(
405+
PlatformColor('systemBlueColor'),
406+
'deepPressed',
407+
),
408+
},
409+
{
410+
label:
411+
"ColorWithSystemEffectMacOS(PlatformColor('systemBlueColor'), 'disabled')",
412+
color: ColorWithSystemEffectMacOS(
413+
PlatformColor('systemBlueColor'),
414+
'disabled',
415+
),
416+
},
417+
{
418+
label:
419+
"ColorWithSystemEffectMacOS(PlatformColor('systemBlueColor'), 'rollover')",
420+
color: ColorWithSystemEffectMacOS(
421+
PlatformColor('systemBlueColor'),
422+
'rollover',
423+
),
424+
},
425+
{
426+
label: "DynamicColorMacOS({light: 'red', dark: 'blue'})",
427+
color: DynamicColorMacOS({light: 'red', dark: 'blue'}),
428+
},
429+
{
430+
label:
431+
"ColorWithSystemEffectMacOS(DynamicColorMacOS({light: 'red', dark: 'blue'}), 'none')",
432+
color: ColorWithSystemEffectMacOS(
433+
DynamicColorMacOS({light: 'red', dark: 'blue'}),
434+
'none',
435+
),
436+
},
437+
{
438+
label:
439+
"ColorWithSystemEffectMacOS(DynamicColorMacOS({light: 'red', dark: 'blue'}), 'pressed')",
440+
color: ColorWithSystemEffectMacOS(
441+
DynamicColorMacOS({light: 'red', dark: 'blue'}),
442+
'pressed',
443+
),
444+
},
445+
{
446+
label:
447+
"ColorWithSystemEffectMacOS(DynamicColorMacOS({light: 'red', dark: 'blue'}), 'deepPressed')",
448+
color: ColorWithSystemEffectMacOS(
449+
DynamicColorMacOS({light: 'red', dark: 'blue'}),
450+
'deepPressed',
451+
),
452+
},
453+
{
454+
label:
455+
"ColorWithSystemEffectMacOS(DynamicColorMacOS({light: 'red', dark: 'blue'}), 'disabled')",
456+
color: ColorWithSystemEffectMacOS(
457+
DynamicColorMacOS({light: 'red', dark: 'blue'}),
458+
'disabled',
459+
),
460+
},
461+
{
462+
label:
463+
"ColorWithSystemEffectMacOS(DynamicColorMacOS({light: 'red', dark: 'blue'}), 'rollover')",
464+
color: ColorWithSystemEffectMacOS(
465+
DynamicColorMacOS({light: 'red', dark: 'blue'}),
466+
'rollover',
467+
),
468+
},
469+
];
470+
471+
let table = [];
472+
for (let color of colors) {
473+
table.push(
474+
<View style={styles.row} key={color.label}>
475+
<Text style={styles.labelCell}>{color.label}</Text>
476+
<View
477+
style={{
478+
...styles.colorCell,
479+
backgroundColor: color.color,
480+
}}
481+
/>
482+
</View>,
483+
);
484+
}
485+
return table;
486+
}
487+
return Platform.OS === 'macos' ? (
488+
<View style={styles.column}>{createTable()}</View>
489+
) : (
490+
<Text style={styles.labelCell}>Not applicable on this platform</Text>
491+
);
492+
} // ]TODO(macOS GH#750)
493+
355494
const styles = StyleSheet.create({
356495
column: {flex: 1, flexDirection: 'column'},
357496
row: {flex: 0.75, flexDirection: 'row'},
@@ -398,4 +537,11 @@ exports.examples = [
398537
return <VariantColorsExample />;
399538
},
400539
},
540+
// [TODO(macOS GH#750)
541+
{
542+
title: 'Color With System Effect macOS',
543+
render(): React.Element<any> {
544+
return <ColorWithSystemEffectMacOSExample />;
545+
},
546+
}, // ]TODO(macOS GH#750)
401547
];

0 commit comments

Comments
 (0)