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

refactor: createrefHooks to ref

pull/2498/head
tangjinzhou 2020-06-24 23:45:36 +08:00
parent da207c8d9b
commit 4cb214917f
15 changed files with 19 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit 19713260a1fcd951d75129e542f40c8e7c1bac35 Subproject commit 68d4ed26e381b03b4d90701184a724b892f213e2

3
components/_util/PortalWrapper.js
View File

@ -2,7 +2,6 @@ import PropTypes from './vue-types';
import switchScrollingEffect from './switchScrollingEffect'; import switchScrollingEffect from './switchScrollingEffect';
import setStyle from './setStyle'; import setStyle from './setStyle';
import Portal from './Portal'; import Portal from './Portal';
import createRefHooks from './createRefHooks';
let openCount = 0; let openCount = 0;
const windowIsUndefined = !( const windowIsUndefined = !(
@ -142,7 +141,7 @@ export default {
<Portal <Portal
getContainer={this.getDomContainer} getContainer={this.getDomContainer}
children={children(childProps)} children={children(childProps)}
{...createRefHooks(this.savePortal)} ref={this.savePortal}
></Portal> ></Portal>
); );
} }

14
components/_util/createRefHooks.js
View File

@ -1,14 +0,0 @@
const createRefHooks = fn => {
return {
onVnodeBeforeMount: vnode => {
fn((vnode.component && vnode.component.ctx) || vnode.el, vnode.key);
},
onVnodeUpdated: vnode => {
fn((vnode.component && vnode.component.ctx) || vnode.el, vnode.key);
},
onVnodeUnmounted: vnode => {
fn(null, vnode.key);
},
};
};
export default createRefHooks;

3
components/switch/index.jsx
View File

@ -6,7 +6,6 @@ import VcSwitch from '../vc-switch';
import Wave from '../_util/wave'; import Wave from '../_util/wave';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning'; import warning from '../_util/warning';
import createRefHooks from '../_util/createRefHooks';
const Switch = { const Switch = {
name: 'ASwitch', name: 'ASwitch',
@ -72,7 +71,7 @@ const Switch = {
disabled: disabled || loading, disabled: disabled || loading,
...$attrs, ...$attrs,
class: classes, class: classes,
...createRefHooks(this.saveRef), ref: this.saveRef,
}; };
return ( return (

1
components/tabs/TabBar.jsx
View File

@ -65,6 +65,7 @@ const TabBar = {
const renderProps = { const renderProps = {
...this.$props, ...this.$props,
...this.$attrs, ...this.$attrs,
children: null,
inkBarAnimated, inkBarAnimated,
extraContent: tabBarExtraContent, extraContent: tabBarExtraContent,
prevIcon, prevIcon,

1
components/tabs/tabs.jsx
View File

@ -153,6 +153,7 @@ export default {
tabBarExtraContent, tabBarExtraContent,
renderTabBar: renderTabBarSlot, renderTabBar: renderTabBarSlot,
...restProps, ...restProps,
children,
}; };
const contentCls = { const contentCls = {
[`${prefixCls}-${tabPosition}-content`]: true, [`${prefixCls}-${tabPosition}-content`]: true,

3
components/vc-menu/SubMenu.jsx
View File

@ -11,7 +11,6 @@ import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout'; import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util'; import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
import getTransitionProps from '../_util/getTransitionProps'; import getTransitionProps from '../_util/getTransitionProps';
import createRefHooks from '../_util/createRefHooks';
let guid = 0; let guid = 0;
@ -483,7 +482,7 @@ const SubMenu = {
...titleClickEvents, ...titleClickEvents,
style, style,
class: `${prefixCls}-title`, class: `${prefixCls}-title`,
...createRefHooks(this.saveSubMenuTitle), ref: this.saveSubMenuTitle,
}; };
// expand custom icon should NOT be displayed in menu with horizontal mode. // expand custom icon should NOT be displayed in menu with horizontal mode.

3
components/vc-switch/Switch.jsx
View File

@ -1,7 +1,6 @@
import { switchPropTypes } from './PropTypes'; import { switchPropTypes } from './PropTypes';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { hasProp, getOptionProps, getComponent } from '../_util/props-util'; import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
import createRefHooks from '../_util/createRefHooks';
// function noop () { // function noop () {
// } // }
@ -107,7 +106,7 @@ export default {
'aria-checked': checked, 'aria-checked': checked,
disabled, disabled,
class: switchClassName, class: switchClassName,
...createRefHooks(this.saveRef), ref: this.saveRef,
}; };
return ( return (

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

@ -8,7 +8,6 @@ import {
getActiveIndex, getActiveIndex,
} from './utils'; } from './utils';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import createRefHooks from '../../_util/createRefHooks';
function componentDidUpdate(component, init) { function componentDidUpdate(component, init) {
const { styles = {}, panels, activeKey, direction } = component.$props; const { styles = {}, panels, activeKey, direction } = component.$props;
@ -117,13 +116,6 @@ export default {
[className]: true, [className]: true,
[inkBarAnimated ? `${className}-animated` : `${className}-no-animated`]: true, [inkBarAnimated ? `${className}-animated` : `${className}-no-animated`]: true,
}; };
return ( return <div style={styles.inkBar} class={classes} key="inkBar" ref={this.saveRef('inkBar')} />;
<div
style={styles.inkBar}
class={classes}
key="inkBar"
{...createRefHooks(this.saveRef('inkBar'))}
/>
);
}, },
}; };

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

@ -8,7 +8,7 @@ export default {
name: 'ScrollableInkTabBar', name: 'ScrollableInkTabBar',
inheritAttrs: false, inheritAttrs: false,
render() { render() {
const { default: renderTabBarNode } = this.$slots; const { children: renderTabBarNode } = this.$attrs;
return ( return (
<SaveRef <SaveRef
children={(saveRef, getRef) => ( children={(saveRef, getRef) => (

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

@ -4,7 +4,6 @@ import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { getComponent, getSlot } from '../../_util/props-util'; import { getComponent, getSlot } from '../../_util/props-util';
import { setTransform, isTransform3dSupported } from './utils'; import { setTransform, isTransform3dSupported } from './utils';
import createRefHooks from '../../_util/createRefHooks';
function noop() {} function noop() {}
export default { export default {
@ -320,13 +319,13 @@ export default {
[`${prefixCls}-nav-container-scrolling`]: showNextPrev, [`${prefixCls}-nav-container-scrolling`]: showNextPrev,
}} }}
key="container" key="container"
{...createRefHooks(this.saveRef('container'))} ref={this.saveRef('container')}
> >
{prevButton} {prevButton}
{nextButton} {nextButton}
<div class={`${prefixCls}-nav-wrap`} {...createRefHooks(this.saveRef('navWrap'))}> <div class={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
<div class={`${prefixCls}-nav-scroll`}> <div class={`${prefixCls}-nav-scroll`}>
<div class={navClasses} {...createRefHooks(this.saveRef('nav'))}> <div class={navClasses} ref={this.saveRef('nav')}>
{navWrapper(getSlot(this))} {navWrapper(getSlot(this))}
</div> </div>
</div> </div>

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

@ -1,6 +1,5 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import KeyCode from '../../_util/KeyCode'; import KeyCode from '../../_util/KeyCode';
import createRefHooks from '../../_util/createRefHooks';
import { getSlot } from '../../_util/props-util'; import { getSlot } from '../../_util/props-util';
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' }; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
@ -33,7 +32,7 @@ export default {
return ( return (
<div <div
tabIndex={0} tabIndex={0}
{...createRefHooks(setRef)} ref={setRef}
style={sentinelStyle} style={sentinelStyle}
onKeydown={this.onKeyDown} onKeydown={this.onKeyDown}
role="presentation" role="presentation"

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

@ -1,7 +1,6 @@
import { cloneElement } from '../../_util/vnode'; import { cloneElement } from '../../_util/vnode';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import createRefHooks from '../../_util/createRefHooks';
import { getSlot } from '../../_util/props-util'; import { getSlot } from '../../_util/props-util';
import { getDataAttr } from './utils'; import { getDataAttr } from './utils';
function noop() {} function noop() {}
@ -52,7 +51,7 @@ export default {
tabIndex="0" tabIndex="0"
onKeydown={onKeyDown} onKeydown={onKeyDown}
style={style} style={style}
{...createRefHooks(this.saveRef('root'))} ref={this.saveRef('root')}
{...getDataAttr(restProps)} {...getDataAttr(restProps)}
> >
{newChildren} {newChildren}

5
components/vc-tabs/src/TabBarTabsNode.jsx
View File

@ -3,7 +3,6 @@ import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { getComponent, getPropsData } from '../../_util/props-util'; import { getComponent, getPropsData } from '../../_util/props-util';
import { isVertical } from './utils'; import { isVertical } from './utils';
import createRefHooks from '../../_util/createRefHooks';
function noop() {} function noop() {}
export default { export default {
name: 'TabBarTabsNode', name: 'TabBarTabsNode',
@ -67,7 +66,7 @@ export default {
class={cls} class={cls}
key={key} key={key}
style={style} style={style}
{...createRefHooks(activeKey === key ? saveRef('activeTab') : noop)} ref={activeKey === key ? saveRef('activeTab') : noop}
> >
{tab} {tab}
</div> </div>
@ -79,6 +78,6 @@ export default {
rst.push(node); rst.push(node);
}); });
return <div {...createRefHooks(this.saveRef('navTabsContainer'))}>{rst}</div>; return <div ref={this.saveRef('navTabsContainer')}>{rst}</div>;
}, },
}; };

7
components/vc-trigger/Trigger.jsx
View File

@ -12,7 +12,6 @@ import BaseMixin from '../_util/BaseMixin';
import Portal from '../_util/Portal'; import Portal from '../_util/Portal';
import classNames from 'classnames'; import classNames from 'classnames';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import createRefHooks from '../_util/createRefHooks';
function returnEmptyString() { function returnEmptyString() {
return ''; return '';
@ -409,7 +408,7 @@ export default {
popupStyle, popupStyle,
onAlign: $attrs.onPopupAlign || noop, onAlign: $attrs.onPopupAlign || noop,
...mouseProps, ...mouseProps,
...createRefHooks(this.savePopup), ref: this.savePopup,
}; };
return ( return (
<Popup ref="popup" {...popupProps}> <Popup ref="popup" {...popupProps}>
@ -557,8 +556,8 @@ export default {
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1; return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
}, },
forcePopupAlign() { forcePopupAlign() {
if (this.$data.sPopupVisible && this._component && this._component.refs.alignInstance) { if (this.$data.sPopupVisible && this._component && this._component.$refs.alignInstance) {
this._component.refs.alignInstance.forceAlign(); this._component.$refs.alignInstance.forceAlign();
} }
}, },
fireEvents(type, e) { fireEvents(type, e) {