dcl-ui-toolkit
Version:
A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.
60 lines • 10.5 kB
JavaScript
import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs';
import { InPromptUIObject } from '../../InPromptUIObject';
import { getImageAtlasMapping } from '../../../../../utils/imageUtils';
import { AtlasTheme, sourcesComponentsCoordinates } from '../../../../../constants/resources';
export var PromptCloseIconStyles;
(function (PromptCloseIconStyles) {
PromptCloseIconStyles["CLOSEW"] = "closeW";
PromptCloseIconStyles["CLOSED"] = "closeD";
})(PromptCloseIconStyles || (PromptCloseIconStyles = {}));
const promptCloseIconInitialConfig = {
startHidden: false,
style: PromptCloseIconStyles.CLOSED,
width: 32,
height: 32,
xPosition: 10,
yPosition: 10,
onMouseDown: () => { },
};
export class PromptCloseIcon extends InPromptUIObject {
constructor({ parent, startHidden = promptCloseIconInitialConfig.startHidden, style = promptCloseIconInitialConfig.style, width = sourcesComponentsCoordinates.icons[style].sourceWidth, height = sourcesComponentsCoordinates.icons[style].sourceHeight, xPosition = promptCloseIconInitialConfig.xPosition, yPosition = promptCloseIconInitialConfig.yPosition, onMouseDown = promptCloseIconInitialConfig.onMouseDown, }) {
super({
startHidden,
parent,
});
this.onMouseDown = onMouseDown;
this.width = width;
this.height = height;
this.xPosition = xPosition;
this.yPosition = yPosition;
this.style = style;
this.iconElement = {
uiBackground: {
textureMode: 'stretch',
texture: {
src: AtlasTheme.ATLAS_PATH_LIGHT,
},
},
uiTransform: {
positionType: 'absolute',
},
};
}
render(key) {
return (ReactEcs.createElement(UiEntity, { key: key, ...this.iconElement, uiBackground: {
...this.iconElement.uiBackground,
uvs: getImageAtlasMapping({
...sourcesComponentsCoordinates.icons[this.style],
atlasHeight: sourcesComponentsCoordinates.atlasHeight,
atlasWidth: sourcesComponentsCoordinates.atlasWidth,
}),
}, uiTransform: {
...this.iconElement.uiTransform,
display: this.visible ? 'flex' : 'none',
width: this.width,
height: this.height,
position: { top: this.yPosition, right: this.xPosition },
}, onMouseDown: this.onMouseDown }));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvcHJvbXB0cy9Qcm9tcHQvY29tcG9uZW50cy9DbG9zZUljb24vaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFJdkQsT0FBTyxFQUFFLGdCQUFnQixFQUEwQixNQUFNLHdCQUF3QixDQUFBO0FBRWpGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFBO0FBRXRFLE9BQU8sRUFBRSxVQUFVLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQTtBQWE3RixNQUFNLENBQU4sSUFBWSxxQkFHWDtBQUhELFdBQVkscUJBQXFCO0lBQy9CLDBDQUFpQixDQUFBO0lBQ2pCLDBDQUFpQixDQUFBO0FBQ25CLENBQUMsRUFIVyxxQkFBcUIsS0FBckIscUJBQXFCLFFBR2hDO0FBV0QsTUFBTSw0QkFBNEIsR0FBb0Q7SUFDcEYsV0FBVyxFQUFFLEtBQUs7SUFDbEIsS0FBSyxFQUFFLHFCQUFxQixDQUFDLE1BQU07SUFDbkMsS0FBSyxFQUFFLEVBQUU7SUFDVCxNQUFNLEVBQUUsRUFBRTtJQUNWLFNBQVMsRUFBRSxFQUFFO0lBQ2IsU0FBUyxFQUFFLEVBQUU7SUFDYixXQUFXLEVBQUUsR0FBRyxFQUFFLEdBQUUsQ0FBQztDQUNiLENBQUE7QUFhVixNQUFNLE9BQU8sZUFBZ0IsU0FBUSxnQkFBZ0I7SUFVbkQsWUFBWSxFQUNWLE1BQU0sRUFDTixXQUFXLEdBQUcsNEJBQTRCLENBQUMsV0FBVyxFQUN0RCxLQUFLLEdBQUcsNEJBQTRCLENBQUMsS0FBSyxFQUMxQyxLQUFLLEdBQUcsNEJBQTRCLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLFdBQVcsRUFDN0QsTUFBTSxHQUFHLDRCQUE0QixDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxZQUFZLEVBQy9ELFNBQVMsR0FBRyw0QkFBNEIsQ0FBQyxTQUFTLEVBQ2xELFNBQVMsR0FBRyw0QkFBNEIsQ0FBQyxTQUFTLEVBQ2xELFdBQVcsR0FBRyw0QkFBNEIsQ0FBQyxXQUFXLEdBQ2hDO1FBQ3RCLEtBQUssQ0FBQztZQUNKLFdBQVc7WUFDWCxNQUFNO1NBQ1AsQ0FBQyxDQUFBO1FBRUYsSUFBSSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUE7UUFFOUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7UUFDbEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUE7UUFDMUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUE7UUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7UUFFbEIsSUFBSSxDQUFDLFdBQVcsR0FBRztZQUNqQixZQUFZLEVBQUU7Z0JBQ1osV0FBVyxFQUFFLFNBQVM7Z0JBQ3RCLE9BQU8sRUFBRTtvQkFDUCxHQUFHLEVBQUUsVUFBVSxDQUFDLGdCQUFnQjtpQkFDakM7YUFDRjtZQUNELFdBQVcsRUFBRTtnQkFDWCxZQUFZLEVBQUUsVUFBVTthQUN6QjtTQUNGLENBQUE7SUFDSCxDQUFDO0lBRU0sTUFBTSxDQUFDLEdBQVk7UUFDeEIsT0FBTyxDQUNMLHVCQUFDLFFBQVEsSUFDUCxHQUFHLEVBQUUsR0FBRyxLQUNKLElBQUksQ0FBQyxXQUFXLEVBQ3BCLFlBQVksRUFBRTtnQkFDWixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWTtnQkFDaEMsR0FBRyxFQUFFLG9CQUFvQixDQUFDO29CQUN4QixHQUFHLDRCQUE0QixDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO29CQUNqRCxXQUFXLEVBQUUsNEJBQTRCLENBQUMsV0FBVztvQkFDckQsVUFBVSxFQUFFLDRCQUE0QixDQUFDLFVBQVU7aUJBQ3BELENBQUM7YUFDSCxFQUNELFdBQVcsRUFBRTtnQkFDWCxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVztnQkFDL0IsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTTtnQkFDdkMsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO2dCQUNqQixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07Z0JBQ25CLFFBQVEsRUFBRSxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFO2FBQ3pELEVBQ0QsV0FBVyxFQUFFLElBQUksQ0FBQyxXQUFXLEdBQzdCLENBQ0gsQ0FBQTtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdEVjcywgeyBVaUVudGl0eSB9IGZyb20gJ0BkY2wvc2RrL3JlYWN0LWVjcydcbmltcG9ydCB7IENhbGxiYWNrIH0gZnJvbSAnQGRjbC9yZWFjdC1lY3MvZGlzdC9jb21wb25lbnRzL2xpc3RlbmVycy90eXBlcydcbmltcG9ydCB7IEVudGl0eVByb3BUeXBlcyB9IGZyb20gJ0BkY2wvcmVhY3QtZWNzL2Rpc3QvY29tcG9uZW50cy90eXBlcydcblxuaW1wb3J0IHsgSW5Qcm9tcHRVSU9iamVjdCwgSW5Qcm9tcHRVSU9iamVjdENvbmZpZyB9IGZyb20gJy4uLy4uL0luUHJvbXB0VUlPYmplY3QnXG5cbmltcG9ydCB7IGdldEltYWdlQXRsYXNNYXBwaW5nIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vdXRpbHMvaW1hZ2VVdGlscydcblxuaW1wb3J0IHsgQXRsYXNUaGVtZSwgc291cmNlc0NvbXBvbmVudHNDb29yZGluYXRlcyB9IGZyb20gJy4uLy4uLy4uLy4uLy4uL2NvbnN0YW50cy9yZXNvdXJjZXMnXG5cbmV4cG9ydCB0eXBlIFByb21wdENsb3NlSWNvbkljb25FbGVtZW50UHJvcHMgPSBPbWl0PFxuICBFbnRpdHlQcm9wVHlwZXMsXG4gICd1aVRyYW5zZm9ybScgfCAndWlCYWNrZ3JvdW5kJ1xuPiAmIHtcbiAgdWlUcmFuc2Zvcm0/OiBPbWl0PFxuICAgIE5vbk51bGxhYmxlPEVudGl0eVByb3BUeXBlc1sndWlUcmFuc2Zvcm0nXT4sXG4gICAgJ3dpZHRoJyB8ICdoZWlnaHQnIHwgJ3Bvc2l0aW9uJyB8ICdkaXNwbGF5J1xuICA+XG4gIHVpQmFja2dyb3VuZD86IE9taXQ8Tm9uTnVsbGFibGU8RW50aXR5UHJvcFR5cGVzWyd1aUJhY2tncm91bmQnXT4sICd1dnMnPlxufVxuXG5leHBvcnQgZW51bSBQcm9tcHRDbG9zZUljb25TdHlsZXMge1xuICBDTE9TRVcgPSBgY2xvc2VXYCxcbiAgQ0xPU0VEID0gYGNsb3NlRGAsXG59XG5cbmV4cG9ydCB0eXBlIFByb21wdENsb3NlSWNvbkNvbmZpZyA9IEluUHJvbXB0VUlPYmplY3RDb25maWcgJiB7XG4gIHN0eWxlOiBQcm9tcHRDbG9zZUljb25TdHlsZXNcbiAgd2lkdGg/OiBudW1iZXJcbiAgaGVpZ2h0PzogbnVtYmVyXG4gIHhQb3NpdGlvbj86IG51bWJlclxuICB5UG9zaXRpb24/OiBudW1iZXJcbiAgb25Nb3VzZURvd246IENhbGxiYWNrXG59XG5cbmNvbnN0IHByb21wdENsb3NlSWNvbkluaXRpYWxDb25maWc6IE9taXQ8UmVxdWlyZWQ8UHJvbXB0Q2xvc2VJY29uQ29uZmlnPiwgJ3BhcmVudCc+ID0ge1xuICBzdGFydEhpZGRlbjogZmFsc2UsXG4gIHN0eWxlOiBQcm9tcHRDbG9zZUljb25TdHlsZXMuQ0xPU0VELFxuICB3aWR0aDogMzIsXG4gIGhlaWdodDogMzIsXG4gIHhQb3NpdGlvbjogMTAsXG4gIHlQb3NpdGlvbjogMTAsXG4gIG9uTW91c2VEb3duOiAoKSA9PiB7fSxcbn0gYXMgY29uc3RcblxuLyoqXG4gKiBQcm9tcHQgY2xvc2UgYnV0dG9uXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj1mYWxzZV0gc3RhcnRpbmcgaGlkZGVuXG4gKiBAcGFyYW0ge1Byb21wdENsb3NlSWNvblN0eWxlc30gW3N0eWxlPUNsb3NlSWNvblN0eWxlcy5DTE9TRURdIHZpc2libGUgdmFyaWFudFxuICogQHBhcmFtIHtudW1iZXJ9IFt3aWR0aD0zMl0gaW1hZ2Ugd2lkdGhcbiAqIEBwYXJhbSB7bnVtYmVyfSBbaGVpZ2h0PTMyXSBpbWFnZSBoZWlnaHRcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeFBvc2l0aW9uPTBdIHBvc2l0aW9uIG9uIFhcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeVBvc2l0aW9uPTBdIHBvc2l0aW9uIG9uIFlcbiAqIEBwYXJhbSB7Q2FsbGJhY2t9IFtvbk1vdXNlRG93bj0wXSBjbGljayBhY3Rpb25cbiAqXG4gKi9cbmV4cG9ydCBjbGFzcyBQcm9tcHRDbG9zZUljb24gZXh0ZW5kcyBJblByb21wdFVJT2JqZWN0IHtcbiAgcHVibGljIGljb25FbGVtZW50OiBQcm9tcHRDbG9zZUljb25JY29uRWxlbWVudFByb3BzXG5cbiAgcHVibGljIHN0eWxlOiBQcm9tcHRDbG9zZUljb25TdHlsZXNcbiAgcHVibGljIHdpZHRoOiBudW1iZXJcbiAgcHVibGljIGhlaWdodDogbnVtYmVyXG4gIHB1YmxpYyB4UG9zaXRpb246IG51bWJlclxuICBwdWJsaWMgeVBvc2l0aW9uOiBudW1iZXJcbiAgcHVibGljIG9uTW91c2VEb3duOiBDYWxsYmFja1xuXG4gIGNvbnN0cnVjdG9yKHtcbiAgICBwYXJlbnQsXG4gICAgc3RhcnRIaWRkZW4gPSBwcm9tcHRDbG9zZUljb25Jbml0aWFsQ29uZmlnLnN0YXJ0SGlkZGVuLFxuICAgIHN0eWxlID0gcHJvbXB0Q2xvc2VJY29uSW5pdGlhbENvbmZpZy5zdHlsZSxcbiAgICB3aWR0aCA9IHNvdXJjZXNDb21wb25lbnRzQ29vcmRpbmF0ZXMuaWNvbnNbc3R5bGVdLnNvdXJjZVdpZHRoLFxuICAgIGhlaWdodCA9IHNvdXJjZXNDb21wb25lbnRzQ29vcmRpbmF0ZXMuaWNvbnNbc3R5bGVdLnNvdXJjZUhlaWdodCxcbiAgICB4UG9zaXRpb24gPSBwcm9tcHRDbG9zZUljb25Jbml0aWFsQ29uZmlnLnhQb3NpdGlvbixcbiAgICB5UG9zaXRpb24gPSBwcm9tcHRDbG9zZUljb25Jbml0aWFsQ29uZmlnLnlQb3NpdGlvbixcbiAgICBvbk1vdXNlRG93biA9IHByb21wdENsb3NlSWNvbkluaXRpYWxDb25maWcub25Nb3VzZURvd24sXG4gIH06IFByb21wdENsb3NlSWNvbkNvbmZpZykge1xuICAgIHN1cGVyKHtcbiAgICAgIHN0YXJ0SGlkZGVuLFxuICAgICAgcGFyZW50LFxuICAgIH0pXG5cbiAgICB0aGlzLm9uTW91c2VEb3duID0gb25Nb3VzZURvd25cblxuICAgIHRoaXMud2lkdGggPSB3aWR0aFxuICAgIHRoaXMuaGVpZ2h0ID0gaGVpZ2h0XG4gICAgdGhpcy54UG9zaXRpb24gPSB4UG9zaXRpb25cbiAgICB0aGlzLnlQb3NpdGlvbiA9IHlQb3NpdGlvblxuICAgIHRoaXMuc3R5bGUgPSBzdHlsZVxuXG4gICAgdGhpcy5pY29uRWxlbWVudCA9IHtcbiAgICAgIHVpQmFja2dyb3VuZDoge1xuICAgICAgICB0ZXh0dXJlTW9kZTogJ3N0cmV0Y2gnLFxuICAgICAgICB0ZXh0dXJlOiB7XG4gICAgICAgICAgc3JjOiBBdGxhc1RoZW1lLkFUTEFTX1BBVEhfTElHSFQsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgICAgdWlUcmFuc2Zvcm06IHtcbiAgICAgICAgcG9zaXRpb25UeXBlOiAnYWJzb2x1dGUnLFxuICAgICAgfSxcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgcmVuZGVyKGtleT86IHN0cmluZyk6IFJlYWN0RWNzLkpTWC5FbGVtZW50IHtcbiAgICByZXR1cm4gKFxuICAgICAgPFVpRW50aXR5XG4gICAgICAgIGtleT17a2V5fVxuICAgICAgICB7Li4udGhpcy5pY29uRWxlbWVudH1cbiAgICAgICAgdWlCYWNrZ3JvdW5kPXt7XG4gICAgICAgICAgLi4udGhpcy5pY29uRWxlbWVudC51aUJhY2tncm91bmQsXG4gICAgICAgICAgdXZzOiBnZXRJbWFnZUF0bGFzTWFwcGluZyh7XG4gICAgICAgICAgICAuLi5zb3VyY2VzQ29tcG9uZW50c0Nvb3JkaW5hdGVzLmljb25zW3RoaXMuc3R5bGVdLFxuICAgICAgICAgICAgYXRsYXNIZWlnaHQ6IHNvdXJjZXNDb21wb25lbnRzQ29vcmRpbmF0ZXMuYXRsYXNIZWlnaHQsXG4gICAgICAgICAgICBhdGxhc1dpZHRoOiBzb3VyY2VzQ29tcG9uZW50c0Nvb3JkaW5hdGVzLmF0bGFzV2lkdGgsXG4gICAgICAgICAgfSksXG4gICAgICAgIH19XG4gICAgICAgIHVpVHJhbnNmb3JtPXt7XG4gICAgICAgICAgLi4udGhpcy5pY29uRWxlbWVudC51aVRyYW5zZm9ybSxcbiAgICAgICAgICBkaXNwbGF5OiB0aGlzLnZpc2libGUgPyAnZmxleCcgOiAnbm9uZScsXG4gICAgICAgICAgd2lkdGg6IHRoaXMud2lkdGgsXG4gICAgICAgICAgaGVpZ2h0OiB0aGlzLmhlaWdodCxcbiAgICAgICAgICBwb3NpdGlvbjogeyB0b3A6IHRoaXMueVBvc2l0aW9uLCByaWdodDogdGhpcy54UG9zaXRpb24gfSxcbiAgICAgICAgfX1cbiAgICAgICAgb25Nb3VzZURvd249e3RoaXMub25Nb3VzZURvd259XG4gICAgICAvPlxuICAgIClcbiAgfVxufVxuIl19