dcl-ui-toolkit
Version:
A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.
51 lines • 11.1 kB
JavaScript
import ReactEcs, { Input } from '@dcl/sdk/react-ecs';
import { Color4 } from '@dcl/sdk/math';
import { InPromptUIObject } from '../../InPromptUIObject';
import { defaultFont } from '../../../../../constants/font';
const promptInputInitialConfig = {
startHidden: false,
placeholder: 'Fill in',
xPosition: 0,
yPosition: 0,
positionAbsolute: true,
onChange: () => { },
};
export class PromptInput extends InPromptUIObject {
constructor({ parent, startHidden = promptInputInitialConfig.startHidden, placeholder = promptInputInitialConfig.placeholder, xPosition = promptInputInitialConfig.xPosition, yPosition = promptInputInitialConfig.yPosition, positionAbsolute = promptInputInitialConfig.positionAbsolute, onChange = promptInputInitialConfig.onChange, }) {
super({
startHidden,
parent,
});
this._width = 312;
this._height = 46;
this.placeholder = placeholder;
this.xPosition = xPosition;
this.yPosition = yPosition;
this.positionAbsolute = positionAbsolute;
this.onChange = onChange;
this.fillInBoxElement = {
uiTransform: {
width: this._width,
height: this._height,
},
fontSize: 22,
textAlign: 'middle-center',
font: defaultFont,
};
}
render(key) {
this._xPosition = this.promptWidth / -2 + this._width / 2 + this.xPosition;
this._yPosition = this.promptHeight / 2 + this._height / -2 + this.yPosition;
return (ReactEcs.createElement(Input, { key: key, ...this.fillInBoxElement, placeholder: String(this.placeholder), color: this.fillInBoxElement.color || (this.isDarkTheme ? Color4.White() : Color4.Black()), uiTransform: (!this.positionAbsolute)
? { ...this.fillInBoxElement.uiTransform,
display: this.visible ? 'flex' : 'none',
margin: { right: 10, left: 10, top: 10 },
alignSelf: 'center' }
: { ...this.fillInBoxElement.uiTransform,
display: this.visible ? 'flex' : 'none',
positionType: 'absolute',
position: { bottom: this._yPosition, right: this._xPosition * -1 },
margin: { left: '50%', top: '50%' } }, onChange: this.onChange }));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvcHJvbXB0cy9Qcm9tcHQvY29tcG9uZW50cy9JbnB1dC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxRQUFRLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFBO0FBSXRDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBMEIsTUFBTSx3QkFBd0IsQ0FBQTtBQUVqRixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sK0JBQStCLENBQUE7QUFpQjNELE1BQU0sd0JBQXdCLEdBQWdEO0lBQzVFLFdBQVcsRUFBRSxLQUFLO0lBQ2xCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLFNBQVMsRUFBRSxDQUFDO0lBQ1osU0FBUyxFQUFFLENBQUM7SUFDWixnQkFBZ0IsRUFBRSxJQUFJO0lBQ3RCLFFBQVEsRUFBRSxHQUFHLEVBQUUsR0FBRyxDQUFDO0NBQ1gsQ0FBQTtBQVlWLE1BQU0sT0FBTyxXQUFZLFNBQVEsZ0JBQWdCO0lBYy9DLFlBQVksRUFDVixNQUFNLEVBQ04sV0FBVyxHQUFHLHdCQUF3QixDQUFDLFdBQVcsRUFDbEQsV0FBVyxHQUFHLHdCQUF3QixDQUFDLFdBQVcsRUFDbEQsU0FBUyxHQUFHLHdCQUF3QixDQUFDLFNBQVMsRUFDOUMsU0FBUyxHQUFHLHdCQUF3QixDQUFDLFNBQVMsRUFDOUMsZ0JBQWdCLEdBQUcsd0JBQXdCLENBQUMsZ0JBQWdCLEVBQzVELFFBQVEsR0FBRyx3QkFBd0IsQ0FBQyxRQUFRLEdBQzFCO1FBQ2xCLEtBQUssQ0FBQztZQUNKLFdBQVc7WUFDWCxNQUFNO1NBQ1AsQ0FBQyxDQUFBO1FBRUYsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUE7UUFDakIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUE7UUFFakIsSUFBSSxDQUFDLFdBQVcsR0FBRyxXQUFXLENBQUE7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUE7UUFDMUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUE7UUFDMUIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLGdCQUFnQixDQUFBO1FBRXhDLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFBO1FBRXhCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRztZQUN0QixXQUFXLEVBQUU7Z0JBQ1gsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNO2dCQUNsQixNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU87YUFDckI7WUFDRCxRQUFRLEVBQUUsRUFBRTtZQUNaLFNBQVMsRUFBRSxlQUFlO1lBQzFCLElBQUksRUFBRSxXQUFXO1NBQ2xCLENBQUE7SUFDSCxDQUFDO0lBRU0sTUFBTSxDQUFDLEdBQVk7UUFDeEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUE7UUFDMUUsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUE7UUFFNUUsT0FBTyxDQUNMLHVCQUFDLEtBQUssSUFDSixHQUFHLEVBQUUsR0FBRyxLQUNKLElBQUksQ0FBQyxnQkFBZ0IsRUFDekIsV0FBVyxFQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQ3JDLEtBQUssRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUMsRUFDMUYsV0FBVyxFQUNULENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7Z0JBQ3hCLENBQUMsQ0FBQyxFQUFDLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVc7b0JBQ3JDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07b0JBQ3ZDLE1BQU0sRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFDO29CQUN0QyxTQUFTLEVBQUUsUUFBUSxFQUFDO2dCQUN0QixDQUFDLENBQUMsRUFBQyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXO29CQUNyQyxPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO29CQUN2QyxZQUFZLEVBQUUsVUFBVTtvQkFDeEIsUUFBUSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLEVBQUU7b0JBQ2xFLE1BQU0sRUFBRSxFQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBQyxFQUFDLEVBQ3RDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxHQUN2QixDQUNILENBQUE7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3RFY3MsIHsgSW5wdXQgfSBmcm9tICdAZGNsL3Nkay9yZWFjdC1lY3MnXG5pbXBvcnQgeyBDb2xvcjQgfSBmcm9tICdAZGNsL3Nkay9tYXRoJ1xuaW1wb3J0IHsgRW50aXR5UHJvcFR5cGVzIH0gZnJvbSAnQGRjbC9yZWFjdC1lY3MvZGlzdC9jb21wb25lbnRzL3R5cGVzJ1xuaW1wb3J0IHsgVWlJbnB1dFByb3BzIH0gZnJvbSAnQGRjbC9yZWFjdC1lY3MvZGlzdC9jb21wb25lbnRzL0lucHV0L3R5cGVzJ1xuXG5pbXBvcnQgeyBJblByb21wdFVJT2JqZWN0LCBJblByb21wdFVJT2JqZWN0Q29uZmlnIH0gZnJvbSAnLi4vLi4vSW5Qcm9tcHRVSU9iamVjdCdcblxuaW1wb3J0IHsgZGVmYXVsdEZvbnQgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi9jb25zdGFudHMvZm9udCdcblxuZXhwb3J0IHR5cGUgUHJvbXB0SW5wdXRGaWxsSW5Cb3hFbGVtZW50UHJvcHMgPSBQYXJ0aWFsPFxuICBPbWl0PFVpSW5wdXRQcm9wcywgJ29uQ2hhbmdlJyB8ICdwbGFjZWhvbGRlcic+XG4+ICZcbiAgT21pdDxFbnRpdHlQcm9wVHlwZXMsICd1aVRyYW5zZm9ybSc+ICYge1xuICAgIHVpVHJhbnNmb3JtPzogT21pdDxOb25OdWxsYWJsZTxFbnRpdHlQcm9wVHlwZXNbJ3VpVHJhbnNmb3JtJ10+LCAncG9zaXRpb24nIHwgJ2Rpc3BsYXknPlxuICB9XG5cbmV4cG9ydCB0eXBlIFByb21wdElucHV0Q29uZmlnID0gSW5Qcm9tcHRVSU9iamVjdENvbmZpZyAmIHtcbiAgcGxhY2Vob2xkZXI/OiBzdHJpbmcgfCBudW1iZXJcbiAgeFBvc2l0aW9uPzogbnVtYmVyXG4gIHlQb3NpdGlvbj86IG51bWJlclxuICBwb3NpdGlvbkFic29sdXRlPzogYm9vbGVhblxuICBvbkNoYW5nZT86ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkXG59XG5cbmNvbnN0IHByb21wdElucHV0SW5pdGlhbENvbmZpZzogT21pdDxSZXF1aXJlZDxQcm9tcHRJbnB1dENvbmZpZz4sICdwYXJlbnQnPiA9IHtcbiAgc3RhcnRIaWRkZW46IGZhbHNlLFxuICBwbGFjZWhvbGRlcjogJ0ZpbGwgaW4nLFxuICB4UG9zaXRpb246IDAsXG4gIHlQb3NpdGlvbjogMCxcbiAgcG9zaXRpb25BYnNvbHV0ZTogdHJ1ZSxcbiAgb25DaGFuZ2U6ICgpID0+IHsgfSxcbn0gYXMgY29uc3RcblxuLyoqXG4gKiBQcm9tcHQgaW5wdXQgYm94XG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj1mYWxzZV0gc3RhcnRpbmcgaGlkZGVuXG4gKiBAcGFyYW0ge3N0cmluZyB8IG51bWJlcn0gW3BsYWNlaG9sZGVyPSdGaWxsIGluJ10gRGVmYXVsdCBzdHJpbmcgdG8gZGlzcGxheSBpbiB0aGUgYm94XG4gKiBAcGFyYW0ge251bWJlcn0gW3hQb3NpdGlvbj0wXSBQb3NpdGlvbiBvbiBYIG9uIHRoZSBwcm9tcHQsIGNvdW50aW5nIGZyb20gdGhlIGNlbnRlciBvZiB0aGUgcHJvbXB0XG4gKiBAcGFyYW0ge251bWJlcn0gW3lQb3NpdGlvbj0wXSBQb3NpdGlvbiBvbiBZIG9uIHRoZSBwcm9tcHQsIGNvdW50aW5nIGZyb20gdGhlIGNlbnRlciBvZiB0aGUgcHJvbXB0XG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtwb3NpdGlvbkFic29sdXRlPXRydWVdIFBvc2l0aW9uIGJ5IGFic29sdXRlXG4gKiBAcGFyYW0geygpID0+IHZvaWR9IG9uQ2hhbmdlIEZ1bmN0aW9uIHRvIGNhbGwgZXZlcnkgdGltZSB0aGUgdmFsdWUgaW4gdGhlIHRleHQgYm94IGlzIG1vZGlmaWVkIGJ5IHRoZSBwbGF5ZXJcbiAqXG4gKi9cbmV4cG9ydCBjbGFzcyBQcm9tcHRJbnB1dCBleHRlbmRzIEluUHJvbXB0VUlPYmplY3Qge1xuICBwdWJsaWMgZmlsbEluQm94RWxlbWVudDogUHJvbXB0SW5wdXRGaWxsSW5Cb3hFbGVtZW50UHJvcHNcblxuICBwdWJsaWMgcGxhY2Vob2xkZXI6IHN0cmluZyB8IG51bWJlclxuICBwdWJsaWMgeFBvc2l0aW9uOiBudW1iZXJcbiAgcHVibGljIHlQb3NpdGlvbjogbnVtYmVyXG4gIHB1YmxpYyBwb3NpdGlvbkFic29sdXRlOiBib29sZWFuXG4gIHB1YmxpYyBvbkNoYW5nZTogKHZhbHVlOiBzdHJpbmcpID0+IHZvaWRcblxuICBwcml2YXRlIF94UG9zaXRpb246IG51bWJlciB8IHVuZGVmaW5lZFxuICBwcml2YXRlIF95UG9zaXRpb246IG51bWJlciB8IHVuZGVmaW5lZFxuICBwcml2YXRlIHJlYWRvbmx5IF93aWR0aDogbnVtYmVyXG4gIHByaXZhdGUgcmVhZG9ubHkgX2hlaWdodDogbnVtYmVyXG5cbiAgY29uc3RydWN0b3Ioe1xuICAgIHBhcmVudCxcbiAgICBzdGFydEhpZGRlbiA9IHByb21wdElucHV0SW5pdGlhbENvbmZpZy5zdGFydEhpZGRlbixcbiAgICBwbGFjZWhvbGRlciA9IHByb21wdElucHV0SW5pdGlhbENvbmZpZy5wbGFjZWhvbGRlcixcbiAgICB4UG9zaXRpb24gPSBwcm9tcHRJbnB1dEluaXRpYWxDb25maWcueFBvc2l0aW9uLFxuICAgIHlQb3NpdGlvbiA9IHByb21wdElucHV0SW5pdGlhbENvbmZpZy55UG9zaXRpb24sXG4gICAgcG9zaXRpb25BYnNvbHV0ZSA9IHByb21wdElucHV0SW5pdGlhbENvbmZpZy5wb3NpdGlvbkFic29sdXRlLFxuICAgIG9uQ2hhbmdlID0gcHJvbXB0SW5wdXRJbml0aWFsQ29uZmlnLm9uQ2hhbmdlLFxuICB9OiBQcm9tcHRJbnB1dENvbmZpZykge1xuICAgIHN1cGVyKHtcbiAgICAgIHN0YXJ0SGlkZGVuLFxuICAgICAgcGFyZW50LFxuICAgIH0pXG5cbiAgICB0aGlzLl93aWR0aCA9IDMxMlxuICAgIHRoaXMuX2hlaWdodCA9IDQ2XG5cbiAgICB0aGlzLnBsYWNlaG9sZGVyID0gcGxhY2Vob2xkZXJcbiAgICB0aGlzLnhQb3NpdGlvbiA9IHhQb3NpdGlvblxuICAgIHRoaXMueVBvc2l0aW9uID0geVBvc2l0aW9uXG4gICAgdGhpcy5wb3NpdGlvbkFic29sdXRlID0gcG9zaXRpb25BYnNvbHV0ZVxuXG4gICAgdGhpcy5vbkNoYW5nZSA9IG9uQ2hhbmdlXG5cbiAgICB0aGlzLmZpbGxJbkJveEVsZW1lbnQgPSB7XG4gICAgICB1aVRyYW5zZm9ybToge1xuICAgICAgICB3aWR0aDogdGhpcy5fd2lkdGgsXG4gICAgICAgIGhlaWdodDogdGhpcy5faGVpZ2h0LFxuICAgICAgfSxcbiAgICAgIGZvbnRTaXplOiAyMixcbiAgICAgIHRleHRBbGlnbjogJ21pZGRsZS1jZW50ZXInLFxuICAgICAgZm9udDogZGVmYXVsdEZvbnQsXG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlbmRlcihrZXk/OiBzdHJpbmcpOiBSZWFjdEVjcy5KU1guRWxlbWVudCB7XG4gICAgdGhpcy5feFBvc2l0aW9uID0gdGhpcy5wcm9tcHRXaWR0aCAvIC0yICsgdGhpcy5fd2lkdGggLyAyICsgdGhpcy54UG9zaXRpb25cbiAgICB0aGlzLl95UG9zaXRpb24gPSB0aGlzLnByb21wdEhlaWdodCAvIDIgKyB0aGlzLl9oZWlnaHQgLyAtMiArIHRoaXMueVBvc2l0aW9uXG5cbiAgICByZXR1cm4gKFxuICAgICAgPElucHV0XG4gICAgICAgIGtleT17a2V5fVxuICAgICAgICB7Li4udGhpcy5maWxsSW5Cb3hFbGVtZW50fVxuICAgICAgICBwbGFjZWhvbGRlcj17U3RyaW5nKHRoaXMucGxhY2Vob2xkZXIpfVxuICAgICAgICBjb2xvcj17dGhpcy5maWxsSW5Cb3hFbGVtZW50LmNvbG9yIHx8ICh0aGlzLmlzRGFya1RoZW1lID8gQ29sb3I0LldoaXRlKCkgOiBDb2xvcjQuQmxhY2soKSl9XG4gICAgICAgIHVpVHJhbnNmb3JtPXtcbiAgICAgICAgICAoIXRoaXMucG9zaXRpb25BYnNvbHV0ZSlcbiAgICAgICAgICA/IHsuLi50aGlzLmZpbGxJbkJveEVsZW1lbnQudWlUcmFuc2Zvcm0sXG4gICAgICAgICAgICBkaXNwbGF5OiB0aGlzLnZpc2libGUgPyAnZmxleCcgOiAnbm9uZScsXG4gICAgICAgICAgICBtYXJnaW46IHtyaWdodDogMTAsIGxlZnQ6IDEwLCB0b3A6IDEwfSxcbiAgICAgICAgICAgIGFsaWduU2VsZjogJ2NlbnRlcid9XG4gICAgICAgICAgOiB7Li4udGhpcy5maWxsSW5Cb3hFbGVtZW50LnVpVHJhbnNmb3JtLFxuICAgICAgICAgICAgZGlzcGxheTogdGhpcy52aXNpYmxlID8gJ2ZsZXgnIDogJ25vbmUnLFxuICAgICAgICAgICAgcG9zaXRpb25UeXBlOiAnYWJzb2x1dGUnLFxuICAgICAgICAgICAgcG9zaXRpb246IHsgYm90dG9tOiB0aGlzLl95UG9zaXRpb24sIHJpZ2h0OiB0aGlzLl94UG9zaXRpb24gKiAtMSB9LFxuICAgICAgICAgICAgbWFyZ2luOiB7bGVmdDogJzUwJScsIHRvcDogJzUwJSd9fX1cbiAgICAgICAgb25DaGFuZ2U9e3RoaXMub25DaGFuZ2V9XG4gICAgICAvPlxuICAgIClcbiAgfVxufVxuIl19