Photo_React/photo/src/MainPanel.new

import React, { Component } from "react";
import { render } from "react-dom";
import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Divider from '@material-ui/core/Divider';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import ImageList from './imageList';
import PhotoIcon from '@material-ui/icons/Photo';
import ShareIcon from '@material-ui/icons/Share';
import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
import Grid from '@material-ui/core/Grid';
import DeleteIcon from '@material-ui/icons/Delete';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import SettingsIcon from '@material-ui/icons/Settings';
import Avatar from '@material-ui/core/Avatar';
import Icon from '@material-ui/core/Icon';
import AddCircle from '@material-ui/icons/AddCircle';
import CloudIcon from '@material-ui/icons/Cloud';
import LinearProgress from '@material-ui/core/LinearProgress';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Paper from '@material-ui/core/Paper';
import TodayIcon from '@material-ui/icons/Today';
import CropOriginalIcon from '@material-ui/icons/CropOriginal';
import CameraIcon from '@material-ui/icons/Camera';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import CloseIcon from '@material-ui/icons/Close';
import ListSubheader from '@material-ui/core/ListSubheader';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';

const drawerWidth = 240;

const BorderLinearProgress = withStyles((theme) => ({
    colorPrimary: {
        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
    },
    bar: {
        borderRadius: 5,
        backgroundColor: '#1a90ff',
    },
}))(LinearProgress);

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
    },
    root: {
        display: 'flex',
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    menuButton: {
        marginRight: 36,
    },
    hide: {
        display: 'none',
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
    },
    drawerOpen: {
        width: drawerWidth,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    drawerClose: {
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        overflowX: 'hidden',
        width: theme.spacing(7) + 1,
        [theme.breakpoints.up('sm')]: {
            width: theme.spacing(9) + 1,
        },
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        width: '100%',
        height: '100%',
        //boxShadow: theme.shadows[5],
        //padding: theme.spacing(2, 4, 3),
    },
    fabL: {
        position: 'absolute',
        bottom: '50%',
        left: theme.spacing(2),
    },
    fabR: {
        position: 'absolute',
        bottom: '50%',
        //left: `calc(95% - ${theme.spacing(2)}px)`,
        //right: theme.spacing(2),
        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
        Mcontainer: {
            display: "flex",
            flexWrap: "wrap",
            position: "absolute",
            top: 0,
            left: 0,
            height: "100%",
            width: "100%",
            alignItems: "center"
        },
    },
}));

class MainPanel extends Component {
    constructor() {
        super();
        this.state = {
            name: "React",
            showHideDemo1: false,
            showHideDemo2: false,
            showHideDemo3: false
        };
        this.hideComponent = this.hideComponent.bind(this);
    }


    hideComponent(name) {
        console.log(name);
        switch (name) {
            case "showHideDemo1":
                this.setState({ showHideDemo1: !this.state.showHideDemo1 });
                break;
            case "showHideDemo2":
                this.setState({ showHideDemo2: !this.state.showHideDemo2 });
                break;
            case "showHideDemo3":
                this.setState({ showHideDemo3: !this.state.showHideDemo3 });
                break;
        }
    }

    render() {
        
//const classes = useStyles();
//const theme = useTheme();
        const { classes } = this.props;
        const { theme } = this.props;
const [open, setOpen] = this.useState(false);
        const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;

        const handleDrawerOpen = () => {
            setOpen(true);
        };

        const handleDrawerClose = () => {
            setOpen(false);
        };

        const [Imageopen, setImageOpen] = React.useState(false);

        const handleImageOpen = () => {
            setImageOpen(true);
        };

        const handleImageClose = () => {
            setImageOpen(false);
        };

        return (
            <div className={classes.root}>
                <AppBar position="fixed" style={{ background: '#2196f3' }} className={
                    clsx(classes.appBar, {
                        [classes.appBarShift]: open,
                    })
                }>
                    <Toolbar >
                        <IconButton edge="start" onClick={handleDrawerOpen} className={
                            clsx(classes.menuButton, {
                                [classes.hide]: open,
                            })
                        } className={classes.menuButton} color="inherit" aria-label="menu">
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" className={classes.title}>
                            谷狗相薄
                    </Typography>
                        <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleImageOpen}>上載</Button>
                        <IconButton style={{ color: '#ffffff' }} aria-label="delete">
                            <HelpOutlineIcon />
                        </IconButton>
                        <IconButton style={{ color: '#ffffff' }} aria-label="delete">
                            <SettingsIcon />
                        </IconButton>
                        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
                    </Toolbar>
                </AppBar>
                <Drawer
                    variant="permanent"
                    className={
                        clsx(classes.drawer, {
                            [classes.drawerOpen]: open,
                            [classes.drawerClose]: !open,
                        })
                    }
                    classes={
                        {
                            paper: clsx({
                                [classes.drawerOpen]: open,
                                [classes.drawerClose]: !open,
                            }),
                        }
                    }>
                    <div className={classes.toolbar}>
                        <IconButton onClick={handleDrawerClose}>
                            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
                        </IconButton>
                    </div>
                    <Divider />
                    <List>
                        {['相片', '共享', '相簿', '實用工具'].map((text, index) => (
                            <ListItem button key={text} onClick={() => this.hideComponent("showHideDemo1")}>
                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
                                <ListItemText primary={text} />
                            </ListItem>
                        ))}
                    </List>
                    <Divider />
                    <List>
                        {['儲存空間'].map((text, index) => (
                            <ListItem button key={text}>
                                <ListItemIcon>{< CloudIcon />}</ListItemIcon>
                                <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={50} />} />
                            </ListItem>
                        ))}
                    </List>
                </Drawer>
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {showHideDemo1 && <ImageList />}
                    <hr />
                    {showHideDemo2 && <ImageList />}
                    <hr />
                    {showHideDemo3 && <ImageList />}
                    <hr />
                    <div>
                        <button onClick={() => this.hideComponent("showHideDemo1")}>
                            Click to hide Demo1 component
          </button>
                        <button onClick={() => this.hideComponent("showHideDemo2")}>
                            Click to hide Demo2 component
          </button>
                        <button onClick={() => this.hideComponent("showHideDemo3")}>
                            Click to hide Demo3 component
          </button>
                    </div>
                </main>
                <Modal
                    aria-labelledby="transition-modal-title"
                    aria-describedby="transition-modal-description"
                    className={classes.modal}
                    open={Imageopen}
                    onClose={handleImageClose}
                    closeAfterTransition
                    BackdropComponent={Backdrop}
                    BackdropProps={{
                        timeout: 500,
                    }}
                >
                    <Fade in={Imageopen}>
                        <div className={classes.paper}>
                            <Grid container spacing={0}>
                                <Grid item xs={9}
                                    style={{
                                        alignItems: 'center',
                                        alignContent: 'center',
                                        backgroundColor: 'black',
                                        height: '100vh',
                                    }}
                                    align="center"
                                    justify="center"
                                    direction="column"
                                >
                                    <Grid
                                        container
                                        spacing={0}
                                        direction="column"
                                        alignItems="center"
                                        justify="center"
                                        style={{ minHeight: '100vh' }}
                                    >
                                        <Grid item xs={12}>
                                            <img src="./images/Q1_PHYS.jpeg"
                                                style={{
                                                    margin: "auto",
                                                    maxHeight: "100vh",
                                                    maxWidth: "100%",
                                                }}

                                            ></img>
                                        </Grid>

                                    </Grid>


                                    <Fab color="inherit" aria-label="add" className={classes.fabL}>
                                        <ArrowBackIosIcon />
                                    </Fab>
                                    <Fab color="inherit" aria-label="add" className={classes.fabR}>
                                        <ArrowForwardIosIcon />
                                    </Fab>
                                </Grid>
                                <Grid item xs={3}>
                                    <Typography component="h5">
                                        <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
                                            <CloseIcon />
                                        </IconButton>
                                    資訊
                                </Typography>
                                    <List
                                        subheader={
                                            <ListSubheader component="div" id="nested-list-subheader">
                                                詳細資料
                                         </ListSubheader>
                                        }
                                    >
                                        <ListItem>
                                            <ListItemIcon>
                                                <TodayIcon />
                                            </ListItemIcon>
                                            <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00" />
                                        </ListItem>
                                        <ListItem>
                                            <ListItemIcon>
                                                <CropOriginalIcon />
                                            </ListItemIcon>
                                            <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
                                        </ListItem>
                                        <ListItem>
                                            <ListItemIcon>
                                                <CameraIcon />
                                            </ListItemIcon>
                                            <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125" />
                                        </ListItem>
                                        <ListItem>
                                            <ListItemIcon>
                                                <LocationOnIcon />
                                            </ListItemIcon>
                                            <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
                                        </ListItem>
                                    </List>
                                </Grid>
                            </Grid>
                        </div>
                    </Fade>
                </Modal>
            </div>
        );
    }
}

export default MainPanel;