@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/image-preview/style/css/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../carousel/style/css';
+import '../../../image/style/css';
+import './index.css';

package/esnext/image-preview/style/css/index.js

@@ -0,0 +1,5 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../carousel/style/css';
+import '../../../image/style/css';
+import './index.css';

package/esnext/image-preview/style/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../carousel/style';
+import '../../image/style';
+import './index.less';

package/esnext/image-preview/style/index.js

@@ -0,0 +1,5 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../carousel/style';
+import '../../image/style';
+import './index.less';

package/esnext/image-preview/style/index.less

@@ -0,0 +1,140 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image-preview,
+.image-preview-lock-modal {
+    .full-screen();
+    z-index: @full-screen-z-index;
+}
+
+.image-preview-lock-modal {
+    transform: translateZ(2PX);
+}
+
+.@{prefix}-image-preview {
+    .use-var(background, image-preview-mask-background);
+
+    &.noselect {
+        -webkit-touch-callout: none;
+        .noselect();
+    }
+
+    .preview-image-wrap-container, .preview-image-wrap {
+        width: 100%;
+        height: 100%;
+    }
+    .@{prefix}-carousel-wrap,
+    .@{prefix}-carousel,
+    .@{prefix}-carousel-inner {
+        height: 100%;
+    }
+
+    .carousel-item {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+
+        .image-container {
+            overflow: visible;
+        }
+
+        &.preview-hidden {
+            pointer-events: none;
+
+            .image-container {
+                visibility: hidden;
+            }
+        }
+
+        .image-bottom-overlap {
+            overflow: visible;
+        }
+    }
+}
+
+.image-preview-indicator {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: @full-screen-z-index + 3;
+    position: fixed;
+    box-sizing: border-box;
+    .use-var(font-size, image-preview-indicator-font-size);
+    .use-var(color, mask-content-color);
+    .use-var(padding, image-preview-indicator-padding);
+    .use-var(background, image-preview-indicator-background);
+}
+
+.image-preview-fake-rect {
+    .full-screen();
+    opacity: 0;
+}
+
+.@{prefix}-image-preview .image-container img.closing-animation,
+.image-preview-fake-trans-image {
+    position: fixed;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    .use-var(transition, image-preview-thumb-transition);
+    will-change: transform;
+    pointer-events: none;
+    height: auto !important;
+}
+
+.image-preview-loading-area {
+    .full-screen();
+    z-index: @full-screen-z-index + 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .loading-icon {
+        .set-loading-color-var(mask-content-color);
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .image-preview-indicator {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-mask-content-color);
+    }
+  }
+  .image-preview-loading-area {
+    .loading-icon {
+      @{arco-dark-mode-selector} & {
+        .set-loading-color-var(dark-mask-content-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/index-bar/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IndexBarContext as IndexBarContextType } from './type';
+export declare const IndexBarContext: import("react").Context<IndexBarContextType>;

package/esnext/index-bar/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export const IndexBarContext = createContext({
+    sticky: true,
+    getScrollContainer: () => null,
+    updateRef: () => { },
+});

package/esnext/index-bar/group.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IndexBarBaseData, IndexBarGroupProps, IndexBarGroupRef } from './type';
+export declare const IndexBarGroup: React.ForwardRefExoticComponent<IndexBarGroupProps<IndexBarBaseData> & React.RefAttributes<IndexBarGroupRef>>;

package/esnext/index-bar/group.js

@@ -0,0 +1,33 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { GlobalContext } from '../context-provider';
+import Sticky from '../sticky';
+import { IndexBarContext } from './context';
+export const IndexBarGroup = forwardRef((props, ref) => {
+    const { index: groupIndex, list, className, style, children, listKey, onGroupItemClick, renderGroupItem, renderStickyItem, } = props;
+    const { prefixCls } = useContext(GlobalContext);
+    // 有可能是IndexBar.Group的写法，因此sticky从context中获得
+    const { sticky, getScrollContainer, activeIndex, updateRef } = useContext(IndexBarContext);
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    // 用户自定义列表元素vnode的key
+    const formatGetListKey = (data, index) => listKey?.(data, index) ?? index;
+    const renderChildren = () => children ??
+        list?.map((data, index) => (React.createElement("div", { className: `${prefixCls}-index-bar-group-item`, key: formatGetListKey(data, index), onClick: () => onGroupItemClick?.(groupIndex, data, index) }, renderGroupItem ? renderGroupItem(groupIndex, data, index) : data.content))) ??
+        null;
+    const renderIndexTitle = () => {
+        if (renderStickyItem) {
+            return renderStickyItem(groupIndex);
+        }
+        const titleDom = (React.createElement("div", { className: cls(`${prefixCls}-index-bar-group-title`, {
+                [`${prefixCls}-index-bar-group-active`]: activeIndex === groupIndex,
+            }) }, groupIndex));
+        const groupDom = domRef.current;
+        return sticky ? (React.createElement(Sticky, { getContainer: () => groupDom, stickyStyle: "absolute", getScrollContainer: getScrollContainer, ref: stickyRef => stickyRef && updateRef(groupIndex, stickyRef) }, titleDom)) : (titleDom);
+    };
+    return (React.createElement("div", { className: cls(`${prefixCls}-index-bar-group`, className), style: style, "data-index": groupIndex, ref: domRef },
+        renderIndexTitle(),
+        renderChildren()));
+});

package/esnext/index-bar/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IndexBarBaseData, IndexBarProps, IndexBarRef } from './type';
+export type { IndexBarProps, IndexBarRef, IndexBarGroupProps, IndexBarGroupRef, IndexBarChangeTrigger, IndexBarIndexType, IndexBarTipType, } from './type';
+declare const _default: React.ForwardRefExoticComponent<IndexBarProps<IndexBarBaseData> & React.RefAttributes<IndexBarRef>> & {
+    Group: React.ForwardRefExoticComponent<import("./type").IndexBarGroupProps<IndexBarBaseData> & React.RefAttributes<import("./type").IndexBarGroupRef>>;
+};
+/**
+ * 索引栏组件
+ * @en IndexBar component
+ * @type 导航
+ * @type_en Navigation
+ * @name 索引栏
+ * @name_en SearchBar
+ */
+export default _default;

package/esnext/index-bar/index.js

@@ -0,0 +1,151 @@
+import { cls, componentWrapper, scrollWithAnimation } from '@arco-design/mobile-utils';
+import lodashThrottle from 'lodash.throttle';
+import React, { useRef, forwardRef, useImperativeHandle, useMemo, useState, useEffect, } from 'react';
+import { ContextLayout } from '../context-provider';
+import { IndexBarContext } from './context';
+import { IndexBarGroup as Group } from './group';
+import { IndexBarSideBar } from './side-bar';
+import { filterValidIndexBarChild, getGroupDomFromIndex, getFormatIndex, isValidIndex, } from './utils';
+const IndexBar = forwardRef((props, ref) => {
+    const { className = '', style, children, sticky = true, groups = [], tipType = 'toast', defaultIndex, scrollBezier, scrollDuration = 0, disableSidebar = false, onChange, onGroupItemClick, renderSideBar, renderSideBarItem, renderTip, renderStickyItem, renderGroupItem, } = props;
+    // 最外层dom元素的ref
+    const domRef = useRef(null);
+    // 所有group的容器dom，domRef的内容就是contanerRef和sidebar的内容
+    const containerRef = useRef(null);
+    // 过滤掉jsx写法中，奇怪的child
+    const formatChildren = filterValidIndexBarChild(children);
+    // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
+    const indexes = useMemo(() => {
+        if (groups.length) {
+            return groups.map(group => group.index);
+        }
+        return formatChildren.map(child => child.props.index);
+    }, [children, groups]);
+    const groupRefs = useRef({});
+    // 当前激活的Index
+    const [activeIndex, setActiveIndex] = useState(() => defaultIndex ?? indexes?.[0]);
+    // 给IndexBarGroup用的上下文，主要是为了兼容jsx的写法
+    const contextValue = useMemo(() => ({
+        sticky,
+        getScrollContainer: () => containerRef.current,
+        activeIndex,
+        updateRef: (groupIndex, stickyRef) => {
+            groupRefs.current[groupIndex] = stickyRef;
+        },
+    }), [sticky, activeIndex]);
+    // 用户是否正在触碰sidebar, 如果为true的话，禁用handleScroll的处理
+    const isScrollHandlerDisabledRef = useRef(false);
+    const handleChangeActiveIndex = (index, type) => {
+        setActiveIndex(oldActiveIndex => {
+            const newActiveIndex = getFormatIndex(index, oldActiveIndex);
+            // 和上一次激活的acitveIndex不同，再触发onChange事件
+            if (newActiveIndex !== oldActiveIndex) {
+                onChange?.(newActiveIndex, type);
+            }
+            return newActiveIndex;
+        });
+    };
+    // 要滚动到哪个指定的index
+    const handleScrollIntoIndex = (params) => {
+        const { index, type, rightNow = false } = params;
+        // 不传index默认走第一个index
+        const formatIndex = index ?? indexes?.[0];
+        const containerDom = containerRef.current;
+        if (!isValidIndex(index) || !containerDom) {
+            return;
+        }
+        // 寻找Index对应的groupDom
+        const groupDom = getGroupDomFromIndex(containerDom, formatIndex);
+        if (groupDom) {
+            handleChangeActiveIndex(formatIndex, type);
+            const duration = rightNow ? 0 : scrollDuration;
+            const targetScrollTop = groupDom.offsetTop;
+            // 将屏幕滚动到groupDom
+            // 手动触发需要禁用handleScroll事件
+            if (type === 'manual') {
+                isScrollHandlerDisabledRef.current = true;
+                setTimeout(() => {
+                    isScrollHandlerDisabledRef.current = false;
+                }, duration);
+            }
+            if (duration > 0) {
+                scrollWithAnimation(containerDom.scrollTop, targetScrollTop, top => (containerDom.scrollTop = top), duration, scrollBezier);
+            }
+            else {
+                containerDom.scrollTop = targetScrollTop;
+            }
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        scrollToIndex(index, rightNow) {
+            if (isValidIndex(index)) {
+                handleScrollIntoIndex({
+                    index,
+                    rightNow,
+                    type: 'manual',
+                });
+            }
+        },
+        recalculatePosition(targetIndex) {
+            const formatIndex = targetIndex ?? activeIndex;
+            if (formatIndex) {
+                const targetStickyRef = groupRefs.current[formatIndex];
+                if (targetStickyRef && targetStickyRef.recalculatePosition) {
+                    targetStickyRef.recalculatePosition();
+                }
+            }
+        },
+    }));
+    const renderChildren = () => {
+        if (formatChildren.length) {
+            return formatChildren;
+        }
+        return groups?.map(group => (React.createElement(Group, { index: group.index, key: group.index, list: group.list, onGroupItemClick: onGroupItemClick, renderGroupItem: renderGroupItem, renderStickyItem: renderStickyItem })));
+    };
+    useEffect(() => {
+        const handleScroll = lodashThrottle(() => {
+            // 用户正在触碰sidebar和手动触发scroll时禁用滚动事件的处理
+            if (!containerRef.current || isScrollHandlerDisabledRef.current) {
+                return;
+            }
+            // 根据滚动的距离，获取处于屏幕最顶部的group是哪个
+            const scrollTop = containerRef.current.scrollTop;
+            for (let i = 0; i < containerRef.current.children.length; i++) {
+                const child = containerRef.current.children[i];
+                if (!child || !child.dataset || typeof child.dataset.index === 'undefined') {
+                    continue;
+                }
+                if (child.offsetTop + child.clientHeight >= scrollTop) {
+                    handleChangeActiveIndex(child.dataset.index, 'swipe');
+                    break;
+                }
+            }
+        }, 100);
+        // 页面挂载时，如果是传入了defaultIndex，则滚动到对应位置
+        if (activeIndex) {
+            handleScrollIntoIndex({
+                index: activeIndex,
+                rightNow: true,
+                type: 'manual',
+            });
+        }
+        containerRef.current?.addEventListener('scroll', handleScroll);
+        return () => {
+            containerRef.current?.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(IndexBarContext.Provider, { value: contextValue },
+        React.createElement("div", { className: cls(`${prefixCls}-index-bar`, className), style: style, ref: domRef },
+            React.createElement("div", { className: `${prefixCls}-index-bar-container`, ref: containerRef }, renderChildren()),
+            !disableSidebar && (React.createElement(IndexBarSideBar, { tipType: tipType, activeIndex: activeIndex, prefixCls: prefixCls, indexes: indexes, onTouching: isTouching => (isScrollHandlerDisabledRef.current = isTouching), onClick: newIndex => handleScrollIntoIndex({ index: newIndex, type: 'sidebar' }), renderSideBar: renderSideBar, renderSideBarItem: renderSideBarItem, renderTip: renderTip })))))));
+});
+/**
+ * 索引栏组件
+ * @en IndexBar component
+ * @type 导航
+ * @type_en Navigation
+ * @name 索引栏
+ * @name_en SearchBar
+ */
+export default componentWrapper(IndexBar, { Group });

package/esnext/index-bar/side-bar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IndexBarSideBarProps } from './type';
+export declare function IndexBarSideBar(props: IndexBarSideBarProps): JSX.Element;

package/esnext/index-bar/side-bar.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+export function IndexBarSideBar(props) {
+    const { indexes, prefixCls, onTouching, onClick, activeIndex, tipType, renderSideBar, renderSideBarItem = index => index, renderTip: propsRenderTip, } = props;
+    const [isTouching, originSetIsTouching] = useState(false);
+    const setIsTouching = (touching) => {
+        originSetIsTouching(touching);
+        onTouching(touching);
+    };
+    const handleTouchingStart = () => setIsTouching(true);
+    const handleTouchingStop = () => setIsTouching(false);
+    const handleTouchMove = (e) => {
+        if (!isTouching || !e.touches?.length) {
+            return;
+        }
+        const { clientX, clientY } = e.touches[0];
+        const target = document.elementFromPoint(clientX, clientY);
+        if (target && target.dataset?.index) {
+            onClick(target.dataset.index);
+        }
+    };
+    const renderSideBarTip = (index, type) => {
+        if (propsRenderTip) {
+            return propsRenderTip(index);
+        }
+        return React.createElement("div", { className: `${prefixCls}-index-bar-sidebar-${type}` }, index);
+    };
+    const node = (React.createElement("div", { className: cls(`${prefixCls}-index-bar-sidebar`, {
+            [`${prefixCls}-index-bar-sidebar-touching`]: isTouching,
+        }), onTouchStart: () => handleTouchingStart(), onTouchEnd: () => handleTouchingStop(), onTouchCancel: () => handleTouchingStop(), onTouchMove: handleTouchMove },
+        tipType === 'toast' &&
+            isTouching &&
+            activeIndex &&
+            renderSideBarTip(activeIndex, 'toast'),
+        indexes.map(index => (React.createElement("div", { className: cls(`${prefixCls}-index-bar-sidebar-item`, {
+                [`${prefixCls}-index-bar-sidebar-active`]: activeIndex === index,
+            }), key: index, onTouchStart: () => onClick(index), "data-index": index },
+            tipType === 'sweat' &&
+                isTouching &&
+                activeIndex === index &&
+                renderSideBarTip(index, 'sweat'),
+            React.createElement("div", { className: `${prefixCls}-index-bar-sidebar-item-wrapper` }, renderSideBarItem(index)))))));
+    return renderSideBar ? renderSideBar(node) : node;
+}