From 2291544373d51b771117783339dc498b126eba76 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 12 Aug 2016 14:59:28 -0700 Subject: [PATCH] [fix] React@15.3 propType warnings --- docs/components/View.md | 1 - src/apis/StyleSheet/StyleSheetValidation.js | 44 +++++++++++------- src/propTypes/TransformPropTypes.js | 18 +------- src/propTypes/createStrictShapeTypeChecker.js | 45 +++++++++++-------- 4 files changed, 55 insertions(+), 53 deletions(-) diff --git a/docs/components/View.md b/docs/components/View.md index 3bbdaf89..cc7ed768 100644 --- a/docs/components/View.md +++ b/docs/components/View.md @@ -168,7 +168,6 @@ from `style`. + `right`‡ + `top` + `transform` -+ `transformMatrix` + `userSelect` + `visibility` + `width` diff --git a/src/apis/StyleSheet/StyleSheetValidation.js b/src/apis/StyleSheet/StyleSheetValidation.js index 58dd317f..f3bf2c3c 100644 --- a/src/apis/StyleSheet/StyleSheetValidation.js +++ b/src/apis/StyleSheet/StyleSheetValidation.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /** * Copyright (c) 2016-present, Nicolas Gallagher. * Copyright (c) 2015-present, Facebook, Inc. @@ -8,50 +9,59 @@ import { PropTypes } from 'react' import ImageStylePropTypes from '../../components/Image/ImageStylePropTypes' +import ReactPropTypeLocations from 'react/lib/ReactPropTypeLocations' +import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret' import TextStylePropTypes from '../../components/Text/TextStylePropTypes' import ViewStylePropTypes from '../../components/View/ViewStylePropTypes' import warning from 'fbjs/lib/warning' -const allStylePropTypes = {} - class StyleSheetValidation { static validateStyleProp(prop, style, caller) { if (process.env.NODE_ENV !== 'production') { if (allStylePropTypes[prop] === undefined) { - const message1 = `"${prop}" is not a valid style property on Web.` - const message2 = '\nValid style props: ' + JSON.stringify(Object.keys(allStylePropTypes).sort(), null, ' ') - styleError(message1, style, caller, message2) - } else { - const error = allStylePropTypes[prop](style, prop, caller, 'prop') - if (error) { - styleError(error.message, style, caller) - } + var message1 = '"' + prop + '" is not a valid style property.'; + var message2 = '\nValid style props: ' + + JSON.stringify(Object.keys(allStylePropTypes).sort(), null, ' '); + styleError(message1, style, caller, message2); + } + var error = allStylePropTypes[prop]( + style, + prop, + caller, + ReactPropTypeLocations.prop, + null, + ReactPropTypesSecret + ); + if (error) { + styleError(error.message, style, caller); } } } static validateStyle(name, styles) { if (process.env.NODE_ENV !== 'production') { - for (const prop in styles[name]) { - StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name) + for (var prop in styles[name]) { + StyleSheetValidation.validateStyleProp(prop, styles[name], 'StyleSheet ' + name); } } } static addValidStylePropTypes(stylePropTypes) { - for (const key in stylePropTypes) { - allStylePropTypes[key] = stylePropTypes[key] + for (var key in stylePropTypes) { + allStylePropTypes[key] = stylePropTypes[key]; } } } -const styleError = (message1, style, caller, message2) => { +var styleError = function(message1, style, caller?, message2?) { warning( false, message1 + '\n' + (caller || '<>') + ': ' + JSON.stringify(style, null, ' ') + (message2 || '') - ) -} + ); +}; + +var allStylePropTypes = {}; StyleSheetValidation.addValidStylePropTypes(ImageStylePropTypes) StyleSheetValidation.addValidStylePropTypes(TextStylePropTypes) diff --git a/src/propTypes/TransformPropTypes.js b/src/propTypes/TransformPropTypes.js index 023f453f..d1ef75da 100644 --- a/src/propTypes/TransformPropTypes.js +++ b/src/propTypes/TransformPropTypes.js @@ -8,23 +8,8 @@ import { PropTypes } from 'react' const { arrayOf, number, oneOfType, shape, string } = PropTypes -const ArrayOfNumberPropType = arrayOf(number) const numberOrString = oneOfType([ number, string ]) -const TransformMatrixPropType = function ( - props : Object, - propName : string, - componentName : string -) : ?Error { - if (props.transform && props.transformMatrix) { - return new Error( - 'transformMatrix and transform styles cannot be used on the same ' + - 'component' - ) - } - return ArrayOfNumberPropType(props, propName, componentName) -} - const TransformPropTypes = { transform: arrayOf( oneOfType([ @@ -43,8 +28,7 @@ const TransformPropTypes = { shape({ translateZ: numberOrString }), shape({ translate3d: string }) ]) - ), - transformMatrix: TransformMatrixPropType + ) } module.exports = TransformPropTypes diff --git a/src/propTypes/createStrictShapeTypeChecker.js b/src/propTypes/createStrictShapeTypeChecker.js index 80e4d5e5..d76a0098 100644 --- a/src/propTypes/createStrictShapeTypeChecker.js +++ b/src/propTypes/createStrictShapeTypeChecker.js @@ -1,3 +1,5 @@ +/* eslint-disable */ + /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. @@ -10,9 +12,13 @@ */ import invariant from 'fbjs/lib/invariant' +import merge from '../modules/merge' import ReactPropTypeLocationNames from 'react/lib/ReactPropTypeLocationNames' +import ReactPropTypesSecret from 'react/lib/ReactPropTypesSecret' -module.exports = function createStrictShapeTypeChecker(shapeTypes) { +function createStrictShapeTypeChecker( + shapeTypes: {[key: string]: ReactPropsCheckType} +): ReactPropsChainableTypeChecker { function checkType(isRequired, props, propName, componentName, location?) { if (!props[propName]) { if (isRequired) { @@ -20,51 +26,54 @@ module.exports = function createStrictShapeTypeChecker(shapeTypes) { false, `Required object \`${propName}\` was not specified in ` + `\`${componentName}\`.` - ) + ); } - return + return; } - const propValue = props[propName] - const propType = typeof propValue - const locationName = location && ReactPropTypeLocationNames[location] || '(unknown)' + var propValue = props[propName]; + var propType = typeof propValue; + var locationName = + location && ReactPropTypeLocationNames[location] || '(unknown)'; if (propType !== 'object') { invariant( false, `Invalid ${locationName} \`${propName}\` of type \`${propType}\` ` + `supplied to \`${componentName}\`, expected \`object\`.` - ) + ); } // We need to check all keys in case some are required but missing from // props. - const allKeys = { ...props[propName], ...shapeTypes } - for (const key in allKeys) { - const checker = shapeTypes[key] + var allKeys = merge(props[propName], shapeTypes); + for (var key in allKeys) { + var checker = shapeTypes[key]; if (!checker) { invariant( false, `Invalid props.${propName} key \`${key}\` supplied to \`${componentName}\`.` + `\nBad object: ` + JSON.stringify(props[propName], null, ' ') + `\nValid keys: ` + JSON.stringify(Object.keys(shapeTypes), null, ' ') - ) + ); } - const error = checker(propValue, key, componentName, location) + var error = checker(propValue, key, componentName, location, null, ReactPropTypesSecret); if (error) { invariant( false, - error.message + `\nBad object: ` + JSON.stringify(props[propName], null, ' ') - ) + error.message + + `\nBad object: ` + JSON.stringify(props[propName], null, ' ') + ); } } } - function chainedCheckType( props: {[key: string]: any}, propName: string, componentName: string, location?: string ): ?Error { - return checkType(false, props, propName, componentName, location) + return checkType(false, props, propName, componentName, location); } - chainedCheckType.isRequired = checkType.bind(null, true) - return chainedCheckType + chainedCheckType.isRequired = checkType.bind(null, true); + return chainedCheckType; } + +module.exports = createStrictShapeTypeChecker;