2019-10-31 14:12:18 +07:00
|
|
|
import React, { forwardRef } from 'react';
|
2020-04-06 00:34:42 +07:00
|
|
|
import styled from '@emotion/styled';
|
2019-10-31 14:12:18 +07:00
|
|
|
import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
|
|
|
|
|
|
|
|
type HTMLElementTagName = keyof HTMLElementTagNameMap;
|
|
|
|
type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
|
|
|
|
|
|
|
|
interface Props extends Omit<MenuItemProps, 'component'> {
|
|
|
|
component?: HTMLElementTagName;
|
|
|
|
}
|
|
|
|
|
2020-04-23 13:20:41 +07:00
|
|
|
const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem(props, ref) {
|
2019-10-31 14:12:18 +07:00
|
|
|
// it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
|
2020-04-23 13:20:41 +07:00
|
|
|
// @ts-ignore Type Types of property 'button' are incompatible.
|
|
|
|
return <StyledMaterialUIMenuItem {...props} ref={ref as any} />;
|
2019-10-31 14:12:18 +07:00
|
|
|
});
|
|
|
|
|
|
|
|
MenuItem.defaultProps = {
|
|
|
|
component: 'li',
|
|
|
|
};
|
|
|
|
|
|
|
|
export default MenuItem;
|
2020-04-06 00:34:42 +07:00
|
|
|
const StyledMaterialUIMenuItem = styled(MaterialUIMenuItem)({
|
|
|
|
outline: 'none',
|
|
|
|
});
|