Support proptype shape in a variable for sortShapeProp

Resolves jsx-eslint#1749

Author: alexzherdev

lib/rules/sort-prop-types.js

@@ -256,7 +256,15 @@ module.exports = {
         if (!sortShapeProp || !isShapeProp(node) || !(node.arguments && node.arguments[0])) {
           return;
         }
-        checkSorted(node.arguments[0].properties);
+
+        if (node.arguments[0].properties) {
+          checkSorted(node.arguments[0].properties);
+        } else if (node.arguments[0].type === 'Identifier') {
+          const variable = variableUtil.findVariableByName(context, node.arguments[0].name);
+          if (variable && variable.properties) {
+            checkSorted(variable.properties);
+          }
+        }
       },
 
       ClassProperty: function(node) {

tests/lib/rules/sort-prop-types.js

@@ -382,6 +382,45 @@ ruleTester.run('sort-prop-types', rule, {
     options: [{
       sortShapeProp: true
     }]
+  }, {
+    code: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+        render() {
+          return <div />;
+        }
+      }
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    parser: 'babel-eslint'
+  }, {
+    code: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `,
+    options: [{
+      sortShapeProp: true
+    }]
   }],
 
   invalid: [{
@@ -1471,5 +1510,98 @@ ruleTester.run('sort-prop-types', rule, {
         }
       }
     `
+  }, {
+    code: `
+      const shape = {
+        c: PropTypes.any,
+        a: PropTypes.any,
+        b: PropTypes.bool,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+
+        render() {
+          return <div />;
+        }
+      }
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    parser: 'babel-eslint',
+    errors: [{
+      message: ERROR_MESSAGE,
+      line: 4,
+      column: 9,
+      type: 'Property'
+    }, {
+      message: ERROR_MESSAGE,
+      line: 5,
+      column: 9,
+      type: 'Property'
+    }],
+    output: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        static propTypes = {
+          x: PropTypes.shape(shape),
+        };
+
+        render() {
+          return <div />;
+        }
+      }
+    `
+  }, {
+    code: `
+      const shape = {
+        c: PropTypes.any,
+        a: PropTypes.any,
+        b: PropTypes.bool,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `,
+    options: [{
+      sortShapeProp: true
+    }],
+    errors: [{
+      message: ERROR_MESSAGE,
+      line: 4,
+      column: 9,
+      type: 'Property'
+    }, {
+      message: ERROR_MESSAGE,
+      line: 5,
+      column: 9,
+      type: 'Property'
+    }],
+    output: `
+      const shape = {
+        a: PropTypes.any,
+        b: PropTypes.bool,
+        c: PropTypes.any,
+      };
+      class Component extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      Component.propTypes = {
+        x: PropTypes.shape(shape)
+      };
+    `
   }]
 });