Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

Manualy merge from fix/article-interaction-buttons

Browse Source 
Resolve interaction button link issue
This commit is contained in:
Daniel Weissmall 2022-10-12 17:09:11 +03:00
parent bbe6bcca51
commit 81faa7121e
1 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx
View File

@ -11,77 +11,85 @@ import {
SVGFolder,
} from "components/icons";
import classNames from "classnames";
import { Transition } from "@headlessui/react";
const interactionButtonsStore = [
{
icon: <SVGFiletext />,
title: "Read file",
buttonEmphasis: "high",
iconClassName: "h-6 fill-white stroke-white",
},
{
icon: <SVGDownload />,
title: "Download",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
{
icon: <SVGCite />,
title: "Cite",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
{
icon: <SVGShare />,
title: "Share",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
];
import { useArticleViewModel } from "article/controller/articleViewModel";
import { useArticleStore } from "article/data/articleStoreImplementation";
import { useParams } from "react-router";
import Link from "components/typography/Link";
import { getArticle } from "article/data/articleAPIService";
type ArticleButtonProps = {
isAbstractOpen: boolean;
openAbstract: () => void;
children?: React.ReactNode;
className?: string;
emphasis?: "high" | "low";
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
export function ArticleInteractionButtons({
isAbstractOpen = false,
children,
openAbstract = () => { },
className,
emphasis = "high", //to change displaying of component
emphasis, //to change displaying of component
...props
}: ArticleButtonProps) {
const abstractButton = (
<Button
emphasis="medium"
className="text-sm leading-4 items-center px-3 mr-2 focus:outline-none active:outline-none"
onClick={openAbstract}
>
<Button emphasis="medium" className="text-sm leading-4 items-center px-3">
<Button.Icon>
<SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
</Button.Icon>
<Typography fontWeightVariant="bold" className="pr-2">
Abstract
</Typography>
<Button.Icon>
{!isAbstractOpen ? <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" /> : <SVGArrowUp className="w-4 fill-blue-700 stroke-blue-700" />}
</Button.Icon>
</Button>
);
const { id } = useParams();
const newId = `${id}`;
const interactionButtonsStore = [
{
icon: <SVGFiletext />,
title: "Read file",
buttonEmphasis: "high",
iconClassName: "h-6 fill-white stroke-white",
dist: `${newId}/anarticlebody`,
},
{
icon: <SVGDownload />,
title: "Download",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
{
icon: <SVGCite />,
title: "Cite",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
{
icon: <SVGShare />,
title: "Share",
buttonEmphasis: "low",
iconClassName: "w-6 fill-gray-900 stroke-gray-900",
},
];
//
const fileInteractionButtons = interactionButtonsStore.map((button) => {
return (
<Button
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
className="h-max px-2 mr-2"
<Link
onClick={
button.title == "Read file" ? () => getArticle(newId) : () => { }
}
to={button.dist}
>
<Button.Icon>
{React.cloneElement(button.icon, { className: button.iconClassName })}
</Button.Icon>
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
</Button>
<Button
emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
className="h-max px-2 mr-2"
>
<Button.Icon>
{React.cloneElement(button.icon, {
className: button.iconClassName,
})}
</Button.Icon>
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
</Button>
</Link>
);
});