♻️ Delt opp feilkort og fullvisningskort i to komponenter ved bruk av useContext()
This commit is contained in:
Markus Johansen
parent
80b1dfecf0
commit
a4ed380f9f
1 changed files with 69 additions and 57 deletions
|
|
@ -1,12 +1,75 @@
|
|||
import "@navikt/ds-css";
|
||||
import { Button, Heading, Tag } from "@navikt/ds-react";
|
||||
import { IFeilmelding } from "../interface";
|
||||
import { useState } from "react";
|
||||
import { createContext, useContext, useState } from "react";
|
||||
import { XMarkIcon } from "@navikt/aksel-icons";
|
||||
|
||||
interface TagBarInterface {
|
||||
haster: boolean
|
||||
}
|
||||
|
||||
interface HeaderInterface {
|
||||
tittel: string,
|
||||
beskrivelse: string,
|
||||
haster: boolean
|
||||
}
|
||||
|
||||
const visningsContext = createContext({
|
||||
visHeleKortet: false,
|
||||
setVisHeleKortet: (value: boolean) => {}
|
||||
})
|
||||
|
||||
export const FeilCard = (props: IFeilmelding) => {
|
||||
const [visHeleKortet, setVisHeleKortet] = useState(false)
|
||||
const visningsModus = {visHeleKortet, setVisHeleKortet}
|
||||
|
||||
return(
|
||||
<visningsContext.Provider value={visningsModus}>
|
||||
<div className="
|
||||
bg-bg-default border border-border-default p-7 rounded-lg
|
||||
hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
|
||||
active:bg-surface-active
|
||||
"
|
||||
onClick={() => {
|
||||
setVisHeleKortet(true)
|
||||
}}>
|
||||
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} haster={false}/>
|
||||
<FullvisningsKort tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()}/>
|
||||
</div>
|
||||
</visningsContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const FullvisningsKort = (props: IFeilmelding) => {
|
||||
const {visHeleKortet, setVisHeleKortet} = useContext(visningsContext)
|
||||
return(
|
||||
visHeleKortet ?
|
||||
<div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="bg-bg-default border border-border-default p-7 rounded-lg w-1/2">
|
||||
<div className="flex justify-between gap-4">
|
||||
<FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} haster={true}/>
|
||||
<Button
|
||||
icon={<XMarkIcon/>}
|
||||
className="max-h-14 min-w-fit"
|
||||
variant="secondary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setVisHeleKortet(false)
|
||||
}}
|
||||
>
|
||||
Lukk
|
||||
</Button>
|
||||
</div>
|
||||
<div className="h-1 bg-bg-subtle w-full my-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: <></>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
//typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke
|
||||
const TagBar = (props: TagBarInterface) => {
|
||||
return (
|
||||
|
|
@ -17,66 +80,15 @@ const TagBar = (props: TagBarInterface) => {
|
|||
)
|
||||
}
|
||||
|
||||
// const FeilCard1 = (props: IFeilmelding) => {
|
||||
// return (
|
||||
// <ExpansionCard aria-label="tekst">
|
||||
// <ExpansionCard.Header>
|
||||
// <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
|
||||
// <ExpansionCard.Description>
|
||||
// {props.beskrivelse}
|
||||
// </ExpansionCard.Description>
|
||||
// <TagBar haster={true}/>
|
||||
// </ExpansionCard.Header>
|
||||
// <ExpansionCard.Content>
|
||||
// Hællæ
|
||||
// </ExpansionCard.Content>
|
||||
// </ExpansionCard>
|
||||
// )
|
||||
// }
|
||||
// export default FeilCard1;
|
||||
|
||||
export const FeilCard = (props: IFeilmelding) => {
|
||||
const [visFeilinformasjon, setVisFeilinformasjon] = useState(false)
|
||||
|
||||
const FullvisningsKort = () => {
|
||||
return(
|
||||
<div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="
|
||||
bg-bg-default border border-border-default p-7 rounded-lg
|
||||
h-1/2 w-1/2
|
||||
">
|
||||
<Button onClick={(e) => {
|
||||
//hindrer DOM bubbling https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli
|
||||
e.stopPropagation()
|
||||
setVisFeilinformasjon(false)
|
||||
}}>
|
||||
Avslutt kortvisning
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const FeilkortHeader = (props: HeaderInterface) => {
|
||||
return(
|
||||
<div className="
|
||||
bg-bg-default border border-border-default p-7 rounded-lg
|
||||
flex justify-between flex-col
|
||||
hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
|
||||
active:bg-surface-active
|
||||
"
|
||||
onClick={() => {
|
||||
setVisFeilinformasjon(true)
|
||||
}}>
|
||||
|
||||
<div className="flex justify-between flex-col">
|
||||
<div>
|
||||
<Heading size="medium">{props.tittel}</Heading>
|
||||
<p>{props.beskrivelse}</p>
|
||||
</div>
|
||||
<TagBar haster={false}/>
|
||||
|
||||
{visFeilinformasjon ? <FullvisningsKort/> : <></>}
|
||||
</div>
|
||||
<TagBar haster={props.haster}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in a new issue