|
|
@@ -1,244 +1,103 @@
|
|
|
+import PropTypes from 'prop-types';
|
|
|
import React from 'react';
|
|
|
-import { makeStyles } from '@material-ui/core/styles';
|
|
|
-import GridList from '@material-ui/core/GridList';
|
|
|
-import GridListTile from '@material-ui/core/GridListTile';
|
|
|
-import GridListTileBar from '@material-ui/core/GridListTileBar';
|
|
|
-import ListSubheader from '@material-ui/core/ListSubheader';
|
|
|
-import IconButton from '@material-ui/core/IconButton';
|
|
|
-import InfoIcon from '@material-ui/icons/Info';
|
|
|
-import tileData from './tileData';
|
|
|
-import Modal from '@material-ui/core/Modal';
|
|
|
-import Backdrop from '@material-ui/core/Backdrop';
|
|
|
-import Fade from '@material-ui/core/Fade';
|
|
|
-import Grid from '@material-ui/core/Grid';
|
|
|
-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 CloseIcon from '@material-ui/icons/Close';
|
|
|
-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 Typography from '@material-ui/core/Typography';
|
|
|
-import ListItem from '@material-ui/core/ListItem';
|
|
|
-import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
|
-import ListItemText from '@material-ui/core/ListItemText';
|
|
|
-import List from '@material-ui/core/List';
|
|
|
-import Paper from '@material-ui/core/Paper';
|
|
|
+import ReactDOM from 'react-dom';
|
|
|
+import Gallery from 'react-grid-gallery';
|
|
|
|
|
|
-const useStyles = makeStyles((theme) => ({
|
|
|
- root: {
|
|
|
- display: 'flex',
|
|
|
- flexWrap: 'wrap',
|
|
|
- justifyContent: 'space-around',
|
|
|
- overflow: 'hidden',
|
|
|
- },
|
|
|
- gridList: {
|
|
|
- width: '100%',
|
|
|
- height: '100%',
|
|
|
- },
|
|
|
- icon: {
|
|
|
- color: 'rgba(255, 255, 255, 0.54)',
|
|
|
- },
|
|
|
- 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"
|
|
|
- },
|
|
|
- },
|
|
|
-}));
|
|
|
-var Imagesrc = 0;
|
|
|
-var FabL = false;
|
|
|
-var FabR = false;
|
|
|
-var Open = false;
|
|
|
-
|
|
|
-export default function TitlebarGridList() {
|
|
|
- const classes = useStyles();
|
|
|
-
|
|
|
- const [Imageopen, setImageOpen] = React.useState(false);
|
|
|
|
|
|
- const TDLength = tileData.length;
|
|
|
+class imageList extends React.Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
|
|
|
- const { photoIndex, isOpen } = this.state;
|
|
|
-
|
|
|
- const handleClick = (index) => () => {
|
|
|
- Imagesrc = index;
|
|
|
- if (index == 0) {
|
|
|
- FabL = false;
|
|
|
- } else {
|
|
|
- FabL = true;
|
|
|
- }
|
|
|
- if (TDLength == index + 1) {
|
|
|
- FabR = false;
|
|
|
- } else {
|
|
|
- FabR = true;
|
|
|
- }
|
|
|
- console.log(FabL + " " + FabR);
|
|
|
- setImageOpen(true);
|
|
|
- }
|
|
|
+ this.state = {
|
|
|
+ images: this.props.images
|
|
|
+ };
|
|
|
|
|
|
- const moveFw = () => {
|
|
|
- Imagesrc++;
|
|
|
- setImageOpen(false);
|
|
|
- setImageOpen(true);
|
|
|
}
|
|
|
|
|
|
- const moveBw = () => {
|
|
|
- Imagesrc--;
|
|
|
- setImageOpen(false);
|
|
|
- setImageOpen(true);
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <Gallery
|
|
|
+ images={this.state.images}
|
|
|
+ enableLightbox={true}
|
|
|
+ enableImageSelection={false} />
|
|
|
+ );
|
|
|
}
|
|
|
-
|
|
|
- const handleImageClose = () => {
|
|
|
- setImageOpen(false);
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- return (
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div className={classes.root}>
|
|
|
- <GridList cellHeight={180} cols={5} className={classes.gridList}>
|
|
|
- <GridListTile key="Subheader" cols={5} style={{ height: 'auto' }}>
|
|
|
- <ListSubheader component="div">December</ListSubheader>
|
|
|
- </GridListTile>
|
|
|
- {tileData.map((tile, index) => (
|
|
|
- <GridListTile key={tile.img} onClick={handleClick(index)}>
|
|
|
- <img src={tile.img} alt={tile.title} />
|
|
|
- </GridListTile>
|
|
|
- ))}
|
|
|
- </GridList>
|
|
|
- <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={tileData[this.state.Imagesrc].img}
|
|
|
- style={{
|
|
|
- margin: "auto",
|
|
|
- maxHeight: "100vh",
|
|
|
- maxWidth: "100%",
|
|
|
- }}
|
|
|
- ></img>
|
|
|
- </Grid>
|
|
|
-
|
|
|
- </Grid>
|
|
|
- {FabL === true ? <Fab color="inherit" aria-label="add" onClick={moveBw} className={classes.fabL}>
|
|
|
- <ArrowBackIosIcon />
|
|
|
- </Fab> : ""}
|
|
|
- {console.log(FabL + " " + FabR)}
|
|
|
-
|
|
|
- {FabR === true ? <Fab color="inherit" aria-label="add" onClick={moveFw} 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>
|
|
|
-
|
|
|
- );
|
|
|
}
|
|
|
+
|
|
|
+imageList.propTypes = {
|
|
|
+ images: PropTypes.arrayOf(
|
|
|
+ PropTypes.shape({
|
|
|
+ src: PropTypes.string.isRequired,
|
|
|
+ thumbnail: PropTypes.string.isRequired,
|
|
|
+ srcset: PropTypes.array,
|
|
|
+ caption: PropTypes.oneOfType([
|
|
|
+ PropTypes.string,
|
|
|
+ PropTypes.element
|
|
|
+ ]),
|
|
|
+ thumbnailWidth: PropTypes.number.isRequired,
|
|
|
+ thumbnailHeight: PropTypes.number.isRequired
|
|
|
+ })
|
|
|
+ ).isRequired
|
|
|
+};
|
|
|
+
|
|
|
+imageList.defaultProps = {
|
|
|
+ images: [
|
|
|
+ {
|
|
|
+ src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
|
|
|
+ thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 174,
|
|
|
+ caption: "After Rain (Jeshu John - designerspics.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg",
|
|
|
+ thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 183,
|
|
|
+ caption: "37H (gratispgraphy.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg",
|
|
|
+ thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg",
|
|
|
+ thumbnailWidth: 271,
|
|
|
+ thumbnailHeight: 320,
|
|
|
+ caption: "Orange Macro (Tom Eversley - isorepublic.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
|
|
|
+ thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 213,
|
|
|
+ caption: "201H (gratisography.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
|
|
|
+ thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 213,
|
|
|
+ caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg",
|
|
|
+ thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 213,
|
|
|
+ caption: "Man on BMX (Tom Eversley - isorepublic.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg",
|
|
|
+ thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg",
|
|
|
+ thumbnailWidth: 320,
|
|
|
+ thumbnailHeight: 213,
|
|
|
+ caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg",
|
|
|
+ thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg",
|
|
|
+ thumbnailWidth: 257,
|
|
|
+ thumbnailHeight: 320,
|
|
|
+ caption: "A photo by 贝莉儿 NG. (unsplash.com)"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+};
|
|
|
+export default imageList;
|
yeungalan