Implement support for HTML and COMPONENT extension value types

Affects issues:
- Fixed #2950
This commit is contained in:
Aurora Lahtela 2023-04-22 18:49:53 +03:00
parent 5161f6f825
commit f2cb56d04c

View File

@ -4,6 +4,9 @@ import ExtensionIcon from "./ExtensionIcon";
import Datapoint from "../Datapoint"; import Datapoint from "../Datapoint";
import Masonry from 'masonry-layout' import Masonry from 'masonry-layout'
import ExtensionTable from "./ExtensionTable"; import ExtensionTable from "./ExtensionTable";
import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
import End from "../layout/End";
import {MinecraftChat} from "react-mcjsonchat";
export const ExtensionCardWrapper = ({extension, children}) => { export const ExtensionCardWrapper = ({extension, children}) => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth); const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@ -43,12 +46,31 @@ const ExtensionTab = ({tab}) => {
} }
const ExtensionValue = ({data}) => { const ExtensionValue = ({data}) => {
return (<Datapoint name={data.description.text} const color = data.description.icon.colorClass;
title={data.description.description} const colorClass = color && color.startsWith("col-") ? color : "col-" + color;
icon={[data.description.icon.familyClass, data.description.icon.iconName]} const icon = [data.description.icon.familyClass, data.description.icon.iconName];
color={data.description.icon.colorClass} const name = data.description.text;
value={data.value} const title = data.description.description;
/>); if (data.type === 'HTML') {
return (
<p title={title}>
{icon && <Fa icon={icon} className={colorClass}/>} {name}
{<End><span dangerouslySetInnerHTML={data.value}></span></End>}
</p>
);
} else if (data.type === 'COMPONENT') {
return (<p title={title}>
{icon && <Fa icon={icon} className={colorClass}/>} {name}
{<End><MinecraftChat component={JSON.parse(data.value)}/></End>}
</p>)
} else {
return (<Datapoint name={name}
title={title}
icon={icon}
color={color}
value={data.value}
/>);
}
} }
const ExtensionValues = ({tab}) => { const ExtensionValues = ({tab}) => {