From 0bc4eea5b9f303e42fdb1face57fbbff27c31b43 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 10 Jun 2021 10:38:00 +0300 Subject: [PATCH] Expanding CSS Module typings Signed-off-by: Alex Andreev --- src/common/utils/makeCss.ts | 30 +++++++++++++++++ src/renderer/components/+catalog/catalog.tsx | 35 +++++++++++--------- 2 files changed, 49 insertions(+), 16 deletions(-) create mode 100644 src/common/utils/makeCss.ts diff --git a/src/common/utils/makeCss.ts b/src/common/utils/makeCss.ts new file mode 100644 index 0000000000..0187f0196b --- /dev/null +++ b/src/common/utils/makeCss.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +/** + * Function expands generic CSS Modules literal types and adds dictionary with arbitrary + * indexes. + * @param styles Styles imported from CSS Module having only literal types + * @returns Passed style list with expanded typescript types + */ +export function makeCss(styles: T) { + return styles as typeof styles & { [key: string]: string }; +} diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 78174e44b7..1c847eaad1 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -42,6 +42,7 @@ import { Avatar } from "../avatar/avatar"; import { MainLayout } from "../layout/main-layout"; import { cssNames } from "../../utils"; import { CatalogEntityDetails } from "./catalog-entity-details"; +import { makeCss } from "../../../common/utils/makeCss"; enum sortBy { name = "name", @@ -50,6 +51,8 @@ enum sortBy { status = "status" } +const css = makeCss(styles); + interface Props extends RouteComponentProps {} @observer @@ -140,14 +143,14 @@ export class Catalog extends React.Component { renderNavigation() { return ( - +
{ this.categories.map(category => ( @@ -156,7 +159,7 @@ export class Catalog extends React.Component { key={category.getId()} label={category.metadata.name} data-testid={`${category.getId()}-tab`} - className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == category.getId() })} + className={cssNames(css.tab, { [css.activeTab]: this.activeTab == category.getId() })} /> )) } @@ -191,7 +194,7 @@ export class Catalog extends React.Component { colorHash={`${item.name}-${item.source}`} width={24} height={24} - className={styles.catalogIcon} + className={css.catalogIcon} /> ); } @@ -214,18 +217,18 @@ export class Catalog extends React.Component { (entity: CatalogEntityItem) => entity.searchFields, ]} renderTableHeader={[ - { title: "", className: styles.iconCell }, - { title: "Name", className: styles.nameCell, sortBy: sortBy.name }, - { title: "Source", className: styles.sourceCell, sortBy: sortBy.source }, - { title: "Labels", className: styles.labelsCell }, - { title: "Status", className: styles.statusCell, sortBy: sortBy.status }, + { title: "", className: css.iconCell }, + { title: "Name", className: css.nameCell, sortBy: sortBy.name }, + { title: "Source", className: css.sourceCell, sortBy: sortBy.source }, + { title: "Labels", className: css.labelsCell }, + { title: "Status", className: css.statusCell, sortBy: sortBy.status }, ]} renderTableContents={(item: CatalogEntityItem) => [ this.renderIcon(item), item.name, item.source, item.labels.map((label) => ), - { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } + { title: item.phase, className: cssNames(css[item.phase]) } ]} onDetails={(item: CatalogEntityItem) => this.onDetails(item) } renderItemMenu={this.renderItemMenu} @@ -252,11 +255,11 @@ export class Catalog extends React.Component { (entity: CatalogEntityItem) => entity.searchFields, ]} renderTableHeader={[ - { title: "", className: styles.iconCell }, - { title: "Name", className: styles.nameCell, sortBy: sortBy.name }, - { title: "Source", className: styles.sourceCell, sortBy: sortBy.source }, - { title: "Labels", className: styles.labelsCell }, - { title: "Status", className: styles.statusCell, sortBy: sortBy.status }, + { title: "", className: css.iconCell }, + { title: "Name", className: css.nameCell, sortBy: sortBy.name }, + { title: "Source", className: css.sourceCell, sortBy: sortBy.source }, + { title: "Labels", className: css.labelsCell }, + { title: "Status", className: css.statusCell, sortBy: sortBy.status }, ]} renderTableContents={(item: CatalogEntityItem) => [ this.renderIcon(item), @@ -264,7 +267,7 @@ export class Catalog extends React.Component { item.kind, item.source, item.labels.map((label) => ), - { title: item.phase, className: cssNames({ [styles.connected]: item.phase == "connected" }) } + { title: item.phase, className: cssNames(css[item.phase]) } ]} detailsItem={this.selectedItem} onDetails={(item: CatalogEntityItem) => this.onDetails(item) }