Replace mini.css with MUI; Refactor and merge other try app
This commit is contained in:
parent
4bc2252e72
commit
4b5f7e64ee
29
README.md
29
README.md
@ -9,6 +9,35 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
|
||||
|
||||
This project use `yarn`
|
||||
|
||||
## minicss and mui
|
||||
|
||||
In this project, two styling frameworks have beeen added:
|
||||
|
||||
### mini.css
|
||||
|
||||
See: https://www.npmjs.com/package/mini.css
|
||||
|
||||
Note: there are similar project called: mini-css and minicss
|
||||
|
||||
`yarn add mini.css`
|
||||
|
||||
### Material UI (MUI)
|
||||
|
||||
See: https://mui.com/material-ui/getting-started/installation/
|
||||
|
||||
`yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material`
|
||||
|
||||
### Use React Router DOM
|
||||
|
||||
Install with typescript:
|
||||
|
||||
`yarn add react-router-dom`
|
||||
`yarn add --dev @types/react-router-dom`
|
||||
|
||||
for typescript
|
||||
|
||||
--save-dev typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom
|
||||
|
||||
## Before you start
|
||||
|
||||
After cloning this project to your local environment, run install:
|
||||
|
||||
10
package.json
10
package.json
@ -3,6 +3,10 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@mui/icons-material": "^5.11.0",
|
||||
"@mui/material": "^5.11.4",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -10,10 +14,9 @@
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"mini-css": "^1.0.3",
|
||||
"mini.css": "^3.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.6.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
@ -41,5 +44,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-router-dom": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Self-learning Project for ReactJS - Context API (2023)</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
73
src/App.tsx
73
src/App.tsx
@ -1,53 +1,28 @@
|
||||
import React, { Component } from 'react';
|
||||
import { AppContext, AppState } from './context/AppContext';
|
||||
import { Counter, Hello } from './components/TestA';
|
||||
import { CompB, CompC, CompD } from './components/TestB';
|
||||
import React from 'react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
import './App.css';
|
||||
// import Layout from './pages/Layout';
|
||||
import Home from './pages/Home';
|
||||
import Header from './pages/Header';
|
||||
import NotFound from './pages/NotFound';
|
||||
// import * as try1app from './try1/Try1';
|
||||
// const Try1App = try1app.default
|
||||
import Try1App from './try1/Try1';
|
||||
import {Try2App} from './try2/Try2';
|
||||
|
||||
|
||||
// const sampleContextProp = {
|
||||
// name: "Fong",
|
||||
// value: 123,
|
||||
// }
|
||||
|
||||
class App extends Component<any, AppState> {
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
test: {
|
||||
name: "Fong",
|
||||
value: 123,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
update = (appState: any) => {
|
||||
this.setState(prevState => (appState))
|
||||
// let thePrevstate;
|
||||
// this.setState(prevState => {
|
||||
// thePrevstate = prevState;
|
||||
// return appState;
|
||||
// });
|
||||
// return thePrevstate;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { update } = this;
|
||||
const appState = this.state;
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<AppContext.Provider value={{ appState, update }} >
|
||||
<Counter header="Test Counter" />
|
||||
<Hello name='ohno' />
|
||||
<CompB></CompB>
|
||||
<CompC></CompC>
|
||||
<CompD></CompD>
|
||||
</AppContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
<div className="App">
|
||||
<Header></Header>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/try1" element={<Try1App />} />
|
||||
<Route path="/try2" element={<Try2App />} />
|
||||
<Route path='*' element={<NotFound />}/>
|
||||
</Routes>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
@ -1,65 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
type CounterProps = {
|
||||
header: string;
|
||||
};
|
||||
|
||||
type CounterState = {
|
||||
value: number;
|
||||
};
|
||||
|
||||
class Counter extends Component<CounterProps, CounterState> {
|
||||
// constructor(props: CounterProps) {
|
||||
// super(props);
|
||||
// this.state = {
|
||||
// value: 0,
|
||||
// }
|
||||
// }
|
||||
|
||||
state: CounterState = {
|
||||
value: 0,
|
||||
};
|
||||
|
||||
incByOne = (
|
||||
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
|
||||
) => {
|
||||
this.setState(prevState => ({
|
||||
value: prevState.value + 1
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { header } = this.props;
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h3>{header}</h3>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-10'>Current Value: {value}</div>
|
||||
<div className='col-sm-2'><button onClick={this.incByOne}>+1</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type HelloProps = {
|
||||
name: string;
|
||||
}
|
||||
|
||||
class Hello extends React.Component<HelloProps> {
|
||||
render() {
|
||||
const { name } = this.props;
|
||||
return (
|
||||
<div className="card">
|
||||
<h3>Hello Comp</h3>
|
||||
<p>Prop:Name = {name}</p>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export { Counter, Hello };
|
||||
@ -1,89 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { AppContext } from '../context/AppContext';
|
||||
// import { AppContextType } from '../context/AppContext';
|
||||
|
||||
// Class Component
|
||||
class CompB extends Component {
|
||||
// Set the context
|
||||
static contextType = AppContext;
|
||||
context!: React.ContextType<typeof AppContext>;
|
||||
|
||||
setCtxClicked = () => {
|
||||
const { update } = this.context!;
|
||||
update({
|
||||
test:{
|
||||
value: 9,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { appState } = this.context!;
|
||||
|
||||
console.log("-------PROP----");
|
||||
console.log(this.props);
|
||||
console.log("-------State----");
|
||||
console.log(this.state);
|
||||
// console.log("-------Context----");
|
||||
return (
|
||||
<div className="container card">
|
||||
<h4>Component: CompB</h4>
|
||||
<p>Ctx:Name = {appState!.test.name}</p>
|
||||
<p>Ctx:Value = {appState!.test.value}</p>
|
||||
<button onClick={this.setCtxClicked}>Set Ctx</button>
|
||||
<Toolbar pTest="Set me props" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Toolbar(props: any) {
|
||||
// context via Hooks
|
||||
// Note: 'useContext' should only be used in functional component, not class comp.
|
||||
const ctx = React.useContext(AppContext);
|
||||
return (
|
||||
<div className="card shadowed">
|
||||
<h5>Component: ToolBar</h5>
|
||||
<p>Prop:pTest = {props.pTest}</p>
|
||||
<p>Ctx:Name = {ctx!.appState!.test.name}</p>
|
||||
<p>Ctx:Value = {ctx!.appState!.test.value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Class Component
|
||||
// context via Consumer
|
||||
class CompC extends Component {
|
||||
render() {
|
||||
return (
|
||||
<AppContext.Consumer>
|
||||
{value => (
|
||||
<div className="card">
|
||||
<h5>Component: CompC</h5>
|
||||
<p>value:Name = {value!.appState!.test.name}</p>
|
||||
<p>value:Value = {value!.appState!.test.value}</p>
|
||||
</div >
|
||||
)}
|
||||
</AppContext.Consumer>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Class Component
|
||||
// context via Consumer
|
||||
class CompD extends Component {
|
||||
context!: React.ContextType<typeof AppContext>;
|
||||
render() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h5>Component: CompD</h5>
|
||||
<p>value:Name = {this.context!.appState!.test.name}</p>
|
||||
<p>value:Value = {this.context!.appState!.test.value}</p>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
}
|
||||
CompD.contextType = AppContext;
|
||||
|
||||
export { CompB, CompC, CompD };
|
||||
43
src/components/Widget.tsx
Normal file
43
src/components/Widget.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import { CardHeader } from '@mui/material';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
type WidgetProps = {
|
||||
headerTitle?: string,
|
||||
actionBtnTitle?: string,
|
||||
onActionBtnClicked?: (event: any) => void
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const Widget: React.FC<WidgetProps> = (props) => {
|
||||
const headerTitle = props.headerTitle;
|
||||
const actionBtnTitle = props.actionBtnTitle;
|
||||
let hasHeaderTitle = (headerTitle && headerTitle.length > 0);
|
||||
|
||||
return (
|
||||
<Card sx={{ minWidth: 275 }} variant="outlined">
|
||||
{hasHeaderTitle &&
|
||||
<CardHeader title={headerTitle} />
|
||||
}
|
||||
<CardContent>
|
||||
{props.children}
|
||||
</CardContent>
|
||||
{(props.actionBtnTitle !== undefined) &&
|
||||
<CardActions>
|
||||
<Button variant="contained" onClick={props.onActionBtnClicked}>{
|
||||
(actionBtnTitle && actionBtnTitle.length > 0) ? actionBtnTitle : "Click"
|
||||
}</Button>
|
||||
</CardActions>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Widget.defaultProps = {
|
||||
// title: ''
|
||||
// };
|
||||
|
||||
export default Widget;
|
||||
@ -1 +0,0 @@
|
||||
@import '../node_modules/mini.css/dist/mini-default.min.css';
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
@ -8,9 +9,9 @@ const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
55
src/pages/Header.tsx
Normal file
55
src/pages/Header.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Button from '@mui/material/Button';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import { Outlet, Link } from "react-router-dom";
|
||||
|
||||
const mainmenuItems = [
|
||||
{ text: 'Home', href: '/' },
|
||||
{ text: 'Try1', href: '/try1' },
|
||||
{ text: 'Try2', href: '/try2' }
|
||||
]
|
||||
|
||||
const HeaderAppBar = () => {
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
size="large"
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
Self-learning Project
|
||||
</Typography>
|
||||
{
|
||||
mainmenuItems.map((item, idx) => {
|
||||
return (
|
||||
<React.Fragment key={item.href}>
|
||||
<Button component={Link} to={item.href} color="inherit">{item.text}</Button>
|
||||
</React.Fragment>)
|
||||
})
|
||||
}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<>
|
||||
<HeaderAppBar />
|
||||
<Box sx={{ m: 2 }} />
|
||||
</>
|
||||
)
|
||||
};
|
||||
11
src/pages/Home.tsx
Normal file
11
src/pages/Home.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
// import { Link } from "react-router-dom";
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Welcome to Self-learning Project</h1>
|
||||
<p>For ReactJS - Context API (2023)</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
5
src/pages/NotFound.tsx
Normal file
5
src/pages/NotFound.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const NotFound = () => {
|
||||
return <h1>404 Page Not Found</h1>;
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
0
src/try1/Try1.css
Normal file
0
src/try1/Try1.css
Normal file
57
src/try1/Try1.tsx
Normal file
57
src/try1/Try1.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React, { Component } from 'react';
|
||||
import { AppContext, AppState } from './context/AppContext';
|
||||
import Counter from './components/Counter';
|
||||
import { SlaveConsumer, SlaveContextType } from './components/Slaves';
|
||||
import './Try1.css';
|
||||
import { Box, Grid } from '@mui/material';
|
||||
import Master from './components/Master';
|
||||
|
||||
class App extends Component<any, AppState> {
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
test: {
|
||||
name: "XYZ",
|
||||
value: 123,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
update = (appState: any) => {
|
||||
this.setState(prevState => (appState))
|
||||
// let thePrevstate;
|
||||
// this.setState(prevState => {
|
||||
// thePrevstate = prevState;
|
||||
// return appState;
|
||||
// });
|
||||
// return thePrevstate;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { update } = this;
|
||||
const appState = this.state;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<AppContext.Provider value={{ appState, update }} >
|
||||
<Counter title="Test Counter" />
|
||||
<Box sx={{ m: 2 }} />
|
||||
<Grid container spacing={2}>
|
||||
<Grid item md={4}>
|
||||
<Master></Master>
|
||||
</Grid>
|
||||
<Grid item md={4}>
|
||||
<SlaveConsumer></SlaveConsumer>
|
||||
</Grid>
|
||||
<Grid item md={4}>
|
||||
<SlaveContextType></SlaveContextType>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</AppContext.Provider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
42
src/try1/components/Counter.tsx
Normal file
42
src/try1/components/Counter.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { Component } from 'react';
|
||||
import Widget from '../../components/Widget';
|
||||
|
||||
type CounterProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
type CounterState = {
|
||||
value: number;
|
||||
};
|
||||
|
||||
class Counter extends Component<CounterProps, CounterState> {
|
||||
// constructor(props: CounterProps) {
|
||||
// super(props);
|
||||
// this.state = {
|
||||
// value: 0,
|
||||
// }
|
||||
// }
|
||||
|
||||
state: CounterState = {
|
||||
value: 0,
|
||||
};
|
||||
|
||||
incByOne = (
|
||||
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
|
||||
) => {
|
||||
this.setState(prevState => ({
|
||||
value: prevState.value + 1
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value } = this.state;
|
||||
return (
|
||||
<Widget headerTitle={this.props.title} actionBtnTitle='+1' onActionBtnClicked={this.incByOne}>
|
||||
Current Value in State: {value}
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Counter;
|
||||
51
src/try1/components/Master.tsx
Normal file
51
src/try1/components/Master.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React, { Component } from 'react';
|
||||
import Widget from '../../components/Widget';
|
||||
import { AppContext } from '../context/AppContext';
|
||||
|
||||
const ChildWidget = (props: any) => {
|
||||
// context via Hooks
|
||||
// Note: 'useContext' should only be used in functional component, not class comp.
|
||||
const ctx = React.useContext(AppContext);
|
||||
return (
|
||||
<Widget headerTitle='Child' >
|
||||
<p>Prop:pTest = {props.pTest}</p>
|
||||
<p>Ctx:Name = {ctx!.appState!.test.name}</p>
|
||||
<p>Ctx:Value = {ctx!.appState!.test.value}</p>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
||||
// Class Component
|
||||
class Master extends Component {
|
||||
// Set the context
|
||||
static contextType = AppContext;
|
||||
context!: React.ContextType<typeof AppContext>;
|
||||
|
||||
setCtxClicked = () => {
|
||||
const { update } = this.context!;
|
||||
update({
|
||||
test: {
|
||||
value: 9,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { appState } = this.context!;
|
||||
|
||||
console.log("-------PROP----");
|
||||
console.log(this.props);
|
||||
console.log("-------State----");
|
||||
console.log(this.state);
|
||||
// console.log("-------Context----");
|
||||
return (
|
||||
<Widget headerTitle='Master' actionBtnTitle='Set Ctx' onActionBtnClicked={this.setCtxClicked}>
|
||||
<p>Ctx:Name = {appState!.test.name}</p>
|
||||
<p>Ctx:Value = {appState!.test.value}</p>
|
||||
<ChildWidget />
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Master;
|
||||
41
src/try1/components/Slaves.tsx
Normal file
41
src/try1/components/Slaves.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import React, { Component } from 'react';
|
||||
import Widget from '../../components/Widget';
|
||||
import { AppContext } from '../context/AppContext';
|
||||
// import { AppContextType } from '../context/AppContext';
|
||||
|
||||
|
||||
// Class Component
|
||||
// context via Consumer
|
||||
class SlaveConsumer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<AppContext.Consumer>
|
||||
{value => (
|
||||
<Widget headerTitle='Slave via Consumer' >
|
||||
<p>Ctx:Name = {value!.appState!.test.name}</p>
|
||||
<p>Ctx:Value = {value!.appState!.test.value}</p>
|
||||
</Widget>
|
||||
)}
|
||||
</AppContext.Consumer>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Class Component
|
||||
// context via contextType
|
||||
class SlaveContextType extends Component {
|
||||
context!: React.ContextType<typeof AppContext>;
|
||||
render() {
|
||||
return (
|
||||
<Widget headerTitle='Slave via ContextType' >
|
||||
<p>Ctx:Name = {this.context!.appState!.test.name}</p>
|
||||
<p>Ctx:Value = {this.context!.appState!.test.value}</p>
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
}
|
||||
SlaveContextType.contextType = AppContext;
|
||||
|
||||
|
||||
export { SlaveConsumer, SlaveContextType };
|
||||
0
src/try2/Try2.css
Normal file
0
src/try2/Try2.css
Normal file
42
src/try2/Try2.tsx
Normal file
42
src/try2/Try2.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React, { createContext, useEffect, useState } from 'react';
|
||||
import './Try2.css';
|
||||
|
||||
import Container from '@mui/material/Container';
|
||||
import { Card1 } from './components/Cards';
|
||||
import { Box, Button } from '@mui/material';
|
||||
|
||||
type CardContent = {
|
||||
content: string
|
||||
}
|
||||
|
||||
const defaultCardContent = { content: '' };
|
||||
|
||||
// create context
|
||||
const SharedCardContext = createContext<CardContent>(defaultCardContent);
|
||||
|
||||
function Try2App() {
|
||||
// the value that will be given to the context
|
||||
const [cardContent, setCardContent] = useState<CardContent>(defaultCardContent);
|
||||
useEffect(() => {
|
||||
setCardContent({ content: 'David'});
|
||||
},[]);
|
||||
|
||||
const handleChangeCtx = () => {
|
||||
console.log(cardContent)
|
||||
setCardContent({ content: cardContent.content + ' !'});
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<SharedCardContext.Provider value={cardContent}>
|
||||
<Card1 title='Card One'></Card1>
|
||||
<Box sx={{ m: 0.5 }} />
|
||||
<Card1 title='Card Two'></Card1>
|
||||
</SharedCardContext.Provider>
|
||||
<Box sx={{ m: 2 }} />
|
||||
<Button variant="contained" onClick={handleChangeCtx}>!</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export { Try2App, SharedCardContext };
|
||||
30
src/try2/components/Cards.tsx
Normal file
30
src/try2/components/Cards.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { SharedCardContext } from '../Try2';
|
||||
import Widget from '../../components/Widget';
|
||||
|
||||
// Card1 is a functional component and use "useContext"
|
||||
|
||||
type Card1Props = {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Card1: React.FC<Card1Props> = (props) => {
|
||||
|
||||
// access the context value
|
||||
const cardContent = useContext(SharedCardContext);
|
||||
|
||||
return (
|
||||
<Widget headerTitle={props.title} >
|
||||
{cardContent.content}
|
||||
</Widget>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
// Card1.defaultProps = {
|
||||
// title: ''
|
||||
// };
|
||||
|
||||
|
||||
|
||||
export { Card1 };
|
||||
46
src/try2/components/fcSample.tsx
Normal file
46
src/try2/components/fcSample.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React, { useContext } from 'react';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActions from '@mui/material/CardActions';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import { CardHeader, Grid } from '@mui/material';
|
||||
import Button from '@mui/material/Button';
|
||||
import { SharedCardContext } from '../Try2';
|
||||
|
||||
type Card1Props = {
|
||||
title?: string
|
||||
}
|
||||
|
||||
const Card1: React.FC<Card1Props> = (props) => {
|
||||
const headerTitle = props.title;
|
||||
let hasHeaderTitle = (headerTitle && headerTitle.length > 0);
|
||||
|
||||
// access the context value
|
||||
const cardContent = useContext(SharedCardContext);
|
||||
|
||||
return (
|
||||
<Card sx={{ minWidth: 275 }} variant="outlined">
|
||||
{hasHeaderTitle &&
|
||||
<CardHeader title={props.title} />
|
||||
}
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item md={6}>
|
||||
Context Content:
|
||||
</Grid>
|
||||
<Grid item md={6}>
|
||||
{cardContent.content}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button variant="contained">Change CTX</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Card1.defaultProps = {
|
||||
// title: ''
|
||||
// };
|
||||
|
||||
export { Card1 };
|
||||
335
yarn.lock
335
yarn.lock
@ -169,7 +169,7 @@
|
||||
dependencies:
|
||||
"@babel/types" "^7.20.7"
|
||||
|
||||
"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
|
||||
"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
|
||||
version "7.18.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
|
||||
integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
|
||||
@ -526,7 +526,7 @@
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.8.0"
|
||||
|
||||
"@babel/plugin-syntax-jsx@^7.18.6":
|
||||
"@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6":
|
||||
version "7.18.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
|
||||
integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
|
||||
@ -1029,7 +1029,7 @@
|
||||
"@babel/helper-validator-option" "^7.18.6"
|
||||
"@babel/plugin-transform-typescript" "^7.18.6"
|
||||
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
|
||||
version "7.20.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
|
||||
integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
|
||||
@ -1186,6 +1186,114 @@
|
||||
resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
|
||||
integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
|
||||
|
||||
"@emotion/babel-plugin@^11.10.5":
|
||||
version "11.10.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz#65fa6e1790ddc9e23cc22658a4c5dea423c55c3c"
|
||||
integrity sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.16.7"
|
||||
"@babel/plugin-syntax-jsx" "^7.17.12"
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/hash" "^0.9.0"
|
||||
"@emotion/memoize" "^0.8.0"
|
||||
"@emotion/serialize" "^1.1.1"
|
||||
babel-plugin-macros "^3.1.0"
|
||||
convert-source-map "^1.5.0"
|
||||
escape-string-regexp "^4.0.0"
|
||||
find-root "^1.1.0"
|
||||
source-map "^0.5.7"
|
||||
stylis "4.1.3"
|
||||
|
||||
"@emotion/cache@^11.10.5":
|
||||
version "11.10.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
|
||||
integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.8.0"
|
||||
"@emotion/sheet" "^1.2.1"
|
||||
"@emotion/utils" "^1.2.0"
|
||||
"@emotion/weak-memoize" "^0.3.0"
|
||||
stylis "4.1.3"
|
||||
|
||||
"@emotion/hash@^0.9.0":
|
||||
version "0.9.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
|
||||
integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
|
||||
|
||||
"@emotion/is-prop-valid@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
|
||||
integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.8.0"
|
||||
|
||||
"@emotion/memoize@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
|
||||
integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
|
||||
|
||||
"@emotion/react@^11.10.5":
|
||||
version "11.10.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.5.tgz#95fff612a5de1efa9c0d535384d3cfa115fe175d"
|
||||
integrity sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/babel-plugin" "^11.10.5"
|
||||
"@emotion/cache" "^11.10.5"
|
||||
"@emotion/serialize" "^1.1.1"
|
||||
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
|
||||
"@emotion/utils" "^1.2.0"
|
||||
"@emotion/weak-memoize" "^0.3.0"
|
||||
hoist-non-react-statics "^3.3.1"
|
||||
|
||||
"@emotion/serialize@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
|
||||
integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.9.0"
|
||||
"@emotion/memoize" "^0.8.0"
|
||||
"@emotion/unitless" "^0.8.0"
|
||||
"@emotion/utils" "^1.2.0"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@emotion/sheet@^1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
|
||||
integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
|
||||
|
||||
"@emotion/styled@^11.10.5":
|
||||
version "11.10.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.5.tgz#1fe7bf941b0909802cb826457e362444e7e96a79"
|
||||
integrity sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.18.3"
|
||||
"@emotion/babel-plugin" "^11.10.5"
|
||||
"@emotion/is-prop-valid" "^1.2.0"
|
||||
"@emotion/serialize" "^1.1.1"
|
||||
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
|
||||
"@emotion/utils" "^1.2.0"
|
||||
|
||||
"@emotion/unitless@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
|
||||
integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
|
||||
|
||||
"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
|
||||
integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
|
||||
|
||||
"@emotion/utils@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
|
||||
integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
|
||||
|
||||
"@emotion/weak-memoize@^0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
|
||||
integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
|
||||
|
||||
"@eslint/eslintrc@^1.4.1":
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
|
||||
@ -1525,6 +1633,99 @@
|
||||
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
|
||||
integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
|
||||
|
||||
"@mui/base@5.0.0-alpha.113":
|
||||
version "5.0.0-alpha.113"
|
||||
resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.113.tgz#51ab20c3a4cf31db4a5540ecf17d7ea6f73b3001"
|
||||
integrity sha512-XSjvyQWATM8uk+EJZvYna8D21kOXC42lwb3q4K70btuGieKlCIQLaHTTDV2OfD4+JfT4o3NJy3I4Td2co31RZA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.7"
|
||||
"@emotion/is-prop-valid" "^1.2.0"
|
||||
"@mui/types" "^7.2.3"
|
||||
"@mui/utils" "^5.11.2"
|
||||
"@popperjs/core" "^2.11.6"
|
||||
clsx "^1.2.1"
|
||||
prop-types "^15.8.1"
|
||||
react-is "^18.2.0"
|
||||
|
||||
"@mui/core-downloads-tracker@^5.11.4":
|
||||
version "5.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.4.tgz#def5937e21443b197fd1998fd66721bd9c49a1bb"
|
||||
integrity sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA==
|
||||
|
||||
"@mui/icons-material@^5.11.0":
|
||||
version "5.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.0.tgz#9ea6949278b2266d2683866069cd43009eaf6464"
|
||||
integrity sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.6"
|
||||
|
||||
"@mui/material@^5.11.4":
|
||||
version "5.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.4.tgz#4dda0f993c9aa9678e1b9bce16adfe11e984dbd4"
|
||||
integrity sha512-ZL/czK9ynrQJ6uyDwQgK+j7m1iKA1XKPON+rEPupwAu/bJ1XJxD+H/H2bkMM8UpOkzaucx/WuMbJJGQ60l7gBg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.7"
|
||||
"@mui/base" "5.0.0-alpha.113"
|
||||
"@mui/core-downloads-tracker" "^5.11.4"
|
||||
"@mui/system" "^5.11.4"
|
||||
"@mui/types" "^7.2.3"
|
||||
"@mui/utils" "^5.11.2"
|
||||
"@types/react-transition-group" "^4.4.5"
|
||||
clsx "^1.2.1"
|
||||
csstype "^3.1.1"
|
||||
prop-types "^15.8.1"
|
||||
react-is "^18.2.0"
|
||||
react-transition-group "^4.4.5"
|
||||
|
||||
"@mui/private-theming@^5.11.2":
|
||||
version "5.11.2"
|
||||
resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.11.2.tgz#93eafb317070888a988efa8d6a9ec1f69183a606"
|
||||
integrity sha512-qZwMaqRFPwlYmqwVKblKBGKtIjJRAj3nsvX93pOmatsXyorW7N/0IPE/swPgz1VwChXhHO75DwBEx8tB+aRMNg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.7"
|
||||
"@mui/utils" "^5.11.2"
|
||||
prop-types "^15.8.1"
|
||||
|
||||
"@mui/styled-engine@^5.11.0":
|
||||
version "5.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.11.0.tgz#79afb30c612c7807c4b77602cf258526d3997c7b"
|
||||
integrity sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.6"
|
||||
"@emotion/cache" "^11.10.5"
|
||||
csstype "^3.1.1"
|
||||
prop-types "^15.8.1"
|
||||
|
||||
"@mui/system@^5.11.4":
|
||||
version "5.11.4"
|
||||
resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.4.tgz#a097d6451e12ac442a92ca6e9717b6b8e68ecd45"
|
||||
integrity sha512-fE2Ts33V5zh7ouciwXgMm/a6sLvjIj9OMeojuHNYY7BStTxparC/Fp9CNUZNJwt76U6ZJC59aYScFSRQKbW08g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.7"
|
||||
"@mui/private-theming" "^5.11.2"
|
||||
"@mui/styled-engine" "^5.11.0"
|
||||
"@mui/types" "^7.2.3"
|
||||
"@mui/utils" "^5.11.2"
|
||||
clsx "^1.2.1"
|
||||
csstype "^3.1.1"
|
||||
prop-types "^15.8.1"
|
||||
|
||||
"@mui/types@^7.2.3":
|
||||
version "7.2.3"
|
||||
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9"
|
||||
integrity sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==
|
||||
|
||||
"@mui/utils@^5.11.2":
|
||||
version "5.11.2"
|
||||
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.2.tgz#29764311acb99425159b159b1cb382153ad9be1f"
|
||||
integrity sha512-AyizuHHlGdAtH5hOOXBW3kriuIwUIKUIgg0P7LzMvzf6jPhoQbENYqY6zJqfoZ7fAWMNNYT8mgN5EftNGzwE2w==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.20.7"
|
||||
"@types/prop-types" "^15.7.5"
|
||||
"@types/react-is" "^16.7.1 || ^17.0.0"
|
||||
prop-types "^15.8.1"
|
||||
react-is "^18.2.0"
|
||||
|
||||
"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
|
||||
version "5.1.1-v1"
|
||||
resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
|
||||
@ -1568,6 +1769,16 @@
|
||||
schema-utils "^3.0.0"
|
||||
source-map "^0.7.3"
|
||||
|
||||
"@popperjs/core@^2.11.6":
|
||||
version "2.11.6"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
|
||||
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
|
||||
|
||||
"@remix-run/router@1.2.1":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
|
||||
integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
|
||||
|
||||
"@rollup/plugin-babel@^5.2.0":
|
||||
version "5.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
|
||||
@ -1922,6 +2133,11 @@
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/history@^4.7.11":
|
||||
version "4.7.11"
|
||||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
|
||||
integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
|
||||
|
||||
"@types/html-minifier-terser@^6.0.0":
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
|
||||
@ -2004,7 +2220,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
|
||||
integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
|
||||
|
||||
"@types/prop-types@*":
|
||||
"@types/prop-types@*", "@types/prop-types@^15.7.5":
|
||||
version "15.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
|
||||
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
|
||||
@ -2031,6 +2247,37 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-is@^16.7.1 || ^17.0.0":
|
||||
version "17.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
|
||||
integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-router-dom@^5.3.3":
|
||||
version "5.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
|
||||
integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
|
||||
dependencies:
|
||||
"@types/history" "^4.7.11"
|
||||
"@types/react" "*"
|
||||
"@types/react-router" "*"
|
||||
|
||||
"@types/react-router@*":
|
||||
version "5.1.20"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.20.tgz#88eccaa122a82405ef3efbcaaa5dcdd9f021387c"
|
||||
integrity sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==
|
||||
dependencies:
|
||||
"@types/history" "^4.7.11"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-transition-group@^4.4.5":
|
||||
version "4.4.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
|
||||
integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^18.0.26":
|
||||
version "18.0.26"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
|
||||
@ -3067,6 +3314,11 @@ cliui@^7.0.2:
|
||||
strip-ansi "^6.0.0"
|
||||
wrap-ansi "^7.0.0"
|
||||
|
||||
clsx@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
|
||||
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
|
||||
|
||||
co@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
|
||||
@ -3204,7 +3456,7 @@ content-type@~1.0.4:
|
||||
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
|
||||
integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
|
||||
|
||||
convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
|
||||
version "1.9.0"
|
||||
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
|
||||
integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
|
||||
@ -3467,7 +3719,7 @@ cssstyle@^2.3.0:
|
||||
dependencies:
|
||||
cssom "~0.3.6"
|
||||
|
||||
csstype@^3.0.2:
|
||||
csstype@^3.0.2, csstype@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
|
||||
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
|
||||
@ -3687,6 +3939,14 @@ dom-converter@^0.2.0:
|
||||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-helpers@^5.0.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
|
||||
@ -4428,6 +4688,11 @@ find-cache-dir@^3.3.1:
|
||||
make-dir "^3.0.2"
|
||||
pkg-dir "^4.1.0"
|
||||
|
||||
find-root@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
|
||||
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
|
||||
|
||||
find-up@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
|
||||
@ -4778,6 +5043,13 @@ he@^1.2.0:
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
|
||||
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
||||
|
||||
hoist-non-react-statics@^3.3.1:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
dependencies:
|
||||
react-is "^16.7.0"
|
||||
|
||||
hoopy@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
|
||||
@ -6250,16 +6522,6 @@ mini-css-extract-plugin@^2.4.5:
|
||||
dependencies:
|
||||
schema-utils "^4.0.0"
|
||||
|
||||
mini-css@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/mini-css/-/mini-css-1.0.3.tgz#b844564896f9cbb71b86c728badad67eacf3dfd2"
|
||||
integrity sha512-q1RGrhrP6CfVaAic8mmiZ7+sLZjfXoLXIirtrjNZWDCRObgmszvXrWiYVIJfD+kUmDVysWbCzA5+Nd7QMn78Ow==
|
||||
|
||||
mini.css@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/mini.css/-/mini.css-3.0.1.tgz#f6236e99997bbd19484d5655d087ec96b887af68"
|
||||
integrity sha512-FmuuBL0wuyDO1UA66TkAo8w2RxxuHmNPaUqUHcYlHtM9CJkrscQaNAJ/ParEahYFwtZOSgfEA7flbMoSPkzrPA==
|
||||
|
||||
minimalistic-assert@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
||||
@ -7343,7 +7605,7 @@ prompts@^2.0.1, prompts@^2.4.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.8.1:
|
||||
prop-types@^15.6.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -7481,7 +7743,7 @@ react-error-overlay@^6.0.11:
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
|
||||
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
|
||||
|
||||
react-is@^16.13.1:
|
||||
react-is@^16.13.1, react-is@^16.7.0:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@ -7491,7 +7753,7 @@ react-is@^17.0.1:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-is@^18.0.0:
|
||||
react-is@^18.0.0, react-is@^18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
|
||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||
@ -7501,6 +7763,21 @@ react-refresh@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-router-dom@^6.6.2:
|
||||
version "6.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.2.tgz#bbf1f9b45855b218d22fc2d294b79408a084740a"
|
||||
integrity sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==
|
||||
dependencies:
|
||||
"@remix-run/router" "1.2.1"
|
||||
react-router "6.6.2"
|
||||
|
||||
react-router@6.6.2:
|
||||
version "6.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.2.tgz#556f7b56cff7fe32c5c02429fef3fcb2ecd08111"
|
||||
integrity sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==
|
||||
dependencies:
|
||||
"@remix-run/router" "1.2.1"
|
||||
|
||||
react-scripts@5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
|
||||
@ -7556,6 +7833,16 @@ react-scripts@5.0.1:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-transition-group@^4.4.5:
|
||||
version "4.4.5"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
|
||||
integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
dom-helpers "^5.0.1"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react@^18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
||||
@ -8074,6 +8361,11 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
||||
source-map@^0.5.7:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
|
||||
|
||||
source-map@^0.7.3:
|
||||
version "0.7.4"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
|
||||
@ -8297,6 +8589,11 @@ stylehacks@^5.1.1:
|
||||
browserslist "^4.21.4"
|
||||
postcss-selector-parser "^6.0.4"
|
||||
|
||||
stylis@4.1.3:
|
||||
version "4.1.3"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
|
||||
integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
|
||||
|
||||
supports-color@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user