65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import { ComponentProps } from "./BaseComponent";
|
|
import { ContainerOrientation } from "../constants/WidgetConstants";
|
|
import styled from "../constants/DefaultTheme";
|
|
import React, {
|
|
createContext,
|
|
useState,
|
|
Dispatch,
|
|
SetStateAction,
|
|
Context,
|
|
useRef,
|
|
} from "react";
|
|
|
|
export const Container = styled("div")<ContainerProps>`
|
|
display: flex;
|
|
flex-direction: ${props => {
|
|
return props.orientation === "HORIZONTAL" ? "row" : "column";
|
|
}};
|
|
background: ${props => props.style.backgroundColor};
|
|
color: ${props => props.theme.colors.primary};
|
|
position: ${props => {
|
|
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative";
|
|
}};
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const FocusContext: Context<{
|
|
isFocused?: string;
|
|
setFocus?: Dispatch<SetStateAction<string>>;
|
|
}> = createContext({});
|
|
|
|
export const ParentBoundsContext: Context<{
|
|
boundingParent?: React.RefObject<HTMLDivElement>;
|
|
}> = createContext({});
|
|
|
|
const ContainerComponent = (props: ContainerProps) => {
|
|
const [isFocused, setFocus] = useState("");
|
|
const container = useRef(null);
|
|
const ContainerWithoutFocusContextProvider = (
|
|
<ParentBoundsContext.Provider value={{ boundingParent: container }}>
|
|
<Container ref={container} {...props}>
|
|
{props.children}
|
|
</Container>
|
|
</ParentBoundsContext.Provider>
|
|
);
|
|
const ContainerWithFocusContextProvider = (
|
|
<FocusContext.Provider value={{ isFocused, setFocus }}>
|
|
{ContainerWithoutFocusContextProvider}
|
|
</FocusContext.Provider>
|
|
);
|
|
return props.isRoot
|
|
? ContainerWithFocusContextProvider
|
|
: ContainerWithoutFocusContextProvider;
|
|
};
|
|
|
|
export interface ContainerProps extends ComponentProps {
|
|
children?: JSX.Element[] | JSX.Element;
|
|
orientation?: ContainerOrientation;
|
|
isRoot?: boolean;
|
|
}
|
|
|
|
export default ContainerComponent;
|