|
@@ -34,30 +34,34 @@ import {
|
|
|
|
|
|
import { actionFeedFindOne } from '../../redux/action';
|
|
import { actionFeedFindOne } from '../../redux/action';
|
|
|
|
|
|
-import ModalCarousel from './collections_carousel';
|
|
|
|
|
|
+import ModalCarousel from './collections_card';
|
|
import CreateCollection from './collections_create';
|
|
import CreateCollection from './collections_create';
|
|
|
|
|
|
export const CollectionContext = createContext()
|
|
export const CollectionContext = createContext()
|
|
|
|
|
|
|
|
|
|
// стили модального окна карусели коллекции
|
|
// стили модального окна карусели коллекции
|
|
-const style = {
|
|
|
|
|
|
+const styleModal = {
|
|
position: 'absolute',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
top: '50%',
|
|
left: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
transform: 'translate(-50%, -50%)',
|
|
- width: '80%',
|
|
|
|
|
|
+ minWidth: '400px',
|
|
|
|
+ width: '50%',
|
|
|
|
+ // width: '100%',
|
|
|
|
+ minHeigth: '500px',
|
|
height: '80%',
|
|
height: '80%',
|
|
- // bgcolor: 'background.paper',
|
|
|
|
bgcolor: '#FFF',
|
|
bgcolor: '#FFF',
|
|
- // border: '2px solid #000',
|
|
|
|
- // boxShadow: 12,
|
|
|
|
- p: 4,
|
|
|
|
|
|
+ // p: 2,
|
|
|
|
+ bgcolor: 'background.paper',
|
|
|
|
+ // boxShadow: 24,
|
|
|
|
+ outline: 0,
|
|
|
|
+ borderRadius: 3,
|
|
|
|
+ padding: '5px 0'
|
|
}
|
|
}
|
|
|
|
|
|
// стили модального окна создания коллекции
|
|
// стили модального окна создания коллекции
|
|
-// стили модального окна
|
|
|
|
-const style2 = {
|
|
|
|
|
|
+const styleCreate = {
|
|
position: 'absolute',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
top: '50%',
|
|
left: '50%',
|
|
left: '50%',
|
|
@@ -82,7 +86,7 @@ const style2 = {
|
|
export default function Collections({ userData }) {
|
|
export default function Collections({ userData }) {
|
|
// console.log('userData: ', userData)
|
|
// console.log('userData: ', userData)
|
|
|
|
|
|
- const history = useHistory()
|
|
|
|
|
|
+ // const history = useHistory()
|
|
const dispatch = useDispatch()
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
// отслеживаю мой ид
|
|
// отслеживаю мой ид
|
|
@@ -113,16 +117,51 @@ export default function Collections({ userData }) {
|
|
}
|
|
}
|
|
const handleCloseCreateCollection = () => setOpenCreateCollection(false)
|
|
const handleCloseCreateCollection = () => setOpenCreateCollection(false)
|
|
|
|
|
|
|
|
+ // отслеживание названия коллекции
|
|
|
|
+ const [collectionName, setCollectionName] = useState('')
|
|
|
|
|
|
function openCollection(id) {
|
|
function openCollection(id) {
|
|
- dispatch(actionFullFinCollectionOne(id)).then(res => res && handleOpenCarousel())
|
|
|
|
|
|
+ dispatch(actionFullFinCollectionOne(id)).then(res => {
|
|
|
|
+ res && handleOpenCarousel()
|
|
|
|
+ setCollectionName(res?.text)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // горизонтальный скорлл на коллекциях
|
|
|
|
+ const horizontalScroll = document.getElementById('collection-horizontal-scroll')
|
|
|
|
+ if (horizontalScroll) {
|
|
|
|
+ horizontalScroll.addEventListener('wheel', function (event) {
|
|
|
|
+ if (event.deltaMode == event.DOM_DELTA_PIXEL) {
|
|
|
|
+ var modifier = 1;
|
|
|
|
+ // иные режимы возможны в Firefox
|
|
|
|
+ } else if (event.deltaMode == event.DOM_DELTA_LINE) {
|
|
|
|
+ var modifier = parseInt(getComputedStyle(this).lineHeight)
|
|
|
|
+ } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
|
|
|
|
+ var modifier = this.clientHeight
|
|
|
|
+ }
|
|
|
|
+ if (event.deltaY != 0) {
|
|
|
|
+ // замена вертикальной прокрутки горизонтальной
|
|
|
|
+ this.scrollLeft += modifier * event.deltaY
|
|
|
|
+ event.preventDefault()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
<CollectionContext.Provider value={[openCreateCollection, setOpenCreateCollection]}>
|
|
<CollectionContext.Provider value={[openCreateCollection, setOpenCreateCollection]}>
|
|
<React.Fragment>
|
|
<React.Fragment>
|
|
- <List sx={{ width: '100%', bgcolor: 'background.paper', display: 'flex', flexDirection: 'row', }} className='collection-scroll'>
|
|
|
|
|
|
+ <List
|
|
|
|
+ // className='collection-scroll'
|
|
|
|
+ id='collection-horizontal-scroll'
|
|
|
|
+ sx={{
|
|
|
|
+ width: '100%',
|
|
|
|
+ bgcolor: 'background.paper',
|
|
|
|
+ display: 'flex',
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ overflowX: 'hidden'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
{/* иконка создания коллекций */}
|
|
{/* иконка создания коллекций */}
|
|
{userData === myId &&
|
|
{userData === myId &&
|
|
<ListItem
|
|
<ListItem
|
|
@@ -179,7 +218,7 @@ export default function Collections({ userData }) {
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
<Fade in={openCreateCollection}>
|
|
<Fade in={openCreateCollection}>
|
|
- <Box sx={style2}>
|
|
|
|
|
|
+ <Box sx={styleCreate}>
|
|
<Stack
|
|
<Stack
|
|
direction="row"
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
justifyContent="space-between"
|
|
@@ -275,7 +314,41 @@ export default function Collections({ userData }) {
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
<Fade in={openCarousel}>
|
|
<Fade in={openCarousel}>
|
|
- <Box sx={style}>
|
|
|
|
|
|
+ <Box sx={styleModal}>
|
|
|
|
+ <Stack
|
|
|
|
+ direction="row"
|
|
|
|
+ justifyContent="space-between"
|
|
|
|
+ alignItems="center"
|
|
|
|
+ sx={{
|
|
|
|
+ padding: '0 24px'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <Typography
|
|
|
|
+ variant="h6"
|
|
|
|
+ color='text.primary'
|
|
|
|
+ textAlign='center'
|
|
|
|
+ gutterBottom
|
|
|
|
+ >
|
|
|
|
+ {/* Коллекция... */}
|
|
|
|
+ {collectionName}
|
|
|
|
+ </Typography>
|
|
|
|
+
|
|
|
|
+ <IconButton
|
|
|
|
+ onClick={handleCloseCarousel}
|
|
|
|
+ sx={{
|
|
|
|
+ position: 'absolute',
|
|
|
|
+ top: '0px',
|
|
|
|
+ right: '0px',
|
|
|
|
+ fontSize: '25px',
|
|
|
|
+ cursor: 'default'
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <CloseRounded className='cursor-pointer' />
|
|
|
|
+ </IconButton>
|
|
|
|
+ </Stack>
|
|
|
|
+
|
|
|
|
+ <Divider />
|
|
|
|
+
|
|
<ModalCarousel />
|
|
<ModalCarousel />
|
|
</Box>
|
|
</Box>
|
|
</Fade>
|
|
</Fade>
|