|
1
|
|
|
import { Component, LinkHTMLAttributes, PropsWithChildren } from "react"; |
|
2
|
|
|
import {classNamingBasic, classNamingCtx} from "react-classnaming" |
|
3
|
|
|
import type { ClassNames } from "react-classnaming" |
|
4
|
|
|
|
|
5
|
|
|
type AppProps = PropsWithChildren< |
|
6
|
|
|
ClassNames< |
|
7
|
|
|
true, |
|
8
|
|
|
"App__Container"|"App__Header"|"App__Content"|"NotExistent", |
|
9
|
|
|
LinkProps, typeof Header, typeof Content |
|
10
|
|
|
> |
|
11
|
|
|
> |
|
12
|
|
|
|
|
13
|
|
|
function App({ |
|
14
|
|
|
className, |
|
15
|
|
|
classNames, classNames: { |
|
16
|
|
|
App__Container |
|
17
|
|
|
} |
|
18
|
|
|
}: AppProps) { |
|
19
|
|
|
const classes = classNamingCtx({classNames}, {withClassNames: true}) |
|
20
|
|
|
|
|
21
|
|
|
return ( |
|
22
|
|
|
<div |
|
23
|
|
|
{...classNamingBasic(className, {App__Container})} |
|
24
|
|
|
id={classNamingBasic<string>({App__Container})} |
|
25
|
|
|
> |
|
26
|
|
|
<Header |
|
27
|
|
|
// TODO Why TS doesn't check object |
|
28
|
|
|
{...classes({App__Header: true})} |
|
29
|
|
|
//@ts-expect-error Property 'className' does not exist |
|
30
|
|
|
className="" |
|
31
|
|
|
/> |
|
32
|
|
|
<Content {...{ |
|
33
|
|
|
...classes(), |
|
34
|
|
|
classNames |
|
35
|
|
|
}}> |
|
36
|
|
|
<Link {...{classNames}} href="https://reactjs.org"> |
|
37
|
|
|
Learn React |
|
38
|
|
|
</Link> |
|
39
|
|
|
</Content> |
|
40
|
|
|
</div> |
|
41
|
|
|
); |
|
42
|
|
|
} |
|
43
|
|
|
|
|
44
|
|
|
// OTHER MODULES |
|
45
|
|
|
|
|
46
|
|
|
type LinkProps = ClassNames<"App__link"> & PropsWithChildren<LinkHTMLAttributes<HTMLLinkElement>> |
|
47
|
|
|
function Link({href, children, "classNames": {App__link}}: LinkProps) { |
|
48
|
|
|
return <a {...{ |
|
49
|
|
|
...classNamingBasic({App__link}), |
|
50
|
|
|
href, |
|
51
|
|
|
"target": "_blank", |
|
52
|
|
|
"rel": "noopener noreferrer" |
|
53
|
|
|
}}>{ |
|
54
|
|
|
children |
|
55
|
|
|
}</a> |
|
56
|
|
|
} |
|
57
|
|
|
|
|
58
|
|
|
function Header({classNames: {Header}}: ClassNames<"Header">) { |
|
59
|
|
|
return <header {...classNamingBasic({Header})}>Header</header> |
|
60
|
|
|
} |
|
61
|
|
|
class Content extends Component<PropsWithChildren<ClassNames<true, "Content">>> { |
|
62
|
|
|
render() { |
|
63
|
|
|
const { |
|
64
|
|
|
className, |
|
65
|
|
|
classNames: {Content}, |
|
66
|
|
|
children |
|
67
|
|
|
} = this.props |
|
68
|
|
|
|
|
69
|
|
|
return <main {...classNamingBasic(className, {Content})}>{children}</main> |
|
70
|
|
|
} |
|
71
|
|
|
} |
|
72
|
|
|
|
|
73
|
|
|
export default App; |
|
74
|
|
|
|
askirmas /
react-classnaming
