a706ad3160
* Widget layer optimization Fix positioned and snipeable component wasted renders * Some cleanup * - Few more rough optimization * Remove console logs * Clean imports * Prevent wasted renders of draggable component. * Add new selector * - Some code reorganization - Reduce wasted renders of resizable component * Clean up positioned container * Final clean up * Remove unused import * Some cleanup based on review comments * Some code refactoring * Reduce wasted renderes when dragging and resizing * Remove stray imports Co-authored-by: Satish Gandham <satish@appsmith.com>
83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import styled from "styled-components";
|
|
import { WidgetProps } from "widgets/BaseWidget";
|
|
import { WIDGET_PADDING } from "constants/WidgetConstants";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { AppState } from "@appsmith/reducers";
|
|
import { getColorWithOpacity } from "constants/DefaultTheme";
|
|
import { snipingModeSelector } from "selectors/editorSelectors";
|
|
import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
|
|
import { Layers } from "constants/Layers";
|
|
import { bindDataToWidget } from "actions/propertyPaneActions";
|
|
|
|
const SnipeableWrapper = styled.div<{ isFocused: boolean }>`
|
|
position: absolute;
|
|
width: calc(100% + ${WIDGET_PADDING - 5}px);
|
|
height: calc(100% + ${WIDGET_PADDING - 5}px);
|
|
transition: 0.15s ease;
|
|
text-align: center;
|
|
border: 3px solid transparent;
|
|
|
|
&:hover {
|
|
border: 3px solid
|
|
${(props) =>
|
|
props.isFocused
|
|
? getColorWithOpacity(props.theme.colors.textAnchor, 0.5)
|
|
: "transparent"};
|
|
${(props) => props.isFocused && "cursor: pointer"};
|
|
z-index: ${Layers.snipeableZone + 1} !important;
|
|
}
|
|
`;
|
|
|
|
type SnipeableComponentProps = WidgetProps;
|
|
|
|
function SnipeableComponent(props: SnipeableComponentProps) {
|
|
const { focusWidget } = useWidgetSelection();
|
|
const dispatch = useDispatch();
|
|
const isSnipingMode = useSelector(snipingModeSelector);
|
|
|
|
const isFocusedWidget = useSelector(
|
|
(state: AppState) =>
|
|
state.ui.widgetDragResize.focusedWidget === props.widgetId,
|
|
);
|
|
|
|
const handleMouseOver = (e: any) => {
|
|
focusWidget && !isFocusedWidget && focusWidget(props.widgetId);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const classNameForTesting = `t--snipeable-${props.type
|
|
.split("_")
|
|
.join("")
|
|
.toLowerCase()}`;
|
|
|
|
const className = `${classNameForTesting}`;
|
|
|
|
const onSelectWidgetToBind = useCallback(
|
|
(e) => {
|
|
dispatch(
|
|
bindDataToWidget({
|
|
widgetId: props.widgetId,
|
|
}),
|
|
);
|
|
e.stopPropagation();
|
|
},
|
|
[bindDataToWidget, props.widgetId, dispatch],
|
|
);
|
|
|
|
return isSnipingMode ? (
|
|
<SnipeableWrapper
|
|
className={className}
|
|
isFocused={isFocusedWidget}
|
|
onClick={onSelectWidgetToBind}
|
|
onMouseOver={handleMouseOver}
|
|
>
|
|
{props.children}
|
|
</SnipeableWrapper>
|
|
) : (
|
|
props.children
|
|
);
|
|
}
|
|
|
|
export default SnipeableComponent;
|