0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timestamp list support.

Browse source
This commit is contained in:
Pushkar Anand 2020-11-29 20:18:47 +05:30
parent 2798163ec0
commit c78774f232
3 changed files with 73 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/pages/gallery/components/Collections.tsx
View file

@ -13,17 +13,18 @@ const Container = styled.div`
overflow-y: hidden;
height: 40px;
display: flex;
max-width: 100%;
@media (min-width: 1000px) {
width: 1000px;
}
@media (min-width: 450px) and (max-width: 1000px) {
max-width: 600px;
width: 600px;
}
@media (max-width: 450px) {
max-width: 100%;
width: 100%;
}
`;

2
src/pages/gallery/components/PreviewCard.tsx
View file

@ -12,7 +12,7 @@ interface IProps {
const Cont = styled.div<{ disabled: boolean }>`
background: #555 url(/image.svg) no-repeat center;
margin: 0 4px;
margin-right: 8px;
display: inline-block;
width: 192px;
height: 192px;

78
src/pages/gallery/index.tsx
View file

@ -10,10 +10,22 @@ import styled from 'styled-components';
import { PhotoSwipe } from 'react-photoswipe';
import { Options } from 'photoswipe';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList as List } from 'react-window';
import { VariableSizeList as List } from 'react-window';
import Collections from './components/Collections';
import SadFace from 'components/SadFace';
enum ITEM_TYPE {
TIME='TIME',
TILE='TILE'
}
interface TimeStampListItem {
itemType: ITEM_TYPE,
items?: file[],
itemStartIndex?: number,
date?: string,
}
const Container = styled.div`
display: block;
flex: 1;
@ -44,13 +56,15 @@ const DeadCenter = styled.div`
const ListContainer = styled.div`
display: flex;
max-width: 100%;
color: #fff;
@media (min-width: 1000px) {
width: 1000px;
}
@media (min-width: 450px) and (max-width: 1000px) {
max-width: 600px;
width: 600px;
}
@media (max-width: 450px) {
@ -229,6 +243,12 @@ export default function Gallery() {
return false;
});
const isSameDay = (first, second) => {
return first.getFullYear() === second.getFullYear() &&
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
}
return (<>
<Collections
collections={collections}
@ -250,21 +270,61 @@ export default function Gallery() {
} else {
columns = 1;
}
const timeStampList: TimeStampListItem[] = [];
let listItemIndex = 0;
let currentDate = -1;
filteredData.forEach((item, index) => {
if (!isSameDay(new Date(item.metadata.creationTime/1000), new Date(currentDate))) {
currentDate = item.metadata.creationTime/1000;
const dateTimeFormat = new Intl.DateTimeFormat('en-IN', {
weekday: 'short',
year: 'numeric',
month: 'long',
day: 'numeric'
});
timeStampList.push({
itemType: ITEM_TYPE.TIME,
date: dateTimeFormat.format(currentDate),
});
timeStampList.push({
itemType: ITEM_TYPE.TILE,
items: [item],
itemStartIndex: index,
});
listItemIndex = 1;
} else {
if (listItemIndex < columns) {
timeStampList[timeStampList.length - 1].items.push(item);
listItemIndex++;
} else {
listItemIndex = 1;
timeStampList.push({
itemType: ITEM_TYPE.TILE,
items: [item],
itemStartIndex: index,
})
}
}
});
return (
<List
itemSize={200}
itemSize={(index) => timeStampList[index].itemType === ITEM_TYPE.TIME ? 30 : 200}
height={height}
width={width}
itemCount={Math.ceil(filteredData.length / columns)}
itemCount={timeStampList.length}
>
{({ index, style }) => {
const arr = [];
for (let i = 0; i < columns; i++) {
arr.push(index * columns + i);
}
return (<ListItem style={style}>
<ListContainer>
{arr.map(i => filteredData[i] && getThumbnail(filteredData, i))}
{
timeStampList[index].itemType === ITEM_TYPE.TIME
? timeStampList[index].date
: timeStampList[index].items.map((item, idx) =>{
return getThumbnail(filteredData, timeStampList[index].itemStartIndex + idx);
})
}
</ListContainer>
</ListItem>);
}}