36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import React, { useContext } from "react";
|
|
import styled from "styled-components";
|
|
import { FocusContext } from "pages/Editor/CanvasContexts";
|
|
import { DraggableComponentContext } from "components/editorComponents/DraggableComponent";
|
|
|
|
const PositionStyle = styled.div`
|
|
position: absolute;
|
|
top: -${props => props.theme.spaces[10]}px;
|
|
left: ${props => props.theme.spaces[6] * 2}px;
|
|
font-size: ${props => props.theme.fontSizes[3]}px;
|
|
font-weight: ${props => props.theme.fontWeights[2]};
|
|
color: ${props => props.theme.colors.widgetName};
|
|
text-align: left;
|
|
width: 100%;
|
|
z-index: 0;
|
|
display: inline-block;
|
|
`;
|
|
|
|
type WidgetNameComponentProps = {
|
|
widgetName?: string;
|
|
widgetId: string;
|
|
};
|
|
|
|
export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
|
|
const { focusedWidget, selectedWidget } = useContext(FocusContext);
|
|
const { isDragging } = useContext(DraggableComponentContext);
|
|
|
|
return (focusedWidget === props.widgetId ||
|
|
selectedWidget === props.widgetId) &&
|
|
!isDragging ? (
|
|
<PositionStyle>{props.widgetName}</PositionStyle>
|
|
) : null;
|
|
};
|
|
|
|
export default WidgetNameComponent;
|