From b7e67a9e37899a51fb83e0433e05cfce6a6d29ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eloy=20Dur=C3=A1n?= Date: Wed, 7 Oct 2020 16:46:09 +0200 Subject: [PATCH] [PlatformColor] Properly add macOS version --- .../PlatformColorValueTypes.macos.js | 8 +-- ...cos.js => PlatformColorValueTypesMacOS.js} | 9 +-- .../PlatformColorValueTypesMacOS.macos.js | 26 ++++++++ RNTester/js/RNTesterApp.ios.js | 8 ++- .../PlatformColor/PlatformColorExample.js | 59 ++++++++++++++++--- index.js | 5 ++ 6 files changed, 99 insertions(+), 16 deletions(-) rename Libraries/StyleSheet/{PlatformColorValueTypesIOS.macos.js => PlatformColorValueTypesMacOS.js} (60%) create mode 100644 Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js diff --git a/Libraries/StyleSheet/PlatformColorValueTypes.macos.js b/Libraries/StyleSheet/PlatformColorValueTypes.macos.js index 29c62f7c93..75f52deb45 100644 --- a/Libraries/StyleSheet/PlatformColorValueTypes.macos.js +++ b/Libraries/StyleSheet/PlatformColorValueTypes.macos.js @@ -25,13 +25,13 @@ export const PlatformColor = (...names: Array): ColorValue => { return {semantic: names}; }; -export type DynamicColorIOSTuplePrivate = { +export type DynamicColorMacOSTuplePrivate = { light: ColorValue, dark: ColorValue, }; -export const DynamicColorIOSPrivate = ( - tuple: DynamicColorIOSTuplePrivate, +export const DynamicColorMacOSPrivate = ( + tuple: DynamicColorMacOSTuplePrivate, ): ColorValue => { return {dynamic: {light: tuple.light, dark: tuple.dark}}; }; @@ -40,7 +40,7 @@ export const normalizeColorObject = ( color: NativeColorValue, ): ?ProcessedColorValue => { if ('semantic' in color) { - // an ios semantic color + // a macOS semantic color return color; } else if ('dynamic' in color && color.dynamic !== undefined) { const normalizeColor = require('./normalizeColor'); diff --git a/Libraries/StyleSheet/PlatformColorValueTypesIOS.macos.js b/Libraries/StyleSheet/PlatformColorValueTypesMacOS.js similarity index 60% rename from Libraries/StyleSheet/PlatformColorValueTypesIOS.macos.js rename to Libraries/StyleSheet/PlatformColorValueTypesMacOS.js index 12fee85a50..567205d232 100644 --- a/Libraries/StyleSheet/PlatformColorValueTypesIOS.macos.js +++ b/Libraries/StyleSheet/PlatformColorValueTypesMacOS.js @@ -11,14 +11,15 @@ 'use strict'; import type {ColorValue} from './StyleSheetTypes'; -import {DynamicColorIOSPrivate} from './PlatformColorValueTypes'; -export type DynamicColorIOSTuple = { +export type DynamicColorMacOSTuple = { light: ColorValue, dark: ColorValue, }; -export const DynamicColorIOS = (tuple: DynamicColorIOSTuple): ColorValue => { - return DynamicColorIOSPrivate({light: tuple.light, dark: tuple.dark}); +export const DynamicColorMacOS = ( + tuple: DynamicColorMacOSTuple, +): ColorValue => { + throw new Error('DynamicColorMacOS is not available on this platform.'); }; // ]TODO(macOS ISS#2323203) diff --git a/Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js b/Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js new file mode 100644 index 0000000000..613ed542aa --- /dev/null +++ b/Libraries/StyleSheet/PlatformColorValueTypesMacOS.macos.js @@ -0,0 +1,26 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ +// [TODO(macOS ISS#2323203) +'use strict'; + +import type {ColorValue} from './StyleSheetTypes'; +import {DynamicColorMacOSPrivate} from './PlatformColorValueTypes'; + +export type DynamicColorMacOSTuple = { + light: ColorValue, + dark: ColorValue, +}; + +export const DynamicColorMacOS = ( + tuple: DynamicColorMacOSTuple, +): ColorValue => { + return DynamicColorMacOSPrivate({light: tuple.light, dark: tuple.dark}); +}; +// ]TODO(macOS ISS#2323203) diff --git a/RNTester/js/RNTesterApp.ios.js b/RNTester/js/RNTesterApp.ios.js index 1786d4ddc8..3aff610259 100644 --- a/RNTester/js/RNTesterApp.ios.js +++ b/RNTester/js/RNTesterApp.ios.js @@ -29,6 +29,7 @@ const { Platform, // TODO(OSS Candidate ISS#2710739) PlatformColor, // TODO(OSS Candidate ISS#2710739) DynamicColorIOS, // TODO(OSS Candidate ISS#2710739) + DynamicColorMacOS, // TODO(macOS ISS#2323203) SafeAreaView, StyleSheet, Text, @@ -249,7 +250,12 @@ const styles = StyleSheet.create({ fontSize: 19, fontWeight: '600', textAlign: 'center', - color: DynamicColorIOS({light: 'black', dark: 'white'}), // TODO(OSS Candidate ISS#2710739) + color: + // [TODO(macOS ISS#2323203) + Platform.OS === 'macos' + ? DynamicColorMacOS({light: 'black', dark: 'white'}) + : DynamicColorIOS({light: 'black', dark: 'white'}), // TODO(OSS Candidate ISS#2710739) + // ]TODO(macOS ISS#2323203) }, exampleContainer: { flex: 1, diff --git a/RNTester/js/examples/PlatformColor/PlatformColorExample.js b/RNTester/js/examples/PlatformColor/PlatformColorExample.js index cb785bc789..6968d0619b 100644 --- a/RNTester/js/examples/PlatformColor/PlatformColorExample.js +++ b/RNTester/js/examples/PlatformColor/PlatformColorExample.js @@ -16,6 +16,7 @@ import Platform from '../../../../Libraries/Utilities/Platform'; const { ColorAndroid, DynamicColorIOS, + DynamicColorMacOS, PlatformColor, StyleSheet, Text, @@ -228,7 +229,42 @@ function FallbackColorsExample() { } function DynamicColorsExample() { - return Platform.OS === 'ios' ? ( + // [TODO(macOS ISS#2323203) + return Platform.OS === 'macos' ? ( + + + + DynamicColorMacOS({'{\n'} + {' '}light: 'red', dark: 'blue'{'\n'} + {'}'}) + + + + + + DynamicColorMacOS({'{\n'} + {' '}light: PlatformColor('systemBlueColor'),{'\n'} + {' '}dark: PlatformColor('systemRedColor'),{'\n'} + {'}'}) + + + + + ) : // ]TODO(macOS ISS#2323203) + Platform.OS === 'ios' ? ( @@ -289,17 +325,26 @@ function VariantColorsExample() { - {Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS ISS#2323203) - ? "DynamicColorIOS({light: 'red', dark: 'blue'})" - : "ColorAndroid('?attr/colorAccent')"} + {// [TODO(OSS Candidate ISS#2710739) + Platform.select({ + ios: "DynamicColorIOS({light: 'red', dark: 'blue'})", + android: "ColorAndroid('?attr/colorAccent')", + macos: "DynamicColorMacOS({light: 'red', dark: 'blue'})", + }) + // ]TODO(OSS Candidate ISS#2710739) + } @@ -336,7 +381,7 @@ exports.examples = [ }, }, { - title: 'iOS Dynamic Colors', + title: 'Dynamic Colors', // TODO(OSS Candidate ISS#2710739) render(): React.Element { return ; }, diff --git a/index.js b/index.js index b3372d0946..db266061e3 100644 --- a/index.js +++ b/index.js @@ -98,6 +98,7 @@ import typeof Platform from './Libraries/Utilities/Platform'; import typeof processColor from './Libraries/StyleSheet/processColor'; import typeof {PlatformColor} from './Libraries/StyleSheet/PlatformColorValueTypes'; import typeof {DynamicColorIOS} from './Libraries/StyleSheet/PlatformColorValueTypesIOS'; +import typeof {DynamicColorMacOS} from './Libraries/StyleSheet/PlatformColorValueTypesMacOS'; // TODO(macOS ISS#2323203) import typeof {ColorAndroid} from './Libraries/StyleSheet/PlatformColorValueTypesAndroid'; import typeof RootTagContext from './Libraries/ReactNative/RootTagContext'; import typeof DeprecatedColorPropType from './Libraries/DeprecatedPropTypes/DeprecatedColorPropType'; @@ -495,6 +496,10 @@ module.exports = { return require('./Libraries/StyleSheet/PlatformColorValueTypesIOS') .DynamicColorIOS; }, + get DynamicColorMacOS(): DynamicColorMacOS { + return require('./Libraries/StyleSheet/PlatformColorValueTypesMacOS') + .DynamicColorMacOS; + }, get ColorAndroid(): ColorAndroid { return require('./Libraries/StyleSheet/PlatformColorValueTypesAndroid') .ColorAndroid;