Scipaper/front-end
5
0
Fork 0
Code Issues 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, SVGFolder,
} from "components/icons"; } from "components/icons";
import classNames from "classnames"; import classNames from "classnames";
import { Transition } from "@headlessui/react";
const interactionButtonsStore = [ import { useArticleViewModel } from "article/controller/articleViewModel";
{ import { useArticleStore } from "article/data/articleStoreImplementation";
icon: <SVGFiletext />, import { useParams } from "react-router";
title: "Read file", import Link from "components/typography/Link";
buttonEmphasis: "high", import { getArticle } from "article/data/articleAPIService";
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",
},
];
type ArticleButtonProps = { type ArticleButtonProps = {
isAbstractOpen: boolean;
openAbstract: () => void;
children?: React.ReactNode; children?: React.ReactNode;
className?: string; className?: string;
emphasis?: "high" | "low"; emphasis?: "high" | "low";
} & Omit<React.ComponentPropsWithoutRef<"button">, "">; } & Omit<React.ComponentPropsWithoutRef<"button">, "">;
export function ArticleInteractionButtons({ export function ArticleInteractionButtons({
isAbstractOpen = false,
children, children,
openAbstract = () => { },
className, className,
emphasis = "high", //to change displaying of component emphasis, //to change displaying of component
...props ...props
}: ArticleButtonProps) { }: ArticleButtonProps) {
const abstractButton = ( const abstractButton = (
<Button <Button emphasis="medium" className="text-sm leading-4 items-center px-3">
emphasis="medium" <Button.Icon>
className="text-sm leading-4 items-center px-3 mr-2 focus:outline-none active:outline-none" <SVGArrowDown className="w-4 fill-blue-700 stroke-blue-700" />
onClick={openAbstract} </Button.Icon>
>
<Typography fontWeightVariant="bold" className="pr-2"> <Typography fontWeightVariant="bold" className="pr-2">
Abstract Abstract
</Typography> </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> </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) => { const fileInteractionButtons = interactionButtonsStore.map((button) => {
return ( return (
<Button <Link
emphasis={button.buttonEmphasis === "high" ? "high" : "low"} onClick={
className="h-max px-2 mr-2" button.title == "Read file" ? () => getArticle(newId) : () => { }
}
to={button.dist}
> >
<Button.Icon> <Button
{React.cloneElement(button.icon, { className: button.iconClassName })} emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
</Button.Icon> className="h-max px-2 mr-2"
{emphasis === "high" ? <Typography>{button.title}</Typography> : null} >
</Button> <Button.Icon>
{React.cloneElement(button.icon, {
className: button.iconClassName,
})}
</Button.Icon>
{emphasis === "high" ? <Typography>{button.title}</Typography> : null}
</Button>
</Link>
); );
}); });