@arco-design/mobile-react 2.31.6 → 2.32.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,198 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-search-bar {
+    &-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        .use-var(padding, search-bar-padding);
+        .use-var(background-color, search-bar-background-color);
+    }
+    &-square {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-square-shape-border-radius);
+        }
+    }
+    &-round {
+        .@{prefix}-search-bar-wrap {
+            .use-var(border-radius, search-bar-round-shape-border-radius);
+        }
+    }
+    &-wrap {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        .use-var(height, search-bar-input-wrapper-height);
+        .use-var(font-size, search-bar-input-wrapper-font-size);
+        .use-var(padding, search-bar-input-wrapper-padding);
+        .use-var(background-color, search-bar-input-wrapper-background-color);
+    }
+    &-input {
+        flex: 1;
+        background-color: transparent;
+        .use-var(color, font-color);
+        .use-var(height, search-bar-input-height);
+        .use-var(caret-color, search-bar-input-caret-color);
+        &-left {
+            .set-value-with-rtl(text-align, left);
+        }
+        &-right {
+            .set-value-with-rtl(text-align, right);
+        }
+        &-center {
+            text-align: center;
+        }
+
+        &::placeholder {
+            .use-var(color, search-bar-input-placeholder-color);
+        }
+
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+
+    &-prefix,
+    &-suffix,
+    &-clear {
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+
+    &-prefix {
+        .use-var-with-rtl(margin-right, search-bar-prefix-margin-right);
+    }
+
+    &-clear {
+        .use-var(color, search-bar-clear-icon-color);
+        .use-var(font-size, search-bar-clear-icon-font-size);
+        .use-var-with-rtl(padding-left, search-bar-clear-icon-padding-left);
+    }
+
+    &-search-icon {
+        .use-var(color, search-bar-search-icon-color);
+        .use-var(font-size, search-bar-search-icon-font-size);
+    }
+
+    &-cancel-btn {
+        .use-var-with-rtl(margin-left, search-bar-cancel-btn-margin-left);
+        .use-var(color, search-bar-cancel-btn-color);
+        .use-var(font-size, search-bar-cancel-btn-font-size);
+    }
+
+    &-association {
+        position: absolute;
+        left: 0;
+        right: 0;
+        .use-var(background-color, search-bar-association-background-color);
+        top: 100%;
+        display: none;
+
+        &-visible {
+            display: block;
+        }
+
+        &-item {
+            .use-var(height, search-bar-association-item-height);
+            display: flex;
+            align-items: center;
+            position: relative;
+            .use-var(color, search-bar-association-item-color);
+            .use-var(padding, search-bar-association-item-padding);
+            .use-var(font-size, search-bar-association-item-font-size);
+
+            &:not(:last-child) {
+                .onepx-border-var(bottom, line-color);
+            }
+
+            &-highlight {
+                .use-var(color, search-bar-association-item-highlight-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}-search-bar {
+    &-container {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-search-bar-background-color);
+      }
+    }
+    &-wrap {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-search-bar-input-wrapper-background-color);
+      }
+    }
+    &-input {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+        .use-var(caret-color, dark-search-bar-input-caret-color);
+      }
+      &::placeholder {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-search-bar-input-placeholder-color);
+        }
+      }
+    }
+    &-clear {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-search-bar-clear-icon-color);
+      }
+    }
+    &-search-icon {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-search-bar-search-icon-color);
+      }
+    }
+    &-cancel-btn {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-search-bar-cancel-btn-color);
+      }
+    }
+    &-association {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-search-bar-association-background-color);
+      }
+      &-item {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-search-bar-association-item-color);
+        }
+        &:not(:last-child) {
+          @{arco-dark-mode-selector} & {
+            .onepx-border-var(bottom, dark-line-color);
+          }
+        }
+        &-highlight {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-search-bar-association-item-highlight-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

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

@@ -0,0 +1,163 @@
+import { CSSProperties, ReactNode } from 'react';
+import { InputProps } from '../input/index';
+export declare type SearchBarShape = 'square' | 'round';
+export declare type SearchAssociationShowType = 'focus' | 'value' | 'default' | 'always';
+export declare type SearchAssociationHighlightMode = 'prefix' | 'contain' | 'none' | ((content: string, keyword: string, defaultHighlightClassName: string) => ReactNode);
+export interface SearchAssociationBaseItem {
+    /**
+     * 基础内容
+     * @en basic content
+     */
+    content: string;
+}
+export declare type SearchAssociationItem<ExtraData = Record<string, any>> = SearchAssociationBaseItem & ExtraData;
+export interface SearchBarAssociationProps<Data = Record<string, any>> {
+    /**
+     * 前缀class名
+     * @en prefix class
+     */
+    prefixCls: string;
+    /**
+     * 搜索关键字
+     * @en search value
+     */
+    keyword: string;
+    /**
+     * 是否显示搜索联想框
+     * @en Whether to show the search prediction box
+     */
+    visible: boolean;
+    /**
+     * 每一项搜索内容
+     * @en every search
+     */
+    associationItems?: SearchAssociationItem<Data>[];
+    /**
+     * 搜索结果高亮模式，可以是内置的两种模式，或者一个自定义的高亮函数(接受选项内容content、搜索关键字keyword、默认的高亮class，返回一个ReactNode) - prefix 高亮最长前缀匹配字符串 - contain 高亮所有搜索关键字 - none 关闭高亮
+     * @en Search result highlighting mode, which can be two built-in modes, or a custom highlighting function(Accept option content content, search keyword keyword, default highlight class, return a ReactNode) - "prefix" to highlight the longest prefix matching string - "contain" to highlight all search keywords - "none" to turn off highlighting
+     * @default "none"
+     */
+    highlightMode?: SearchAssociationHighlightMode;
+    /**
+     * 要为高亮结果添加的样式，仅非自定高亮模式下生效
+     * @en The style to be added to the highlighted result, only available in non-custom highlight mode
+     */
+    highlightStyle?: CSSProperties;
+    /**
+     * 要为高亮结果添加的class，仅非自定义高亮模式下生效
+     * @en The class to be added to the highlighting result, only valid in non-custom highlighting mode
+     */
+    highlightClassName?: string;
+    /**
+     * 右侧取消按钮的点击回调
+     * @en Right cancel button click callback
+     */
+    onCancel?: () => void;
+    /**
+     * 每行搜索结果的点击回调
+     * @en Click callback for each row of search results
+     */
+    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number) => void;
+    /**
+     * 搜索联想框整体被点击的回调
+     * @en The callback for the overall click of the search association box
+     */
+    onAssociationClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * 自定义渲染每行搜索结果
+     * @en Custom rendering of each row of search results
+     */
+    renderAssociationItem?: (item: SearchAssociationItem<Data>, index: number, node: ReactNode) => ReactNode;
+    /**
+     * 自定义渲染搜索联想框整体内容
+     * @en Customize the rendering of the overall content of the search association box
+     */
+    renderAssociation?: (Content: ReactNode) => ReactNode;
+}
+export interface SearchBarProps<Data = Record<string, any>> extends Omit<SearchBarAssociationProps<Data>, 'keyword' | 'visible' | 'prefixCls'>, Omit<InputProps, 'label' | 'border' | 'required'> {
+    /**
+     * 输入框形状
+     * @en input box shape
+     * @default "square"
+     */
+    shape?: SearchBarShape;
+    /**
+     * 搜索栏内容位置
+     * @en Search bar content location
+     * @default "left"
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * 搜索栏头部插入的内容
+     * @en Content inserted in the header of the search box
+     */
+    prepend?: ReactNode | ((focusing: boolean, value: string) => ReactNode);
+    /**
+     * 搜索栏尾部要插入的内容, 默认在搜索栏激活态时会插入一个按钮
+     * @en The content to be inserted at the end of the search box, a button will be inserted by default when the search box is activated
+     * @default (focusing) => focusing ? (<span>取消</span>) : null
+     */
+    append?: ReactNode | ((focusing: boolean, value: string) => ReactNode);
+    /**
+     * 搜索栏最右侧要插入的按钮，默认情况下插入一个取消按钮
+     * @en The button to insert on the far right side of the search box, a cancel button is inserted by default
+     * @default <CancelButton />
+     */
+    actionButton?: ReactNode;
+    /**
+     * 是否开启搜索联想框功能
+     * @en Whether to enable the search association box function
+     * @default false
+     */
+    enableAssociation?: boolean;
+    /**
+     * （受控模式）搜索联想框的可见态
+     * @en (Controlled mode) Visible state of search association box
+     */
+    associationVisible?: boolean;
+    /**
+     * 非受控模式下，搜索联想框的展示时机 - focus 仅聚焦时 - value 搜索词不为空 - default 搜索栏被聚焦或者搜索词不为空 - always 一直展示
+     * @en In uncontrolled mode, the display timing of the search association box - "focus" only when focused - "value" search term is not empty - "default" search bar is focused or search term is not empty - "always" always displayed
+     * @default "default"
+     */
+    associationShowType?: SearchAssociationShowType;
+}
+export interface SearchBarRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生输入框 DOM
+     * @en Native input box DOM
+     */
+    input: HTMLInputElement | null;
+    /**
+     * 仅非受控模式下生效，手动控制搜索联想框的显隐，如果没有传入值则默认将显隐状态反转
+     * @en It only takes effect in uncontrolled mode. Manually control the display and hide of the search association box. If there is no incoming value, the display and hidden state will be reversed by default.
+     */
+    toggleAssociation: (newVisible?: boolean) => void;
+}
+export interface SearchBarAssociationHighlightConfig {
+    /**
+     * 要为高亮结果添加的样式，仅非自定高亮模式下生效
+     * @en The style to be added to the highlighted result, only available in non-custom highlight mode
+     */
+    highlightStyle?: CSSProperties;
+    /**
+     * 要为高亮结果添加的class，仅非自定义高亮模式下生效
+     * @en The class to be added to the highlighting result, only valid in non-custom highlighting mode
+     */
+    highlightClassName?: string;
+    /**
+     * 搜索关键字
+     * @en search for the keyword
+     */
+    keyword: string;
+    /**
+     * 搜索候选项的内容
+     * @en Contents of search candidates
+     */
+    content: string;
+}

package/esnext/search-bar/type.js

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

package/esnext/show-monitor/index.d.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+export interface ShowMonitorProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 滚动视口选择器
+     * @en Scroll viewport selector
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | null;
+    /**
+     * 节流粒度(ms)
+     * @en Throttle granularity(ms)
+     * @default 300
+     */
+    throttle?: number;
+    /**
+     * 是否监听 resize
+     * @en Whether to monitor resize
+     * @default true
+     */
+    listenResize?: boolean;
+    /**
+     * 是否监听 scroll
+     * @en Whether to monitor scroll
+     * @default true
+     */
+    listenScroll?: boolean;
+    /**
+     * 只监听变化一次，为 true 时仅在进入视口时触发一次 onVisibleChange
+     * @en Only listen for changes once, if true, only trigger onVisibleChange once when entering the viewport
+     * @default false
+     */
+    once?: boolean;
+    /**
+     * 是否为局部滚动
+     * @en Whether it is a local scroll
+     * @default false
+     */
+    overflow?: boolean;
+    /**
+     * 元素进入视口区域触发回调比例，[0-1]
+     * @en Threshold of callback triggered when element enters viewport area, [0-1]
+     * @default 0
+     */
+    threshold?: number;
+    /**
+     * 预加载提前量 [offsetTop, offsetRight, offsetBottom, offsetLeft]。
+     * 如果类型为 number，等效为[number, number, number, number]；
+     * 如果类型为 [number1, number2], 等效为[number1, 0, number2, 0]；
+     * 支持 Intersection Observer 的浏览器需要搭配 getScrollContainer, 设置父级容器
+     * @en Preload advance amount [offsetTop, offsetRight, offsetBottom, offsetLeft].
+     * @en If the type is number, it is equivalent to [number, number, number, number];
+     * @en If the type is [number1, number2], it is equivalent to [number1, 0, number2, 0];
+     * @en Browsers that support Intersection Observer need to use getScrollContainer to set the parent container
+     * @default 0
+     */
+    offset?: number | [number, number] | [number, number, number, number];
+    /**
+     * 子节点
+     * @en Children nodes
+     */
+    children: React.ReactNode;
+    /**
+     * 是否禁用监听
+     * @en Whether to disable monitoring
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 进入或离开视口的回调函数
+     * @en Callback for entering or leaving the viewport
+     */
+    onVisibleChange: (visible: boolean, node: HTMLDivElement) => void;
+    /**
+     * 点击组件的回调事件
+     * @en Callback when clicked
+     */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface ShowMonitorRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 忽略元素前后状态，手动检查元素是否在视口内，触发onVisibleChange回调函数
+     * @en Ignore the state of the element before and after, manually check whether the element is in the viewport, trigger the onVisibleChange callback function
+     */
+    checkVisible: () => boolean;
+    /**
+     * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+     * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+     */
+    flushVisibleStatus: () => void;
+}
+/**
+ * 通过滚动事件监测 children 是否进入视口或离开视口。
+ * @en Use scroll events to monitor whether children enter or leave the viewport.
+ * @type 其他
+ * @type_en Others
+ * @name 滚动视口监听
+ * @name_en ShowMonitor
+ */
+declare const ShowMonitor: React.ForwardRefExoticComponent<ShowMonitorProps & React.RefAttributes<ShowMonitorRef>>;
+export default ShowMonitor;