@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/skeleton/style/index.js

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../avatar/style';
+import './index.less';

package/esnext/skeleton/style/index.less

@@ -0,0 +1,182 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    .style-with-rtl({
+        animation-name: skeleton-gradient-reverse;
+    });
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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);
+    }
+  }
+  .@{prefix}-skeleton {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-skeleton-gradient-animation-color);
+    }
+  }
+  .@{prefix}-skeleton-item {
+    @{arco-dark-mode-selector} & {
+      .use-var(background-color, dark-skeleton-background-color);
+    }
+  }
+}
+/********************* End *************************/

package/esnext/skeleton/type.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { BaseProps, SimpleBaseProps } from '../_helpers';
+export type { BaseProps, SimpleBaseProps };
+export interface SkeletonProps extends SimpleBaseProps {
+    /**
+     * 是否显示标题占位图
+     * @en Show title placeholder
+     * @default true
+     */
+    title?: boolean | SkeletonTitleProps;
+    /**
+     * 是否显示段落占位图
+     * @en Show paragraph placeholder
+     * @default true
+     */
+    paragraph?: boolean | SkeletonParagraphProps;
+    /**
+     * 是否显示头像占位图
+     * @en Show Avatar placeholder
+     * @default false
+     */
+    avatar?: boolean | SkeletonAvatarProps;
+    /**
+     * 是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）
+     * @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
+     * @default false
+     */
+    grid?: boolean | SkeletonGridProps;
+    /**
+     * 是否展示动画效果
+     * @en Show loading effect
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * 加载动画效果，可选“扫光”、“呼吸”两种效果
+     * @en Animation of loading effect, 'gradient' and 'breath' effects are optional
+     * @default "gradient"
+     */
+    animation?: 'gradient' | 'breath';
+    /**
+     * 扫光动效高光颜色
+     * @en Highlight color of gradient animation
+     * @default "rgba(0, 0, 0, 0.04)"
+     */
+    animationGradientColor?: string;
+    /**
+     * 占位块背景色
+     * @en Background color of skeleton item
+     * @default "#F7F8FA"
+     */
+    backgroundColor?: string;
+    /**
+     * 子元素
+     * @en Children element
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface SkeletonTitleProps extends SimpleBaseProps {
+    /**
+     * 标题占位图宽度
+     * @en The width of title
+     * @default "40%"
+     */
+    width?: number | string;
+}
+export interface SkeletonParagraphProps extends SimpleBaseProps {
+    /**
+     * 段落占位图的行数
+     * @en Number of lines for paragraph
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度
+     * @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
+     * @default "60%"
+     */
+    width?: number | string | Array<number | string>;
+}
+export interface SkeletonAvatarProps extends SimpleBaseProps {
+}
+export interface SkeletonGridProps extends SimpleBaseProps {
+    /**
+     * 金刚位列数
+     * @en columns of grid
+     * @default 4
+     */
+    columns?: number;
+}
+export interface SkeletonNodeProps extends BaseProps {
+}
+export interface SkeletonRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+export interface SkeletonContextParams {
+    backgroundColor?: string;
+    showAnimation: boolean;
+    animation: SkeletonProps['animation'];
+}

package/esnext/skeleton/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/slider/hooks/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SliderProps } from '..';
+export declare const baseRenderThumb: (prefixCls: string) => () => JSX.Element;
+export declare type LinePosition = {
+    length: number;
+    start: number;
+};
+export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks" | "renderThumbPopover">>;
+export * from './useSliderIcon';
+export * from './useSliderInit';
+export * from './useSliderStyle';
+export * from './useSliderEvents';

package/esnext/slider/hooks/index.js

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+export const baseRenderThumb = (prefixCls) => function () {
+    return React.createElement("div", { className: `${prefixCls}-slider-thumb` });
+};
+// 因为子组件和 hooks 较多, 为了代码整洁和可读性，做了拆分。
+// 参数通过 context 共享
+// @en Parameters are shared through context
+export const SliderContext = createContext({
+    className: '',
+    style: {},
+    disabled: false,
+    useRange: false,
+    useAnimation: true,
+    size: 2,
+    min: 0,
+    max: 100,
+    step: 1,
+    type: 'horizontal',
+    showTooltip: 'auto',
+    useMarkOnly: false,
+    showMarks: false,
+    prefixLabel: false,
+    suffixLabel: false,
+    draggableTrackOnly: false,
+    formatTooltip: value => String(value),
+    onChange: () => { },
+    onAfterChange: () => { },
+    renderThumb: baseRenderThumb(''),
+});
+export * from './useSliderIcon';
+export * from './useSliderInit';
+export * from './useSliderStyle';
+export * from './useSliderEvents';

package/esnext/slider/hooks/useSliderEvents.d.ts

@@ -0,0 +1,17 @@
+import React, { RefObject } from 'react';
+import { LinePosition } from '.';
+declare enum IsTouchingStatus {
+    Idle = 0,
+    Start = 1,
+    Moving = 2
+}
+export declare const useSliderEvents: ({ getLinePosition, lineRef, valueGroup, setValueGroup, setCommonIsTouching, }: {
+    getLinePosition: () => LinePosition;
+    lineRef: RefObject<HTMLDivElement>;
+    valueGroup: number | number[];
+    setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
+    setCommonIsTouching: React.Dispatch<React.SetStateAction<number>>;
+}) => {
+    isTouching: IsTouchingStatus;
+};
+export {};

package/esnext/slider/hooks/useSliderEvents.js

@@ -0,0 +1,128 @@
+import { useCallback, useContext, useState, useEffect, useMemo, useRef, } from 'react';
+import { SliderContext } from '.';
+import { GlobalContext } from '../../context-provider';
+var IsTouchingStatus;
+(function (IsTouchingStatus) {
+    IsTouchingStatus[IsTouchingStatus["Idle"] = 0] = "Idle";
+    IsTouchingStatus[IsTouchingStatus["Start"] = 1] = "Start";
+    IsTouchingStatus[IsTouchingStatus["Moving"] = 2] = "Moving";
+})(IsTouchingStatus || (IsTouchingStatus = {}));
+export const useSliderEvents = ({ getLinePosition, lineRef, valueGroup, setValueGroup, setCommonIsTouching, }) => {
+    const { useRtl } = useContext(GlobalContext);
+    const { disabled, step, min, max, type, draggableTrackOnly } = useContext(SliderContext);
+    const [isTouching, setIsTouching] = useState(IsTouchingStatus.Idle);
+    const [touchStartPosition, setTouchStartPosition] = useState(0);
+    const linePositionRef = useRef({ length: 0, start: 0 });
+    const isHorizontal = /^horizontal/g.test(type);
+    const validateValue = useCallback(value => {
+        if (value >= min && value <= max)
+            return value;
+        return value <= (min + max) / 2 ? min : max;
+    }, [min, max]);
+    // 通过位置获取值
+    // @en Get value by position
+    const getValueFromPosition = useCallback((touchPosition) => {
+        const { length, start } = linePositionRef.current;
+        if (length === 0)
+            return 0;
+        const rtlRatio = useRtl ? -1 : 1;
+        let newWidth = isHorizontal
+            ? (touchPosition - start) * rtlRatio
+            : length - touchPosition + start;
+        if (newWidth < 0) {
+            newWidth = 0;
+        }
+        else if (newWidth > length) {
+            newWidth = length;
+        }
+        const newRealTimeValue = validateValue(Math.round(((newWidth / length) * (max - min)) / step) * step + min);
+        return newRealTimeValue;
+    }, [isHorizontal, max, min, step]);
+    // 设置不同的值，因为可以点击 line ，需要提前计算具体修改的是哪个值。
+    // @en Set different values. Because line can  be clicked, it needs to calculate which value to modify in advance.
+    const setCommonValue = useMemo(() => {
+        const start = getValueFromPosition(touchStartPosition);
+        if (!Array.isArray(valueGroup)) {
+            if (isTouching) {
+                setValueGroup(start);
+                setCommonIsTouching(0);
+                setIsTouching(IsTouchingStatus.Moving);
+            }
+            return (realTimeValue) => {
+                setValueGroup(realTimeValue);
+            };
+        }
+        const index = Math.abs(valueGroup[0] - start) < Math.abs(valueGroup[1] - start) ? 0 : 1;
+        const handleValue = (realTimeValue) => {
+            setValueGroup(passValueGroup => {
+                if (typeof passValueGroup === 'number') {
+                    return [passValueGroup, realTimeValue];
+                }
+                const newValueGroup = [...passValueGroup];
+                newValueGroup[index] = realTimeValue;
+                return newValueGroup;
+            });
+        };
+        if (isTouching) {
+            setCommonIsTouching(index);
+            handleValue(start);
+            setIsTouching(IsTouchingStatus.Moving);
+        }
+        return handleValue;
+    }, [touchStartPosition, getValueFromPosition]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const handleTouchStart = (e) => {
+            if (draggableTrackOnly && e.target === lineRef.current)
+                return;
+            linePositionRef.current = getLinePosition();
+            const { clientX, clientY } = e.touches[0];
+            const touchPosition = isHorizontal ? clientX : clientY;
+            setIsTouching(IsTouchingStatus.Start);
+            setTouchStartPosition(touchPosition);
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        lineRef.current?.addEventListener('touchstart', handleTouchStart);
+        return () => {
+            !disabled && lineRef.current?.removeEventListener('touchstart', handleTouchStart);
+        };
+    }, [disabled, isHorizontal, draggableTrackOnly]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const handleTouchMove = (e) => {
+            if (isTouching === IsTouchingStatus.Moving) {
+                const { clientX, clientY } = e.touches[0];
+                const touchPosition = isHorizontal ? clientX : clientY;
+                setCommonValue(getValueFromPosition(touchPosition));
+            }
+            e.stopPropagation();
+            e.cancelable && e.preventDefault();
+        };
+        lineRef.current?.addEventListener('touchmove', handleTouchMove);
+        return () => {
+            !disabled && lineRef.current?.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [disabled, isHorizontal, isTouching]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const handleTouchEnd = (e) => {
+            setIsTouching(IsTouchingStatus.Idle);
+            setCommonIsTouching(-1);
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        lineRef.current?.addEventListener('touchend', handleTouchEnd);
+        lineRef.current?.addEventListener('touchcancel', handleTouchEnd);
+        return () => {
+            !disabled && lineRef.current?.removeEventListener('touchend', handleTouchEnd);
+            !disabled && lineRef.current?.removeEventListener('touchcancel', handleTouchEnd);
+        };
+    }, [disabled]);
+    return {
+        isTouching,
+    };
+};

package/esnext/slider/hooks/useSliderIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useSliderIcon: ({ valueGroup }: {
+    valueGroup: number | [number, number];
+}) => {
+    renderPrefixLabel: JSX.Element | null;
+    renderSuffixLabel: JSX.Element | null;
+};

package/esnext/slider/hooks/useSliderIcon.js

@@ -0,0 +1,41 @@
+import React, { useMemo, useContext } from 'react';
+import { GlobalContext } from '../../context-provider';
+import { SliderContext } from '.';
+export const useSliderIcon = ({ valueGroup }) => {
+    const { prefixCls = '' } = useContext(GlobalContext);
+    const { max, suffixLabel, min, prefixLabel } = useContext(SliderContext);
+    const renderPrefixLabel = useMemo(() => {
+        if (!prefixLabel)
+            return null;
+        let inner;
+        if (typeof prefixLabel === 'boolean' && prefixLabel) {
+            inner = min;
+        }
+        else if (typeof prefixLabel === 'function') {
+            inner = prefixLabel(valueGroup);
+        }
+        else {
+            inner = prefixLabel;
+        }
+        return React.createElement("div", { className: `${prefixCls}-slider-label is-prefix` }, inner);
+    }, [min, prefixLabel, valueGroup]);
+    const renderSuffixLabel = useMemo(() => {
+        if (!suffixLabel)
+            return null;
+        let inner;
+        if (typeof suffixLabel === 'boolean' && suffixLabel) {
+            inner = max;
+        }
+        else if (typeof suffixLabel === 'function') {
+            inner = suffixLabel(valueGroup);
+        }
+        else {
+            inner = suffixLabel;
+        }
+        return React.createElement("div", { className: `${prefixCls}-slider-label is-suffix` }, inner);
+    }, [max, suffixLabel, valueGroup]);
+    return {
+        renderPrefixLabel,
+        renderSuffixLabel,
+    };
+};

package/esnext/slider/hooks/useSliderInit.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const useSliderInit: ({ commonIsTouching }: {
+    commonIsTouching: number;
+}) => {
+    valueGroup: number | [number, number];
+    setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
+    firstRender: boolean;
+    runTimeConfig: {
+        activated: boolean;
+        value: number;
+        label: {} | null | undefined;
+    }[];
+    isMultiThumb: boolean;
+};