ant-design/components/splitter/interface.ts

71 lines
1.9 KiB
TypeScript
Raw Normal View History

feat:🔥New Component: Splitter (#50038) * 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>
2024-09-09 19:23:25 +08:00
// ================ outside ================
export interface SplitterProps {
prefixCls?: string;
className?: string;
style?: React.CSSProperties;
rootClassName?: string;
layout?: 'horizontal' | 'vertical';
onResizeStart?: (sizes: number[]) => void;
onResize?: (sizes: number[]) => void;
onResizeEnd?: (sizes: number[]) => void;
}
export interface PanelProps {
className?: string;
style?: React.CSSProperties;
min?: number | string;
max?: number | string;
size?: number | string;
collapsible?: boolean | { start?: boolean; end?: boolean };
feat:🔥New Component: Splitter (#50038) * 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>
2024-09-09 19:23:25 +08:00
resizable?: boolean;
defaultSize?: number | string;
}
// ================ inside ================
export interface InternalPanelProps extends PanelProps {
className?: string;
prefixCls?: string;
}
export interface UseResizeProps extends Pick<SplitterProps, 'onResize'> {
basicsState: number[];
items: PanelProps[];
panelsRef: React.RefObject<(HTMLDivElement | null)[]>;
reverse: boolean;
setBasicsState: React.Dispatch<React.SetStateAction<number[]>>;
}
feat:🔥New Component: Splitter (#50038) * 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>
2024-09-09 19:23:25 +08:00
export interface UseResize {
setSize: (data: { size: number; index: number }[]) => void;
setOffset: (offset: number, containerSize: number, index: number) => void;
}
export interface UseHandleProps
extends Pick<SplitterProps, 'layout' | 'onResizeStart' | 'onResizeEnd'> {
basicsState: number[];
containerRef?: React.RefObject<HTMLDivElement | null>;
setOffset: UseResize['setOffset'];
setResizing: React.Dispatch<React.SetStateAction<boolean>>;
}
feat:🔥New Component: Splitter (#50038) * 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>
2024-09-09 19:23:25 +08:00
export interface UseHandle {
onStart: (x: number, y: number, index: number) => void;
}
export interface UseCollapsibleProps {
basicsState: number[];
collapsible?: PanelProps['collapsible'];
index: number;
reverse: boolean;
setSize?: UseResize['setSize'];
}
feat:🔥New Component: Splitter (#50038) * 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>
2024-09-09 19:23:25 +08:00
export interface UseCollapsible {
nextIcon: boolean;
overlap: boolean;
previousIcon: boolean;
onFold: (type: 'previous' | 'next') => void;
setOldBasics: () => void;
}