e22a9c6dc6
* Fix: modal widget closes when navigating to the widgets pane from explorer * Fix: Align API input tab with the headers Fix: align delete and run buttons to the right in queries pane * Fix: while dragging, the cursor must be 'grabbing' * Set new widget name in editing mode * Fix: While property pane is open, changing the widget name in entity explorer does not update the name in the property pane * Fix: The expanded entity property value popup should not have a label, as its function is only to show the full version of truncated data * Feature: Edit datasource name from entity explorer * Fix: Allow users to navigate from the placeholder text * Fix: When moving or copying apis, navigate to the moved or copied api
115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useDrag, DragPreviewImage } from "react-dnd";
|
|
import blankImage from "assets/images/blank.png";
|
|
import { WidgetCardProps } from "widgets/BaseWidget";
|
|
import styled from "styled-components";
|
|
import { WidgetIcons } from "icons/WidgetIcons";
|
|
import {
|
|
useWidgetDragResize,
|
|
useShowPropertyPane,
|
|
} from "utils/hooks/dragResizeHooks";
|
|
import AnalyticsUtil from "utils/AnalyticsUtil";
|
|
import { generateReactKey } from "utils/generators";
|
|
import { Colors } from "constants/Colors";
|
|
|
|
type CardProps = {
|
|
details: WidgetCardProps;
|
|
};
|
|
|
|
export const Wrapper = styled.div`
|
|
padding: 10px 5px 10px 5px;
|
|
border-radius: 0px;
|
|
border: none;
|
|
color: ${Colors.ALTO};
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
&:hover {
|
|
color: ${Colors.WHITE};
|
|
background: ${Colors.TUNDORA};
|
|
cursor: grab;
|
|
color: ${Colors.WHITE};
|
|
svg {
|
|
path {
|
|
fill: ${Colors.WHITE};
|
|
}
|
|
rect {
|
|
stroke: ${Colors.WHITE};
|
|
}
|
|
}
|
|
}
|
|
& i {
|
|
font-family: ${props => props.theme.fonts[2]};
|
|
font-size: ${props => props.theme.fontSizes[7]}px;
|
|
}
|
|
`;
|
|
|
|
export const IconLabel = styled.h5`
|
|
text-align: center;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
font-weight: ${props => props.theme.fontWeights[1]};
|
|
flex-shrink: 1;
|
|
font-size: ${props => props.theme.fontSizes[1]}px;
|
|
line-height: ${props => props.theme.lineHeights[2]}px;
|
|
&::selection {
|
|
background: none;
|
|
}
|
|
`;
|
|
|
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
const WidgetCard = (props: CardProps) => {
|
|
const { setIsDragging } = useWidgetDragResize();
|
|
// Generate a new widgetId which can be used in the future for this widget.
|
|
const [widgetId, setWidgetId] = useState(generateReactKey());
|
|
const showPropertyPane = useShowPropertyPane();
|
|
const [, drag, preview] = useDrag({
|
|
item: { ...props.details, widgetId },
|
|
begin: () => {
|
|
AnalyticsUtil.logEvent("WIDGET_CARD_DRAG", {
|
|
widgetType: props.details.type,
|
|
widgetName: props.details.widgetCardName,
|
|
});
|
|
showPropertyPane && showPropertyPane(undefined);
|
|
setIsDragging && setIsDragging(true);
|
|
},
|
|
end: (widget, monitor) => {
|
|
AnalyticsUtil.logEvent("WIDGET_CARD_DROP", {
|
|
widgetType: props.details.type,
|
|
widgetName: props.details.widgetCardName,
|
|
didDrop: monitor.didDrop(),
|
|
});
|
|
// We've finished dragging, generate a new widgetId to be used for next drag.
|
|
setWidgetId(generateReactKey());
|
|
setIsDragging && setIsDragging(false);
|
|
},
|
|
});
|
|
|
|
const iconType: string = props.details.type;
|
|
const Icon = WidgetIcons[iconType];
|
|
const className = `t--widget-card-draggable-${props.details.type
|
|
.split("_")
|
|
.join("")
|
|
.toLowerCase()}`;
|
|
return (
|
|
<React.Fragment>
|
|
<DragPreviewImage connect={preview} src={blankImage} />
|
|
<Wrapper ref={drag} className={className}>
|
|
<div>
|
|
<Icon />
|
|
<IconLabel>{props.details.widgetCardName}</IconLabel>
|
|
</div>
|
|
</Wrapper>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default WidgetCard;
|