feat: ui transform auto-size (#796)

Exposed 'auto' option for width/height of ui transform
decentraland · Oct 26, 2023 · cf136d8 · cf136d8
1 parent df58413
commit cf136d8
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/packages/@dcl/playground-assets/etc/playground-assets.api.md b/packages/@dcl/playground-assets/etc/playground-assets.api.md
@@ -3944,7 +3944,7 @@ export interface UiTransformProps {
     flexGrow?: number;
     flexShrink?: number;
     flexWrap?: FlexWrapType;
-    height?: PositionUnit;
+    height?: PositionUnit | 'auto';
     justifyContent?: JustifyType;
     margin?: Partial<Position> | PositionShorthand;
     maxHeight?: PositionUnit;
@@ -3956,7 +3956,7 @@ export interface UiTransformProps {
     pointerFilter?: PointerFilterType;
     position?: Partial<Position> | PositionShorthand;
     positionType?: PositionType;
-    width?: PositionUnit;
+    width?: PositionUnit | 'auto';
 }
 
 // @public (undocumented)

diff --git a/packages/@dcl/react-ecs/src/components/uiTransform/types.ts b/packages/@dcl/react-ecs/src/components/uiTransform/types.ts
@@ -108,10 +108,10 @@ export interface UiTransformProps {
   padding?: Partial<Position> | PositionShorthand
   /** The margin shorthand property sets the margin area on all four sides of an element. */
   margin?: Partial<Position> | PositionShorthand
-  /** The width property specifies the width of an element. */
-  width?: PositionUnit
-  /** The height property specifies the height of an element. */
-  height?: PositionUnit
+  /** The width property specifies the width of an element. Using 'auto' as value makes it adapt to its content. */
+  width?: PositionUnit | 'auto'
+  /** The height property specifies the height of an element. Using 'auto' as value makes it adapt to its content. */
+  height?: PositionUnit | 'auto'
   /** The min-width property sets the minimum width of an element. */
   minWidth?: PositionUnit
   /** The max-width property sets the maximum width of an element. */

diff --git a/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts b/packages/@dcl/react-ecs/src/components/uiTransform/utils.ts
@@ -43,7 +43,7 @@ function isPoint(val: PositionUnit) {
   return typeof val === 'string' && val.endsWith('px')
 }
 
-function parsePositionUnit(val?: PositionUnit): [number | undefined, YGUnit] {
+function parsePositionUnit(val?: PositionUnit | 'auto'): [number | undefined, YGUnit] {
   function getValue(key: 'px' | '%', value: string) {
     return Number(value.slice(0, value.indexOf(key)))
   }
@@ -52,6 +52,10 @@ function parsePositionUnit(val?: PositionUnit): [number | undefined, YGUnit] {
     return [undefined, YGUnit.YGU_UNDEFINED]
   }
 
+  if (val === 'auto') {
+    return [0, YGUnit.YGU_AUTO]
+  }
+
   if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
     return [Number(val), YGUnit.YGU_POINT]
   }
@@ -115,7 +119,7 @@ type SizePropKeyUnit = `${SizePropName}Unit`
 type SizeReturnType = {
   [key in SizePropName]: number
 } & { [key in SizePropKeyUnit]: YGUnit }
-export function parseSize(val: PositionUnit | undefined, key: SizePropName): Partial<SizeReturnType> {
+export function parseSize(val: PositionUnit | 'auto' | undefined, key: SizePropName): Partial<SizeReturnType> {
   const unitKey: SizePropKeyUnit = `${key}Unit`
   const [value, unit] = parsePositionUnit(val)
 

diff --git a/test/react-ecs/transform.spec.tsx b/test/react-ecs/transform.spec.tsx
@@ -315,4 +315,28 @@ describe('UiTransform React Ecs', () => {
       pointerFilter: PointerFilterMode.PFM_BLOCK
     })
   })
+
+  it('should parse auto size correctly', async () => {
+    const { engine, uiRenderer } = setupEngine()
+    const UiTransform = components.UiTransform(engine)
+    const entityIndex = engine.addEntity() as number
+
+    // Helpers
+    const rootDivEntity = (entityIndex + 1) as Entity
+    const getUiTransform = (entity: Entity) => UiTransform.get(entity)
+    const ui = () => (
+      <UiEntity
+        uiTransform={{
+          width: 'auto',
+          height: 'auto'
+        }}
+      />
+    )
+    uiRenderer.setUiRenderer(ui)
+    await engine.update(1)
+    expect(getUiTransform(rootDivEntity)).toMatchObject({
+      widthUnit: YGUnit.YGU_AUTO,
+      heightUnit: YGUnit.YGU_AUTO
+    })
+  })
 })