mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Format code to make ongoing refactoring a bit easier
Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
parent
b14400dd65
commit
1030135c9b
@ -33,98 +33,110 @@ interface Dependencies {
|
|||||||
watchHistoryState: () => () => void;
|
watchHistoryState: () => () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const NonInjectedTopBar = observer(({
|
const NonInjectedTopBar = observer(
|
||||||
items,
|
({
|
||||||
items2,
|
items,
|
||||||
isWindows,
|
items2,
|
||||||
isLinux,
|
isWindows,
|
||||||
closeWindow,
|
isLinux,
|
||||||
minimizeWindow,
|
closeWindow,
|
||||||
toggleMaximizeWindow,
|
minimizeWindow,
|
||||||
watchHistoryState,
|
toggleMaximizeWindow,
|
||||||
}: Dependencies) => {
|
watchHistoryState,
|
||||||
const elem = useRef<HTMLDivElement | null>(null);
|
}: Dependencies) => {
|
||||||
|
const elem = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
const windowSizeToggle = (evt: React.MouseEvent) => {
|
const windowSizeToggle = (evt: React.MouseEvent) => {
|
||||||
if (elem.current === evt.target) {
|
if (elem.current === evt.target) {
|
||||||
toggleMaximizeWindow();
|
toggleMaximizeWindow();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => watchHistoryState(), []);
|
useEffect(() => watchHistoryState(), []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.topBar}
|
className={styles.topBar}
|
||||||
onDoubleClick={windowSizeToggle}
|
onDoubleClick={windowSizeToggle}
|
||||||
ref={elem}>
|
ref={elem}
|
||||||
<div className={styles.items}>
|
>
|
||||||
{items2.get().map((item) => {
|
<div className={styles.items}>
|
||||||
const Component = item.Component;
|
{items2.get().map((item) => {
|
||||||
|
const Component = item.Component;
|
||||||
|
|
||||||
return <Component key={item.id} />;
|
return <Component key={item.id} />;
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.items}>
|
||||||
|
{renderRegisteredItems(items.get())}
|
||||||
|
|
||||||
|
{(isWindows || isLinux) && (
|
||||||
|
<div
|
||||||
|
className={cssNames(styles.windowButtons, {
|
||||||
|
[styles.linuxButtons]: isLinux,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={styles.minimize}
|
||||||
|
data-testid="window-minimize"
|
||||||
|
onClick={minimizeWindow}
|
||||||
|
>
|
||||||
|
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
||||||
|
<rect
|
||||||
|
fill="currentColor"
|
||||||
|
width="10"
|
||||||
|
height="1"
|
||||||
|
x="1"
|
||||||
|
y="9" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={styles.maximize}
|
||||||
|
data-testid="window-maximize"
|
||||||
|
onClick={toggleMaximizeWindow}
|
||||||
|
>
|
||||||
|
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
||||||
|
<rect
|
||||||
|
width="9"
|
||||||
|
height="9"
|
||||||
|
x="1.5"
|
||||||
|
y="1.5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={styles.close}
|
||||||
|
data-testid="window-close"
|
||||||
|
onClick={closeWindow}
|
||||||
|
>
|
||||||
|
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
||||||
|
<polygon
|
||||||
|
fill="currentColor"
|
||||||
|
points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.items}>
|
);
|
||||||
{renderRegisteredItems(items.get())}
|
},
|
||||||
{(isWindows || isLinux) && (
|
);
|
||||||
<div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
|
|
||||||
<div
|
|
||||||
className={styles.minimize}
|
|
||||||
data-testid="window-minimize"
|
|
||||||
onClick={minimizeWindow}
|
|
||||||
>
|
|
||||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
|
||||||
<rect
|
|
||||||
fill="currentColor"
|
|
||||||
width="10"
|
|
||||||
height="1"
|
|
||||||
x="1"
|
|
||||||
y="9"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={styles.maximize}
|
|
||||||
data-testid="window-maximize"
|
|
||||||
onClick={toggleMaximizeWindow}
|
|
||||||
>
|
|
||||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
|
||||||
<rect
|
|
||||||
width="9"
|
|
||||||
height="9"
|
|
||||||
x="1.5"
|
|
||||||
y="1.5"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={styles.close}
|
|
||||||
data-testid="window-close"
|
|
||||||
onClick={closeWindow}
|
|
||||||
>
|
|
||||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12">
|
|
||||||
<polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderRegisteredItems = (items: TopBarRegistration[]) => (
|
const renderRegisteredItems = (items: TopBarRegistration[]) =>
|
||||||
items.map((registration, index) => {
|
items.map((registration, index) => {
|
||||||
if (!registration?.components?.Item) {
|
if (!registration?.components?.Item) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <registration.components.Item key={index} />;
|
return <registration.components.Item key={index} />;
|
||||||
})
|
});
|
||||||
);
|
|
||||||
|
|
||||||
export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
|
export const TopBar = withInjectables<Dependencies>(NonInjectedTopBar, {
|
||||||
getProps: (di) => ({
|
getProps: (di) => ({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user