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