51 lines
1.2 KiB
JavaScript
51 lines
1.2 KiB
JavaScript
import { useRef, useEffect } from "react";
|
|
import "../../styles/AppealWidget.css";
|
|
import { TouchableLayout } from "../TouchableLayout";
|
|
import { ReactMarkdownComponent } from "../ReactMarkdown";
|
|
|
|
function AppealWidget({
|
|
widgetImgPath,
|
|
widgetLabel,
|
|
widgetText,
|
|
style,
|
|
isOpen,
|
|
}) {
|
|
const stopProp = (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
};
|
|
const layoutRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && layoutRef.current) {
|
|
const scrollable = layoutRef.current.querySelector(".scrollable");
|
|
if (scrollable) scrollable.scrollTop = 0;
|
|
}
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<div
|
|
style={style}
|
|
className="dynamic-widget"
|
|
onPointerDown={stopProp}
|
|
onPointerMove={stopProp}
|
|
onPointerUp={stopProp}
|
|
>
|
|
{widgetImgPath && (
|
|
<img className="dynamic-widget-image" src={widgetImgPath} />
|
|
)}
|
|
<div className="dynamic-widget-label">{widgetLabel}</div>
|
|
<TouchableLayout
|
|
ref={layoutRef}
|
|
className="dynamic-widget-text-scroll"
|
|
>
|
|
<div className="dynamic-widget-text">
|
|
<ReactMarkdownComponent value={widgetText} />
|
|
</div>
|
|
</TouchableLayout>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppealWidget;
|