diff --git a/package.json b/package.json index 4ff66ba1f6..ebf9509c93 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,6 @@ "react-papaparse": "^4.0.2", "react-qr-reader": "^3.0.0-beta-1", "react-redux": "^8.1.1", - "react-responsive": "^10.0.0", "react-router-dom": "^6.14.1", "react-select": "^5.7.3", "react-simple-keyboard": "^3.6.27", @@ -123,7 +122,6 @@ "@types/react-copy-to-clipboard": "^5.0.4", "@types/react-dom": "^18.2.6", "@types/react-redux": "^7.1.24", - "@types/react-responsive": "^8.0.5", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/react-syntax-highlighter": "^15.5.7", diff --git a/src/commons/mobileWorkspace/MobileWorkspace.tsx b/src/commons/mobileWorkspace/MobileWorkspace.tsx index ee77d7ac4e..633ad03c70 100644 --- a/src/commons/mobileWorkspace/MobileWorkspace.tsx +++ b/src/commons/mobileWorkspace/MobileWorkspace.tsx @@ -1,9 +1,9 @@ import { FocusStyleManager } from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; +import { useMediaQuery } from '@mantine/hooks'; import { Ace } from 'ace-builds'; import React, { useCallback, useEffect, useState } from 'react'; import { DraggableEvent } from 'react-draggable'; -import { useMediaQuery } from 'react-responsive'; import ControlBar from '../controlBar/ControlBar'; import EditorContainer, { EditorContainerProps } from '../editor/EditorContainer'; @@ -29,7 +29,7 @@ export type MobileWorkspaceProps = { const MobileWorkspace: React.FC = props => { const isAndroid = /Android/.test(navigator.userAgent); - const isPortrait = useMediaQuery({ orientation: 'portrait' }); + const isPortrait = useMediaQuery('(orientation: portrait)'); const [draggableReplPosition, setDraggableReplPosition] = useState({ x: 0, y: 0 }); // For disabling draggable Repl when in stepper tab diff --git a/src/commons/repl/ReplInput.tsx b/src/commons/repl/ReplInput.tsx index 73ddaee98a..dc2a4e4bbc 100644 --- a/src/commons/repl/ReplInput.tsx +++ b/src/commons/repl/ReplInput.tsx @@ -5,10 +5,10 @@ import { Chapter, Variant } from 'js-slang/dist/types'; import React from 'react'; import AceEditor from 'react-ace'; import ReactAce from 'react-ace/lib/ace'; -import MediaQuery from 'react-responsive'; import { ExternalLibraryName } from '../application/types/ExternalTypes'; import { getModeString, selectMode } from '../utils/AceHelper'; +import { useResponsive } from '../utils/Hooks'; // source mode and chapter imported in Editor.tsx export type ReplInputProps = DispatchProps & StateProps & OwnProps; @@ -40,6 +40,8 @@ export const ReplInput: React.FC = props => { const replInput = React.useRef(null); const replInputBottom = React.useRef(null); + const { isDesktopBreakpoint } = useResponsive(); + const execBrowseHistoryDown: () => void = props.handleBrowseHistoryDown; const execBrowseHistoryUp: () => void = props.handleBrowseHistoryUp; const execEvaluate = () => { @@ -138,9 +140,7 @@ export const ReplInput: React.FC = props => { ref={replInput} />
{replButtons()}
- -
- + {isDesktopBreakpoint &&
} ); }; diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts index 226a2c9210..d22b9ee8a1 100644 --- a/src/commons/utils/Hooks.ts +++ b/src/commons/utils/Hooks.ts @@ -1,10 +1,10 @@ +import { useMediaQuery } from '@mantine/hooks'; import React, { RefObject } from 'react'; import { TypedUseSelectorHook, // eslint-disable-next-line no-restricted-imports useSelector } from 'react-redux'; -import { useMediaQuery } from 'react-responsive'; import { OverallState } from '../application/ApplicationTypes'; import { Tokens } from '../application/types/SessionTypes'; @@ -118,8 +118,11 @@ export const useDimensions = (ref: RefObject): [width: number, heig * or desktop as defined by the constants file. */ export const useResponsive = () => { - const isMobileBreakpoint = useMediaQuery({ maxWidth: Constants.mobileBreakpoint }); - return { isMobileBreakpoint }; + const isMobileBreakpoint = useMediaQuery(`(max-width: ${Constants.mobileBreakpoint}px)`); + return { + isMobileBreakpoint: isMobileBreakpoint, + isDesktopBreakpoint: isMobileBreakpoint === undefined ? undefined : !isMobileBreakpoint + }; }; /** diff --git a/yarn.lock b/yarn.lock index 6b7fd00eed..9cca80c3d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3159,13 +3159,6 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" -"@types/react-responsive@^8.0.5": - version "8.0.8" - resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.8.tgz#e351be7cc4d03bc476075839922bb5f9a3094e76" - integrity sha512-HDUZtoeFRHrShCGaND23HmXAB9evOOTjkghd2wAasLkuorYYitm5A1XLeKkhXKZppcMBxqB/8V4Snl6hRUTA8g== - dependencies: - "@types/react" "*" - "@types/react-router-dom@^5.3.3": version "5.3.3" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" @@ -5240,11 +5233,6 @@ css-loader@^6.5.1: postcss-value-parser "^4.2.0" semver "^7.3.8" -css-mediaquery@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0" - integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q== - css-minimizer-webpack-plugin@^3.2.0: version "3.4.1" resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f" @@ -7723,11 +7711,6 @@ husky@^9.0.0: resolved "https://registry.yarnpkg.com/husky/-/husky-9.0.11.tgz#fc91df4c756050de41b3e478b2158b87c1e79af9" integrity sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw== -hyphenate-style-name@^1.0.0: - version "1.0.4" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" - integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== - i18next-browser-languagedetector@^7.2.1: version "7.2.1" resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.1.tgz#1968196d437b4c8db847410c7c33554f6c448f6f" @@ -9344,13 +9327,6 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" -matchmediaquery@^0.4.2: - version "0.4.2" - resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa" - integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA== - dependencies: - css-mediaquery "^0.1.2" - mdast-util-from-markdown@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz#52f14815ec291ed061f2922fd14d6689c810cb88" @@ -11174,7 +11150,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -11554,16 +11530,6 @@ react-resize-detector@^8.0.4: dependencies: lodash "^4.17.21" -react-responsive@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91" - integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg== - dependencies: - hyphenate-style-name "^1.0.0" - matchmediaquery "^0.4.2" - prop-types "^15.6.1" - shallow-equal "^3.1.0" - react-router-dom@^6.14.1: version "6.22.3" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.22.3.tgz#9781415667fd1361a475146c5826d9f16752a691" @@ -12414,11 +12380,6 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" -shallow-equal@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec" - integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg== - shallowequal@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"