@babylonjs/gui-editor 5.12.1 → 5.13.0

package/dist/babylon.guiEditor.max.js

@@ -50478,7 +50478,7 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     constructor(props) {
         super(props);
         this._localChange = false;
-        this.state = { value: this._remapValueIn(this.props.extractValue ? this.props.extractValue() : props.target[props.propertyName]) };
+        this.state = { value: this._remapValueIn(this._getValue(props)) };
     }
     _remapValueIn(value) {
         return this.props.allowNullValue && value === null ? Null_Value : value;
@@ -50486,12 +50486,18 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
     _remapValueOut(value) {
         return this.props.allowNullValue && value === Null_Value ? null : value;
     }
+    _getValue(props) {
+        if (props.extractValue) {
+            return props.extractValue(props.target);
+        }
+        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
+    }
     shouldComponentUpdate(nextProps, nextState) {
         if (this._localChange) {
             this._localChange = false;
             return true;
         }
-        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue() : nextProps.target[nextProps.propertyName]);
+        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);
         if (newValue != null && newValue !== nextState.value) {
             nextState.value = newValue;
             return true;
@@ -50510,10 +50516,13 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             allowNullValue: this.props.allowNullValue,
         });
     }
+    setValue(value) {
+        this.setState({ value: value });
+    }
     updateValue(valueString) {
-        const value = parseInt(valueString);
+        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
         this._localChange = true;
-        const store = this.props.extractValue ? this.props.extractValue() : this.props.target[this.props.propertyName];
+        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         if (!this.props.noDirectUpdate) {
             this.props.target[this.props.propertyName] = this._remapValueOut(value);
         }
@@ -50521,12 +50530,12 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         if (this.props.onSelect) {
             this.props.onSelect(value);
         }
-        const newValue = this.props.extractValue ? this.props.extractValue() : this.props.target[this.props.propertyName];
+        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         this.raiseOnPropertyChanged(newValue, store);
     }
     render() {
         var _a;
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "listLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "options" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", Object.assign({ onChange: (evt) => this.updateValue(evt.target.value), value: (_a = this.state.value) !== null && _a !== void 0 ? _a : "" }, { children: this.props.options.map((option, i) => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "listLine" + (this.props.className ? " " + this.props.className : "") }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "options" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", Object.assign({ onChange: (evt) => this.updateValue(evt.target.value), value: (_a = this.state.value) !== null && _a !== void 0 ? _a : "" }, { children: this.props.options.map((option, i) => {
                             return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", Object.assign({ selected: option.selected, value: option.value, title: option.label }, { children: option.label }), option.label + i));
                         }) })) }))] })));
     }
@@ -50889,6 +50898,11 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         }
         this._localChange = true;
         const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
+        if (this.props.validator) {
+            if (this.props.validator(value) == false) {
+                value = store;
+            }
+        }
         this.setState({ value: value });
         if (this.props.propertyName && !this.props.delayInput) {
             this.props.target[this.props.propertyName] = value;
@@ -50922,7 +50936,21 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? "" : this.state.value;
         const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder : this.props.placeholder || "";
         const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label }))), this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea", { value: this.state.value, onFocus: () => {
+                            if (this.props.lockObject) {
+                                this.props.lockObject.lock = true;
+                            }
+                        }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => {
+                            if (evt.keyCode !== 13) {
+                                return;
+                            }
+                            this.updateValue(this.state.value);
+                        }, onBlur: (evt) => {
+                            this.updateValue(evt.target.value);
+                            if (this.props.lockObject) {
+                                this.props.lockObject.lock = false;
+                            }
+                        } }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: () => {
                                 if (this.props.lockObject) {
                                     this.props.lockObject.lock = false;
                                 }
@@ -50931,7 +50959,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                                 if (this.props.lockObject) {
                                     this.props.lockObject.lock = true;
                                 }
-                            }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) })] })), this.props.unit] })));
+                            }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] }))), this.props.unit] })));
     }
 }