feat(form:number): add prefix & unit properties (#189)

ng-alain · Oct 1, 2018 · 4121b90 · 4121b90
1 parent 06d95b6
commit 4121b90
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 14 deletions.
diff --git a/packages/form/src/widgets/number/demo/simple.md b/packages/form/src/widgets/number/demo/simple.md
@@ -27,6 +27,8 @@ export class DemoComponent {
     properties: {
       number: { type: 'number', minimum: 18, maximum: 100, multipleOf: 2 },
       integer: { type: 'integer', default: 10 },
+      unit: { type: 'number', default: 10, ui: { unit: '%' } },
+      prefix: { type: 'number', default: 10, ui: { prefix: '$' } },
     },
   };
   constructor(public msg: NzMessageService) {}

diff --git a/packages/form/src/widgets/number/index.en-US.md b/packages/form/src/widgets/number/index.en-US.md
@@ -0,0 +1,29 @@
+---
+title: number
+subtitle: Input Number
+type: Widgets
+---
+
+Enter a number within certain range with the mouse or keyboard.
+
+## API
+
+### schema
+
+| Property             | Description                                         | Type      | Default |
+| -------------------- | --------------------------------------------------- | --------- | ------- |
+| `[minimum]`          | min value                                           | `number`  | -       |
+| `[exclusiveMinimum]` | Indicate whether minimum are exclusive of the value | `boolean` | -       |
+| `[maximum]`          | max value                                           | `number`  | -       |
+| `[exclusiveMaximum]` | Indicate whether maximum are exclusive of the value | `boolean` | -       |
+| `[multipleOf]`       | Restricted to a multiple of a given number,         | `number`  | `1`     |
+
+### ui
+
+| Property      | Description                                              | Type | Default |
+| ------------- | -------------------------------------------------------- | ---- | ------- |
+| `[prefix]`    | Prefix, simplifying the use of `nzFormatter`, `nzParser` | -    | -       |
+| `[unit]`      | Unit, simplifying the use of `nzFormatter`, `nzParser`   | -    | -       |
+| `[formatter]` | Specifies the format of the value presented              | -    | -       |
+| `[parser]`    | Specifies the value extracted from nzFormatter           | -    | -       |
+| `[precision]` | precision of input value                                 | -    | -       |
diff --git a/packages/form/src/widgets/number/index.md → ...es/form/src/widgets/number/index.zh-CN.md b/packages/form/src/widgets/number/index.md → ...es/form/src/widgets/number/index.zh-CN.md
@@ -26,6 +26,8 @@ type: Widgets
 
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
+`[prefix]` | 前缀，简化 `nzFormatter`、`nzParser` 的使用 | - | -
+`[unit]` | 单位，简化 `nzFormatter`、`nzParser` 的使用 | - | -
 `[formatter]` | 等同 `nzFormatter` | - | -
 `[parser]` | 等同 `nzParser` | - | -
 `[precision]` | 等同 `nzPrecision` | - | -
diff --git a/packages/form/src/widgets/number/number.widget.ts b/packages/form/src/widgets/number/number.widget.ts
@@ -25,27 +25,32 @@ export class NumberWidget extends ControlWidget implements OnInit {
   min: number;
   max: number;
   step: number;
-  formatter = (value: any) => value;
-  parser = (value: any) => value;
+  formatter = value => value;
+  parser = value => value;
 
   ngOnInit(): void {
-    if (typeof this.schema.minimum !== 'undefined') {
-      this.min = this.schema.exclusiveMinimum
-        ? this.schema.minimum + 1
-        : this.schema.minimum;
+    const { schema, ui } = this;
+    if (typeof schema.minimum !== 'undefined') {
+      this.min = schema.exclusiveMinimum ? schema.minimum + 1 : schema.minimum;
     }
-    if (typeof this.schema.maximum !== 'undefined') {
-      this.max = this.schema.exclusiveMaximum
-        ? this.schema.maximum - 1
-        : this.schema.maximum;
+    if (typeof schema.maximum !== 'undefined') {
+      this.max = schema.exclusiveMaximum ? schema.maximum - 1 : schema.maximum;
     }
-    this.step = this.schema.multipleOf || 1;
-    if (this.schema.type === 'integer') {
+    this.step = schema.multipleOf || 1;
+    if (schema.type === 'integer') {
       this.min = Math.trunc(this.min);
       this.max = Math.trunc(this.max);
       this.step = Math.trunc(this.step);
     }
-    if (this.ui.formatter) this.formatter = this.ui.formatter;
-    if (this.ui.parser) this.parser = this.ui.parser;
+    if (ui.prefix != null) {
+      ui.formatter = value => `${ui.prefix} ${value}`;
+      ui.parser = value => value.replace(`${ui.prefix} `, '');
+    }
+    if (ui.unit != null) {
+      ui.formatter = value => `${value} ${ui.unit}`;
+      ui.parser = value => value.replace(` ${ui.unit}`, '');
+    }
+    if (ui.formatter) this.formatter = ui.formatter;
+    if (ui.parser) this.parser = ui.parser;
   }
 }