chore: replace all cn comments of fe to en version by volc api (#320)
This commit is contained in:
@@ -29,18 +29,18 @@ const SUPPORT_NEGATIVE_SCROLL_TOP = supportNegativeScrollTop();
|
||||
import styles from './index.module.less';
|
||||
|
||||
export interface UseScrollViewControllerAndStateParams {
|
||||
/** 滚动方向 */
|
||||
/** scroll direction */
|
||||
reverse: boolean;
|
||||
/** 滚动状态,自动吸顶/吸底时依赖,当Top时自动吸顶,当Bottom时自动吸底 */
|
||||
/** Scroll state, automatic ceiling/bottom dependence, automatic ceiling when Top, automatic bottom when Bottom */
|
||||
scrollStatusRef?: RefObject<ScrollStatus>;
|
||||
}
|
||||
|
||||
export interface UseScrollViewControllerAndStateReturnValue {
|
||||
/** 注入到滚动容器的引用 */
|
||||
/** Reference injected into the scrolling container */
|
||||
ref: RefObject<HTMLDivElement>;
|
||||
/** 滚动容器外层 dom 的引用 */
|
||||
/** Reference to the outer dom of a rolling container */
|
||||
wrapperRef: RefObject<HTMLDivElement>;
|
||||
/** 控制器 */
|
||||
/** controller */
|
||||
controller: ScrollViewController;
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@ export const useScrollViewControllerAndState = ({
|
||||
|
||||
const { offsetHeight, scrollHeight } = container;
|
||||
|
||||
/** 当当前不是滚动状态时,不调整滚动进度 */
|
||||
/** When the current state is not scrolling, the scrolling progress is not adjusted */
|
||||
if (scrollHeight <= offsetHeight) {
|
||||
return;
|
||||
}
|
||||
@@ -261,18 +261,18 @@ export const useScrollViewControllerAndState = ({
|
||||
};
|
||||
|
||||
export interface UseAutoAnchorWhenPrependOnSafariParams {
|
||||
/** 滚动方法 */
|
||||
/** rolling method */
|
||||
scrollTo: ScrollViewController['scrollTo'];
|
||||
/** 获取当前滚动距底部距离 */
|
||||
/** Get the current scroll distance to the bottom */
|
||||
getScrollBottom: ScrollViewController['getScrollTop'];
|
||||
/** 滚动方向 */
|
||||
/** scroll direction */
|
||||
reverse: boolean;
|
||||
/** 启用锚定时离边界的最小值,默认为10 */
|
||||
/** The minimum value from the boundary when anchoring is enabled, defaults to 10 */
|
||||
enableThreshold?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理y-reverse在Safari下,向下插入元素时自动锚定的问题(safari不支持overflow-anchor属性)
|
||||
* Handle the issue of automatic anchoring when y-reverse inserts elements down in Safari (Safari does not support overflow-anchor attribute)
|
||||
*/
|
||||
export const useAutoAnchorWhenAppendOnSafari = ({
|
||||
scrollTo,
|
||||
@@ -300,7 +300,7 @@ export const useAutoAnchorWhenAppendOnSafari = ({
|
||||
const currentContainerHeight = container.getBoundingClientRect().height;
|
||||
|
||||
if (prevLastChild && isNumber(prevContainerHeight)) {
|
||||
/** 末尾元素变了,同时高度变了,那就断定为末尾元素插入,但是仅当超过阈值时才锚定 */
|
||||
/** The end element has changed, and the height has changed at the same time, so it is concluded that the end element is inserted, but it is only anchored when the threshold is exceeded */
|
||||
if (
|
||||
prevContainerHeight !== currentContainerHeight &&
|
||||
currentLastChild !== prevLastChild &&
|
||||
|
||||
@@ -68,7 +68,7 @@ export const ScrollView = forwardRef<ScrollViewController, ScrollViewProps>(
|
||||
},
|
||||
outerRef,
|
||||
) {
|
||||
/** 在最开始的时候,默认的滚动状态 */
|
||||
/** At the very beginning, the default scrolling state */
|
||||
const defaultScrollStatus = reverse
|
||||
? ScrollStatus.Bottom
|
||||
: ScrollStatus.Top;
|
||||
@@ -113,7 +113,7 @@ export const ScrollView = forwardRef<ScrollViewController, ScrollViewProps>(
|
||||
|
||||
const anchorThreshold = 0;
|
||||
|
||||
/** 滚动至事件上边界 */
|
||||
/** Scroll to the upper boundary of the event */
|
||||
if (getScrollTop() < topThreshold) {
|
||||
if (!isReachTopRef.current) {
|
||||
isReachTopRef.current = true;
|
||||
@@ -126,7 +126,7 @@ export const ScrollView = forwardRef<ScrollViewController, ScrollViewProps>(
|
||||
}
|
||||
}
|
||||
|
||||
/** 滚动至事件下边界 */
|
||||
/** Scroll to the lower boundary of the event */
|
||||
if (getScrollBottom() < bottomThreshold) {
|
||||
if (!isReachBottomRef.current) {
|
||||
isReachBottomRef.current = true;
|
||||
@@ -139,7 +139,7 @@ export const ScrollView = forwardRef<ScrollViewController, ScrollViewProps>(
|
||||
}
|
||||
}
|
||||
|
||||
/** 滚动至自动贴边(anchor)边界,先释放再延迟更新贴边态,防止还未滚出贴边阈值时自动贴边和滚动冲突 */
|
||||
/** Scroll to the automatic welt (anchor) boundary, release first and then delay updating the welt state to prevent automatic welt and scroll conflicts when the welt threshold has not been rolled out */
|
||||
scrollStatusRef.current = ScrollStatus.Inner;
|
||||
if (
|
||||
getScrollTop() <= anchorThreshold &&
|
||||
|
||||
@@ -17,31 +17,31 @@
|
||||
import { type RefObject } from 'react';
|
||||
|
||||
export interface ScrollViewController {
|
||||
/** 滚动到 */
|
||||
/** Scroll to */
|
||||
scrollTo: (update: (prev: number) => number) => void;
|
||||
/** 滚动到可滚动高度的指定百分比的位置,以容器顶部为参考基线;当滚动完毕后回调callback */
|
||||
/** Scroll to a specified percentage of the scrollable height, using the top of the container as a reference baseline; callback when scrolling is complete */
|
||||
scrollToPercentage: (ratio: number) => Promise<void> | void;
|
||||
/** 获取当前滚动百分比 */
|
||||
/** Get the current scroll percentage */
|
||||
getScrollPercentage: () => number;
|
||||
/** 获取当前滚动状态距离顶部的距离,适配y方向和y-reverse方向的情况 */
|
||||
/** Get the distance from the top of the current scrolling state, adapt the y-direction and y-reverse direction */
|
||||
getScrollTop: () => number;
|
||||
/** 获取原始的 scroll top 值,不做换算 */
|
||||
/** Get the original scroll top value without conversion */
|
||||
getOriginScrollInfo: () => {
|
||||
scrollHeight: number;
|
||||
scrollTop: number;
|
||||
rect: null | DOMRect;
|
||||
};
|
||||
/** 获取当前滚动状态距离顶部的距离,适配y方向和y-reverse方向的情况 */
|
||||
/** Get the distance from the top of the current scrolling state, adapt the y-direction and y-reverse direction */
|
||||
getScrollBottom: () => number;
|
||||
/** 更新吸顶/吸底状态,当数据有更新时主动调用此API */
|
||||
/** Update the ceiling/bottom suction status, and actively call this API when the data is updated */
|
||||
refreshAnchor: () => void;
|
||||
/** 禁止容器滚动 */
|
||||
/** Disable container scrolling */
|
||||
disableScroll: () => void;
|
||||
/** 使得容器可滚动 */
|
||||
/** Makes the container scrollable */
|
||||
enableScroll: () => void;
|
||||
/** 检查内容充满容器(用于初始状态高度较小的情况,防止无法触发 scroll 事件) */
|
||||
/** Check that the content fills the container (used when the initial state height is small to prevent the scroll event from being triggered) */
|
||||
checkContentIsFull: () => boolean;
|
||||
/** 获取 scroll 外层容器的引用 */
|
||||
/** Get a reference to the scroll outer container */
|
||||
getScrollViewWrapper: () => RefObject<HTMLDivElement>;
|
||||
}
|
||||
|
||||
@@ -63,35 +63,35 @@ export interface ScrollViewProps
|
||||
innerBefore?:
|
||||
| ((controller: ScrollViewController) => JSX.Element)
|
||||
| JSX.Element;
|
||||
/** 是否反转,从下往上滚动 */
|
||||
/** Whether to reverse, scroll from bottom to top */
|
||||
reverse?: boolean;
|
||||
/** 剩余滚动至顶部距离小于多少时触发,默认为offsetHeight */
|
||||
/** Triggered when the remaining scroll to the top is less than the distance, the default is offsetHeight */
|
||||
reachTopThreshold?: number;
|
||||
/* 滚动到达顶部阈值 */
|
||||
/* Scroll to the top threshold */
|
||||
onReachTop?: () => unknown;
|
||||
/* 滚动离开顶部阈值 */
|
||||
/* Scroll away from the top threshold */
|
||||
onLeaveTop?: () => unknown;
|
||||
|
||||
/** 剩余滚动至底部距离小于多少时触发,默认为offsetHeight */
|
||||
/** Triggered when the remaining scroll to the bottom distance is less than, the default is offsetHeight */
|
||||
reachBottomThreshold?: number;
|
||||
/** 滚动到达底部阈值 */
|
||||
/** Scroll to the bottom threshold */
|
||||
onReachBottom?: () => unknown;
|
||||
/** 滚动离开底部阈值 */
|
||||
/** Scroll away from the bottom threshold */
|
||||
onLeaveBottom?: () => unknown;
|
||||
/** 不管内容是否超出 container 都展示 scrollBar */
|
||||
/** Show scrollBar regardless of whether the content exceeds the container. */
|
||||
showScrollbar?: boolean;
|
||||
/** 内容超出 container 时才展示 scrollBar,若未超出,不展示 scrollBar */
|
||||
/** The scrollBar is only displayed when the content exceeds the container. If it does not exceed, the scrollBar is not displayed. */
|
||||
autoShowScrollbar?: boolean;
|
||||
/** 完全隐藏 scrollbar */
|
||||
/** Completely hide scrollbar */
|
||||
scrollbarWidthNone?: boolean;
|
||||
}
|
||||
|
||||
/** 滚动状态 */
|
||||
/** scrolling state */
|
||||
export enum ScrollStatus {
|
||||
/** 吸顶 */
|
||||
/** Ceiling */
|
||||
Top = 'top',
|
||||
/** 吸底 */
|
||||
/** bottom suction */
|
||||
Bottom = 'bottom',
|
||||
/** 中间可双向滚动 */
|
||||
/** Two-way scrolling in the middle */
|
||||
Inner = 'inner',
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
/**
|
||||
* 出自:https://stackoverflow.com/questions/4900436/how-to-detect-the-installed-chrome-version
|
||||
* From: https://stackoverflow.com/questions/4900436/how-to-detect-the-installed-chrome-version
|
||||
*/
|
||||
export const getChromeVersion = () => {
|
||||
const pieces = navigator.userAgent.match(
|
||||
@@ -38,13 +38,13 @@ export const getChromeVersion = () => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 是否支持在column-reverse模式下为负数的scrollTop,chromium最低支持版本83.0.4086.1(上一个版本为82.0.4082.0)
|
||||
* Whether to support scrollTop with negative numbers in column-reverse mode, chromium minimum supported version 83.0.4086 (previous version was 82.0.4082)
|
||||
*/
|
||||
export const supportNegativeScrollTop = () => {
|
||||
const chromeVersion = getChromeVersion();
|
||||
|
||||
if (!chromeVersion) {
|
||||
/** 假设非chromium系浏览器均支持 */
|
||||
/** Suppose all non-chromium browsers support it */
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,8 +15,8 @@
|
||||
*/
|
||||
|
||||
/**
|
||||
* 是否是在苹果平台的Webkit内核浏览器下,
|
||||
* 注:这个判断条件不等于是在苹果设备下,因为部分苹果设备(例如Mac)可以运行非原生Webkit引擎的浏览器,例如Chromium(Blink)
|
||||
* Is it under the Webkit kernel browser of the Apple platform?
|
||||
* Note: This judgment condition is not equal to under Apple devices, because some Apple devices (such as Mac) can run non-native Webkit engine browsers, such as Chromium (Blink)
|
||||
*/
|
||||
export const isAppleWebkit = () =>
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
||||
Reference in New Issue
Block a user