github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 09:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 🐛 style setter not working

Browse Source
This commit is contained in:
林熠 2020-05-05 18:29:22 +08:00
parent b05da1e0ec
commit c88ea6bf4e
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-simulator-renderer/package.json
View File

@ -21,6 +21,7 @@
"@recore/obx-react": "^1.0.7",
"classnames": "^2.2.6",
"react": "^16",
"@ali/vu-css-style": "^1.0.2",
"react-dom": "^16.7.0"
},
"devDependencies": {

30
packages/react-simulator-renderer/src/renderer-view.tsx
View File

@ -1,9 +1,11 @@
import LowCodeRenderer from '@ali/lowcode-react-renderer';
import { isObject } from 'lodash';
import { ReactInstance, Fragment, Component, createElement } from 'react';
import { observer } from '@recore/obx-react';
import { SimulatorRenderer } from './renderer';
import { host } from './host';
import './renderer.less';
import { toCss } from '@ali/vu-css-style';
// patch cloneElement avoid lost keyProps
const originCloneElement = window.React.cloneElement;
@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
const { __id, __desingMode, ...viewProps } = props;
viewProps.componentId = __id;
viewProps._leaf = host.document.getNode(__id);
// FIXME: 此处未来使用propsReducer方式处理
this.createNodeStyleSheet(viewProps);
return createElement(
Component,
viewProps,
@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
/>
);
}
createNodeStyleSheet(props: any) {
if (props && props.fieldId) {
let styleProp = props.__style__;
if (isObject(styleProp)) {
styleProp = toCss(styleProp);
}
if (typeof styleProp === 'string') {
const s = document.createElement('style');
const cssId = '_style_pesudo_' + props.fieldId;
const cssClass = '_css_pesudo_' + props.fieldId;
props.className = cssClass;
s.setAttribute('type', 'text/css');
s.setAttribute('id', cssId);
document.getElementsByTagName('head')[0].appendChild(s);
s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
return s;
}
}
}
}