Skip to content

Commit 2a11796

Browse files
author
Administrator
committed
build
1 parent e6f39ed commit 2a11796

File tree

8 files changed

+190
-42
lines changed

8 files changed

+190
-42
lines changed

‎build/TreeMenu/TreeMenu.types.d.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
/// <reference types="react" />
2+
declare type InfoReveal = "none" | "vertical" | "horizontal";
23
export declare type ItemProps = {
34
level?: number;
45
title: string | React.ReactElement;
56
info?: string | React.ReactElement;
7+
infoReveal?: InfoReveal;
68
route?: string;
79
titleClass?: string;
810
infoClass?: string;
911
style?: React.CSSProperties;
12+
titleStyle?: React.CSSProperties;
1013
infoStyle?: React.CSSProperties;
1114
classes?: Set<string>;
1215
disabled?: boolean;
@@ -26,7 +29,8 @@ export declare type TreeMenuItemType = {
2629
parent?: TreeMenuItemType;
2730
childs?: TreeMenuItemType[];
2831
} & ItemProps;
29-
export declare type RenderType = (item: MenuItem) => React.ReactElement | undefined | null;
32+
export declare type RenderFn = (item: MenuItem) => React.ReactElement | undefined | null;
33+
export declare type RenderType = RenderFn | React.ReactElement;
3034
export declare type ItemRenderProps = {
3135
enableRotate?: boolean;
3236
renderBadge?: TreeMenuProps["renderBadge"];
@@ -43,8 +47,8 @@ export interface TreeMenuProps {
4347
initialCollapsed?: boolean;
4448
initialSelected?: string;
4549
renderBadge?: RenderType;
46-
renderIcon?: RenderType | React.ReactElement | null;
47-
renderGroupState?: RenderType | React.ReactElement | null;
50+
renderIcon?: RenderType;
51+
renderGroupState?: RenderType;
4852
onClick?: (id: string) => void;
4953
onToggle?: (id?: string, collapsed?: boolean) => void;
5054
}

‎build/index.esm.js‎

Lines changed: 40 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.esm.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js‎

Lines changed: 40 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/styles.css‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.tree-menu {
22
--font-family: "Avenir Next", Helvetica, Arial, sans-serif;
33
--item-padding: 5px;
4-
--item-height: 24px;
4+
--item-height: 32px;
55
}
66
@media (prefers-color-scheme: light) {
77
.tree-menu {
@@ -137,6 +137,7 @@
137137
display: flex;
138138
flex-direction: row;
139139
align-items: center;
140+
overflow: hidden;
140141
/*
141142
> .folder {
142143
@@ -148,21 +149,63 @@
148149
}
149150
*/
150151
}
151-
.tree-menu .item > .content:hover {
152+
.tree-menu .item > .content > .text .title,
153+
.tree-menu .item > .content .text .info {
154+
overflow: hidden;
155+
transition: all 0.4s ease-in-out;
156+
}
157+
.tree-menu .item > .content:hover:has(.info) {
152158
color: var(--item-hover-color);
153159
}
154-
.tree-menu .item > .content > .icon {
160+
.tree-menu .item > .content:hover:has(.info) > .text .title.vertical {
161+
top: 0%;
162+
transform: translateY(-100%);
163+
opacity: 0.1;
164+
}
165+
.tree-menu .item > .content:hover:has(.info) > .text .title.horizontal {
166+
top: 0%;
167+
transform: translateY(-100%);
168+
}
169+
.tree-menu .item > .content:hover:has(.info) > .text .info.vertical {
170+
top: 50%;
171+
transform: translateY(0%);
172+
}
173+
.tree-menu .item > .content:hover:has(.info) > .text .info.horizontal {
174+
position: absolute;
175+
transform: translateX(0%);
176+
}
177+
.tree-menu .item > .content > .text {
178+
position: relative;
179+
flex-grow: 1;
155180
display: flex;
156-
padding-right: 5px;
181+
flex-direction: column;
182+
align-content: center;
157183
}
158-
.tree-menu .item > .content > .title {
184+
.tree-menu .item > .content > .text > .title:has(~.info.vertical,~.info.horizontal) {
185+
position: absolute;
186+
top: 50%;
187+
transform: translateY(-50%);
159188
display: flex;
160189
flex-grow: 1;
161-
flex-direction: column;
190+
align-content: center;
162191
}
163-
.tree-menu .item > .content > .title > .info {
192+
.tree-menu .item > .content > .text > .info {
193+
position: relative;
164194
font-size: 0.7em;
165195
color: var(--item-info);
196+
overflow: hidden;
197+
display: flex;
198+
flex-grow: 1;
199+
}
200+
.tree-menu .item > .content > .text > .info.vertical {
201+
transform: translateY(300%);
202+
}
203+
.tree-menu .item > .content > .text > .info.horizontal {
204+
transform: translateX(-300%);
205+
}
206+
.tree-menu .item > .content > .icon {
207+
display: flex;
208+
padding-right: 5px;
166209
}
167210
.tree-menu .selected {
168211
background-color: var(--item-selected-background);

‎build/variables.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
.tree-menu {
44
--font-family:"Avenir Next", Helvetica, Arial, sans-serif;
55
--item-padding:5px;
6-
--item-height:24px;
6+
--item-height:32px;
77
}
88

99
.dark-colors() {

‎rollup.build.css‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.tree-menu {
22
--font-family: "Avenir Next", Helvetica, Arial, sans-serif;
33
--item-padding: 5px;
4-
--item-height: 24px;
4+
--item-height: 32px;
55
}
66
@media (prefers-color-scheme: light) {
77
.tree-menu {
@@ -137,6 +137,7 @@
137137
display: flex;
138138
flex-direction: row;
139139
align-items: center;
140+
overflow: hidden;
140141
/*
141142
> .folder {
142143
@@ -148,21 +149,63 @@
148149
}
149150
*/
150151
}
151-
.tree-menu .item > .content:hover {
152+
.tree-menu .item > .content > .text .title,
153+
.tree-menu .item > .content .text .info {
154+
overflow: hidden;
155+
transition: all 0.4s ease-in-out;
156+
}
157+
.tree-menu .item > .content:hover:has(.info) {
152158
color: var(--item-hover-color);
153159
}
154-
.tree-menu .item > .content > .icon {
160+
.tree-menu .item > .content:hover:has(.info) > .text .title.vertical {
161+
top: 0%;
162+
transform: translateY(-100%);
163+
opacity: 0.1;
164+
}
165+
.tree-menu .item > .content:hover:has(.info) > .text .title.horizontal {
166+
top: 0%;
167+
transform: translateY(-100%);
168+
}
169+
.tree-menu .item > .content:hover:has(.info) > .text .info.vertical {
170+
top: 50%;
171+
transform: translateY(0%);
172+
}
173+
.tree-menu .item > .content:hover:has(.info) > .text .info.horizontal {
174+
position: absolute;
175+
transform: translateX(0%);
176+
}
177+
.tree-menu .item > .content > .text {
178+
position: relative;
179+
flex-grow: 1;
155180
display: flex;
156-
padding-right: 5px;
181+
flex-direction: column;
182+
align-content: center;
157183
}
158-
.tree-menu .item > .content > .title {
184+
.tree-menu .item > .content > .text > .title:has(~.info.vertical,~.info.horizontal) {
185+
position: absolute;
186+
top: 50%;
187+
transform: translateY(-50%);
159188
display: flex;
160189
flex-grow: 1;
161-
flex-direction: column;
190+
align-content: center;
162191
}
163-
.tree-menu .item > .content > .title > .info {
192+
.tree-menu .item > .content > .text > .info {
193+
position: relative;
164194
font-size: 0.7em;
165195
color: var(--item-info);
196+
overflow: hidden;
197+
display: flex;
198+
flex-grow: 1;
199+
}
200+
.tree-menu .item > .content > .text > .info.vertical {
201+
transform: translateY(300%);
202+
}
203+
.tree-menu .item > .content > .text > .info.horizontal {
204+
transform: translateX(-300%);
205+
}
206+
.tree-menu .item > .content > .icon {
207+
display: flex;
208+
padding-right: 5px;
166209
}
167210
.tree-menu .selected {
168211
background-color: var(--item-selected-background);

0 commit comments

Comments
 (0)