cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: improve types of animateProp (#37129)

Browse Source 
Some properties in the DOM lib interface `CSSStyleDeclaration` are not assignable such as `getPropertyPriority` and `getPropertyValue`. With this change we filter out properties which type is not `string` to fix the below error;

```ts
ERROR in src/app/layout/doc-viewer/doc-viewer.component.ts:202:43 - error TS2322: Type 'string' is not assignable to type 'string & ((property: string) => string) & ((property: string) => string) & ((index: number) => string) & ((property: string) => string) & ((property: string, value: string | null, priority?: string | undefined) => void)'.
  Type 'string' is not assignable to type '(property: string) => string'.

202               ? this.void$.pipe(tap(() => elem.style[prop] = to))
                                              ~~~~~~~~~~~~~~~~
```

PR Close #37129
This commit is contained in:
Alan Agius 2020-05-15 10:35:45 +02:00 committed by Kara Erickson
parent 6466fb20c2
commit 011fdfa94f
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
aio/src/app/layout/doc-viewer/doc-viewer.component.ts
View File

@ -189,14 +189,16 @@ export class DocViewerComponent implements OnDestroy {
const seconds = Number(cssValue.replace(/s$/, '')); const seconds = Number(cssValue.replace(/s$/, ''));
return 1000 * seconds; return 1000 * seconds;
}; };
// Some properties are not assignable and thus cannot be animated.
// Example methods, readonly and CSS properties:
// "length", "parentRule", "getPropertyPriority", "getPropertyValue", "item", "removeProperty", "setProperty"
type StringValueCSSStyleDeclaration
= Exclude<{ [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never }[keyof CSSStyleDeclaration], number>;
const animateProp = const animateProp =
(elem: HTMLElement, prop: keyof CSSStyleDeclaration, from: string, to: string, duration = 200) => { (elem: HTMLElement, prop: StringValueCSSStyleDeclaration, from: string, to: string, duration = 200) => {
const animationsDisabled = !DocViewerComponent.animationsEnabled const animationsDisabled = !DocViewerComponent.animationsEnabled
|| this.hostElement.classList.contains(NO_ANIMATIONS); || this.hostElement.classList.contains(NO_ANIMATIONS);
if (prop === 'length' || prop === 'parentRule') {
// We cannot animate length or parentRule properties because they are readonly
return this.void$;
}
elem.style.transition = ''; elem.style.transition = '';
return animationsDisabled return animationsDisabled
? this.void$.pipe(tap(() => elem.style[prop] = to)) ? this.void$.pipe(tap(() => elem.style[prop] = to))