feat: siderbar operation support portal (#1061)
Joel
3 years ago
committed by
GitHub
parent
d75e8aeafa
commit
9458b8978f
@ -1,84 +1,167 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { useBoolean } from 'ahooks'
|
import React from 'react'
|
||||||
import React, { useEffect, useRef, useState } from 'react'
|
import {
|
||||||
import type { FC } from 'react'
|
FloatingPortal,
|
||||||
import { createRoot } from 'react-dom/client'
|
autoUpdate,
|
||||||
|
flip,
|
||||||
type IPortalToFollowElementProps = {
|
offset,
|
||||||
portalElem: React.ReactNode
|
shift,
|
||||||
children: React.ReactNode
|
useDismiss,
|
||||||
controlShow?: number
|
useFloating,
|
||||||
controlHide?: number
|
useFocus,
|
||||||
|
useHover,
|
||||||
|
useInteractions,
|
||||||
|
useMergeRefs,
|
||||||
|
useRole,
|
||||||
|
} from '@floating-ui/react'
|
||||||
|
|
||||||
|
import type { Placement } from '@floating-ui/react'
|
||||||
|
|
||||||
|
type PortalToFollowElemOptions = {
|
||||||
|
/*
|
||||||
|
* top, bottom, left, right
|
||||||
|
* start, end. Default is middle
|
||||||
|
* combine: top-start, top-end
|
||||||
|
*/
|
||||||
|
placement?: Placement
|
||||||
|
open?: boolean
|
||||||
|
offset?: number
|
||||||
|
onOpenChange?: (open: boolean) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const PortalToFollowElement: FC<IPortalToFollowElementProps> = ({
|
export function usePortalToFollowElem({
|
||||||
portalElem,
|
placement = 'bottom',
|
||||||
|
open,
|
||||||
|
offset: offsetValue = 0,
|
||||||
|
onOpenChange: setControlledOpen,
|
||||||
|
}: PortalToFollowElemOptions = {}) {
|
||||||
|
const setOpen = setControlledOpen
|
||||||
|
|
||||||
|
const data = useFloating({
|
||||||
|
placement,
|
||||||
|
open,
|
||||||
|
onOpenChange: setOpen,
|
||||||
|
whileElementsMounted: autoUpdate,
|
||||||
|
middleware: [
|
||||||
|
offset(offsetValue),
|
||||||
|
flip({
|
||||||
|
crossAxis: placement.includes('-'),
|
||||||
|
fallbackAxisSideDirection: 'start',
|
||||||
|
padding: 5,
|
||||||
|
}),
|
||||||
|
shift({ padding: 5 }),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
const context = data.context
|
||||||
|
|
||||||
|
const hover = useHover(context, {
|
||||||
|
move: false,
|
||||||
|
enabled: open == null,
|
||||||
|
})
|
||||||
|
const focus = useFocus(context, {
|
||||||
|
enabled: open == null,
|
||||||
|
})
|
||||||
|
const dismiss = useDismiss(context)
|
||||||
|
const role = useRole(context, { role: 'tooltip' })
|
||||||
|
|
||||||
|
const interactions = useInteractions([hover, focus, dismiss, role])
|
||||||
|
|
||||||
|
return React.useMemo(
|
||||||
|
() => ({
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
...interactions,
|
||||||
|
...data,
|
||||||
|
}),
|
||||||
|
[open, setOpen, interactions, data],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type ContextType = ReturnType<typeof usePortalToFollowElem> | null
|
||||||
|
|
||||||
|
const PortalToFollowElemContext = React.createContext<ContextType>(null)
|
||||||
|
|
||||||
|
export function usePortalToFollowElemContext() {
|
||||||
|
const context = React.useContext(PortalToFollowElemContext)
|
||||||
|
|
||||||
|
if (context == null)
|
||||||
|
throw new Error('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PortalToFollowElem({
|
||||||
children,
|
children,
|
||||||
controlShow,
|
...options
|
||||||
controlHide,
|
}: { children: React.ReactNode } & PortalToFollowElemOptions) {
|
||||||
}) => {
|
// This can accept any props as options, e.g. `placement`,
|
||||||
const [isShowContent, { setTrue: showContent, setFalse: hideContent, toggle: toggleContent }] = useBoolean(false)
|
// or other positioning options.
|
||||||
const [wrapElem, setWrapElem] = useState<HTMLDivElement | null>(null)
|
const tooltip = usePortalToFollowElem(options)
|
||||||
|
return (
|
||||||
useEffect(() => {
|
<PortalToFollowElemContext.Provider value={tooltip}>
|
||||||
if (controlShow)
|
{children}
|
||||||
showContent()
|
</PortalToFollowElemContext.Provider>
|
||||||
}, [controlShow])
|
)
|
||||||
|
}
|
||||||
useEffect(() => {
|
|
||||||
if (controlHide)
|
export const PortalToFollowElemTrigger = React.forwardRef<
|
||||||
hideContent()
|
HTMLElement,
|
||||||
}, [controlHide])
|
React.HTMLProps<HTMLElement> & { asChild?: boolean }
|
||||||
|
>(({ children, asChild = false, ...props }, propRef) => {
|
||||||
// todo use click outside hidden
|
const context = usePortalToFollowElemContext()
|
||||||
const triggerElemRef = useRef<HTMLDivElement>(null)
|
const childrenRef = (children as any).ref
|
||||||
|
const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
|
||||||
const calLoc = () => {
|
|
||||||
const triggerElem = triggerElemRef.current
|
|
||||||
if (!triggerElem) {
|
|
||||||
return {
|
|
||||||
display: 'none',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
left: triggerLeft,
|
|
||||||
top: triggerTop,
|
|
||||||
height,
|
|
||||||
} = triggerElem.getBoundingClientRect()
|
|
||||||
|
|
||||||
return {
|
|
||||||
position: 'fixed',
|
|
||||||
left: triggerLeft,
|
|
||||||
top: triggerTop + height,
|
|
||||||
zIndex: 999,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
// `asChild` allows the user to pass any element as the anchor
|
||||||
if (isShowContent) {
|
if (asChild && React.isValidElement(children)) {
|
||||||
const holder = document.createElement('div')
|
return React.cloneElement(
|
||||||
const root = createRoot(holder)
|
children,
|
||||||
const style = calLoc()
|
context.getReferenceProps({
|
||||||
root.render(
|
ref,
|
||||||
<div style={style as React.CSSProperties}>
|
...props,
|
||||||
{portalElem}
|
...children.props,
|
||||||
</div>,
|
'data-state': context.open ? 'open' : 'closed',
|
||||||
)
|
}),
|
||||||
document.body.appendChild(holder)
|
)
|
||||||
setWrapElem(holder)
|
}
|
||||||
console.log(holder)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
wrapElem?.remove?.()
|
|
||||||
setWrapElem(null)
|
|
||||||
}
|
|
||||||
}, [isShowContent])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={triggerElemRef as React.RefObject<HTMLDivElement>} onClick={toggleContent}>
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className='inline-block'
|
||||||
|
// The user can style the trigger based on the state
|
||||||
|
data-state={context.open ? 'open' : 'closed'}
|
||||||
|
{...context.getReferenceProps(props)}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
PortalToFollowElemTrigger.displayName = 'PortalToFollowElemTrigger'
|
||||||
|
|
||||||
|
export const PortalToFollowElemContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLProps<HTMLDivElement>
|
||||||
|
>(({ style, ...props }, propRef) => {
|
||||||
|
const context = usePortalToFollowElemContext()
|
||||||
|
const ref = useMergeRefs([context.refs.setFloating, propRef])
|
||||||
|
|
||||||
|
if (!context.open)
|
||||||
|
return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FloatingPortal>
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
style={{
|
||||||
|
...context.floatingStyles,
|
||||||
|
...style,
|
||||||
|
}}
|
||||||
|
{...context.getFloatingProps(props)}
|
||||||
|
/>
|
||||||
|
</FloatingPortal>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
export default React.memo(PortalToFollowElement)
|
PortalToFollowElemContent.displayName = 'PortalToFollowElemContent'
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
'use client'
|
|
||||||
import React, { FC, useState } from 'react'
|
|
||||||
import PortalToFollowElem from '../portal-to-follow-elem'
|
|
||||||
import { ChevronDownIcon, CheckIcon } from '@heroicons/react/24/outline'
|
|
||||||
import cn from 'classnames'
|
|
||||||
|
|
||||||
export interface ISelectProps<T> {
|
|
||||||
value: T
|
|
||||||
items: { value: T, name: string }[]
|
|
||||||
onChange: (value: T) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const Select: FC<ISelectProps<string | number>> = ({
|
|
||||||
value,
|
|
||||||
items,
|
|
||||||
onChange
|
|
||||||
}) => {
|
|
||||||
const [controlHide, setControlHide] = useState(0)
|
|
||||||
const itemsElement = items.map(item => {
|
|
||||||
const isSelected = item.value === value
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.value}
|
|
||||||
className={cn('relative h-9 leading-9 px-10 rounded-lg text-sm text-gray-700 hover:bg-gray-100')}
|
|
||||||
onClick={() => {
|
|
||||||
onChange(item.value)
|
|
||||||
setControlHide(Date.now())
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isSelected && (
|
|
||||||
<div className='absolute left-4 top-1/2 translate-y-[-50%] flex items-center justify-center w-4 h-4 text-primary-600'>
|
|
||||||
<CheckIcon width={16} height={16}></CheckIcon>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{item.name}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<PortalToFollowElem
|
|
||||||
portalElem={(
|
|
||||||
<div
|
|
||||||
className='p-1 rounded-lg bg-white cursor-pointer'
|
|
||||||
style={{
|
|
||||||
boxShadow: '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{itemsElement}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
controlHide={controlHide}
|
|
||||||
>
|
|
||||||
<div className='relative '>
|
|
||||||
<div className='flex items-center h-9 px-3 gap-1 cursor-pointer hover:bg-gray-50'>
|
|
||||||
<div className='text-sm text-gray-700'>{items.find(i => i.value === value)?.name}</div>
|
|
||||||
<ChevronDownIcon width={16} height={16} />
|
|
||||||
</div>
|
|
||||||
{/* <div
|
|
||||||
className='absolute z-50 left-0 top-9 p-1 w-[112px] rounded-lg bg-white'
|
|
||||||
style={{
|
|
||||||
boxShadow: '0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{itemsElement}
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</PortalToFollowElem>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default React.memo(Select)
|
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
'use client'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
import React, { useRef } from 'react'
|
||||||
|
import cn from 'classnames'
|
||||||
|
import { ChatBubbleOvalLeftEllipsisIcon as ChatBubbleOvalLeftEllipsisSolidIcon } from '@heroicons/react/24/solid'
|
||||||
|
import {
|
||||||
|
ChatBubbleOvalLeftEllipsisIcon,
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { useHover } from 'ahooks'
|
||||||
|
import ItemOperation from '@/app/components/explore/item-operation'
|
||||||
|
import type { ConversationItem } from '@/models/share'
|
||||||
|
|
||||||
|
export type IItemProps = {
|
||||||
|
onClick: (id: string) => void
|
||||||
|
item: ConversationItem
|
||||||
|
isCurrent: boolean
|
||||||
|
isPinned: boolean
|
||||||
|
togglePin: (id: string) => void
|
||||||
|
onDelete: (id: string) => void
|
||||||
|
onRenameConversation: (item: ConversationItem) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const Item: FC<IItemProps> = ({
|
||||||
|
isCurrent,
|
||||||
|
item,
|
||||||
|
onClick,
|
||||||
|
isPinned,
|
||||||
|
togglePin,
|
||||||
|
onDelete,
|
||||||
|
onRenameConversation,
|
||||||
|
}) => {
|
||||||
|
const ItemIcon = isCurrent ? ChatBubbleOvalLeftEllipsisSolidIcon : ChatBubbleOvalLeftEllipsisIcon
|
||||||
|
const ref = useRef(null)
|
||||||
|
const isHovering = useHover(ref)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
onClick={() => onClick(item.id)}
|
||||||
|
key={item.id}
|
||||||
|
className={cn(
|
||||||
|
isCurrent
|
||||||
|
? 'bg-primary-50 text-primary-600'
|
||||||
|
: 'text-gray-700 hover:bg-gray-200 hover:text-gray-700',
|
||||||
|
'group flex justify-between items-center rounded-md px-2 py-2 text-sm font-medium cursor-pointer',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className='flex items-center w-0 grow'>
|
||||||
|
<ItemIcon
|
||||||
|
className={cn(
|
||||||
|
isCurrent
|
||||||
|
? 'text-primary-600'
|
||||||
|
: 'text-gray-400 group-hover:text-gray-500',
|
||||||
|
'mr-3 h-5 w-5 flex-shrink-0',
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{item.id !== '-1' && (
|
||||||
|
<div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
|
||||||
|
<ItemOperation
|
||||||
|
isPinned={isPinned}
|
||||||
|
isItemHovering={isHovering}
|
||||||
|
togglePin={() => togglePin(item.id)}
|
||||||
|
isShowDelete
|
||||||
|
isShowRenameConversation
|
||||||
|
onRenameConversation={() => onRenameConversation(item)}
|
||||||
|
onDelete={() => onDelete(item.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default React.memo(Item)
|
||||||
@ -1,7 +0,0 @@
|
|||||||
.opBtn {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:hover .opBtn {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue