renamed FloatingDrawer to AllCollectionContainer
This commit is contained in:
parent
25b350323c
commit
67338726d1
30
src/components/Collections/AllCollections/Container.tsx
Normal file
30
src/components/Collections/AllCollections/Container.tsx
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
import { Dialog, Slide, styled } from '@mui/material';
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
export const AllCollectionContainer = styled(Dialog)(({ theme }) => ({
|
||||||
|
'& .MuiDialog-container': {
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
},
|
||||||
|
'& .MuiPaper-root': {
|
||||||
|
maxWidth: '498px',
|
||||||
|
},
|
||||||
|
'& .MuiDialogTitle-root': {
|
||||||
|
padding: theme.spacing(3, 2),
|
||||||
|
},
|
||||||
|
'& .MuiDialogContent-root': {
|
||||||
|
padding: theme.spacing(2),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
AllCollectionContainer.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Transition = (direction: 'left' | 'right' | 'up') =>
|
||||||
|
React.forwardRef(
|
||||||
|
(props: { children: React.ReactElement<any, any> }, ref) => {
|
||||||
|
return <Slide direction={direction} ref={ref} {...props} />;
|
||||||
|
}
|
||||||
|
);
|
|
@ -4,8 +4,8 @@ import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
|
||||||
import { sortCollectionSummaries } from 'services/collectionService';
|
import { sortCollectionSummaries } from 'services/collectionService';
|
||||||
import {
|
import {
|
||||||
Transition,
|
Transition,
|
||||||
FloatingDrawer,
|
AllCollectionContainer,
|
||||||
} from 'components/Collections/FloatingDrawer';
|
} from 'components/Collections/AllCollections/Container';
|
||||||
import { useLocalState } from 'hooks/useLocalState';
|
import { useLocalState } from 'hooks/useLocalState';
|
||||||
import { LS_KEYS } from 'utils/storage/localStorage';
|
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||||
import AllCollectionsHeader from './header';
|
import AllCollectionsHeader from './header';
|
||||||
|
@ -48,7 +48,7 @@ export default function AllCollections(props: Iprops) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FloatingDrawer
|
<AllCollectionContainer
|
||||||
TransitionComponent={LeftSlideTransition}
|
TransitionComponent={LeftSlideTransition}
|
||||||
onClose={close}
|
onClose={close}
|
||||||
open={isOpen}>
|
open={isOpen}>
|
||||||
|
@ -64,6 +64,6 @@ export default function AllCollections(props: Iprops) {
|
||||||
collectionSummaries={sortedCollectionSummaries}
|
collectionSummaries={sortedCollectionSummaries}
|
||||||
onCollectionClick={onCollectionClick}
|
onCollectionClick={onCollectionClick}
|
||||||
/>
|
/>
|
||||||
</FloatingDrawer>
|
</AllCollectionContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue