@arco-design/mobile-react 2.31.6 → 2.32.0

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

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

package/esnext/index-bar/style/css/index.js

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

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

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

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

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

package/esnext/index-bar/style/index.less

@@ -0,0 +1,189 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-index-bar {
+    position: relative;
+    .use-var(background, index-bar-background);
+    overflow: hidden;
+    &-container {
+        height: 100%;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    &-group {
+        &-active {
+            .use-var(color, index-bar-group-active-color);
+        }
+        &-title {
+            .use-var-with-rtl(padding-left, index-bar-group-left-spacing);
+            .use-var(height, index-bar-group-title-height);
+            .use-var(background, index-bar-group-title-background);
+            .use-var(font-size, index-bar-group-title-font-size);
+            .use-var(color, index-bar-group-title-font-color);
+            display: flex;
+            align-items: center;
+        }
+        &-item {
+            .use-var(height, index-bar-group-item-height);
+            display: flex;
+            align-items: center;
+            .use-var-with-rtl(margin-left, index-bar-group-left-spacing);
+            .use-var(font-size, index-bar-group-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+        }
+    }
+
+    &-sidebar {
+        position: absolute;
+        z-index: 2;
+        .set-prop-with-rtl(right, 0);
+        top: 50%;
+        transform: translateY(-50%) translateZ(0);
+        user-select: none;
+
+        &-touching {
+            width: 100%;
+        }
+
+        &-item {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            position: relative;
+            .use-var(padding, index-bar-sidebar-item-padding);
+            cursor: pointer;
+
+            &-wrapper {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                .use-var(width, index-bar-sidebar-item-width);
+                .use-var(font-size, index-bar-sidebar-item-font-size);
+                .use-var(line-height, index-bar-sidebar-item-line-height);
+            }
+
+            &:last-child {
+                padding-bottom: 0px;
+            }
+        }
+        &-active {
+            .use-var(color, index-bar-sidebar-active-color);
+        }
+
+        &-sweat {
+            position: absolute;
+            .use-var(height, index-bar-sidebar-sweat-radius);
+            .use-var(min-width, index-bar-sidebar-sweat-radius);
+            .use-var(line-height, index-bar-sidebar-sweat-radius);
+            border-radius: 9999px;
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-sweat-padding);
+            .use-var(background, index-bar-sidebar-sweat-background);
+            .use-var-with-rtl(right, index-bar-sidebar-sweat-right);
+            .use-var(font-size, index-bar-sidebar-sweat-font-size);
+            .use-var(color, index-bar-sidebar-sweat-color);
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                .use-var-with-rtl(right, index-bar-sidebar-sweat-triangle-position);
+                width: 0;
+                height: 0;
+                .use-var(border, index-bar-sidebar-sweat-triangle-border);
+                .use-var-with-rtl(border-left-color, index-bar-sidebar-sweat-background);
+                border-radius: 4px;
+            }
+        }
+
+        &-toast {
+            position: absolute;
+            .use-var(background, index-bar-sidebar-toast-background);
+            .use-var(color, index-bar-sidebar-toast-color);
+            left: 50%;
+            top: 50%;
+            .use-var(min-width, index-bar-sidebar-toast-height);
+            .use-var(height, index-bar-sidebar-toast-height);
+            .use-var(line-height, index-bar-sidebar-toast-height);
+            transform: translate(-50%, -50%);
+            text-align: center;
+            .use-var(padding, index-bar-sidebar-toast-padding);
+            .use-var(font-size, index-bar-sidebar-toast-font-size);
+            .use-var(border-radius, index-bar-sidebar-toast-radius);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-index-bar {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-index-bar-background);
+    }
+    &-group {
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-index-bar-group-active-color);
+        }
+      }
+      &-title {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-index-bar-group-title-background);
+          .use-var(color, dark-index-bar-group-title-font-color);
+        }
+      }
+      &-item {
+        &:not(:last-child) {
+          @{arco-dark-mode-selector} & {
+            .onepx-border-var(bottom, dark-line-color);
+          }
+        }
+      }
+    }
+    &-sidebar {
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-index-bar-sidebar-active-color);
+        }
+      }
+      &-sweat {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-index-bar-sidebar-sweat-color);
+        }
+      }
+      &-toast {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-index-bar-sidebar-toast-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

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

@@ -0,0 +1,195 @@
+import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import { StickyRef } from '../sticky';
+import { BaseRef } from '../_helpers';
+export declare type IndexBarIndexType = string | number;
+export interface IndexBarBaseData {
+    /**
+     * 内容
+     * @en content
+     */
+    content: ReactNode;
+}
+interface IndexBarGroupItem<Data extends IndexBarBaseData = IndexBarBaseData> {
+    /**
+     * IndexBarGroup对应的索引
+     * @en Index corresponding to IndexBarGroup
+     */
+    index: IndexBarIndexType;
+    /**
+     * IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效
+     * @en The list data to be rendered in IndexBarGroup, if the children attribute has been passed, the list attribute will not take effect
+     */
+    list?: Data[];
+}
+export declare type IndexBarTipType = 'none' | 'sweat' | 'toast';
+export declare type IndexBarChangeTrigger = 'swipe' | 'manual' | 'sidebar';
+export interface IndexBarScrollParams {
+    index: IndexBarIndexType;
+    type: IndexBarChangeTrigger;
+    rightNow?: boolean;
+}
+export interface IndexBarSideBarProps {
+    tipType: IndexBarTipType;
+    indexes: IndexBarIndexType[];
+    prefixCls?: string;
+    onTouching: (isTouching: boolean) => void;
+    onClick: (index: IndexBarIndexType) => void;
+    activeIndex?: IndexBarIndexType;
+    renderSideBarItem?: (index: IndexBarIndexType) => ReactNode;
+    renderSideBar?: (Content: ReactNode) => ReactElement;
+    renderTip?: (index: IndexBarIndexType) => ReactNode;
+}
+export interface IndexBarGroupProps<Data extends IndexBarBaseData = IndexBarBaseData> extends IndexBarGroupItem<Data> {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义内容的渲染，有自定义内容优先渲染自定义内容，否则渲染list传递的数据
+     * @en Rendering of custom content, if there is custom content, the custom content is rendered first, otherwise the data passed by the list is rendered
+     */
+    children?: ReactNode;
+    /**
+     * 自定义提取List的key作为列表渲染的key，默认选取listItem的所在数组位置
+     * @en Customize the extracted key of the List as the key for list rendering, and select the array position where the listItem is located by default
+     */
+    listKey?: (data: Data, listItemIndex: number) => IndexBarIndexType;
+    /**
+     * IndexBar.Group中某个子项被点击时的回调
+     * @en Callback when a child item in IndexBar.Group is clicked
+     */
+    onGroupItemClick?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => void;
+    /**
+     * 自定义IndexBar.Group的索引标题内容渲染
+     * @en Customize IndexBar.Group's index title content rendering
+     */
+    renderStickyItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的子项内容渲染
+     * @en Customize the rendering of sub-items of IndexBar.Group
+     */
+    renderGroupItem?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => ReactNode;
+}
+export interface IndexBarGroupRef extends BaseRef {
+}
+export interface IndexBarProps<Data extends IndexBarBaseData = IndexBarBaseData> {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 默认要激活的索引
+     * @en Index to activate by default
+     */
+    defaultIndex?: IndexBarIndexType;
+    /**
+     * 是否开启侧边栏功能
+     * @en Whether to enable the sidebar function
+     * @default false
+     */
+    disableSidebar?: boolean;
+    /**
+     * 是否开启索引的自动吸顶效果
+     * @en Whether to enable the automatic ceiling effect of the index
+     * @default true
+     */
+    sticky?: boolean;
+    /**
+     * 索引栏内容
+     * @en IndexBar contents
+     */
+    groups?: IndexBarGroupItem<Data>[];
+    /**
+     * 自定义内容的渲染，内容必须是IndexBar.Group组件
+     * @en Rendering of custom content, the content must be an IndexBar.Group component
+     */
+    children?: ReactNode;
+    /**
+     * 侧边栏索引提示的样式类型 - sweat 水滴形 - toast 轻提示 - none 关闭提示
+     * @en Style type of sidebar index hint - sweat: teardrop - toast: light hint - none: turn off hint
+     * @default "toast"
+     */
+    tipType?: IndexBarTipType;
+    /**
+     * 手动调用scrollToIndex时，滚动动画的执行时间
+     * @en Execution time of scrolling animation when scrollToIndex is called manually
+     * @default 0
+     */
+    scrollDuration?: number;
+    /**
+     * 手动调用scrollToIndex时，滚动的动画曲线
+     * @en When scrollToIndex is called manually, the scrolling animation curve
+     */
+    scrollBezier?: [number, number, number, number];
+    /**
+     * 激活的索引改变时的回调，第一个参数是新的索引，第二个参数是改变方式：- swipe 手动滑动页面触发变化 - sidebar 侧边栏点击触发变化 - manual 手动调用scrollToIndex触发
+     * @en Callback when the active index changes, the first parameter is the new index, and the second parameter is the change method: - swipe: triggers the change by manually sliding the page - sidebar: triggers the change by clicking on the sidebar - manual: triggers by manually calling scrollToIndex
+     */
+    onChange?: (index: IndexBarIndexType, trigger: IndexBarChangeTrigger) => void;
+    /**
+     * IndexBar.Group中某个子项被点击时的回调，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en The callback when a sub-item in IndexBar.Group is clicked, the callback will not take effect when using JSX writing, please bind the corresponding property on IndexBar.Group
+     */
+    onGroupItemClick?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => void;
+    /**
+     * 自定义侧边栏每个子项的内容渲染
+     * @en Customize the content rendering of each sub-item in the sidebar
+     */
+    renderSideBarItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义侧边栏渲染
+     * @en Custom sidebar rendering
+     */
+    renderSideBar?: (Content: ReactNode) => ReactElement;
+    /**
+     * 自定义使用侧边栏改变索引时，渲染提示的内容
+     * @en Customize the content of the rendering prompt when changing the index using the sidebar
+     */
+    renderTip?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的索引标题内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en Customize the rendering of the index title content of IndexBar.Group. When using JSX writing, the callback will not take effect. Please bind the corresponding property on IndexBar.Group
+     */
+    renderStickyItem?: (index: IndexBarIndexType) => ReactNode;
+    /**
+     * 自定义IndexBar.Group的子项内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar.Group上绑定对应属性
+     * @en Customize the rendering of sub-items of IndexBar.Group. This callback will not take effect when using JSX. Please bind the corresponding properties on IndexBar.Group
+     */
+    renderGroupItem?: (index: IndexBarIndexType, itemData: Data, itemIndex: number) => ReactNode;
+}
+export interface IndexBarRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 手动滚动到指定的索引位置
+     * @en Manually scroll to the specified index position
+     */
+    scrollToIndex: (index?: IndexBarIndexType, rightNow?: boolean) => void;
+    /**
+     * 局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置
+     * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
+     */
+    recalculatePosition: (index?: IndexBarIndexType) => void;
+}
+export interface IndexBarContext {
+    sticky: boolean;
+    getScrollContainer: () => HTMLDivElement | null;
+    activeIndex?: IndexBarIndexType;
+    updateRef: (index: IndexBarIndexType, ref: StickyRef) => void;
+}
+export {};

package/esnext/index-bar/type.js

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

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

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+import { IndexBarIndexType } from './type';
+export declare function filterValidIndexBarChild(children: ReactNode): ReactElement<any, string | ((props: any) => ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>[];
+export declare function getFormatIndex(index: IndexBarIndexType, activeIndex: IndexBarIndexType | undefined): string | number;
+export declare function isValidIndex(index: unknown): index is IndexBarIndexType;
+export declare function getGroupDomFromIndex(containerDom: HTMLDivElement, activeIndex: IndexBarIndexType): HTMLDivElement | null;

package/esnext/index-bar/utils.js

@@ -0,0 +1,44 @@
+import { Children, isValidElement } from 'react';
+export function filterValidIndexBarChild(children) {
+    const validChildren = [];
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) {
+            console.warn('<IndexBar /> only accept <IndexBar.Group /> as the children');
+            return;
+        }
+        validChildren.push(child);
+    });
+    return validChildren;
+}
+// index有可能是number或者string，但是绑在data-index的attr上后
+// 通过滑动事件得到的都是string，需要处理下
+export function getFormatIndex(index, activeIndex) {
+    const activeIndexType = typeof activeIndex;
+    const indexType = typeof index;
+    if (indexType === activeIndexType) {
+        return index;
+    }
+    if (activeIndexType === 'number') {
+        return Number(index);
+    }
+    return index.toString();
+}
+export function isValidIndex(index) {
+    return typeof index === 'number' || typeof index === 'string';
+}
+export function getGroupDomFromIndex(containerDom, activeIndex) {
+    let targetDom = null;
+    const containerChildren = containerDom.children;
+    for (let i = 0; i < containerChildren.length; i++) {
+        const dom = containerChildren[i];
+        const dataset = dom?.dataset;
+        if (dataset && dataset.index) {
+            const formatIndex = getFormatIndex(dataset.index, activeIndex);
+            if (formatIndex === activeIndex) {
+                targetDom = dom;
+                break;
+            }
+        }
+    }
+    return targetDom;
+}

package/esnext/index.d.ts

@@ -0,0 +1,59 @@
+export { default as Tabs } from './tabs';
+export { default as Sticky } from './sticky';
+export { default as Portal } from './portal';
+export { default as Steps } from './steps';
+export { default as ActionSheet } from './action-sheet';
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { default as Cell } from './cell';
+export { default as Checkbox } from './checkbox';
+export { default as CircleProgress } from './circle-progress';
+export { default as Collapse } from './collapse';
+export { default as ContextProvider } from './context-provider';
+export { default as CountDown } from './count-down';
+export { default as DatePicker } from './date-picker';
+export { default as Dialog } from './dialog';
+export { default as Divider } from './divider';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Ellipsis } from './ellipsis';
+export { default as Form } from './form';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as ImagePicker } from './image-picker';
+export { default as ImagePreview } from './image-preview';
+export { default as IndexBar } from './index-bar';
+export { default as Input } from './input';
+export { default as Keyboard } from './keyboard';
+export { default as LoadMore } from './load-more';
+export { default as Loading } from './loading';
+export { default as Masking } from './masking';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
+export { default as Notify } from './notify';
+export { default as Pagination } from './pagination';
+export { default as Picker } from './picker';
+export { default as PickerView } from './picker-view';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as PopupSwiper } from './popup-swiper';
+export { default as Progress } from './progress';
+export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
+export { default as SearchBar } from './search-bar';
+export { default as ShowMonitor } from './show-monitor';
+export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
+export { default as Stepper } from './stepper';
+export { default as SwipeAction } from './swipe-action';
+export { default as SwipeLoad } from './swipe-load';
+export { default as Switch } from './switch';
+export { default as TabBar } from './tab-bar';
+export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
+export { default as Toast } from './toast';
+export { default as Transition } from './transition';
+export { default as Uploader } from './uploader';

package/esnext/index.js

@@ -0,0 +1,59 @@
+export { default as Tabs } from './tabs';
+export { default as Sticky } from './sticky';
+export { default as Portal } from './portal';
+export { default as Steps } from './steps';
+export { default as ActionSheet } from './action-sheet';
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { default as Cell } from './cell';
+export { default as Checkbox } from './checkbox';
+export { default as CircleProgress } from './circle-progress';
+export { default as Collapse } from './collapse';
+export { default as ContextProvider } from './context-provider';
+export { default as CountDown } from './count-down';
+export { default as DatePicker } from './date-picker';
+export { default as Dialog } from './dialog';
+export { default as Divider } from './divider';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Ellipsis } from './ellipsis';
+export { default as Form } from './form';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as ImagePicker } from './image-picker';
+export { default as ImagePreview } from './image-preview';
+export { default as IndexBar } from './index-bar';
+export { default as Input } from './input';
+export { default as Keyboard } from './keyboard';
+export { default as LoadMore } from './load-more';
+export { default as Loading } from './loading';
+export { default as Masking } from './masking';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
+export { default as Notify } from './notify';
+export { default as Pagination } from './pagination';
+export { default as Picker } from './picker';
+export { default as PickerView } from './picker-view';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as PopupSwiper } from './popup-swiper';
+export { default as Progress } from './progress';
+export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
+export { default as SearchBar } from './search-bar';
+export { default as ShowMonitor } from './show-monitor';
+export { default as Skeleton } from './skeleton';
+export { default as Slider } from './slider';
+export { default as Stepper } from './stepper';
+export { default as SwipeAction } from './swipe-action';
+export { default as SwipeLoad } from './swipe-load';
+export { default as Switch } from './switch';
+export { default as TabBar } from './tab-bar';
+export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
+export { default as Toast } from './toast';
+export { default as Transition } from './transition';
+export { default as Uploader } from './uploader';

package/esnext/input/hooks.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { BasicInputProps } from './props';
+export declare type InputEleType = HTMLInputElement | HTMLTextAreaElement;
+export declare function useInputLogic(props: BasicInputProps<InputEleType>, inputRef: React.MutableRefObject<InputEleType | null>): {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<InputEleType>) => void;
+    handleInput: (e: any) => void;
+    handleKeyDown: (e: React.KeyboardEvent<InputEleType>) => void;
+    handleFocus: (e: React.FocusEvent<InputEleType>) => void;
+    handleBlur: (e: React.FocusEvent<InputEleType>) => void;
+    handleClick: (e: React.MouseEvent<InputEleType>) => void;
+    renderWrapper: (prefixCls: string, type: string, children: ReactNode) => JSX.Element;
+    wrapRef: React.MutableRefObject<HTMLDivElement | null>;
+};