@dcl/react-ecs 7.7.10-14035313559.commit-093b171 → 7.8.0

package/dist/components/uiTransform/index.js

@@ -1,4 +1,4 @@
-import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parsePosition, parseSize } from './utils';
+import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, parsePosition, parseSize } from './utils';
 /**
  * @internal
  */
@@ -58,7 +58,7 @@ const defaultUiTransform = {
  */
 /* @__PURE__ */
 export function parseUiTransform(props = {}) {
-    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
+    const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, ...otherProps } = props;
     return {
         ...defaultUiTransform,
         ...otherProps,
@@ -81,6 +81,9 @@ export function parseUiTransform(props = {}) {
         // Optional values
         ...(alignContent && getAlign('alignContent', alignContent)),
         ...(alignItems && getAlign('alignItems', alignItems)),
-        ...(flexWrap && getFlexWrap(flexWrap))
+        ...(flexWrap && getFlexWrap(flexWrap)),
+        ...(borderRadius && parseBorderRadius(borderRadius)),
+        ...(borderWidth && parseBorderWidth(borderWidth)),
+        ...(borderColor && parseBorderColor(borderColor))
     };
 }

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

@@ -1,3 +1,4 @@
+import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
 import { ScaleUnit } from '../types';
 /**
  * unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
@@ -27,6 +28,16 @@ export interface Position {
     bottom: PositionUnit;
     left: PositionUnit;
 }
+/**
+ * Type used for defining the border radius of the element
+ * @public
+ */
+export interface BorderRadius {
+    topLeft: PositionUnit;
+    topRight: PositionUnit;
+    bottomLeft: PositionUnit;
+    bottomRight: PositionUnit;
+}
 /**
  * @public
  */
@@ -113,4 +124,7 @@ export interface UiTransformProps {
     overflow?: OverflowType;
     /** The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property) **/
     pointerFilter?: PointerFilterType;
+    borderColor?: Record<keyof Partial<Position>, Color4> | Color4 | undefined;
+    borderRadius?: Partial<BorderRadius> | PositionUnit;
+    borderWidth?: Partial<Position> | PositionUnit;
 }

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

@@ -1,6 +1,7 @@
 import { YGUnit } from '@dcl/ecs';
-import { Position, PositionUnit, PositionShorthand } from './types';
-type PropName = 'position' | 'margin' | 'padding';
+import { Position, PositionUnit, PositionShorthand, BorderRadius, UiTransformProps } from './types';
+import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
+type PropName = 'position' | 'margin' | 'padding' | 'borderWidth';
 type PropKey = `${PropName}${Capitalize<keyof Position>}`;
 type PropKeyUnit = `${PropName}${Capitalize<keyof Position>}Unit`;
 type PositionParsed = {
@@ -8,6 +9,26 @@ type PositionParsed = {
 } & {
     [key in PropKeyUnit]?: YGUnit;
 };
+type BorderProp = `border${Capitalize<keyof BorderRadius>}Radius`;
+type BorderPropUnit = `${BorderProp}Unit`;
+type BorderProps = {
+    [key in BorderProp]?: number;
+} & {
+    [key in BorderPropUnit]?: YGUnit;
+};
+export declare function parseBorderRadius(radius: Partial<BorderRadius> | PositionUnit): BorderProps | undefined;
+type BorderKey = Record<keyof Position, number>;
+type BorderWidthProp = `border${Capitalize<keyof BorderKey>}Width`;
+type BorderWidthPropUnit = `${BorderWidthProp}Unit`;
+type BorderWidthProps = {
+    [key in BorderWidthProp]?: number;
+} & {
+    [key in BorderWidthPropUnit]?: YGUnit;
+};
+export declare function parseBorderWidth(borderWidth: Partial<Position> | PositionUnit): BorderWidthProps | undefined;
+type BorderColor = Record<keyof Position, Color4>;
+type BorderColorKey = `border${Capitalize<keyof BorderColor>}Color`;
+export declare function parseBorderColor(borderColor: UiTransformProps['borderColor']): Record<BorderColorKey, Color4> | undefined;
 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>}`;

package/dist/components/uiTransform/utils.js

@@ -38,6 +38,63 @@ function parsePositionUnit(val) {
     }
     return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
 }
+export function parseBorderRadius(radius) {
+    if (typeof radius === 'object') {
+        const obj = {};
+        for (const key in radius) {
+            const typedKey = key;
+            const propKey = `border${capitalize(typedKey)}Radius`;
+            const propKeyUnit = `${propKey}Unit`;
+            const [value, unit] = parsePositionUnit(radius[typedKey]);
+            if (value === undefined)
+                continue;
+            obj[propKeyUnit] = unit;
+            obj[propKey] = value;
+        }
+        return obj;
+    }
+    if (typeof radius === 'number') {
+        return parseBorderRadius({ topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius });
+    }
+}
+export function parseBorderWidth(borderWidth) {
+    if (typeof borderWidth === 'object') {
+        const obj = {};
+        for (const key in borderWidth) {
+            const typedKey = key;
+            const propKey = `border${capitalize(typedKey)}Width`;
+            const propKeyUnit = `${propKey}Unit`;
+            const [value, unit] = parsePositionUnit(borderWidth[typedKey]);
+            if (value === undefined)
+                continue;
+            obj[propKeyUnit] = unit;
+            obj[propKey] = value;
+        }
+        return obj;
+    }
+    if (typeof borderWidth === 'number') {
+        return parseBorderWidth({ top: borderWidth, left: borderWidth, right: borderWidth, bottom: borderWidth });
+    }
+}
+const isColor = (v) => {
+    if (v.b !== undefined)
+        return true;
+    return false;
+};
+export function parseBorderColor(borderColor) {
+    if (isColor(borderColor)) {
+        return parseBorderColor({ top: borderColor, left: borderColor, right: borderColor, bottom: borderColor });
+    }
+    if (typeof borderColor === 'object') {
+        const obj = {};
+        for (const key in borderColor) {
+            const typedKey = key;
+            const propKey = `border${capitalize(typedKey)}Color`;
+            obj[propKey] = borderColor[typedKey];
+        }
+        return obj;
+    }
+}
 export function parsePosition(position = {}, prop) {
     if (typeof position === 'object') {
         const obj = {};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.7.10-14035313559.commit-093b171",
+  "version": "7.8.0",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.7.10-14035313559.commit-093b171",
+    "@dcl/ecs": "7.8.0",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -40,5 +40,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "093b17104c69083d287b85ca346177a098d3d108"
+  "commit": "8d32240be828682a0e97b38c9e8a298d51eb5dcd"
 }