Skip to content
Snippets Groups Projects
Commit b9201556 authored by chris's avatar chris
Browse files

rerender on screen width change

parent f1937b2c
No related branches found
No related tags found
1 merge request!179Custom hook resize
import React, { useLayoutEffect, useState } from 'react'; import React, { useLayoutEffect, useState, useEffect, useMemo } from 'react';
import { createGlobalStyle } from 'styled-components'; import { createGlobalStyle } from 'styled-components';
import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts'; import { EditoriaLayout, EditoriaMobileLayout } from 'wax-prosemirror-layouts';
import { Wax } from 'wax-prosemirror-core'; import { Wax } from 'wax-prosemirror-core';
import { config, configMobile } from './config'; import { config } from './config';
import { demo } from './demo'; import { demo } from './demo';
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
...@@ -34,26 +34,18 @@ const user = { ...@@ -34,26 +34,18 @@ const user = {
userId: '1234', userId: '1234',
username: 'demo', username: 'demo',
}; };
console.log(config);
const Editoria = () => { const Editoria = () => {
const [width, height] = useWindowSize(); const [width, height] = useWindowSize();
let layout = EditoriaLayout;
if (width < 600) { if (width < 600) {
return ( layout = EditoriaMobileLayout;
<> }
<GlobalStyle />
<Wax const MemorizedComponent = useMemo(
config={configMobile} () => (
autoFocus
placeholder="Type Something..."
fileUpload={file => renderImage(file)}
value={demo}
layout={EditoriaMobileLayout}
user={user}
/>
</>
);
} else {
return (
<> <>
<GlobalStyle /> <GlobalStyle />
<Wax <Wax
...@@ -62,22 +54,25 @@ const Editoria = () => { ...@@ -62,22 +54,25 @@ const Editoria = () => {
placeholder="Type Something..." placeholder="Type Something..."
fileUpload={file => renderImage(file)} fileUpload={file => renderImage(file)}
value={demo} value={demo}
layout={EditoriaLayout} layout={layout}
user={user} user={user}
/> />
</> </>
); ),
} [layout],
);
return <>{MemorizedComponent}</>;
}; };
function useWindowSize() { function useWindowSize() {
const [size, setSize] = useState([0, 0]); const [size, setSize] = useState([window.innerWidth, window.innerHeight]);
useLayoutEffect(() => { useLayoutEffect(() => {
function updateSize() { function updateSize() {
setSize([window.innerWidth, window.innerHeight]); setSize([window.innerWidth, window.innerHeight]);
} }
window.addEventListener('resize', updateSize); window.addEventListener('resize', updateSize);
updateSize(); updateSize();
return () => window.removeEventListener('resize', updateSize); return () => window.removeEventListener('resize', updateSize);
}, []); }, []);
return size; return size;
......
...@@ -25,6 +25,7 @@ import { ...@@ -25,6 +25,7 @@ import {
CodeBlockToolGroupService, CodeBlockToolGroupService,
TrackChangeToolGroupService, TrackChangeToolGroupService,
DisplayTextToolGroupService, DisplayTextToolGroupService,
BlockDropDownToolGroupService,
} from 'wax-prosemirror-services'; } from 'wax-prosemirror-services';
import { WaxSelectionPlugin } from 'wax-prosemirror-plugins'; import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
...@@ -45,6 +46,7 @@ export default { ...@@ -45,6 +46,7 @@ export default {
name: 'Annotations', name: 'Annotations',
more: ['Superscript', 'Subscript', 'SmallCaps'], more: ['Superscript', 'Subscript', 'SmallCaps'],
}, },
'BlockDropDown',
'Notes', 'Notes',
'Lists', 'Lists',
'Images', 'Images',
...@@ -97,5 +99,6 @@ export default { ...@@ -97,5 +99,6 @@ export default {
new CodeBlockToolGroupService(), new CodeBlockToolGroupService(),
new TrackChangeToolGroupService(), new TrackChangeToolGroupService(),
new DisplayTextToolGroupService(), new DisplayTextToolGroupService(),
new BlockDropDownToolGroupService(),
], ],
}; };
import { emDash, ellipsis } from 'prosemirror-inputrules';
import { columnResizing, tableEditing } from 'prosemirror-tables';
import {
AnnotationToolGroupService,
ImageService,
PlaceholderService,
InlineAnnotationsService,
LinkService,
ListsService,
ListToolGroupService,
TablesService,
TableToolGroupService,
BaseService,
BaseToolGroupService,
DisplayBlockLevelService,
DisplayToolGroupService,
ImageToolGroupService,
TextBlockLevelService,
TextToolGroupService,
NoteService,
NoteToolGroupService,
TrackChangeService,
CommentsService,
CodeBlockService,
CodeBlockToolGroupService,
TrackChangeToolGroupService,
DisplayTextToolGroupService,
BlockDropDownToolGroupService,
} from 'wax-prosemirror-services';
import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
import invisibles, {
space,
hardBreak,
paragraph,
} from '@guardian/prosemirror-invisibles';
export default {
MenuService: [
{
templateArea: 'topBar',
toolGroups: [
'Base',
{
name: 'Annotations',
more: ['Superscript', 'Subscript', 'SmallCaps'],
},
'BlockDropDown',
'Notes',
'Lists',
'Images',
'CodeBlock',
'TrackChange',
],
},
{
templateArea: 'leftSideBar',
toolGroups: ['DisplayText'],
},
],
RulesService: [emDash, ellipsis],
ShortCutsService: {},
EnableTrackChangeService: { enabled: false },
PmPlugins: [
columnResizing(),
tableEditing(),
invisibles([hardBreak()]),
WaxSelectionPlugin,
],
// Always load first CommentsService and LinkService,
//as it matters on how PM treats nodes and marks
services: [
new DisplayBlockLevelService(),
new DisplayToolGroupService(),
new TextBlockLevelService(),
new TextToolGroupService(),
new ListsService(),
new LinkService(),
new InlineAnnotationsService(),
new TrackChangeService(),
new CommentsService(),
new PlaceholderService(),
new ImageService(),
new TablesService(),
new BaseService(),
new BaseToolGroupService(),
new NoteService(),
new TableToolGroupService(),
new ImageToolGroupService(),
new AnnotationToolGroupService(),
new NoteToolGroupService(),
new ListToolGroupService(),
new CodeBlockService(),
new CodeBlockToolGroupService(),
new TrackChangeToolGroupService(),
new DisplayTextToolGroupService(),
new BlockDropDownToolGroupService(),
],
};
export { default as config } from './config'; export { default as config } from './config';
export { default as configMobile } from './configMobile';
...@@ -43,15 +43,18 @@ const dropDownOptions = [ ...@@ -43,15 +43,18 @@ const dropDownOptions = [
{ label: 'Toggle header cells', value: 'toggleHeaderCell' }, { label: 'Toggle header cells', value: 'toggleHeaderCell' },
]; ];
const TableDropDown = ({ view: { dispatch, state }, item }) => ( const TableDropDown = ({ view: { dispatch, state }, item }) => {
<DropdownStyled if (window.innerWidth < 600) return null;
options={dropDownOptions} return (
onChange={option => { <DropdownStyled
item.run(state, dispatch, tablesFn[option.value]); options={dropDownOptions}
}} onChange={option => {
placeholder="Table Options" item.run(state, dispatch, tablesFn[option.value]);
select={item.select && item.select(state)} }}
/> placeholder="Table Options"
); select={item.select && item.select(state)}
/>
);
};
export default TableDropDown; export default TableDropDown;
...@@ -106,6 +106,8 @@ class BlockDropDown extends ToolGroup { ...@@ -106,6 +106,8 @@ class BlockDropDown extends ToolGroup {
} }
}); });
if (window.innerWidth > 600) return null;
return ( return (
<DropdownStyled <DropdownStyled
value={found} value={found}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment