@dcl/react-ecs
Version:
Decentraland ECS
59 lines (58 loc) • 2.06 kB
JavaScript
import { ReactEcs } from '../../react-ecs';
import { getFont, getFontSize, getTextAlign, getTextWrap } from '../Label/utils';
import { parseUiBackground } from '../uiBackground';
import { parseUiTransform } from '../uiTransform';
function getButtonProps(props) {
if (props.variant === 'secondary') {
return {
uiBackground: { color: { r: 1, g: 1, b: 1, a: 1 } },
uiText: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } }
};
}
// 'primary' variant by default
return {
uiBackground: { color: { r: 0.98, g: 0.17, b: 0.33, a: 1 } },
uiText: { color: { r: 1, g: 1, b: 1, a: 1 } }
};
}
/**
*
* @public
* Button component
*
* A Button indicates a possible user action.
*
* @example
* <Button variant="primary" value="Click me!" />
*
* @category Component
*/
/* @__PURE__ */
export function Button(props) {
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
const buttonProps = getButtonProps(props);
const uiBackgroundProps = parseUiBackground({
...buttonProps.uiBackground,
...uiBackground
});
const { font, textAlign, fontSize, textWrap, ...uiTexProps } = otherProps;
const textProps = {
...buttonProps.uiText,
...uiTexProps,
...getFont(font),
...getTextAlign(textAlign),
...getFontSize(fontSize),
...getTextWrap(textWrap)
};
const uiTransformProps = parseUiTransform({
height: 36,
...uiTransform
});
if (!!props.disabled) {
if (textProps.color)
textProps.color.a /= 2;
if (uiBackgroundProps && uiBackgroundProps.color)
uiBackgroundProps.color.a /= 2;
}
return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
}