mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 21:48:19 +08:00
742ce37887
* feat: SplitPanel init * feat: SplitPanel update * feat: SplitPanel update * feat: splitPanel update useResize * feat: SplitPanel update * feat: splitPanel update useResize * feat: SplitPanel update * feat: splitPanel demo * feat: splitPanel update * feat: splitPanel support complicated combination * feat: SplitPanel rename to Splitter * feat: Splitter support onRize * feat: support collapsible * feat: support token and collapsible * feat: update docs * feat: size defaultSize support string * feat: min max support string * feat: update * feat: support DOM structure * feat: Optimize UI * feat: Optimize Code * fix: Add a default size during initialization to prevent failure to obtain container size * feat: optimized code * feat: optimized code * feat: Optimize Code * Update components/splitter/demo/layout.tsx Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * Update components/splitter/demo/multiple.tsx Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: Wanpan <wanpan96@163.com> * docs: update * feat: Modify the style and optimize the interface * feat: use PropsWithChildren * feat: support rtl * feat: collapsible supports object types * fix: when collapsible is boolean not work * feat: Splitter add test * feat: update * test: update snapshots * docs: update * test: update snapshots * test: update * test: update * test: update * test: update * fix: Removed invalid min and max restrictions when collapsible exists * test: update * test: update * test: update * test: test coverage * Revert "test: test coverage" This reverts commit d247193722b5736df92b3f33d93b475eb1df9eff. * test: test coverage * feat: rename * feat: optimized code * ci: lint * feat: optimized code * feat: add useag tips * feat: optimized code * feat: Modify splitbar layout * feat: optimized code * feat: numerical precision * feat: optimized code * feat: Optimized trigger region * feat: Support configuration animation * fix: Fix Collapsible exception when using multiple panels * fix: Fixed the issue of drag area overlapping when multiple panels are folded * feat: optimized code * feat: annotation * feAt: optimized code * fix: bgcolor * fix: Modify the initial value calculation method * test: update * feat: add cover image * chore: adjust logic * chore: use items size * chore: rtl * chore: limit * chore: controlled * docs: update demo * docs: adjust style * chore: add split style * chore: hor collapisble style * chore: collapse icon * chore: update warning * chore: clean up * chore: collapse logic * chore: adjust demo * chore: clean up * test: adjust logic * docs: update demo * docs: rm useless demo * docs: demo * test: add demo test * test: test of them * test: 100% coverage * chore: fix lint * docs: update demo * refactor: unique resize config * docs: add demo * fix: support virtual resiable * chore: add cursor mask * test: update snapshot * test: add test case * test: update snapshot * chore: use px base * chore: rm useless code --------- Signed-off-by: Wanpan <wanpan96@163.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: ice <49827327+coding-ice@users.noreply.github.com>
140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import DownOutlined from '@ant-design/icons/DownOutlined';
|
|
import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
|
import RightOutlined from '@ant-design/icons/RightOutlined';
|
|
import UpOutlined from '@ant-design/icons/UpOutlined';
|
|
import classNames from 'classnames';
|
|
|
|
export interface SplitBarProps {
|
|
index: number;
|
|
active: boolean;
|
|
prefixCls: string;
|
|
resizable: boolean;
|
|
startCollapsible: boolean;
|
|
endCollapsible: boolean;
|
|
onOffsetStart: (index: number) => void;
|
|
onOffsetUpdate: (index: number, offsetX: number, offsetY: number) => void;
|
|
onOffsetEnd: VoidFunction;
|
|
onCollapse: (index: number, type: 'start' | 'end') => void;
|
|
vertical: boolean;
|
|
ariaNow: number;
|
|
ariaMin: number;
|
|
ariaMax: number;
|
|
}
|
|
|
|
const SplitBar: React.FC<SplitBarProps> = (props) => {
|
|
const {
|
|
prefixCls,
|
|
vertical,
|
|
index,
|
|
active,
|
|
ariaNow,
|
|
ariaMin,
|
|
ariaMax,
|
|
resizable,
|
|
startCollapsible,
|
|
endCollapsible,
|
|
onOffsetStart,
|
|
onOffsetUpdate,
|
|
onOffsetEnd,
|
|
onCollapse,
|
|
} = props;
|
|
|
|
const splitBarPrefixCls = `${prefixCls}-bar`;
|
|
|
|
// ======================== Resize ========================
|
|
const [startPos, setStartPos] = useState<[x: number, y: number] | null>(null);
|
|
|
|
const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
|
|
if (resizable && e.currentTarget) {
|
|
setStartPos([e.pageX, e.pageY]);
|
|
onOffsetStart(index);
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (startPos) {
|
|
const onMouseMove = (e: MouseEvent) => {
|
|
const { pageX, pageY } = e;
|
|
const offsetX = pageX - startPos[0];
|
|
const offsetY = pageY - startPos[1];
|
|
|
|
onOffsetUpdate(index, offsetX, offsetY);
|
|
};
|
|
|
|
const onMouseUp = () => {
|
|
setStartPos(null);
|
|
onOffsetEnd();
|
|
};
|
|
|
|
window.addEventListener('mousemove', onMouseMove);
|
|
window.addEventListener('mouseup', onMouseUp);
|
|
|
|
return () => {
|
|
window.removeEventListener('mousemove', onMouseMove);
|
|
window.removeEventListener('mouseup', onMouseUp);
|
|
};
|
|
}
|
|
}, [startPos]);
|
|
|
|
// ======================== Render ========================
|
|
const StartIcon = vertical ? UpOutlined : LeftOutlined;
|
|
const EndIcon = vertical ? DownOutlined : RightOutlined;
|
|
|
|
return (
|
|
<div
|
|
className={splitBarPrefixCls}
|
|
role="separator"
|
|
aria-valuenow={Math.round(ariaNow)}
|
|
aria-valuemin={Math.round(ariaMin)}
|
|
aria-valuemax={Math.round(ariaMax)}
|
|
>
|
|
<div
|
|
className={classNames(`${splitBarPrefixCls}-dragger`, {
|
|
[`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
|
|
[`${splitBarPrefixCls}-dragger-active`]: active,
|
|
})}
|
|
onMouseDown={onMouseDown}
|
|
/>
|
|
|
|
{/* Start Collapsible */}
|
|
{startCollapsible && (
|
|
<div
|
|
className={classNames(
|
|
`${splitBarPrefixCls}-collapse-bar`,
|
|
`${splitBarPrefixCls}-collapse-bar-start`,
|
|
)}
|
|
>
|
|
<StartIcon
|
|
className={classNames(
|
|
`${splitBarPrefixCls}-collapse-icon`,
|
|
`${splitBarPrefixCls}-collapse-start`,
|
|
)}
|
|
onClick={() => onCollapse(index, 'start')}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* End Collapsible */}
|
|
{endCollapsible && (
|
|
<div
|
|
className={classNames(
|
|
`${splitBarPrefixCls}-collapse-bar`,
|
|
`${splitBarPrefixCls}-collapse-bar-end`,
|
|
)}
|
|
>
|
|
<EndIcon
|
|
className={classNames(
|
|
`${splitBarPrefixCls}-collapse-icon`,
|
|
`${splitBarPrefixCls}-collapse-end`,
|
|
)}
|
|
onClick={() => onCollapse(index, 'end')}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SplitBar;
|