@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/notify/type.d.ts

@@ -0,0 +1,70 @@
+import { CSSProperties, ReactNode } from 'react';
+export declare type NotifyType = 'success' | 'info' | 'warn' | 'error';
+export interface NotifyProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
+    /**
+     * 需要展示的内容
+     * @en Notification content
+     */
+    content?: ReactNode;
+    /**
+     * 通知类型
+     * @en Notification type
+     * @default "info"
+     */
+    type?: NotifyType;
+    /**
+     * 是否显示通知
+     * @en Whether to show notification
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * 控制通知关闭的事件
+     * @en Close function
+     */
+    close?: () => void;
+    /**
+     * 通知关闭时的回调函数
+     * @en Callback after closing
+     */
+    onClose?: () => void;
+    /**
+     * 将通知放入某个模块
+     * @en Get mounted container
+     */
+    getContainer?: () => HTMLElement;
+    /**
+     * 动画的执行时间 (单位ms)
+     * @en Animation execution time (unit: ms)
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 通知自动关闭时延 (单位ms) 设置为0时不会自动关闭
+     * @en The delay of notification automatic closing (unit: ms). Will not automatically close when it is set to 0
+     * @default 3000
+     */
+    duration?: number;
+}
+export interface NotifyRef {
+    /**
+     * 最外层dom元素
+     * @en The outermost element DOM
+     */
+    dom: HTMLElement | null;
+    /**
+     * 更新元素布局
+     * @en Update DOM layout
+     */
+    updateLayout: () => void;
+}

package/esnext/notify/type.js

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

package/esnext/pagination/arrow.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Arrow(): JSX.Element;

package/esnext/pagination/arrow.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function Arrow() {
+    return (React.createElement("svg", { width: "2", height: "14", viewBox: "3 0 2 14", fill: "none", style: { overflow: 'visible' } },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.40514 12.7583C7.6004 12.563 7.6004 12.2465 7.40514 12.0512L2.40095 7.04701L7.36396 2.084C7.55922 1.88874 7.55922 1.57216 7.36396 1.37689L7.01041 1.02334C6.81515 0.828077 6.49856 0.828077 6.3033 1.02334L0.646447 6.68019C0.470402 6.85624 0.453075 7.1309 0.594469 7.32636C0.617837 7.37275 0.64889 7.41626 0.687628 7.455L6.34448 13.1119C6.53974 13.3071 6.85633 13.3071 7.05159 13.1119L7.40514 12.7583Z", fill: "currentColor" })));
+}

package/esnext/pagination/index.d.ts

@@ -0,0 +1,124 @@
+import React, { ReactNode } from 'react';
+export interface IPaginationDataParams {
+    /**
+     * 当前页
+     * @en Current page
+     */
+    current: number;
+    /**
+     * 每页条数
+     * @en Number of items per page
+     */
+    pageSize: number;
+    /**
+     * 总页数
+     * @en Total number of pages
+     */
+    pageNum: number;
+}
+export interface PaginationProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 分页器翻页区域样式类型，button表示按钮式分页器，text表示文本式分页器，none表示仅保留页码不含翻页区域
+     * @en The style type of the page turning area of the pagination, and none means that only the page number is kept without the page turning area
+     * @default "button"
+     */
+    type?: 'button' | 'text' | 'none';
+    /**
+     * 是否需要展示图标
+     * @en Whether to show the icon
+     * @default false
+     */
+    icon?: boolean | ReactNode | [ReactNode, ReactNode];
+    /**
+     * 翻页按钮水平位置，side表示两端对齐，center表示居中对齐
+     * @en The horizontal position of the page turning button, side means both ends are aligned, center means center alignment
+     * @default "side"
+     */
+    justify?: 'center' | 'side';
+    /**
+     * 当前页码
+     * @en Current page
+     * @default 1
+     */
+    current?: number;
+    /**
+     * 每页条数
+     * @en Number of items per page
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * 数据总条数
+     * @en Total number of data source
+     * @default 0
+     */
+    total?: number;
+    /**
+     * 只有一页时是否隐藏分页器
+     * @en Whether to hide the pager when there is only one page
+     * @default false
+     */
+    hideOnOnePage?: boolean;
+    /**
+     * 下一页样式，primary表示高亮
+     * @en Style of next page button, primary means highlight
+     * @default "default"
+     */
+    nextFieldType?: 'default' | 'primary';
+    /**
+     * 上一页文本
+     * @en Previous page text
+     * @default "上一页"
+     * @default_en "Previous"
+     */
+    prevFieldText?: string;
+    /**
+     * 下一页文本
+     * @en Next page text
+     * @default "下一页"
+     * @default_en "Next"
+     */
+    nextFieldText?: string;
+    /**
+     * 渲染前翻页按钮
+     * @en Custom render previous page button
+     */
+    renderPrevField?: (data: IPaginationDataParams) => ReactNode;
+    /**
+     * 渲染后翻页按钮
+     * @en Custom render next page button
+     */
+    renderNextField?: (data: IPaginationDataParams) => ReactNode;
+    /**
+     * 点击前/后翻页按钮时调用
+     * @en Callback called when the previous/next page button is clicked
+     */
+    onChange?: (data: IPaginationDataParams) => void;
+}
+export interface PaginationRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 用于数据分页，为完全受控组件
+ * @en The pagination component is used for data paging and is a fully controlled component.
+ * @type 导航
+ * @type_en Navigation
+ * @name 分页器
+ * @name_en Pagination
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<PaginationRef>>;
+export default Pagination;

package/esnext/pagination/index.js

@@ -0,0 +1,104 @@
+import React, { useRef, forwardRef, useImperativeHandle, useMemo, useContext, } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import { useSystem } from '../_helpers';
+import Arrow from './arrow';
+/**
+ * 用于数据分页，为完全受控组件
+ * @en The pagination component is used for data paging and is a fully controlled component.
+ * @type 导航
+ * @type_en Navigation
+ * @name 分页器
+ * @name_en Pagination
+ */
+const Pagination = forwardRef((props, ref) => {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const { className = '', style, current = 1, pageSize = 10, total = 5, icon = false, justify = 'side', hideOnOnePage = false, nextFieldType = 'default', renderPrevField, renderNextField, type = 'default', prevFieldText = locale?.Pagination.previousPage, nextFieldText = locale?.Pagination.nextPage, onChange, } = props;
+    const system = useSystem();
+    const pageNum = useMemo(() => Math.ceil(total / pageSize), [total, pageSize]);
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const iconRender = (iconType) => {
+        if (iconType === 'prev') {
+            if (Array.isArray(icon) && Boolean(icon.length)) {
+                return React.createElement("span", { className: "btn-icon" }, icon[0]);
+            }
+            if (Object.prototype.toString.call(icon) === '[object Object]') {
+                return React.createElement("span", { className: "btn-icon" }, icon);
+            }
+            return icon ? (React.createElement("span", { className: "btn-icon" },
+                React.createElement(Arrow, null))) : null;
+        }
+        if (Array.isArray(icon) && Boolean(icon.length)) {
+            return React.createElement("span", { className: "btn-icon" }, icon.length >= 2 ? icon[1] : icon[0]);
+        }
+        if (Object.prototype.toString.call(icon) === '[object Object]') {
+            return React.createElement("span", { className: "btn-icon next" }, icon);
+        }
+        return icon ? (React.createElement("span", { className: "btn-icon next" },
+            React.createElement(Arrow, null))) : null;
+    };
+    const prevRender = (prefix) => {
+        if (type === 'none') {
+            return null;
+        }
+        const prevFieldCls = cls(`${prefix}-prev-field`, { [`flex-${justify}`]: true });
+        if (typeof renderPrevField === 'undefined') {
+            return (React.createElement("div", { className: prevFieldCls },
+                React.createElement("div", { className: cls(`${prefix}-field`, 'prev', {
+                        text: type === 'text',
+                        button: type !== 'text',
+                        disabled: current === 1,
+                    }), onClick: () => {
+                        if (current <= 1) {
+                            return;
+                        }
+                        onChange?.({ pageSize, pageNum, current: Math.max(1, current - 1) });
+                    } },
+                    iconRender('prev'),
+                    Boolean(prevFieldText) && (React.createElement("span", { className: "btn-text" }, prevFieldText)))));
+        }
+        return (React.createElement("div", { className: prevFieldCls }, renderPrevField ? renderPrevField({ current, pageSize, pageNum }) : null));
+    };
+    const nextRender = (prefix) => {
+        if (type === 'none') {
+            return null;
+        }
+        const nextFieldCls = cls(`${prefix}-next-field`, { [`flex-${justify}`]: true });
+        if (typeof renderNextField === 'undefined') {
+            return (React.createElement("div", { className: nextFieldCls },
+                React.createElement("div", { className: cls(`${prefix}-field`, 'next', {
+                        text: type === 'text',
+                        button: type !== 'text',
+                        [nextFieldType === 'default' ? type : 'primary']: current < pageNum,
+                        disabled: current >= pageNum,
+                    }), onClick: () => {
+                        if (current >= pageNum) {
+                            return;
+                        }
+                        onChange?.({
+                            pageSize,
+                            pageNum,
+                            current: Math.min(current + 1, pageNum),
+                        });
+                    } },
+                    Boolean(nextFieldText) && (React.createElement("span", { className: "btn-text" }, nextFieldText)),
+                    iconRender('next'))));
+        }
+        const nextItem = renderNextField && renderNextField({ current, pageSize, pageNum });
+        return React.createElement("div", { className: nextFieldCls }, nextItem);
+    };
+    const prefix = `${prefixCls}-pagination`;
+    return !(hideOnOnePage && pageNum === 1) ? (React.createElement("div", { ref: domRef, className: cls(prefix, system, {
+            [`${prefix}-simple`]: type === 'none',
+        }, className), style: style },
+        prevRender(prefix),
+        React.createElement("div", { className: `${prefix}-item` },
+            React.createElement("span", { className: `${prefix}-item-active` }, current),
+            " / ",
+            pageNum),
+        nextRender(prefix))) : (React.createElement("div", { className: cls(prefix, className) }));
+});
+export default Pagination;