Add example of new usage of instead

stashapp · Aug 12, 2024 · a2cb6ca · a2cb6ca
1 parent 8cb479e
commit a2cb6ca
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/pkg/plugin/examples/react-component/src/testReact.scss b/pkg/plugin/examples/react-component/src/testReact.scss
@@ -33,4 +33,15 @@
 .scene-performer-popover .image-thumbnail {
   margin: 1em;
 }
-
+
+.example-react-component-custom-overlay {
+  display: block;
+  font-weight: 900;
+  height: 100%;
+  opacity: 0.25;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 100%;
+  z-index: 8;
+}
diff --git a/pkg/plugin/examples/react-component/src/testReact.tsx b/pkg/plugin/examples/react-component/src/testReact.tsx
@@ -132,10 +132,18 @@ interface IPluginApi {
     );
   }
 
+  function Overlays() {
+    return <span className="example-react-component-custom-overlay">Custom overlay</span>;
+  }
+
   PluginApi.patch.instead("SceneCard.Details", function (props: any, _: any, original: any) {
     return <SceneDetails {...props} />;
   });
 
+  PluginApi.patch.instead("SceneCard.Overlays", function (props: any, _: any, original: (props: any) => any) {  
+    return <><Overlays />{original({...props})}</>;
+  });
+
   const TestPage: React.FC = () => {
     const componentsLoading = PluginApi.hooks.useLoadComponents([PluginApi.loadableComponents.SceneCard]);