028070eeb2
* 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>
112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import { CommonComponentProps, Classes } from "./common";
|
|
import { ReactComponent as DownArrow } from "assets/icons/ads/down_arrow.svg";
|
|
import Text, { TextType } from "./Text";
|
|
import styled from "styled-components";
|
|
import {
|
|
Popover,
|
|
PopoverInteractionKind,
|
|
} from "@blueprintjs/core/lib/esm/components/popover/popover";
|
|
import { Position } from "@blueprintjs/core/lib/esm/common/position";
|
|
|
|
type DropdownOption = {
|
|
name: string;
|
|
desc: string;
|
|
};
|
|
|
|
type DropdownProps = CommonComponentProps & {
|
|
options: DropdownOption[];
|
|
onSelect: (selectedValue: DropdownOption) => void;
|
|
selectedIndex: number;
|
|
position?: Position;
|
|
};
|
|
|
|
const SelectedItem = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
.${Classes.TEXT} {
|
|
margin-right: ${props => props.theme.spaces[1] + 1}px;
|
|
}
|
|
`;
|
|
|
|
const OptionsWrapper = styled.div`
|
|
width: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: ${props => props.theme.colors.tableDropdown.bg};
|
|
box-shadow: ${props => props.theme.spaces[0]}px
|
|
${props => props.theme.spaces[5]}px ${props => props.theme.spaces[13] - 2}px
|
|
${props => props.theme.colors.tableDropdown.shadow};
|
|
`;
|
|
|
|
const DropdownOption = styled.div<{
|
|
isSelected: boolean;
|
|
}>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
${props =>
|
|
props.isSelected
|
|
? `background-color: ${props.theme.colors.tableDropdown.selectedBg}`
|
|
: null};
|
|
|
|
.${Classes.TEXT}:last-child {
|
|
margin-top: ${props => props.theme.spaces[1] + 1}px;
|
|
}
|
|
|
|
&:hover {
|
|
.${Classes.TEXT} {
|
|
color: ${props => props.theme.colors.tableDropdown.selectedText};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const TableDropdown = (props: DropdownProps) => {
|
|
const [selectedIndex, setSelectedIndex] = useState(props.selectedIndex);
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
const [selectedOption, setSelectedOption] = useState(
|
|
props.options[props.selectedIndex] || {},
|
|
);
|
|
|
|
const optionSelector = (index: number) => {
|
|
setSelectedIndex(index);
|
|
setSelectedOption(props.options[index]);
|
|
props.onSelect && props.onSelect(props.options[index]);
|
|
setIsDropdownOpen(false);
|
|
};
|
|
|
|
return (
|
|
<Popover
|
|
data-cy={props.cypressSelector}
|
|
usePortal={false}
|
|
position={props.position || Position.BOTTOM_LEFT}
|
|
isOpen={isDropdownOpen}
|
|
onInteraction={state => setIsDropdownOpen(state)}
|
|
interactionKind={PopoverInteractionKind.CLICK}
|
|
>
|
|
<SelectedItem>
|
|
<Text type={TextType.P1}>{selectedOption.name}</Text>
|
|
<DownArrow />
|
|
</SelectedItem>
|
|
<OptionsWrapper>
|
|
{props.options.map((el: DropdownOption, index: number) => (
|
|
<DropdownOption
|
|
key={index}
|
|
isSelected={selectedIndex === index}
|
|
onClick={() => optionSelector(index)}
|
|
>
|
|
<Text type={TextType.H5}>{el.name}</Text>
|
|
<Text type={TextType.P3}>{el.desc}</Text>
|
|
</DropdownOption>
|
|
))}
|
|
</OptionsWrapper>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default TableDropdown;
|