import PropTypes from '../../_util/vue-types'; import { cloneElement } from '../../_util/vnode'; import { getTransformByIndex, getActiveIndex, getTransformPropValue, getMarginStyle, } from './utils'; export default { name: 'TabContent', props: { animated: { type: Boolean, default: true }, animatedWithMargin: { type: Boolean, default: true }, prefixCls: { default: 'ant-tabs', type: String, }, activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), tabBarPosition: String, direction: PropTypes.string, destroyInactiveTabPane: PropTypes.bool, }, computed: { classes() { const { animated, prefixCls } = this; return { [`${prefixCls}-content`]: true, [animated ? `${prefixCls}-content-animated` : `${prefixCls}-content-no-animated`]: true, }; }, }, methods: { getTabPanes() { const props = this.$props; const activeKey = props.activeKey; const children = this.$slots.default || []; const newChildren = []; children.forEach(child => { if (!child) { return; } const key = child.key; const active = activeKey === key; newChildren.push( cloneElement(child, { props: { active, destroyInactiveTabPane: props.destroyInactiveTabPane, rootPrefixCls: props.prefixCls, }, }), ); }); return newChildren; }, }, render() { const { activeKey, tabBarPosition, animated, animatedWithMargin, direction, classes } = this; let style = {}; if (animated && this.$slots.default) { const activeIndex = getActiveIndex(this.$slots.default, activeKey); if (activeIndex !== -1) { const animatedStyle = animatedWithMargin ? getMarginStyle(activeIndex, tabBarPosition) : getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition, direction)); style = animatedStyle; } else { style = { display: 'none', }; } } return (