From 336ff2ffbd727090bea2a7df070fdfc7718dcd65 Mon Sep 17 00:00:00 2001
From: Alex Zherdev <alex.zherdev@gmail.com>
Date: Tue, 12 Jun 2018 19:10:27 -0700
Subject: [PATCH] Support proptype shape in a variable for sortShapeProp

Resolves #1749
---
 lib/rules/sort-prop-types.js       |  10 ++-
 tests/lib/rules/sort-prop-types.js | 132 +++++++++++++++++++++++++++++
 2 files changed, 141 insertions(+), 1 deletion(-)

diff --git a/lib/rules/sort-prop-types.js b/lib/rules/sort-prop-types.js
index 022b7f7c12..d7e5a3c5f7 100644
--- a/lib/rules/sort-prop-types.js
+++ b/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) {
diff --git a/tests/lib/rules/sort-prop-types.js b/tests/lib/rules/sort-prop-types.js
index 4b5c4d4247..72784743dd 100644
--- a/tests/lib/rules/sort-prop-types.js
+++ b/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)
+      };
+    `
   }]
 });