hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Expanding CSS Module typings

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-10 10:38:00 +03:00
parent 7ba8cafe80
commit 0bc4eea5b9
2 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/common/utils/makeCss.ts Normal file
View File

@ -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<T>(styles: T) {
return styles as typeof styles & { [key: string]: string };
}

35
src/renderer/components/+catalog/catalog.tsx
View File

@ -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<ICatalogViewRouteParam> {}
@observer
@ -140,14 +143,14 @@ export class Catalog extends React.Component<Props> {
renderNavigation() {
return (
<Tabs className={cssNames(styles.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<Tabs className={cssNames(css.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<div>
<Tab
value={undefined}
key="*"
label="Browse"
data-testid="*-tab"
className={cssNames(styles.tab, { [styles.activeTab]: this.activeTab == null })}
className={cssNames(css.tab, { [css.activeTab]: this.activeTab == null })}
/>
{
this.categories.map(category => (
@ -156,7 +159,7 @@ export class Catalog extends React.Component<Props> {
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<Props> {
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<Props> {
(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) => <Badge key={label} label={label} title={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<Props> {
(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<Props> {
item.kind,
item.source,
item.labels.map((label) => <Badge key={label} label={label} title={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) }