Base64Png Editor PatternFly
export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwardedRef) => { | |
// ... | |
return ( | |
<div className={"base64png-editor--main"}> | |
<div className={"base64png-editor--viewport"}> | |
<img | |
ref={imageRef} | |
className={"base64png-editor--image"} | |
src={`data:image/png;base64,${originalContent}`} | |
alt={"Original"} | |
/> | |
{disabled && ( | |
<EmptyState> | |
<EmptyStateIcon icon={CubesIcon} /> | |
<Title headingLevel="h5" size="4xl"> | |
Empty image | |
</Title> | |
</EmptyState> | |
)} | |
<canvas ref={canvasRef} className={"base64png-editor--canvas"} /> | |
</div> | |
<div className={"base64png-editor--tweaks"}> | |
<Nav aria-label="Image tweaker"> | |
<NavList> | |
<NavItem itemId={0}> | |
<div className={"base64png-editor--tweaks-nav-item"}> | |
<p>Invert</p> | |
<Switch | |
id="invert-switch" | |
isDisabled={disabled} | |
isChecked={invert === "100"} | |
onChange={(value) => tweakInvert(value ? "100" : "0")} | |
/> | |
</div> | |
</NavItem> | |
</NavList> | |
</Nav> | |
</div> | |
</div> | |
); | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment