0
# Legacy Panel Component
1

2
The Panel component provides backward compatibility for existing codebases. **This approach is deprecated** and will be removed in v4.0.0. Use the `items` prop instead for new implementations.
3

4
## Panel Component API
5

6
```typescript { .api }
7
declare const Panel: React.ForwardRefExoticComponent<CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
8

9
interface CollapsePanelProps extends React.DOMAttributes<HTMLDivElement> {
10
  id?: string;
11
  header?: string | React.ReactNode;
12
  prefixCls?: string;
13
  headerClass?: string;
14
  showArrow?: boolean;
15
  className?: string;
16
  classNames?: Partial<Record<SemanticName, string>>;
17
  style?: object;
18
  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
19
  isActive?: boolean;
20
  openMotion?: CSSMotionProps;
21
  destroyInactivePanel?: boolean;
22
  accordion?: boolean;
23
  forceRender?: boolean;
24
  extra?: string | React.ReactNode;
25
  onItemClick?: (panelKey: React.Key) => void;
26
  expandIcon?: (props: CollapsePanelProps) => React.ReactNode;
27
  panelKey?: React.Key;
28
  role?: string;
29
  collapsible?: CollapsibleType;
30
  children?: React.ReactNode;
31
}
32

33
type CollapsibleType = 'header' | 'icon' | 'disabled';
34
type SemanticName = 'header' | 'title' | 'body' | 'icon';
35
```
36

37
## Props Documentation
38

39
### Content Props
40

41
- **`header`**: `string | React.ReactNode` - Panel header content
42
- **`children`**: `React.ReactNode` - Panel body content
43
- **`extra`**: `string | React.ReactNode` - Additional content in header area
44

45
### Identification Props
46

47
- **`id`**: `string` - HTML id attribute for the panel
48
- **`panelKey`**: `React.Key` - Unique key for the panel (falls back to React key)
49

50
### Styling Props
51

52
- **`className`**: `string` - Custom CSS class for panel container
53
- **`style`**: `object` - Inline styles for panel container
54
- **`headerClass`**: `string` - Custom CSS class for panel header
55
- **`classNames`**: `Partial<Record<SemanticName, string>>` - Semantic CSS classes
56
- **`styles`**: `Partial<Record<SemanticName, React.CSSProperties>>` - Semantic inline styles
57
- **`prefixCls`**: `string` - CSS class prefix (inherited from parent Collapse)
58

59
### Behavior Props
60

61
- **`showArrow`**: `boolean` - Show/hide expand arrow (default: true)
62
- **`collapsible`**: `CollapsibleType` - Panel collapsible behavior
63
- **`forceRender`**: `boolean` - Always render content even when inactive
64
- **`destroyInactivePanel`**: `boolean` - Destroy content when panel is inactive
65

66
### Event Props
67

68
- **`onItemClick`**: `(panelKey: React.Key) => void` - Panel click handler
69
- **`role`**: `string` - ARIA role override
70

71
### Internal Props (managed by parent Collapse)
72

73
- **`isActive`**: `boolean` - Panel active state
74
- **`accordion`**: `boolean` - Accordion mode flag
75
- **`openMotion`**: `CSSMotionProps` - Animation configuration
76
- **`expandIcon`**: `(props: CollapsePanelProps) => React.ReactNode` - Custom expand icon
77

78
## Usage Examples
79

80
### Basic Legacy Panel Usage
81

82
```typescript
83
import Collapse, { Panel } from "rc-collapse";
84

85
const LegacyExample = () => {
86
  return (
87
    <Collapse defaultActiveKey={['1']}>
88
      <Panel header="Panel 1" key="1">
89
        Content of panel 1
90
      </Panel>
91
      <Panel header="Panel 2" key="2">
92
        Content of panel 2
93
      </Panel>
94
    </Collapse>
95
  );
96
};
97
```
98

99
### Panel with Custom Header
100

101
```typescript
102
import Collapse, { Panel } from "rc-collapse";
103

104
const CustomHeaderPanel = () => {
105
  const customHeader = (
106
    <div style={{ display: 'flex', alignItems: 'center' }}>
107
      <Icon type="user" />
108
      <span style={{ marginLeft: 8 }}>User Profile</span>
109
    </div>
110
  );
111

112
  return (
113
    <Collapse>
114
      <Panel header={customHeader} key="profile">
115
        User profile content here
116
      </Panel>
117
    </Collapse>
118
  );
119
};
120
```
121

122
### Panel with Extra Content
123

124
```typescript
125
import Collapse, { Panel } from "rc-collapse";
126

127
const PanelWithExtra = () => {
128
  const extraContent = (
129
    <button
130
      onClick={(e) => {
131
        e.stopPropagation();
132
        console.log('Extra button clicked');
133
      }}
134
    >
135
      Settings
136
    </button>
137
  );
138

139
  return (
140
    <Collapse>
141
      <Panel 
142
        header="Panel with Extra" 
143
        key="extra"
144
        extra={extraContent}
145
      >
146
        Panel content with extra button in header
147
      </Panel>
148
    </Collapse>
149
  );
150
};
151
```
152

153
### Disabled Panel
154

155
```typescript
156
import Collapse, { Panel } from "rc-collapse";
157

158
const DisabledPanel = () => {
159
  return (
160
    <Collapse>
161
      <Panel header="Normal Panel" key="normal">
162
        This panel can be toggled
163
      </Panel>
164
      <Panel 
165
        header="Disabled Panel" 
166
        key="disabled"
167
        collapsible="disabled"
168
      >
169
        This panel cannot be toggled
170
      </Panel>
171
    </Collapse>
172
  );
173
};
174
```
175

176
### Panel with Custom Styling
177

178
```typescript
179
import Collapse, { Panel } from "rc-collapse";
180

181
const StyledPanel = () => {
182
  return (
183
    <Collapse>
184
      <Panel
185
        header="Styled Panel"
186
        key="styled"
187
        className="custom-panel"
188
        headerClass="custom-header"
189
        classNames={{
190
          header: 'semantic-header',
191
          title: 'semantic-title',
192
          body: 'semantic-body',
193
        }}
194
        styles={{
195
          header: { backgroundColor: '#f0f0f0' },
196
          body: { padding: '20px' },
197
        }}
198
      >
199
        Panel with custom styling
200
      </Panel>
201
    </Collapse>
202
  );
203
};
204
```
205

206
## Migration to Items API
207

208
### Before (Legacy Panel)
209

210
```typescript
211
import Collapse, { Panel } from "rc-collapse";
212

213
const LegacyApproach = () => {
214
  return (
215
    <Collapse accordion defaultActiveKey="1">
216
      <Panel header="First Panel" key="1" className="panel-1">
217
        First panel content
218
      </Panel>
219
      <Panel 
220
        header="Second Panel" 
221
        key="2"
222
        extra={<button>Action</button>}
223
        collapsible="disabled"
224
      >
225
        Second panel content
226
      </Panel>
227
    </Collapse>
228
  );
229
};
230
```
231

232
### After (Modern Items)
233

234
```typescript
235
import Collapse from "rc-collapse";
236

237
const ModernApproach = () => {
238
  const items = [
239
    {
240
      key: '1',
241
      label: 'First Panel',
242
      children: 'First panel content',
243
      className: 'panel-1',
244
    },
245
    {
246
      key: '2',
247
      label: 'Second Panel',
248
      children: 'Second panel content',
249
      extra: <button>Action</button>,
250
      collapsible: 'disabled',
251
    },
252
  ];
253

254
  return (
255
    <Collapse 
256
      accordion 
257
      defaultActiveKey="1"
258
      items={items}
259
    />
260
  );
261
};
262
```
263

264
## Migration Benefits
265

266
### Advantages of Items API
267

268
1. **Better Performance**: No need to clone React elements
269
2. **Simpler Configuration**: Plain objects instead of JSX components
270
3. **Better TypeScript Support**: Full type inference for item properties
271
4. **Easier Testing**: Simple object structures are easier to test
272
5. **Better Developer Experience**: Cleaner code and better IDE support
273

274
### Migration Strategy
275

276
1. **Gradual Migration**: Both approaches can coexist during transition
277
2. **Automated Tools**: Consider writing codemods for large codebases
278
3. **Feature Parity**: Items API supports all Panel features
279
4. **No Breaking Changes**: Existing Panel usage continues to work until v4.0.0
280

281
## Deprecation Timeline
282

283
- **Current (3.x)**: Panel component works with deprecation warnings
284
- **v4.0.0**: Panel component will be removed
285
- **Recommendation**: Migrate to items API for new code
286
- **Support**: Legacy Panel will receive bug fixes until v4.0.0