p5.js-web-editor/client/utils/responsive.jsx

24 lines
768 B
React
Raw Normal View History

import React from 'react';
2020-08-21 23:07:41 +02:00
import { useSelector } from 'react-redux';
import MediaQuery from 'react-responsive';
import ResponsiveForm from '../modules/User/components/ResponsiveForm';
export const mobileEnabled = () => (window.process.env.MOBILE_ENABLED === true);
2020-08-21 23:10:17 +02:00
export const mobileFirst = (MobileComponent, Fallback) => (props) => {
2020-08-21 23:07:41 +02:00
const { forceDesktop } = useSelector(state => state.editorAccessibility);
return (
<MediaQuery minWidth={770}>
2020-08-21 23:10:17 +02:00
{matches => ((matches || forceDesktop || (!mobileEnabled()))
2020-08-21 23:07:41 +02:00
? <Fallback {...props} />
: <MobileComponent {...props} />)}
</MediaQuery>
);
};
export const responsiveForm = DesktopComponent => props => (
<ResponsiveForm>
<DesktopComponent {...props} />
</ResponsiveForm>
);