feat(form:widget:text): add htmlproperty (#1367)

ng-alain · Oct 28, 2021 · d07bcdd · d07bcdd
1 parent bf2ff5d
commit d07bcdd
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 9 deletions.
diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md
@@ -26,6 +26,32 @@ Common mistakes under Angular, the use of Reactive Forms requires the introducti
 
 The NG-ZORRO and @delon/* components work in OnPush mode by default. Mutate objects or arrays do not trigger Angular's change detection. Use the immutable method.
 
+### How to use @delon daily build version
+
+NG-ALAIN provides a [delon-builds](https://github.com/ng-alain/delon-builds.git) repository as a daily build version. It's not the final stable version, but contains the latest fixed BUG, To use the latest features, you can create `delon.sh` in the root directory:
+
+```bash
+#!/usr/bin/env bash
+set -e
+echo "Download latest @delon version"
+rm -rf delon-builds
+git clone --depth 1 https://github.com/ng-alain/delon-builds.git
+rm -rf node_modules/@delon
+rm -rf node_modules/ng-alain
+rsync -am delon-builds/ node_modules/
+NG_ALAIN_VERSION=$(node -p "require('./node_modules/ng-alain/package.json').version")
+rm -rf delon-builds
+echo "Using ng-alain version: ${NG_ALAIN_VERSION}"
+```
+
+When you need to use the daily build version of @delon, you only need to run:
+
+```bash
+bash delon.sh
+```
+
+> If in Windows environment, please use [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) to execute Bash scripts.
+
 ## Installation
 
 ### Why can't I find the ng-zorro-antd/src/*.less style?
@@ -103,4 +129,4 @@ We provided an online snapshot:
 git clone --depth 1 --branch gh-pages https://github.com/ng-alain/delon.git docs
 ```
 
-You can simply create a Docker container to quickly deploy the same documentation site as ng-alain.com.
+You can simply create a Docker container to quickly deploy the same documentation site as ng-alain.com.
diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md
@@ -26,6 +26,32 @@ Angular 下常见错误，使用 Reactive Forms 需要额外引入 `ReactiveForm
 
 NG-ZORRO 及 @delon/* 组件默认在 OnPush 模式下工作，mutate 对象或者数组不会触发 Angular 的变更检测，请使用 immutable 方式。
 
+### 如何使用@delon每日构建版本
+
+NG-ALAIN 提供一个 [delon-builds](https://github.com/ng-alain/delon-builds.git) 仓储作为每日构建版本，它并不是最终稳定版本，但包含最新已修复BUG、最新功能，要使用可以在根目录创建 `delon.sh`：
+
+```bash
+#!/usr/bin/env bash
+set -e
+echo "Download latest @delon version"
+rm -rf delon-builds
+git clone --depth 1 https://github.com/ng-alain/delon-builds.git
+rm -rf node_modules/@delon
+rm -rf node_modules/ng-alain
+rsync -am delon-builds/ node_modules/
+NG_ALAIN_VERSION=$(node -p "require('./node_modules/ng-alain/package.json').version")
+rm -rf delon-builds
+echo "Using ng-alain version: ${NG_ALAIN_VERSION}"
+```
+
+当需要使用@delon的每日构建版本，只需要在运行：
+
+```bash
+bash delon.sh
+```
+
+> 如果是 Windows 环境，请使用 [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) 来执行 Bash 脚本。
+
 ## 安装
 
 ### 为什么找不到 ng-zorro-antd/src/*.less 样式？

diff --git a/packages/form/src/widgets/text/index.en-US.md b/packages/form/src/widgets/text/index.en-US.md
@@ -15,6 +15,7 @@ Text in form.
 
 ### ui
 
-| Property        | Description               | Type     | Default |
-| --------------- | ------------------------- | -------- | ------- |
-| `[defaultText]` | Default text of this item | `string` | `-`     |
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[defaultText]` | Default text of this item | `string` | `-` |
+| `[html]` | Whether to support HTML | `boolean` | `true` |
diff --git a/packages/form/src/widgets/text/index.zh-CN.md b/packages/form/src/widgets/text/index.zh-CN.md
@@ -15,6 +15,7 @@ type: Widgets
 
 ### ui 属性
 
-| 参数            | 说明                     | 类型     | 默认值 |
-| --------------- | ------------------------ | -------- | ------ |
-| `[defaultText]` | 当值不存在时所指定的文本 | `string` | `-`    |
+| 参数 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[defaultText]` | 当值不存在时所指定的文本 | `string` | `-` |
+| `[html]` | 是否支持HTML | `boolean` | `true` |
diff --git a/packages/form/src/widgets/text/schema.ts b/packages/form/src/widgets/text/schema.ts
@@ -3,6 +3,15 @@ import { SFUISchemaItem } from '../../schema/ui';
 export interface SFTextWidgetSchema extends SFUISchemaItem {
   /**
    * 当值不存在时所指定的文本，默认：`-`
+   *
+   * Default text of this item, Default: `-`
    */
   defaultText?: string;
+
+  /**
+   * 是否支持HTML，默认：`true`
+   *
+   * Whether to support HTML, default: `true`
+   */
+  html?: boolean;
 }
diff --git a/packages/form/src/widgets/text/text.widget.html b/packages/form/src/widgets/text/text.widget.html
@@ -1,3 +1,12 @@
-<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-  {{ value || ui.defaultText || '-' }}
+<sf-item-wrap
+  [id]="id"
+  [schema]="schema"
+  [ui]="ui"
+  [showError]="showError"
+  [error]="error"
+  [showTitle]="schema.title"
+  [class.sf__text-html]="ui.html"
+>
+  <span *ngIf="ui.html" [innerHTML]="text"></span>
+  <span *ngIf="!ui.html" [innerText]="text"></span>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/text/text.widget.spec.ts b/packages/form/src/widgets/text/text.widget.spec.ts
@@ -5,6 +5,7 @@ import { createTestContext } from '@delon/testing';
 
 import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec';
 import { SFSchema } from '../../../src/schema/index';
+import { SFTextWidgetSchema } from './schema';
 
 describe('form: widget: text', () => {
   let fixture: ComponentFixture<TestFormComponent>;
@@ -41,4 +42,27 @@ describe('form: widget: text', () => {
     };
     page.newSchema(s).checkElText('.ant-form-item-control', '~');
   });
+
+  describe('#html', () => {
+    const html = `<span>1</span>`;
+    it('with true', () => {
+      const s: SFSchema = {
+        properties: {
+          a: { type: 'string', default: html, ui: { widget } as SFTextWidgetSchema }
+        }
+      };
+      page.newSchema(s).checkCount('.sf__text-html', 1);
+      expect(page.getEl('.ant-form-item-control').innerText).toBe('1');
+    });
+
+    it('with false', () => {
+      const s: SFSchema = {
+        properties: {
+          a: { type: 'string', default: html, ui: { widget, html: false } as SFTextWidgetSchema }
+        }
+      };
+      page.newSchema(s).checkCount('.sf__text-html', 0);
+      expect(page.getEl('.ant-form-item-control').innerText).toBe(html);
+    });
+  });
 });
diff --git a/packages/form/src/widgets/text/text.widget.ts b/packages/form/src/widgets/text/text.widget.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
+import { SFValue } from '../../interface';
+import { toBool } from '../../utils';
 import { ControlUIWidget } from '../../widget';
 import { SFTextWidgetSchema } from './schema';
 
@@ -10,7 +12,13 @@ import { SFTextWidgetSchema } from './schema';
   encapsulation: ViewEncapsulation.None
 })
 export class TextWidget extends ControlUIWidget<SFTextWidgetSchema> implements OnInit {
+  text: string = '';
   ngOnInit(): void {
     this.ui._required = false;
+    this.ui.html = toBool(this.ui.html, true);
+  }
+
+  reset(value: SFValue): void {
+    this.text = value || this.ui.defaultText || '-';
   }
 }