@dcl/react-ecs 7.0.6-3942933325.commit-70f967f → 7.0.6-3987590195.commit-4fc1536

package/dist/components/Button/index.js

@@ -1,4 +1,5 @@
 import { ReactEcs } from '../../react-ecs';
+import { getFont, getTextAlign } from '../Label/utils';
 import { parseUiBackground } from '../uiBackground';
 import { parseUiTransform } from '../uiTransform';
 function getButtonProps(props) {
@@ -21,15 +22,18 @@ function getButtonProps(props) {
  */
 /*#__PURE__*/
 export function Button(props) {
-    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+    const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
     const buttonProps = getButtonProps(props);
     const uiBackgroundProps = parseUiBackground({
         ...buttonProps.uiBackground,
         ...uiBackground
     });
+    const { font, textAlign, ...uiTexProps } = otherProps;
     const textProps = {
         ...buttonProps.uiText,
-        ...uiTextProps
+        ...uiTexProps,
+        ...getFont(font),
+        ...getTextAlign(textAlign)
     };
     const uiTransformProps = parseUiTransform({
         height: 36,

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

@@ -1,7 +1,7 @@
-import { PBUiText } from '@dcl/ecs';
+import { UiLabelProps } from '../Label/types';
 /**
  * @public
  */
-export declare type UiButtonProps = PBUiText & {
+export declare type UiButtonProps = UiLabelProps & {
     type?: 'primary' | 'secondary';
 };

package/dist/components/Dropdown/index.js

@@ -1,12 +1,16 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
+import { getFont, getTextAlign } from '../Label/utils';
 function parseUiDropdown(props) {
+    const { textAlign, font, ...otherProps } = props;
     return {
         acceptEmpty: false,
         options: [],
         selectedIndex: props.acceptEmpty ? -1 : 0,
         disabled: false,
-        ...props
+        ...otherProps,
+        ...getTextAlign(textAlign),
+        ...getFont(font)
     };
 }
 /**

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

@@ -1,7 +1,10 @@
 import { PBUiDropdown } from '@dcl/ecs';
+import { TextAlignType, UiFontType } from '../Label/types';
 /**
  * @public
  */
-export declare type UiDropdownProps = Partial<PBUiDropdown> & {
+export declare type UiDropdownProps = Partial<Omit<PBUiDropdown, 'textAlign' | 'font'>> & {
     onChange?(value: number): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };

package/dist/components/Input/index.js

@@ -1,10 +1,14 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
+import { getTextAlign, getFont } from '../Label/utils';
 function parseUiInput(props) {
+    const { textAlign, font, ...otherProps } = props;
     return {
         disabled: false,
         placeholder: '',
-        ...props
+        ...otherProps,
+        ...getTextAlign(textAlign),
+        ...getFont(font)
     };
 }
 /**

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

@@ -1,7 +1,10 @@
 import { PBUiInput } from '@dcl/ecs';
+import { TextAlignType, UiFontType } from '../Label/types';
 /**
  * @public
  */
-export declare type UiInputProps = PBUiInput & {
+export declare type UiInputProps = Omit<PBUiInput, 'font' | 'textAlign'> & {
     onChange?(value: string): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };

package/dist/components/Label/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactEcs } from '../../react-ecs';
 import { EntityPropTypes } from '../types';
-import { UiTextProps } from './types';
+import { UiLabelProps } from './types';
 /**
  * @public
  */
-export declare function Label(props: EntityPropTypes & UiTextProps): ReactEcs.JSX.Element;
+export declare function Label(props: EntityPropTypes & UiLabelProps): ReactEcs.JSX.Element;

package/dist/components/Label/index.js

@@ -1,5 +1,6 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
+import { getFont, getTextAlign } from './utils';
 /**
  * @public
  */
@@ -12,5 +13,11 @@ export function Label(props) {
         onMouseDown,
         onMouseUp
     });
-    return ReactEcs.createElement("entity", { ...commonProps, uiText: uiTextProps });
+    const { font, textAlign, ...textProps } = uiTextProps;
+    const uiText = {
+        ...textProps,
+        ...getFont(font),
+        ...getTextAlign(textAlign)
+    };
+    return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
 }

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

@@ -2,4 +2,17 @@ import { PBUiText } from '@dcl/ecs';
 /**
  * @public
  */
-export declare type UiTextProps = PBUiText;
+export declare type UiLabelProps = Omit<PBUiText, 'textAlign' | 'font'> & {
+    /** default='middle-center' */
+    textAlign?: TextAlignType | undefined;
+    /** default='sans-serif' */
+    font?: UiFontType | undefined;
+};
+/**
+ * @public
+ */
+export declare type UiFontType = 'sans-serif' | 'serif' | 'monospace';
+/**
+ * @public
+ */
+export declare type TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

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

@@ -0,0 +1 @@
+export {};

package/dist/components/Label/utils.js

@@ -0,0 +1,32 @@
+const parseFont = {
+    'sans-serif': 0 /* Font.F_SANS_SERIF */,
+    serif: 1 /* Font.F_SERIF */,
+    monospace: 2 /* Font.F_MONOSPACE */
+};
+/**
+ * @internal
+ */
+export function getFont(font) {
+    if (!font)
+        return undefined;
+    return { font: parseFont[font] };
+}
+const parseTextAlign = {
+    'top-left': 0 /* TextAlignMode.TAM_TOP_LEFT */,
+    'top-center': 1 /* TextAlignMode.TAM_TOP_CENTER */,
+    'top-right': 2 /* TextAlignMode.TAM_TOP_RIGHT */,
+    'middle-left': 3 /* TextAlignMode.TAM_MIDDLE_LEFT */,
+    'middle-center': 4 /* TextAlignMode.TAM_MIDDLE_CENTER */,
+    'middle-right': 5 /* TextAlignMode.TAM_MIDDLE_RIGHT */,
+    'bottom-left': 6 /* TextAlignMode.TAM_BOTTOM_LEFT */,
+    'bottom-center': 7 /* TextAlignMode.TAM_BOTTOM_CENTER */,
+    'bottom-right': 8 /* TextAlignMode.TAM_BOTTOM_RIGHT */
+};
+/**
+ * @internal
+ */
+export function getTextAlign(textAlign) {
+    if (!textAlign)
+        return undefined;
+    return { textAlign: parseTextAlign[textAlign] };
+}

package/dist/components/uiBackground/index.js

@@ -1,28 +1,4 @@
-function isAvatarTexture(props) {
-    return !!props.avatarTexture;
-}
-function isTexture(props) {
-    return !!props.texture;
-}
-function getTexture(props) {
-    if (isTexture(props) && props.texture) {
-        return {
-            tex: {
-                $case: 'texture',
-                texture: props.texture
-            }
-        };
-    }
-    if (isAvatarTexture(props) && props.avatarTexture) {
-        return {
-            tex: {
-                $case: 'avatarTexture',
-                avatarTexture: props.avatarTexture
-            }
-        };
-    }
-    return undefined;
-}
+import { getTexture, getTextureMode } from './utils';
 /**
  * @public
  */
@@ -33,8 +9,8 @@ export function parseUiBackground(props) {
     const texture = getTexture(props);
     return {
         ...props,
+        ...getTextureMode(props.textureMode),
         uvs: props.uvs ?? [],
-        texture,
-        textureMode: props.textureMode ?? 1 /* BackgroundTextureMode.CENTER */
+        texture
     };
 }

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

@@ -1,8 +1,14 @@
-import { PBUiBackground, Texture, AvatarTexture } from '@dcl/ecs';
+import { BorderRect } from '@dcl/ecs';
+import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 /**
  * @public
  */
-export declare type UiBackgroundProps = Partial<Omit<PBUiBackground, 'texture'>> & UiTextureUnion;
+export declare type UiBackgroundProps = {
+    color?: Color4 | undefined;
+    textureMode?: TextureMode;
+    textureSlices?: BorderRect | undefined;
+    uvs?: number[];
+} & UiTextureUnion;
 /**
  * @public
  */
@@ -11,11 +17,42 @@ export declare type UiTextureUnion = UiAvatarTexture | UiTexture;
  * @public
  */
 export declare type UiAvatarTexture = {
-    avatarTexture?: AvatarTexture;
+    avatarTexture?: {
+        userId: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
 /**
  * @public
  */
 export declare type UiTexture = {
-    texture?: Texture;
+    texture?: {
+        src: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
+/**
+ * @public
+ */
+export declare type TextureWrapType = 'repeat' | 'clamp' | 'mirror' | 'mirror-once';
+/**
+ * @public
+ */
+export declare type TextureFilterType = 'point' | 'bi-linear' | 'tri-linear';
+/**
+ * @public
+  * NINE_SLICES - https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html (Slicing section)
+  * https://forum.unity.com/threads/how-does-slicing-in-ui-tookkit-works.1235863/
+  * https://docs.unity3d.com/Manual/9SliceSprites.html
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
+
+  * CENTER - CENTER enables the texture to be rendered centered in relation to the
+  * element. If the element is smaller than the texture then the background
+  * should use the element as stencil to cut off the out-of-bounds area
+
+  * STRETCH - STRETCH enables the texture to cover all the area of the container,
+  * adopting its aspect ratio.
+ */
+export declare type TextureMode = 'nine-slices' | 'center' | 'stretch';

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

@@ -0,0 +1 @@
+export {};

package/dist/components/uiBackground/utils.js

@@ -0,0 +1,60 @@
+const parseTextureMode = {
+    'nine-slices': 0 /* BackgroundTextureMode.NINE_SLICES */,
+    center: 1 /* BackgroundTextureMode.CENTER */,
+    stretch: 2 /* BackgroundTextureMode.STRETCH */
+};
+/**
+ * @internal
+ */
+export function getTextureMode(mode) {
+    const value = mode
+        ? parseTextureMode[mode]
+        : 1 /* BackgroundTextureMode.CENTER */;
+    return { textureMode: value };
+}
+function isAvatarTexture(props) {
+    return !!props.avatarTexture;
+}
+function isTexture(props) {
+    return !!props.texture;
+}
+/**
+ * @internal
+ */
+export function getTexture(props) {
+    if (isTexture(props) && props.texture) {
+        return {
+            tex: {
+                $case: 'texture',
+                texture: parseTexture(props.texture)
+            }
+        };
+    }
+    if (isAvatarTexture(props) && props.avatarTexture) {
+        return {
+            tex: {
+                $case: 'avatarTexture',
+                avatarTexture: parseTexture(props.avatarTexture)
+            }
+        };
+    }
+    return undefined;
+}
+function parseTexture(texture) {
+    return {
+        ...texture,
+        wrapMode: texture.wrapMode ? parseWrap[texture.wrapMode] : undefined,
+        filterMode: texture.filterMode ? parseFilter[texture.filterMode] : undefined
+    };
+}
+const parseWrap = {
+    repeat: 0 /* TextureWrapMode.TWM_REPEAT */,
+    clamp: 1 /* TextureWrapMode.TWM_CLAMP */,
+    mirror: 2 /* TextureWrapMode.TWM_MIRROR */,
+    'mirror-once': 3 /* TextureWrapMode.TWM_MIRROR_ONCE */
+};
+const parseFilter = {
+    point: 0 /* TextureFilterMode.TFM_POINT */,
+    'bi-linear': 1 /* TextureFilterMode.TFM_BILINEAR */,
+    'tri-linear': 2 /* TextureFilterMode.TFM_TRILINEAR */
+};

package/dist/components/uiTransform/index.js

@@ -1,9 +1,8 @@
-import { parsePosition, parseSize } from './utils';
+import { getAlign, getFlexDirection, getDisplay, getFlexWrap, getJustify, getOverflow, getPoistionType, parsePosition, parseSize } from './utils';
 export const CANVAS_ROOT_ENTITY = 0;
 const defaultUiTransform = {
     parent: CANVAS_ROOT_ENTITY,
     rightOf: 0,
-    display: 0 /* YGDisplay.YGD_FLEX */,
     flexBasis: 0,
     width: 0,
     height: 0,
@@ -11,10 +10,6 @@ const defaultUiTransform = {
     minHeight: 0,
     maxWidth: 0,
     maxHeight: 0,
-    justifyContent: 0 /* YGJustify.YGJ_FLEX_START */,
-    alignSelf: 0 /* YGAlign.YGA_AUTO */,
-    flexDirection: 0 /* YGFlexDirection.YGFD_ROW */,
-    positionType: 0 /* YGPositionType.YGPT_RELATIVE */,
     flexGrow: 0,
     marginBottom: 0,
     marginBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
@@ -28,9 +23,8 @@ const defaultUiTransform = {
     maxWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     minHeightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     minWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
-    overflow: 0 /* YGOverflow.YGO_VISIBLE */,
     paddingBottom: 0,
-    paddingBottomUnit: 2 /* YGUnit.YGU_PERCENT */,
+    paddingBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     paddingLeft: 0,
     paddingLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
     paddingTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
@@ -54,18 +48,27 @@ const defaultUiTransform = {
  */
 /*#__PURE__*/
 export function parseUiTransform(props = {}) {
-    const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
-        ...parsePosition(position, 'position'),
-        ...parsePosition(margin, 'margin'),
-        ...parsePosition(padding, 'padding'),
-        ...parseSize(height, 'height'),
-        ...parseSize(minHeight, 'minHeight'),
-        ...parseSize(maxHeight, 'maxHeight'),
-        ...parseSize(width, 'width'),
-        ...parseSize(minWidth, 'minWidth'),
-        ...parseSize(maxWidth, 'maxWidth')
+        ...parsePosition(props.position, 'position'),
+        ...parsePosition(props.margin, 'margin'),
+        ...parsePosition(props.padding, 'padding'),
+        ...parseSize(props.height, 'height'),
+        ...parseSize(props.minHeight, 'minHeight'),
+        ...parseSize(props.maxHeight, 'maxHeight'),
+        ...parseSize(props.width, 'width'),
+        ...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 */),
+        ...getJustify(props.justifyContent),
+        ...getFlexDirection(props.flexDirection),
+        ...getFlexWrap(props.flexWrap),
+        ...getOverflow(props.overflow),
+        ...getPoistionType(props.positionType)
     };
 }

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

@@ -1,4 +1,3 @@
-import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGWrap } from '@dcl/ecs';
 export declare type PositionUnit = `${number}px` | `${number}%` | number;
 /**
  * @public
@@ -9,18 +8,46 @@ export declare type Position = {
     bottom: PositionUnit;
     left: PositionUnit;
 };
+/**
+ * @public
+ */
+export declare type DisplayType = 'flex' | 'none';
+/**
+ * @public
+ */
+export declare type JustifyType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * @public
+ */
+export declare type AlignType = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around';
+/**
+ * @public
+ */
+export declare type FlexDirectionType = 'row' | 'column' | 'column-reverse' | 'row-reverse';
+/**
+ * @public
+ */
+export declare type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
+/**
+ * @public
+ */
+export declare type OverflowType = 'hidden' | 'scroll' | 'visible';
+/**
+ * @public
+ */
+export declare type PositionType = 'absolute' | 'relative';
 /**
  * @public
  */
 export interface UiTransformProps {
-    display?: YGDisplay;
+    display?: DisplayType;
     flex?: number;
-    justifyContent?: YGJustify;
-    positionType?: YGPositionType;
-    alignItems?: YGAlign;
-    alignSelf?: YGAlign;
-    alignContent?: YGAlign;
-    flexDirection?: YGFlexDirection;
+    justifyContent?: JustifyType;
+    positionType?: PositionType;
+    alignItems?: AlignType;
+    alignSelf?: AlignType;
+    alignContent?: AlignType;
+    flexDirection?: FlexDirectionType;
     position?: Partial<Position>;
     padding?: Partial<Position>;
     margin?: Partial<Position>;
@@ -30,9 +57,9 @@ export interface UiTransformProps {
     maxWidth?: PositionUnit;
     minHeight?: PositionUnit;
     maxHeight?: PositionUnit;
-    flexWrap?: YGWrap;
+    flexWrap?: FlexWrapType;
     flexBasis?: number;
     flexGrow?: number;
     flexShrink?: number;
-    overflow?: YGOverflow;
+    overflow?: OverflowType;
 }

package/dist/components/uiTransform/utils.js

@@ -50,3 +50,102 @@ export function parseSize(val, key) {
         [unitKey]: unit
     };
 }
+/**
+ * @internal
+ */
+export function getDisplay(display) {
+    const value = display ? parseDisplay[display] : 0 /* YGDisplay.YGD_FLEX */;
+    return { display: value };
+}
+const parseDisplay = {
+    flex: 0 /* YGDisplay.YGD_FLEX */,
+    none: 1 /* YGDisplay.YGD_NONE */
+};
+/**
+ * @internal
+ */
+export function getJustify(justify) {
+    const value = justify
+        ? parseJustify[justify]
+        : 0 /* YGJustify.YGJ_FLEX_START */;
+    return { justifyContent: value };
+}
+const parseJustify = {
+    center: 1 /* YGJustify.YGJ_CENTER */,
+    'flex-end': 2 /* YGJustify.YGJ_FLEX_END */,
+    'flex-start': 0 /* YGJustify.YGJ_FLEX_START */,
+    'space-around': 4 /* YGJustify.YGJ_SPACE_AROUND */,
+    'space-between': 3 /* YGJustify.YGJ_SPACE_BETWEEN */,
+    'space-evenly': 5 /* YGJustify.YGJ_SPACE_EVENLY */
+};
+/**
+ * @internal
+ */
+export function getAlign(prop, align, defaultValue) {
+    const value = align ? parseAligns[align] : defaultValue;
+    return { [prop]: value };
+}
+const parseAligns = {
+    auto: 0 /* YGAlign.YGA_AUTO */,
+    baseline: 5 /* YGAlign.YGA_BASELINE */,
+    center: 2 /* YGAlign.YGA_CENTER */,
+    'flex-end': 3 /* YGAlign.YGA_FLEX_END */,
+    'flex-start': 1 /* YGAlign.YGA_FLEX_START */,
+    stretch: 4 /* YGAlign.YGA_STRETCH */,
+    'space-between': 6 /* YGAlign.YGA_SPACE_BETWEEN */,
+    'space-around': 7 /* YGAlign.YGA_SPACE_AROUND */
+};
+/**
+ * @internal
+ */
+export function getFlexDirection(flexDirection) {
+    const value = flexDirection
+        ? parseFlexDirection[flexDirection]
+        : 0 /* YGFlexDirection.YGFD_ROW */;
+    return { flexDirection: value };
+}
+const parseFlexDirection = {
+    row: 0 /* YGFlexDirection.YGFD_ROW */,
+    column: 1 /* YGFlexDirection.YGFD_COLUMN */,
+    'row-reverse': 3 /* YGFlexDirection.YGFD_ROW_REVERSE */,
+    'column-reverse': 2 /* YGFlexDirection.YGFD_COLUMN_REVERSE */
+};
+/**
+ * @internal
+ */
+export function getFlexWrap(flexWrap) {
+    const value = flexWrap ? parseFlexWrap[flexWrap] : 1 /* YGWrap.YGW_WRAP */;
+    return { flexWrap: value };
+}
+const parseFlexWrap = {
+    wrap: 1 /* YGWrap.YGW_WRAP */,
+    nowrap: 0 /* YGWrap.YGW_NO_WRAP */,
+    'wrap-reverse': 2 /* YGWrap.YGW_WRAP_REVERSE */
+};
+/**
+ * @internal
+ */
+export function getOverflow(overflow) {
+    const value = overflow
+        ? parseOverflow[overflow]
+        : 0 /* YGOverflow.YGO_VISIBLE */;
+    return { overflow: value };
+}
+const parseOverflow = {
+    visible: 0 /* YGOverflow.YGO_VISIBLE */,
+    scroll: 2 /* YGOverflow.YGO_SCROLL */,
+    hidden: 1 /* YGOverflow.YGO_HIDDEN */
+};
+/**
+ * @internal
+ */
+export function getPoistionType(position) {
+    const value = position
+        ? parsePositionType[position]
+        : 0 /* YGPositionType.YGPT_RELATIVE */;
+    return { positionType: value };
+}
+const parsePositionType = {
+    relative: 0 /* YGPositionType.YGPT_RELATIVE */,
+    absolute: 1 /* YGPositionType.YGPT_ABSOLUTE */
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/react-ecs",
-  "version": "7.0.6-3942933325.commit-70f967f",
+  "version": "7.0.6-3987590195.commit-4fc1536",
   "description": "Decentraland ECS",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -42,5 +42,5 @@
     "displayName": "React ECS",
     "tsconfig": "./tsconfig.json"
   },
-  "commit": "70f967f506b6e27be0877901c693a1d5089b1bf4"
+  "commit": "4fc1536e9bdd2501b3d9918ec7345084f7a49aca"
 }