@gizwits/vantui
Version:
机智云组件库
280 lines (279 loc) • 12.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { View } from '@tarojs/components';
import { useCallback, useState, useRef, useEffect, useMemo, isValidElement, cloneElement } from 'react';
import { pageScrollTo, nextTick } from '@tarojs/taro';
import toArray from 'rc-util/lib/Children/toArray';
import * as utils from '../wxs/utils';
import { getRect, getAllRect, isDef } from '../common/utils';
import { GREEN } from '../common/color';
import { usePageScroll } from './../mixins/page-scroll';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function IndexBar(props) {
var _props$sticky = props.sticky,
sticky = _props$sticky === void 0 ? true : _props$sticky,
_props$zIndex = props.zIndex,
zIndex = _props$zIndex === void 0 ? 1 : _props$zIndex,
_props$highlightColor = props.highlightColor,
highlightColor = _props$highlightColor === void 0 ? GREEN : _props$highlightColor,
_props$stickyOffsetTo = props.stickyOffsetTop,
stickyOffsetTop = _props$stickyOffsetTo === void 0 ? 0 : _props$stickyOffsetTo,
_props$indexList = props.indexList,
indexList = _props$indexList === void 0 ? genIndexList() : _props$indexList,
onSelect = props.onSelect,
children = props.children,
className = props.className,
style = props.style;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
activeAnchorIndex = _useState2[0],
setActiveAnchorIndex = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
changeData = _useState4[0],
setChangeData = _useState4[1];
var timerRef = useRef(null);
var scrollTopRef = useRef(0);
var sidebarRef = useRef(null);
var scrollToAnchorIndexRef = useRef(null);
var rectRef = useRef({});
var realAnchor = useRef([]);
var _children = useMemo(function () {
var anchorIndex = 0;
return parseIndexAnchor(children).map(function (anchor, index) {
var _anchor$node, _anchor$node$type;
// index 可能没有 他会用到children
if (((_anchor$node = anchor.node) === null || _anchor$node === void 0 ? void 0 : (_anchor$node$type = _anchor$node.type) === null || _anchor$node$type === void 0 ? void 0 : _anchor$node$type.displayName) === 'IndexAnchor') {
var _realAnchor$current$a, _anchor$node2, _anchor$node2$props;
realAnchor.current[anchorIndex] = _objectSpread(_objectSpread({}, (_realAnchor$current$a = realAnchor.current[anchorIndex]) !== null && _realAnchor$current$a !== void 0 ? _realAnchor$current$a : {
top: 0,
height: 0
}), {}, {
childIndex: index,
index: (_anchor$node2 = anchor.node) === null || _anchor$node2 === void 0 ? void 0 : (_anchor$node2$props = _anchor$node2.props) === null || _anchor$node2$props === void 0 ? void 0 : _anchor$node2$props.index
});
anchorIndex += 1;
}
var data = changeData[index];
var defaultProps = {
key: index,
id: "index-bar-item_".concat(anchorIndex - 1)
};
var props = data ? _objectSpread(_objectSpread({}, defaultProps), data) : defaultProps;
return /*#__PURE__*/cloneElement(anchor.node, props);
});
}, [changeData, children]);
// 应该在 子组件中调用
var _setAnchorsRect = useCallback(function () {
return getAllRect(null, '.van-index-anchor-wrapper').then(function (rects) {
realAnchor.current = rects.map(function (e, index) {
var _realAnchor$current$i;
return _objectSpread(_objectSpread({}, (_realAnchor$current$i = realAnchor.current[index]) !== null && _realAnchor$current$i !== void 0 ? _realAnchor$current$i : {}), {}, {
top: e.top,
height: e.height
});
});
});
}, []);
var _scrollIntoView = useCallback(function (top) {
pageScrollTo({
duration: 0,
scrollTop: top + stickyOffsetTop
});
}, [stickyOffsetTop]);
var _setListRect = useCallback(function () {
return getRect(null, '.van-index-bar').then(function (rect) {
if (!isDef(rect)) {
return;
}
rectRef.current = {
height: rect.height,
top: rect.top + scrollTopRef.current
};
});
}, []);
var _setSiderbarRect = useCallback(function () {
return getRect(null, '.van-index-bar__sidebar').then(function (res) {
if (!isDef(res)) {
return;
}
sidebarRef.current = {
height: res.height,
top: res.top
};
});
}, []);
var _getActiveAnchorIndex = useCallback(function () {
var child = realAnchor.current;
for (var i = child.length - 1; i >= 0; i--) {
var _child;
var rect = child[i];
if (!rect) continue;
var preAnchorHeight = i > 0 ? (_child = child[i - 1]) === null || _child === void 0 ? void 0 : _child.height : 0;
var reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
if (reachTop + scrollTopRef.current >= rect.top) {
return i;
}
}
return -1;
}, [sticky, stickyOffsetTop]);
var _setRect = useCallback(function () {
return Promise.all([_setAnchorsRect(), _setListRect(), _setSiderbarRect()]);
}, [_setAnchorsRect, _setListRect, _setSiderbarRect]);
var _onScroll = useCallback(function () {
if (!(_children !== null && _children !== void 0 && _children.length)) {
return;
}
var child = realAnchor.current;
var active = _getActiveAnchorIndex();
setActiveAnchorIndex(active);
var updateStyle = [];
if (sticky) {
var isActiveAnchorSticky = false;
if (active !== -1) {
var _child$active;
isActiveAnchorSticky = (((_child$active = child[active]) === null || _child$active === void 0 ? void 0 : _child$active.top) || 0) <= stickyOffsetTop + scrollTopRef.current;
}
realAnchor.current.forEach(function (item, index) {
if (index === active) {
var wrapperStyle = '';
var anchorStyle = "\n color: ".concat(highlightColor, ";\n ");
if (isActiveAnchorSticky) {
wrapperStyle = "\n height: ".concat(item.height, "px;\n ");
anchorStyle = "\n position: fixed;\n top: ".concat(stickyOffsetTop, "px;\n z-index: ").concat(zIndex, ";\n color: ").concat(highlightColor, ";\n ");
}
updateStyle[item.childIndex] = {
active: true,
anchorStyle: anchorStyle,
wrapperStyle: wrapperStyle
};
} else if (index === active - 1) {
var _realAnchor$current;
var currentAnchor = item;
// 自己距离顶部 的位置
var currentOffsetTop = (currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.top) || 0;
var targetOffsetTop = index === _children.length - 1 ? rectRef.current.top : (_realAnchor$current = realAnchor.current[index + 1]) === null || _realAnchor$current === void 0 ? void 0 : _realAnchor$current.top;
var parentOffsetHeight = targetOffsetTop - currentOffsetTop;
var translateY = parentOffsetHeight - ((currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.height) || 0);
var _anchorStyle = "\n position: relative;\n transform: translate3d(0, ".concat(translateY, "px, 0);\n z-index: ").concat(zIndex, ";\n color: ").concat(highlightColor, ";\n ");
updateStyle[item.childIndex] = {
active: true,
anchorStyle: _anchorStyle
};
} else {
updateStyle[item.childIndex] = {
active: false,
anchorStyle: '',
wrapperStyle: ''
};
}
});
setChangeData(updateStyle);
}
}, [_children.length, _getActiveAnchorIndex, highlightColor, sticky, stickyOffsetTop, zIndex]);
var _scrollToAnchor = useCallback(function (index) {
if (typeof index !== 'number' || scrollToAnchorIndexRef.current === index) {
return;
}
scrollToAnchorIndexRef.current = index;
var currentItem = realAnchor.current[index];
if (currentItem) {
_scrollIntoView(currentItem.top);
onSelect === null || onSelect === void 0 ? void 0 : onSelect({
detail: currentItem.index
});
}
}, [_scrollIntoView, onSelect]);
var _onTouchMove = useCallback(function (event) {
event.stopPropagation();
event.preventDefault();
var sidebarLength = realAnchor.current.length || 0;
var touch = event.touches[0];
var itemHeight = sidebarRef.current.height / sidebarLength;
var index = Math.floor((touch.clientY - sidebarRef.current.top) / itemHeight);
if (index < 0) {
index = 0;
} else if (index > sidebarLength - 1) {
index = sidebarLength - 1;
}
_scrollToAnchor(index);
}, [_scrollToAnchor]);
var _onTouchStop = useCallback(function () {
scrollToAnchorIndexRef.current = null;
}, []);
var _updateData = useCallback(function () {
nextTick(function () {
if (timerRef.current !== null) {
clearTimeout(timerRef.current);
}
timerRef.current = setTimeout(function () {
_setRect().then(function () {
_onScroll();
});
}, 100);
});
}, [_onScroll, _setRect]);
var _onClick = useCallback(function (event) {
var targetIndex = Number(event.target.dataset.index);
_scrollToAnchor(targetIndex);
}, [_scrollToAnchor]);
var scroller = useCallback(function (event) {
scrollTopRef.current = (event === null || event === void 0 ? void 0 : event.scrollTop) || 0;
nextTick(function () {
_onScroll();
});
}, [_onScroll]);
usePageScroll(scroller);
useEffect(function () {
_updateData();
}, [_updateData]);
return /*#__PURE__*/_jsx(View, {
className: "van-index-bar-wrapper",
children: /*#__PURE__*/_jsxs(View, {
className: "van-index-bar ".concat(className || ''),
style: utils.style([style]),
children: [_children, /*#__PURE__*/_jsx(View, {
className: "van-index-bar__sidebar",
onClick: _onClick,
onTouchMove: _onTouchMove,
onTouchEnd: _onTouchStop,
onTouchCancel: _onTouchStop,
children: indexList.map(function (item, index) {
return /*#__PURE__*/_jsx(View, {
className: "van-index-bar__index",
style: 'z-index: ' + (zIndex + 1) + '; color: ' + (activeAnchorIndex === index ? highlightColor : ''),
"data-index": index,
children: item
}, index);
})
})]
})
});
}
export default IndexBar;
var genIndexList = function genIndexList() {
var indexList = [];
var charCodeOfA = 'A'.charCodeAt(0);
for (var i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i));
}
return indexList;
};
function parseIndexAnchor(children) {
return toArray(children).map(function (node, index) {
if ( /*#__PURE__*/isValidElement(node)) {
var key = node.key !== undefined ? String(node.key) : index;
return _objectSpread(_objectSpread({
key: key
}, node.props), {}, {
node: node
});
}
return null;
}).filter(function (indexAnchor) {
return !!indexAnchor;
});
}