refactor(module:button): adjustment loading

NG-NEST · Oct 10, 2023 · f069f6b · f069f6b
1 parent a7aa51b
commit f069f6b
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 23 deletions.
diff --git a/lib/ng-nest/ui/base-form/base-form.component.ts b/lib/ng-nest/ui/base-form/base-form.component.ts
@@ -1,10 +1,11 @@
 import { AbstractControl, ControlValueAccessor, NG_VALUE_ACCESSOR, ValidationErrors, ValidatorFn } from '@angular/forms';
-import { ChangeDetectorRef, Component, forwardRef, Renderer2, Type } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, inject, Renderer2, Type } from '@angular/core';
 import { XJustify, XAlign, XDirection, XIsEmpty, XClassMap, XSetFlex, XBoolean, XIsUndefined, XIsFunction } from '@ng-nest/ui/core';
 import { XFormProp } from './base-form.property';
 
 @Component({ selector: 'x-control-value-accessor', template: '' })
 export class XControlValueAccessor<T> extends XFormProp implements ControlValueAccessor {
+  cdr = inject(ChangeDetectorRef);
   get invalid() {
     return this.validator && ((!XIsEmpty(this.value) && this.invalidPattern) || this.invalidInputValidator);
   }
@@ -37,7 +38,6 @@ export class XControlValueAccessor<T> extends XFormProp implements ControlValueA
       return this.message as string;
     }
   }
-  cdr!: ChangeDetectorRef;
   invalidIndex: number = 0;
   labelMap: XClassMap = {};
   value!: T;
@@ -56,6 +56,7 @@ export class XControlValueAccessor<T> extends XFormProp implements ControlValueA
   }
   setDisabledState(disabled: boolean) {
     this.disabled = disabled;
+    this.cdr.markForCheck();
   }
   setFlex(ele: Element, renderer: Renderer2, justify?: XJustify, align?: XAlign, direction?: XDirection) {
     return XSetFlex(ele, renderer, justify, align, direction);

diff --git a/lib/ng-nest/ui/button/button.component.html b/lib/ng-nest/ui/button/button.component.html
@@ -18,9 +18,8 @@
   [attr.type]="attrType"
 >
   <x-icon *ngIf="icon && !loading" [type]="icon"></x-icon>
-  <x-icon *ngIf="loading" type="fto-loader" [spin]="loading"></x-icon>
+  <svg *ngIf="loading" class="x-button-circular" viewBox="25 25 50 50">
+    <circle class="x-button-path" cx="50" cy="50" r="20" fill="none" />
+  </svg>
   <span #content><ng-content></ng-content></span>
 </button>
-
-<!-- 提前加载 loading 的图标-->
-<x-icon *ngIf="loading" [style.display]="'none'" type="fto-loader"></x-icon>
diff --git a/lib/ng-nest/ui/button/style/mixin.scss b/lib/ng-nest/ui/button/style/mixin.scss
@@ -5,6 +5,7 @@
 @import './param';
 
 @mixin button {
+  position: relative;
   border: $--x-border-width solid;
   border-radius: $--x-border-radius;
   flex: 1;
@@ -46,6 +47,20 @@
       margin-left: 0;
     }
   }
+  &-circular {
+    margin-right: 0.25rem;
+    margin-left: -0.3125rem;
+    width: 1.5em;
+    height: 1.5em;
+    animation: loading-rotate 2s linear infinite;
+  }
+  &-path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
   &-transition {
     transition: color $--x-animation-duration-base ease-in-out, background-color $--x-animation-duration-base ease-in-out,
       border $--x-animation-duration-base ease-in-out;
@@ -58,8 +73,12 @@
   }
   &-circle {
     border-radius: 50%;
-    padding: 0;
+    padding: 0 !important;
     width: 1.675rem;
+    .#{$--x-button}-circular {
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
   &-only-icon,
   &-only-icon.#{$--x-button}-initial,
@@ -107,6 +126,9 @@
   color: #{$color};
   background-color: #{$background};
   border-color: #{$border};
+  .#{$--x-button}-path {
+    stroke: #{$color};
+  }
 }
 
 @mixin button-type(
@@ -275,3 +297,24 @@
     }
   }
 }
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -2.5rem;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -7.5rem;
+  }
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   layout: 'test',
-  defaultPage: 'menu',
+  defaultPage: 'button',
   static: 'http://localhost:9494'
 };
 

diff --git a/src/main/test/modules/button/button.component.html b/src/main/test/modules/button/button.component.html
@@ -1,14 +1,14 @@
-<h2>按钮</h2>
-<ex-default></ex-default>
+<!-- <h2>按钮</h2> -->
+<!-- <ex-default></ex-default> -->
 
-<ex-disabled></ex-disabled>
+<!-- <ex-disabled></ex-disabled> -->
 
-<ex-group></ex-group>
+<!-- <ex-group></ex-group> -->
 
-<ex-icon></ex-icon>
+<!-- <ex-icon></ex-icon> -->
 
 <ex-loading></ex-loading>
 
-<ex-size></ex-size>
+<!-- <ex-size></ex-size> -->
 
-<ex-text></ex-text>
+<!-- <ex-text></ex-text> -->
diff --git a/src/main/test/modules/button/loading/loading.component.html b/src/main/test/modules/button/loading/loading.component.html
@@ -1,3 +1,36 @@
 <div class="row">
   <x-button icon="fto-save" type="primary" [loading]="loading" (click)="save()">保存</x-button>
 </div>
+
+<div class="row">
+  <x-button [loading]="loading">默认按钮</x-button>
+  <x-button type="primary" [loading]="loading">主要按钮</x-button>
+  <x-button type="success" [loading]="loading">成功按钮</x-button>
+  <x-button type="warning" [loading]="loading">警告按钮</x-button>
+  <x-button type="danger" [loading]="loading">危险按钮</x-button>
+  <x-button type="info" [loading]="loading">信息按钮</x-button>
+</div>
+<div class="row">
+  <x-button plain [loading]="loading">朴素按钮</x-button>
+  <x-button type="primary" plain [loading]="loading">主要按钮</x-button>
+  <x-button type="success" plain [loading]="loading">成功按钮</x-button>
+  <x-button type="warning" plain [loading]="loading">警告按钮</x-button>
+  <x-button type="danger" plain [loading]="loading">危险按钮</x-button>
+  <x-button type="info" plain [loading]="loading">信息按钮</x-button>
+</div>
+<div class="row">
+  <x-button round [loading]="loading">圆角按钮</x-button>
+  <x-button type="primary" round [loading]="loading">主要按钮</x-button>
+  <x-button type="success" round [loading]="loading">成功按钮</x-button>
+  <x-button type="warning" round [loading]="loading">警告按钮</x-button>
+  <x-button type="danger" round [loading]="loading">危险按钮</x-button>
+  <x-button type="info" round [loading]="loading">信息按钮</x-button>
+</div>
+<div class="row">
+  <x-button icon="fto-search" circle [loading]="loading"></x-button>
+  <x-button icon="fto-edit-3" type="primary" circle [loading]="loading"></x-button>
+  <x-button icon="fto-check" type="success" circle [loading]="loading"></x-button>
+  <x-button icon="fto-star" type="warning" circle [loading]="loading"></x-button>
+  <x-button icon="fto-trash-2" type="danger" circle [loading]="loading"></x-button>
+  <x-button icon="fto-trash" type="info" circle [loading]="loading"></x-button>
+</div>
diff --git a/src/main/test/modules/menu/menu.module.ts b/src/main/test/modules/menu/menu.module.ts
@@ -7,11 +7,12 @@ import { XLayoutModule } from '@ng-nest/ui/layout';
 import { CommonModule } from '@angular/common';
 import { ExWidthComponent } from './width/width.component';
 import { ExLeafComponent } from './leaf/leaf.component';
+import { ExCollapsedComponent } from './collapsed/collapsed.component';
 
 const routers = [{ path: '', component: TeMenuComponent }];
 
 @NgModule({
   imports: [RouterModule.forChild(routers), CommonModule, XMenuModule, XLayoutModule],
-  declarations: [TeMenuComponent, ExDefaultComponent, ExWidthComponent, ExLeafComponent]
+  declarations: [TeMenuComponent, ExDefaultComponent, ExWidthComponent, ExLeafComponent, ExCollapsedComponent]
 })
 export class TeMenuModule {}
diff --git a/src/main/test/modules/select/default/default.component.html b/src/main/test/modules/select/default/default.component.html
@@ -1,11 +1,15 @@
 <div class="yonghu">
   <x-row>
     <x-col>
-      <!-- <x-select [data]="data1" [(ngModel)]="model1" portalWidth="300px"></x-select> -->
+      <form [formGroup]="form">
+        <x-select [data]="data1" formControlName="name"></x-select>
+        <x-select [data]="data2" formControlName="nameCom"></x-select>
+      </form>
+
     </x-col>
   </x-row>
   <x-row>
-    <x-col>
+    <!-- <x-col>
       <x-select
         [selectAllText]="'选择所有用户'"
         [data]="data2"
@@ -14,6 +18,6 @@
         [selectAll]="true"
         multiple
       ></x-select>
-    </x-col>
+    </x-col> -->
   </x-row>
 </div>
diff --git a/src/main/test/modules/select/default/default.component.ts b/src/main/test/modules/select/default/default.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'ex-default',
@@ -10,4 +11,14 @@ export class ExDefaultComponent {
   data2 = JSON.parse(JSON.stringify(this.data1));
   model1: any;
   model2: any = ['AAAA', 'BBBB', 'CCCC', 'DDDD', 'EEEE', 'FFFF', 'GGGG', 'HHHH', 'IIII', 'JJJJ'];
+
+  form = this.fb.group({
+    name: [{ disabled: true, value: '' }],
+    nameCom: ['BBBB']
+  });
+  constructor(private fb: FormBuilder) {
+    setTimeout(() => {
+      this.form.controls.nameCom.disable();
+    }, 2000);
+  }
 }
diff --git a/src/main/test/modules/select/select.component.html b/src/main/test/modules/select/select.component.html
@@ -1,5 +1,5 @@
-<!-- <ex-default></ex-default> -->
-<ex-multiple></ex-multiple>
+<ex-default></ex-default>
+<!-- <ex-multiple></ex-multiple> -->
 <!-- <ex-search></ex-search> -->
 <!-- <ex-size></ex-size> -->
 <!-- <ex-scroll></ex-scroll>  -->
diff --git a/src/main/test/modules/select/select.module.ts b/src/main/test/modules/select/select.module.ts
@@ -5,7 +5,7 @@ import { ExDefaultComponent } from './default/default.component';
 import { TeSelectComponent } from './select.component';
 import { XLayoutModule } from '@ng-nest/ui/layout';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ExMultipleComponent } from './multiple/multiple.component';
 import { ExSearchComponent } from './search/search.component';
 import { XInputModule } from '@ng-nest/ui/input';
@@ -16,7 +16,16 @@ import { ExScrollComponent } from './scroll/scroll.component';
 const routers = [{ path: '', component: TeSelectComponent }];
 
 @NgModule({
-  imports: [RouterModule.forChild(routers), CommonModule, FormsModule, XSelectModule, XRadioModule, XLayoutModule, XInputModule],
+  imports: [
+    RouterModule.forChild(routers),
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    XSelectModule,
+    XRadioModule,
+    XLayoutModule,
+    XInputModule
+  ],
   declarations: [TeSelectComponent, ExDefaultComponent, ExMultipleComponent, ExSearchComponent, ExSizeComponent, ExScrollComponent]
 })
 export class TeSelectModule {}