🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

41 lines
1.1 KiB

import classNames from '../_util/classNames';
import type { TableLocale } from './interface';
interface DefaultExpandIconProps<RecordType> {
prefixCls: string;
onExpand: (record: RecordType, e: MouseEvent) => void;
record: RecordType;
expanded: boolean;
expandable: boolean;
}
function renderExpandIcon(locale: TableLocale) {
return function expandIcon<RecordType>({
prefixCls,
onExpand,
record,
expanded,
expandable,
}: DefaultExpandIconProps<RecordType>) {
const iconPrefix = `${prefixCls}-row-expand-icon`;
return (
<button
type="button"
onClick={e => {
onExpand(record, e!);
e.stopPropagation();
}}
class={classNames(iconPrefix, {
[`${iconPrefix}-spaced`]: !expandable,
[`${iconPrefix}-expanded`]: expandable && expanded,
[`${iconPrefix}-collapsed`]: expandable && !expanded,
})}
aria-label={expanded ? locale.collapse : locale.expand}
aria-expanded={expanded}
/>
);
};
}
export default renderExpandIcon;