docs: update

ng-alain · Nov 12, 2023 · 4ac35a9 · 4ac35a9
1 parent cd0e697
commit 4ac35a9
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 14 deletions.
diff --git a/packages/form/docs/customize.en-US.md b/packages/form/docs/customize.en-US.md
@@ -31,21 +31,44 @@ export function withTestWidget(): SFWidgetProvideConfig {
 }
 
 @Component({
-  selector: 'test',
+  selector: 'sf-tinymce',
   template: `
-    <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-      test widget, {{ data }}
-    </sf-item-wrap>
-  `,
+  <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
+    <!-- Start area -->
+    <tinymce
+      [ngModel]="value"
+      (ngModelChange)="change($event)"
+      [config]="config"
+      [loading]="loading">
+    </tinymce>
+    <!-- End area -->
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [DelonFormModule]
 })
 class TestWidget extends ControlWidget implements OnInit {
-  data?: string;
+  /* KEY value for registering widgets */
+  static readonly KEY = 'test';
+
+  // It is recommended to use `ngOnInit` to obtain the parameters required by the component.
+  config: any;
+  loadingTip: string;
+
   ngOnInit(): void {
-    console.warn('init test widget');
+    this.loadingTip = this.ui.loadingTip || 'Loading……';
+    this.config = this.ui.config || {};
+  }
+
+  // reset can better solve the problem of new data required during the form reset process
+  reset(value: string) {
+
+  }
+
+  change(value: string) {
+    if (this.ui.change) this.ui.change(value);
+    this.setValue(value);
   }
 }
 ```

diff --git a/packages/form/docs/customize.zh-CN.md b/packages/form/docs/customize.zh-CN.md
@@ -31,21 +31,44 @@ export function withTestWidget(): SFWidgetProvideConfig {
 }
 
 @Component({
-  selector: 'test',
+  selector: 'sf-tinymce',
   template: `
-    <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
-      test widget, {{ data }}
-    </sf-item-wrap>
-  `,
+  <sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
+    <!-- 开始自定义控件区域 -->
+    <tinymce
+      [ngModel]="value"
+      (ngModelChange)="change($event)"
+      [config]="config"
+      [loading]="loading">
+    </tinymce>
+    <!-- 结束自定义控件区域 -->
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [DelonFormModule]
 })
 class TestWidget extends ControlWidget implements OnInit {
-  data?: string;
+  /* 用于注册小部件 KEY 值 */
+  static readonly KEY = 'test';
+
+  // 组件所需要的参数，建议使用 `ngOnInit` 获取
+  config: any;
+  loadingTip: string;
+
   ngOnInit(): void {
-    console.warn('init test widget');
+    this.loadingTip = this.ui.loadingTip || '加载中……';
+    this.config = this.ui.config || {};
+  }
+
+  // reset 可以更好的解决表单重置过程中所需要的新数据问题
+  reset(value: string) {
+
+  }
+
+  change(value: string) {
+    if (this.ui.change) this.ui.change(value);
+    this.setValue(value);
   }
 }
 ```