r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

👌 move hoc to components folder

Browse source
This commit is contained in:
ghalestrilo 2020-07-30 14:30:45 -03:00
parent ea9a2f9e25
commit 8acd6ec189
3 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/components/useAsModal.jsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
import { useModalBehavior } from '../utils/custom-hooks';
export default (component) => {
const [visible, trigger, setRef] = useModalBehavior();
const wrapper = () => <div ref={setRef}> {visible && component} </div>; // eslint-disable-line
return [trigger, wrapper];
};

2
client/modules/IDE/pages/MobileIDEView.jsx
View file

@ -31,7 +31,7 @@ import Console from '../components/Console';
import { remSize } from '../../../theme'; import { remSize } from '../../../theme';
// import OverlayManager from '../../../components/OverlayManager'; // import OverlayManager from '../../../components/OverlayManager';
import ActionStrip from '../../../components/mobile/ActionStrip'; import ActionStrip from '../../../components/mobile/ActionStrip';
import { useAsModal } from '../../../utils/custom-hooks'; import useAsModal from '../../../components/useAsModal';
import { PreferencesIcon } from '../../../common/icons'; import { PreferencesIcon } from '../../../common/icons';
import Dropdown from '../../../components/Dropdown'; import Dropdown from '../../../components/Dropdown';

11
client/utils/custom-hooks.js
View file

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useMemo, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
export const noop = () => {}; export const noop = () => {};
@ -40,12 +40,3 @@ export const useModalBehavior = (hideOverlay) => {
return [visible, trigger, setRef]; return [visible, trigger, setRef];
}; };
// TODO: This is HOC, not a hook. Where do we put it?
export const useAsModal = (component) => {
const [visible, trigger, setRef] = useModalBehavior();
const wrapper = () => (<div ref={setRef}> {visible && component} </div>); // eslint-disable-line
return [trigger, wrapper];
};