0d41797a26
* filter null values in property pane autocomplete * add hover states for list items * add loading state in list * fix loading state of list widget * open list widget property on click of container * fix isVisible bug in list widget children * remove unused import * add cusor pointer * add focused state for first item in list widget * fix empty state * fix test case * fix visiblity bug * fix test case * fixes for review comments Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain> Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import React, { ReactNode, useRef, useEffect, RefObject } from "react";
|
|
import styled, { css } from "styled-components";
|
|
import tinycolor from "tinycolor2";
|
|
import { ComponentProps } from "./BaseComponent";
|
|
import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme";
|
|
import { Color } from "constants/Colors";
|
|
import { generateClassName, getCanvasClassName } from "utils/generators";
|
|
|
|
const scrollContents = css`
|
|
overflow-y: auto;
|
|
`;
|
|
|
|
const StyledContainerComponent = styled.div<
|
|
ContainerComponentProps & {
|
|
ref: RefObject<HTMLDivElement>;
|
|
}
|
|
>`
|
|
${(props) =>
|
|
props.containerStyle !== "none"
|
|
? `
|
|
border: ${getBorderCSSShorthand(props.theme.borders[2])};
|
|
border-radius: 0;`
|
|
: ""}
|
|
height: 100%;
|
|
width: 100%;
|
|
background: ${(props) => props.backgroundColor};
|
|
opacity: ${(props) => (props.resizeDisabled ? "0.8" : "1")};
|
|
position: relative;
|
|
${(props) => (!props.isVisible ? invisible : "")};
|
|
box-shadow: ${(props) =>
|
|
props.selected ? "0px 0px 0px 3px rgba(59,130,246,0.5)" : "none"};
|
|
z-index: ${(props) => (props.selected ? "2" : "1")};
|
|
${(props) => (props.shouldScrollContents ? scrollContents : "")}
|
|
|
|
&:hover {
|
|
z-index: ${(props) => (props.onClickCapture ? "2" : "1")};
|
|
cursor: ${(props) => (props.onClickCapture ? "pointer" : "inherit")};
|
|
background: ${(props) =>
|
|
props.onClickCapture
|
|
? tinycolor(props.backgroundColor)
|
|
.darken(5)
|
|
.toString()
|
|
: props.backgroundColor};
|
|
}
|
|
}`;
|
|
|
|
function ContainerComponent(props: ContainerComponentProps) {
|
|
const containerStyle = props.containerStyle || "card";
|
|
const containerRef: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!props.shouldScrollContents) {
|
|
const supportsNativeSmoothScroll =
|
|
"scrollBehavior" in document.documentElement.style;
|
|
if (supportsNativeSmoothScroll) {
|
|
containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
|
|
} else {
|
|
if (containerRef.current) {
|
|
containerRef.current.scrollTop = 0;
|
|
}
|
|
}
|
|
}
|
|
}, [props.shouldScrollContents]);
|
|
return (
|
|
<StyledContainerComponent
|
|
{...props}
|
|
className={`${
|
|
props.shouldScrollContents ? getCanvasClassName() : ""
|
|
} ${generateClassName(props.widgetId)}`}
|
|
containerStyle={containerStyle}
|
|
// Before you remove: generateClassName is used for bounding the resizables within this canvas
|
|
// getCanvasClassName is used to add a scrollable parent.
|
|
ref={containerRef}
|
|
>
|
|
{props.children}
|
|
</StyledContainerComponent>
|
|
);
|
|
}
|
|
|
|
export type ContainerStyle = "border" | "card" | "rounded-border" | "none";
|
|
|
|
export interface ContainerComponentProps extends ComponentProps {
|
|
containerStyle?: ContainerStyle;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
backgroundColor?: Color;
|
|
shouldScrollContents?: boolean;
|
|
resizeDisabled?: boolean;
|
|
selected?: boolean;
|
|
}
|
|
|
|
export default ContainerComponent;
|