fix(layout): Apply area and layout default.

This commit is contained in:
Gervwyk 2022-06-27 12:24:00 +02:00
parent 0f57e648ef
commit af8611fddf
4 changed files with 8 additions and 9 deletions

View File

@ -20,7 +20,7 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
import gutterSetup from './gutterSetup.js';
const Area = ({ area, areaStyle, children, highlightBorders, id, makeCssClass }) => (
const Area = ({ area = {}, areaStyle, children, highlightBorders, id, makeCssClass }) => (
<Row
id={id}
align={area.align}

View File

@ -32,8 +32,8 @@ const alignSelf = (align) => {
return align;
};
const BlockLayout = ({ id, blockStyle, children, highlightBorders, layout, makeCssClass }) => {
if (layout && layout.disabled) {
const BlockLayout = ({ id, blockStyle, children, highlightBorders, layout = {}, makeCssClass }) => {
if (layout.disabled) {
return (
<div id={id} className={makeCssClass(blockStyle)}>
{children}

View File

@ -16,7 +16,7 @@
import { type } from '@lowdefy/helpers';
const layoutParamsToArea = ({ areaKey, area, layout }) => {
const layoutParamsToArea = ({ areaKey, area = {}, layout = {} }) => {
if (areaKey !== 'content') {
return area;
}

View File

@ -15,7 +15,6 @@
*/
import React from 'react';
import { type } from '@lowdefy/helpers';
import { Area, BlockLayout, layoutParamsToArea } from '../../../src/index.js';
import Block from './Block.js';
@ -69,11 +68,11 @@ const AutoBlock = ({ block, makeCssClass, highlightBorders }) => {
content[areaKey] = (areaStyle) => (
<Area
area={layoutParamsToArea({
area: areas[areaKey] || {},
area: areas[areaKey],
areaKey,
layout: block.layout || {},
layout: block.layout,
})}
areaStyle={[areaStyle, type.isObject(areas[areaKey]) ? areas[areaKey].style : {}]}
areaStyle={[areaStyle, areas[areaKey]?.style]}
highlightBorders={highlightBorders}
id={`${block.id}-${areaKey}` + randomId()}
key={`${block.id}-${areaKey}`}
@ -115,7 +114,7 @@ const BindAutoBlock = ({ block, state, makeCssClass, highlightBorders }) => {
<BlockLayout
id={`bl-${block.id}` + randomId()}
highlightBorders={highlightBorders}
layout={block.layout || {}}
layout={block.layout}
blockStyle={block.style}
makeCssClass={makeCssClass}
>