Skip to content

Commit

Permalink
ColorPropTypes support for isRequired and more precise description
Browse files Browse the repository at this point in the history
Summary:
The previous implementation of ColorPropType was very hacky as it used `ReactPropTypes.oneOfType([colorValidator, ReactPropTypes.number])`. It turns out that oneOfType also accepts arbitrary functions instead of a type, but doesn't display any of the error message.

In this diff I properly implement isRequired (sadly we don't export `createChainableTypeChecker` in ReactPropTypes) and provide a lot more context that we have. I copy and pasted the way we displayed this context from the existing checkers.

**Test Plan**

When doing .isRequired and do not provide the value:

![simulator screen shot feb 1 2016 9 56 00 am](https://cloud.githubusercontent.com/assets/197597/12726239/61243f88-c8cb-11e5-889b-6594ffd85973.png)

When providing a bad value:

![simulator screen shot feb 1 2016 10 01 25 am](https://cloud.githubusercontent.com/assets/197597/12726244/6e80aa36-c8cb-11e5-9bd3-a8637de75496.png)
Closes facebook#5671

Reviewed By: svcscm

Differential Revision: D2886760

Pulled By: vjeux

fb-gh-sync-id: d6be42b5768fca5463fe80fe4b144506d21b0832
  • Loading branch information
vjeux authored and facebook-github-bot-4 committed Feb 1, 2016
1 parent 36efbc3 commit 1491668
Showing 1 changed file with 18 additions and 3 deletions.
21 changes: 18 additions & 3 deletions Libraries/StyleSheet/ColorPropType.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,20 @@
'use strict';

var ReactPropTypes = require('ReactPropTypes');
var ReactPropTypeLocationNames = require('ReactPropTypeLocationNames');

var normalizeColor = require('normalizeColor');

var ColorPropType = function(props, propName) {
var colorPropType = function(isRequired, props, propName, componentName, location, propFullName) {
var color = props[propName];
if (color === undefined || color === null) {
if (isRequired) {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
'Required ' + locationName + ' `' + (propFullName || propName) +
'` was not specified in `' + componentName + '`.'
);
}
return;
}

Expand All @@ -28,8 +36,11 @@ var ColorPropType = function(props, propName) {
}

if (normalizeColor(color) === null) {
var locationName = ReactPropTypeLocationNames[location];
return new Error(
`Invalid color supplied to ${propName}: ${color}. Valid color formats are
'Invalid ' + locationName + ' `' + (propFullName || propName) +
'` supplied to `' + componentName + '`: ' + color + '\n' +
`Valid color formats are
- #f0f (#rgb)
- #f0fc (#rgba)
- #ff00ff (#rrggbb)
Expand All @@ -39,8 +50,12 @@ var ColorPropType = function(props, propName) {
- hsl(360, 100%, 100%)
- hsla(360, 100%, 100%, 1.0)
- transparent
- red`);
- red
`);
}
};

var ColorPropType = colorPropType.bind(null, false /* isRequired */);
ColorPropType.isRequired = colorPropType.bind(null, true /* isRequired */);

module.exports = ColorPropType;

0 comments on commit 1491668

Please sign in to comment.