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): add ellipsis direction to IAICustomSelect

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 22:47:21 +10:00
parent fa285883ad
commit 4f7820719b
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
View File

@ -18,7 +18,7 @@ import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom';
import { useSelect } from 'downshift';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo } from 'react';
import { memo, useMemo } from 'react';
import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';
export type ItemTooltips = { [key: string]: string };
@ -34,6 +34,7 @@ type IAICustomSelectProps = {
buttonProps?: FlexProps;
tooltip?: string;
tooltipProps?: Omit<TooltipProps, 'children'>;
ellipsisPosition?: 'start' | 'end';
};
const IAICustomSelect = (props: IAICustomSelectProps) => {
@ -48,6 +49,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
tooltip,
buttonProps,
tooltipProps,
ellipsisPosition = 'end',
} = props;
const {
@ -69,6 +71,14 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
middleware: [offset(4), shift({ crossAxis: true, padding: 8 })],
});
const labelTextDirection = useMemo(() => {
if (ellipsisPosition === 'start') {
return document.dir === 'rtl' ? 'ltr' : 'rtl';
}
return document.dir;
}, [ellipsisPosition]);
return (
<FormControl sx={{ w: 'full' }} {...formControlProps}>
{label && (
@ -106,6 +116,7 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
direction: labelTextDirection,
}}
>
{selectedItem}