+
{children}
);
diff --git a/packages/react/src/collapse-transition/style/index.scss b/packages/react/src/collapse-transition/style/index.scss
index 8c6bdf051..9806c82b4 100644
--- a/packages/react/src/collapse-transition/style/index.scss
+++ b/packages/react/src/collapse-transition/style/index.scss
@@ -1,4 +1,6 @@
.ty-collapse-transition {
overflow: hidden;
- transition: 250ms height, 250ms padding-top, 250ms padding-bottom;
+ transition:
+ height var(--ty-collapse-motion-duration, 240ms)
+ var(--ty-collapse-motion-easing, ease);
}
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap
deleted file mode 100644
index 28e3c24e7..000000000
--- a/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap
+++ /dev/null
@@ -1,100 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`
should match the snapshot 1`] = `
-
-
-
-`;
diff --git a/packages/react/src/collapse/__tests__/collapse.test.tsx b/packages/react/src/collapse/__tests__/collapse.test.tsx
index ddb783de3..9da75f535 100644
--- a/packages/react/src/collapse/__tests__/collapse.test.tsx
+++ b/packages/react/src/collapse/__tests__/collapse.test.tsx
@@ -1,45 +1,104 @@
import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
import Collapse from '../index';
+const items = [
+ { key: 'a', label: 'Header A', children: 'Content A' },
+ { key: 'b', label: 'Header B', children: 'Content B' },
+];
+
describe('
', () => {
- it('should match the snapshot', () => {
- const { asFragment } = render(
-
- Content 1
- Content 2
-
- );
- expect(asFragment()).toMatchSnapshot();
+ it('should render correctly', () => {
+ const { container } = render(
);
+ expect(container.firstChild).toHaveClass('ty-collapse');
});
- it('should render correctly', () => {
- const { container } = render(
-
- Content
-
+ it('should open from defaultValue using item keys', () => {
+ render(
);
+ const trigger = screen.getByRole('button', { name: 'Header B' });
+ expect(trigger).toHaveAttribute('aria-expanded', 'true');
+ });
+
+ it('should toggle panels in uncontrolled mode', () => {
+ render(
);
+ const trigger = screen.getByRole('button', { name: 'Header A' });
+
+ fireEvent.click(trigger);
+ expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+ fireEvent.click(trigger);
+ expect(trigger).toHaveAttribute('aria-expanded', 'false');
+ });
+
+ it('should only emit changes in controlled mode', () => {
+ const onValueChange = jest.fn();
+
+ render(
);
+
+ const triggerA = screen.getByRole('button', { name: 'Header A' });
+ const triggerB = screen.getByRole('button', { name: 'Header B' });
+
+ fireEvent.click(triggerB);
+
+ expect(onValueChange).toHaveBeenCalledWith(['a', 'b']);
+ expect(triggerA).toHaveAttribute('aria-expanded', 'true');
+ expect(triggerB).toHaveAttribute('aria-expanded', 'false');
+ });
+
+ it('should keep only one expanded item when multiple is false', () => {
+ const onValueChange = jest.fn();
+
+ render(
+
);
- expect(container.firstChild).toHaveClass('ty-collapse');
+
+ fireEvent.click(screen.getByRole('button', { name: 'Header B' }));
+
+ expect(onValueChange).toHaveBeenCalledWith(['b']);
});
- it('should render panel headers', () => {
- const { getByText } = render(
-
- Content 1
- Content 2
-
+ it('should respect disabled panels', () => {
+ render(
+
);
- expect(getByText('Header 1')).toBeInTheDocument();
- expect(getByText('Header 2')).toBeInTheDocument();
+
+ expect(screen.getByRole('button', { name: 'Header A' })).toBeDisabled();
});
- it('should toggle panel on click', () => {
- const { getByText } = render(
-
- Content
-
+ it('should support icon-only collapsible panels', () => {
+ render(
+
);
- fireEvent.click(getByText('Toggle'));
- expect(getByText('Content')).toBeInTheDocument();
+
+ expect(screen.getByText('Header A').closest('button')).toBeNull();
+ fireEvent.click(screen.getByRole('button'));
+ expect(screen.getByRole('region')).toBeInTheDocument();
+ });
+
+ it('should call onItemClick before toggling', () => {
+ const onItemClick = jest.fn();
+
+ render(
);
+
+ fireEvent.click(screen.getByRole('button', { name: 'Header A' }));
+ expect(onItemClick).toHaveBeenCalledWith('a', expect.any(Object));
});
});
diff --git a/packages/react/src/collapse/collapse-context.ts b/packages/react/src/collapse/collapse-context.ts
deleted file mode 100644
index 555082c01..000000000
--- a/packages/react/src/collapse/collapse-context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-type Props = {
- activeKeys: string[];
- onItemClick?: (itemKey: string) => void;
-};
-
-export const CollapseContext = React.createContext
({
- activeKeys: [],
-});
diff --git a/packages/react/src/collapse/collapse-panel.tsx b/packages/react/src/collapse/collapse-panel.tsx
old mode 100755
new mode 100644
index b1710f6bc..829844433
--- a/packages/react/src/collapse/collapse-panel.tsx
+++ b/packages/react/src/collapse/collapse-panel.tsx
@@ -1,104 +1,175 @@
-import React, { useContext, useId, useRef } from 'react';
+import React, { useEffect, useId, useState } from 'react';
import classNames from 'classnames';
-import { ConfigContext } from '../config-provider/config-context';
-import { getPrefixCls } from '../_utils/general';
-import { CollapsePanelProps } from './types';
import { ArrowDown } from '../_utils/components';
import CollapseTransition from '../collapse-transition';
-import { CollapseContext } from './collapse-context';
-
-/**
- * Allow to parse active status to a node
- * @param node
- * @param isActive
- */
-const richNode = (node: React.ReactNode | ((isActive: boolean) => React.ReactNode), isActive: boolean) => {
- return typeof node === 'function' ? node(isActive) : node;
+import {
+ CollapseCollapsible,
+ CollapseExpandIconRender,
+ CollapseItem,
+ CollapseRenderState,
+} from './types';
+
+type CollapsePanelProps = {
+ prefixCls: string;
+ item: CollapseItem;
+ active: boolean;
+ disabled?: boolean;
+ collapsible?: CollapseCollapsible;
+ showArrow: boolean;
+ expandIcon?: React.ReactNode | CollapseExpandIconRender;
+ expandIconPosition: 'start' | 'end';
+ forceRender?: boolean;
+ destroyOnHidden?: boolean;
+ itemClassName?: string;
+ itemStyle?: React.CSSProperties;
+ headerClassName?: string;
+ bodyClassName?: string;
+ onItemClick?: (key: string, event: React.MouseEvent) => void;
+ onToggle: (key: string, event: React.MouseEvent) => void;
+};
+
+const renderContent = React.ReactNode)>(
+ content: T,
+ state: CollapseRenderState
+) => {
+ return typeof content === 'function' ? content(state) : content;
};
-const CollapsePanel = (props: CollapsePanelProps): React.ReactElement => {
- const {
- showArrow = true,
- itemKey,
- header,
- disabled,
- extra,
- deletable,
- onHeaderOnClick,
- className,
- style,
- children,
- prefixCls: customisedCls,
- } = props;
- const itemRef = useRef(null);
+const CollapsePanel = ({
+ prefixCls,
+ item,
+ active,
+ disabled = false,
+ collapsible = 'header',
+ showArrow,
+ expandIcon,
+ expandIconPosition,
+ forceRender = false,
+ destroyOnHidden = false,
+ itemClassName,
+ itemStyle,
+ headerClassName,
+ bodyClassName,
+ onItemClick,
+ onToggle,
+}: CollapsePanelProps): React.ReactElement => {
+ const [bodyMounted, setBodyMounted] = useState(active || forceRender);
const panelId = useId();
const headerId = useId();
- const configContext = useContext(ConfigContext);
- const { activeKeys, onItemClick } = useContext(CollapseContext);
- const prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);
- const active = activeKeys.includes(itemKey);
- const cls = classNames(prefixCls, className, {
- [`${prefixCls}_active`]: active,
- });
- const headerOnClick = (e: React.MouseEvent) => {
- if (!disabled) {
- onHeaderOnClick && onHeaderOnClick(e);
- onItemClick && onItemClick(itemKey);
+ useEffect(() => {
+ if (active || forceRender) {
+ setBodyMounted(true);
}
+ }, [active, forceRender]);
+
+ const requestedCollapsible = showArrow || collapsible !== 'icon' ? collapsible : 'header';
+ const itemDisabled = disabled || item.disabled || requestedCollapsible === 'disabled';
+ const layoutCollapsible: CollapseCollapsible =
+ requestedCollapsible === 'icon' ? 'icon' : 'header';
+ const renderState: CollapseRenderState = {
+ active,
+ disabled: itemDisabled,
+ panelKey: item.key,
};
- /**
- * Remove a item from collapse only the header is enabled
- * @param e
- * @private
- */
- const removeItem = (e: React.MouseEvent) => {
- e.stopPropagation();
- if (!disabled) {
- const node = itemRef.current;
- node && node.parentNode?.removeChild(node);
- }
+ const itemCls = classNames(`${prefixCls}-item`, itemClassName, item.className, {
+ [`${prefixCls}-item_active`]: active,
+ [`${prefixCls}-item_disabled`]: itemDisabled,
+ [`${prefixCls}-item_icon-only`]: layoutCollapsible === 'icon',
+ });
+
+ const iconCls = classNames(`${prefixCls}-item__arrow`, {
+ [`${prefixCls}-item__arrow_active`]: active,
+ });
+
+ const triggerToggle = (event: React.MouseEvent) => {
+ if (itemDisabled) return;
+ onItemClick?.(item.key, event);
+ onToggle(item.key, event);
};
- const renderHeader = () => {
- const headerCls = classNames(`${prefixCls}__header`, {
- [`${prefixCls}__header_disabled`]: disabled,
- });
- const arrowCls = classNames(`${prefixCls}__arrow`, {
- [`${prefixCls}__arrow_active`]: active,
- });
+ const renderExpandIcon = () => {
+ if (!showArrow) return null;
- const hasExtra = deletable || extra;
+ const iconNode =
+ typeof expandIcon === 'function'
+ ? expandIcon(renderState)
+ : expandIcon ??
+ const iconButtonCls = classNames(`${prefixCls}-item__icon-button`, {
+ [`${prefixCls}-item__icon-button_disabled`]: itemDisabled,
+ });
+
+ if (layoutCollapsible === 'icon') {
+ return (
- {hasExtra && (
-
- {deletable ? ✕ : richNode(extra, active)}
-
- )}
-
{iconNode} ;
};
+ const headerContent = renderContent(item.label, renderState);
+ const extraContent = item.extra ? renderContent(item.extra, renderState) : null;
+ const shouldRenderBody = bodyMounted || active || forceRender;
+
return (
-
- {renderHeader()}
-
- {richNode(children, active)}
-
+
+
+ {layoutCollapsible === 'header' ? (
+
+ ) : (
+ <>
+ {expandIconPosition === 'start' && renderExpandIcon()}
+
+ {expandIconPosition === 'end' && renderExpandIcon()}
+
+ )}
+
+ {extraContent &&
{extraContent}
}
+
+
+ {shouldRenderBody && (
+
setBodyMounted(false) : undefined}
+ >
+
+ {item.children}
+
+
+ )}
);
};
diff --git a/packages/react/src/collapse/collapse.tsx b/packages/react/src/collapse/collapse.tsx
index e7776637f..547744fdc 100644
--- a/packages/react/src/collapse/collapse.tsx
+++ b/packages/react/src/collapse/collapse.tsx
@@ -1,99 +1,116 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
-import { CollapseContext } from './collapse-context';
import { getPrefixCls } from '../_utils/general';
-import { CollapsePanelProps, CollapseProps } from './types';
+import CollapsePanel from './collapse-panel';
+import { CollapseProps, CollapseValue } from './types';
-/**
- * Format active key to array
- * @param activeKey
- */
-const toArray = (activeKey: string | string[]): string[] => {
- return Array.isArray(activeKey) ? activeKey : [activeKey];
+const normalizeValue = (value: string[] | undefined, multiple: boolean): CollapseValue => {
+ if (!value || value.length === 0) return [];
+ return multiple ? [...new Set(value)] : [value[0]];
};
-const Collapse = React.forwardRef
(
- (props: CollapseProps, ref): React.ReactElement => {
- const {
- showArrow = true,
- bordered = true,
- deletable = false,
- accordion = false,
- defaultActiveKey = [],
- prefixCls: customisedCls,
- activeKey,
- onChange,
- className,
- children,
- ...otherProps
- } = props;
- let currentActiveKey: string | string[] = defaultActiveKey;
- if (activeKey) {
- currentActiveKey = activeKey;
+const Collapse = React.forwardRef((props, ref): React.ReactElement => {
+ const {
+ items,
+ value,
+ defaultValue,
+ onValueChange,
+ multiple = true,
+ bordered = true,
+ size = 'md',
+ showArrow = true,
+ expandIcon,
+ expandIconPosition = 'start',
+ disabled = false,
+ collapsible = 'header',
+ destroyOnHidden = false,
+ forceRender = false,
+ itemClassName,
+ itemStyle,
+ headerClassName,
+ bodyClassName,
+ onItemClick,
+ prefixCls: customisedCls,
+ className,
+ ...otherProps
+ } = props;
+ const configContext = useContext(ConfigContext);
+ const prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);
+ const isControlled = value !== undefined;
+ const [innerValue, setInnerValue] = useState(() =>
+ normalizeValue(defaultValue, multiple)
+ );
+
+ useEffect(() => {
+ if (!isControlled) return;
+ setInnerValue(normalizeValue(value, multiple));
+ }, [isControlled, value, multiple]);
+
+ const currentValue = isControlled ? normalizeValue(value, multiple) : innerValue;
+
+ const itemMap = useMemo(() => new Set(items.map((item) => item.key)), [items]);
+ const activeValue = useMemo(
+ () => currentValue.filter((key) => itemMap.has(key)),
+ [currentValue, itemMap]
+ );
+
+ const cls = classNames(prefixCls, className, {
+ [`${prefixCls}_borderless`]: !bordered,
+ [`${prefixCls}_${size}`]: size,
+ });
+
+ const updateValue = (nextValue: CollapseValue) => {
+ const normalized = normalizeValue(nextValue, multiple);
+
+ if (!isControlled) {
+ setInnerValue(normalized);
}
- const [activeItems, setActiveItems] = useState(toArray(currentActiveKey));
- const configContext = useContext(ConfigContext);
- const prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);
- const cls = classNames(prefixCls, className, {
- [`${prefixCls}_borderless`]: !bordered,
- });
- const updateActiveItems = (items: string[]) => {
- if (!('activeKey' in props)) {
- // only for defaultKey
- setActiveItems(items);
- }
- onChange && onChange(items);
- };
+ onValueChange?.(normalized);
+ };
- const handleOnItemClick = (itemKey: string) => {
- let items = activeItems;
- if (accordion) {
- items = items[0] === itemKey ? [] : [itemKey];
- } else {
- items = [...activeItems];
- const index = items.indexOf(itemKey);
- const isActive = index > -1;
- if (isActive) {
- // remove active state
- items.splice(index, 1);
- } else {
- items.push(itemKey);
- }
- }
- updateActiveItems(items);
- };
+ const handleToggle = (key: string) => {
+ const isActive = activeValue.includes(key);
+
+ if (multiple) {
+ updateValue(
+ isActive
+ ? activeValue.filter((activeKey) => activeKey !== key)
+ : [...activeValue, key]
+ );
+ return;
+ }
- useEffect(() => {
- // Update state from updated props
- activeKey && setActiveItems(toArray(activeKey));
- }, [activeKey]);
+ updateValue(isActive ? [] : [key]);
+ };
- return (
-
-
- {React.Children.map(children, (child, idx) => {
- const childElement = child as React.FunctionComponentElement;
- if (childElement.type.displayName === 'CollapsePanel') {
- const itemProps: Partial = {
- deletable,
- showArrow,
- itemKey: `${idx}`,
- };
- return React.cloneElement(childElement, itemProps);
- }
- return child;
- })}
-
-
- );
- }
-);
+ return (
+
+ {items.map((item) => (
+
+ );
+});
Collapse.displayName = 'Collapse';
diff --git a/packages/react/src/collapse/demo/Accordion.tsx b/packages/react/src/collapse/demo/Accordion.tsx
index ed23e4e99..5b3872d4b 100644
--- a/packages/react/src/collapse/demo/Accordion.tsx
+++ b/packages/react/src/collapse/demo/Accordion.tsx
@@ -1,24 +1,32 @@
import React from 'react';
import { Collapse } from '@tiny-design/react';
-export default function AccordionDemo() {
- const { Panel } = Collapse;
-
- const text = `A dog is a type of domesticated animal.
+const text = `A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.`;
+export default function AccordionDemo() {
return (
-
-
- {text}
-
-
- {text}
-
-
- {text}
-
-
+ {text},
+ },
+ {
+ key: 'chapter-2',
+ label: 'Chapter 2',
+ children: {text}
,
+ },
+ {
+ key: 'chapter-3',
+ label: 'Chapter 3',
+ children: {text}
,
+ },
+ ]}
+ />
);
}
diff --git a/packages/react/src/collapse/demo/Basic.tsx b/packages/react/src/collapse/demo/Basic.tsx
index 7dcdad8e1..e32b1bd85 100644
--- a/packages/react/src/collapse/demo/Basic.tsx
+++ b/packages/react/src/collapse/demo/Basic.tsx
@@ -1,28 +1,32 @@
import React from 'react';
import { Collapse } from '@tiny-design/react';
-export default function BasicDemo() {
- const { Panel } = Collapse;
-
- const callback = (key: string | string[]) => {
- console.log(key);
- };
-
- const text = `A dog is a type of domesticated animal.
+const text = `A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.`;
+export default function BasicDemo() {
return (
-
-
- {text}
-
-
- {text}
-
-
- {text}
-
-
+ {text},
+ },
+ {
+ key: 'details',
+ label: 'Details',
+ children: {text}
,
+ },
+ {
+ key: 'disabled',
+ label: 'Disabled panel',
+ disabled: true,
+ children: {text}
,
+ },
+ ]}
+ />
);
}
diff --git a/packages/react/src/collapse/demo/Borderless.tsx b/packages/react/src/collapse/demo/Borderless.tsx
index c02b7aada..a49666a23 100644
--- a/packages/react/src/collapse/demo/Borderless.tsx
+++ b/packages/react/src/collapse/demo/Borderless.tsx
@@ -1,24 +1,30 @@
import React from 'react';
-import { Collapse } from '@tiny-design/react';
+import { Collapse, Tag } from '@tiny-design/react';
export default function BorderlessDemo() {
- const { Panel } = Collapse;
-
- const text = `A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.`;
-
return (
-
-
- {text}
-
-
- {text}
-
-
- {text}
-
-
+ Stable,
+ children: 'Borderless mode keeps the layout lighter when Collapse is used inside cards or side panels.',
+ },
+ {
+ key: 'spacing',
+ label: 'Spacing rhythm',
+ children: 'Size presets affect both the trigger row and the content body spacing.',
+ },
+ {
+ key: 'motion',
+ label: 'Motion tokens',
+ children: 'Motion is driven by the shared transition token instead of a hard-coded timeout.',
+ },
+ ]}
+ />
);
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/collapse/demo/Deletable.tsx b/packages/react/src/collapse/demo/Deletable.tsx
index 8a86bbbae..20ebf54c3 100644
--- a/packages/react/src/collapse/demo/Deletable.tsx
+++ b/packages/react/src/collapse/demo/Deletable.tsx
@@ -1,24 +1,83 @@
import React from 'react';
-import { Collapse } from '@tiny-design/react';
+import { Collapse, Button } from '@tiny-design/react';
+
+type DemoItem = {
+ key: string;
+ label: string;
+ children: string;
+};
export default function DeletableDemo() {
- const { Panel } = Collapse;
+ const [items, setItems] = React.useState([
+ {
+ key: 'architecture',
+ label: 'Architecture',
+ children: 'Use controlled state to remove items from the source array instead of mutating DOM nodes.',
+ },
+ {
+ key: 'performance',
+ label: 'Performance',
+ children: 'The active value is filtered alongside the item list so removed panels do not leave stale state behind.',
+ },
+ {
+ key: 'preload',
+ label: 'Preload',
+ children: 'This pattern works with any async source because the Collapse only consumes items data.',
+ },
+ ]);
+ const [value, setValue] = React.useState(['architecture', 'performance']);
+
+ const removeItem = (key: string) => {
+ setItems((currentItems) => currentItems.filter((item) => item.key !== key));
+ setValue((currentValue) => currentValue.filter((activeKey) => activeKey !== key));
+ };
- const text = `A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.`;
+ const resetItems = () => {
+ setItems([
+ {
+ key: 'architecture',
+ label: 'Architecture',
+ children: 'Use controlled state to remove items from the source array instead of mutating DOM nodes.',
+ },
+ {
+ key: 'performance',
+ label: 'Performance',
+ children: 'The active value is filtered alongside the item list so removed panels do not leave stale state behind.',
+ },
+ {
+ key: 'preload',
+ label: 'Preload',
+ children: 'This pattern works with any async source because the Collapse only consumes items data.',
+ },
+ ]);
+ setValue(['architecture', 'performance']);
+ };
return (
-
-
- {text}
-
-
- {text}
-
-
- {text}
-
-
+ <>
+
+ Reset panels
+
+
+ ({
+ ...item,
+ extra: (
+ {
+ event.stopPropagation();
+ removeItem(item.key);
+ }}
+ >
+ Delete
+
+ ),
+ }))}
+ />
+
);
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/collapse/demo/Extra.tsx b/packages/react/src/collapse/demo/Extra.tsx
index b82143d91..536724af9 100644
--- a/packages/react/src/collapse/demo/Extra.tsx
+++ b/packages/react/src/collapse/demo/Extra.tsx
@@ -1,42 +1,40 @@
import React from 'react';
-import { Collapse, Button, Badge, Tag } from '@tiny-design/react';
+import { Collapse, Badge, Button, Tag } from '@tiny-design/react';
export default function ExtraDemo() {
- const { Panel } = Collapse;
-
return (
-
- {
- e.stopPropagation();
- alert('Settings clicked');
- }}
- >
- Settings
-
- }
- >
- Panel content with an extra action button.
-
- New}
- >
- Panel content with a tag.
-
-
+ `Recent activity${active ? ' opened' : ''}`,
+ extra: {active ? 'Live' : 'Draft'} ,
+ children: 'Both label and extra accept render functions that receive the active and disabled state.',
+ },
+ {
+ key: 'settings',
+ label: 'Panel with action',
+ extra: (
+ {
+ event.stopPropagation();
+ alert('Settings clicked');
+ }}
+ >
+ Settings
+
+ ),
+ children: 'Interactive controls inside extra should stop propagation if they should not toggle the panel.',
+ },
+ ]}
+ />
);
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/collapse/demo/Nested.tsx b/packages/react/src/collapse/demo/Nested.tsx
index 5c7f2cde8..10f4cc7ad 100644
--- a/packages/react/src/collapse/demo/Nested.tsx
+++ b/packages/react/src/collapse/demo/Nested.tsx
@@ -2,27 +2,33 @@ import React from 'react';
import { Collapse } from '@tiny-design/react';
export default function NestedDemo() {
- const { Panel } = Collapse;
-
- const text = `A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.`;
-
return (
-
-
-
-
- {text}
-
-
-
-
- {text}
-
-
- {text}
-
-
+
-### Basic Collapse
-
-By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
+### Basic
-### Accordion
+### Single Open
-Only one panel can be expanded at a time.
+Set `multiple={false}` to limit the expanded state to one panel.
-### Nested panel
-
-`Collapse` is nested inside the `Collapse`.
+### Nested
@@ -75,16 +63,16 @@ A borderless style of Collapse.
### Deletable
-`Panel` can be deleted.
+Use `extra` plus controlled state to remove panels from the source array.
-### Extra Content
+### Dynamic Header Content
-Add extra elements in the panel header corner with the `extra` prop.
+`label`, `extra`, and `expandIcon` can react to panel state.
-### 基本折叠
-
-默认情况下，可以同时展开任意数量的面板。此示例中第一个面板是展开的。
+### 基本用法
-### 手风琴
+### 单项展开
-同一时间只能展开一个面板。
+设置 `multiple={false}` 后，同一时间只保留一个展开项。
-### 嵌套面板
-
-`Collapse` 可以嵌套在 `Collapse` 内部。
+### 嵌套
@@ -75,16 +63,16 @@ const { Panel } = Collapse;
### 可删除
-面板可以被删除。
+通过 `extra` 配合受控状态，从数据源中移除面板。
-### 额外内容
+### 动态头部内容
-使用 `extra` 属性在面板头部角落添加额外元素。
+`label`、`extra` 和 `expandIcon` 都可以根据面板状态动态渲染。
, 'onChange'> {
- defaultActiveKey?: string | string[];
- activeKey?: string | string[];
- /** Only open one panel */
- accordion?: boolean;
- /** Allow to delete */
- deletable?: boolean;
- showArrow?: boolean;
+ Omit, 'children' | 'onChange' | 'defaultValue'> {
+ items: CollapseItem[];
+ value?: CollapseValue;
+ defaultValue?: CollapseValue;
+ onValueChange?: (value: CollapseValue) => void;
+ multiple?: boolean;
bordered?: boolean;
- onChange?: (keys: string | string[]) => void;
+ size?: SizeType;
+ expandIcon?: ReactNode | CollapseExpandIconRender;
+ expandIconPosition?: 'start' | 'end';
+ showArrow?: boolean;
+ disabled?: boolean;
+ collapsible?: CollapseCollapsible;
+ destroyOnHidden?: boolean;
+ forceRender?: boolean;
+ itemClassName?: string;
+ itemStyle?: CSSProperties;
+ headerClassName?: string;
+ bodyClassName?: string;
+ onItemClick?: (key: string, event: React.MouseEvent) => void;
}
diff --git a/packages/react/src/tree/__tests__/__snapshots__/tree.test.tsx.snap b/packages/react/src/tree/__tests__/__snapshots__/tree.test.tsx.snap
index fabac959b..82a7ffed4 100644
--- a/packages/react/src/tree/__tests__/__snapshots__/tree.test.tsx.snap
+++ b/packages/react/src/tree/__tests__/__snapshots__/tree.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`