47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React, { useCallback, useContext } from "react";
|
|
import styled from "styled-components";
|
|
import { Link } from "design-system";
|
|
|
|
import history from "utils/history";
|
|
import WalkthroughContext from "components/featureWalkthrough/walkthroughContext";
|
|
import { BACK_TO_CANVAS, createMessage } from "@appsmith/constants/messages";
|
|
import { builderURL } from "@appsmith/RouteBuilder";
|
|
|
|
const BackToCanvasLink = styled(Link)`
|
|
margin-left: ${(props) => props.theme.spaces[1] + 1}px;
|
|
margin-top: ${(props) => props.theme.spaces[11]}px;
|
|
padding-bottom: ${(props) => props.theme.spaces[11]}px;
|
|
`;
|
|
|
|
interface BackToCanvasProps {
|
|
basePageId: string;
|
|
}
|
|
|
|
function BackToCanvas({ basePageId }: BackToCanvasProps) {
|
|
const { isOpened: isWalkthroughOpened, popFeature } =
|
|
useContext(WalkthroughContext) || {};
|
|
|
|
const handleCloseWalkthrough = useCallback(() => {
|
|
if (isWalkthroughOpened && popFeature) {
|
|
popFeature();
|
|
}
|
|
}, [isWalkthroughOpened, popFeature]);
|
|
|
|
return (
|
|
<BackToCanvasLink
|
|
id="back-to-canvas"
|
|
kind="secondary"
|
|
onClick={() => {
|
|
history.push(builderURL({ basePageId }));
|
|
|
|
handleCloseWalkthrough();
|
|
}}
|
|
startIcon="arrow-left-line"
|
|
>
|
|
{createMessage(BACK_TO_CANVAS)}
|
|
</BackToCanvasLink>
|
|
);
|
|
}
|
|
|
|
export default BackToCanvas;
|