hurricanejames / react-immutable-proptypes Goto Github PK
View Code? Open in Web Editor NEWPropType validators that work with Immutable.js.
License: MIT License
PropType validators that work with Immutable.js.
License: MIT License
There is no IPT equivalent of PropTypes.oneOfType. The following code is therefore, unfortunately, invalid:
PropTypes.oneOfType([
ImmutablePropTypes.contains({
...
}),
ImmutablePropTypes.contains({
...
}),
ImmutablePropTypes.contains({
...
}),
]);
oneOfType has no idea how to interpret ImmutablePropTypes, so it throws the following warning:
Warning: Failed prop type: checker.apply is not a function
Currently, I can either validate that something is a Map
or that something contains
specific keys/values.
Can I do both at the same time?
I want to validate that something is an immutable Map with specific keys, which have values of specific types.
At first, I had an idea that mapOf
would do the thing, but it validates each of map's values against pattern.
I am somewhat confused as to proper use here. In this code snippet:
'productItems': ImmutablePropTypes.mapOf({
'upc': PropTypes.string,
'erpItemNumber': PropTypes.string,
'onHandQuantity': PropTypes.number,
'vendorQuantity': PropTypes.number,
'disabled': PropTypes.bool,
'hideOnSite': PropTypes.bool,
'size': PropTypes.string,
'sizeOrder': PropTypes.number,
'width': PropTypes.string,
'widthOrder': PropTypes.number,
'quantity': PropTypes.number
})
Is above correct usage? Or below?
'productItems': ImmutablePropTypes.mapOf(
ImmutablePropTypes.contains({
'upc': PropTypes.string,
'erpItemNumber': PropTypes.string,
'onHandQuantity': PropTypes.number,
'vendorQuantity': PropTypes.number,
'disabled': PropTypes.bool,
'hideOnSite': PropTypes.bool,
'size': PropTypes.string,
'sizeOrder': PropTypes.number,
'width': PropTypes.string,
'widthOrder': PropTypes.number,
'quantity': PropTypes.number
}))
any real difference between the two?
I am also confused by the note in contains to not use for lists, yet in readme example that is exactly how it's used:
var MyReactComponent = React.createClass({
// ...
propTypes: {
myRequiredImmutableList: ImmutablePropTypes.listOf(
ImmutablePropTypes.contains({
someNumberProp: React.PropTypes.number.isRequired
})
).isRequired
}
// ...
});
Some clarification here would be much appreciated.
If it'd be too much trouble, then I completely understand, but the name of this package/project should be changed to immutable-prop-types
to keep in line with how the prop-types
project is named: https://github.com/facebook/prop-types
Awesome library! Very happy to have found it!
I have a question around why map is lowercased in ImmutablePropTypes.map
. I found it a little awkward that these do not match the ImmutableJS objects.
Just wondering what the reason was behind this or if this should be updated to reflect the ImmutableJS library more closely.
Thanks!
The problem seems like #23 but I'm still seeing it; my propType is:
payments: ImmutablePropTypes.mapOf(
ImmutablePropTypes.contains({
paidDate: PropTypes.oneOfType([
PropTypes.number,
PropTypes.instanceOf(Date),
]).isRequired,
paidAmount: PropTypes.number.isRequired,
}),
PropTypes.number
)
I get the following warning:
Invalid prop `payments[0]` of type `array` supplied to `MyComponent`, expected an Immutable.js Iterable
As mentioned in the aforementioned issue, it seems to be coming from the values being converted to arrays.
My react-immutable-proptypes
version is 2.1.0
.
Suppose I am using Immutable.Record to define my own types, say
var Person = Immutable.Record({age: null, name: null})
is it possible to specify that a prop has to be an instance of my Person type, rather than just "Immutable.PropTypes.record"? This would be a big win for type-checking and documentation.
Hey there, prop-types version 15.6.0
added a new feature PropTypes.exact
which is like PropTypes.shape
but warns on extra object keys. I'm wondering if something similar should be added to this library in order to maintain consistency?
seqOf
would be useful because it signifies that you should not use size
(which would return undefined for seq
s and should use count()
.
Will there be support for this?
I wrote the following PropType. As I understand it, ImmutablePropTypes.map let's me verify it's a map and user: ImmutablePropTypes.map
works fine. As does the below with the ImmutablePropTypes.mapOf()
part removed. However because I'd like to verify user is an immutable map, judging by your listOf example this would be the way to do that. Unfortunately the following fails:
static propTypes = {
user: ImmutablePropTypes.mapOf(
ImmutablePropTypes.contains({
name: PropTypes.string.isRequired,
nickname: PropTypes.string.isRequired,
picture: PropTypes.string.isRequired
})
)
};
with
Warning: Failed propType: Invalid prop '0' of type 'number' supplied to 'InformationSummary', expected an Immutable.js Iterable. Check the render method of 'Personal'.
Could you clarify what I'm doing wrong here?
Why can't we use ImmutablePropTypes.List.isRequired?
Do I have to use listOf?
Kind regards,
Niels
Similar to listOf
and mapOf
. Using iterableOf
as a workaround for now ๐
hey there - thanks for a super-helpful lib! ๐
wondering if there's already a way to express this:
/*
assuming immutable data like:
[
{ one: true },
{ one: true },
{ two: true },
{ one: true },
{ two: true }
]
*/
ImmutablePropTypes.listOf(
PropTypes.oneOfType([ // <-- i think this gums things up but not sure how yet
ImmutablePropTypes.mapContains(shapes.one),
ImmutablePropTypes.mapContains(shapes.two)
])
)
and if not, if you would be open to a PR for it?
The documentation says shape was changed to contains, but it still exists in the code and the exposed API. Are you planning on removing shape any time soon?
Trying to do
PropTypes = {
...React.PropTypes,
...ImmutablePropTypes
}
Hi author,
I'm getting this warning when using [email protected], and React team give the suggestion how to fix this in thirdparty library, do you have time to look at it? Thanks.
Warning: You are manually calling a React.PropTypes validation function for the path
prop on Route
. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
We should make sure we support facebook/react#7131 correctly.
NODE_ENV=production
disables React's PropTypes but not ImmutablePropTypes.
After manually removing them I got a 75%(!!!) rendering speed improvement.
I'm using stuff ranging from
let somePropType = ImmutablePropTypes.mapContains({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
isProjectLeader: PropTypes.bool,
isHidden: PropTypes.bool,
projectLeaderColor: PropTypes.string,
index: PropTypes.number
});
to
let listOfSomePropType = ImmutablePropTypes.listOf(somePropType).isRequired
Is there a way for me to disable validation in production?
Hi, This is a question and not an issue. I have the following data:
const todos = List.of(
Map({ id: 1, text: 'React', status: 'active', editing: false }),
Map({ id: 2, text: 'Redux', status: 'active', editing: false }),
Map({ id: 1, text: 'Immutable', status: 'completed', editing: false })
);
And I am wondering if this would be the correct way to write the prop validation:
TodoList.propTypes = {
todos: ImmutablePropTypes.listOf(
ImmutablePropTypes.contains({
id: React.PropTypes.number,
text: React.PropTypes.string,
status: React.PropTypes.string,
editing: React.PropTypes.bool
})
)
};
Is there any way instead of using the .contains that it could be something like:
todos: ImmutablePropTypes.listOf(
ImmutablePropTypes.mapOf({
ImmutablePropTypes.mapContains({
id: React.PropTypes.number,
text: React.PropTypes.string,
status: React.PropTypes.string,
editing: React.PropTypes.bool
})
})
)
};
Thanks for any help.
Is there currently a way to verify that an Immutable list contains specific elements?
This would be roughly equivalent to React.PropTypes.oneOf(['CLOSED', 'OPEN'])
As per the changelog of immutable v4, KeyedCollection.toArray()
returns an array of tuples. In react-immutable-proptypes, toArray is used in the validator of the iterable type checker.
Instead, it should call .valueSeq().toArray()
to ensure that it operates on values and not on entries.
Would be cool to have!
For example
map: ImmutablePropTypes.mapKeyValue(PropTypes.string, PropTypes.number)
I tried to add our first mapOf test, which failed. While mapOf(ImmutablePropTypes.record)
fails, I can pass mapContains
with the same data. Yes, I checked wheter there are any non-records in the map - there are none.
Example:
const StackRecord = Record({
nodeId: null,
}, 'stack');
const myMap = Map(
['root', StackRecord({})],
['other', StackRecord({})],
['more', StackRecord({})],
);
// fails when tested against
ImmutablePropTypes.mapOf(ImmutablePropTypes.record).isRequired,
// passes
ImmutablePropTypes.mapContains({
root: ImmutablePropTypes.record.isRequired,
}).isRequired
When I put the Records in a List instead, it works fine with listOf(ImmutablePropTypes.record)
.
It's just mapOf that fails with the following message (library is the name of the property I check).
Invalid argument 'library[0]' of type 'array' supplied to 'Nav', expected 'Record'
eslint-plugin-react updated their react/prop-types validation to look closely at any propType named shape
. This is bad behavior, but for very good reasons. Reasons so good, and probably so helpful in general, that it makes sense to rename ImmutablePropType.shape
to something else. At the moment I think ImmutablePropType.contains
.
Note: I will release this as v1.1, and it will still have the shape validator, but it is deprecated. Eventually, shape will go away in favor of contains
or whatever is decided. Also, if I have time or somebody else has the desire, we could upgrade eslint-plugin-react to identify contains
and try to match get and getIn the way it matches objects now.
If an ImmutablePropType
, say Immutable.listOf(React.PropTypes.string)
is specified, but an Immutable.Map
is provided instead, the warning message says Warning: Failed propType: Invalid prop...of type object supplied
. Since this is an Immutable-specific library, it might be helpful to say that the type of the prop provided was an Immutable.Map
, although I suppose it might not be straightforward.
From what I can tell, the documentation is inaccurate. It states that you can use mapOf(contains({ ... }))
in much the same way as listOf(contains({ ... }))
. My map is shaped as follows:
Map({
selected: true,
tabName: 'Blah'
})
with propType of:
item: ImmutablePropTypes.mapOf(
ImmutablePropTypes.contains({
selected: React.PropTypes.bool.isRequired,
tabName: React.PropTypes.string.isRequired
})
).isRequired
I get the error:
Failed propType: Invalid prop `0` of type `string` supplied to `SideNavItem`, expected an Immutable.js Iterable
Looking into what's actually executed, it seems like mapOf() converts the object being validated on to an array, rather than to an object. That is because listOf and mapOf reuse the same code, createIterableTypeChecker
.
It seems like the only way to validate a map is to just directly use the contains
function rather than use mapOf
.
Please, use tags for versions. This way is easier to see what has changed between releases.
Getting an "invariant is not defined" error in one of our production builds (while we were testing it). Looking at the stack trace, it led us to your library, which we just upgraded 2.1.0 -> 2.2.0.
Which led us to
react-immutable-proptypes/src/ImmutablePropTypes.js
Lines 40 to 43 in b2c415d
Is there a reason why invariant isn't imported here?
I'm trying to validate a map of Records. The Record is extended:
class Bar extends Immutable.Record({
example: null
}) {
constructor(data) {
// โฆ
super(data);
}
}
// Later:
static propTypes = {
foo: ImmutablePropTypes.mapOf(Bar).isRequired
};
This issues a warning in checkPropTypes:
Warning: Failed propType: Cannot call a class as a function Check the render method of `...`
Validating against a map of a plain Record works fine.
There seems to be no true IPT equivalent of oneOf
, which is problematic if you want to check that a prop is an exact match for an immutable map that exists in a constant immutable list.
const COUNTRIES = [
{...},
{...},
{...},
{...},
{...},
{...},
];
const IMMUTABLE_COUNTRIES = Immutable.fromJS(
COUNTRIES
);
var countryShapeImmutable = React.PropTypes.oneOf(
IMMUTABLE_COUNTRIES // fails
);
ExceptionsManager.js:71Warning: Invalid argument supplied to oneOf, expected an instance of array.
Is there a way to check for a specific immutable country here, using immutable proptypes?
static propTypes = {
items: oneOfType([
listOf(any),
arrayOf(any)
]).isRequired
}
If I remove listOf(any)
, I no longer receive the propType error. which react has posted info about here, https://facebook.github.io/react/warnings/dont-call-proptypes.html
Warning: You are manually calling a React.PropTypes validation function for the
items[24]
prop onSelector
. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.
With the next rev of react, it looks like this will actually throw an error. Any plans on updating the module for the incoming change?
Hi, @HurricaneJames
React only validate protoType in development environment . So could you define the functions in the condition (process.env.NODE_ENV == 'production')?
And React encourages using babel, so could you use es2015 .
If you agree me , I will pull a request ASAP.
It'd be nice if your library supported them.
E.g., like so:
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
class FooComponent extends React.Component {
static propTypes = {
blogPost: ImmutablePropTypes.record.isRequired
};
// ...
}
Say I have a base form PropType:
export const formPropType = ImmutablePropTypes.recordOf({
name: PropTypes.string.isRequired,
disabled: PropTypes.boolean.isRequired,
error: PropTypes.object,
fields: ImmutablePropTypes.record,
});
export const Form = Record({
name: 'login',
disabled: false,
error: null,
fields: null
});
I would like to 'extend' or somehow reuse the formPropType. Is it possible? Maybe something like:
// .set (and setIn) would return a new PropType similiar to immutable
export const loginFormPropType = formPropType.set({
fields: loginFieldsPropType.isRequired,
});
export const LoginForm = Form({
name: 'login',
fields: LoginFields(),
});
I tried something like:
something: ImmutablePropTypes.listOf(
ImmutablePropTypes.contains(
id: PropTypes.string.isRequired,
char: PropTypes.string.isRequired,
status: PropTypes.oneOf([]).isRequired
)
).isRequired
But it keeps complaining SyntaxError: Unexpected token
. Replacing oneOf
with say string
works. Is there something against using parenthesis in listOf?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.