fix(layout): 修复Computed组件无法监听上下文变量的问题与无法返回0的问题

TRPGEngine · Feb 19, 2020 · 2e8eeec · 2e8eeec
1 parent 166cb8c
commit 2e8eeec
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/src/playground/actor-editor.tsx b/src/playground/actor-editor.tsx
@@ -235,6 +235,7 @@ const ActorEditor = React.memo(() => {
         enableClipboard={false}
         displayObjectSize={false}
         displayDataTypes={false}
+        collapsed={1}
       />
     );
   }, [currentGlobal, renderKey]);

diff --git a/src/playground/editor/example/xml/coc7.xml b/src/playground/editor/example/xml/coc7.xml
@@ -152,11 +152,42 @@
     </FieldSet>
 
     <FieldSet label="技能">
+      <Function name="getSkillInfo" params="skillName" body="return _find(global.skill, ['name', skillName])" />
+
       <Row :gutter="16">
         <Col sm="16">
+          <Define name="skill">
+            <Computed target="基础" deps="props.skillName" expression="getSkillInfo(props.skillName).base" />
+            <tr>
+              <td><span>{{props.skillName}}</span></td>
+              <td><span>{{基础}}</span></td>
+              <td><Input name="成长" hideLabel="true" /></td>
+              <td><Input name="职业" hideLabel="true" /></td>
+              <td><Input name="兴趣" hideLabel="true" /></td>
+              <td>{{SUM(基础, 成长, 职业, 兴趣)}}</td>
+            </tr>
+          </Define>
+
           <Tabs>
-            <Tab label="本职"></Tab>
-            <Tab label="交流"></Tab>
+            <Tab label="本职">
+            </Tab>
+            <Tab label="交流">
+              <table>
+                <thead>
+                  <tr>
+                    <td>技能</td>
+                    <td>初始</td>
+                    <td>成长</td>
+                    <td>职业</td>
+                    <td>兴趣</td>
+                    <td>成功率</td>
+                  </tr>
+                </thead>
+                <tbody>
+                  <Use name="skill-会计" define="skill" skillName="信用评级" />
+                </tbody>
+              </table>
+            </Tab>
             <Tab label="探索"></Tab>
             <Tab label="运动"></Tab>
             <Tab label="技能"></Tab>

diff --git a/src/shared/components/layout/tags/Base/shared.tsx b/src/shared/components/layout/tags/Base/shared.tsx
@@ -51,7 +51,7 @@ export const TagBaseShared: TagComponent = React.memo((props) => {
   const Tag = normalizeTagName(tagName);
 
   if (Tag === React.Fragment) {
-    return React.createElement(Tag, { key: props.key }, childrens);
+    return React.createElement(Tag, {}, childrens);
   }
 
   // 是HTML元素

diff --git a/src/shared/components/layout/tags/Computed/shared.tsx b/src/shared/components/layout/tags/Computed/shared.tsx
@@ -8,6 +8,7 @@ import { TagComponent } from '../type';
 import { LayoutStateContext } from '../../context/LayoutStateContext';
 import { parseDataText } from '../../processor';
 import { useLayoutFieldState } from '../../hooks/useLayoutFieldState';
+import { getStateValue } from '../utils';
 
 interface TagProps {
   deps: string | string[];
@@ -26,7 +27,8 @@ export const TagComputedShared: TagComponent<TagProps> = React.memo((props) => {
     return props.deps;
   }, [props.deps]);
 
-  const watchValues = deps.map((name) => context.state.data[name]);
+  const watchValues = deps.map((name) => getStateValue(context, name));
+
   useEffect(() => {
     if (deps.includes(props.target)) {
       console.warn('circle deps:', deps, props.target);
@@ -35,7 +37,7 @@ export const TagComputedShared: TagComponent<TagProps> = React.memo((props) => {
 
     const value = parseDataText(`{{(${props.expression})}}`, context);
 
-    setStateValue(value || null);
+    setStateValue(value ?? null);
   }, [...watchValues, props.target, props.expression]);
 
   return null;