haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-28 08:06:56 +00:00
Code Issues Releases Wiki Activity

Feature/year month day mode in gallery (#6725)

Browse Source 
* add date mode in gallery

* replace localStorage with sfMetadataContext.localStorage, update date tag render

* update string to support translation, fix images shift up when date tag was hidden

* update gallery ui

* fix conflicts, update gallery-group-by-setter

* fix conflict
This commit is contained in:
Aries
2024-09-18 10:16:31 +08:00
committed by GitHub
parent ce39cbdc8c
commit 25f12a252d
12 changed files with 205 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/metadata/components/data-process-setter/gallery-group-by-setter/index.js Normal file
View File

@@ -0,0 +1,51 @@
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { EVENT_BUS_TYPE, GALLERY_DATE_MODE } from '../../../constants';
import { gettext } from '../../../../utils/constants';
import './index.css';
const DATE_MODE_MAP = {
[GALLERY_DATE_MODE.YEAR]: gettext('Year'),
[GALLERY_DATE_MODE.MONTH]: gettext('Month'),
[GALLERY_DATE_MODE.DAY]: gettext('Day'),
[GALLERY_DATE_MODE.ALL]: gettext('All')
};
const GalleryGroupBySetter = ({ view }) => {
const [currentMode, setCurrentMode] = useState(GALLERY_DATE_MODE.DAY);
useEffect(() => {
const savedValue = window.sfMetadataContext.localStorage.getItem('gallery-group-by', GALLERY_DATE_MODE.DAY);
setCurrentMode(savedValue || GALLERY_DATE_MODE.DAY);
}, [view?._id]);
const handleGroupByChange = useCallback((newMode) => {
setCurrentMode(newMode);
window.sfMetadataContext.localStorage.setItem('gallery-group-by', newMode);
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, newMode);
}, []);
return (
<div className="metadata-gallery-group-by-setter">
{Object.entries(DATE_MODE_MAP).map(([dateMode, label]) => (
<button
key={dateMode}
className={classnames('metadata-gallery-group-by-button', { active: currentMode === dateMode })}
onClick={() => handleGroupByChange(dateMode)}
>
<span>{label}</span>
</button>
))}
</div>
);
};
GalleryGroupBySetter.propTypes = {
view: PropTypes.shape({
_id: PropTypes.string
})
};
export default GalleryGroupBySetter;