@dcl/react-ecs 7.0.6-3939099974.commit-727d673 → 7.0.6-3987590195.commit-4fc1536
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/index.js +6 -2
- package/dist/components/Button/types.d.ts +2 -2
- package/dist/components/Dropdown/index.js +5 -1
- package/dist/components/Dropdown/types.d.ts +4 -1
- package/dist/components/Input/index.js +5 -1
- package/dist/components/Input/types.d.ts +4 -1
- package/dist/components/Label/index.d.ts +2 -2
- package/dist/components/Label/index.js +8 -1
- package/dist/components/Label/types.d.ts +14 -1
- package/dist/components/Label/utils.d.ts +1 -0
- package/dist/components/Label/utils.js +32 -0
- package/dist/components/uiBackground/index.js +3 -27
- package/dist/components/uiBackground/types.d.ts +41 -4
- package/dist/components/uiBackground/utils.d.ts +1 -0
- package/dist/components/uiBackground/utils.js +60 -0
- package/dist/components/uiTransform/index.js +21 -18
- package/dist/components/uiTransform/types.d.ts +37 -10
- package/dist/components/uiTransform/utils.js +99 -0
- package/dist/reconciler/index.js +7 -7
- package/package.json +2 -2
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ReactEcs } from '../../react-ecs';
|
|
2
|
+
import { getFont, getTextAlign } from '../Label/utils';
|
|
2
3
|
import { parseUiBackground } from '../uiBackground';
|
|
3
4
|
import { parseUiTransform } from '../uiTransform';
|
|
4
5
|
function getButtonProps(props) {
|
|
@@ -21,15 +22,18 @@ function getButtonProps(props) {
|
|
|
21
22
|
*/
|
|
22
23
|
/*#__PURE__*/
|
|
23
24
|
export function Button(props) {
|
|
24
|
-
const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...
|
|
25
|
+
const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
|
|
25
26
|
const buttonProps = getButtonProps(props);
|
|
26
27
|
const uiBackgroundProps = parseUiBackground({
|
|
27
28
|
...buttonProps.uiBackground,
|
|
28
29
|
...uiBackground
|
|
29
30
|
});
|
|
31
|
+
const { font, textAlign, ...uiTexProps } = otherProps;
|
|
30
32
|
const textProps = {
|
|
31
33
|
...buttonProps.uiText,
|
|
32
|
-
...
|
|
34
|
+
...uiTexProps,
|
|
35
|
+
...getFont(font),
|
|
36
|
+
...getTextAlign(textAlign)
|
|
33
37
|
};
|
|
34
38
|
const uiTransformProps = parseUiTransform({
|
|
35
39
|
height: 36,
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { parseProps } from '../utils';
|
|
2
2
|
import { ReactEcs } from '../../react-ecs';
|
|
3
|
+
import { getFont, getTextAlign } from '../Label/utils';
|
|
3
4
|
function parseUiDropdown(props) {
|
|
5
|
+
const { textAlign, font, ...otherProps } = props;
|
|
4
6
|
return {
|
|
5
7
|
acceptEmpty: false,
|
|
6
8
|
options: [],
|
|
7
9
|
selectedIndex: props.acceptEmpty ? -1 : 0,
|
|
8
10
|
disabled: false,
|
|
9
|
-
...
|
|
11
|
+
...otherProps,
|
|
12
|
+
...getTextAlign(textAlign),
|
|
13
|
+
...getFont(font)
|
|
10
14
|
};
|
|
11
15
|
}
|
|
12
16
|
/**
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { PBUiDropdown } from '@dcl/ecs';
|
|
2
|
+
import { TextAlignType, UiFontType } from '../Label/types';
|
|
2
3
|
/**
|
|
3
4
|
* @public
|
|
4
5
|
*/
|
|
5
|
-
export declare type UiDropdownProps = Partial<PBUiDropdown
|
|
6
|
+
export declare type UiDropdownProps = Partial<Omit<PBUiDropdown, 'textAlign' | 'font'>> & {
|
|
6
7
|
onChange?(value: number): void;
|
|
8
|
+
font?: UiFontType;
|
|
9
|
+
textAlign?: TextAlignType;
|
|
7
10
|
};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { parseProps } from '../utils';
|
|
2
2
|
import { ReactEcs } from '../../react-ecs';
|
|
3
|
+
import { getTextAlign, getFont } from '../Label/utils';
|
|
3
4
|
function parseUiInput(props) {
|
|
5
|
+
const { textAlign, font, ...otherProps } = props;
|
|
4
6
|
return {
|
|
5
7
|
disabled: false,
|
|
6
8
|
placeholder: '',
|
|
7
|
-
...
|
|
9
|
+
...otherProps,
|
|
10
|
+
...getTextAlign(textAlign),
|
|
11
|
+
...getFont(font)
|
|
8
12
|
};
|
|
9
13
|
}
|
|
10
14
|
/**
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { PBUiInput } from '@dcl/ecs';
|
|
2
|
+
import { TextAlignType, UiFontType } from '../Label/types';
|
|
2
3
|
/**
|
|
3
4
|
* @public
|
|
4
5
|
*/
|
|
5
|
-
export declare type UiInputProps = PBUiInput & {
|
|
6
|
+
export declare type UiInputProps = Omit<PBUiInput, 'font' | 'textAlign'> & {
|
|
6
7
|
onChange?(value: string): void;
|
|
8
|
+
font?: UiFontType;
|
|
9
|
+
textAlign?: TextAlignType;
|
|
7
10
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactEcs } from '../../react-ecs';
|
|
2
2
|
import { EntityPropTypes } from '../types';
|
|
3
|
-
import {
|
|
3
|
+
import { UiLabelProps } from './types';
|
|
4
4
|
/**
|
|
5
5
|
* @public
|
|
6
6
|
*/
|
|
7
|
-
export declare function Label(props: EntityPropTypes &
|
|
7
|
+
export declare function Label(props: EntityPropTypes & UiLabelProps): ReactEcs.JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { parseProps } from '../utils';
|
|
2
2
|
import { ReactEcs } from '../../react-ecs';
|
|
3
|
+
import { getFont, getTextAlign } from './utils';
|
|
3
4
|
/**
|
|
4
5
|
* @public
|
|
5
6
|
*/
|
|
@@ -12,5 +13,11 @@ export function Label(props) {
|
|
|
12
13
|
onMouseDown,
|
|
13
14
|
onMouseUp
|
|
14
15
|
});
|
|
15
|
-
|
|
16
|
+
const { font, textAlign, ...textProps } = uiTextProps;
|
|
17
|
+
const uiText = {
|
|
18
|
+
...textProps,
|
|
19
|
+
...getFont(font),
|
|
20
|
+
...getTextAlign(textAlign)
|
|
21
|
+
};
|
|
22
|
+
return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
|
|
16
23
|
}
|
|
@@ -2,4 +2,17 @@ import { PBUiText } from '@dcl/ecs';
|
|
|
2
2
|
/**
|
|
3
3
|
* @public
|
|
4
4
|
*/
|
|
5
|
-
export declare type
|
|
5
|
+
export declare type UiLabelProps = Omit<PBUiText, 'textAlign' | 'font'> & {
|
|
6
|
+
/** default='middle-center' */
|
|
7
|
+
textAlign?: TextAlignType | undefined;
|
|
8
|
+
/** default='sans-serif' */
|
|
9
|
+
font?: UiFontType | undefined;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
export declare type UiFontType = 'sans-serif' | 'serif' | 'monospace';
|
|
15
|
+
/**
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export declare type TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const parseFont = {
|
|
2
|
+
'sans-serif': 0 /* Font.F_SANS_SERIF */,
|
|
3
|
+
serif: 1 /* Font.F_SERIF */,
|
|
4
|
+
monospace: 2 /* Font.F_MONOSPACE */
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
export function getFont(font) {
|
|
10
|
+
if (!font)
|
|
11
|
+
return undefined;
|
|
12
|
+
return { font: parseFont[font] };
|
|
13
|
+
}
|
|
14
|
+
const parseTextAlign = {
|
|
15
|
+
'top-left': 0 /* TextAlignMode.TAM_TOP_LEFT */,
|
|
16
|
+
'top-center': 1 /* TextAlignMode.TAM_TOP_CENTER */,
|
|
17
|
+
'top-right': 2 /* TextAlignMode.TAM_TOP_RIGHT */,
|
|
18
|
+
'middle-left': 3 /* TextAlignMode.TAM_MIDDLE_LEFT */,
|
|
19
|
+
'middle-center': 4 /* TextAlignMode.TAM_MIDDLE_CENTER */,
|
|
20
|
+
'middle-right': 5 /* TextAlignMode.TAM_MIDDLE_RIGHT */,
|
|
21
|
+
'bottom-left': 6 /* TextAlignMode.TAM_BOTTOM_LEFT */,
|
|
22
|
+
'bottom-center': 7 /* TextAlignMode.TAM_BOTTOM_CENTER */,
|
|
23
|
+
'bottom-right': 8 /* TextAlignMode.TAM_BOTTOM_RIGHT */
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* @internal
|
|
27
|
+
*/
|
|
28
|
+
export function getTextAlign(textAlign) {
|
|
29
|
+
if (!textAlign)
|
|
30
|
+
return undefined;
|
|
31
|
+
return { textAlign: parseTextAlign[textAlign] };
|
|
32
|
+
}
|
|
@@ -1,28 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
return !!props.avatarTexture;
|
|
3
|
-
}
|
|
4
|
-
function isTexture(props) {
|
|
5
|
-
return !!props.texture;
|
|
6
|
-
}
|
|
7
|
-
function getTexture(props) {
|
|
8
|
-
if (isTexture(props) && props.texture) {
|
|
9
|
-
return {
|
|
10
|
-
tex: {
|
|
11
|
-
$case: 'texture',
|
|
12
|
-
texture: props.texture
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
if (isAvatarTexture(props) && props.avatarTexture) {
|
|
17
|
-
return {
|
|
18
|
-
tex: {
|
|
19
|
-
$case: 'avatarTexture',
|
|
20
|
-
avatarTexture: props.avatarTexture
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
return undefined;
|
|
25
|
-
}
|
|
1
|
+
import { getTexture, getTextureMode } from './utils';
|
|
26
2
|
/**
|
|
27
3
|
* @public
|
|
28
4
|
*/
|
|
@@ -33,8 +9,8 @@ export function parseUiBackground(props) {
|
|
|
33
9
|
const texture = getTexture(props);
|
|
34
10
|
return {
|
|
35
11
|
...props,
|
|
12
|
+
...getTextureMode(props.textureMode),
|
|
36
13
|
uvs: props.uvs ?? [],
|
|
37
|
-
texture
|
|
38
|
-
textureMode: props.textureMode ?? 1 /* BackgroundTextureMode.CENTER */
|
|
14
|
+
texture
|
|
39
15
|
};
|
|
40
16
|
}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BorderRect } from '@dcl/ecs';
|
|
2
|
+
import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
|
|
2
3
|
/**
|
|
3
4
|
* @public
|
|
4
5
|
*/
|
|
5
|
-
export declare type UiBackgroundProps =
|
|
6
|
+
export declare type UiBackgroundProps = {
|
|
7
|
+
color?: Color4 | undefined;
|
|
8
|
+
textureMode?: TextureMode;
|
|
9
|
+
textureSlices?: BorderRect | undefined;
|
|
10
|
+
uvs?: number[];
|
|
11
|
+
} & UiTextureUnion;
|
|
6
12
|
/**
|
|
7
13
|
* @public
|
|
8
14
|
*/
|
|
@@ -11,11 +17,42 @@ export declare type UiTextureUnion = UiAvatarTexture | UiTexture;
|
|
|
11
17
|
* @public
|
|
12
18
|
*/
|
|
13
19
|
export declare type UiAvatarTexture = {
|
|
14
|
-
avatarTexture?:
|
|
20
|
+
avatarTexture?: {
|
|
21
|
+
userId: string;
|
|
22
|
+
wrapMode?: TextureWrapType;
|
|
23
|
+
filterMode?: TextureFilterType;
|
|
24
|
+
};
|
|
15
25
|
};
|
|
16
26
|
/**
|
|
17
27
|
* @public
|
|
18
28
|
*/
|
|
19
29
|
export declare type UiTexture = {
|
|
20
|
-
texture?:
|
|
30
|
+
texture?: {
|
|
31
|
+
src: string;
|
|
32
|
+
wrapMode?: TextureWrapType;
|
|
33
|
+
filterMode?: TextureFilterType;
|
|
34
|
+
};
|
|
21
35
|
};
|
|
36
|
+
/**
|
|
37
|
+
* @public
|
|
38
|
+
*/
|
|
39
|
+
export declare type TextureWrapType = 'repeat' | 'clamp' | 'mirror' | 'mirror-once';
|
|
40
|
+
/**
|
|
41
|
+
* @public
|
|
42
|
+
*/
|
|
43
|
+
export declare type TextureFilterType = 'point' | 'bi-linear' | 'tri-linear';
|
|
44
|
+
/**
|
|
45
|
+
* @public
|
|
46
|
+
* NINE_SLICES - https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html (Slicing section)
|
|
47
|
+
* https://forum.unity.com/threads/how-does-slicing-in-ui-tookkit-works.1235863/
|
|
48
|
+
* https://docs.unity3d.com/Manual/9SliceSprites.html
|
|
49
|
+
* https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
|
|
50
|
+
|
|
51
|
+
* CENTER - CENTER enables the texture to be rendered centered in relation to the
|
|
52
|
+
* element. If the element is smaller than the texture then the background
|
|
53
|
+
* should use the element as stencil to cut off the out-of-bounds area
|
|
54
|
+
|
|
55
|
+
* STRETCH - STRETCH enables the texture to cover all the area of the container,
|
|
56
|
+
* adopting its aspect ratio.
|
|
57
|
+
*/
|
|
58
|
+
export declare type TextureMode = 'nine-slices' | 'center' | 'stretch';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
const parseTextureMode = {
|
|
2
|
+
'nine-slices': 0 /* BackgroundTextureMode.NINE_SLICES */,
|
|
3
|
+
center: 1 /* BackgroundTextureMode.CENTER */,
|
|
4
|
+
stretch: 2 /* BackgroundTextureMode.STRETCH */
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* @internal
|
|
8
|
+
*/
|
|
9
|
+
export function getTextureMode(mode) {
|
|
10
|
+
const value = mode
|
|
11
|
+
? parseTextureMode[mode]
|
|
12
|
+
: 1 /* BackgroundTextureMode.CENTER */;
|
|
13
|
+
return { textureMode: value };
|
|
14
|
+
}
|
|
15
|
+
function isAvatarTexture(props) {
|
|
16
|
+
return !!props.avatarTexture;
|
|
17
|
+
}
|
|
18
|
+
function isTexture(props) {
|
|
19
|
+
return !!props.texture;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* @internal
|
|
23
|
+
*/
|
|
24
|
+
export function getTexture(props) {
|
|
25
|
+
if (isTexture(props) && props.texture) {
|
|
26
|
+
return {
|
|
27
|
+
tex: {
|
|
28
|
+
$case: 'texture',
|
|
29
|
+
texture: parseTexture(props.texture)
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
if (isAvatarTexture(props) && props.avatarTexture) {
|
|
34
|
+
return {
|
|
35
|
+
tex: {
|
|
36
|
+
$case: 'avatarTexture',
|
|
37
|
+
avatarTexture: parseTexture(props.avatarTexture)
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
return undefined;
|
|
42
|
+
}
|
|
43
|
+
function parseTexture(texture) {
|
|
44
|
+
return {
|
|
45
|
+
...texture,
|
|
46
|
+
wrapMode: texture.wrapMode ? parseWrap[texture.wrapMode] : undefined,
|
|
47
|
+
filterMode: texture.filterMode ? parseFilter[texture.filterMode] : undefined
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
const parseWrap = {
|
|
51
|
+
repeat: 0 /* TextureWrapMode.TWM_REPEAT */,
|
|
52
|
+
clamp: 1 /* TextureWrapMode.TWM_CLAMP */,
|
|
53
|
+
mirror: 2 /* TextureWrapMode.TWM_MIRROR */,
|
|
54
|
+
'mirror-once': 3 /* TextureWrapMode.TWM_MIRROR_ONCE */
|
|
55
|
+
};
|
|
56
|
+
const parseFilter = {
|
|
57
|
+
point: 0 /* TextureFilterMode.TFM_POINT */,
|
|
58
|
+
'bi-linear': 1 /* TextureFilterMode.TFM_BILINEAR */,
|
|
59
|
+
'tri-linear': 2 /* TextureFilterMode.TFM_TRILINEAR */
|
|
60
|
+
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { parsePosition, parseSize } from './utils';
|
|
1
|
+
import { getAlign, getFlexDirection, getDisplay, getFlexWrap, getJustify, getOverflow, getPoistionType, parsePosition, parseSize } from './utils';
|
|
2
2
|
export const CANVAS_ROOT_ENTITY = 0;
|
|
3
3
|
const defaultUiTransform = {
|
|
4
4
|
parent: CANVAS_ROOT_ENTITY,
|
|
5
5
|
rightOf: 0,
|
|
6
|
-
display: 0 /* YGDisplay.YGD_FLEX */,
|
|
7
6
|
flexBasis: 0,
|
|
8
7
|
width: 0,
|
|
9
8
|
height: 0,
|
|
@@ -11,10 +10,6 @@ const defaultUiTransform = {
|
|
|
11
10
|
minHeight: 0,
|
|
12
11
|
maxWidth: 0,
|
|
13
12
|
maxHeight: 0,
|
|
14
|
-
justifyContent: 0 /* YGJustify.YGJ_FLEX_START */,
|
|
15
|
-
alignSelf: 0 /* YGAlign.YGA_AUTO */,
|
|
16
|
-
flexDirection: 0 /* YGFlexDirection.YGFD_ROW */,
|
|
17
|
-
positionType: 0 /* YGPositionType.YGPT_RELATIVE */,
|
|
18
13
|
flexGrow: 0,
|
|
19
14
|
marginBottom: 0,
|
|
20
15
|
marginBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
@@ -28,9 +23,8 @@ const defaultUiTransform = {
|
|
|
28
23
|
maxWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
29
24
|
minHeightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
30
25
|
minWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
31
|
-
overflow: 0 /* YGOverflow.YGO_VISIBLE */,
|
|
32
26
|
paddingBottom: 0,
|
|
33
|
-
paddingBottomUnit:
|
|
27
|
+
paddingBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
34
28
|
paddingLeft: 0,
|
|
35
29
|
paddingLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
36
30
|
paddingTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
@@ -54,18 +48,27 @@ const defaultUiTransform = {
|
|
|
54
48
|
*/
|
|
55
49
|
/*#__PURE__*/
|
|
56
50
|
export function parseUiTransform(props = {}) {
|
|
57
|
-
const {
|
|
51
|
+
const { height, minHeight, maxHeight, width, minWidth, maxWidth, ...otherProps } = props;
|
|
58
52
|
return {
|
|
59
53
|
...defaultUiTransform,
|
|
60
54
|
...otherProps,
|
|
61
|
-
...parsePosition(position, 'position'),
|
|
62
|
-
...parsePosition(margin, 'margin'),
|
|
63
|
-
...parsePosition(padding, 'padding'),
|
|
64
|
-
...parseSize(height, 'height'),
|
|
65
|
-
...parseSize(minHeight, 'minHeight'),
|
|
66
|
-
...parseSize(maxHeight, 'maxHeight'),
|
|
67
|
-
...parseSize(width, 'width'),
|
|
68
|
-
...parseSize(minWidth, 'minWidth'),
|
|
69
|
-
...parseSize(maxWidth, 'maxWidth')
|
|
55
|
+
...parsePosition(props.position, 'position'),
|
|
56
|
+
...parsePosition(props.margin, 'margin'),
|
|
57
|
+
...parsePosition(props.padding, 'padding'),
|
|
58
|
+
...parseSize(props.height, 'height'),
|
|
59
|
+
...parseSize(props.minHeight, 'minHeight'),
|
|
60
|
+
...parseSize(props.maxHeight, 'maxHeight'),
|
|
61
|
+
...parseSize(props.width, 'width'),
|
|
62
|
+
...parseSize(props.minWidth, 'minWidth'),
|
|
63
|
+
...parseSize(props.maxWidth, 'maxWidth'),
|
|
64
|
+
...getDisplay(props.display),
|
|
65
|
+
...getAlign('alignContent', props.alignContent, 1 /* YGAlign.YGA_FLEX_START */),
|
|
66
|
+
...getAlign('alignSelf', props.alignSelf, 1 /* YGAlign.YGA_FLEX_START */),
|
|
67
|
+
...getAlign('alignItems', props.alignItems, 1 /* YGAlign.YGA_FLEX_START */),
|
|
68
|
+
...getJustify(props.justifyContent),
|
|
69
|
+
...getFlexDirection(props.flexDirection),
|
|
70
|
+
...getFlexWrap(props.flexWrap),
|
|
71
|
+
...getOverflow(props.overflow),
|
|
72
|
+
...getPoistionType(props.positionType)
|
|
70
73
|
};
|
|
71
74
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGWrap } from '@dcl/ecs';
|
|
2
1
|
export declare type PositionUnit = `${number}px` | `${number}%` | number;
|
|
3
2
|
/**
|
|
4
3
|
* @public
|
|
@@ -9,18 +8,46 @@ export declare type Position = {
|
|
|
9
8
|
bottom: PositionUnit;
|
|
10
9
|
left: PositionUnit;
|
|
11
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
export declare type DisplayType = 'flex' | 'none';
|
|
15
|
+
/**
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export declare type JustifyType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
19
|
+
/**
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export declare type AlignType = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around';
|
|
23
|
+
/**
|
|
24
|
+
* @public
|
|
25
|
+
*/
|
|
26
|
+
export declare type FlexDirectionType = 'row' | 'column' | 'column-reverse' | 'row-reverse';
|
|
27
|
+
/**
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
export declare type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
|
|
31
|
+
/**
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
export declare type OverflowType = 'hidden' | 'scroll' | 'visible';
|
|
35
|
+
/**
|
|
36
|
+
* @public
|
|
37
|
+
*/
|
|
38
|
+
export declare type PositionType = 'absolute' | 'relative';
|
|
12
39
|
/**
|
|
13
40
|
* @public
|
|
14
41
|
*/
|
|
15
42
|
export interface UiTransformProps {
|
|
16
|
-
display?:
|
|
43
|
+
display?: DisplayType;
|
|
17
44
|
flex?: number;
|
|
18
|
-
justifyContent?:
|
|
19
|
-
positionType?:
|
|
20
|
-
alignItems?:
|
|
21
|
-
alignSelf?:
|
|
22
|
-
alignContent?:
|
|
23
|
-
flexDirection?:
|
|
45
|
+
justifyContent?: JustifyType;
|
|
46
|
+
positionType?: PositionType;
|
|
47
|
+
alignItems?: AlignType;
|
|
48
|
+
alignSelf?: AlignType;
|
|
49
|
+
alignContent?: AlignType;
|
|
50
|
+
flexDirection?: FlexDirectionType;
|
|
24
51
|
position?: Partial<Position>;
|
|
25
52
|
padding?: Partial<Position>;
|
|
26
53
|
margin?: Partial<Position>;
|
|
@@ -30,9 +57,9 @@ export interface UiTransformProps {
|
|
|
30
57
|
maxWidth?: PositionUnit;
|
|
31
58
|
minHeight?: PositionUnit;
|
|
32
59
|
maxHeight?: PositionUnit;
|
|
33
|
-
flexWrap?:
|
|
60
|
+
flexWrap?: FlexWrapType;
|
|
34
61
|
flexBasis?: number;
|
|
35
62
|
flexGrow?: number;
|
|
36
63
|
flexShrink?: number;
|
|
37
|
-
overflow?:
|
|
64
|
+
overflow?: OverflowType;
|
|
38
65
|
}
|
|
@@ -50,3 +50,102 @@ export function parseSize(val, key) {
|
|
|
50
50
|
[unitKey]: unit
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* @internal
|
|
55
|
+
*/
|
|
56
|
+
export function getDisplay(display) {
|
|
57
|
+
const value = display ? parseDisplay[display] : 0 /* YGDisplay.YGD_FLEX */;
|
|
58
|
+
return { display: value };
|
|
59
|
+
}
|
|
60
|
+
const parseDisplay = {
|
|
61
|
+
flex: 0 /* YGDisplay.YGD_FLEX */,
|
|
62
|
+
none: 1 /* YGDisplay.YGD_NONE */
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* @internal
|
|
66
|
+
*/
|
|
67
|
+
export function getJustify(justify) {
|
|
68
|
+
const value = justify
|
|
69
|
+
? parseJustify[justify]
|
|
70
|
+
: 0 /* YGJustify.YGJ_FLEX_START */;
|
|
71
|
+
return { justifyContent: value };
|
|
72
|
+
}
|
|
73
|
+
const parseJustify = {
|
|
74
|
+
center: 1 /* YGJustify.YGJ_CENTER */,
|
|
75
|
+
'flex-end': 2 /* YGJustify.YGJ_FLEX_END */,
|
|
76
|
+
'flex-start': 0 /* YGJustify.YGJ_FLEX_START */,
|
|
77
|
+
'space-around': 4 /* YGJustify.YGJ_SPACE_AROUND */,
|
|
78
|
+
'space-between': 3 /* YGJustify.YGJ_SPACE_BETWEEN */,
|
|
79
|
+
'space-evenly': 5 /* YGJustify.YGJ_SPACE_EVENLY */
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* @internal
|
|
83
|
+
*/
|
|
84
|
+
export function getAlign(prop, align, defaultValue) {
|
|
85
|
+
const value = align ? parseAligns[align] : defaultValue;
|
|
86
|
+
return { [prop]: value };
|
|
87
|
+
}
|
|
88
|
+
const parseAligns = {
|
|
89
|
+
auto: 0 /* YGAlign.YGA_AUTO */,
|
|
90
|
+
baseline: 5 /* YGAlign.YGA_BASELINE */,
|
|
91
|
+
center: 2 /* YGAlign.YGA_CENTER */,
|
|
92
|
+
'flex-end': 3 /* YGAlign.YGA_FLEX_END */,
|
|
93
|
+
'flex-start': 1 /* YGAlign.YGA_FLEX_START */,
|
|
94
|
+
stretch: 4 /* YGAlign.YGA_STRETCH */,
|
|
95
|
+
'space-between': 6 /* YGAlign.YGA_SPACE_BETWEEN */,
|
|
96
|
+
'space-around': 7 /* YGAlign.YGA_SPACE_AROUND */
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* @internal
|
|
100
|
+
*/
|
|
101
|
+
export function getFlexDirection(flexDirection) {
|
|
102
|
+
const value = flexDirection
|
|
103
|
+
? parseFlexDirection[flexDirection]
|
|
104
|
+
: 0 /* YGFlexDirection.YGFD_ROW */;
|
|
105
|
+
return { flexDirection: value };
|
|
106
|
+
}
|
|
107
|
+
const parseFlexDirection = {
|
|
108
|
+
row: 0 /* YGFlexDirection.YGFD_ROW */,
|
|
109
|
+
column: 1 /* YGFlexDirection.YGFD_COLUMN */,
|
|
110
|
+
'row-reverse': 3 /* YGFlexDirection.YGFD_ROW_REVERSE */,
|
|
111
|
+
'column-reverse': 2 /* YGFlexDirection.YGFD_COLUMN_REVERSE */
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* @internal
|
|
115
|
+
*/
|
|
116
|
+
export function getFlexWrap(flexWrap) {
|
|
117
|
+
const value = flexWrap ? parseFlexWrap[flexWrap] : 1 /* YGWrap.YGW_WRAP */;
|
|
118
|
+
return { flexWrap: value };
|
|
119
|
+
}
|
|
120
|
+
const parseFlexWrap = {
|
|
121
|
+
wrap: 1 /* YGWrap.YGW_WRAP */,
|
|
122
|
+
nowrap: 0 /* YGWrap.YGW_NO_WRAP */,
|
|
123
|
+
'wrap-reverse': 2 /* YGWrap.YGW_WRAP_REVERSE */
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* @internal
|
|
127
|
+
*/
|
|
128
|
+
export function getOverflow(overflow) {
|
|
129
|
+
const value = overflow
|
|
130
|
+
? parseOverflow[overflow]
|
|
131
|
+
: 0 /* YGOverflow.YGO_VISIBLE */;
|
|
132
|
+
return { overflow: value };
|
|
133
|
+
}
|
|
134
|
+
const parseOverflow = {
|
|
135
|
+
visible: 0 /* YGOverflow.YGO_VISIBLE */,
|
|
136
|
+
scroll: 2 /* YGOverflow.YGO_SCROLL */,
|
|
137
|
+
hidden: 1 /* YGOverflow.YGO_HIDDEN */
|
|
138
|
+
};
|
|
139
|
+
/**
|
|
140
|
+
* @internal
|
|
141
|
+
*/
|
|
142
|
+
export function getPoistionType(position) {
|
|
143
|
+
const value = position
|
|
144
|
+
? parsePositionType[position]
|
|
145
|
+
: 0 /* YGPositionType.YGPT_RELATIVE */;
|
|
146
|
+
return { positionType: value };
|
|
147
|
+
}
|
|
148
|
+
const parsePositionType = {
|
|
149
|
+
relative: 0 /* YGPositionType.YGPT_RELATIVE */,
|
|
150
|
+
absolute: 1 /* YGPositionType.YGPT_ABSOLUTE */
|
|
151
|
+
};
|
package/dist/reconciler/index.js
CHANGED
|
@@ -18,11 +18,11 @@ export function createReconciler(engine, pointerEvents) {
|
|
|
18
18
|
const UiDropdownResult = components.UiDropdownResult(engine);
|
|
19
19
|
// Component ID Helper
|
|
20
20
|
const getComponentId = {
|
|
21
|
-
uiTransform: UiTransform.
|
|
22
|
-
uiText: UiText.
|
|
23
|
-
uiBackground: UiBackground.
|
|
24
|
-
uiInput: UiInput.
|
|
25
|
-
uiDropdown: UiDropdown.
|
|
21
|
+
uiTransform: UiTransform.componentId,
|
|
22
|
+
uiText: UiText.componentId,
|
|
23
|
+
uiBackground: UiBackground.componentId,
|
|
24
|
+
uiInput: UiInput.componentId,
|
|
25
|
+
uiDropdown: UiDropdown.componentId
|
|
26
26
|
};
|
|
27
27
|
function updateTree(instance, props) {
|
|
28
28
|
upsertComponent(instance, props, 'uiTransform');
|
|
@@ -217,8 +217,8 @@ export function createReconciler(engine, pointerEvents) {
|
|
|
217
217
|
return {
|
|
218
218
|
update: function (component) {
|
|
219
219
|
if (changeEvents.size) {
|
|
220
|
-
handleOnChange(UiInput.
|
|
221
|
-
handleOnChange(UiDropdown.
|
|
220
|
+
handleOnChange(UiInput.componentId, UiInputResult);
|
|
221
|
+
handleOnChange(UiDropdown.componentId, UiDropdownResult);
|
|
222
222
|
}
|
|
223
223
|
return reconciler.updateContainer(component, root, null);
|
|
224
224
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/react-ecs",
|
|
3
|
-
"version": "7.0.6-
|
|
3
|
+
"version": "7.0.6-3987590195.commit-4fc1536",
|
|
4
4
|
"description": "Decentraland ECS",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"displayName": "React ECS",
|
|
43
43
|
"tsconfig": "./tsconfig.json"
|
|
44
44
|
},
|
|
45
|
-
"commit": "
|
|
45
|
+
"commit": "4fc1536e9bdd2501b3d9918ec7345084f7a49aca"
|
|
46
46
|
}
|