chore: rename rootRef to root

This commit is contained in:
chenjiahan 2020-09-15 19:32:45 +08:00
parent b0ca6a997b
commit 1e7e7086d6
11 changed files with 46 additions and 49 deletions

View File

@ -13,15 +13,15 @@ export default createComponent({
},
setup(props) {
const rootRef = ref();
const root = ref();
usePublicApi({
getPicker: () => rootRef.value && rootRef.value.getPicker(),
getPicker: () => root.value && root.value.getPicker(),
});
return () => {
const Component = props.type === 'time' ? TimePicker : DatePicker;
return <Component ref={rootRef} class={bem()} {...props} />;
return <Component ref={root} class={bem()} {...props} />;
};
},
});

View File

@ -36,10 +36,10 @@ export default createComponent({
setup(props, { slots }) {
const offset = ref(0);
const barRef = ref();
const rootRef = ref();
const root = ref();
const children = reactive([]);
const scrollParent = useScrollParent(rootRef);
const scrollParent = useScrollParent(root);
const opened = computed(() =>
children.some((item) => item.state.showWrapper)
@ -120,12 +120,12 @@ export default createComponent({
provide(DROPDOWN_KEY, { props, offset, children });
useClickAway(rootRef, onClickAway);
useClickAway(root, onClickAway);
useEventListener('scroll', onScroll, { target: scrollParent });
return () => (
<div ref={rootRef} class={bem()}>
<div ref={root} class={bem()}>
<div
ref={barRef}
style={barStyle.value}

View File

@ -24,14 +24,14 @@ export default createComponent({
active: false,
});
const rootRef = ref();
const height = useHeight(rootRef);
const root = ref();
const height = useHeight(root);
const { parent } = useParent(INDEX_BAR_KEY, {
props,
state,
height,
rootRef,
root,
});
const isSticky = () => state.active && parent.props.sticky;
@ -54,10 +54,7 @@ export default createComponent({
const sticky = isSticky();
return (
<div
ref={rootRef}
style={{ height: sticky ? `${height.value}px` : null }}
>
<div ref={root} style={{ height: sticky ? `${height.value}px` : null }}>
<div
style={anchorStyle.value}
class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}

View File

@ -52,12 +52,12 @@ export default createComponent({
emits: ['select'],
setup(props, { emit, slots }) {
const rootRef = ref();
const root = ref();
const activeAnchor = ref();
const children = reactive([]);
const touch = useTouch();
const scrollParent = useScrollParent(rootRef);
const scrollParent = useScrollParent(root);
provide(INDEX_BAR_KEY, { props, children });
@ -113,7 +113,7 @@ export default createComponent({
};
const onScroll = () => {
if (isHidden(rootRef.value)) {
if (isHidden(root.value)) {
return;
}
@ -123,7 +123,7 @@ export default createComponent({
const rects = children.map((item) => ({
height: item.height,
top: getAnchorTop(item.rootRef, scrollParentRect),
top: getAnchorTop(item.root, scrollParentRect),
}));
const active = getActiveAnchor(scrollTop, rects);
@ -132,9 +132,9 @@ export default createComponent({
if (sticky) {
children.forEach((item, index) => {
const { state, height, rootRef } = item;
const { state, height, root } = item;
if (index === active || index === active - 1) {
const rect = rootRef.getBoundingClientRect();
const rect = root.getBoundingClientRect();
state.left = rect.left;
state.width = rect.width;
} else {
@ -192,7 +192,7 @@ export default createComponent({
);
if (match[0]) {
match[0].rootRef.scrollIntoView();
match[0].root.scrollIntoView();
if (props.sticky && props.stickyOffsetTop) {
setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@ -228,7 +228,7 @@ export default createComponent({
};
return () => (
<div ref={rootRef} class={bem()}>
<div ref={root} class={bem()}>
<div
class={bem('sidebar')}
style={sidebarStyle.value}

View File

@ -41,9 +41,9 @@ export default createComponent({
setup(props, { emit, slots }) {
// use sync innerLoading state to avoid repeated loading in some edge cases
const loading = ref(false);
const rootRef = ref();
const root = ref();
const placeholderRef = ref();
const scrollParent = useScrollParent(rootRef);
const scrollParent = useScrollParent(root);
const check = () => {
nextTick(() => {
@ -67,7 +67,7 @@ export default createComponent({
scrollParentRect.bottom - scrollParentRect.top;
/* istanbul ignore next */
if (!scrollParentHeight || isHidden(rootRef.value)) {
if (!scrollParentHeight || isHidden(root.value)) {
return false;
}
@ -153,7 +153,7 @@ export default createComponent({
);
return (
<div ref={rootRef} role="feed" class={bem()} aria-busy={loading.value}>
<div ref={root} role="feed" class={bem()} aria-busy={loading.value}>
{props.direction === 'down' ? Content : Placeholder}
{renderLoading()}
{renderFinishedText()}

View File

@ -60,7 +60,7 @@ export default createComponent({
],
setup(props, { emit, slots }) {
const rootRef = ref();
const root = ref();
const genBasicKeys = () => {
const keys = [];
@ -224,14 +224,14 @@ export default createComponent({
}
);
useClickAway(rootRef, onClose, { eventName: 'touchstart' });
useClickAway(root, onClose, { eventName: 'touchstart' });
return () => {
const Title = renderTitle();
const Content = (
<Transition name={props.transition ? 'van-slide-up' : ''}>
<div
ref={rootRef}
ref={root}
vShow={props.show}
style={{ zIndex: props.zIndex }}
class={bem({

View File

@ -24,7 +24,7 @@ export default createComponent({
},
setup(props) {
const rootRef = ref();
const root = ref();
const pivotRef = ref();
const state = reactive({
@ -38,7 +38,7 @@ export default createComponent({
const setWidth = () => {
nextTick(() => {
state.rootWidth = rootRef.value.offsetWidth;
state.rootWidth = root.value.offsetWidth;
state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
});
};
@ -81,7 +81,7 @@ export default createComponent({
};
return (
<div ref={rootRef} class={bem()} style={rootStyle}>
<div ref={root} class={bem()} style={rootStyle}>
<span class={bem('portion')} style={portionStyle}>
{renderPivot()}
</span>

View File

@ -47,8 +47,8 @@ export default createComponent({
setup(props, { emit, slots }) {
let reachTop;
const rootRef = ref();
const scrollParent = useScrollParent(rootRef);
const root = ref();
const scrollParent = useScrollParent(root);
const state = reactive({
status: 'normal',
@ -201,7 +201,7 @@ export default createComponent({
};
return (
<div ref={rootRef} class={bem()}>
<div ref={root} class={bem()}>
<div
class={bem('track')}
style={trackStyle}

View File

@ -46,7 +46,7 @@ export default createComponent({
let currentValue;
let index;
const rootRef = ref();
const root = ref();
const dragStatus = ref();
const touch = useTouch();
@ -132,7 +132,7 @@ export default createComponent({
}
const { min, vertical, modelValue, range } = props;
const rect = useRect(rootRef);
const rect = useRect(root);
const delta = vertical
? event.clientY - rect.top
: event.clientX - rect.left;
@ -182,7 +182,7 @@ export default createComponent({
touch.move(event);
dragStatus.value = 'draging';
const rect = useRect(rootRef);
const rect = useRect(root);
const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
const total = props.vertical ? rect.height : rect.width;
const diff = (delta / total) * scope.value;
@ -253,7 +253,7 @@ export default createComponent({
return () => (
<div
ref={rootRef}
ref={root}
style={wrapperStyle.value}
class={bem({
vertical: props.vertical,

View File

@ -25,8 +25,8 @@ export default createComponent({
emits: ['scroll'],
setup(props, { emit, slots }) {
const rootRef = ref();
const scrollParent = useScrollParent(rootRef);
const root = ref();
const scrollParent = useScrollParent(root);
const state = reactive({
fixed: false,
@ -61,15 +61,15 @@ export default createComponent({
};
const onScroll = () => {
if (isHidden(rootRef.value)) {
if (isHidden(root.value)) {
return;
}
state.height = rootRef.value.offsetHeight;
state.height = root.value.offsetHeight;
const { container } = props;
const scrollTop = getScrollTop(window);
const topToPageTop = getElementTop(rootRef.value);
const topToPageTop = getElementTop(root.value);
// The sticky component should be kept inside the container element
if (container) {
@ -102,7 +102,7 @@ export default createComponent({
useEventListener('scroll', onScroll, { target: scrollParent });
useVisibilityChange(rootRef, onScroll);
useVisibilityChange(root, onScroll);
return () => {
const { fixed, height } = state;
@ -111,7 +111,7 @@ export default createComponent({
};
return (
<div ref={rootRef} style={rootStyle}>
<div ref={root} style={rootStyle}>
<div class={bem({ fixed })} style={style.value}>
{slots.default?.()}
</div>

View File

@ -34,7 +34,7 @@ export default createComponent({
let lockClick;
let startOffset;
const rootRef = ref();
const root = ref();
const leftRef = ref();
const rightRef = ref();
@ -183,7 +183,7 @@ export default createComponent({
close,
});
useClickAway(rootRef, onClick, { eventName: 'touchstart' });
useClickAway(root, onClick, { eventName: 'touchstart' });
return () => {
const wrapperStyle = {
@ -193,7 +193,7 @@ export default createComponent({
return (
<div
ref={rootRef}
ref={root}
class={bem()}
onClick={getClickHandler('cell')}
onTouchstart={onTouchStart}