stefan.stamenovic
/
diligent-react
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Метки Этапы
Новый Pull Request

#4 create-reusable-mui-modal

Слито
stefan.stamenovic слито 5 коммит(ов) из create-reusable-mui-modal в master 3 лет назад
Обсуждение 0 Коммиты 5 Измененные файлы 7
  1. 57
    0
      src/components/MUI/DialogComponent.js
  2. 16
    25
      src/components/MUI/DrawerComponent.js
  3. 95
    67
      src/components/MUI/Navbar.js
  4. 35
    0
      src/components/MUI/PopoverComponent.js
  5. 1
    1
      src/i18n/index.js
  6. 67
    3
      src/pages/HomePage/HomePageMUI.js
  7. 10
    12
      src/pages/LoginPage/LoginPageMUI.js

+ 57
- 0
src/components/MUI/DialogComponent.js Просмотреть файл

@@ -0,0 +1,57 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Dialog,
DialogContent,
DialogTitle,
DialogActions,
Button,
useMediaQuery,
useTheme,
} from '@mui/material';

const DialogComponent = ({
title,
content,
onClose,
open,
maxWidth,
fullWidth,
responsive,
}) => {
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

const handleClose = () => {
onClose();
};

return (
<Dialog
maxWidth={maxWidth}
fullWidth={fullWidth}
fullScreen={responsive && fullScreen}
onClose={handleClose}
open={open}
>
<DialogTitle>{title}</DialogTitle>
{content && <DialogContent>{content}</DialogContent>}
<DialogActions>
<Button onClick={handleClose}>OK</Button>
<Button onClick={handleClose}>Cancel</Button>
</DialogActions>
</Dialog>
);
};

DialogComponent.propTypes = {
title: PropTypes.string,
open: PropTypes.bool.isRequired,
content: PropTypes.any,
onClose: PropTypes.func.isRequired,
maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
fullWidth: PropTypes.bool,
responsive: PropTypes.bool,
};

export default DialogComponent;

+ 16
- 25
src/components/MUI/DrawerComponent.js Просмотреть файл

@@ -1,37 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
Drawer,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
} from '@mui/material';
import { Drawer } from '@mui/material';

const DrawerComponent = ({ open, toggleOpen }) => (
<Drawer anchor="right" open={open} onClose={toggleOpen}>
<List>
<ListItemButton divider onClick={toggleOpen}>
<ListItemIcon>
<ListItemText>Link 1</ListItemText>
</ListItemIcon>
</ListItemButton>
<ListItem divider onClick={toggleOpen}>
<ListItemIcon>
<ListItemText>Link 2</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider onClick={toggleOpen}>
<ListItemText>Link 3</ListItemText>
</ListItem>
</List>
const DrawerComponent = ({ open, toggleOpen, content, anchor = 'right' }) => (
<Drawer
sx={{
minWidth: 250,
'& .MuiDrawer-paper': {
minWidth: 250,
},
}}
anchor={anchor}
open={open}
onClose={toggleOpen}
>
{content ? content : null}
</Drawer>
);

DrawerComponent.propTypes = {
open: PropTypes.bool,
toggleOpen: PropTypes.func,
content: PropTypes.any,
anchor: PropTypes.oneOf(['top', 'right', 'left', 'bottom']),
};

export default DrawerComponent;

+ 95
- 67
src/components/MUI/Navbar.js Просмотреть файл

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useMemo } from 'react';
import {
AppBar,
Badge,
@@ -6,6 +6,11 @@ import {
IconButton,
Toolbar,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from '@mui/material';
import { useTheme } from '@mui/system';
@@ -23,83 +28,106 @@ const Navbar = () => {
setOpenDrawer(!openDrawer);
};

const drawerContent = useMemo(() => (
<List>
<ListItemButton divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 1</ListItemText>
</ListItemIcon>
</ListItemButton>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 2</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemText>Link 3</ListItemText>
</ListItem>
</List>
), [handleToggleDrawer]);

return (
<>
<AppBar elevation={2} sx={{ backgroundColor: 'background.default' }}>
<Toolbar>
<AppBar
elevation={2}
sx={{ backgroundColor: 'background.default', position: 'relative' }}
>
<Toolbar>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
>
{matches ? (
<Drawer
open={openDrawer}
toggleOpen={handleToggleDrawer}
content={drawerContent}
/>
) : (
<Box sx={{ display: 'flex' }}>
<Typography
variant="h6"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 1
</Typography>
<Typography
variant="body1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 2
</Typography>
<Typography
variant="subtitle1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 3
</Typography>
</Box>
)}
<Box>
<MenuList />
</Box>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'space-between',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
}}
>
{matches ? (
<Drawer open={openDrawer} toggleOpen={handleToggleDrawer} />
) : (
<Box sx={{ display: 'flex' }}>
<Typography
variant="h6"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 1
</Typography>
<Typography
variant="body1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 2
</Typography>
<Typography
variant="subtitle1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 3
</Typography>
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<IconButton>
<Badge badgeContent={3} color="primary">
<ShoppingBasketIcon color="action" />
</Badge>
</IconButton>
)}
<Box>
<MenuList />
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{matches ? (
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<IconButton>
<Badge badgeContent={3} color="primary">
<ShoppingBasketIcon color="action" />
</Badge>
</IconButton>
)}
</Box>
</Box>
</Toolbar>
</AppBar>
</>
</Box>
</Toolbar>
</AppBar>
);
};


+ 35
- 0
src/components/MUI/PopoverComponent.js Просмотреть файл

@@ -0,0 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Box, Popover } from '@mui/material';

const PopoverComponent = ({ open, anchorEl, onClose, content }) => {
const handleClose = () => {
onClose();
};

return (
<Box component="div">
<Popover
sx={{ p: 5 }}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
{content}
</Popover>
</Box>
);
};

PopoverComponent.propTypes = {
anchorEl: PropTypes.object,
open: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
content: PropTypes.any,
};

export default PopoverComponent;

+ 1
- 1
src/i18n/index.js Просмотреть файл

@@ -7,7 +7,7 @@ import enTranslations from './resources/en';
i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
debug: true,
debug: false,
supportedLngs: ['en'],
resources: {
en: {

+ 67
- 3
src/pages/HomePage/HomePageMUI.js Просмотреть файл

@@ -1,10 +1,74 @@
import React from 'react';
import React, { useState } from 'react';
import { Box, Button, Divider, Paper, Typography } from '@mui/material';
import DialogComponent from '../../components/MUI/DialogComponent';
import DrawerComponent from '../../components/MUI/DrawerComponent';
import Navbar from '../../components/MUI/Navbar';
import PopoverComponent from '../../components/MUI/PopoverComponent';

const HomePage = () => {
const [dialogOpen, setDialogOpen] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
const [popoverOpen, setPopoverOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);

return (
<Navbar />
)
<>
<Navbar />
<Box
sx={{
mt: 4,
ml: 4,
display: 'flex',
flexGrow: 1,
}}
>
<Paper
sx={{
p: 4,
display: 'flex',
flexDirection: 'column',
}}
>
<Typography variant="h4" gutterBottom align="center">Modals</Typography>
<Divider />
<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
<Button
onClick={(e) => {
setPopoverOpen(true);
setAnchorEl(e.currentTarget);
}}
>
Open Popover
</Button>
</Paper>
<DialogComponent
title="Dialog Title"
content={<Typography>Dialog Content</Typography>}
open={dialogOpen}
onClose={() => setDialogOpen(false)}
maxWidth="md"
fullWidth
responsive
/>
<DrawerComponent
anchor="left"
content={<Typography sx={{ p: 2 }}>Drawer Content</Typography>}
open={drawerOpen}
toggleOpen={() => setDrawerOpen(!drawerOpen)}
/>
<PopoverComponent
anchorEl={anchorEl}
open={popoverOpen}
onClose={() => {
setPopoverOpen(false);
setAnchorEl(null);
}}
content={<Typography sx={{ p: 2 }}>Popover Content</Typography>}
/>
</Box>
</>
);
};

export default HomePage;

+ 10
- 12
src/pages/LoginPage/LoginPageMUI.js Просмотреть файл

@@ -30,11 +30,6 @@ import ErrorMessage from '../../components/MUI/CustomErrorMessage';
import { selectIsLoadingByActionType } from '../../store/selectors/loadingSelectors';
import { LOGIN_USER_LOADING } from '../../store/actions/login/loginActionConstants';

const LoginValidationSchema = Yup.object().shape({
username: Yup.string().required(i18next.t('login.usernameRequired')),
password: Yup.string().required(i18next.t('login.passwordRequired')),
});

const LoginPage = ({ history }) => {
const dispatch = useDispatch();
const { t } = useTranslation();
@@ -60,12 +55,12 @@ const LoginPage = ({ history }) => {
);

const handleApiResponseSuccess = () => {
// history.push({
// pathname: HOME_PAGE,
// state: {
// from: history.location.pathname,
// },
// });
history.push({
pathname: HOME_PAGE,
state: {
from: history.location.pathname,
},
});
};

const handleSubmit = (values) => {
@@ -85,7 +80,10 @@ const LoginPage = ({ history }) => {
username: '',
password: '',
},
validationSchema: LoginValidationSchema,
validationSchema: Yup.object().shape({
username: Yup.string().required(t('login.usernameRequired')),
password: Yup.string().required(t('login.passwordRequired')),
}),
onSubmit: handleSubmit,
validateOnBlur: true,
enableReinitialize: true,

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить