unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-25 14:34:19 +00:00
Code Activity

🔧 Allow BoxWithHeader to accept nodes instead of objects as props

Browse source
This commit is contained in:
Stefano Pigozzi 2021-04-21 01:22:31 +02:00
parent 0c887899bd
commit 7bbd0a8421
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
4 changed files with 43 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
code/frontend/package-lock.json generated
View file

@ -12,6 +12,7 @@
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"classnames": "^2.3.1",
"is-string": "^1.0.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

1
code/frontend/package.json
View file

@ -7,6 +7,7 @@
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"classnames": "^2.3.1",
"is-string": "^1.0.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

28
code/frontend/src/App.js
View file

@ -10,11 +10,8 @@ export default function App() {
return (
<div className={classNames(Style.App, theme)}>
<BoxWithHeader
header={{
children: "Ciao mondo!"
}}
body={{
children: (
header={"Ciao mondo!"}
body={
<div>
<div>
Il CSS è pura magia.
@ -23,28 +20,19 @@ export default function App() {
Change my mind.
</div>
</div>
),
}}
}
/>
<BoxWithHeader
header={{
children: "Questa è un'altra Box."
}}
body={{
children: (
header={"Questa è un'altra Box."}
body={
<div>
E altro testo.
</div>
)
}}
}
/>
<BoxWithHeader
header={{
children: "Ecco, così va meglio.",
}}
body={{
children: "No."
}}
header={"Ecco, così va meglio."}
body={"No."}
/>
</div>
)

26
code/frontend/src/components/BoxWithHeader.js
View file

@ -1,9 +1,31 @@
import React from "react"
import React, {isValidElement} from "react"
import Style from "./BoxWithHeader.module.css"
import classNames from "classnames"
import isString from "is-string"
export default function BoxWithHeader({ header, body, className, ...props }) {
export default function BoxWithHeader({ header, body, children, className, ...props }) {
if(isValidElement(header) || isString(header)) {
header = {
children: header
}
}
if(isValidElement(body) || isString(body)) {
body = {
children: body
}
}
if(children) {
if(body.children) {
throw new Error("If directly passing `children` to BoxWithHeader, body.children should not be set.")
}
body["children"] = children
}
return (
<div className={classNames(Style.BoxWithHeader, className)} {...props}>
<div className={classNames(Style.BoxHeader, header.className)}>