05f190c102
# New Feature: Entity Explorer - Entities are actions (apis and queries), datasources, pages, and widgets - With this new feature, all entities in the application will be available to view in the new entity explorer sidebar - All existing application features from the api sidebar, query sidebar, datasource sidebar and pages sidebar now are avialable on the entity explorer sidebar - Users are now able to quickly switch to any entity in the application from the entity explorer sidebar. - Users can also search all entities in the application from the new sidebar. Use cmd + f or ctrl + f to focus on the search input - Users can rename entities from the new sidebar - Users can also perform contextual actions on these entities like set a page as home page, copy/move actions, delete entity, etc from the context menu available alongside the entities in the sidebar - Users can view the properties of the entities in the sidebar, as well as copy bindings to use in the application.
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
import { BaseStyle } from "widgets/BaseWidget";
|
|
import { WIDGET_PADDING } from "constants/WidgetConstants";
|
|
import { generateClassName } from "utils/generators";
|
|
import styled from "styled-components";
|
|
|
|
const PositionedWidget = styled.div`
|
|
&:hover {
|
|
z-index: 1;
|
|
}
|
|
`;
|
|
type PositionedContainerProps = {
|
|
style: BaseStyle;
|
|
children: ReactNode;
|
|
widgetId: string;
|
|
widgetType: string;
|
|
};
|
|
|
|
export const PositionedContainer = (props: PositionedContainerProps) => {
|
|
const x = props.style.xPosition + (props.style.xPositionUnit || "px");
|
|
const y = props.style.yPosition + (props.style.yPositionUnit || "px");
|
|
const padding = WIDGET_PADDING;
|
|
return (
|
|
<PositionedWidget
|
|
style={{
|
|
position: "absolute",
|
|
left: x,
|
|
top: y,
|
|
height: props.style.componentHeight + (props.style.heightUnit || "px"),
|
|
width: props.style.componentWidth + (props.style.widthUnit || "px"),
|
|
padding: padding + "px",
|
|
}}
|
|
id={props.widgetId}
|
|
//Before you remove: This is used by property pane to reference the element
|
|
className={
|
|
generateClassName(props.widgetId) +
|
|
" " +
|
|
`t--widget-${props.widgetType
|
|
.split("_")
|
|
.join("")
|
|
.toLowerCase()}`
|
|
}
|
|
>
|
|
{props.children}
|
|
</PositionedWidget>
|
|
);
|
|
};
|
|
|
|
PositionedContainer.padding = WIDGET_PADDING;
|
|
|
|
export default PositionedContainer;
|