78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { DraggablePanel, LayoutSidebarInner } from '@lobehub/ui';
|
|
import { useResponsive } from 'antd-style';
|
|
import isEqual from 'fast-deep-equal';
|
|
import { memo, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { SidebarContainer, SidebarHeader } from '@/components';
|
|
import { useAppStore } from '@/store';
|
|
import { type DivProps } from '@/types';
|
|
|
|
import Inner from './Inner';
|
|
import { useStyles } from './style';
|
|
|
|
export interface ExtraNetworkSidebarProps extends DivProps {
|
|
headerHeight: number;
|
|
}
|
|
|
|
const ExtraNetworkSidebar = memo<ExtraNetworkSidebarProps>(({ headerHeight }) => {
|
|
const { mobile } = useResponsive();
|
|
const setting = useAppStore((st) => st.setting, isEqual);
|
|
const [expand, setExpand] = useState<boolean>(mobile ? false : setting.extraNetworkSidebarExpand);
|
|
const [pin, setPin] = useState<boolean>(setting.extraNetworkFixedMode === 'fixed');
|
|
const { styles, theme } = useStyles({ headerHeight });
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
const index2indexExtraNetworkButton = gradioApp().querySelector(
|
|
'button#img2img_extra_networks',
|
|
) as HTMLButtonElement;
|
|
const t2indexExtraNetworkButton = gradioApp().querySelector(
|
|
'button#txt2img_extra_networks',
|
|
) as HTMLButtonElement;
|
|
|
|
if (index2indexExtraNetworkButton) {
|
|
index2indexExtraNetworkButton.onclick = () => setExpand(!expand);
|
|
}
|
|
if (t2indexExtraNetworkButton) {
|
|
t2indexExtraNetworkButton.onclick = () => setExpand(!expand);
|
|
}
|
|
}, [expand]);
|
|
|
|
useEffect(() => {
|
|
if (mobile) setExpand(false);
|
|
}, [mobile]);
|
|
|
|
const mode = mobile ? 'fixed' : pin ? 'fixed' : 'float';
|
|
|
|
return (
|
|
<DraggablePanel
|
|
defaultSize={{ width: setting.extraNetworkSidebarWidth }}
|
|
expand={expand}
|
|
minWidth={260}
|
|
mode={mode}
|
|
onExpandChange={setExpand}
|
|
pin={pin}
|
|
placement="right"
|
|
>
|
|
<LayoutSidebarInner>
|
|
<SidebarContainer
|
|
className={styles.container}
|
|
style={mode === 'float' ? { background: theme.colorBgContainer } : {}}
|
|
>
|
|
<SidebarHeader
|
|
pin={pin}
|
|
position="right"
|
|
setExpand={setExpand}
|
|
setPin={setPin}
|
|
title={t('extraNetwork')}
|
|
/>
|
|
<Inner />
|
|
</SidebarContainer>
|
|
</LayoutSidebarInner>
|
|
</DraggablePanel>
|
|
);
|
|
});
|
|
|
|
export default ExtraNetworkSidebar;
|