560db4d4df
* FEATURE-3261 : Menu Widget -- Perform initial onboarding of the widget, not completed * FEATURE-3261 : Menu Widget -- Create a menuItemsControl -- Create the first MVP of IconSelectControl * FEATURE-3261 : Add Menu Widget -- Align add menu item button to the center -- Build icon select control with a grid popup * FEATURE-3261 : Menu Widget -- Create a icon alignment control -- Complete the property pane of the widget * FEATURE-3261 : Add Menu Widget -- Implement the body of the widget -- Bind into the properties from property pane * FEATURE-3261 : Menu Widget -- Fix the issues from the first feedback * FEATURE-3261 : Menu Widget -- Fix on the 2nd feedback * FEATURE-3261 : Menu Widget -- Fix on issues from IconSelectControl, IconAlignControl * FEATURE-3261 : Menu Button Widget -- Rename Menu to MenuButton, accordingly refactoring the relevant codes -- Change some help content -- Change styles for icon select control, adding padding for search box * FEATURE-3261 : Menu Button Widget -- Bind isDisabled property into the UI -- Prevent input text of menu item from overflowing -- Add tooltip feature for icon select control -- Set the height of the popover content dynamically * FEATURE-3261 : Menu Button Widget -- Use POPOVER2_TARGET class name for styling
75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import {
|
|
Alignment,
|
|
Button,
|
|
ButtonGroup,
|
|
IButtonProps,
|
|
} from "@blueprintjs/core";
|
|
|
|
import BaseControl, { ControlProps } from "./BaseControl";
|
|
import { ControlIcons } from "icons/ControlIcons";
|
|
import { ThemeProp } from "components/ads/common";
|
|
|
|
const StyledButtonGroup = styled(ButtonGroup)`
|
|
height: 33px;
|
|
`;
|
|
|
|
const StyledButton = styled(Button)<ThemeProp & IButtonProps>`
|
|
border: ${(props) => (props.active ? `1px solid #6A86CE` : `none`)};
|
|
border-radius: 0;
|
|
background-color: #ffffff !important;
|
|
|
|
& > div {
|
|
display: flex;
|
|
}
|
|
|
|
&.bp3-active {
|
|
box-shadow: none !important;
|
|
background-color: #ffffff !important;
|
|
}
|
|
&:hover {
|
|
background-color: #ffffff !important;
|
|
}
|
|
`;
|
|
|
|
export interface IconAlignControlProps extends ControlProps {
|
|
propertyValue: Alignment | undefined;
|
|
onChange: (align: Alignment) => void;
|
|
}
|
|
|
|
class IconAlignControl extends BaseControl<IconAlignControlProps> {
|
|
constructor(props: IconAlignControlProps) {
|
|
super(props);
|
|
}
|
|
|
|
static getControlType() {
|
|
return "ICON_ALIGN";
|
|
}
|
|
|
|
public render() {
|
|
const { propertyValue } = this.props;
|
|
|
|
return (
|
|
<StyledButtonGroup fill>
|
|
<StyledButton
|
|
active={propertyValue === Alignment.LEFT || undefined}
|
|
icon={<ControlIcons.ICON_ALIGN_LEFT color="#979797" />}
|
|
onClick={() => this.handleAlign(Alignment.LEFT)}
|
|
/>
|
|
<StyledButton
|
|
active={propertyValue === Alignment.RIGHT}
|
|
icon={<ControlIcons.ICON_ALIGN_RIGHT color="#979797" />}
|
|
onClick={() => this.handleAlign(Alignment.RIGHT)}
|
|
/>
|
|
</StyledButtonGroup>
|
|
);
|
|
}
|
|
|
|
private handleAlign = (align: Alignment) => {
|
|
this.updateProperty(this.props.propertyName, align);
|
|
};
|
|
}
|
|
|
|
export default IconAlignControl;
|