PromucFlow_constructor/app/client/src/components/ads/Menu.tsx
devrk96 028070eeb2
Feature: Variable addition in light and dark theme (#677)
* variables defined in light and dark constants in theme.

* warning message removed

* Fixing create app btn click opening form

* blackShades removed and icon color in application card fixed

* state change fixed

* type of light and dark constants added

Co-authored-by: Satbir Singh <satbir121@gmail.com>
2020-09-23 19:36:50 +05:30

48 lines
1.3 KiB
TypeScript

import React, { ReactNode } from "react";
import { CommonComponentProps } from "./common";
import styled from "styled-components";
import { Popover } from "@blueprintjs/core/lib/esm/components/popover/popover";
import { Position } from "@blueprintjs/core/lib/esm/common/position";
type MenuProps = CommonComponentProps & {
children?: ReactNode[];
target: JSX.Element;
position?: Position;
onOpening?: (node: HTMLElement) => void;
onClosing?: (node: HTMLElement) => void;
};
const MenuWrapper = styled.div`
width: 234px;
background: ${props => props.theme.colors.menu.background};
box-shadow: 0px 12px 28px ${props => props.theme.colors.menu.shadow};
`;
const MenuOption = styled.div`
font-family: ${props => props.theme.fonts[3]};
`;
const Menu = (props: MenuProps) => {
return (
<Popover
minimal
position={props.position || Position.BOTTOM}
onOpening={props.onOpening}
onClosing={props.onClosing}
className={props.className}
portalClassName={props.className}
data-cy={props.cypressSelector}
>
{props.target}
<MenuWrapper>
{props.children &&
props.children.map((el, index) => {
return <MenuOption key={index}>{el}</MenuOption>;
})}
</MenuWrapper>
</Popover>
);
};
export default Menu;