feat(form): add visibleIfLogical logical type (#1496)

Author: cipchk

packages/form/docs/schema.en-US.md

@@ -264,8 +264,9 @@ Equals to `<sf [ui]="ui">`, a group of UI structure corresponds to JSON Schema s
 | `[debug]` | Debug mode | `boolean` | - |
 | `[order]` | Order of property | `string[]` | - |
 | `[asyncData]` | Asynchronized static data source | `(input?: any) => Observable<SFSchemaEnumType[]>` | - |
-| `[hidden]` | If hide | `boolean` | `false` |
+| `[hidden]` | Whether to hide | `boolean` | `false` |
 | `[visibleIf]` | Is visible with conditions | `{ [key: string]: any[] | ((value: any, property: FormProperty) => boolean) }` | - |
+| `[visibleIfLogical]` | The logical used when specifying multiple `visibleIf` | `or, and` | `or` |
 | `[acl]` | ACL permission (Use `can()` verify) | `ACLCanType` | - |
 
 **visibleIf**

packages/form/docs/schema.zh-CN.md

@@ -266,6 +266,7 @@ UI Schema 结构由通用性和小部件API两部分组成，以下是通用性
 | `[asyncData]` | 异步静态数据源 | `(input?: any) => Observable<SFSchemaEnumType[]>` | - |
 | `[hidden]` | 是否隐藏渲染 | `boolean` | `false` |
 | `[visibleIf]` | 指定条件时才显示 | `{ [key: string]: any[] | ((value: any, property: FormProperty) => boolean) }` | - |
+| `[visibleIfLogical]` | 指定多个 `visibleIf` 时采用的逻辑关系 | `or, and` | `or` |
 | `[acl]` | ACL权限，等同 `can()` 参数值 | `ACLCanType` | - |
 
 **visibleIf**

packages/form/spec/schema.spec.ts

@@ -459,6 +459,58 @@ describe('form: schema', () => {
       labels[1].click();
       page.checkCount('.j-mobile', 0).checkCount('.j-name', 1).checkCount('.j-any', 1);
     });
+    it('logical or', fakeAsync(() => {
+      page.newSchema({
+        properties: {
+          show: {
+            type: 'boolean',
+            ui: {
+              visibleIf: { t1: ['$ANY$'], t2: ['$ANY$'] },
+              visibleIfLogical: 'or',
+              class: 'vi-show'
+            }
+          },
+          t1: {
+            type: 'string',
+            ui: { class: 'vi-t1' }
+          },
+          t2: {
+            type: 'string',
+            ui: { class: 'vi-t2' }
+          }
+        }
+      });
+      page.typeChar('t1', '.vi-t1 input');
+      page.checkCount('.vi-show', 1);
+      page.typeChar('t2', '.vi-t2 input');
+      page.checkCount('.vi-show', 1);
+    }));
+    it('logical and', fakeAsync(() => {
+      page.newSchema({
+        properties: {
+          show: {
+            type: 'boolean',
+            ui: {
+              visibleIf: { t1: ['$ANY$'], t2: ['$ANY$'] },
+              visibleIfLogical: 'and',
+              class: 'vi-show'
+            }
+          },
+          t1: {
+            type: 'string',
+            ui: { class: 'vi-t1' }
+          },
+          t2: {
+            type: 'string',
+            ui: { class: 'vi-t2' }
+          }
+        }
+      });
+      page.typeChar('t1', '.vi-t1 input');
+      page.checkCount('.vi-show', 0);
+      page.typeChar('t2', '.vi-t2 input');
+      page.checkCount('.vi-show', 1);
+    }));
   });
 
   describe('[order]', () => {

packages/form/src/model/form.property.ts

@@ -364,7 +364,7 @@ export abstract class FormProperty {
 
       combineLatest(propertiesBinding)
         .pipe(
-          map(values => values.indexOf(true) !== -1),
+          map(values => (this.ui.visibleIfLogical === 'and' ? values.every(v => v) : values.some(v => v))),
           distinctUntilChanged()
         )
         .subscribe(visible => this.setVisible(visible));

packages/form/src/schema/ui.ts

@@ -183,25 +183,33 @@ export interface SFVisibleIf {
 export interface SFUISchemaItem extends SFRenderSchema, SFHorizontalLayoutSchema, ErrorSchema, SFSchemaI18n {
   [key: string]: NzSafeAny;
 
-  /** 是否开启调试模式，在数据变更、校验会打印出相信信息，不建议在生产环境中使用 */
+  /**
+   * Whether to enable the debug mode, the trust information will be printed out when the data is changed and verified, it is not recommended to use it in the production environment
+   *
+   * 是否开启调试模式，在数据变更、校验会打印出相信信息，不建议在生产环境中使用
+   */
   debug?: boolean;
 
   /**
-   * 属性顺序
+   * Order of property
    *
-   * 当你只想某几个属性靠前时，则允许使用通配符 `*` 来表示剩余部分，且只允许出现一次
+   * 属性顺序，当你只想某几个属性靠前时，则允许使用通配符 `*` 来表示剩余部分，且只允许出现一次
    *
    * @example
    *
    * [ 'a', 'b', 'c', 'd' ] + [ 'c', 'b', '*' ] = [ 'c', 'b', 'a', 'd']
    */
   order?: string[];
   /**
+   * Whether to hide
+   *
    * 是否隐藏
    */
   hidden?: boolean;
   /**
-   * 指定条件时才显示，但需要**注意**：
+   * Is visible with conditions (When there are multiple, you can specify logic vis `visibleIfLogical`)
+   *
+   * 指定条件时才显示（当多个时可以通过 `visibleIfLogical` 来指定处理逻辑），但需要**注意**：
    * - 键值表示监听对象属性名
    * - JSON Schema 校验是各属性独立运行，监听对象属性每一次值变化都会重新做一次整个JSON结构计算
    *
@@ -212,6 +220,13 @@ export interface SFUISchemaItem extends SFRenderSchema, SFHorizontalLayoutSchema
    */
   visibleIf?: SFVisibleIf;
 
+  /**
+   * The logical used when specifying multiple `visibleIf`, default: `or`
+   *
+   * 指定多个 `visibleIf` 时采用的逻辑关系，默认：`or`
+   */
+  visibleIfLogical?: 'or' | 'and';
+
   /**
    * ACL 配置
    */
@@ -228,7 +243,7 @@ export interface SFUISchema {
 }
 
 /**
- * 内部运行时使用
+ * @inner
  */
 export interface SFUISchemaItemRun extends SFUISchemaItem {
   /** @internal 自定义模板 */