feat: 进入视图才执行动画 (baidu#11342)

* feat: 进入视图才执行动画 * 入场动画支持配置重复 * 优化 * bugfxi * 样式微调
2betop · Dec 10, 2024 · 8add803 · 8add803
1 parent ed7d39c
commit 8add803
Show file tree

Hide file tree

Showing 43 changed files with 2,418 additions and 335 deletions.
diff --git a/examples/components/EventAction/update-data/SetVariable.jsx b/examples/components/EventAction/update-data/SetVariable.jsx
@@ -5,22 +5,24 @@ import update from 'lodash/update';
 import isEqual from 'lodash/isEqual';
 import {cloneObject, setVariable} from 'amis-core';
 
-const namespace = 'appVariables';
-const initData = JSON.parse(sessionStorage.getItem(namespace)) || {
-  ProductName: 'BCC',
-  Banlance: 1234.888,
-  ProductNum: 10,
-  isOnline: false,
-  ProductList: ['BCC', 'BOS', 'VPC'],
-  PROFILE: {
-    FirstName: 'Amis',
-    Age: 18,
-    Address: {
-      street: 'ShangDi',
-      postcode: 100001
-    }
+const variables = [
+  {
+    key: 'xxx',
+    defaultValue: 'yyy'
+  },
+
+  {
+    key: 'ProductName',
+    defaultValue: ''
+  },
+
+  {
+    key: 'count',
+    defaultValue: 0,
+    scope: 'page',
+    storageOn: 'client'
   }
-};
+];
 
 export default {
   /** schema配置 */
@@ -30,7 +32,7 @@ export default {
     body: [
       {
         type: 'tpl',
-        tpl: '变量的命名空间通过环境变量设置为了<code>appVariables</code>, 可以通过\\${appVariables.xxx}来取值'
+        tpl: '变量的命名空间通过环境变量设置为了<code>global</code>, 可以通过\\${global.xxx}来取值'
       },
       {
         type: 'container',
@@ -43,12 +45,12 @@ export default {
         body: [
           {
             type: 'tpl',
-            tpl: '<h2>数据域appVariables</h2>'
+            tpl: '<h2>数据域global</h2>'
           },
           {
             type: 'json',
             id: 'u:44521540e64c',
-            source: '${appVariables}',
+            source: '${global}',
             levelExpand: 10
           },
           {
@@ -59,7 +61,7 @@ export default {
           },
           {
             type: 'tpl',
-            tpl: '<h3>变量中的<code>ProductName (\\${appVariables.ProductName})</code>: <strong>${appVariables.ProductName|default:-}</strong></h3>',
+            tpl: '<h3>变量中的<code>ProductName (\\${global.ProductName})</code>: <strong>${global.ProductName|default:-}</strong></h3>',
             inline: false,
             id: 'u:98ed5c5534ef'
           }
@@ -82,7 +84,7 @@ export default {
                 actions: [
                   {
                     args: {
-                      path: 'appVariables.ProductName',
+                      path: 'global.ProductName',
                       value: '${event.data.value}'
                     },
                     actionType: 'setValue'
@@ -95,8 +97,31 @@ export default {
             type: 'static',
             label: '产品名称描述',
             id: 'u:7bd4e2a4f95e',
-            value: '${appVariables.ProductName}',
+            value: '${global.ProductName}',
             name: 'staticName'
+          },
+
+          {
+            type: 'input-number',
+            label: 'Count (client)',
+            description: '存储自动存入客户端，刷新页面后数据还在',
+            id: 'u:7bd4e2a4f95e',
+            value: '${global.count}',
+            name: 'count',
+            onEvent: {
+              change: {
+                weight: 0,
+                actions: [
+                  {
+                    args: {
+                      path: 'global.count',
+                      value: '${event.data.value}'
+                    },
+                    actionType: 'setValue'
+                  }
+                ]
+              }
+            }
           }
         ],
         id: 'u:dc2580fa447a'
@@ -109,7 +134,7 @@ export default {
         actions: [
           {
             args: {
-              path: 'appVariables.ProductName',
+              path: 'global.ProductName',
               value: '${event.data.ProductName}'
             },
             actionType: 'setValue'
@@ -119,51 +144,6 @@ export default {
     }
   },
   props: {
-    data: {[namespace]: JSON.parse(sessionStorage.getItem(namespace))}
-  },
-  /** 环境变量 */
-  env: {
-    beforeSetData: (renderer, action, event) => {
-      const value = event?.data?.value ?? action?.args?.value;
-      const path = action?.args?.path;
-      const {session = 'global'} = renderer.props?.env ?? {};
-      const comptList = event?.context?.scoped?.getComponentsByRefPath(
-        session,
-        path
-      );
-
-      for (let component of comptList) {
-        const {$path: targetPath, $schema: targetSchema} = component?.props;
-        const {$path: triggerPath, $schema: triggerSchema} = renderer?.props;
-
-        if (
-          !component.setData &&
-          (targetPath === triggerPath || isEqual(targetSchema, triggerSchema))
-        ) {
-          continue;
-        }
-
-        if (component?.props?.onChange) {
-          const submitOnChange = !!component.props?.$schema?.submitOnChange;
-
-          component.props.onChange(value, submitOnChange, true);
-        } else if (component?.setData) {
-          const currentData = JSON.parse(
-            sessionStorage.getItem(namespace) || JSON.stringify(initData)
-          );
-          const varPath = path.replace(/^appVariables\./, '');
-
-          update(currentData, varPath, origin => {
-            return typeof value === typeof origin ? value : origin;
-          });
-
-          sessionStorage.setItem(namespace, JSON.stringify(currentData));
-          const newCtx = cloneObject(component?.props?.data ?? {});
-          setVariable(newCtx, path, value, true);
-
-          component.setData(newCtx, false);
-        }
-      }
-    }
+    globalVars: variables
   }
 };
diff --git a/examples/components/Example.jsx b/examples/components/Example.jsx
@@ -668,12 +668,7 @@ export const examples = [
               {
                 label: '更新全局变量数据',
                 path: '/examples/action/setdata/variable',
-                component: makeSchemaRenderer(
-                  SetVariable.schema,
-                  SetVariable.props ?? {},
-                  true,
-                  SetVariable.env
-                )
+                component: makeSchemaRenderer(SetVariable)
               }
             ]
           },

diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx
@@ -42,6 +42,15 @@ export default function (schema, schemaProps, showCode, envOverrides) {
     };
   }
 
+  if (!schema.type && schema.schema) {
+    schemaProps = schema.props;
+    envOverrides = schema.env;
+    showCode = schema.showCode ?? true;
+    schema = {
+      ...schema.schema
+    };
+  }
+
   return withRouter(
     class extends React.Component {
       static displayName = 'SchemaRenderer';

diff --git a/packages/amis-core/src/Root.tsx b/packages/amis-core/src/Root.tsx
@@ -16,11 +16,14 @@ import {
   StatusScopedWrapper,
   StatusScopedProps
 } from './StatusScoped';
+import {GlobalVariableItem} from './globalVar';
 
 export interface RootRenderProps {
+  globalVars?: Array<GlobalVariableItem>;
   location?: Location;
   theme?: string;
   data?: Record<string, any>;
+  context?: Record<string, any>;
   locale?: string;
   [propName: string]: any;
 }

diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx
@@ -38,6 +38,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
     this.store.updateContext(props.context);
     this.store.initData(props.data);
     this.store.updateLocation(props.location, this.props.env?.parseLocation);
+    this.store.setGlobalVars(props.globalVars);
 
     // 将数据里面的函数批量的绑定到 this 上
     bulkBindFunctions<RootRenderer /*为毛 this 的类型自动识别不出来？*/>(this, [
@@ -97,6 +98,11 @@ export class RootRenderer extends React.Component<RootRendererProps> {
   componentDidUpdate(prevProps: RootRendererProps) {
     const props = this.props;
 
+    // 更新全局变量
+    if (props.globalVars !== prevProps.globalVars) {
+      this.store.setGlobalVars(props.globalVars);
+    }
+
     if (props.location !== prevProps.location) {
       this.store.updateLocation(props.location, this.props.env?.parseLocation);
     }
@@ -521,7 +527,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
   }
 
   render() {
-    const {pathPrefix, schema, render, ...rest} = this.props;
+    const {pathPrefix, schema, render, globalVars, ...rest} = this.props;
     const store = this.store;
 
     if (store.runtimeError) {