Merge pull request #153 from ente-io/update-selection-behaviour
Update selection behaviour
This commit is contained in:
commit
0781e76c67
|
@ -3,6 +3,7 @@ import {
|
||||||
DeadCenter,
|
DeadCenter,
|
||||||
GalleryContext,
|
GalleryContext,
|
||||||
Search,
|
Search,
|
||||||
|
SelectedState,
|
||||||
SetFiles,
|
SetFiles,
|
||||||
setSearchStats,
|
setSearchStats,
|
||||||
} from 'pages/gallery';
|
} from 'pages/gallery';
|
||||||
|
@ -136,8 +137,10 @@ interface Props {
|
||||||
setFiles: SetFiles;
|
setFiles: SetFiles;
|
||||||
syncWithRemote: () => Promise<void>;
|
syncWithRemote: () => Promise<void>;
|
||||||
favItemIds: Set<number>;
|
favItemIds: Set<number>;
|
||||||
setSelected;
|
setSelected: (
|
||||||
selected;
|
selected: SelectedState | ((selected: SelectedState) => SelectedState)
|
||||||
|
) => void;
|
||||||
|
selected: SelectedState;
|
||||||
isFirstLoad;
|
isFirstLoad;
|
||||||
openFileUploader;
|
openFileUploader;
|
||||||
loadingBar;
|
loadingBar;
|
||||||
|
@ -146,6 +149,7 @@ interface Props {
|
||||||
setSearchStats: setSearchStats;
|
setSearchStats: setSearchStats;
|
||||||
deleted?: number[];
|
deleted?: number[];
|
||||||
setDialogMessage: SetDialogMessage;
|
setDialogMessage: SetDialogMessage;
|
||||||
|
activeCollection: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const PhotoFrame = ({
|
const PhotoFrame = ({
|
||||||
|
@ -163,6 +167,7 @@ const PhotoFrame = ({
|
||||||
setSearchStats,
|
setSearchStats,
|
||||||
deleted,
|
deleted,
|
||||||
setDialogMessage,
|
setDialogMessage,
|
||||||
|
activeCollection,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||||
|
@ -246,10 +251,14 @@ const PhotoFrame = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSelect = (id: number) => (checked: boolean) => {
|
const handleSelect = (id: number) => (checked: boolean) => {
|
||||||
|
if (selected.collectionID !== activeCollection) {
|
||||||
|
setSelected({ count: 0, collectionID: 0 });
|
||||||
|
}
|
||||||
setSelected((selected) => ({
|
setSelected((selected) => ({
|
||||||
...selected,
|
...selected,
|
||||||
[id]: checked,
|
[id]: checked,
|
||||||
count: checked ? selected.count + 1 : selected.count - 1,
|
count: checked ? selected.count + 1 : selected.count - 1,
|
||||||
|
collectionID: activeCollection,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
const getThumbnail = (file: File[], index: number) => (
|
const getThumbnail = (file: File[], index: number) => (
|
||||||
|
@ -260,7 +269,10 @@ const PhotoFrame = ({
|
||||||
onClick={onThumbnailClick(index)}
|
onClick={onThumbnailClick(index)}
|
||||||
selectable
|
selectable
|
||||||
onSelect={handleSelect(file[index].id)}
|
onSelect={handleSelect(file[index].id)}
|
||||||
selected={selected[file[index].id]}
|
selected={
|
||||||
|
selected.collectionID === activeCollection &&
|
||||||
|
selected[file[index].id]
|
||||||
|
}
|
||||||
selectOnClick={selected.count > 0}
|
selectOnClick={selected.count > 0}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -18,7 +18,7 @@ import OptionIcon, { OptionIconWrapper } from './OptionIcon';
|
||||||
interface CollectionProps {
|
interface CollectionProps {
|
||||||
collections: Collection[];
|
collections: Collection[];
|
||||||
selected?: number;
|
selected?: number;
|
||||||
selectCollection: (id?: number) => void;
|
setActiveCollection: (id?: number) => void;
|
||||||
setDialogMessage: SetDialogMessage;
|
setDialogMessage: SetDialogMessage;
|
||||||
syncWithRemote: () => Promise<void>;
|
syncWithRemote: () => Promise<void>;
|
||||||
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
setCollectionNamerAttributes: SetCollectionNamerAttributes;
|
||||||
|
@ -69,7 +69,7 @@ const Chip = styled.button<{ active: boolean }>`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default function Collections(props: CollectionProps) {
|
export default function Collections(props: CollectionProps) {
|
||||||
const { selected, collections, selectCollection } = props;
|
const { selected, collections, setActiveCollection } = props;
|
||||||
const [selectedCollectionID, setSelectedCollectionID] =
|
const [selectedCollectionID, setSelectedCollectionID] =
|
||||||
useState<number>(null);
|
useState<number>(null);
|
||||||
const collectionRef = useRef<HTMLDivElement>(null);
|
const collectionRef = useRef<HTMLDivElement>(null);
|
||||||
|
@ -102,7 +102,7 @@ export default function Collections(props: CollectionProps) {
|
||||||
|
|
||||||
const clickHandler = (collection?: Collection) => () => {
|
const clickHandler = (collection?: Collection) => () => {
|
||||||
setSelectedCollectionID(collection?.id);
|
setSelectedCollectionID(collection?.id);
|
||||||
selectCollection(collection?.id);
|
setActiveCollection(collection?.id);
|
||||||
};
|
};
|
||||||
|
|
||||||
const user: User = getData(LS_KEYS.USER);
|
const user: User = getData(LS_KEYS.USER);
|
||||||
|
@ -119,7 +119,7 @@ export default function Collections(props: CollectionProps) {
|
||||||
setDialogMessage: props.setDialogMessage,
|
setDialogMessage: props.setDialogMessage,
|
||||||
startLoadingBar: props.startLoadingBar,
|
startLoadingBar: props.startLoadingBar,
|
||||||
showCollectionShareModal: setCollectionShareModalView.bind(null, true),
|
showCollectionShareModal: setCollectionShareModalView.bind(null, true),
|
||||||
redirectToAll: selectCollection.bind(null, null),
|
redirectToAll: setActiveCollection.bind(null, 0),
|
||||||
});
|
});
|
||||||
|
|
||||||
const scrollCollection = (direction: SCROLL_DIRECTION) => () => {
|
const scrollCollection = (direction: SCROLL_DIRECTION) => () => {
|
||||||
|
|
|
@ -79,9 +79,10 @@ const AlertContainer = styled.div`
|
||||||
text-align: center;
|
text-align: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export type selectedState = {
|
export type SelectedState = {
|
||||||
[k: number]: boolean;
|
[k: number]: boolean;
|
||||||
count: number;
|
count: number;
|
||||||
|
collectionID: number;
|
||||||
};
|
};
|
||||||
export type SetFiles = React.Dispatch<React.SetStateAction<File[]>>;
|
export type SetFiles = React.Dispatch<React.SetStateAction<File[]>>;
|
||||||
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
|
export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
|
||||||
|
@ -125,7 +126,10 @@ export default function Gallery() {
|
||||||
);
|
);
|
||||||
const [isFirstLoad, setIsFirstLoad] = useState(false);
|
const [isFirstLoad, setIsFirstLoad] = useState(false);
|
||||||
const [isFirstFetch, setIsFirstFetch] = useState(false);
|
const [isFirstFetch, setIsFirstFetch] = useState(false);
|
||||||
const [selected, setSelected] = useState<selectedState>({ count: 0 });
|
const [selected, setSelected] = useState<SelectedState>({
|
||||||
|
count: 0,
|
||||||
|
collectionID: 0,
|
||||||
|
});
|
||||||
const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
|
const [dialogMessage, setDialogMessage] = useState<MessageAttributes>();
|
||||||
const [dialogView, setDialogView] = useState(false);
|
const [dialogView, setDialogView] = useState(false);
|
||||||
const [planModalView, setPlanModalView] = useState(false);
|
const [planModalView, setPlanModalView] = useState(false);
|
||||||
|
@ -162,6 +166,7 @@ export default function Gallery() {
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
const [collectionFilesCount, setCollectionFilesCount] =
|
const [collectionFilesCount, setCollectionFilesCount] =
|
||||||
useState<Map<number, number>>();
|
useState<Map<number, number>>();
|
||||||
|
const [activeCollection, setActiveCollection] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
|
||||||
|
@ -196,13 +201,22 @@ export default function Gallery() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => setDialogView(true), [dialogMessage]);
|
useEffect(() => setDialogView(true), [dialogMessage]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (collectionSelectorAttributes) {
|
if (collectionSelectorAttributes) {
|
||||||
setCollectionSelectorView(true);
|
setCollectionSelectorView(true);
|
||||||
}
|
}
|
||||||
}, [collectionSelectorAttributes]);
|
}, [collectionSelectorAttributes]);
|
||||||
|
|
||||||
useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]);
|
useEffect(() => setCollectionNamerView(true), [collectionNamerAttributes]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const href = `/gallery${
|
||||||
|
activeCollection ? `?collection=${activeCollection.toString()}` : ''
|
||||||
|
}`;
|
||||||
|
router.push(href, undefined, { shallow: true });
|
||||||
|
}, [activeCollection]);
|
||||||
|
|
||||||
const syncWithRemote = async (force = false, silent = false) => {
|
const syncWithRemote = async (force = false, silent = false) => {
|
||||||
if (syncInProgress.current && !force) {
|
if (syncInProgress.current && !force) {
|
||||||
resync.current = true;
|
resync.current = true;
|
||||||
|
@ -269,12 +283,7 @@ export default function Gallery() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const clearSelection = function () {
|
const clearSelection = function () {
|
||||||
setSelected({ count: 0 });
|
setSelected({ count: 0, collectionID: 0 });
|
||||||
};
|
|
||||||
|
|
||||||
const selectCollection = (id?: number) => {
|
|
||||||
const href = `/gallery${id ? `?collection=${id.toString()}` : ''}`;
|
|
||||||
router.push(href, undefined, { shallow: true });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!files) {
|
if (!files) {
|
||||||
|
@ -292,7 +301,7 @@ export default function Gallery() {
|
||||||
files,
|
files,
|
||||||
clearSelection,
|
clearSelection,
|
||||||
syncWithRemote,
|
syncWithRemote,
|
||||||
selectCollection,
|
setActiveCollection,
|
||||||
collectionName,
|
collectionName,
|
||||||
collection
|
collection
|
||||||
);
|
);
|
||||||
|
@ -402,7 +411,7 @@ export default function Gallery() {
|
||||||
collections={collections}
|
collections={collections}
|
||||||
searchMode={searchMode}
|
searchMode={searchMode}
|
||||||
selected={Number(router.query.collection)}
|
selected={Number(router.query.collection)}
|
||||||
selectCollection={selectCollection}
|
setActiveCollection={setActiveCollection}
|
||||||
syncWithRemote={syncWithRemote}
|
syncWithRemote={syncWithRemote}
|
||||||
setDialogMessage={setDialogMessage}
|
setDialogMessage={setDialogMessage}
|
||||||
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
setCollectionNamerAttributes={setCollectionNamerAttributes}
|
||||||
|
@ -473,11 +482,15 @@ export default function Gallery() {
|
||||||
setSearchStats={setSearchStats}
|
setSearchStats={setSearchStats}
|
||||||
deleted={deleted}
|
deleted={deleted}
|
||||||
setDialogMessage={setDialogMessage}
|
setDialogMessage={setDialogMessage}
|
||||||
|
activeCollection={activeCollection}
|
||||||
/>
|
/>
|
||||||
{selected.count > 0 && (
|
{selected.count > 0 &&
|
||||||
|
selected.collectionID === activeCollection && (
|
||||||
<SelectedFileOptions
|
<SelectedFileOptions
|
||||||
addToCollectionHelper={addToCollectionHelper}
|
addToCollectionHelper={addToCollectionHelper}
|
||||||
showCreateCollectionModal={showCreateCollectionModal}
|
showCreateCollectionModal={
|
||||||
|
showCreateCollectionModal
|
||||||
|
}
|
||||||
setDialogMessage={setDialogMessage}
|
setDialogMessage={setDialogMessage}
|
||||||
setCollectionSelectorAttributes={
|
setCollectionSelectorAttributes={
|
||||||
setCollectionSelectorAttributes
|
setCollectionSelectorAttributes
|
||||||
|
|
|
@ -13,7 +13,7 @@ export async function addFilesToCollection(
|
||||||
files: File[],
|
files: File[],
|
||||||
clearSelection: () => void,
|
clearSelection: () => void,
|
||||||
syncWithRemote: () => Promise<void>,
|
syncWithRemote: () => Promise<void>,
|
||||||
selectCollection: (id: number) => void,
|
setActiveCollection: (id: number) => void,
|
||||||
collectionName: string,
|
collectionName: string,
|
||||||
existingCollection: Collection
|
existingCollection: Collection
|
||||||
) {
|
) {
|
||||||
|
@ -31,7 +31,7 @@ export async function addFilesToCollection(
|
||||||
await addToCollection(collection, selectedFiles);
|
await addToCollection(collection, selectedFiles);
|
||||||
clearSelection();
|
clearSelection();
|
||||||
await syncWithRemote();
|
await syncWithRemote();
|
||||||
selectCollection(collection.id);
|
setActiveCollection(collection.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getSelectedCollection(collectionID: number, collections) {
|
export function getSelectedCollection(collectionID: number, collections) {
|
||||||
|
|
Loading…
Reference in a new issue