Improve consistency

This commit is contained in:
Lyubomir Marinov 2017-02-16 14:35:14 -06:00
parent 573ca97b6c
commit d1520773cf
4 changed files with 74 additions and 63 deletions

View File

@ -1,24 +0,0 @@
import { shimStyles } from './shimStyles';
/**
* Create a style sheet using the provided style definitions.
*
* @param {Object} styles - A dictionary of named style definitions.
* @param {Object} [overrides={}] - Optional set of additional (often
* platform-dependent/specific) style definitions that will override the base
* (often platform-independent) styles.
* @returns {Object}
*/
export function createStyleSheet(styles, overrides = {}) {
const combinedStyles = {};
for (const k of Object.keys(styles)) {
combinedStyles[k]
= shimStyles({
...styles[k],
...overrides[k]
});
}
return combinedStyles;
}

View File

@ -0,0 +1,73 @@
/* @flow */
declare type StyleSheet = Object;
/**
* The list of the well-known style properties which may not be numbers on Web
* but must be numbers on React Native.
*
* @private
*/
const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
/* eslint-disable flowtype/space-before-type-colon */
/**
* Create a style sheet using the provided style definitions.
*
* @param {StyleSheet} styles - A dictionary of named style definitions.
* @param {StyleSheet} [overrides={}] - Optional set of additional (often
* platform-dependent/specific) style definitions that will override the base
* (often platform-independent) styles.
* @returns {StyleSheet}
*/
export function createStyleSheet(styles: StyleSheet, overrides: StyleSheet = {})
: StyleSheet {
/* eslint-enable flowtype/space-before-type-colon */
const combinedStyles = {};
for (const k of Object.keys(styles)) {
combinedStyles[k]
= _shimStyles({
...styles[k],
...overrides[k]
});
}
return combinedStyles;
}
/**
* Shims style properties to work correctly on native. Allows us to minimize the
* number of style declarations that need to be set or overridden for specific
* platforms.
*
* @param {StyleSheet} styles - An object which represents a stylesheet.
* @private
* @returns {StyleSheet}
*/
function _shimStyles<T: StyleSheet>(styles: T): T {
// Certain style properties may not be numbers on Web but must be numbers on
// React Native. For example, height and width may be expressed in percent
// on Web but React Native will not understand them and we will get errors
// (at least during development). Convert such well-known properties to
// numbers if possible; otherwise, remove them to avoid runtime errors.
for (const k of _WELL_KNOWN_NUMBER_PROPERTIES) {
const v = styles[k];
const typeofV = typeof v;
if (typeofV !== 'undefined' && typeofV !== 'number') {
const numberV = Number(v);
if (Number.isNaN(numberV)) {
delete styles[k];
} else {
styles[k] = numberV;
}
}
}
return styles;
}

View File

@ -1,2 +1,2 @@
export * from './components';
export * from './createStyleSheet';
export * from './functions';

View File

@ -1,38 +0,0 @@
/**
* The list of the well-known style properties which may not be numbers on Web
* but must be numbers on React Native.
*/
const WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
/**
* Shim style properties to work correctly on native.
*
* Using this shimStyles method allows us to minimize the number of style
* declarations that need to be set or overridden for specific platforms.
*
* @param {Object} styles - A dictionary of named style definitions.
* @returns {Object}
*/
export function shimStyles(styles) {
// Certain style properties may not be numbers on Web but must be numbers on
// React Native. For example, height and width may be expressed in percent
// on Web but React Native will not understand them and we will get errors
// (at least during development). Convert such well-known properties to
// numbers if possible; otherwise, remove them to avoid runtime errors.
for (const k of WELL_KNOWN_NUMBER_PROPERTIES) {
const v = styles[k];
const typeofV = typeof v;
if (typeofV !== 'undefined' && typeofV !== 'number') {
const numberV = Number(v);
if (Number.isNaN(numberV)) {
delete styles[k];
} else {
styles[k] = numberV;
}
}
}
return styles;
}