diff --git a/src/renderer/src/components/DraggableList/virtual-list.tsx b/src/renderer/src/components/DraggableList/virtual-list.tsx index c8d868f1ba..4de83a6dcc 100644 --- a/src/renderer/src/components/DraggableList/virtual-list.tsx +++ b/src/renderer/src/components/DraggableList/virtual-list.tsx @@ -48,6 +48,7 @@ interface DraggableVirtualListProps { overscan?: number header?: React.ReactNode children: (item: T, index: number) => React.ReactNode + disabled?: boolean } /** @@ -73,7 +74,8 @@ function DraggableVirtualList({ estimateSize: _estimateSize, overscan = 5, header, - children + children, + disabled }: DraggableVirtualListProps): React.ReactElement { const _onDragEnd = (result: DropResult, provided: ResponderProvided) => { onDragEnd?.(result, provided) @@ -157,6 +159,7 @@ function DraggableVirtualList({ itemContainerStyle={itemContainerStyle} virtualizer={virtualizer} children={children} + disabled={disabled} /> ))} @@ -172,53 +175,59 @@ function DraggableVirtualList({ /** * 渲染单个可拖拽的虚拟列表项,高度为动态测量 */ -const VirtualRow = memo(({ virtualItem, list, children, itemStyle, itemContainerStyle, virtualizer }: any) => { - const item = list[virtualItem.index] - const draggableId = String(virtualItem.key) - return ( - - {(provided) => { - const setDragRefs = (el: HTMLElement | null) => { - provided.innerRef(el) - virtualizer.measureElement(el) - } +const VirtualRow = memo( + ({ virtualItem, list, children, itemStyle, itemContainerStyle, virtualizer, disabled }: any) => { + const item = list[virtualItem.index] + const draggableId = String(virtualItem.key) + return ( + + {(provided) => { + const setDragRefs = (el: HTMLElement | null) => { + provided.innerRef(el) + virtualizer.measureElement(el) + } - const dndStyle = provided.draggableProps.style - const virtualizerTransform = `translateY(${virtualItem.start}px)` + const dndStyle = provided.draggableProps.style + const virtualizerTransform = `translateY(${virtualItem.start}px)` - // dnd 的 transform 负责拖拽时的位移和让位动画, - // virtualizer 的 translateY 负责将项定位到虚拟列表的正确位置, - // 它们拼接起来可以同时实现拖拽视觉效果和虚拟化定位。 - const combinedTransform = dndStyle?.transform - ? `${dndStyle.transform} ${virtualizerTransform}` - : virtualizerTransform + // dnd 的 transform 负责拖拽时的位移和让位动画, + // virtualizer 的 translateY 负责将项定位到虚拟列表的正确位置, + // 它们拼接起来可以同时实现拖拽视觉效果和虚拟化定位。 + const combinedTransform = dndStyle?.transform + ? `${dndStyle.transform} ${virtualizerTransform}` + : virtualizerTransform - return ( -
-
- {item && children(item, virtualItem.index)} + return ( +
+
+ {item && children(item, virtualItem.index)} +
-
- ) - }} - - ) -}) + ) + }} + + ) + } +) export default DraggableVirtualList diff --git a/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap index 17a207ef30..f2726f06a6 100644 --- a/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap +++ b/src/renderer/src/components/__tests__/__snapshots__/DraggableVirtualList.test.tsx.snap @@ -38,7 +38,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item A @@ -56,7 +56,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item B @@ -74,7 +74,7 @@ exports[`DraggableVirtualList > snapshot > should match snapshot with custom sty >
Item C diff --git a/src/renderer/src/pages/settings/ProviderSettings/index.tsx b/src/renderer/src/pages/settings/ProviderSettings/index.tsx index 718b25191b..635e35a0c6 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/index.tsx @@ -413,12 +413,12 @@ const ProvidersList: FC = () => { const getProviderAvatar = (provider: Provider) => { const logoSrc = getProviderLogo(provider.id) if (logoSrc) { - return + return } const customLogo = providerLogos[provider.id] if (customLogo) { - return + return } return ( @@ -464,6 +464,7 @@ const ProvidersList: FC = () => { onDragStart={() => setDragging(true)} estimateSize={useCallback(() => 40, [])} overscan={3} + disabled={searchText !== ''} style={{ height: `calc(100% - 2 * ${BUTTON_WRAPPER_HEIGHT}px)` }} @@ -525,11 +526,11 @@ const ProviderListItem = styled.div` align-items: center; padding: 5px 10px; width: 100%; - cursor: grab; border-radius: var(--list-item-border-radius); font-size: 14px; transition: all 0.2s ease-in-out; border: 0.5px solid transparent; + user-select: none; &:hover { background: var(--color-background-soft); }