feat: 新增safe-null-pipe管道，数据空值时可进行占位符展示 (#269)

* feat: 新增safe-null-pipe管道，数据空值时可进行占位符展示

Author: EnochGao

devui/common/common.module.ts

@@ -1,32 +1,33 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { AutoFocusDirective } from './auto-focus.directive';
-import { ClipboardDirective } from './clipboard.directive';
+
 import { DatePipe } from './date-pipe';
+import { SafeNullPipe } from './safe-null.pipe';
+
 import { SimulateATagDirective } from './helper-utils';
+import { ClipboardDirective } from './clipboard.directive';
+import { AutoFocusDirective } from './auto-focus.directive';
 import { IframeEventPropagateDirective } from './iframe-event-propagate.directive';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    ClipboardModule
-  ],
+  imports: [CommonModule, ClipboardModule],
   exports: [
-    AutoFocusDirective,
     DatePipe,
+    SafeNullPipe,
+    AutoFocusDirective,
     SimulateATagDirective,
     IframeEventPropagateDirective,
-    ClipboardDirective
+    ClipboardDirective,
   ],
   declarations: [
-    AutoFocusDirective,
     DatePipe,
+    SafeNullPipe,
+    AutoFocusDirective,
     SimulateATagDirective,
     IframeEventPropagateDirective,
-    ClipboardDirective
+    ClipboardDirective,
   ],
   providers: [],
 })
-export class DCommonModule {
-}
+export class DCommonModule {}

devui/common/demo/common-demo.component.html

@@ -1,10 +1,18 @@
 <div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
   <d-demo-nav [navItems]="navItems"></d-demo-nav>
   <div class="devui-demo-example" [dAnchor]="'date-pipe'">
-    <div class="devui-demo-title">{{ 'components.common.pipeDemo.title' | translate }}</div>
+    <div class="devui-demo-title">{{ 'components.common.pipeDemo.dDatePipe.title' | translate }}</div>
     <div class="devui-demo-text"></div>
-    <d-codebox id="common-basic-usage" [sourceData]="pipeSource">
-      <d-common-pipe demo></d-common-pipe>
+    <d-codebox id="common-basic-usage" [sourceData]="datePipeSource">
+      <d-date-pipe demo></d-date-pipe>
+    </d-codebox>
+  </div>
+  <div class="devui-demo-example" [dAnchor]="'safe-null-pipe'">
+    <div class="devui-demo-title">{{ 'components.common.pipeDemo.dSafeNullPipe.title' | translate }}</div>
+    <div class="devui-demo-text">{{ 'components.common.pipeDemo.dSafeNullPipe.description' | translate }}</div>
+    <div class="devui-demo-text"></div>
+    <d-codebox id="common-basic-usage" [sourceData]="safeNullPipeSource">
+      <d-safe-null-pipe demo></d-safe-null-pipe>
     </d-codebox>
   </div>
 

devui/common/demo/common-demo.component.ts

@@ -8,9 +8,13 @@ import { Subscription } from 'rxjs';
   templateUrl: './common-demo.component.html',
 })
 export class CommonDemoComponent implements OnInit, OnDestroy {
-  pipeSource: Array<DevuiSourceData> = [
-    { title: 'HTML', language: 'html', code: require('./pipe/pipe.component.html?raw') },
-    { title: 'TS', language: 'typescript', code: require('./pipe/pipe.component.ts?raw') },
+  datePipeSource: Array<DevuiSourceData> = [
+    { title: 'HTML', language: 'html', code: require('./pipe/date-pipe/date-pipe.component.html?raw') },
+    { title: 'TS', language: 'typescript', code: require('./pipe/date-pipe/date-pipe.component.ts?raw') },
+  ];
+  safeNullPipeSource: Array<DevuiSourceData> = [
+    { title: 'HTML', language: 'html', code: require('./pipe/safe-null-pipe/safe-null-pipe.component.html?raw') },
+    { title: 'TS', language: 'typescript', code: require('./pipe/safe-null-pipe/safe-null-pipe.component.ts?raw') },
   ];
 
   helperBrowserSource: Array<DevuiSourceData> = [
@@ -67,6 +71,7 @@ export class CommonDemoComponent implements OnInit, OnDestroy {
   setNavValues(values) {
     this.navItems = [
       { dAnchorLink: 'date-pipe', value: values['date-pipe'] },
+      { dAnchorLink: 'safe-null-pipe', value: values['safe-null-pipe'] },
       { dAnchorLink: 'browser-version', value: values['browser-version'] },
       { dAnchorLink: 'open-url', value: values['open-url'] },
       { dAnchorLink: 'download-file', value: values['download-file'] },

devui/common/demo/common-demo.module.ts

@@ -22,7 +22,9 @@ import { HelperDownloadDemoComponent } from './helper-download/helper-download.c
 import { HelperJumpDemoComponent } from './helper-jump/helper-jump.component';
 import { IframPropagateDemoComponent } from './iframe-propagate/iframe-propagate.component';
 import { LazyLoadComponent } from './lazy-load/lazy-load.component';
-import { PipeDemoComponent } from './pipe/pipe.component';
+import { DatePipeDemoComponent } from './pipe/date-pipe/date-pipe.component';
+import { SafeNullPipeComponent } from './pipe/safe-null-pipe/safe-null-pipe.component';
+
 
 @NgModule({
   imports: [
@@ -55,14 +57,15 @@ import { PipeDemoComponent } from './pipe/pipe.component';
   ],
   exports: [CommonDemoComponent],
   declarations: [
-    PipeDemoComponent,
+    DatePipeDemoComponent,
     CommonDemoComponent,
     HelperBrowserComponent,
     HelperJumpDemoComponent,
     HelperDownloadDemoComponent,
     IframPropagateDemoComponent,
     LazyLoadComponent,
-    ClipboardDemoComponent
+    ClipboardDemoComponent,
+    SafeNullPipeComponent
   ],
 })
 export class CommonDemoModule {}

devui/common/demo/pipe/pipe.component.html renamed to devui/common/demo/pipe/date-pipe/date-pipe.component.html

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'd-common-pipe',
-  templateUrl: './pipe.component.html',
+  selector: 'd-date-pipe',
+  templateUrl: './date-pipe.component.html',
 })
-export class PipeDemoComponent implements OnInit {
+export class DatePipeDemoComponent implements OnInit {
   date = new Date(2014, 1, 11, 13, 1, 22);
   date1 = new Date(2015, 4, 5);
   constructor() {}

devui/common/demo/pipe/pipe.component.ts renamed to devui/common/demo/pipe/date-pipe/date-pipe.component.ts

@@ -0,0 +1,9 @@
+<pre>
+  Name：{{ name | dSafeNullPipe }}
+
+  Age：{{ age | dSafeNullPipe }}
+
+  Gender：{{ gender | dSafeNullPipe: '*' }}
+
+  Address：{{ address | dSafeNullPipe: '****' }}
+</pre>

devui/common/demo/pipe/safe-null-pipe/safe-null-pipe.component.html

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'd-safe-null-pipe',
+  templateUrl: './safe-null-pipe.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SafeNullPipeComponent {
+  name = '';
+  gender = void 0;
+  age = 18;
+  address = null;
+}

devui/common/demo/pipe/safe-null-pipe/safe-null-pipe.component.ts

@@ -32,6 +32,12 @@ import { HelperUtils } from 'ng-devui';
   <p>{{ date | dDatePipe: 'y/MM/dd' }}</p>
 </div>
 
+<!-- SafeNullPipe -->
+<div>
+  <p>{{ name | dSafeNullPipe }}</p>
+  <p>{{ age | dSafeNullPipe:'***' }}</p>
+</div>
+
 <!-- SimulateATag -->
 <button dSimulateATag [href]="'https://angular.io'" [target]="'_blank'"></button>
 
@@ -301,6 +307,10 @@ import { HelperUtils } from 'ng-devui';
   </tbody>
 </table>
 
+# dSafeNullPipe
+
+当数据为`''，null，undefined`时，自动进行占位展示，默认为：`--`
+
 # HelperUtils 静态方法
 
 ## getBrowserName() => void
@@ -444,15 +454,19 @@ export type PositionType = 'top' | 'right' | 'bottom' | 'left';
 ```
 
 ### TargetType
+
 ```ts
 export type TargetType = '_blank' | '_self' | '_parent' | '_top' | ;
 ```
+
 ### EncType
+
 ```ts
 export type EncType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text-plain'
 ```
 
 ### CopyResult
+
 ```ts
 export interface CopyResult {
   isSupported: boolean;
@@ -462,6 +476,7 @@ export interface CopyResult {
 ```
 
 ### HttpProgressEvent
+
 ```typescript
 interface HttpProgressEvent {
   type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress;

devui/common/doc/api-cn.md

@@ -26,6 +26,12 @@ In the page:
   <p>{{ date | dDatePipe: 'y/MM/dd' }}</p>
 </div>
 
+<!-- SafeNullPipe -->
+<div>
+  <p>{{ name | dSafeNullPipe }}</p>
+  <p>{{ age | dSafeNullPipe:'***' }}</p>
+</div>
+
 <!-- SimulateATag -->
 <button dSimulateATag [href]="'https://angular.io'" [target]="'_blank'"></button>
 
@@ -295,6 +301,10 @@ The formatting format is slightly different from the format provided by the Angu
   </tbody>
 </table>
 
+# dSafeNullPipe
+
+Placeholder display automatically when data is `'', null, undefined`,default is: `--`
+
 # HelperUtils Static Methods
 
 ## getBrowserName() => void
@@ -436,17 +446,21 @@ export interface ClientDownloadOptions {
 ```ts
 export type PositionType = 'top' | 'right' | 'bottom' | 'left';
 ```
+
 ### TargetType
+
 ```ts
 export type TargetType = '_blank' | '_self' | '_parent' | '_top' | ;
 ```
 
 ### EncType
+
 ```ts
 export type EncType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text-plain'
 ```
 
 ### CopyResult
+
 ```ts
 export interface CopyResult {
   isSupported: boolean;
@@ -456,6 +470,7 @@ export interface CopyResult {
 ```
 
 ### HttpProgressEvent
+
 ```typescript
 interface HttpProgressEvent {
   type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress;

devui/common/doc/api-en.md

@@ -2,5 +2,6 @@ export * from './auto-focus.directive';
 export * from './clipboard.directive';
 export * from './common.module';
 export * from './date-pipe';
+export * from './safe-null.pipe';
 export * from './helper-utils';
 export * from './iframe-event-propagate.directive';

devui/common/public-api.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dSafeNullPipe',
+})
+export class SafeNullPipe implements PipeTransform {
+  transform(value: unknown, replace: string = '--'): unknown {
+    if (typeof value === 'undefined' || value === null || value === '') {
+      return replace;
+    }
+    return value;
+  }
+}

devui/common/safe-null.pipe.ts

@@ -24,7 +24,8 @@ export const newScopeList: Array<string> | string = [
   'mention',
   'icon',
   'navSprite',
-  'NumberTranslator'
+  'NumberTranslator',
+  'common'
 ];
 
 export const sunsetScopeList: Array<string> | string = [

src/app/component/scope-list.ts

@@ -883,7 +883,14 @@
         "p2": "Scroll monitoring uses other elements, such as window."
       },
       "pipeDemo": {
-        "title": "DatePipe"
+        "dDatePipe": {
+          "title": "DatePipe"
+        },
+        "dSafeNullPipe": {
+          "title": "SafeNullPipe",
+          "description": "When the data is '', null, undefined can be specified any character placeholder display, the default is: '--'"
+
+        }
       },
       "browserDemo": {
         "title": "Current browser name and version"
@@ -905,6 +912,7 @@
         "lazy-load": "Lazyload Directive",
         "browser-version": "Current browser name and version",
         "date-pipe": "Datepipe",
+        "safe-null-pipe": "Safe null pipe",
         "open-url": "Open URL in A New Tag",
         "download-file": "Download File",
         "iframe-propagate": "iframe Event Propagate API",

src/assets/i18n/en-us.json

@@ -869,7 +869,13 @@
         "p2": "滚动监听使用其他元素,比如window·"
       },
       "pipeDemo": {
-        "title": "日期解析器"
+        "dDatePipe": {
+          "title": "日期解析器"
+        },
+        "dSafeNullPipe": {
+          "title": "空值占位管道",
+          "description": "当数据为 ''、null、undefined时可指定任意字符进行占位展示，默认为：'--'"
+        }
       },
       "browserDemo": {
         "title": "当前浏览器名和版本"
@@ -891,6 +897,7 @@
         "lazy-load": "懒加载指令",
         "browser-version": "当前浏览器名和版本",
         "date-pipe": "日期解析器",
+        "safe-null-pipe": "空值占位管道",
         "open-url": "新标签页打开网页",
         "download-file": "文件下载",
         "iframe-propagate": "iframe 冒泡事件",