github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update vc-tabs

pull/2494/head
tanjinzhou 2020-06-23 17:34:41 +08:00
parent 7661eafe9c
commit 132a1e58bf
9 changed files with 53 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/vc-tabs/src/InkTabBar.jsx
View File

@ -4,24 +4,19 @@ import TabBarRootNode from './TabBarRootNode';
import SaveRef from './SaveRef';
function noop() {}
export default {
name: 'InkTabBar',
functional: true,
render(h, context) {
const { props, listeners = {} } = context;
return (
<SaveRef
children={(saveRef, getRef) => (
<TabBarRootNode saveRef={saveRef} {...props}>
<TabBarTabsNode
onTabClick={listeners.tabClick || noop}
saveRef={saveRef}
{...{ props }}
/>
<InkTabBarNode saveRef={saveRef} getRef={getRef} {...{ props }} />
</TabBarRootNode>
)}
/>
);
},
const InkTabBar = (_, { attrs }) => {
const { onTabClick = noop, ...props } = attrs;
return (
<SaveRef
children={(saveRef, getRef) => (
<TabBarRootNode saveRef={saveRef} {...props}>
<TabBarTabsNode onTabClick={onTabClick} saveRef={saveRef} {...props} />
<InkTabBarNode saveRef={saveRef} getRef={getRef} {...props} />
</TabBarRootNode>
)}
/>
);
};
InkTabBar.inheritAttrs = false;
export default InkTabBar;

10
components/vc-tabs/src/InkTabBarNode.jsx
View File

@ -8,6 +8,7 @@ import {
getActiveIndex,
} from './utils';
import BaseMixin from '../../_util/BaseMixin';
import createRefHooks from '../../_util/createRefHooks';
function componentDidUpdate(component, init) {
const { styles = {}, panels, activeKey, direction } = component.$props;
@ -120,14 +121,7 @@ export default {
style={styles.inkBar}
class={classes}
key="inkBar"
{...{
directives: [
{
name: 'ant-ref',
value: this.saveRef('inkBar'),
},
],
}}
{...createRefHooks(this.saveRef('inkBar'))}
/>
);
},

16
components/vc-tabs/src/ScrollableInkTabBar.jsx
View File

@ -3,7 +3,6 @@ import TabBarTabsNode from './TabBarTabsNode';
import TabBarRootNode from './TabBarRootNode';
import ScrollableTabBarNode from './ScrollableTabBarNode';
import SaveRef from './SaveRef';
import { getListeners } from '../../_util/props-util';
export default {
name: 'ScrollableInkTabBar',
@ -21,19 +20,14 @@ export default {
'nextIcon',
],
render() {
const props = { ...this.$props };
const listeners = getListeners(this);
const { default: renderTabBarNode } = this.$scopedSlots;
const { default: renderTabBarNode } = this.$slots;
return (
<SaveRef
children={(saveRef, getRef) => (
<TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
<ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }}>
<TabBarTabsNode
saveRef={saveRef}
{...{ props: { ...props, renderTabBarNode }, on: listeners }}
/>
<InkTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }} />
<TabBarRootNode saveRef={saveRef} {...this.$attrs}>
<ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.$attrs}>
<TabBarTabsNode saveRef={saveRef} {...{ ...this.$attrs, renderTabBarNode }} />
<InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.$attrs} />
</ScrollableTabBarNode>
</TabBarRootNode>
)}

31
components/vc-tabs/src/ScrollableTabBar.jsx
View File

@ -3,21 +3,18 @@ import TabBarRootNode from './TabBarRootNode';
import TabBarTabsNode from './TabBarTabsNode';
import SaveRef from './SaveRef';
export default {
name: 'ScrollableTabBar',
functional: true,
render(h, context) {
const { props, listeners = {} } = context;
return (
<SaveRef
children={(saveRef, getRef) => (
<TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
<ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }}>
<TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
</ScrollableTabBarNode>
</TabBarRootNode>
)}
/>
);
},
const ScrollableTabBar = (_, { attrs }) => {
return (
<SaveRef
children={(saveRef, getRef) => (
<TabBarRootNode saveRef={saveRef} {...attrs}>
<ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...attrs}>
<TabBarTabsNode saveRef={saveRef} {...attrs} />
</ScrollableTabBarNode>
</TabBarRootNode>
)}
/>
);
};
ScrollableTabBar.inheritAttrs = false;
export default ScrollableTabBar;

45
components/vc-tabs/src/ScrollableTabBarNode.jsx
View File

@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
import ResizeObserver from 'resize-observer-polyfill';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import { getComponentFromProp } from '../../_util/props-util';
import { getComponent, getSlot } from '../../_util/props-util';
import { setTransform, isTransform3dSupported } from './utils';
import createRefHooks from '../../_util/createRefHooks';
function noop() {}
export default {
@ -202,9 +203,6 @@ export default {
},
setNext(v) {
if (!v) {
// debugger
}
if (this.next !== v) {
this.next = v;
}
@ -275,8 +273,8 @@ export default {
render() {
const { next, prev } = this;
const { prefixCls, scrollAnimated, navWrapper } = this.$props;
const prevIcon = getComponentFromProp(this, 'prevIcon');
const nextIcon = getComponentFromProp(this, 'nextIcon');
const prevIcon = getComponent(this, 'prevIcon');
const nextIcon = getComponent(this, 'nextIcon');
const showNextPrev = prev || next;
const prevButton = (
@ -321,41 +319,14 @@ export default {
[`${prefixCls}-nav-container-scrolling`]: showNextPrev,
}}
key="container"
{...{
directives: [
{
name: 'ant-ref',
value: this.saveRef('container'),
},
],
}}
{...createRefHooks(this.saveRef('container'))}
>
{prevButton}
{nextButton}
<div
class={`${prefixCls}-nav-wrap`}
{...{
directives: [
{
name: 'ant-ref',
value: this.saveRef('navWrap'),
},
],
}}
>
<div class={`${prefixCls}-nav-wrap`} {...createRefHooks(this.saveRef('navWrap'))}>
<div class={`${prefixCls}-nav-scroll`}>
<div
class={navClasses}
{...{
directives: [
{
name: 'ant-ref',
value: this.saveRef('nav'),
},
],
}}
>
{navWrapper(this.$slots.default)}
<div class={navClasses} {...createRefHooks(this.saveRef('nav'))}>
{navWrapper(getSlot(this))}
</div>
</div>
</div>

13
components/vc-tabs/src/Sentinel.jsx
View File

@ -1,5 +1,7 @@
import PropTypes from '../../_util/vue-types';
import KeyCode from '../../_util/KeyCode';
import createRefHooks from '../../_util/createRefHooks';
import { getSlot } from '../../_util/props-util';
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
export default {
@ -31,19 +33,12 @@ export default {
return (
<div
tabIndex={0}
{...{
directives: [
{
name: 'ant-ref',
value: setRef,
},
],
}}
{...createRefHooks(setRef)}
style={sentinelStyle}
onKeydown={this.onKeyDown}
role="presentation"
>
{this.$slots.default}
{getSlot(this)}
</div>
);
},

7
components/vc-tabs/src/TabBar.jsx
View File

@ -1,19 +1,16 @@
import TabBarRootNode from './TabBarRootNode';
import TabBarTabsNode from './TabBarTabsNode';
import SaveRef from './SaveRef';
import { getAttrs, getListeners } from '../../_util/props-util';
export default {
name: 'TabBar',
inheritAttrs: false,
render() {
const props = getAttrs(this);
const listeners = getListeners(this);
return (
<SaveRef
children={saveRef => (
<TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
<TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
<TabBarRootNode saveRef={saveRef} {...this.$attrs}>
<TabBarTabsNode saveRef={saveRef} {...this.$attrs} />
</TabBarRootNode>
)}
/>

11
components/vc-tabs/src/TabBarRootNode.jsx
View File

@ -1,6 +1,7 @@
import { cloneElement } from '../../_util/vnode';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import createRefHooks from '../../_util/createRefHooks';
function noop() {}
export default {
name: 'TabBarRootNode',
@ -11,6 +12,7 @@ export default {
prefixCls: PropTypes.string.def(''),
tabBarPosition: PropTypes.string.def('top'),
extraContent: PropTypes.any,
onKeydown: PropTypes.func,
},
methods: {
onKeyDown(e) {
@ -45,14 +47,7 @@ export default {
class={cls}
tabIndex="0"
onKeydown={onKeyDown}
{...{
directives: [
{
name: 'ant-ref',
value: this.saveRef('root'),
},
],
}}
{...createRefHooks(this.saveRef('root'))}
>
{newChildren}
</div>

4
components/vc-tabs/src/index.js
View File

@ -1,11 +1,7 @@
// based on rc-tabs 9.7.0
import ref from 'vue-ref';
import Vue from 'vue';
import Tabs from './Tabs';
import TabPane from './TabPane';
import TabContent from './TabContent';
Vue.use(ref, { name: 'ant-ref' });
export default Tabs;
export { TabPane, TabContent };