Skip to content
Snippets Groups Projects
Unverified Commit 2ad88d07 authored by Nemanja Glumac's avatar Nemanja Glumac Committed by GitHub
Browse files

Rename `QueryViewNotebook` to `NotebookContainer` (#40316)

* Use Mantine Flex for the NotebookContainer

* Rename the component to `NotebookContainer`

* Convert to TS

* Explain the delay

* Use regular div

* Destructure the import type

* Simplify styling

* Shorten the prop name to `isOpen`
parent 0ea451bf
No related merge requests found
......@@ -25,7 +25,7 @@ import { TagEditorSidebar } from "../template_tags/TagEditorSidebar";
import NewQuestionHeader from "./NewQuestionHeader";
import NewQuestionView from "./View/NewQuestionView";
import QueryViewNotebook from "./View/QueryViewNotebook";
import { NotebookContainer } from "./View/NotebookContainer";
import {
BorderedViewTitleHeader,
NativeQueryEditorContainer,
......@@ -384,8 +384,8 @@ class View extends Component {
{isHeaderVisible && this.renderHeader()}
<QueryBuilderContentContainer>
{!isNative && (
<QueryViewNotebook
isNotebookContainerOpen={isNotebookContainerOpen}
<NotebookContainer
isOpen={isNotebookContainerOpen}
{...this.props}
/>
)}
......
import type { TransitionEventHandler } from "react";
import { useEffect, useState } from "react";
import Notebook from "metabase/query_builder/components/notebook/Notebook";
import { Box } from "metabase/ui";
// There must exist some transition time, no matter how short,
// because we need to trigger the 'onTransitionEnd' in the component
const delayBeforeNotRenderingNotebook = 10;
interface NotebookContainerProps {
isOpen: boolean;
}
export const NotebookContainer = ({
isOpen,
...props
}: NotebookContainerProps) => {
const [shouldShowNotebook, setShouldShowNotebook] = useState(isOpen);
useEffect(() => {
isOpen && setShouldShowNotebook(isOpen);
}, [isOpen]);
const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (
event,
): void => {
if (event.propertyName === "opacity" && !isOpen) {
setShouldShowNotebook(false);
}
};
const transformStyle = isOpen ? "translateY(0)" : "translateY(-100%)";
return (
<Box
bg="white"
pos="absolute"
inset={0}
opacity={isOpen ? 1 : 0}
style={{
zIndex: 2,
overflowY: "auto",
transform: transformStyle,
transition: `transform ${delayBeforeNotRenderingNotebook}ms, opacity ${delayBeforeNotRenderingNotebook}ms`,
}}
onTransitionEnd={handleTransitionEnd}
>
{shouldShowNotebook && <Notebook {...props} />}
</Box>
);
};
export { NotebookContainer } from "./NotebookContainer";
import PropTypes from "prop-types";
import { useEffect, useState } from "react";
import Notebook from "metabase/query_builder/components/notebook/Notebook";
import { NotebookContainer } from "./QueryViewNotebook.styled";
const delayBeforeNotRenderingNotebook = 10;
const QueryViewNotebook = ({ isNotebookContainerOpen, ...props }) => {
const [shouldShowNotebook, setShouldShowNotebook] = useState(
isNotebookContainerOpen,
);
useEffect(() => {
isNotebookContainerOpen && setShouldShowNotebook(isNotebookContainerOpen);
}, [isNotebookContainerOpen]);
const handleTransitionEnd = event => {
if (event.propertyName === "opacity" && !isNotebookContainerOpen) {
setShouldShowNotebook(false);
}
};
return (
<NotebookContainer
isOpen={isNotebookContainerOpen}
transitionTime={delayBeforeNotRenderingNotebook}
onTransitionEnd={handleTransitionEnd}
>
{shouldShowNotebook && <Notebook {...props} />}
</NotebookContainer>
);
};
QueryViewNotebook.propTypes = {
isNotebookContainerOpen: PropTypes.bool.isRequired,
};
export default QueryViewNotebook;
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { color } from "metabase/lib/colors";
export const NotebookContainer = styled.div<{
transitionTime?: number;
isOpen?: boolean;
}>`
background: white;
border-top: 1px solid ${color("border")};
bottom: 0;
left: 0;
opacity: 0;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
transform: translateY(-100%);
z-index: 2;
${({ transitionTime }) =>
css`
transition: transform ${transitionTime}ms, opacity ${transitionTime}ms;
`}
${({ isOpen }) =>
isOpen &&
css`
opacity: 1;
transform: translateY(0);
`}
@media (prefers-reduced-motion) {
// Must have some transition time, if tiny,
// so that it will trigger 'onTransitionEnd' in the component
transition: transform 10ms, opacity 10ms;
}
`;
export { default } from "./QueryViewNotebook";
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment