121 lines
3.0 KiB
TypeScript
121 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
Popover,
|
|
Classes,
|
|
PopoverInteractionKind,
|
|
Position,
|
|
} from "@blueprintjs/core";
|
|
import styled from "styled-components";
|
|
import { Colors } from "constants/Colors";
|
|
import { ReactComponent as CompactIcon } from "assets/icons/control/compact.svg";
|
|
import { CompactMode, CompactModeTypes } from "widgets/TableWidget";
|
|
import TableActionIcon from "components/designSystems/appsmith/TableActionIcon";
|
|
|
|
const DropDownWrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: white;
|
|
z-index: 1;
|
|
border-radius: 4px;
|
|
border: 1px solid ${Colors.ATHENS_GRAY};
|
|
padding: 8px;
|
|
`;
|
|
|
|
const OptionWrapper = styled.div<{ selected?: boolean }>`
|
|
display: flex;
|
|
width: calc(100% - 20px);
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
color: ${Colors.OXFORD_BLUE};
|
|
opacity: ${(props) => (props.selected ? 1 : 0.7)};
|
|
min-width: 200px;
|
|
cursor: pointer;
|
|
margin-bottom: 4px;
|
|
background: ${(props) => (props.selected ? Colors.POLAR : Colors.WHITE)};
|
|
border-left: ${(props) => (props.selected ? "4px solid #29CCA3" : "none")};
|
|
border-radius: 4px;
|
|
.option-title {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
&:hover {
|
|
background: ${Colors.POLAR};
|
|
}
|
|
`;
|
|
|
|
type CompactModeItem = {
|
|
title: string;
|
|
value: CompactMode;
|
|
};
|
|
|
|
const CompactModes: CompactModeItem[] = [
|
|
{
|
|
title: "Short",
|
|
value: CompactModeTypes.SHORT,
|
|
},
|
|
{
|
|
title: "Default",
|
|
value: CompactModeTypes.DEFAULT,
|
|
},
|
|
{
|
|
title: "Tall",
|
|
value: CompactModeTypes.TALL,
|
|
},
|
|
];
|
|
|
|
interface TableCompactModeProps {
|
|
compactMode?: CompactMode;
|
|
updateCompactMode: (mode: CompactMode) => void;
|
|
}
|
|
|
|
const TableCompactMode = (props: TableCompactModeProps) => {
|
|
const [selected, selectMenu] = React.useState(false);
|
|
return (
|
|
<Popover
|
|
minimal
|
|
enforceFocus={false}
|
|
interactionKind={PopoverInteractionKind.CLICK}
|
|
position={Position.BOTTOM}
|
|
onClose={() => {
|
|
selectMenu(false);
|
|
}}
|
|
isOpen={selected}
|
|
>
|
|
<TableActionIcon
|
|
tooltip="Row Height"
|
|
selected={selected}
|
|
selectMenu={(selected: boolean) => {
|
|
selectMenu(selected);
|
|
}}
|
|
className="t--table-compact-mode-toggle-btn"
|
|
>
|
|
<CompactIcon />
|
|
</TableActionIcon>
|
|
<DropDownWrapper>
|
|
{CompactModes.map((item: CompactModeItem, index: number) => {
|
|
return (
|
|
<OptionWrapper
|
|
selected={
|
|
props.compactMode ? props.compactMode === item.value : false
|
|
}
|
|
key={index}
|
|
onClick={() => {
|
|
props.updateCompactMode(item.value);
|
|
}}
|
|
className={`${Classes.POPOVER_DISMISS} t--table-compact-mode-option`}
|
|
>
|
|
{item.title}
|
|
</OptionWrapper>
|
|
);
|
|
})}
|
|
</DropDownWrapper>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default TableCompactMode;
|