feat: introduce rendering cfVisibility in SDK

contentful · Sep 10, 2024 · d53a8d2 · d53a8d2
1 parent 6b2cf49
commit d53a8d2
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 2 deletions.
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -107,6 +107,7 @@ export const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
 export const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];
 export const LATEST_SCHEMA_VERSION = '2023-09-28';
 export const CF_STYLE_ATTRIBUTES = [
+  'cfVisibility',
   'cfHorizontalAlignment',
   'cfVerticalAlignment',
   'cfMargin',

diff --git a/packages/core/src/utils/styleUtils/ssrStyles.ts b/packages/core/src/utils/styleUtils/ssrStyles.ts
@@ -448,7 +448,7 @@ export const resolveBackgroundImageBinding = ({
     const variableDefinitionKey = variableData.key;
     const variableDefinition = componentSettings.variableDefinitions[variableDefinitionKey];
 
-    // @ts-expect-error TODO: fix the types as it thinks taht `defaultValue` is of type string
+    // @ts-expect-error TODO: Types coming from validations erroneously assume that `defaultValue` can be a primitive value (e.g. string or number)
     const defaultValueKey = variableDefinition.defaultValue?.key;
     const defaultValue = unboundValues[defaultValueKey].value;
 

diff --git a/packages/core/src/utils/styleUtils/styleTransformers.ts b/packages/core/src/utils/styleUtils/styleTransformers.ts
@@ -6,6 +6,16 @@ import {
   BackgroundImageAlignmentOption,
 } from '@/types';
 
+export const transformVisibility = (value?: boolean): CSSProperties => {
+  if (value === false) {
+    return {
+      display: 'none',
+    };
+  }
+  // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+  return {};
+};
+
 // Keep this for backwards compatilibity - deleting this would be a breaking change
 // because existing components on a users experience will have the width value as fill
 // rather than 100%

diff --git a/packages/core/src/utils/styleUtils/stylesUtils.ts b/packages/core/src/utils/styleUtils/stylesUtils.ts
@@ -5,6 +5,7 @@ import {
   transformBorderStyle,
   transformFill,
   transformGridColumn,
+  transformVisibility,
 } from './styleTransformers';
 import { isContentfulStructureComponent } from '../components';
 import { EMPTY_CONTAINER_HEIGHT } from '../../constants';
@@ -64,8 +65,10 @@ export const buildCfStyles = ({
   cfTextItalic,
   cfTextUnderline,
   cfColumnSpan,
+  cfVisibility,
 }: Partial<StyleProps>): CSSProperties => {
   return {
+    ...transformVisibility(cfVisibility),
     margin: cfMargin,
     padding: cfPadding,
     backgroundColor: cfBackgroundColor,

diff --git a/packages/visual-editor/src/hooks/useComponentProps.ts b/packages/visual-editor/src/hooks/useComponentProps.ts
@@ -216,7 +216,7 @@ export const useComponentProps = ({
     renderDropzone,
   ]);
 
-  const cfStyles = buildCfStyles(props as StyleProps);
+  const cfStyles = useMemo(() => buildCfStyles(props as StyleProps), [props]);
 
   const sizeStyles: CSSProperties = {
     width: cfStyles.width,