auto close menu after click
This commit is contained in:
parent
2e39635bf8
commit
f88037a100
|
@ -1,19 +1,15 @@
|
||||||
import React, { useContext } from 'react';
|
import React from 'react';
|
||||||
import { COLLECTION_SORT_BY } from 'constants/collection';
|
import { COLLECTION_SORT_BY } from 'constants/collection';
|
||||||
import TickIcon from '@mui/icons-material/Done';
|
import TickIcon from '@mui/icons-material/Done';
|
||||||
import { CollectionSortProps } from '.';
|
import { CollectionSortProps } from '.';
|
||||||
import { OverflowMenuContext } from 'contexts/overflowMenu';
|
|
||||||
import { OverflowMenuOption } from 'components/OverflowMenu/option';
|
import { OverflowMenuOption } from 'components/OverflowMenu/option';
|
||||||
import { SvgIcon } from '@mui/material';
|
import { SvgIcon } from '@mui/material';
|
||||||
|
|
||||||
const SortByOptionCreator =
|
const SortByOptionCreator =
|
||||||
({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
|
({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
|
||||||
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
|
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
|
||||||
const { close } = useContext(OverflowMenuContext);
|
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
setCollectionSortBy(props.sortBy);
|
setCollectionSortBy(props.sortBy);
|
||||||
close();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import { MenuItem, ButtonProps, Typography, Box } from '@mui/material';
|
import { MenuItem, ButtonProps, Typography, Box } from '@mui/material';
|
||||||
import { FluidContainer } from 'components/Container';
|
import { FluidContainer } from 'components/Container';
|
||||||
import React from 'react';
|
import { OverflowMenuContext } from 'contexts/overflowMenu';
|
||||||
|
import React, { useContext } from 'react';
|
||||||
|
|
||||||
interface Iprops {
|
interface Iprops {
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
color?: ButtonProps['color'];
|
color?: ButtonProps['color'];
|
||||||
startIcon?: React.ReactNode;
|
startIcon?: React.ReactNode;
|
||||||
endIcon?: React.ReactNode;
|
endIcon?: React.ReactNode;
|
||||||
|
keepOpenAfterClick?: boolean;
|
||||||
children?: any;
|
children?: any;
|
||||||
}
|
}
|
||||||
export function OverflowMenuOption({
|
export function OverflowMenuOption({
|
||||||
|
@ -14,11 +16,20 @@ export function OverflowMenuOption({
|
||||||
color = 'primary',
|
color = 'primary',
|
||||||
startIcon,
|
startIcon,
|
||||||
endIcon,
|
endIcon,
|
||||||
|
keepOpenAfterClick,
|
||||||
children,
|
children,
|
||||||
}: Iprops) {
|
}: Iprops) {
|
||||||
|
const menuContext = useContext(OverflowMenuContext);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
onClick();
|
||||||
|
if (!keepOpenAfterClick) {
|
||||||
|
menuContext.close();
|
||||||
|
}
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={onClick}
|
onClick={handleClick}
|
||||||
sx={{
|
sx={{
|
||||||
color: (theme) => theme.palette[color].main,
|
color: (theme) => theme.palette[color].main,
|
||||||
padding: 1.5,
|
padding: 1.5,
|
||||||
|
|
Loading…
Reference in a new issue