feat(ncform): Add the globalConfig.scrollToFailField to support auto …

…scroll to the first validation re ncform#102
kimamov · Oct 16, 2019 · a78362f · a78362f
1 parent f5fa0be
commit a78362f
Show file tree

Hide file tree

Showing 8 changed files with 4,452 additions and 2,906 deletions.
diff --git a/CONFIG.md b/CONFIG.md
@@ -136,6 +136,12 @@
     },
     constants: { // Global constant configuration, can be accessed by {{$const.userName}}
       userName: 'daniel'
+    },
+    scrollToFailField: { // Automatically scroll to fields that failed validation
+      enabled: true, // Enable this feature or not
+      container: 'body', // The container that has to be scrolled.
+      duration: 500, // The duration (in milliseconds) of the scrolling animation
+      offset: -80, // The offset that should be applied when scrolling. 
     }
   }
 }

diff --git a/CONFIG_CN.md b/CONFIG_CN.md
@@ -137,6 +137,12 @@
     },
     constants: { // 全局常量配置，可在dx表达中通过{{$const.}}来访问，如{{$const.userName}}
       userName: 'daniel'
+    },
+    scrollToFailField: { // 自动滚动到校验失败的字段
+      enabled: true, // 是否开启
+      container: 'body', // 滚动的容器。
+      duration: 500, // 滚动动画的持续时间(以毫秒为单位)
+      offset: -80, // 滚动时的偏移量
     }
   }
 }

diff --git a/packages/ncform-common/src/ncform-utils.js b/packages/ncform-common/src/ncform-utils.js
@@ -142,6 +142,12 @@ const ncformUtils = {
           validationMsg: {},
           constants: {
             // 常量数据，可通过{{$const.}}访问
+          },
+          scrollToFailField: { // Automatically scroll to fields that failed validation
+            enabled: true, // enable this feature or not
+            container: 'body',
+            duration: 500, // The duration (in milliseconds) of the scrolling animation
+            offset: -80, // The offset that should be applied when scrolling.
           }
         };
         newFieldVal.globalConfig = newFieldVal.globalConfig || {};

diff --git a/packages/ncform-common/test/unit/ncform-utils.js b/packages/ncform-common/test/unit/ncform-utils.js
@@ -84,7 +84,13 @@ describe('/src/ncform-utils.js', () => {
         invalidFeedbackCls: ""
       },
       validationMsg: {},
-      constants: {}
+      constants: {},
+      scrollToFailField: { // Automatically scroll to fields that failed validation
+        enabled: true, // enable this feature or not
+        container: 'body',
+        duration: 500, // The duration (in milliseconds) of the scrolling animation
+        offset: -80, // The offset that should be applied when scrolling.
+      }
     })
     assert.equal(newFormSchema.properties.name.ui.label, 'name');
     assert.equal(newFormSchema.properties.name.ui.showLabel, true);

diff --git a/packages/ncform/examples/components/vue-ncform/_globalConfig.html b/packages/ncform/examples/components/vue-ncform/_globalConfig.html
@@ -27,7 +27,7 @@ <h4>[CASE] {{ item.title }}</h4>
           <div v-if="item.validPass !== undefined">valid pass: {{ item.validPass }}</div>
 
           <button
-            v-if="['ignoreRulesWhenHidden is true', 'ignoreRulesWhenHidden is false'].indexOf(item.title) >= 0"
+            v-if="['ignoreRulesWhenHidden is true', 'ignoreRulesWhenHidden is false', 'auto scroll to first error'].indexOf(item.title) >= 0"
             class="btn btn-primary"
             @click="submit(item)"
           >
@@ -191,6 +191,39 @@ <h4>[CASE] {{ item.title }}</h4>
                   }
                 }
               }
+            },
+            {
+              id: md5('auto scroll to first error'),
+              title: 'auto scroll to first error',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  name: {
+                    type: 'string',
+                    rules: {
+                      required: true
+                    }
+                  },
+                  a1: {
+                    type: 'string',
+                  },
+                  a2: {
+                    type: 'string',
+                  },
+                  a3: {
+                    type: 'string',
+                  }
+                },
+                globalConfig: {
+                  scrollToFailField: {
+                    enabled: true,
+                    container: 'body',
+                    duration: 1000,
+                    offset: -120,
+                  }
+                }
+              }
             }
           ]
         },