[PlatformColor] Properly add macOS version
This commit is contained in:
Родитель
8ed55a866a
Коммит
b7e67a9e37
|
@ -25,13 +25,13 @@ export const PlatformColor = (...names: Array<string>): 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');
|
||||
|
|
|
@ -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)
|
|
@ -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)
|
|
@ -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,
|
||||
|
|
|
@ -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' ? (
|
||||
<View style={styles.column}>
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.labelCell}>
|
||||
DynamicColorMacOS({'{\n'}
|
||||
{' '}light: 'red', dark: 'blue'{'\n'}
|
||||
{'}'})
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
...styles.colorCell,
|
||||
backgroundColor: DynamicColorMacOS({light: 'red', dark: 'blue'}),
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.labelCell}>
|
||||
DynamicColorMacOS({'{\n'}
|
||||
{' '}light: PlatformColor('systemBlueColor'),{'\n'}
|
||||
{' '}dark: PlatformColor('systemRedColor'),{'\n'}
|
||||
{'}'})
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
...styles.colorCell,
|
||||
backgroundColor: DynamicColorMacOS({
|
||||
light: PlatformColor('systemBlueColor'),
|
||||
dark: PlatformColor('systemRedColor'),
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
) : // ]TODO(macOS ISS#2323203)
|
||||
Platform.OS === 'ios' ? (
|
||||
<View style={styles.column}>
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.labelCell}>
|
||||
|
@ -289,17 +325,26 @@ function VariantColorsExample() {
|
|||
<View style={styles.column}>
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.labelCell}>
|
||||
{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)
|
||||
}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
...styles.colorCell,
|
||||
backgroundColor:
|
||||
Platform.OS === 'ios' || Platform.OS === 'macos' // TODO(macOS ISS#2323203)
|
||||
Platform.OS === 'ios'
|
||||
? DynamicColorIOS({light: 'red', dark: 'blue'})
|
||||
: ColorAndroid('?attr/colorAccent'),
|
||||
: // [TODO(macOS ISS#2323203)
|
||||
Platform.OS === 'macos'
|
||||
? DynamicColorMacOS({light: 'red', dark: 'blue'})
|
||||
: // ]TODO(macOS ISS#2323203)
|
||||
ColorAndroid('?attr/colorAccent'),
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
@ -336,7 +381,7 @@ exports.examples = [
|
|||
},
|
||||
},
|
||||
{
|
||||
title: 'iOS Dynamic Colors',
|
||||
title: 'Dynamic Colors', // TODO(OSS Candidate ISS#2710739)
|
||||
render(): React.Element<any> {
|
||||
return <DynamicColorsExample />;
|
||||
},
|
||||
|
|
5
index.js
5
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;
|
||||
|
|
Загрузка…
Ссылка в новой задаче