UI nested instead (#5125)

* Support multiple calls to PluginApi.patch.instead for a component.

Allow calling the original/chained function from the hook function.

* Add example of new usage of instead
* Update documentation
This commit is contained in:
WithoutPants
2024-08-20 12:36:45 +10:00
committed by GitHub
parent a94bf29b34
commit 49060e6686
4 changed files with 59 additions and 8 deletions

View File

@@ -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;
}

View File

@@ -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]);