@arco-design/mobile-react 2.20.0 → 2.21.0

package/cjs/search-bar/style/css/index.css

@@ -0,0 +1,148 @@
+.arco-search-bar-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: relative;
+  padding:  0.32rem ;
+  background-color:  #FFFFFF ;
+}
+.arco-search-bar-square .arco-search-bar-wrap {
+  border-radius:  0.04rem ;
+}
+.arco-search-bar-round .arco-search-bar-wrap {
+  border-radius:  199.98rem ;
+}
+.arco-search-bar-wrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  height:  0.72rem ;
+  font-size:  0.28rem ;
+  padding:  0.16rem 0.28rem ;
+  background-color:  #F2F3F5 ;
+}
+.arco-search-bar-input {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  background-color: transparent;
+  height:  0.4rem ;
+  caret-color:  #165dff ;
+}
+.arco-search-bar-input-left {
+  text-align: left;
+}
+.arco-search-bar-input-right {
+  text-align: right;
+}
+.arco-search-bar-input-center {
+  text-align: center;
+}
+.arco-search-bar-input::-webkit-input-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::-webkit-search-cancel-button {
+  display: none;
+}
+.arco-search-bar-prefix,
+.arco-search-bar-suffix,
+.arco-search-bar-clear {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-search-bar-prefix {
+  margin-right:  0.18rem ;
+}
+.arco-search-bar-clear {
+  color:  #C9CDD4 ;
+}
+.arco-search-bar-search-icon {
+  color:  #86909C ;
+  font-size:  0.32rem ;
+}
+.arco-search-bar-cancel-btn {
+  margin-left:  0.32rem ;
+  color:  #165dff ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color:  #FFFFFF ;
+  top: 100%;
+  display: none;
+}
+.arco-search-bar-association-visible {
+  display: block;
+}
+.arco-search-bar-association-item {
+  height:  1.04rem ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: relative;
+  color:  #1d2129 ;
+  padding:  0.32rem ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-search-bar-association-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-search-bar-association-item-highlight {
+  color:  #165dff ;
+}

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("./index.css");

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("./index.less");

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

@@ -0,0 +1,111 @@
+@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(height, search-bar-input-height);
+    .use-var(caret-color, search-bar-input-caret-color);
+    &-left {
+      text-align: left;
+    }
+    &-right {
+      text-align: right;
+    }
+    &-center {
+      text-align: center;
+    }
+
+    &::placeholder {
+      .use-var(color, search-bar-input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+
+  &-prefix,
+  &-suffix,
+  &-clear {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+
+  &-prefix {
+    .use-var(margin-right, search-bar-prefix-margin-right);
+  }
+
+  &-clear {
+    .use-var(color, search-bar-clear-icon-color);
+  }
+
+  &-search-icon {
+    .use-var(color, search-bar-search-icon-color);
+    .use-var(font-size, search-bar-search-icon-font-size);
+  }
+
+  &-cancel-btn {
+    .use-var(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)
+      }
+    }
+  }
+}

package/cjs/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/cjs/search-bar/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/slider/index.d.ts

@@ -143,7 +143,7 @@ export interface SliderRef {
  * @en Slide input component, displays the current value and optional range.
  * @name 滑动输入条
  * @name_en Slider
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;

package/cjs/slider/index.js

@@ -173,7 +173,7 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
  * @en Slide input component, displays the current value and optional range.
  * @name 滑动输入条
  * @name_en Slider
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 

package/cjs/steps/index.d.ts

@@ -13,7 +13,7 @@ declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAt
  * @en Display the progress of a task, or guide users to complete a complex task.
  * @name 步骤条
  * @name_en Steps
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 export default _default;

package/cjs/steps/index.js

@@ -114,7 +114,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  * @en Display the progress of a task, or guide users to complete a complex task.
  * @name 步骤条
  * @name_en Steps
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 

package/cjs/sticky/index.d.ts

@@ -118,7 +118,7 @@ export interface StickyProps {
      */
     getContainer?: () => HTMLElement | string;
     /**
-     * 指定滚动容器，如果指定该值则relative属性始终认定为false；如果返回string则使用querySelector选取容器
+     * 指定滚动容器；如果返回string则使用querySelector选取容器
      * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
      * @default () => window
      */

package/cjs/style.d.ts

@@ -42,8 +42,10 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './slider/style';
+import './search-bar/style';
 import './steps/style';
 import './sticky/style';
+import './swipe-action/style';
 import './swipe-load/style';
 import './tab-bar/style';
 import './tag/style';

package/cjs/style.js

@@ -88,10 +88,14 @@ require("./rate/style");
 
 require("./slider/style");
 
+require("./search-bar/style");
+
 require("./steps/style");
 
 require("./sticky/style");
 
+require("./swipe-action/style");
+
 require("./swipe-load/style");
 
 require("./tab-bar/style");

package/cjs/swipe-action/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+#demo-swipe-action .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  overflow: hidden;
+}

package/cjs/swipe-action/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-swipe-action {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        overflow: hidden;
+    }
+}

package/cjs/swipe-action/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SwipeActionProps, SwipeActionRef } from './type';
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+declare const SwipeAction: React.ForwardRefExoticComponent<SwipeActionProps & React.RefAttributes<SwipeActionRef>>;
+export default SwipeAction;