@senx/discovery-code
Version:
Discovery Code Editor
185 lines (184 loc) • 6.22 kB
JavaScript
/*
* Copyright 2022-2023 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { Config } from "../../model/config";
import { Logger } from "../../model/logger";
import { Utils } from "../../model/utils";
import { JsonLib } from "../../model/jsonLib";
export class DiscoveryCodeImageResult {
constructor() {
this.theme = undefined;
this.config = new Config();
this.debug = false;
this.result = undefined;
this.loading = false;
this.imageList = [];
this.innerResult = undefined;
this.innerTheme = undefined;
this.innerConfig = undefined;
this.LOG = new Logger(DiscoveryCodeImageResult, this.debug);
}
setDebug(newValue) {
this.LOG.setDebug(newValue);
}
setTheme(newValue) {
this.innerTheme = newValue;
}
setResult(newValue) {
this.loading = true;
if (typeof newValue === 'string') {
this.innerResult = new JsonLib().parse(newValue || '[]', undefined);
}
else {
this.innerResult = newValue;
}
this.LOG.debug(['isArray'], 'The new value of result is: ', this.innerResult);
this.imageList = undefined;
if (this.innerResult && Utils.isArray(this.innerResult)) {
this.imageList = this.innerResult.filter((v) => ((typeof (v) === 'string') && (String(v).startsWith('data:image/png;base64,'))));
}
else {
this.imageList = [];
}
this.loading = false;
setTimeout(() => this.imageList = this.imageList.slice());
}
componentWillLoad() {
this.setTheme(this.theme);
this.setResult(this.result);
}
isArray(arr) {
return Utils.isArray(arr);
}
render() {
return h("div", { key: '4cadf1281ef8f9e1472c51e56b0e0231e006236d', class: 'wrapper-result ' + this.innerTheme }, this.innerResult && this.isArray(this.innerResult)
? h("div", { class: this.innerTheme + ' image' }, this.imageList.map((img, i) => h("div", { class: "image" }, h("h2", null, "Image ", i + 1), h("img", { src: img, alt: "Image" }))))
: '');
}
static get is() { return "discovery-code-image-result"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-code-image-result.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-code-image-result.css"]
};
}
static get properties() {
return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light' | 'dark'",
"resolved": "\"dark\" | \"light\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": false
},
"config": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Config | string",
"resolved": "Config | string",
"references": {
"Config": {
"location": "import",
"path": "../../model/config",
"id": "src/model/config.ts::Config"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "config",
"reflect": false,
"defaultValue": "new Config()"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"result": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | any[]",
"resolved": "any[] | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "result",
"reflect": false
}
};
}
static get states() {
return {
"loading": {},
"imageList": {},
"innerResult": {},
"innerTheme": {},
"innerConfig": {}
};
}
static get watchers() {
return [{
"propName": "debug",
"methodName": "setDebug"
}, {
"propName": "theme",
"methodName": "setTheme"
}, {
"propName": "result",
"methodName": "setResult"
}];
}
}