Skip to content

Commit

Permalink
Fixing loading of materialdesign widgets
Browse files Browse the repository at this point in the history 
https://github.com/ioBroker/ioBroker.vis/issues/544
  • Loading branch information
@GermanBluefox
GermanBluefox committed Nov 21, 2022
1 parent ca1fdfe commit c817bb3
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 9 deletions.
31 changes: 31 additions & 0 deletions src/src/App.jsx
View file
Expand Up @@ -1624,6 +1624,24 @@ class App extends GenericApp {
this.setState({ widgetsLoaded });
}

renderConfirmDialog() {
if (this.state.confirmDialog) {
return <ConfirmDialog
text={this.state.confirmDialog.message}
title={this.state.confirmDialog.title}
fullWidth={false}
ok={I18n.t('Ok')}
onClose={isYes => {
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 <StylesProvider generateClassName={generateClassName}>
Expand Down Expand Up @@ -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) {
Expand All @@ -1684,6 +1714,7 @@ class App extends GenericApp {
<StyledEngineProvider injectFirst>
<ThemeProvider theme={this.state.theme}>
{!simulatePreload ? <VisRxWidget /> : null}
{this.renderConfirmDialog()}
<Popper
open={!!Object.keys(this.state.widgetsClipboard.widgets).length}
style={{ width: '100%', textAlign: 'center', pointerEvents: 'none' }}
Expand Down
66 changes: 66 additions & 0 deletions src/src/Attributes/Widget/WidgetField.jsx
View file
Expand Up @@ -197,10 +197,63 @@ const WidgetField = props => {
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;

Expand Down Expand Up @@ -331,6 +384,19 @@ const WidgetField = props => {
</Fade>}
</Popper> : 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 <div ref={refCustom} dangerouslySetInnerHTML={{ __html: customLegacyComponent.input }} />;
}

if (field.type === 'id' || field.type === 'hid' || field.type === 'history') {
if (value && (!objectCache || value !== objectCache._id)) {
props.socket.getObject(value)
Expand Down
29 changes: 20 additions & 9 deletions src/src/Vis/visEngine.jsx
View file
Expand Up @@ -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 });
Expand Down Expand Up @@ -276,6 +277,7 @@ class VisEngine extends React.Component {

createLegacyVisObject() {
return {
version: 2,
states: this.canStates,
objects: {},
isTouch: this.isTouch,
Expand Down Expand Up @@ -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
};
}

Expand Down Expand Up @@ -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))
Expand Down
2 changes: 2 additions & 0 deletions src/src/i18n/en.json
View file
Expand Up @@ -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",
Expand Down

0 comments on commit c817bb3

Please sign in to comment.