Test and cleanup the disabled <link> node logic, improve examples (#…

…543)
MatthewHerbst · Nov 3, 2022 · 579d661 · 579d661
1 parent 9ea7896
commit 579d661
Show file tree

Hide file tree

Showing 10 changed files with 6,717 additions and 306 deletions.
diff --git a/examples/ComponentToPrint/index.tsx b/examples/ComponentToPrint/index.tsx
@@ -47,6 +47,15 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
 
     return (
       <div className="relativeCSS">
+        <link
+          // This tests that we properly ignore disabled nodes
+          // Learn more: https://github.com/gregnb/react-to-print/pull/537
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          disabled
+          rel="stylesheet"
+          href="../disabled.css"
+        />
         <style type="text/css" media="print">{"\
    @page {\ size: landscape;\ }\
 "}</style>

diff --git a/examples/index.html b/examples/index.html
@@ -2,7 +2,10 @@
 <html>
 <head>
     <title>ReactToPrint Examples</title>
-    <link href="./index.css" type="text/css" />
+    <link href="./title.css" rel="stylesheet" type="text/css" />
+    <link disabled href="./disabled.css" rel="stylesheet" type="text/css" />
+    <link disabled="true" href="./disabled.css" rel="stylesheet" type="text/css" />
+    <link disabled="false" href="./disabled.css" rel="stylesheet" type="text/css" />
 </head>
 <body class="body-class">
     <style>
@@ -19,7 +22,6 @@
             U+2215, U+FEFF, U+FFFD;
         }
       </style>
-    <h1>Open the developer console to see lifecycle method logging</h1>
     <div id="app-root" />
 </body>
 </html>

diff --git a/examples/index.tsx b/examples/index.tsx
@@ -9,7 +9,7 @@ import { ClassComponentText } from "./ClassComponentText";
 import { FunctionalComponent } from "./FunctionalComponent";
 import { FunctionalComponentWithHook } from "./FunctionalComponentWithHook";
 import { FunctionalComponentWithFunctionalComponentToPrint } from './FunctionalComponentWithFunctionalComponentToPrint';
-import "./index.css";
+import "./styles/index.css";
 
 type Props = Record<string, unknown>;
 type State = {
@@ -20,43 +20,46 @@ type State = {
 class Example extends React.Component<Props, State> {
   render() {
     return (
-      <Tabs>
-        <TabList>
-          <Tab>Class Component</Tab>
-          <Tab>Functional Component</Tab>
-          <Tab>Raw Values</Tab>
-        </TabList>
-        <TabPanel>
-          <Tabs>
-            <TabList>
-              <Tab>Standard</Tab>
-              <Tab>With ContextConsumer</Tab>
-            </TabList>
-            <TabPanel><ClassComponent /></TabPanel>
-            <TabPanel><ClassComponentContextConsumer /></TabPanel>
-          </Tabs>
-        </TabPanel>
-        <TabPanel>
-          <Tabs>
-            <TabList>
-              <Tab>Standard</Tab>
-              <Tab>With Hook</Tab>
-              <Tab>With a functional ComponentToPrint</Tab>
-            </TabList>
-            <TabPanel><FunctionalComponent /></TabPanel>
-            <TabPanel><FunctionalComponentWithHook /></TabPanel>
-            <TabPanel><FunctionalComponentWithFunctionalComponentToPrint /></TabPanel>
-          </Tabs>
-        </TabPanel>
-        <TabPanel>
-          <Tabs>
-            <TabList>
-              <Tab>Text</Tab>
-            </TabList>
-            <TabPanel><ClassComponentText /></TabPanel>
-          </Tabs>
-        </TabPanel>
-      </Tabs>
+      <div>
+        <span className="title">Open the developer console to see lifecycle method logging</span>
+        <Tabs>
+          <TabList>
+            <Tab>Class Component</Tab>
+            <Tab>Functional Component</Tab>
+            <Tab>Raw Values</Tab>
+          </TabList>
+          <TabPanel>
+            <Tabs>
+              <TabList>
+                <Tab>Standard</Tab>
+                <Tab>With ContextConsumer</Tab>
+              </TabList>
+              <TabPanel><ClassComponent /></TabPanel>
+              <TabPanel><ClassComponentContextConsumer /></TabPanel>
+            </Tabs>
+          </TabPanel>
+          <TabPanel>
+            <Tabs>
+              <TabList>
+                <Tab>Standard</Tab>
+                <Tab>With Hook</Tab>
+                <Tab>With a functional ComponentToPrint</Tab>
+              </TabList>
+              <TabPanel><FunctionalComponent /></TabPanel>
+              <TabPanel><FunctionalComponentWithHook /></TabPanel>
+              <TabPanel><FunctionalComponentWithFunctionalComponentToPrint /></TabPanel>
+            </Tabs>
+          </TabPanel>
+          <TabPanel>
+            <Tabs>
+              <TabList>
+                <Tab>Text</Tab>
+              </TabList>
+              <TabPanel><ClassComponentText /></TabPanel>
+            </Tabs>
+          </TabPanel>
+        </Tabs>
+      </div>
     );
   }
 }

diff --git a/examples/styles/disabled.css b/examples/styles/disabled.css
@@ -0,0 +1,3 @@
+#app-root {
+    background-color: red;
+}
diff --git a/examples/index.css → examples/styles/index.css b/examples/index.css → examples/styles/index.css
diff --git a/examples/styles/title.css b/examples/styles/title.css
@@ -0,0 +1,4 @@
+.title {
+    font-size: 35px;
+    font-weight: bold;
+}