@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/picker-view/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/picker-view/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/picker-view/style/index.d.ts

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

package/esnext/picker-view/style/index.js

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

package/esnext/picker-view/style/index.less

@@ -0,0 +1,125 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-picker-view {
+    .noselect();
+    .use-var(height, picker-view-wrapper-height);
+    position: relative;
+}
+
+.@{prefix}-picker {
+
+    &-multi {
+        .use-var(color, font-color);
+        .use-var(font-size, picker-view-font-size);
+        .use-var(line-height, picker-view-cell-height);
+    }
+
+    &-multi,
+    &-selection {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+
+    &-column {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        &-item-wrap {
+            box-sizing: content-box;
+            will-change: transform;
+        }
+
+        &-item {
+            white-space: nowrap;
+            overflow-y: hidden;
+            overflow-x: auto;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &-selection {
+        will-change: transform;
+        flex-direction: column;
+        pointer-events: none;
+
+        &-mask-top {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-top-background);
+
+        }
+
+        &-mask-bottom {
+            width: 100%;
+            flex: 1;
+            .use-var(background, picker-view-mask-bottom-background);
+        }
+
+        &-bar {
+            width: 100%;
+            .use-var(height, picker-view-cell-height);
+            flex: 0 0 auto;
+            .onepx-border-var(top, picker-view-selection-border-color);
+            .onepx-border-var(bottom, picker-view-selection-border-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);
+    }
+  }
+  .@{prefix}-picker {
+    &-multi {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+    }
+    &-selection {
+      &-mask-top {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-picker-view-mask-top-background);
+        }
+      }
+      &-mask-bottom {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-picker-view-mask-bottom-background);
+        }
+      }
+      &-bar {
+        @{arco-dark-mode-selector} & {
+          .onepx-border-var(top, dark-picker-view-selection-border-color);
+          .onepx-border-var(bottom, dark-picker-view-selection-border-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/picker-view/type.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+export declare type PickerCellMovingStatus = 'normal' | 'moving' | 'scrolling';
+export declare type ValueType = string | number;
+export interface PickerData {
+    /**
+     * 每一列展示的每项文案对应的值
+     * @en The value for each item displayed in each column
+     */
+    value: ValueType;
+    /**
+     * 每一列展示的文案
+     * @en Text displayed in each column
+     */
+    label: React.ReactNode;
+    /**
+     * 级联状态下，该列对应的下一列数据
+     * @en In the cascade state, the next column of data corresponding to this column
+     */
+    children?: PickerData[];
+}
+export interface PickerViewProps {
+    /**
+     * 数据源，非级联时data数组的长度决定picker列数，级联时以cols决定 pick列数
+     * @en Data source, the length of the data list determines the number of picker columns when not cascading, and the number of picker columns is determined by cols when cascading
+     */
+    data: PickerData[] | PickerData[][] | ValueType[][];
+    /**
+     * 是否联动
+     * @en Whether to cascade
+     * @default true
+     */
+    cascade?: boolean;
+    /**
+     * 列数(最大为5；cascade=true时才使用)
+     * @en Number of columns (maximum 5; only used when cascade=true)
+     * @default 3
+     */
+    cols?: number;
+    /**
+     * 行数(一列可选项的行数)，必须是奇数，最小为3个
+     * @en The number of rows (the number of rows in a column of optional items), must be an odd number, the minimum is 3
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * 是否不可用
+     * @en Disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 值, 格式是[value1, value2, value3], 对应数据源的相应级层value
+     * @en Value, the format is [value1, value2, value3], corresponding to the corresponding level value of the data source
+     */
+    value?: ValueType[];
+    /**
+     * 每列数据选择变化后的回调函数
+     * @en The callback function after each column data selection changes
+     */
+    onPickerChange?: (value: ValueType[], index: number, data: PickerData[]) => void;
+    /**
+     * 每列样式
+     * @en Stylesheet per column
+     */
+    itemStyle?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 是否可通过点击操作选择内容
+     * @en Whether content can be selected by clicking
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 是否隐藏无数据的空列，常用于级联选择
+     * @en Whether to hide empty columns without data, often used for cascading selection
+     * @default false
+     */
+    hideEmptyCols?: boolean;
+    /**
+     * 是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥
+     * @en Whether to stop sliding by long-pressing, inputing the number x means that the touch exceeds x milliseconds to count as long-pressing, inputing true means that x=100, the long-press event and the click event are mutually exclusive
+     * @default false
+     */
+    touchToStop?: boolean | number;
+}

package/esnext/picker-view/type.js

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

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

@@ -0,0 +1,2 @@
+export * from './usePosition';
+export * from './useEvent';

package/esnext/popover/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './usePosition';
+export * from './useEvent';

package/esnext/popover/hooks/useEvent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PopoverProps, PopoverInnerRef } from '../type';
+export declare const useEvent: (props: PopoverProps, wrapperRef: React.MutableRefObject<HTMLDivElement | null>, popoverInnerRef: React.MutableRefObject<PopoverInnerRef | null>, visibleRef: React.MutableRefObject<boolean>, onVisibleChange: (visible: boolean) => void, adjustVerticalDirection: () => void) => {
+    popoverDisappear: () => void;
+    mayRemoveEventListenerOnBody: () => void;
+    startCloseTimer: () => void;
+    mayAddEventOnBody: () => void;
+};

package/esnext/popover/hooks/useEvent.js

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { isContains, isObject } from '@arco-design/mobile-utils';
+import lodashThrottle from 'lodash.throttle';
+import { getDefaultValue } from '../../_helpers';
+import { defaultAutoDirection } from './usePosition';
+/**
+ * 阻止最近一次点击事件计时器
+ * @en Block last click event timer
+ */
+let preventRecentClickTimer = 0;
+export const useEvent = (props, wrapperRef, popoverInnerRef, visibleRef, onVisibleChange, adjustVerticalDirection) => {
+    const { clickOtherToClose = true, touchOtherToClose = props.touchToClose === void 0 ? false : props.touchToClose, duration = 0, useAutoDirection = true, verticalScrollThrottle = 100, preventBodyClick = false, getVerticalScrollContainer = () => document, } = props;
+    /**
+     * 浮窗消失计时器
+     * @en Popup disappearing timer
+     */
+    const closeTimer = useRef(0);
+    /** 垂直方向自适应 */
+    const autoVerticalDirection = getDefaultValue(isObject(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
+    const popoverDisappear = () => {
+        onVisibleChange(false);
+        window.clearTimeout(closeTimer.current);
+        closeTimer.current = 0;
+        mayRemoveEventListenerOnBody();
+    };
+    const throttleHandleVerticalScroll = useMemo(() => {
+        return lodashThrottle(adjustVerticalDirection, verticalScrollThrottle);
+    }, [adjustVerticalDirection, verticalScrollThrottle]);
+    useEffect(() => {
+        const verticalScrollEl = getVerticalScrollContainer();
+        if (visibleRef.current && verticalScrollEl && autoVerticalDirection) {
+            verticalScrollEl.addEventListener('scroll', throttleHandleVerticalScroll);
+        }
+        return () => {
+            if (verticalScrollEl) {
+                verticalScrollEl.removeEventListener('scroll', throttleHandleVerticalScroll);
+            }
+        };
+    }, [
+        throttleHandleVerticalScroll,
+        getVerticalScrollContainer,
+        autoVerticalDirection,
+        visibleRef,
+    ]);
+    const mayRemoveEventListenerOnBody = useCallback(() => {
+        document.body.removeEventListener('click', handleClickBody, true);
+        document.body.removeEventListener('touchstart', handleTouchBody);
+        const el = getVerticalScrollContainer();
+        if (el) {
+            el.removeEventListener('scroll', throttleHandleVerticalScroll);
+            el.removeEventListener('scroll', handleScrollBody);
+        }
+    }, [throttleHandleVerticalScroll]);
+    const handleClickBody = useCallback(e => {
+        // 仅处理子元素和气泡元素外的点击事件
+        // @en Only handle click events outside of children elements and bubble elements
+        if (!isContains(wrapperRef.current, e.target) &&
+            !isContains(popoverInnerRef.current?.dom || null, e.target)) {
+            if (preventBodyClick) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            popoverDisappear();
+        }
+    }, [preventBodyClick]);
+    /**
+     * UE要求气泡出现后，点击页面任意元素只隐藏气泡，不响应点击事件
+     * @en UE requires that after the bubble appears, clicking any element on the page only hides the bubble and does not respond to the click event
+     * 由于touchstart不能取消点击事件
+     * @en It can't cancel click event due to touchstart
+     * 监听body的最近一次click事件进行取消
+     * @en Listen to the body's latest click event to cancel
+     * 如果500ms内没有点击事件，用户可能是通过滑动页面触发的touchstart，此时移除click监听
+     * @en If there is no click event within 500ms, the user may have triggered the touchstart by sliding the page, and the click listener will be removed at this time.
+     */
+    const preventRecentClick = () => {
+        clearTimeout(preventRecentClickTimer);
+        const handle = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            document.body.removeEventListener('click', handle, true);
+            clearTimeout(preventRecentClickTimer);
+        };
+        document.body.addEventListener('click', handle, true);
+        preventRecentClickTimer = window.setTimeout(() => {
+            document.body.removeEventListener('click', handle, true);
+        }, 500);
+    };
+    const handleTouchBody = useCallback(e => {
+        if (!e.targetTouches[0]?.target ||
+            !wrapperRef.current ||
+            !popoverInnerRef.current?.dom ||
+            !visibleRef.current) {
+            return;
+        }
+        // 判断元素是否非子元素和气泡元素，内部的事件交给组件内部自行处理
+        // @en Determine whether the element is not a child element and a bubble element, and the internal events are handed over to the component to handle it by itself
+        if (!isContains(wrapperRef.current, e.targetTouches[0]?.target) &&
+            !isContains(popoverInnerRef.current.dom, e.targetTouches[0]?.target)) {
+            preventBodyClick && preventRecentClick();
+            popoverDisappear();
+        }
+    }, [preventBodyClick]);
+    const handleScrollBody = useCallback(() => {
+        if (visibleRef.current && touchOtherToClose) {
+            popoverDisappear();
+        }
+    }, [touchOtherToClose]);
+    useEffect(() => {
+        const el = getVerticalScrollContainer();
+        if (el && touchOtherToClose && visibleRef.current) {
+            el.addEventListener('scroll', handleScrollBody);
+        }
+        return () => {
+            el && el.removeEventListener('scroll', handleScrollBody);
+        };
+    }, [handleScrollBody, touchOtherToClose]);
+    const mayAddEventOnBody = () => {
+        if (touchOtherToClose) {
+            document.body.addEventListener('touchstart', handleTouchBody);
+            // FIXME: 解决按住气泡元素后上下滚动页面，气泡未消失的问题
+            // @en FIXME: solve the problem that the bubble does not disappear after scrolling the page up and down after pressing the bubble element
+            const el = getVerticalScrollContainer();
+            el && el.addEventListener('scroll', handleScrollBody);
+        }
+        else if (clickOtherToClose) {
+            document.body.addEventListener('click', handleClickBody, true);
+        }
+    };
+    /**
+     * 气泡自动关闭的场景下，计时关闭气泡
+     * @en In the scene where the bubbles are automatically closed, time to close the bubbles
+     */
+    const startCloseTimer = () => {
+        if (duration !== 0) {
+            closeTimer.current = window.setTimeout(() => {
+                onVisibleChange(false);
+                mayRemoveEventListenerOnBody();
+            }, duration);
+        }
+    };
+    return {
+        popoverDisappear,
+        mayRemoveEventListenerOnBody,
+        startCloseTimer,
+        mayAddEventOnBody,
+    };
+};

package/esnext/popover/hooks/usePosition.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from 'react';
+import { PopoverProps, PopoverPosition, PopoverTransformOrigin, PopoverInnerRef, Direction } from '../type';
+/**
+ * 自适应默认值
+ * @en Default autoDirection
+ */
+export declare const defaultAutoDirection = true;
+export declare const usePosition: (props: PopoverProps, popoverRef: MutableRefObject<PopoverInnerRef | null>, childRef: MutableRefObject<HTMLDivElement | null>, wrapperRef: MutableRefObject<HTMLDivElement | null>) => {
+    direction: Direction;
+    position: PopoverPosition;
+    isCalcPosition: boolean;
+    arrowWidth: number;
+    transformOrigin: PopoverTransformOrigin;
+    computedChildAndPopoverOffset: () => void;
+    resetPosition: () => void;
+    onAdjustDirection: (vertical: 'top' | 'bottom') => void;
+    adjustVerticalDirection: () => void;
+};