mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-04-06 15:30:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(renderer): Loading to size loading block based on block size.

Browse Source
This commit is contained in:
Gervwyk 2021-03-24 10:38:10 +02:00
parent 9f7b31a809
commit 16e2930840
4 changed files with 17 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/renderer/src/page/block/Block.js
View File

@ -26,11 +26,7 @@ const Block = ({ block, Blocks, context, lowdefy }) => {
const [updates, setUpdate] = useState(0);
lowdefy.updaters[block.id] = () => setUpdate(updates + 1);
const Loading = (
<LoadingBlock
blockId={block.blockId}
meta={block.meta}
highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
/>
<LoadingBlock block={block} highlightBorders={lowdefy.lowdefyGlobal.highlightBorders} />
);
return (
<ErrorBoundary>

13
packages/renderer/src/page/block/Context.js
View File

@ -15,11 +15,10 @@
*/
import React, { useEffect, useState } from 'react';
import { Loading } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import getContext from '@lowdefy/engine';
import OnEnter from './OnEnter';
import LoadingBlock from './LoadingBlock';
const Context = ({ block, contextId, render, lowdefy }) => {
const [context, setContext] = useState({});
@ -46,18 +45,12 @@ const Context = ({ block, contextId, render, lowdefy }) => {
mounted = false;
};
}, [block, lowdefy, contextId]);
if (context.id !== contextId)
return (
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
);
return <LoadingBlock block={block} highlightBorders={lowdefy.lowdefyGlobal.highlightBorders} />;
if (error) throw error;
return <OnEnter block={block} context={context} render={render} />;
return <OnEnter block={block} context={context} render={render} lowdefy={lowdefy} />;
};
export default Context;

17
packages/renderer/src/page/block/LoadingBlock.js
View File

@ -1,19 +1,20 @@
import React from 'react';
import { Loading } from '@lowdefy/block-tools';
import { Loading, makeCssClass } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import { BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-tools';
const LoadingBlock = ({ blockId, meta, highlightBorders }) => (
const LoadingBlock = ({ block, highlightBorders }) => (
<BlockLayout
id={`bl-loading-${blockId}`}
blockStyle={get(meta, 'loading.style', { default: {} })}
id={`bl-loading-${block.blockId}`}
blockStyle={get(block, 'eval.style') || get(block, 'meta.loading.style', { default: {} })}
highlightBorders={highlightBorders}
layout={get(meta, 'loading.layout', { default: {} })}
layout={get(block, 'eval.layout') || get(block, 'meta.loading.layout', { default: {} })}
makeCssClass={makeCssClass}
>
<Loading properties={get(meta, 'loading.properties')} type={get(meta, 'loading.type')} />
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
</BlockLayout>
);

13
packages/renderer/src/page/block/OnEnter.js
View File

@ -15,8 +15,8 @@
*/
import React, { useEffect, useState } from 'react';
import { Loading } from '@lowdefy/block-tools';
import { get } from '@lowdefy/helpers';
import LoadingBlock from './LoadingBlock';
const triggerEvent = ({ name, context }) => {
return context.RootBlocks.areas.root.blocks[0].triggerEvent({
@ -24,7 +24,7 @@ const triggerEvent = ({ name, context }) => {
});
};
const OnEnter = ({ block, context, render }) => {
const OnEnter = ({ block, context, render, lowdefy }) => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
@ -49,12 +49,7 @@ const OnEnter = ({ block, context, render }) => {
if (error) throw error;
if (loading)
return (
<Loading
properties={get(block, 'meta.loading.properties')}
type={get(block, 'meta.loading.type')}
/>
);
return <LoadingBlock block={block} highlightBorders={lowdefy.lowdefyGlobal.highlightBorders} />;
return render(context);
};