mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
975 B
TypeScript
42 lines
975 B
TypeScript
import clsx from 'clsx';
|
|
import React, { PropsWithChildren } from 'react';
|
|
import Split from 'react-split';
|
|
import { useStorage, updateDragStatus} from 'tailchat-shared';
|
|
import './SplitPanel.less';
|
|
|
|
|
|
/**
|
|
* Reference: https://split.js.org/#/
|
|
*/
|
|
|
|
interface SplitPanelProps extends PropsWithChildren {
|
|
className?: string;
|
|
}
|
|
export const SplitPanel: React.FC<SplitPanelProps> = React.memo((props) => {
|
|
const [sizes, { save: saveSizes }] = useStorage('pin-sizes', [90, 10]);
|
|
const updateStatus = updateDragStatus()
|
|
const handleDragEnd = (sizes: number[]) => {
|
|
saveSizes(sizes);
|
|
updateStatus(false)
|
|
|
|
};
|
|
|
|
const handleDragEnter = ()=>{
|
|
updateStatus(true)
|
|
}
|
|
|
|
return (
|
|
<Split
|
|
className={clsx('split', props.className)}
|
|
sizes={sizes}
|
|
minSize={250}
|
|
expandToMin={true}
|
|
onDragEnd={handleDragEnd}
|
|
onDragStart={handleDragEnter}
|
|
>
|
|
{props.children}
|
|
</Split>
|
|
);
|
|
});
|
|
SplitPanel.displayName = 'SplitPanel';
|