From deee55f1a298196f8fd611f55bd27163f3e622c8 Mon Sep 17 00:00:00 2001
From: rockcs1992 <chengshi1219@gmail.com>
Date: Thu, 1 Sep 2022 01:14:43 -0400
Subject: [PATCH] Add inactiveShape prop to Pie component (#2900)

---
 src/polar/Pie.tsx           |  12 +++--
 test/specs/polar/PieSpec.js | 101 ++++++++++++++++++++++++++++++++----
 2 files changed, 101 insertions(+), 12 deletions(-)

diff --git a/src/polar/Pie.tsx b/src/polar/Pie.tsx
index 4cf231ce96..9839156036 100644
--- a/src/polar/Pie.tsx
+++ b/src/polar/Pie.tsx
@@ -87,6 +87,7 @@ interface PieProps extends PieDef {
   data?: any[];
   sectors?: PieSectorDataItem[];
   activeShape?: PieActiveShape;
+  inactiveShape?: PieActiveShape;
   labelLine?: PieLabelLine;
   label?: PieLabel;
 
@@ -349,6 +350,11 @@ export class Pie extends PureComponent<Props, State> {
     return i === activeIndex;
   }
 
+  hasActiveIndex() {
+    const { activeIndex } = this.props;
+    return Array.isArray(activeIndex) ? activeIndex.length !== 0 : activeIndex || activeIndex === 0;
+  }
+
   handleAnimationEnd = () => {
     const { onAnimationEnd } = this.props;
 
@@ -472,10 +478,10 @@ export class Pie extends PureComponent<Props, State> {
   }
 
   renderSectorsStatically(sectors: PieSectorDataItem[]) {
-    const { activeShape, blendStroke } = this.props;
-
+    const { activeShape, blendStroke, inactiveShape: inactiveShapeProp } = this.props;
     return sectors.map((entry, i) => {
-      const sectorOptions = this.isActiveIndex(i) ? activeShape : null;
+      const inactiveShape = inactiveShapeProp && this.hasActiveIndex() ? inactiveShapeProp : null;
+      const sectorOptions = this.isActiveIndex(i) ? activeShape : inactiveShape;
       const sectorProps = {
         ...entry,
         stroke: blendStroke ? entry.fill : entry.stroke,
diff --git a/test/specs/polar/PieSpec.js b/test/specs/polar/PieSpec.js
index 984548cfab..f2131568e0 100644
--- a/test/specs/polar/PieSpec.js
+++ b/test/specs/polar/PieSpec.js
@@ -34,7 +34,7 @@ describe('<Pie />', () => {
     expect(wrapper.find('.recharts-pie-sector').length).to.equal(sectors.length);
   });
 
-  it('Render customized active sector when activeShape is set to be a element', () => {
+  it('Render customized active sector when activeShape is set to be an element', () => {
     const ActiveShape = props =>
       <Sector {...props} fill="#ff7300" className="customized-active-shape" />
     ;
@@ -78,7 +78,7 @@ describe('<Pie />', () => {
     expect(wrapper.find('.customized-active-shape').length).to.equal(1);
   });
 
-  it('Render customized active sector when activeShape is set to be a object', () => {
+  it('Render customized active sector when activeShape is set to be an object', () => {
     const wrapper = render(
       <Surface width={500} height={500}>
         <Pie
@@ -97,6 +97,89 @@ describe('<Pie />', () => {
     expect(wrapper.find('.customized-active-shape').length).to.equal(0);
   });
 
+  it('Render customized active sector when inactiveShape is set to be an element', () => {
+    const ActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
+    const InactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;
+
+    const wrapper = render(
+      <Surface width={500} height={500}>
+        <Pie
+          isAnimationActive={false}
+          activeIndex={0}
+          activeShape={<ActiveShape />}
+          inactiveShape={<InactiveShape />}
+          cx={250}
+          cy={250}
+          innerRadius={0}
+          outerRadius={200}
+          sectors={sectors}
+        />
+      </Surface>,
+    );
+    expect(wrapper.find('.customized-inactive-shape').length).to.equal(4);
+  });
+
+  it('Render customized inactive sector when inactiveShape is set to be a function', () => {
+    const renderActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
+    const renderInactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;
+    const wrapper = render(
+      <Surface width={500} height={500}>
+        <Pie
+          isAnimationActive={false}
+          activeIndex={0}
+          activeShape={renderActiveShape}
+          inactiveShape={renderInactiveShape}
+          cx={250}
+          cy={250}
+          innerRadius={0}
+          outerRadius={200}
+          sectors={sectors}
+        />
+      </Surface>,
+    );
+    expect(wrapper.find('.customized-inactive-shape').length).to.equal(4);
+  });
+
+  it('Render customized inactive sector when inactiveShape is set to be an object', () => {
+    const wrapper = render(
+      <Surface width={500} height={500}>
+        <Pie
+          isAnimationActive={false}
+          activeIndex={0}
+          activeShape={{ fill: '#ff7300' }}
+          inactiveShape={{ fill: '#ff7322' }}
+          cx={250}
+          cy={250}
+          innerRadius={0}
+          outerRadius={200}
+          sectors={sectors}
+        />
+      </Surface>,
+    );
+
+    expect(wrapper.find('.customized-inactive-shape').length).to.equal(0);
+  });
+
+  it('should not render customized inactive sectors if there is no active index', () => {
+    const renderActiveShape = props => <Sector {...props} fill="#ff7300" className="customized-active-shape" />;
+    const renderInactiveShape = props => <Sector {...props} fill="#ff7300" className="customized-inactive-shape" />;
+    const wrapper = render(
+      <Surface width={500} height={500}>
+        <Pie
+          isAnimationActive={false}
+          activeShape={renderActiveShape}
+          inactiveShape={renderInactiveShape}
+          cx={250}
+          cy={250}
+          innerRadius={0}
+          outerRadius={200}
+          sectors={sectors}
+        />
+      </Surface>,
+    );
+    expect(wrapper.find('.customized-inactive-shape').length).to.equal(0);
+  });
+
   it('Support multiple active sectors', () => {
     const ActiveShape = props =>
       <Sector {...props} fill="#ff7300" className="customized-active-shape" />
@@ -113,7 +196,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     expect(wrapper.find('.customized-active-shape').length).to.equal(2);
@@ -135,7 +218,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     expect(wrapper.find('.customized-label').length).to.equal(sectors.length);
@@ -157,7 +240,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     setTimeout(() => {
@@ -182,7 +265,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     expect(wrapper.find('.customized-label').length).to.equal(sectors.length);
@@ -206,7 +289,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     expect(wrapper.find('.customized-label-line').length).to.equal(sectors.length);
@@ -230,7 +313,7 @@ describe('<Pie />', () => {
           outerRadius={200}
           sectors={sectors}
         />
-      </Surface>
+      </Surface>,
     );
 
     expect(wrapper.find('.customized-label-line').length).to.equal(sectors.length);
@@ -265,7 +348,7 @@ describe('<Pie />', () => {
           onMouseLeave={onMouseLeave}
           onClick={onClick}
         />
-      </Surface>
+      </Surface>,
     );
     const se = wrapper.find(Layer).at(3);