feat(module:rate): add half rate support

#11
NG-NEST · Mar 9, 2021 · db8455f · db8455f
1 parent 516f65a
commit db8455f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 53 deletions.
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,4 @@ testem.log
 .DS_Store
 Thumbs.db
 package-lock.json
+yarn.lock
diff --git a/lib/ng-nest/ui/rate/rate.component.html b/lib/ng-nest/ui/rate/rate.component.html
@@ -8,14 +8,16 @@
 >
   <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
   <div class="x-rate-icons" (mouseleave)="leaveRates()">
-    <div class="x-rate-icon" [class.activated]="rate <= hoverActivated" *ngFor="let rate of rates; trackBy: trackByItem">
-      <div class="x-rate-half">
-        <x-icon class="x-rate-back" type="adf-star"></x-icon>
-      </div>
-      <x-icon class="x-rate-front" type="adf-star" (mouseover)="hoverRate(rate)" (click)="rateClick(rate)"></x-icon>
-      <div class="x-rate-half">
-        <x-icon class="x-rate-back" type="adf-star"></x-icon>
+    <div
+      class="x-rate-icon"
+      [class.activated]="rate <= hoverActivated"
+      [class.half-activated]="rate <= hoverHalfActivated"
+      *ngFor="let rate of rates; index as i; trackBy: trackByItem"
+    >
+      <div *ngIf="half" class="x-rate-half" (mouseenter)="rateHalfHover(rate, $event)" (click)="rateHalfClick(rate, $event)">
+        <x-icon type="adf-star"></x-icon>
       </div>
+      <x-icon class="x-rate-back" type="adf-star" (mouseenter)="rateHover(rate, $event)" (click)="rateClick(rate, $event)"></x-icon>
     </div>
   </div>
 </div>
diff --git a/lib/ng-nest/ui/rate/rate.component.spec.ts b/lib/ng-nest/ui/rate/rate.component.spec.ts
@@ -1,5 +1,5 @@
 import { XButtonModule } from '@ng-nest/ui/button';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, __core_private_testing_placeholder__ } from '@angular/core/testing';
 
 import { XRateComponent } from './rate.component';
 import { Component, DebugElement } from '@angular/core';
@@ -92,12 +92,12 @@ class TestXRateComponent {
   template: `
     <x-row>
       <x-col span="24">
-        <x-rate half></x-rate>
+        <x-rate></x-rate>
       </x-col>
     </x-row>
     <x-row>
       <x-col span="24">
-        <x-rate [(ngModel)]="model" half></x-rate>
+        <x-rate [(ngModel)]="model" (ngModelChange)="chang($event)" half></x-rate>
       </x-col>
     </x-row>
   `,
@@ -119,6 +119,9 @@ class TestXRateComponent {
 })
 class TestXRateHalfComponent {
   model = 3.5;
+  chang(event: number) {
+    console.log(event);
+  }
 }
 
 @Component({

diff --git a/lib/ng-nest/ui/rate/rate.component.ts b/lib/ng-nest/ui/rate/rate.component.ts
@@ -21,14 +21,16 @@ import { XRatePrefix, XRateProperty } from './rate.property';
 })
 export class XRateComponent extends XRateProperty {
   @ViewChild('rate', { static: true }) rate: ElementRef;
-  rates: XNumber[] = [];
+  rates: number[] = [];
 
   hoverActivated = 0;
+  hoverHalfActivated = 0;
 
   writeValue(value: any) {
     if (XIsEmpty(value)) value = 0;
     this.value = value;
     this.hoverActivated = value;
+    this.hoverHalfActivated = Math.ceil(value);
     this.cdr.detectChanges();
   }
 
@@ -59,7 +61,7 @@ export class XRateComponent extends XRateProperty {
       .map((_, i) => i + 1);
   }
 
-  hoverRate(rate: number) {
+  rateHover(rate: number, event: MouseEvent) {
     if (this.disabled) return;
     this.hoverActivated = rate;
     this.cdr.detectChanges();
@@ -69,15 +71,29 @@ export class XRateComponent extends XRateProperty {
     if (this.disabled) return;
     const activited = this.value;
     this.hoverActivated = activited;
+    this.hoverHalfActivated = Math.ceil(activited);
     this.cdr.detectChanges();
   }
 
-  rateClick(rate: number) {
+  rateClick(rate: number, event: MouseEvent) {
     if (this.disabled) return;
     this.value = this.value === rate ? 0 : rate;
     if (this.onChange) this.onChange(this.value);
   }
 
+  rateHalfHover(rate: number, event: MouseEvent) {
+    if (this.disabled) return;
+    this.hoverActivated = rate - 1;
+    this.hoverHalfActivated = rate;
+    this.cdr.detectChanges();
+  }
+
+  rateHalfClick(rate: number, event: MouseEvent) {
+    if (this.disabled) return;
+    this.value = rate - 0.5;
+    if (this.onChange) this.onChange(this.value);
+  }
+
   trackByItem(index: number, item: number) {
     return item;
   }

diff --git a/lib/ng-nest/ui/rate/style/mixin.scss b/lib/ng-nest/ui/rate/style/mixin.scss
@@ -25,54 +25,40 @@
     display: flex;
     align-items: center;
     position: relative;
+    color: $--x-text-400;
+    transition: transform $--x-animation-duration-base;
+    &:hover {
+      transform: scale(1.1);
+    }
     .x-icon {
-      font-size: $--x-font-size-large;
-      color: $--x-text-400;
-      &.x-rate-back {
-        position: absolute;
-        z-index: -1;
-      }
-      &.x-rate-front {
-        &:before,
-        &:after {
-          content: '';
-          width: 50%;
-          height: 100%;
-          position: absolute;
-        }
-        &:before {
-          left: 0;
-        }
-        &:after {
-          right: 0;
-        }
-      }
+      font-size: $--x-font-size-big;
+      vertical-align: 0;
+      transition: color $--x-animation-duration-base;
     }
     &.activated {
-      .x-icon.x-rate-front {
+      color: $--x-warning;
+    }
+    &.half-activated {
+      .x-rate-half {
         color: $--x-warning;
       }
     }
   }
-  > .x-buttons {
-    > x-button > .x-button {
-      &.x-button-activated {
-        color: $--x-warning;
-        background-color: transparent;
-      }
-      &.x-button-initial.x-button-disabled {
-        color: $--x-text-500;
-        background-color: transparent;
-      }
-      &.x-button-initial.x-button-disabled.x-button-activated {
-        color: $--x-warning-400;
-        background-color: transparent;
-        &:hover {
-          color: $--x-warning-400;
-          background-color: transparent;
-        }
+  &-half {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+
+    &:hover {
+      > .x-icon {
+        opacity: 1;
       }
     }
+    > .x-icon {
+    }
   }
   &.x-invalid,
   &.x-required {

diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "version": "11.0.3",
   "scripts": {
     "ng": "ng",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
     "start": "ng serve",
     "build": "node --max_old_space_size=81920 ./node_modules/@angular/cli/bin/ng build --prod ",
     "build:ng-nest-ui": "node --max_old_space_size=81920 ./node_modules/@angular/cli/bin/ng build ng-nest-ui --prod && npm run build:scss",