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

Resolve comments

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2023-02-28 15:09:30 -05:00
parent cfe2a2fbee
commit 7cd4cdb5e0
2 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/renderer/components/+catalog/catalog-entity-store.injectable.ts
View File

@ -35,8 +35,8 @@ const catalogEntityStoreInjectable = getInjectable({
const entityRegistry = di.inject(catalogEntityRegistryInjectable); const entityRegistry = di.inject(catalogEntityRegistryInjectable);
const catalogRegistry = di.inject(catalogCategoryRegistryInjectable); const catalogRegistry = di.inject(catalogCategoryRegistryInjectable);
const activeCategory = observable.box<CatalogCategory | undefined>(undefined); const activeCategory = observable.box<CatalogCategory>();
const selectedItemId = observable.box<string | undefined>(undefined); const selectedItemId = observable.box<string >();
const entities = computed(() => { const entities = computed(() => {
const category = activeCategory.get(); const category = activeCategory.get();

65
packages/core/src/renderer/components/tree-view/tree-view.tsx
View File

@ -15,7 +15,7 @@ export interface TreeViewClasses {
export interface TreeViewProps { export interface TreeViewProps {
classes?: TreeViewClasses; classes?: TreeViewClasses;
children: JSX.Element[] | JSX.Element; children: React.ReactNode;
} }
export function TreeView(props: TreeViewProps) { export function TreeView(props: TreeViewProps) {
@ -47,33 +47,41 @@ export interface TreeItemProps {
} }
export function TreeItem(props: TreeItemProps) { export function TreeItem(props: TreeItemProps) {
const {
label,
"data-testid": dataTestId,
classes,
icon,
onClick,
selected = false,
} = props;
const [hovering, setHovering] = useState(false); const [hovering, setHovering] = useState(false);
const optionalCssNames: Partial<Record<string, any>> = {}; const optionalCssNames: Partial<Record<string, any>> = {};
if (props.classes?.selected) { if (classes?.selected) {
optionalCssNames[props.classes.selected] = props.selected ?? false; optionalCssNames[classes.selected] = selected;
} }
if (props.classes?.hover) { if (classes?.hover) {
optionalCssNames[props.classes.hover] = hovering; optionalCssNames[classes.hover] = hovering;
} }
return ( return (
<li <li
className={cssNames(props.classes?.root, optionalCssNames, styles.treeItem, { className={cssNames(classes?.root, optionalCssNames, styles.treeItem, {
[styles.selected]: props.selected ?? false, [styles.selected]: selected,
})} })}
role="treeitem" role="treeitem"
data-testid={props["data-testid"]} data-testid={dataTestId}
onClick={props.onClick} onClick={onClick}
onMouseOver={() => setHovering(true)} onMouseOver={() => setHovering(true)}
onMouseLeave={() => setHovering(false)} onMouseLeave={() => setHovering(false)}
> >
<div className={cssNames(props.classes?.iconContainer, styles.iconContainer)}> <div className={cssNames(classes?.iconContainer, styles.iconContainer)}>
{props.icon} {icon}
</div> </div>
<div className={props.classes?.label}> <div className={classes?.label}>
{props.label} {label}
</div> </div>
</li> </li>
); );
@ -98,35 +106,44 @@ export interface TreeGroupProps {
} }
export function TreeGroup(props: TreeGroupProps) { export function TreeGroup(props: TreeGroupProps) {
const [expanded, setExpanded] = useState(props.defaultExpanded ?? true); const {
label,
"data-testid": dataTestId,
children,
classes,
collapseIcon,
defaultExpanded = true,
expandIcon,
} = props;
const [expanded, setExpanded] = useState(defaultExpanded);
return ( return (
<li <li
className={cssNames(props.classes?.root, styles.treeGroup)} className={cssNames(classes?.root, styles.treeGroup)}
role="group" role="group"
data-testid={props["data-testid"]} data-testid={dataTestId}
> >
<div <div
className={cssNames(props.classes?.group, styles.group)} className={cssNames(classes?.group, styles.group)}
onClick={() => setExpanded(!expanded)} onClick={() => setExpanded(!expanded)}
> >
<div className={cssNames(props.classes?.iconContainer, styles.iconContainer)}> <div className={cssNames(classes?.iconContainer, styles.iconContainer)}>
{ {
expanded expanded
? props.collapseIcon ?? <Icon material="expand_more" /> ? collapseIcon ?? <Icon material="expand_more" />
: props.expandIcon ?? <Icon material="chevron_right" /> : expandIcon ?? <Icon material="chevron_right" />
} }
</div> </div>
<div className={props.classes?.label}> <div className={classes?.label}>
{props.label} {label}
</div> </div>
</div> </div>
<ul <ul
className={cssNames(props.classes?.contents, styles.contents, { className={cssNames(classes?.contents, styles.contents, {
[styles.expanded]: expanded, [styles.expanded]: expanded,
})} })}
> >
{props.children} {children}
</ul> </ul>
</li> </li>
); );