Use 'prop-types' library as recommended by React
authorFrank Bessou <frank.bessou@logilab.fr>
Thu, 27 Apr 2017 17:36:32 +0200
changeset 151 76bdef826f63
parent 150 85fec823255c
child 152 4d4a2d300531
Use 'prop-types' library as recommended by React
package.json
src/components/App.js
src/components/BaseViews.js
src/components/Entities.js
src/components/Entity.js
src/components/Form.js
src/components/Root.js
src/components/Workflow.js
src/jsonaryutils.js
src/model.js
test/index.js
--- a/package.json	Thu Apr 27 10:56:56 2017 +0200
+++ b/package.json	Thu Apr 27 17:36:32 2017 +0200
@@ -9,6 +9,7 @@
   "dependencies": {
     "babel-loader": "^6.2.10",
     "lodash": "^4.12.0",
+    "prop-types": "^15.5.8",
     "react": "^15",
     "react-dom": "^15",
     "react-jsonschema-form": "^0.40.0",
@@ -42,6 +43,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",
     "mocha": "^2.5.3",
+    "prop-types": "^15.5.8",
     "react-addons-test-utils": "^15.3.2",
     "react-dom": "^15.5.4",
     "react-router": "^4.1.1",
--- a/src/components/App.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/App.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import NavLink from './NavLink';
 
 export function App(props) {
@@ -12,7 +13,7 @@
     );
 }
 App.propTypes = {
-    children: React.PropTypes.object,
+    children: PropTypes.object,
 };
 
 export function Header() {
--- a/src/components/BaseViews.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/BaseViews.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Link} from 'react-router-dom';
 import {isEmpty} from 'lodash/lang';
 import {PropTypeAction, PropTypesEntitiesModel, PropTypesResourceModel} from '../model';
@@ -53,7 +54,7 @@
 
 ActionsDropDown.propTypes = {
     target: PropTypesResourceModel.isRequired,
-    ignore: React.PropTypes.arrayOf(React.PropTypes.string),
+    ignore: PropTypes.arrayOf(PropTypes.string),
 }
 
 export function ActionLink({target, action}) {
@@ -105,7 +106,7 @@
 }
 
 DropDownButton.propTypes = {
-    title: React.PropTypes.string.isRequired,
-    style: React.PropTypes.string,
-    children: React.PropTypes.arrayOf(React.PropTypes.object),
+    title: PropTypes.string.isRequired,
+    style: PropTypes.string,
+    children: PropTypes.arrayOf(PropTypes.object),
 }
--- a/src/components/Entities.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/Entities.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import {isEmpty} from 'lodash/lang';
 import {ActionsDropDown, CollectionView} from './BaseViews';
 import Api from '../Api';
@@ -26,9 +27,9 @@
 }
 
 Entities.propTypes = {
-    match: React.PropTypes.shape({
-        params: React.PropTypes.shape({
-            etype: React.PropTypes.string.isRequired,
+    match: PropTypes.shape({
+        params: PropTypes.shape({
+            etype: PropTypes.string.isRequired,
         }),
     }),
 };
--- a/src/components/Entity.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/Entity.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import {FormWrapper} from './Form';
 import {Link} from 'react-router-dom';
 
@@ -153,9 +154,9 @@
 }
 
 RelatedEntities.propTypes = {
-    etype: React.PropTypes.string.isRequired,
-    eid: React.PropTypes.string.isRequired,
-    rtype: React.PropTypes.string.isRequired,
+    etype: PropTypes.string.isRequired,
+    eid: PropTypes.string.isRequired,
+    rtype: PropTypes.string.isRequired,
 };
 
 export class Entity extends React.Component {
@@ -263,17 +264,17 @@
 }
 
 Entity.propTypes = {
-    match: React.PropTypes.shape({
-        params: React.PropTypes.shape({
-            etype: React.PropTypes.string.isRequired,
-            eid: React.PropTypes.string.isRequired,
-            view: React.PropTypes.string,
+    match: PropTypes.shape({
+        params: PropTypes.shape({
+            etype: PropTypes.string.isRequired,
+            eid: PropTypes.string.isRequired,
+            view: PropTypes.string,
         }),
     }),
 };
 
 Entity.contextTypes = {
-    router: React.PropTypes.object.isRequired,
+    router: PropTypes.object.isRequired,
 }
 export class EntityView extends React.Component {
 
@@ -346,11 +347,11 @@
 
 WorkflowableEntityView.propTypes = {
     // XXX Copy from EntityView.propTypes
-    entity: React.PropTypes.shape({
-        cw_etype: React.PropTypes.string.isRequired,
-        eid: React.PropTypes.number.isRequired,
-        workflow_state: React.PropTypes.string.isRequired,
-        dc_title: React.PropTypes.string.isRequired,
+    entity: PropTypes.shape({
+        cw_etype: PropTypes.string.isRequired,
+        eid: PropTypes.number.isRequired,
+        workflow_state: PropTypes.string.isRequired,
+        dc_title: PropTypes.string.isRequired,
     }).isRequired,
 };
 
@@ -402,7 +403,7 @@
 }
 
 EntityForm.contextTypes = {
-    router: React.PropTypes.object,
+    router: PropTypes.object,
 };
 
 export class EntityCreationForm extends EntityForm {
@@ -434,9 +435,9 @@
 }
 
 EntityCreationForm.propTypes = {
-    match: React.PropTypes.shape({
-        params: React.PropTypes.shape({
-            etype: React.PropTypes.string,
+    match: PropTypes.shape({
+        params: PropTypes.shape({
+            etype: PropTypes.string,
         }),
     }),
 };
@@ -464,11 +465,11 @@
 }
 
 AddRelated.propTypes = {
-    match: React.PropTypes.shape({
-        params: React.PropTypes.shape({
-            etype: React.PropTypes.string.isRequired,
-            rtype: React.PropTypes.string.isRequired,
-            eid: React.PropTypes.number.isRequired,
+    match: PropTypes.shape({
+        params: PropTypes.shape({
+            etype: PropTypes.string.isRequired,
+            rtype: PropTypes.string.isRequired,
+            eid: PropTypes.number.isRequired,
         }).isRequired,
     }),
 };
@@ -500,9 +501,9 @@
 
 EntityEditForm.propTypes = {
     entity: PropTypesEntityModel.isRequired,
-    redirectPath: React.PropTypes.string.isRequired,
-    getSchema: React.PropTypes.func.isRequired,
-    updateEntity: React.PropTypes.func.isRequired,
+    redirectPath: PropTypes.string.isRequired,
+    getSchema: PropTypes.func.isRequired,
+    updateEntity: PropTypes.func.isRequired,
 };
 
 function EntityDeletionView({onConfirm, onCancel}) {
@@ -518,6 +519,6 @@
 }
 
 EntityDeletionView.propTypes = {
-    onCancel: React.PropTypes.func.isRequired,
-    onConfirm: React.PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
 };
--- a/src/components/Form.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/Form.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import Form from 'react-jsonschema-form';
 import {cloneDeep} from 'lodash/lang';
 
@@ -66,6 +67,6 @@
 }
 
 FormWrapper.propTypes = {
-    schema: React.PropTypes.object.isRequired,
-    adapterFactory: React.PropTypes.object,
+    schema: PropTypes.object.isRequired,
+    adapterFactory: PropTypes.object,
 }
--- a/src/components/Root.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/Root.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,4 +1,5 @@
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import {Link} from 'react-router-dom';
 import HypermediaClient from '../services/hypermedia';
 
@@ -41,5 +42,5 @@
 }
 
 RootView.propTypes = {
-    resource: React.PropTypes.object.isRequired,
+    resource: PropTypes.object.isRequired,
 }
--- a/src/components/Workflow.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/components/Workflow.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,3 +1,4 @@
+import {PropTypes} from 'prop-types';
 import {isEmpty} from 'lodash/lang';
 import {zip} from 'lodash/array';
 import {get, omit} from 'lodash/object';
@@ -68,13 +69,13 @@
 }
 
 WorkflowActions.contextTypes = {
-    router: React.PropTypes.object,
+    router: PropTypes.object,
 };
 
 WorkflowActions.propTypes = {
-    etype: React.PropTypes.string.isRequired,
-    eid: React.PropTypes.number.isRequired,
-    workflowState: React.PropTypes.string.isRequired,
+    etype: PropTypes.string.isRequired,
+    eid: PropTypes.number.isRequired,
+    workflowState: PropTypes.string.isRequired,
 };
 
 function WorkflowActionsView(props) {
@@ -111,9 +112,9 @@
 }
 
 WorkflowActionsView.propTypes = {
-    workflowState: React.PropTypes.string.isRequired,
-    fireTransition: React.PropTypes.func.isRequired,
-    possibleTransitions: React.PropTypes.arrayOf(
-            React.PropTypes.arrayOf(React.PropTypes.string)).isRequired,
-    className: React.PropTypes.string,
+    workflowState: PropTypes.string.isRequired,
+    fireTransition: PropTypes.func.isRequired,
+    possibleTransitions: PropTypes.arrayOf(
+            PropTypes.arrayOf(PropTypes.string)).isRequired,
+    className: PropTypes.string,
 };
--- a/src/jsonaryutils.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/jsonaryutils.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,6 +1,6 @@
 /* global Jsonary */
 import "script-loader!jsonary/super-bundle/jsonary-super-bundle";
-import {PropTypes} from "react";
+import {PropTypes} from "prop-types";
 
 export function wrapEntityData(entity, schema) {
     const wrappedData = Jsonary.create(entity);
--- a/src/model.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/src/model.js	Thu Apr 27 17:36:32 2017 +0200
@@ -1,8 +1,8 @@
-import React from 'react';
+import {PropTypes} from 'prop-types';
 import {merge} from 'lodash';
 import {PropTypeJsonaryWrapper} from './jsonaryutils';
 
-export const PropTypeAction = React.PropTypes.oneOf([
+export const PropTypeAction = PropTypes.oneOf([
         'create',
         'view',
         'edit',
@@ -10,20 +10,20 @@
     ]);
 
 const RESOURCE_PROPERTIES = {
-    url: React.PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
     data: PropTypeJsonaryWrapper.isRequired,
-    allowedActions: React.PropTypes.arrayOf(PropTypeAction).isRequired,
+    allowedActions: PropTypes.arrayOf(PropTypeAction).isRequired,
 };
 
-export const PropTypesResourceModel = React.PropTypes.shape(RESOURCE_PROPERTIES);
+export const PropTypesResourceModel = PropTypes.shape(RESOURCE_PROPERTIES);
 
-export const PropTypesEntityModel = React.PropTypes.shape(merge({
-    etype: React.PropTypes.string.isRequired,
-    eid: React.PropTypes.string.isRequired,
-    route: React.PropTypes.string.isRequired,
+export const PropTypesEntityModel = PropTypes.shape(merge({
+    etype: PropTypes.string.isRequired,
+    eid: PropTypes.string.isRequired,
+    route: PropTypes.string.isRequired,
 }, RESOURCE_PROPERTIES));
 
-export const PropTypesEntitiesModel = React.PropTypes.shape(merge({
-    etype: React.PropTypes.string.isRequired,
-    route: React.PropTypes.string.isRequired,
+export const PropTypesEntitiesModel = PropTypes.shape(merge({
+    etype: PropTypes.string.isRequired,
+    route: PropTypes.string.isRequired,
 }, RESOURCE_PROPERTIES));
--- a/test/index.js	Thu Apr 27 10:56:56 2017 +0200
+++ b/test/index.js	Thu Apr 27 17:36:32 2017 +0200
@@ -7,6 +7,7 @@
 import sinon from 'sinon';
 import {assert} from 'sinon';
 import React from 'react';
+import {PropTypes} from 'prop-types';
 import createRouterContext from 'react-router-test-context'
 import {merge} from 'lodash/object';
 
@@ -130,7 +131,7 @@
 describe('<CollectionItemLink />', () => {
     const renderOptions = {
         context: createRouterContext(),
-        childContextTypes: {router: React.PropTypes.object},
+        childContextTypes: {router: PropTypes.object},
     };
 
     it('renders a link with title and proper URL', () => {