Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): scollable areas support x-axis scrolling

Browse Source 
Closes #5490
This commit is contained in:
psychedelicious
2024-01-23 20:07:35 +11:00
committed by Kent Keirsey
parent 8bbdfc45fa
commit 71f9ac9985
4 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
View File

@ -1,24 +1,35 @@
import type { ChakraProps } from '@invoke-ai/ui';
import { Box, Flex } from '@invoke-ai/ui';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { CSSProperties, PropsWithChildren } from 'react';
import { memo } from 'react';
import { memo, useMemo } from 'react';
type Props = PropsWithChildren & {
maxHeight?: ChakraProps['maxHeight'];
overflowX?: 'hidden' | 'scroll';
overflowY?: 'hidden' | 'scroll';
};
const styles: CSSProperties = { height: '100%', width: '100%' };
const ScrollableContent = ({ children, maxHeight }: Props) => {
const ScrollableContent = ({
children,
maxHeight,
overflowX = 'hidden',
overflowY = 'scroll',
}: Props) => {
const overlayscrollbarsOptions = useMemo(
() => getOverlayScrollbarsParams(overflowX, overflowY).options,
[overflowX, overflowY]
);
return (
<Flex w="full" h="full" maxHeight={maxHeight} position="relative">
<Box position="absolute" top={0} left={0} right={0} bottom={0}>
<OverlayScrollbarsComponent
defer
style={styles}
options={overlayScrollbarsParams.options}
options={overlayscrollbarsOptions}
>
{children}
</OverlayScrollbarsComponent>

10
invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts
View File

@ -1,3 +1,4 @@
import { cloneDeep, merge } from 'lodash-es';
import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
@ -16,3 +17,12 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
overflow: { x: 'hidden' },
},
};
export const getOverlayScrollbarsParams = (
overflowX: 'hidden' | 'scroll' = 'hidden',
overflowY: 'hidden' | 'scroll' = 'scroll'
) => {
const params = cloneDeep(overlayScrollbarsParams);
merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
return params;
};