diff --git a/src/components/Instruqt.js b/src/components/Instruqt/index.js similarity index 85% rename from src/components/Instruqt.js rename to src/components/Instruqt/index.js index 5d671b466..b1b6e296f 100644 --- a/src/components/Instruqt.js +++ b/src/components/Instruqt/index.js @@ -1,8 +1,9 @@ -import React, { useCallback, useRef } from 'react'; +import React, { useCallback, useRef, useContext } from 'react'; import { css } from '@emotion/react'; import IconButton from '@leafygreen-ui/icon-button'; import Icon from '@leafygreen-ui/icon'; -import { theme } from '../theme/docsTheme'; +import { theme } from '../../theme/docsTheme'; +import { InstruqtContext } from './instruqt-context'; const controlsStyle = css` width: 100%; @@ -19,10 +20,12 @@ const controlsStyle = css` const Instruqt = ({ nodeData: { argument }, nodeData }) => { const embedValue = argument[0].value; const iframeRef = useRef(null); + const { setIsOpen } = useContext(InstruqtContext); const onFullScreen = useCallback(() => { if (iframeRef) { const element = iframeRef.current; + setIsOpen(true); if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.msRequestFullscreen) { @@ -33,7 +36,7 @@ const Instruqt = ({ nodeData: { argument }, nodeData }) => { element.webkitRequestFullscreen(); } } - }, [iframeRef]); + }, [iframeRef, setIsOpen]); if (!embedValue) { return null; diff --git a/src/components/Instruqt/instruqt-context.js b/src/components/Instruqt/instruqt-context.js new file mode 100644 index 000000000..d530a0a90 --- /dev/null +++ b/src/components/Instruqt/instruqt-context.js @@ -0,0 +1,22 @@ +import React, { useState } from 'react'; + +const defaultContextValue = { + hasLab: false, + isOpen: false, + setIsOpen: () => {}, +}; + +const InstruqtContext = React.createContext(defaultContextValue); + +const InstruqtProvider = ({ children, hasInstruqtLab }) => { + const hasLab = hasInstruqtLab; + const [isOpen, setIsOpen] = useState(false); + + return {children}; +}; + +InstruqtProvider.defaultProps = { + hasInstruqtLab: false, +}; + +export { InstruqtContext, InstruqtProvider }; diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js index a2a13773a..b9a2f5e98 100644 --- a/src/components/RootProvider.js +++ b/src/components/RootProvider.js @@ -8,11 +8,21 @@ import { SidenavContextProvider } from './Sidenav'; import { TabProvider } from './Tabs/tab-context'; import { ContentsProvider } from './Contents/contents-context'; import { SearchContextProvider } from './SearchResults/SearchContext'; +import { InstruqtProvider } from './Instruqt/instruqt-context'; // Check for feature flag here to make it easier to pass down for testing purposes const SHOW_FACETS = process.env.GATSBY_FEATURE_FACETED_SEARCH === 'true'; -const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, remoteMetadata, project }) => { +const RootProvider = ({ + children, + headingNodes, + selectors, + slug, + repoBranches, + hasInstruqtLab, + remoteMetadata, + project, +}) => { let providers = ( @@ -20,7 +30,9 @@ const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, r - {children} + + {children} + diff --git a/src/layouts/index.js b/src/layouts/index.js index 28595fe47..0e2211669 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -103,6 +103,7 @@ const DefaultLayout = ({ children, pageContext: { page, slug, repoBranches, temp selectors={page?.options?.selectors} remoteMetadata={remoteMetadata} project={project} + hasInstruqtLab={page?.options?.instruqt} > {!isInPresentationMode ?
:
} diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js index 5b82968a3..af9a2ddf5 100644 --- a/src/layouts/preview-layout.js +++ b/src/layouts/preview-layout.js @@ -154,6 +154,7 @@ const DefaultLayout = ({ associatedReposInfo={associatedReposInfo} headingNodes={page?.options?.headings} selectors={page?.options?.selectors} + hasInstruqtLab={page?.options?.instruqt} isAssociatedProduct={isAssociatedProduct} >