From c817bb3a1afa76cf5827267952c116284e04bc68 Mon Sep 17 00:00:00 2001 From: GermanBluefox Date: Mon, 21 Nov 2022 23:08:23 +0100 Subject: [PATCH] Fixing loading of materialdesign widgets https://github.com/ioBroker/ioBroker.vis/issues/544 --- src/src/App.jsx | 31 +++++++++++ src/src/Attributes/Widget/WidgetField.jsx | 66 +++++++++++++++++++++++ src/src/Vis/visEngine.jsx | 29 ++++++---- src/src/i18n/en.json | 2 + 4 files changed, 119 insertions(+), 9 deletions(-) diff --git a/src/src/App.jsx b/src/src/App.jsx index 711a6fafd..6998963b4 100644 --- a/src/src/App.jsx +++ b/src/src/App.jsx @@ -1624,6 +1624,24 @@ class App extends GenericApp { this.setState({ widgetsLoaded }); } + renderConfirmDialog() { + if (this.state.confirmDialog) { + return { + const callback = this.state.confirmDialog.callback; + this.setState({ confirmDialog: null }, () => + typeof callback === 'function' && callback(isYes)); + }} + />; + } + + return null; + } + render() { if (!this.state.loaded || !this.state.project || !this.state.groups) { return @@ -1672,6 +1690,18 @@ class App extends GenericApp { theme={this.state.theme} adapterId={this.adapterId} editModeComponentClass={this.props.classes.editModeComponentClass} + onConfirmDialog={(message, title, icon, width, callback) => { + console.log(message); + this.setState({ + confirmDialog: { + message, + title, + icon, + width, + callback, + }, + }); + }} />; if (this.state.runtime) { @@ -1684,6 +1714,7 @@ class App extends GenericApp { {!simulatePreload ? : null} + {this.renderConfirmDialog()} { disabled, } = props; + let customLegacyComponent = null; + + if (field.type?.startsWith('custom,')) { + const options = field.type.split(','); + options.shift(); // remove custom + const funcs = options[0].split('.'); + options.shift(); // remove function name + if (funcs[0] === 'vis') funcs.shift(); + if (funcs[0] === 'binds') funcs.shift(); + if (funcs.length === 1) { + if (typeof window.vis.binds[funcs[0]] === 'function') { + try { + window._ = window.vis._; // for old widgets, else lodash overwrites it + window.vis.activeWidgets = [...props.selectedWidgets]; + customLegacyComponent = window.vis.binds[funcs[0]](field.name, options); + } catch (e) { + console.error(`vis.binds.${funcs.join('.')}: ${e}`); + } + } else { + console.log(`No function: vis.binds.${funcs.join('.')}`); + } + } else if (funcs.length === 2) { + if (window.vis.binds[funcs[0]] && typeof window.vis.binds[funcs[0]][funcs[1]] === 'function') { + try { + window._ = window.vis._; // for old widgets, else lodash overwrites it + window.vis.activeWidgets = [...props.selectedWidgets]; + customLegacyComponent = window.vis.binds[funcs[0]][funcs[1]](field.name, options); + } catch (e) { + console.error(`vis.binds.${funcs.join('.')}: ${e}`); + } + } else { + console.log(`No function: vis.binds.${funcs.join('.')}`); + } + } else if (funcs.length === 3) { + if (window.vis.binds[funcs[0]] && window.vis.binds[funcs[0]][funcs[1]] && typeof window.vis.binds[funcs[0]][funcs[1]][funcs[2]] === 'function') { + try { + window._ = window.vis._; // for old widgets, else lodash overwrites it + window.vis.activeWidgets = [...props.selectedWidgets]; + customLegacyComponent = window.vis.binds[funcs[0]][funcs[1]][funcs[2]](field.name, options); + } catch (e) { + console.error(`vis.binds.${funcs.join('.')}: ${e}`); + } + } else { + console.log(`No function: vis.binds.${funcs.join('.')}`); + } + } else if (!funcs.length) { + console.log('Function name is too short: vis.binds'); + } else { + console.log(`Function name is too long: vis.binds.${funcs.join('.')}`); + } + } + const [cachedValue, setCachedValue] = useState(''); const [instances, setInstances] = useState([]); const cacheTimer = useRef(null); + const refCustom = useRef(); let onChangeTimeout; @@ -331,6 +384,19 @@ const WidgetField = props => { } : null; + // part for customLegacyComponent + useEffect(() => { + if (customLegacyComponent && refCustom.current && typeof customLegacyComponent.init === 'function') { + customLegacyComponent.init.call(refCustom.current, field.name, propValue); + } + }, []); + + if (customLegacyComponent) { + // console.log(customLegacyComponent.input); + // eslint-disable-next-line react/no-danger + return
; + } + if (field.type === 'id' || field.type === 'hid' || field.type === 'history') { if (value && (!objectCache || value !== objectCache._id)) { props.socket.getObject(value) diff --git a/src/src/Vis/visEngine.jsx b/src/src/Vis/visEngine.jsx index 48e5cf3cf..1491a9b71 100644 --- a/src/src/Vis/visEngine.jsx +++ b/src/src/Vis/visEngine.jsx @@ -165,6 +165,7 @@ class VisEngine extends React.Component { this.canStates = this.initCanObjects(); this.vis = this.createLegacyVisObject(); + window._ = this.vis._; window.vis = this.vis; this.formatUtils = new VisFormatUtils({ vis: this.vis }); @@ -276,6 +277,7 @@ class VisEngine extends React.Component { createLegacyVisObject() { return { + version: 2, states: this.canStates, objects: {}, isTouch: this.isTouch, @@ -512,6 +514,21 @@ class VisEngine extends React.Component { }, formatBinding: (format, view, wid, widget, widgetData, values) => this.formatUtils.formatBinding(format, view, wid, widget, widgetData, values), + getViewOfWidget: id => { + // find view of this widget + for (const v in this.props.views) { + if (v === '___settings') { + continue; + } + if (this.props.views[v]?.widgets && this.props.views[v].widgets[id]) { + return v; + } + } + return null; + }, + confirmMessage: (message, title, icon, width, callback) => + this.props.onConfirmDialog(message, title, icon, width, callback), + config: {}, // storage of dialog positions and size }; } @@ -810,17 +827,11 @@ class VisEngine extends React.Component { emit: (cmd, data, cb) => { let promise; if (cmd === 'getObject') { - promise = this.props.socket.getObject(data) - .then(obj => cb && cb(null, obj)) - .catch(error => cb && cb(error)); + promise = this.props.socket.getObject(data); } else if (cmd === 'getState') { - promise = this.props.socket.getState(data) - .then(obj => cb && cb(null, obj)) - .catch(error => cb && cb(error)); + promise = this.props.socket.getState(data); } else if (cmd === 'getStates') { - promise = this.props.socket.getStates(data) - .then(obj => cb && cb(null, obj)) - .catch(error => cb && cb(error)); + promise = this.props.socket.getStates(data); } if (promise) { promise.then(obj => cb && cb(null, obj)) diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json index 7324101f1..be64f9528 100644 --- a/src/src/i18n/en.json +++ b/src/src/i18n/en.json @@ -258,6 +258,8 @@ "iPad Air - Landscape": "iPad Air - Landscape", "iPad Mini - Portrait": "iPad Mini - Portrait", "iPad Mini - Landscape": "iPad Mini - Landscape", + "iPad Pro - Portrait": "iPad Pro - Portrait", + "iPad Pro - Landscape": "iPad Pro - Landscape", "Surface Pro 7 - Portrait": "Surface Pro 7 - Portrait", "Surface Pro 7 - Landscape": "Surface Pro 7 - Landscape", "Surface Duo - Portrait": "Surface Duo - Portrait",