@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
202 lines (201 loc) • 8.79 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useRef, useState } from "react";
import { ScrollView, View } from "@tarojs/components";
import classNames from "classnames";
import Taro, { nextTick, createSelectorQuery } from "@tarojs/taro";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
import { useForceUpdate } from "../../hooks/use-force-update";
import raf from "../../utils/raf";
import { useUuid } from "../../hooks/use-uuid";
import SideBarItem from "../sidebaritem/index";
import { mergeProps } from "../../utils/merge-props";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
contentDuration: 0,
sidebarDuration: 0
});
var classPrefix = 'nut-sidebar';
export var SideBar = function(props) {
var _mergeProps = mergeProps(defaultProps, props), contentDuration = _mergeProps.contentDuration, sidebarDuration = _mergeProps.sidebarDuration, children = _mergeProps.children, onClick = _mergeProps.onClick, onChange = _mergeProps.onChange, className = _mergeProps.className, rest = _object_without_properties(_mergeProps, [
"contentDuration",
"sidebarDuration",
"children",
"onClick",
"onChange",
"className"
]);
var uuid = useUuid();
var _usePropsValue = _sliced_to_array(usePropsValue({
value: props.value,
defaultValue: props.defaultValue,
finalValue: 0,
onChange: onChange
}), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
var titleItemsRef = useRef([]);
var navRef = useRef(null);
var getTitles = function() {
var titles = [];
React.Children.forEach(children, function(child, idx) {
if (/*#__PURE__*/ React.isValidElement(child)) {
var _$props = child === null || child === void 0 ? void 0 : child.props;
if ((_$props === null || _$props === void 0 ? void 0 : _$props.title) || (_$props === null || _$props === void 0 ? void 0 : _$props.value)) {
titles.push({
title: _$props.title,
value: _$props.value || idx,
disabled: _$props.disabled
});
}
}
});
return titles;
};
var titles = useRef(getTitles());
var forceUpdate = useForceUpdate();
useEffect(function() {
titles.current = getTitles();
var current = '';
titles.current.forEach(function(title) {
if (title.value === value) {
current = value;
}
});
forceUpdate();
}, [
children
]);
var classes = classNames(classPrefix, className);
var classesTitle = classNames("".concat(classPrefix, "-titles"), "".concat(classPrefix, "-titles-scrollable"));
var getRect = function(selector) {
return new Promise(function(resolve) {
createSelectorQuery().select(selector).boundingClientRect().exec(function() {
var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
resolve(rect[0]);
});
});
};
var getAllRect = function(selector) {
return new Promise(function(resolve) {
createSelectorQuery().selectAll(selector).boundingClientRect().exec(function() {
var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
resolve(rect[0]);
});
});
};
var scrollWithAnimation = useRef(false);
var navRectRef = useRef();
var titleRectRef = useRef([]);
var _useState = _sliced_to_array(useState(0), 2), scrollTop = _useState[0], setScrollTop = _useState[1];
var scrollDirection = function(to) {
if (sidebarDuration === 0) {
setScrollTop(to);
return;
}
var from = scrollTop;
var frames = Math.round(sidebarDuration / 16);
var count = 0;
function animate() {
var progress = count / frames;
var current = from + (to - from) * progress;
setScrollTop(current);
if (count < frames) {
count++;
raf(animate);
}
}
animate();
};
var scrollIntoView = function(index) {
raf(function() {
Promise.all([
getRect("#".concat(classPrefix, "-titles-").concat(uuid, " .").concat(classPrefix, "-list")),
getAllRect("#".concat(classPrefix, "-titles-").concat(uuid, " .").concat(classPrefix, "-titles-item"))
]).then(function(param) {
var _param = _sliced_to_array(param, 2), navRect = _param[0], titleRects = _param[1];
navRectRef.current = navRect;
titleRectRef.current = titleRects;
var titleRect = titleRectRef.current[index];
if (!titleRect) return;
nextTick(function() {
scrollWithAnimation.current = true;
});
scrollDirection(titleRect.height * (index - 1));
});
});
};
var getContentStyle = function() {
var index = titles.current.findIndex(function(t) {
return String(t.value) === String(value);
});
index = index < 0 ? 0 : index;
return {
transform: "translateY(-".concat(index * 100, "%)"),
transitionDuration: "".concat(contentDuration, "ms")
};
};
useEffect(function() {
var index = titles.current.findIndex(function(t) {
return String(t.value) === String(value);
});
index = index < 0 ? 0 : index;
scrollIntoView(index);
}, [
value
]);
var tabChange = function(item, index) {
if (item.disabled) return;
onClick === null || onClick === void 0 ? void 0 : onClick(item.value);
setValue(item.value);
};
return /*#__PURE__*/ React.createElement(View, _object_spread({
className: classes
}, rest), /*#__PURE__*/ React.createElement(ScrollView, {
enableFlex: true,
scrollX: false,
scrollY: true,
scrollTop: scrollTop,
showScrollbar: false,
scrollWithAnimation: Taro.getEnv() !== 'WEB' ? false : scrollWithAnimation.current,
id: "".concat(classPrefix, "-titles-").concat(uuid),
className: classesTitle
}, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-list"),
ref: navRef
}, titles.current.map(function(item, index) {
return /*#__PURE__*/ React.createElement(View, {
ref: function(ref) {
return titleItemsRef.current.push(ref);
},
id: "scrollIntoView".concat(index),
onClick: function(e) {
tabChange(item, index);
},
className: classNames("".concat(classPrefix, "-titles-item"), _define_property({}, "".concat(classPrefix, "-titles-item-active"), !item.disabled && String(item.value) === String(value))),
key: item.value
}, /*#__PURE__*/ React.createElement(View, {
className: classNames("".concat(classPrefix, "-ellipsis"), "".concat(classPrefix, "-titles-item-text"), _define_property({}, "".concat(classPrefix, "-titles-item-disabled"), item.disabled))
}, item.title));
}))), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-content-wrap")
}, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-content"),
style: getContentStyle()
}, React.Children.map(children, function(child, idx) {
if (!/*#__PURE__*/ React.isValidElement(child)) {
return null;
}
var childProps = _object_spread_props(_object_spread({}, child.props), {
active: value === child.props.value
});
var _child_props_value;
if (String(value) !== String((_child_props_value = child.props.value) !== null && _child_props_value !== void 0 ? _child_props_value : idx)) {
childProps = _object_spread({}, childProps);
}
return /*#__PURE__*/ React.cloneElement(child, childProps);
}))));
};
SideBar.displayName = 'NutSideBar';
SideBar.Item = SideBarItem;