@dcl/react-ecs
Version:
Decentraland ECS
244 lines (243 loc) • 8.05 kB
JavaScript
import { calcOnViewport } from '../utils';
function capitalize(value) {
return `${value[0].toUpperCase()}${value.slice(1, value.length)}`;
}
function isPercent(val) {
return typeof val === 'string' && val.endsWith('%');
}
function isPoint(val) {
return typeof val === 'string' && val.endsWith('px');
}
function isVw(val) {
return typeof val === 'string' && val.endsWith('vw');
}
function isVh(val) {
return typeof val === 'string' && val.endsWith('vh');
}
function parsePositionUnit(val) {
function getValue(key, value) {
return Number(value.slice(0, value.indexOf(key)));
}
if (val === undefined || val === null) {
return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
}
if (val === 'auto') {
return [0, 3 /* YGUnit.YGU_AUTO */];
}
if (typeof val === 'number' || (typeof val === 'string' && !isNaN(Number(val)))) {
return [Number(val), 1 /* YGUnit.YGU_POINT */];
}
if (isPercent(val)) {
return [getValue('%', val), 2 /* YGUnit.YGU_PERCENT */];
}
if (isPoint(val)) {
return [getValue('px', val), 1 /* YGUnit.YGU_POINT */];
}
if (isVw(val) || isVh(val)) {
return [calcOnViewport(val), 1 /* YGUnit.YGU_POINT */];
}
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 = {};
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;
}
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`;
const [value, unit] = parsePositionUnit(val);
if (value === undefined)
return {};
return {
[key]: value,
[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) {
const value = parseAligns[align];
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 = parseFlexWrap[flexWrap];
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 getPositionType(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 */
};
/**
* @internal
*/
export function getPointerFilter(pointerFilter) {
const value = pointerFilter ? parsePointerFilter[pointerFilter] : 0 /* PointerFilterMode.PFM_NONE */;
return { pointerFilter: value };
}
const parsePointerFilter = {
none: 0 /* PointerFilterMode.PFM_NONE */,
block: 1 /* PointerFilterMode.PFM_BLOCK */
};