feat(): add @Style2 with support for formatting input values

A-l-y-l-e · Apr 17, 2022 · 8efdb94 · 8efdb94
1 parent b5cd10a
commit 8efdb94
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 17 deletions.
diff --git a/src/lib/image-cropper/image-cropper.ts b/src/lib/image-cropper/image-cropper.ts
@@ -24,13 +24,15 @@ import {
   StyleTemplate,
   StyleRenderer,
   WithStyles,
-  Style } from '@alyle/ui';
+  Style2,
+} from '@alyle/ui';
 import { Subject, Observable } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
 import { resizeCanvas } from './resize-canvas';
 import { ViewportRuler } from '@angular/cdk/scrolling';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 export interface LyImageCropperTheme {
   /** Styles for Image Cropper Component */
@@ -1376,16 +1378,21 @@ export class LyCropperArea implements WithStyles, OnDestroy {
   private _resizableArea: boolean;
   @Input() keepAspectRatio: boolean;
   @Input()
-  @Style<boolean, LyCropperArea>(
-    (_value, _, { classes: __ }) => ({ after }) => lyl `{
-      border-radius: 50%
-      .${__.resizer} {
-        ${after}: ${pos}%
-        bottom: ${pos}%
-        transform: translate(4px, 4px)
-      }
-    }`
-  ) round: boolean;
+  @Style2<boolean, LyCropperArea>(
+    (_value, _media) => ({ after }, ref) => {
+      ref.renderStyleSheet(STYLES);
+      const __ = ref.selectorsOf(STYLES);
+      return lyl `{
+        border-radius: 50%
+        .${__.resizer} {
+          ${after}: ${pos}%
+          bottom: ${pos}%
+          transform: translate(4px, 4px)
+        }
+      }`;
+    },
+    coerceBooleanProperty
+  ) round: BooleanInput;
 
   constructor(
     readonly sRenderer: StyleRenderer,
@@ -1721,6 +1728,6 @@ function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent {
   return event.type[0] === 't';
 }
 
-export function round(n: number) {
+export function roundNumber(n: number) {
   return Math.round(n);
 }
diff --git a/src/lib/src/minimal/renderer-style.ts b/src/lib/src/minimal/renderer-style.ts
@@ -271,6 +271,66 @@ export type InputStyle<INPUT, C = any> = (val: Exclude<NonNullable<INPUT>, Media
     ((theme: any, ref: ThemeRef) => StyleTemplate) | null
   );
 
+
+/**
+ * Parameter decorator to be used for create Dynamic style together with `@Input`
+ * @param style style
+ * @param formatWith A function to format the value
+ * @decorator
+ */
+export function Style2<INPUT = any, C = any>(
+  style: InputStyle<INPUT, C>,
+  formatWith?: ((value: INPUT) => any) | null,
+  priority?: number
+): (target: WithStyles, propertyKey: string, descriptor?: TypedPropertyDescriptor<INPUT> | undefined) => void {
+
+  return function(
+    target: WithStyles,
+    propertyKey: string,
+    descriptor?: TypedPropertyDescriptor<INPUT>
+  ) {
+    target.constructor[propertyKey] = style;
+    const _propertyKey = `_${propertyKey}Value`;
+    if (descriptor) {
+      const set = descriptor.set!;
+      descriptor.set = function(val: INPUT) {
+        const newValue = formatWith ? formatWith(val) : val;
+        createStyle(
+          this,
+          propertyKey,
+          newValue,
+          style,
+          priority
+        );
+        set.call(this, newValue);
+      };
+      if (!descriptor.get) {
+        descriptor.get = function() {
+          return this[_propertyKey];
+        };
+      }
+    } else {
+      Object.defineProperty(target, propertyKey, {
+        configurable: true,
+        enumerable: true,
+        set(val: INPUT) {
+          const newValue = formatWith ? formatWith(val) : val;
+          createStyle(
+            this,
+            propertyKey,
+            newValue,
+            style,
+            priority
+          );
+        },
+        get() {
+          return this[_propertyKey];
+        }
+      });
+    }
+  };
+}
+
 /**
  * Parameter decorator to be used for create Dynamic style together with `@Input`
  * @param style style
@@ -299,12 +359,15 @@ export function Style<INPUT = any, C = any>(
 export function Style<INPUT = any, C = any>(
   style: InputStyle<INPUT, C>,
   priority?: number
-) {
+): (target: WithStyles, propertyKey: string, descriptor?: TypedPropertyDescriptor<INPUT> | undefined) => void {
 
-  return function(target: WithStyles, propertyKey: string, descriptor?: TypedPropertyDescriptor<INPUT>) {
+  return function(
+    target: WithStyles,
+    propertyKey: string,
+    descriptor?: TypedPropertyDescriptor<INPUT>
+  ) {
     target.constructor[propertyKey] = style;
-    // const _propertyKeyClass = `_${propertyKey}Class`;
-    const _propertyKey = `_${propertyKey}`;
+    const _propertyKey = `_${propertyKey}Value`;
     if (descriptor) {
       const set = descriptor.set!;
       descriptor.set = function(val: INPUT) {
@@ -360,7 +423,7 @@ export function createStyle<INPUT, C>(
 ) {
   const propertyKey = typeof propertyKeyConfig === 'string' ? propertyKeyConfig : propertyKeyConfig.key;
   const _propertyKeyClass = `_${propertyKey}Class`;
-  const _propertyKey = `_${propertyKey}`;
+  const _propertyKey = `_${propertyKey}Value`;
   const oldValue = c[_propertyKey];
   c[_propertyKey] = value;
   if (value === null || value === undefined || (value as any) === false) {