ant-design-vue/components/collapse/Collapse.tsx
2020-10-19 16:43:10 +08:00

81 lines
2.9 KiB
TypeScript

import { CSSProperties, defineComponent, inject, PropType } from 'vue';
import animation from '../_util/openAnimation';
import { getOptionProps, getComponent, isValidElement, getSlot } from '../_util/props-util';
import { cloneElement } from '../_util/vnode';
import VcCollapse from '../vc-collapse';
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types';
import { tuple, VueNode } from '../_util/type';
export interface PanelProps {
isActive?: boolean;
header?: VueNode;
className?: string;
class?: string;
style?: CSSProperties;
showArrow?: boolean;
forceRender?: boolean;
disabled?: boolean;
extra?: VueNode;
}
type ActiveKeyType = Array<string | number> | string | number;
export default defineComponent({
name: 'ACollapse',
inheritAttrs: false,
props: {
prefixCls: PropTypes.string,
activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
accordion: PropTypes.looseBool,
destroyInactivePanel: PropTypes.looseBool,
bordered: PropTypes.looseBool.def(true),
expandIcon: PropTypes.func,
openAnimation: PropTypes.object.def(animation),
expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
'onUpdate:activeKey': PropTypes.func,
onChange: PropTypes.func,
},
setup() {
return {
configProvider: inject('configProvider', defaultConfigProvider),
};
},
methods: {
renderExpandIcon(panelProps: PanelProps = {}, prefixCls: string) {
const expandIcon = getComponent(this, 'expandIcon', panelProps);
const icon = expandIcon || <RightOutlined rotate={panelProps.isActive ? 90 : undefined} />;
return isValidElement(Array.isArray(expandIcon) ? icon[0] : icon)
? cloneElement(icon, {
class: `${prefixCls}-arrow`,
})
: icon;
},
handleChange(activeKey: ActiveKeyType) {
this.$emit('update:activeKey', activeKey);
this.$emit('change', activeKey);
},
},
render() {
const { prefixCls: customizePrefixCls, bordered, expandIconPosition } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const { class: className, ...restAttrs } = this.$attrs as any;
const collapseClassName = {
[className]: className,
[`${prefixCls}-borderless`]: !bordered,
[`${prefixCls}-icon-position-${expandIconPosition}`]: true,
};
const rcCollapeProps = {
...getOptionProps(this),
prefixCls,
expandIcon: (panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls),
class: collapseClassName,
...restAttrs,
onChange: this.handleChange,
};
return <VcCollapse {...rcCollapeProps}>{getSlot(this)}</VcCollapse>;
},
});