fix: pagination as links bug, fullscreen props (#773)

* fix: pagination as links bug, fullscreen props This began as a refactor of several components away from classes. While doing so I was able to remove the Delegate library that was throwing react errors because it was very out of date. Additonally I found a bug with the way proptypes were defined for headerComponent in two components, and also a bug with the pagination when trying to use the pager buttons as links. * refactor: allow any to preserve bwards compat
d2iq · Sep 26, 2022 · 2033fec · 2033fec
1 parent 60e7672
commit 2033fec
Show file tree

Hide file tree

Showing 14 changed files with 317 additions and 404 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,6 @@
     "copy-to-clipboard": "3.3.2",
     "downshift": "6.1.9",
     "react-click-outside": "3.0.1",
-    "react-delegate-component": "1.0.0",
     "react-focus-lock": "2.9.1",
     "react-id-generator": "3.0.2",
     "react-popper": "2.3.0",

diff --git a/packages/donutChart/components/DonutChart.tsx b/packages/donutChart/components/DonutChart.tsx
@@ -27,74 +27,67 @@ export interface DonutChartProps {
   text?: string;
 }
 
-class DonutChart extends React.PureComponent<DonutChartProps, {}> {
-  public render() {
-    const { data, label, text } = this.props;
-    const strokeWidth = 1.5;
-    const radius = 100 / (Math.PI * 2);
-    const diameter = radius * 2 + strokeWidth;
-    const circleCenter = diameter / 2;
+const DonutChart = React.memo(({ data, label, text }: DonutChartProps) => {
+  const strokeWidth = 1.5;
+  const radius = 100 / (Math.PI * 2);
+  const diameter = radius * 2 + strokeWidth;
+  const circleCenter = diameter / 2;
 
-    return (
-      <svg viewBox={`0 0 ${diameter} ${diameter}`} data-cy="donutChart">
-        <circle
-          cx={circleCenter}
-          cy={circleCenter}
-          r={radius}
-          fill="transparent"
-          strokeWidth={strokeWidth}
-          style={{ stroke: hexToRgbA(getCSSVarValue(themeBorder), 0.65) }}
-        />
-        {data.map((datum, i) => {
-          const { percentage, color } = datum;
-          const precedingTotal = data
-            .slice(0, i)
-            .reduce((acc, curr) => acc + curr.percentage, 0);
+  return (
+    <svg viewBox={`0 0 ${diameter} ${diameter}`} data-cy="donutChart">
+      <circle
+        cx={circleCenter}
+        cy={circleCenter}
+        r={radius}
+        fill="transparent"
+        strokeWidth={strokeWidth}
+        style={{ stroke: hexToRgbA(getCSSVarValue(themeBorder), 0.65) }}
+      />
+      {data.map((datum, i) => {
+        const { percentage, color } = datum;
+        const precedingTotal = data
+          .slice(0, i)
+          .reduce((acc, curr) => acc + curr.percentage, 0);
 
-          // total - sum of preceding segments + 1/4 total to offset the segments -90deg
-          const dashoffset = 100 - precedingTotal + 25;
+        // total - sum of preceding segments + 1/4 total to offset the segments -90deg
+        const dashoffset = 100 - precedingTotal + 25;
 
-          return (
-            <circle
-              key={i}
-              cx={circleCenter}
-              cy={circleCenter}
-              r={radius}
-              fill="none"
-              strokeWidth={strokeWidth}
-              strokeDasharray={`${percentage} ${100 - percentage}`}
-              strokeDashoffset={dashoffset}
-              style={{ stroke: color || themeBrandPrimary }}
-            />
-          );
-        })}
-        <text
-          x={circleCenter}
-          y={circleCenter}
-          style={{ textAnchor: "middle" }}
+        return (
+          <circle
+            key={i}
+            cx={circleCenter}
+            cy={circleCenter}
+            r={radius}
+            fill="none"
+            strokeWidth={strokeWidth}
+            strokeDasharray={`${percentage} ${100 - percentage}`}
+            strokeDashoffset={dashoffset}
+            style={{ stroke: color || themeBrandPrimary }}
+          />
+        );
+      })}
+      <text x={circleCenter} y={circleCenter} style={{ textAnchor: "middle" }}>
+        <tspan
+          dominantBaseline={text ? "unset" : "central"}
+          fontSize={6}
+          data-cy="donutChart-label"
         >
+          {label}
+        </tspan>
+        {text && (
           <tspan
-            dominantBaseline={text ? "unset" : "central"}
-            fontSize={6}
-            data-cy="donutChart-label"
+            x={circleCenter}
+            y={circleCenter + 3 * 1.4} // adding font size plus a line height of 1.4 to create a visual line break
+            fontSize={3}
+            className={tintContentSecondary}
+            data-cy="donutChart-text"
           >
-            {label}
+            {text}
           </tspan>
-          {text && (
-            <tspan
-              x={circleCenter}
-              y={circleCenter + 3 * 1.4} // adding font size plus a line height of 1.4 to create a visual line break
-              fontSize={3}
-              className={tintContentSecondary}
-              data-cy="donutChart-text"
-            >
-              {text}
-            </tspan>
-          )}
-        </text>
-      </svg>
-    );
-  }
-}
+        )}
+      </text>
+    </svg>
+  );
+});
 
 export default DonutChart;
diff --git a/packages/donutChart/stories/DonutChart.stories.tsx b/packages/donutChart/stories/DonutChart.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DonutChart } from "../index";
-import { Story, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { purple, pink, blue } from "../../design-tokens/build/js/designTokens";
 import { css } from "@emotion/css";
 

diff --git a/packages/donutChart/tests/DonutChart.test.tsx b/packages/donutChart/tests/DonutChart.test.tsx
@@ -1,15 +1,14 @@
 import React from "react";
-import { shallow } from "enzyme";
 import { createSerializer } from "@emotion/jest";
-import toJson from "enzyme-to-json";
+import { create } from "react-test-renderer";
 
 import { DonutChart } from "../";
 
 expect.addSnapshotSerializer(createSerializer());
 
 describe("DonutChart", () => {
   it("renders default", () => {
-    const component = shallow(
+    const component = create(
       <DonutChart
         data={[
           {
@@ -20,10 +19,10 @@ describe("DonutChart", () => {
       />
     );
 
-    expect(toJson(component)).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
   });
   it("renders with text and label", () => {
-    const component = shallow(
+    const component = create(
       <DonutChart
         data={[
           {
@@ -36,6 +35,6 @@ describe("DonutChart", () => {
       />
     );
 
-    expect(toJson(component)).toMatchSnapshot();
+    expect(component.toJSON()).toMatchSnapshot();
   });
 });
diff --git a/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap b/packages/donutChart/tests/__snapshots__/DonutChart.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`DonutChart renders default 1`] = `
     cx={16.665494309189533}
     cy={16.665494309189533}
     fill="none"
-    key="0"
     r={15.915494309189533}
     strokeDasharray="10 90"
     strokeDashoffset={125}
@@ -82,7 +81,6 @@ exports[`DonutChart renders with text and label 1`] = `
     cx={16.665494309189533}
     cy={16.665494309189533}
     fill="none"
-    key="0"
     r={15.915494309189533}
     strokeDasharray="10 90"
     strokeDashoffset={125}

diff --git a/packages/dropdownable/stories/helpers/DropdownStory.tsx b/packages/dropdownable/stories/helpers/DropdownStory.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { css } from "@emotion/css";
 import styled from "@emotion/styled";
 
-import Dropdownable from "../../components/Dropdownable";
+import Dropdownable, { Direction } from "../../components/Dropdownable";
 import { PrimaryButton } from "../../../button";
 import {
   themeBgPrimary,
@@ -16,7 +16,13 @@ export const DropdownContentContainer = styled.div`
   padding: 5px;
 `;
 
-const DropdownStory = ({ children, preferredDirections }) => {
+const DropdownStory = ({
+  children,
+  preferredDirections
+}: {
+  children: ReactNode;
+  preferredDirections?: Direction | Direction[];
+}) => {
   const [isShowing, setIsShowing] = React.useState(false);
 
   function toggle() {

diff --git a/packages/dropdownable/stories/helpers/DropdownStoryFit.tsx b/packages/dropdownable/stories/helpers/DropdownStoryFit.tsx
@@ -5,76 +5,57 @@ import Dropdownable, { Direction } from "../../components/Dropdownable";
 import { PrimaryButton, SecondaryButton } from "../../../button";
 import { DropdownContentContainer } from "./DropdownStory";
 
-class DropdownStoryFit extends React.PureComponent<
-  {},
-  { isOpen: boolean; expanded: boolean }
-> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      expanded: false,
-      isOpen: false
-    };
-
-    this.toggleExpand = this.toggleExpand.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleOpen = this.handleOpen.bind(this);
-  }
-
-  toggleExpand() {
-    this.setState({ expanded: !this.state.expanded });
+const DropdownStoryFit = ({ children }) => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [expanded, setExpanded] = React.useState<boolean>(false);
+
+  const containerStyle = css({
+    display: "flex",
+    ["align-items"]: "center",
+    ["justify-content"]: "flex-end",
+    ["min-height"]: expanded ? "400px" : "40px"
+  });
+
+  function toggleExpand() {
+    setExpanded(!expanded);
   }
 
-  handleClose() {
-    this.setState({
-      isOpen: false
-    });
+  function handleClose() {
+    setIsOpen(false);
   }
 
-  handleOpen() {
-    this.setState({ isOpen: true });
+  function handleOpen() {
+    setIsOpen(true);
   }
 
-  render() {
-    const { children } = this.props;
-
-    const containerStyle = css({
-      display: "flex",
-      ["align-items"]: "center",
-      ["justify-content"]: "flex-end",
-      ["min-height"]: this.state.expanded ? "400px" : "40px"
-    });
-
-    return (
-      <div>
-        <div className={containerStyle}>
-          <Dropdownable
-            isOpen={this.state.isOpen}
-            onClose={this.handleClose}
-            preferredDirections={[Direction.TopRight, Direction.BottomRight]}
-            dropdown={
-              <DropdownContentContainer>
-                <p>I prefer to be positioned on the top</p>
-                <p>Click outside to dismiss</p>
-                <p>Also try resizing</p>
-                <p>Click the other button to make more vertical space</p>
-                <p>Click the other button to make more vertical space</p>
-                <p>Click the other button to make more vertical space</p>
-                <p>Click the other button to make more vertical space</p>
-                <p>Click the other button to make more vertical space</p>
-              </DropdownContentContainer>
-            }
-          >
-            <PrimaryButton onClick={this.handleOpen}>{children}</PrimaryButton>
-          </Dropdownable>
-        </div>
-        <SecondaryButton onClick={this.toggleExpand}>
-          {this.state.expanded ? "Collapse" : "Expand"}
-        </SecondaryButton>
+  return (
+    <div>
+      <div className={containerStyle}>
+        <Dropdownable
+          isOpen={isOpen}
+          onClose={handleClose}
+          preferredDirections={[Direction.TopRight, Direction.BottomRight]}
+          dropdown={
+            <DropdownContentContainer>
+              <p>I prefer to be positioned on the top</p>
+              <p>Click outside to dismiss</p>
+              <p>Also try resizing</p>
+              <p>Click the other button to make more vertical space</p>
+              <p>Click the other button to make more vertical space</p>
+              <p>Click the other button to make more vertical space</p>
+              <p>Click the other button to make more vertical space</p>
+              <p>Click the other button to make more vertical space</p>
+            </DropdownContentContainer>
+          }
+        >
+          <PrimaryButton onClick={handleOpen}>{children}</PrimaryButton>
+        </Dropdownable>
       </div>
-    );
-  }
-}
+      <SecondaryButton onClick={toggleExpand}>
+        {expanded ? "Collapse" : "Expand"}
+      </SecondaryButton>
+    </div>
+  );
+};
 
 export default DropdownStoryFit;