75 lines
2.3 KiB
Plaintext
75 lines
2.3 KiB
Plaintext
import React, { useState } from 'react';
|
||
import './Collapse.css';
|
||
|
||
/**
|
||
* Aurora Admin Collapse（React）
|
||
* 对齐 组件2.txt 规范：标题栏高40px、左侧箭头旋转90°、内容分割线、手风琴模式
|
||
*
|
||
* props:
|
||
* - items : [{ key, title, disabled? }]
|
||
* - accordion: Boolean（手风琴模式，同时仅展开一个）
|
||
* - value / defaultValue : 展开 key 数组（手风琴时为单个 key 字符串）
|
||
* - onChange(keys)
|
||
* - renderPanel(key) / children(key) : 返回对应面板内容
|
||
*/
|
||
export default function Collapse({
|
||
items = [],
|
||
accordion = false,
|
||
value,
|
||
defaultValue = accordion ? '' : [],
|
||
onChange,
|
||
renderPanel
|
||
}) {
|
||
const panelFn = renderPanel || (typeof children === 'function' ? children : null);
|
||
const [inner, setInner] = useState(defaultValue);
|
||
const open = value !== undefined ? value : inner;
|
||
|
||
const openList = accordion ? (open ? [open] : []) : (Array.isArray(open) ? open : []);
|
||
const isOpen = (k) => openList.includes(k);
|
||
|
||
const toggle = (item) => {
|
||
if (item.disabled) return;
|
||
let next;
|
||
if (accordion) {
|
||
next = isOpen(item.key) ? [] : [item.key];
|
||
} else {
|
||
next = isOpen(item.key) ? openList.filter(k => k !== item.key) : [...openList, item.key];
|
||
}
|
||
const result = accordion ? (next[0] || '') : next;
|
||
if (value === undefined) setInner(result);
|
||
onChange && onChange(result);
|
||
};
|
||
|
||
return (
|
||
<div className="aa-collapse">
|
||
{items.map((item) => (
|
||
<div
|
||
key={item.key}
|
||
className={`aa-collapse-item${isOpen(item.key) ? ' is-open' : ''}${item.disabled ? ' is-disabled' : ''}`}
|
||
>
|
||
<div className="aa-collapse-header" onClick={() => toggle(item)}>
|
||
<span className="aa-collapse-arrow">▶</span>
|
||
<span className="aa-collapse-title">{item.title}</span>
|
||
</div>
|
||
{isOpen(item.key) && (
|
||
<div className="aa-collapse-content">
|
||
{panelFn ? panelFn(item.key) : null}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/*
|
||
用法示例：
|
||
import Collapse from './Collapse';
|
||
const items = [
|
||
{ key: 'a', title: '基本设置' },
|
||
{ key: 'b', title: '通知设置' },
|
||
{ key: 'c', title: '高级', disabled: true }
|
||
];
|
||
<Collapse accordion items={items} defaultValue="a" renderPanel={(k) => <div>内容：{k}</div>} />
|
||
*/
|