dcl-ui-toolkit/dist/ui-entities/Loading/index.js

A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.

import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs';
import { DelayedHidingUIObject } from '../UIObject';
import { getImageAtlasMapping } from '../../utils/imageUtils';
import { AtlasTheme, sourcesComponentsCoordinates } from '../../constants/resources';
const loadingInitialConfig = {
    startHidden: true,
    duration: 0,
    xOffset: 0,
    yOffset: 0,
    width: 50,
    height: 66,
    scale: 1,
};
export class Loading extends DelayedHidingUIObject {
    constructor({ startHidden = loadingInitialConfig.startHidden, duration = loadingInitialConfig.duration, xOffset = loadingInitialConfig.xOffset, yOffset = loadingInitialConfig.yOffset, scale = loadingInitialConfig.scale, }) {
        super({ startHidden, duration });
        this.xOffset = xOffset;
        this.yOffset = yOffset;
        this.scale = scale;
        this.imageElement = {
            uiTransform: {
                positionType: 'absolute',
                position: { top: '50%', left: '50%' },
            },
            uiBackground: {
                textureMode: 'stretch',
            },
        };
    }
    render(key) {
        this._width = loadingInitialConfig.width * this.scale;
        this._height = loadingInitialConfig.height * this.scale;
        return (ReactEcs.createElement(UiEntity, { key: key, ...this.imageElement, uiBackground: {
                ...this.imageElement.uiBackground,
                texture: {
                    src: AtlasTheme.ATLAS_PATH_LIGHT,
                },
                uvs: getImageAtlasMapping({
                    ...sourcesComponentsCoordinates.icons['TimerLarge'],
                    atlasHeight: sourcesComponentsCoordinates.atlasHeight,
                    atlasWidth: sourcesComponentsCoordinates.atlasWidth,
                }),
            }, uiTransform: {
                ...this.imageElement.uiTransform,
                width: this._width,
                height: this._height,
                display: this.visible ? 'flex' : 'none',
                margin: {
                    top: this.yOffset * -1 - this._height / 2,
                    left: this.xOffset - this._width / 2,
                },
            } }));
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvTG9hZGluZy9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxRQUFRLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUd2RCxPQUFPLEVBQUUscUJBQXFCLEVBQStCLE1BQU0sYUFBYSxDQUFBO0FBRWhGLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRTdELE9BQU8sRUFBRSxVQUFVLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQTtBQXNCcEYsTUFBTSxvQkFBb0IsR0FBZ0Q7SUFDeEUsV0FBVyxFQUFFLElBQUk7SUFDakIsUUFBUSxFQUFFLENBQUM7SUFDWCxPQUFPLEVBQUUsQ0FBQztJQUNWLE9BQU8sRUFBRSxDQUFDO0lBQ1YsS0FBSyxFQUFFLEVBQUU7SUFDVCxNQUFNLEVBQUUsRUFBRTtJQUNWLEtBQUssRUFBRSxDQUFDO0NBQ0EsQ0FBQTtBQVdWLE1BQU0sT0FBTyxPQUFRLFNBQVEscUJBQXFCO0lBVWhELFlBQVksRUFDVixXQUFXLEdBQUcsb0JBQW9CLENBQUMsV0FBVyxFQUM5QyxRQUFRLEdBQUcsb0JBQW9CLENBQUMsUUFBUSxFQUN4QyxPQUFPLEdBQUcsb0JBQW9CLENBQUMsT0FBTyxFQUN0QyxPQUFPLEdBQUcsb0JBQW9CLENBQUMsT0FBTyxFQUN0QyxLQUFLLEdBQUcsb0JBQW9CLENBQUMsS0FBSyxHQUNwQjtRQUNkLEtBQUssQ0FBQyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFBO1FBRWhDLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO1FBRWxCLElBQUksQ0FBQyxZQUFZLEdBQUc7WUFDbEIsV0FBVyxFQUFFO2dCQUNYLFlBQVksRUFBRSxVQUFVO2dCQUN4QixRQUFRLEVBQUUsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUU7YUFDdEM7WUFDRCxZQUFZLEVBQUU7Z0JBQ1osV0FBVyxFQUFFLFNBQVM7YUFDdkI7U0FDRixDQUFBO0lBQ0gsQ0FBQztJQUVNLE1BQU0sQ0FBQyxHQUFZO1FBQ3hCLElBQUksQ0FBQyxNQUFNLEdBQUcsb0JBQW9CLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUE7UUFDckQsSUFBSSxDQUFDLE9BQU8sR0FBRyxvQkFBb0IsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQTtRQUV2RCxPQUFPLENBQ0wsdUJBQUMsUUFBUSxJQUNQLEdBQUcsRUFBRSxHQUFHLEtBQ0osSUFBSSxDQUFDLFlBQVksRUFDckIsWUFBWSxFQUFFO2dCQUNaLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZO2dCQUNqQyxPQUFPLEVBQUU7b0JBQ1AsR0FBRyxFQUFFLFVBQVUsQ0FBQyxnQkFBZ0I7aUJBQ2pDO2dCQUNELEdBQUcsRUFBRSxvQkFBb0IsQ0FBQztvQkFDeEIsR0FBRyw0QkFBNEIsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDO29CQUNuRCxXQUFXLEVBQUUsNEJBQTRCLENBQUMsV0FBVztvQkFDckQsVUFBVSxFQUFFLDRCQUE0QixDQUFDLFVBQVU7aUJBQ3BELENBQUM7YUFDSCxFQUNELFdBQVcsRUFBRTtnQkFDWCxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVztnQkFDaEMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNO2dCQUNsQixNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU87Z0JBQ3BCLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07Z0JBQ3ZDLE1BQU0sRUFBRTtvQkFDTixHQUFHLEVBQUUsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUM7b0JBQ3pDLElBQUksRUFBRSxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQztpQkFDckM7YUFDRixHQUNELENBQ0gsQ0FBQTtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdEVjcywgeyBVaUVudGl0eSB9IGZyb20gJ0BkY2wvc2RrL3JlYWN0LWVjcydcbmltcG9ydCB7IEVudGl0eVByb3BUeXBlcyB9IGZyb20gJ0BkY2wvcmVhY3QtZWNzL2Rpc3QvY29tcG9uZW50cy90eXBlcydcblxuaW1wb3J0IHsgRGVsYXllZEhpZGluZ1VJT2JqZWN0LCBEZWxheWVkSGlkaW5nVUlPYmplY3RDb25maWcgfSBmcm9tICcuLi9VSU9iamVjdCdcblxuaW1wb3J0IHsgZ2V0SW1hZ2VBdGxhc01hcHBpbmcgfSBmcm9tICcuLi8uLi91dGlscy9pbWFnZVV0aWxzJ1xuXG5pbXBvcnQgeyBBdGxhc1RoZW1lLCBzb3VyY2VzQ29tcG9uZW50c0Nvb3JkaW5hdGVzIH0gZnJvbSAnLi4vLi4vY29uc3RhbnRzL3Jlc291cmNlcydcblxuZXhwb3J0IHR5cGUgTG9hZGluZ0ltYWdlRWxlbWVudCA9IE9taXQ8RW50aXR5UHJvcFR5cGVzLCAndWlUcmFuc2Zvcm0nIHwgJ3VpQmFja2dyb3VuZCc+ICYge1xuICB1aVRyYW5zZm9ybT86IE9taXQ8XG4gICAgTm9uTnVsbGFibGU8RW50aXR5UHJvcFR5cGVzWyd1aVRyYW5zZm9ybSddPixcbiAgICAnZGlzcGxheScgfCAnbWFyZ2luJyB8ICd3aWR0aCcgfCAnaGVpZ2h0J1xuICA+XG4gIHVpQmFja2dyb3VuZD86IE9taXQ8Tm9uTnVsbGFibGU8RW50aXR5UHJvcFR5cGVzWyd1aUJhY2tncm91bmQnXT4sICd0ZXh0dXJlJyB8ICd1dnMnPlxufVxuXG50eXBlIExvYWRpbmdDb25maWcgPSBEZWxheWVkSGlkaW5nVUlPYmplY3RDb25maWcgJiB7XG4gIGR1cmF0aW9uPzogbnVtYmVyXG4gIHhPZmZzZXQ/OiBudW1iZXJcbiAgeU9mZnNldD86IG51bWJlclxuICBzY2FsZT86IG51bWJlclxufVxuXG50eXBlIExvYWRpbmdTaXplQ29uZmlnID0ge1xuICB3aWR0aDogbnVtYmVyXG4gIGhlaWdodDogbnVtYmVyXG59XG5cbmNvbnN0IGxvYWRpbmdJbml0aWFsQ29uZmlnOiBSZXF1aXJlZDxMb2FkaW5nQ29uZmlnICYgTG9hZGluZ1NpemVDb25maWc+ID0ge1xuICBzdGFydEhpZGRlbjogdHJ1ZSxcbiAgZHVyYXRpb246IDAsXG4gIHhPZmZzZXQ6IDAsXG4gIHlPZmZzZXQ6IDAsXG4gIHdpZHRoOiA1MCxcbiAgaGVpZ2h0OiA2NixcbiAgc2NhbGU6IDEsXG59IGFzIGNvbnN0XG5cbi8qKlxuICogRGlzcGxheXMgYSBsb2FkaW5nIGljb24gaW4gdGhlIGNlbnRlciBvZiB0aGUgc2NyZWVuXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj10cnVlXSBzdGFydGluZyBoaWRkZW5cbiAqIEBwYXJhbSB7bnVtYmVyfSBbZHVyYXRpb249MF0gZHVyYXRpb24gdGltZSB0byBrZWVwIHRoZSBpY29uIHZpc2libGUgKGluIHNlY29uZHMpIGlmIHN0YXJ0aW5nIHZpc2libGVcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeE9mZnNldD0wXSBvZmZzZXQgb24gWFxuICogQHBhcmFtIHtudW1iZXJ9IFt5T2Zmc2V0PTBdIG9mZnNldCBvbiBZXG4gKiBAcGFyYW0ge251bWJlcn0gW3NjYWxlPTFdIG11bHRpcGxpZXIgZm9yIHRoZSBzaXplIG9mIHRoZSBiYXIuIDEgPSA1MCB4IDY2XG4gKlxuICovXG5leHBvcnQgY2xhc3MgTG9hZGluZyBleHRlbmRzIERlbGF5ZWRIaWRpbmdVSU9iamVjdCB7XG4gIHB1YmxpYyBpbWFnZUVsZW1lbnQ6IExvYWRpbmdJbWFnZUVsZW1lbnRcblxuICBwdWJsaWMgeE9mZnNldDogbnVtYmVyXG4gIHB1YmxpYyB5T2Zmc2V0OiBudW1iZXJcbiAgcHVibGljIHNjYWxlOiBudW1iZXJcblxuICBwcml2YXRlIF93aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkXG4gIHByaXZhdGUgX2hlaWdodDogbnVtYmVyIHwgdW5kZWZpbmVkXG5cbiAgY29uc3RydWN0b3Ioe1xuICAgIHN0YXJ0SGlkZGVuID0gbG9hZGluZ0luaXRpYWxDb25maWcuc3RhcnRIaWRkZW4sXG4gICAgZHVyYXRpb24gPSBsb2FkaW5nSW5pdGlhbENvbmZpZy5kdXJhdGlvbixcbiAgICB4T2Zmc2V0ID0gbG9hZGluZ0luaXRpYWxDb25maWcueE9mZnNldCxcbiAgICB5T2Zmc2V0ID0gbG9hZGluZ0luaXRpYWxDb25maWcueU9mZnNldCxcbiAgICBzY2FsZSA9IGxvYWRpbmdJbml0aWFsQ29uZmlnLnNjYWxlLFxuICB9OiBMb2FkaW5nQ29uZmlnKSB7XG4gICAgc3VwZXIoeyBzdGFydEhpZGRlbiwgZHVyYXRpb24gfSlcblxuICAgIHRoaXMueE9mZnNldCA9IHhPZmZzZXRcbiAgICB0aGlzLnlPZmZzZXQgPSB5T2Zmc2V0XG4gICAgdGhpcy5zY2FsZSA9IHNjYWxlXG5cbiAgICB0aGlzLmltYWdlRWxlbWVudCA9IHtcbiAgICAgIHVpVHJhbnNmb3JtOiB7XG4gICAgICAgIHBvc2l0aW9uVHlwZTogJ2Fic29sdXRlJyxcbiAgICAgICAgcG9zaXRpb246IHsgdG9wOiAnNTAlJywgbGVmdDogJzUwJScgfSxcbiAgICAgIH0sXG4gICAgICB1aUJhY2tncm91bmQ6IHtcbiAgICAgICAgdGV4dHVyZU1vZGU6ICdzdHJldGNoJyxcbiAgICAgIH0sXG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlbmRlcihrZXk/OiBzdHJpbmcpOiBSZWFjdEVjcy5KU1guRWxlbWVudCB7XG4gICAgdGhpcy5fd2lkdGggPSBsb2FkaW5nSW5pdGlhbENvbmZpZy53aWR0aCAqIHRoaXMuc2NhbGVcbiAgICB0aGlzLl9oZWlnaHQgPSBsb2FkaW5nSW5pdGlhbENvbmZpZy5oZWlnaHQgKiB0aGlzLnNjYWxlXG5cbiAgICByZXR1cm4gKFxuICAgICAgPFVpRW50aXR5XG4gICAgICAgIGtleT17a2V5fVxuICAgICAgICB7Li4udGhpcy5pbWFnZUVsZW1lbnR9XG4gICAgICAgIHVpQmFja2dyb3VuZD17e1xuICAgICAgICAgIC4uLnRoaXMuaW1hZ2VFbGVtZW50LnVpQmFja2dyb3VuZCxcbiAgICAgICAgICB0ZXh0dXJlOiB7XG4gICAgICAgICAgICBzcmM6IEF0bGFzVGhlbWUuQVRMQVNfUEFUSF9MSUdIVCxcbiAgICAgICAgICB9LFxuICAgICAgICAgIHV2czogZ2V0SW1hZ2VBdGxhc01hcHBpbmcoe1xuICAgICAgICAgICAgLi4uc291cmNlc0NvbXBvbmVudHNDb29yZGluYXRlcy5pY29uc1snVGltZXJMYXJnZSddLFxuICAgICAgICAgICAgYXRsYXNIZWlnaHQ6IHNvdXJjZXNDb21wb25lbnRzQ29vcmRpbmF0ZXMuYXRsYXNIZWlnaHQsXG4gICAgICAgICAgICBhdGxhc1dpZHRoOiBzb3VyY2VzQ29tcG9uZW50c0Nvb3JkaW5hdGVzLmF0bGFzV2lkdGgsXG4gICAgICAgICAgfSksXG4gICAgICAgIH19XG4gICAgICAgIHVpVHJhbnNmb3JtPXt7XG4gICAgICAgICAgLi4udGhpcy5pbWFnZUVsZW1lbnQudWlUcmFuc2Zvcm0sXG4gICAgICAgICAgd2lkdGg6IHRoaXMuX3dpZHRoLFxuICAgICAgICAgIGhlaWdodDogdGhpcy5faGVpZ2h0LFxuICAgICAgICAgIGRpc3BsYXk6IHRoaXMudmlzaWJsZSA/ICdmbGV4JyA6ICdub25lJyxcbiAgICAgICAgICBtYXJnaW46IHtcbiAgICAgICAgICAgIHRvcDogdGhpcy55T2Zmc2V0ICogLTEgLSB0aGlzLl9oZWlnaHQgLyAyLFxuICAgICAgICAgICAgbGVmdDogdGhpcy54T2Zmc2V0IC0gdGhpcy5fd2lkdGggLyAyLFxuICAgICAgICAgIH0sXG4gICAgICAgIH19XG4gICAgICAvPlxuICAgIClcbiAgfVxufVxuIl19