hurricanejames/react-immutable-proptypes

PropType validators that work with Immutable.js.

react-immutable-proptypes's Issues

Note that invalid prop is an Immutable data structure if it is

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.

Missing seqOf.

seqOf would be useful because it signifies that you should not use size (which would return undefined for seqs and should use count().

Will there be support for this?

Use tagged versions

Please, use tags for versions. This way is easier to see what has changed between releases.

mapOf(contains(...)) does not work as described in documentation

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.

QUESTION: Why are props lower cased and not Title cased?

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!

mapOf(contains()) throws warning

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.

Package/project name should be changed to "immutable-prop-types"

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

isRequired on single types

Why can't we use ImmutablePropTypes.List.isRequired?
Do I have to use listOf?

Kind regards,

Niels

What about useing es2015 and only defining it in development evirnoment

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.

Add support for `orderedSetOf`

Similar to listOf and mapOf. Using iterableOf as a workaround for now 😄

Incompatible with immutable v4.0.0-rc9

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.

Question: How to validate a List of Maps

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.

`exact` prop type

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?

Verifying a map and its contents.

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?

ImmutablePropTypes.shape does not work with eslint-plugin-react 2.6+

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.

invariant is not defined

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

	invariant(
	false,
	'ImmutablePropTypes type checking code is stripped in production.'
	);

Is there a reason why invariant isn't imported here?

React v15.3.0

We should make sure we support facebook/react#7131 correctly.

way to extend PropType?

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(),
});

Warning: Invalid argument supplied to oneOf, expected an instance of array.

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?

Using specific Record type as PropType

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.

Confused as to when to use ImmutablePropTypes.contains

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.

Immutable propType validation error with `listOf`

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 on Selector. 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?

Getting warning about the thirdparty PropTypes from React

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.

validate shape of Map

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.

Is .shape() deprecated?

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
}

using with PropTypes.oneOf

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?

.oneOfType()?

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?

IPT equivalent to `oneOf`

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'])

[oneOfType]: Failed prop type: checker.apply is not a function

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

Add support for records

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
    };

    // ...
}

Huge performance penalty because of immutable props validation

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?

Warning when trying to validate against extended Record

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.

Validate a map's key type and value type

Would be cool to have!

For example

map: ImmutablePropTypes.mapKeyValue(PropTypes.string, PropTypes.number)

.mapOf record fails

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'