Match-id-ac445db2e485455abef2949c4b164bce40563107

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.0.40 (2023-03-08)
+- **core**: #103 使用Memo、React.forwardRef包装组件后，defaultProps失效
+- **core**: #104 --max-segment-num的style无法使用
+- **core**: 状态管理器的优化
+
 ## 0.0.39 (2023-02-21)
 - **core**: #102 使用eview-react组件Dialog时，关闭组件horizon报错，且无法再打开弹框
 

libs/horizon/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "horizon"
   ],
-  "version": "0.0.39",
+  "version": "0.0.40",
   "homepage": "",
   "bugs": "",
   "main": "index.js",

libs/horizon/src/dom/DOMPropertiesHandler/StyleHandler.ts

@@ -54,8 +54,12 @@ export function setStyles(dom, styles) {
   const style = dom.style;
   Object.keys(styles).forEach(name => {
     const styleVal = styles[name];
-
-    style[name] = adjustStyleValue(name, styleVal);
+    // 以--开始的样式直接设置即可
+    if (name.indexOf('--') === 0) {
+      style.setProperty(name, styleVal);
+    } else {
+      style[name] = adjustStyleValue(name, styleVal);
+    }
   });
 }
 

libs/horizon/src/renderer/render/MemoComponent.ts

@@ -31,7 +31,9 @@ export function bubbleRender() {}
 export function captureMemoComponent(processing: VNode, shouldUpdate: boolean): VNode | null {
   const Component = processing.type;
   // 合并 函数组件或类组件 的defaultProps
-  const newProps = mergeDefaultProps(Component, processing.props);
+  let newProps = mergeDefaultProps(Component, processing.props);
+  // 解决Horizon.memo(Horizon.forwardRef(()=>{}))两层包装的场景
+  newProps = mergeDefaultProps(Component.type, newProps);
 
   if (processing.isCreated) {
     let newChild: VNode | null = null;

scripts/__tests__/ComponentTest/FunctionComponent.test.js

@@ -60,4 +60,34 @@ describe('FunctionComponent Test', () => {
     expect(realNode).toBe(null);
   });
 
+  it('测试函数组件的defaultProps：Horizon.memo(Horizon.forwardRef(()=>{}))两层包装的场景后，defaultProps依然正常', () => {
+    const App = () => {
+      return <DefaultPropsCompMemo />;
+    };
+
+    const DefaultPropsComp = Horizon.forwardRef(props => {
+      return <div>{props.name}</div>;
+    });
+    DefaultPropsComp.defaultProps = {
+      name: 'Hello!',
+    };
+    const DefaultPropsCompMemo = Horizon.memo(DefaultPropsComp);
+
+    Horizon.render(<App />, container);
+    expect(container.querySelector('div').innerHTML).toBe('Hello!');
+  });
+
+  it('测试', () => {
+    const App = () => {
+      return <StyleComp />;
+    };
+
+    const StyleComp = props => {
+      return <div style={{ '--max-segment-num': 10 }}>{props.name}</div>;
+    };
+
+    Horizon.render(<App />, container);
+    expect(container.querySelector('div').style['_values']['--max-segment-num']).toBe(10);
+  });
+
 });