mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2024-11-27 05:12:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(ldf-layout): move layoutParamsToArea into Area.

Browse Source 
$1h
This commit is contained in:
Gervwyk 2024-05-07 21:51:00 +02:00
parent 4b27ad5530
commit e376703286
8 changed files with 57 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/client/src/block/Container.js
View File

@ -15,7 +15,7 @@
*/
import React from 'react';
import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
import { Area, BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-utils';
import Block from './Block.js';
@ -27,24 +27,22 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy }) => {
Object.keys(areas).forEach((areaKey, i) => {
content[areaKey] = (areaStyle) => (
<Area
area={block.eval.areas[areaKey]}
areaKey={areaKey}
areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
id={`ar-${block.blockId}-${areaKey}`}
key={`ar-${block.blockId}-${areaKey}-${i}`}
area={layoutParamsToArea({
area: block.eval.areas[areaKey],
areaKey,
layout: block.eval.layout,
})}
areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
layout={block.eval.layout}
makeCssClass={makeCssClass}
>
{areas[areaKey].blocks.map((bl, k) => (
<Block
key={`co-${bl.blockId}-${k}`}
Blocks={Blocks.subBlocks[block.id][0]}
block={bl}
Blocks={Blocks.subBlocks[block.id][0]}
context={context}
parentLoading={loading}
key={`co-${bl.blockId}-${k}`}
lowdefy={lowdefy}
parentLoading={loading}
/>
))}
</Area>
@ -52,8 +50,8 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy }) => {
});
return (
<BlockLayout
id={`bl-${block.blockId}`}
blockStyle={block.eval.style}
id={`bl-${block.blockId}`}
layout={block.eval.layout}
makeCssClass={makeCssClass}
>

20
packages/client/src/block/List.js
View File

@ -15,7 +15,7 @@
*/
import React from 'react';
import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
import { Area, BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-utils';
import Block from './Block.js';
@ -27,24 +27,22 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy }) => {
Object.keys(SBlock.areas).forEach((areaKey) => {
content[areaKey] = (areaStyle) => (
<Area
area={block.eval.areas[areaKey]}
areaKey={areaKey}
areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
id={`ar-${block.blockId}-${SBlock.id}-${areaKey}`}
key={`ar-${block.blockId}-${SBlock.id}-${areaKey}`}
area={layoutParamsToArea({
area: block.eval.areas[areaKey],
areaKey,
layout: block.eval.layout,
})}
areaStyle={[areaStyle, block.eval.areas[areaKey]?.style]}
layout={block.eval.layout}
makeCssClass={makeCssClass}
>
{SBlock.areas[areaKey].blocks.map((bl) => (
<Block
key={`ls-${bl.blockId}`}
Blocks={SBlock}
block={bl}
Blocks={SBlock}
context={context}
parentLoading={loading}
key={`ls-${bl.blockId}`}
lowdefy={lowdefy}
parentLoading={loading}
/>
))}
</Area>
@ -54,8 +52,8 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy }) => {
});
return (
<BlockLayout
id={`bl-${block.blockId}`}
blockStyle={block.eval.style}
id={`bl-${block.blockId}`}
layout={block.eval.layout}
makeCssClass={makeCssClass}
>

10
packages/client/src/block/LoadingContainer.js
View File

@ -15,7 +15,7 @@
*/
import React from 'react';
import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
import { Area, BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-utils';
import LoadingBlock from './LoadingBlock.js';
@ -35,14 +35,12 @@ const LoadingContainer = ({
Object.keys(skeleton.areas).forEach((areaKey, i) => {
content[areaKey] = (areaStyle) => (
<Area
area={layoutParamsToArea({
area: skeleton.areas[areaKey],
areaKey,
layout: skeleton.layout ?? blockLayout,
})}
area={skeleton.areas[areaKey]}
areaKey={areaKey}
areaStyle={[areaStyle, skeleton.areas[areaKey]?.style]}
id={`s-ar-${blockId}-${skeleton.id}-${areaKey}`}
key={`s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`}
layout={skeleton.layout ?? blockLayout}
makeCssClass={makeCssClass}
>
{skeleton.areas[areaKey].blocks.map((skl, k) => (

10
packages/client/src/block/LoadingList.js
View File

@ -15,7 +15,7 @@
*/
import React from 'react';
import { Area, BlockLayout, layoutParamsToArea } from '@lowdefy/layout';
import { Area, BlockLayout } from '@lowdefy/layout';
import { makeCssClass } from '@lowdefy/block-utils';
import LoadingBlock from './LoadingBlock.js';
@ -36,14 +36,12 @@ const LoadingList = ({
Object.keys(skeleton.areas).forEach((areaKey, i) => {
content[areaKey] = (areaStyle) => (
<Area
area={layoutParamsToArea({
area: skeleton.areas[areaKey],
areaKey,
layout: skeleton.layout ?? blockLayout,
})}
area={skeleton.areas[areaKey]}
areaKey={areaKey}
areaStyle={[areaStyle, skeleton.areas[areaKey]?.style]}
id={`s-ar-${blockId}-${skeleton.id}-${areaKey}`}
key={`s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`}
layout={skeleton.layout ?? blockLayout}
makeCssClass={makeCssClass}
>
{skeleton.areas[areaKey].blocks.map((skl, k) => (

38
packages/layout/src/Area.js
View File

@ -19,24 +19,28 @@ import { Row } from 'antd';
import { blockDefaultProps } from '@lowdefy/block-utils';
import gutterSetup from './gutterSetup.js';
import layoutParamsToArea from './layoutParamsToArea.js';
const Area = ({ area = {}, areaStyle, children, id, makeCssClass }) => (
<Row
id={id}
align={area.align}
className={makeCssClass(areaStyle)}
gutter={gutterSetup(area.gutter)}
justify={area.justify}
style={{
// antd keeps bottom margin which can cause overflow issues.
flexDirection: area.direction,
flexWrap: area.wrap,
overflow: area.overflow,
}}
>
{children}
</Row>
);
const Area = ({ area = {}, areaKey, areaStyle, children, id, layout, makeCssClass }) => {
const derivedArea = layoutParamsToArea({ area, areaKey, layout });
return (
<Row
id={id}
align={area.align}
className={makeCssClass(areaStyle)}
gutter={gutterSetup(derivedArea.gutter)}
justify={derivedArea.justify}
style={{
// antd keeps bottom margin which can cause overflow issues.
flexDirection: derivedArea.direction,
flexWrap: derivedArea.wrap,
overflow: derivedArea.overflow,
}}
>
{children}
</Row>
);
};
Area.defaultProps = blockDefaultProps;

3
packages/layout/src/index.js
View File

@ -16,6 +16,5 @@
import Area from './Area.js';
import BlockLayout from './BlockLayout.js';
import layoutParamsToArea from './layoutParamsToArea.js';
export { Area, BlockLayout, layoutParamsToArea };
export { Area, BlockLayout };

6
packages/layout/src/layoutParamsToArea.js
View File

@ -21,11 +21,11 @@ const layoutParamsToArea = ({ areaKey, area = {}, layout = {} }) => {
return area;
}
area.align = type.isNone(area.align) ? layout.contentAlign : area.align;
area.justify = type.isNone(area.justify) ? layout.contentJustify : area.justify;
area.direction = type.isNone(area.direction) ? layout.contentDirection : area.direction;
area.wrap = type.isNone(area.wrap) ? layout.contentWrap : area.wrap;
area.overflow = type.isNone(area.overflow) ? layout.contentOverflow : area.overflow;
area.gutter = type.isNone(area.gutter) ? layout.contentGutter : area.gutter;
area.justify = type.isNone(area.justify) ? layout.contentJustify : area.justify;
area.overflow = type.isNone(area.overflow) ? layout.contentOverflow : area.overflow;
area.wrap = type.isNone(area.wrap) ? layout.contentWrap : area.wrap;
return area;
};

14
packages/layout/src/tests/blocks/AutoBlockSim.js
View File

@ -15,14 +15,14 @@
*/
import React from 'react';
import { Area, BlockLayout, layoutParamsToArea } from '../../index.js';
import { Area, BlockLayout } from '../../index.js';
import Block from './Block.js';
import Box from './Box.js';
import Button from './Button.js';
import Input from './Input.js';
import Paragraph from './Paragraph.js';
import List from './List.js';
import Paragraph from './Paragraph.js';
const Blocks = {
Block,
@ -67,14 +67,12 @@ const AutoBlock = ({ block, makeCssClass }) => {
Object.keys(areas || {}).forEach((areaKey) => {
content[areaKey] = (areaStyle) => (
<Area
area={layoutParamsToArea({
area: areas[areaKey],
areaKey,
layout: block.layout,
})}
area={areas[areaKey]}
areaKey={areaKey}
areaStyle={[areaStyle, areas[areaKey]?.style]}
id={`${block.id}-${areaKey}${randomId()}`}
key={`${block.id}-${areaKey}`}
layout={block.layout}
makeCssClass={makeCssClass}
>
{(areas[areaKey].blocks || []).map((bl, i) => (
@ -106,9 +104,9 @@ const BindAutoBlock = ({ block, state, makeCssClass }) => {
return (
<Loading id={`${block.id}-loading`} showLoading>
<BlockLayout
blockStyle={block.style}
id={`bl-${block.id}${randomId()}`}
layout={block.layout}
blockStyle={block.style}
makeCssClass={makeCssClass}
>
<AutoBlock block={block} state={state} makeCssClass={makeCssClass} />