@dcl/react-ecs 7.0.6-4153633895.commit-4aad233 → 7.0.6-4177592674.commit-39cdc99

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 import { ReactEcs } from '../react-ecs';
+import { UiLabelProps } from './Label/types';
 import { EntityPropTypes } from './types';
 export * from './types';
 export * from './uiTransform/types';
@@ -16,4 +17,6 @@ export { Button } from './Button';
  * @public
  * @category Component
  */
-export declare function UiEntity(props: EntityPropTypes): ReactEcs.JSX.Element;
+export declare function UiEntity(props: EntityPropTypes & {
+    uiText?: UiLabelProps;
+}): ReactEcs.JSX.Element;

package/dist/components/index.js

@@ -1,4 +1,5 @@
 import { ReactEcs } from '../react-ecs';
+import { getFont, getTextAlign } from './Label/utils';
 import { parseProps } from './utils';
 export * from './types';
 export * from './uiTransform/types';
@@ -18,5 +19,12 @@ export { Button } from './Button';
  */
 /*#__PURE__*/
 export function UiEntity(props) {
-    return ReactEcs.createElement("entity", { ...parseProps(props) });
+    const uiText = props.uiText && {
+        uiText: {
+            ...props.uiText,
+            ...getFont(props.uiText.font),
+            ...getTextAlign(props.uiText.textAlign)
+        }
+    };
+    return ReactEcs.createElement("entity", { ...parseProps(props), ...uiText });
 }

package/dist/components/uiTransform/index.js

@@ -4,6 +4,12 @@ import { getAlign, getFlexDirection, getDisplay, getFlexWrap, getJustify, getOve
  */
 export const CANVAS_ROOT_ENTITY = 0;
 const defaultUiTransform = {
+    overflow: 0 /* YGOverflow.YGO_VISIBLE */,
+    display: 0 /* YGDisplay.YGD_FLEX */,
+    justifyContent: 0 /* YGJustify.YGJ_FLEX_START */,
+    alignSelf: 0 /* YGAlign.YGA_AUTO */,
+    flexDirection: 0 /* YGFlexDirection.YGFD_ROW */,
+    positionType: 0 /* YGPositionType.YGPT_RELATIVE */,
     parent: CANVAS_ROOT_ENTITY,
     rightOf: 0,
     flexBasis: 0,
@@ -51,7 +57,7 @@ const defaultUiTransform = {
  */
 /*#__PURE__*/
 export function parseUiTransform(props = {}) {
-    const { height, minHeight, maxHeight, width, minWidth, maxWidth, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -65,13 +71,14 @@ export function parseUiTransform(props = {}) {
         ...parseSize(props.minWidth, 'minWidth'),
         ...parseSize(props.maxWidth, 'maxWidth'),
         ...getDisplay(props.display),
-        ...getAlign('alignContent', props.alignContent, 1 /* YGAlign.YGA_FLEX_START */),
-        ...getAlign('alignSelf', props.alignSelf, 1 /* YGAlign.YGA_FLEX_START */),
-        ...getAlign('alignItems', props.alignItems, 1 /* YGAlign.YGA_FLEX_START */),
+        ...getAlign('alignSelf', props.alignSelf ?? 'auto'),
         ...getJustify(props.justifyContent),
         ...getFlexDirection(props.flexDirection),
-        ...getFlexWrap(props.flexWrap),
         ...getOverflow(props.overflow),
-        ...getPoistionType(props.positionType)
+        ...getPoistionType(props.positionType),
+        // Optional values
+        ...(alignContent && getAlign('alignContent', alignContent)),
+        ...(alignItems && getAlign('alignItems', alignItems)),
+        ...(flexWrap && getFlexWrap(flexWrap))
     };
 }

package/dist/components/uiTransform/types.d.ts

@@ -1,9 +1,21 @@
 /**
- * Position unit for the user.
- * i.e. width="100", width="100%", width="100px"
+ * unit value specified. i.e. 1 || '100%' || '1px'
  * @public
  */
-export type PositionUnit = `${number}px` | `${number}%` | number;
+export type PositionUnit = `${number}px` | `${number}%` | number | `${number}`;
+/**
+ * The values are in clockwise order, beginning at the top: top, right, bottom, then left
+
+ * When one value is specified, it applies the same margin to all four sides.
+ *
+ * When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
+ *
+ * When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
+ *
+When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
+ * @public
+ */
+export type PositionShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit}` | `${PositionUnit} ${PositionUnit} ${PositionUnit} ${PositionUnit}`;
 /**
  * Type used for defining the position of the element. i.e. margin, padding
  * @public
@@ -66,11 +78,11 @@ export interface UiTransformProps {
     /** The flex-direction property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). */
     flexDirection?: FlexDirectionType;
     /** The position property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. */
-    position?: Partial<Position>;
+    position?: Partial<Position> | PositionShorthand;
     /** The padding shorthand property sets the padding area on all four sides of an element at once. */
-    padding?: Partial<Position>;
+    padding?: Partial<Position> | PositionShorthand;
     /** The margin shorthand property sets the margin area on all four sides of an element. */
-    margin?: Partial<Position>;
+    margin?: Partial<Position> | PositionShorthand;
     /** The width property specifies the width of an element. */
     width?: PositionUnit;
     /** The height property specifies the height of an element. */

package/dist/components/uiTransform/utils.d.ts

@@ -1,5 +1,5 @@
 import { YGUnit } from '@dcl/ecs';
-import { Position, PositionUnit } from './types';
+import { Position, PositionUnit, PositionShorthand } from './types';
 type PropName = 'position' | 'margin' | 'padding';
 type PropKey = `${PropName}${Capitalize<keyof Position>}`;
 type PropKeyUnit = `${PropName}${Capitalize<keyof Position>}Unit`;
@@ -8,7 +8,7 @@ type PositionParsed = {
 } & {
     [key in PropKeyUnit]?: YGUnit;
 };
-export declare function parsePosition<T extends PropName>(position: Partial<Position> | undefined, prop: T): Partial<PositionParsed>;
+export declare function parsePosition<T extends PropName>(position: PositionShorthand | Partial<Position> | undefined, prop: T): Partial<PositionParsed>;
 type HeightWidth = 'height' | 'width';
 type SizePropName = HeightWidth | `max${Capitalize<HeightWidth>}` | `min${Capitalize<HeightWidth>}`;
 type SizePropKeyUnit = `${SizePropName}Unit`;

package/dist/components/uiTransform/utils.js

@@ -14,7 +14,7 @@ function parsePositionUnit(val) {
     if (val === undefined || val === null) {
         return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
     }
-    if (typeof val === 'number') {
+    if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
         return [Number(val), 1 /* YGUnit.YGU_POINT */];
     }
     if (isPercent(val)) {
@@ -25,20 +25,39 @@ function parsePositionUnit(val) {
     }
     return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
 }
-// position: { top: '1px' } => { positionTop: 1, positionTopUnit: YGUnit.YGU_Point }
 export function parsePosition(position = {}, prop) {
-    const obj = {};
-    for (const key in position) {
-        const typedKey = key;
-        const propKey = `${prop}${capitalize(typedKey)}`;
-        const propKeyUnit = `${prop}${capitalize(typedKey)}Unit`;
-        const [value, unit] = parsePositionUnit(position[typedKey]);
-        if (value === undefined)
-            continue;
-        obj[propKeyUnit] = unit;
-        obj[propKey] = value;
+    if (typeof position === 'object') {
+        const obj = {};
+        for (const key in position) {
+            const typedKey = key;
+            const propKey = `${prop}${capitalize(typedKey)}`;
+            const propKeyUnit = `${prop}${capitalize(typedKey)}Unit`;
+            const [value, unit] = parsePositionUnit(position[typedKey]);
+            if (value === undefined)
+                continue;
+            obj[propKeyUnit] = unit;
+            obj[propKey] = value;
+        }
+        return obj;
     }
-    return obj;
+    if (typeof position === 'number') {
+        return parsePosition({ top: position, left: position, right: position, bottom: position }, prop);
+    }
+    const values = position.split(' ').filter((a) => a !== '');
+    if (values.length === 1) {
+        const [value] = values;
+        return parsePosition({ top: value, left: value, right: value, bottom: value }, prop);
+    }
+    if (values.length === 2) {
+        const [topBottom, rigthLeft] = values;
+        return parsePosition({ top: topBottom, left: rigthLeft, right: rigthLeft, bottom: topBottom }, prop);
+    }
+    if (values.length === 3) {
+        const [top, rigthLeft, bottom] = values;
+        return parsePosition({ top, left: rigthLeft, right: rigthLeft, bottom }, prop);
+    }
+    const [top, right, bottom, left] = values;
+    return parsePosition({ top, right, bottom, left }, prop);
 }
 export function parseSize(val, key) {
     const unitKey = `${key}Unit`;
@@ -79,8 +98,8 @@ const parseJustify = {
 /**
  * @internal
  */
-export function getAlign(prop, align, defaultValue) {
-    const value = align ? parseAligns[align] : defaultValue;
+export function getAlign(prop, align) {
+    const value = parseAligns[align];
     return { [prop]: value };
 }
 const parseAligns = {
@@ -110,7 +129,7 @@ const parseFlexDirection = {
  * @internal
  */
 export function getFlexWrap(flexWrap) {
-    const value = flexWrap ? parseFlexWrap[flexWrap] : 1 /* YGWrap.YGW_WRAP */;
+    const value = parseFlexWrap[flexWrap];
     return { flexWrap: value };
 }
 const parseFlexWrap = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/react-ecs",
-  "version": "7.0.6-4153633895.commit-4aad233",
+  "version": "7.0.6-4177592674.commit-39cdc99",
   "description": "Decentraland ECS",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,5 +42,5 @@
     "displayName": "React ECS",
     "tsconfig": "./tsconfig.json"
   },
-  "commit": "4aad23359bad8cca4eebdf0c1a236a725d82b32d"
+  "commit": "39cdc99ea857c63f707ec9188836116d838fa10e"
 }