@arco-design/mobile-react 2.19.1 → 2.21.0

package/cjs/input/index.js

@@ -22,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 输入框组件，支持添加前后缀。
  * @en The input box, supports adding prefixes and suffixes.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 输入框
  * @name_en Input

package/cjs/input/props.d.ts

@@ -80,12 +80,12 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 输入框头部内容，在输入框外部
      * @en The content of the header of the input box, outside the input box
      */
-    prepend?: React.ReactNode;
+    prepend?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
     /**
      * 输入框尾部内容，在输入框外部
      * @en The content at the end of the input box, outside the input box
      */
-    append?: React.ReactNode;
+    append?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
     /**
      * 在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效
      * @en Blur before focusing, that is, the keyboard will be re-bounced when switching between different inputs. It is often used to reload the keyboard when the input type is switched. It is valid on Android.
@@ -102,6 +102,12 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * @default "focus"
      */
     clearShowType?: 'focus' | 'value' | 'always';
+    /**
+     * 在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件
+     * @en Whether to block the onBlur and onFocus events generated when the clear button is clicked in focus mode
+     * @default true
+     */
+    preventEventWhenClearing?: boolean;
     /**
      * 清除按钮类型，也可自定义
      * @en Clear button type, also customizable

package/cjs/nav-bar/index.js

@@ -15,6 +15,8 @@ var _contextProvider = require("../context-provider");
 
 var _backIcon = _interopRequireDefault(require("./back-icon"));
 
+var _helpers = require("../_helpers");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -66,8 +68,10 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       customStyle = _useState2[0],
       setCustomStyle = _useState2[1];
 
+  var system = (0, _helpers.useSystem)();
+
   var onElementScroll = function onElementScroll(curOffset) {
-    setScrollToggleHide(curOffset <= showOffset);
+    setScrollToggleHide(curOffset < showOffset);
 
     if (getComputedStyleByScroll) {
       var cstyle = getComputedStyleByScroll(curOffset);
@@ -93,6 +97,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useEffect)(function () {
     var needBind = showOffset || getComputedStyleByScroll;
     var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
+    handleEleScroll();
 
     if (needBind && container) {
       container.addEventListener('scroll', handleEleScroll, false);
@@ -140,7 +145,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         background: relBackground
       } : {})
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(className, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
+      className: (0, _mobileUtils.cls)(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
       style: (0, _extends2.default)({
         paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
       }, customStyle)

package/cjs/notice-bar/index.d.ts

@@ -98,7 +98,7 @@ export interface NoticeBarRef {
 /**
  * 可自定义换行或滚动效果，支持循环滚动。
  * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 通知栏
  * @name_en NoticeBar

package/cjs/notice-bar/index.js

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 可自定义换行或滚动效果，支持循环滚动。
  * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 通知栏
  * @name_en NoticeBar

package/cjs/picker/index.d.ts

@@ -38,7 +38,7 @@ export interface PickerRef {
 /**
  * 选择器组件，形式是弹起的浮层。
  * @en The selector component, in the form of a popup layer.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器
  * @name_en Picker

package/cjs/picker/index.js

@@ -82,7 +82,7 @@ var getInitialValue = function getInitialValue(value, data, cascade) {
 /**
  * 选择器组件，形式是弹起的浮层。
  * @en The selector component, in the form of a popup layer.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器
  * @name_en Picker

package/cjs/picker-view/index.d.ts

@@ -45,7 +45,7 @@ export interface PickerViewRef {
 /**
  * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
  * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器视图
  * @name_en PickerView

package/cjs/picker-view/index.js

@@ -46,7 +46,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 选择器视图组件，不含弹窗，方便使用方灵活定制选择器。
  * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 选择器视图
  * @name_en PickerView

package/cjs/popover/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Partial<import
  * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
  * @name 气泡卡片
  * @name_en Popover
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 export default _default;

package/cjs/popover/index.js

@@ -29,7 +29,7 @@ var Menu = (0, _menu.componentGenerator)(_popover.Popover);
  * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
  * @name 气泡卡片
  * @name_en Popover
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 

package/cjs/popup-swiper/index.js

@@ -139,13 +139,14 @@ var PopupSwiper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var movingFromDirec = allowedDirections.includes(fromDirec) ? fromDirec : '';
     var disDirection = exitDirection || movingFromDirec;
     var direcValue = ['top', 'bottom'].includes(disDirection) ? 'Y' : 'X';
+    var direcRatio = ['bottom', 'right'].includes(disDirection) ? 1 : -1;
 
     switch (movingFromDirec) {
       case 'top':
       case 'bottom':
         setDistance({
           direction: direcValue,
-          value: Math[movingFromDirec === 'top' ? 'min' : 'max'](0, disY)
+          value: Math.abs(disY) * direcRatio
         });
         break;
 
@@ -153,7 +154,7 @@ var PopupSwiper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'right':
         setDistance({
           direction: direcValue,
-          value: Math[movingFromDirec === 'left' ? 'min' : 'max'](0, disX)
+          value: Math.abs(disX) * direcRatio
         });
         break;
 

package/cjs/radio/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
  * @name 单选框
  * @name_en Radio
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 export default _default;

package/cjs/radio/index.js

@@ -29,7 +29,7 @@ var Group = (0, _group.componentGenerator)(_radio.Radio);
  * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
  * @name 单选框
  * @name_en Radio
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 

package/cjs/rate/index.d.ts

@@ -97,7 +97,7 @@ export interface RateRef {
 /**
  * 评分组件，支持受控模式
  * @en Rate component, supports controlled mode
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 评分
  * @name_en Rate

package/cjs/rate/index.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * 评分组件，支持受控模式
  * @en Rate component, supports controlled mode
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 评分
  * @name_en Rate

package/cjs/search-bar/association.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SearchBarAssociationProps } from './type';
+export declare function SearchBarAssociation<Data>(props: SearchBarAssociationProps<Data>): JSX.Element;

package/cjs/search-bar/association.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.SearchBarAssociation = SearchBarAssociation;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _highlight = require("./highlight");
+
+function SearchBarAssociation(props) {
+  var _cls;
+
+  var prefixCls = props.prefixCls,
+      _props$associationIte = props.associationItems,
+      associationItems = _props$associationIte === void 0 ? [] : _props$associationIte,
+      highlightClassName = props.highlightClassName,
+      _props$highlightMode = props.highlightMode,
+      highlightMode = _props$highlightMode === void 0 ? 'none' : _props$highlightMode,
+      highlightStyle = props.highlightStyle,
+      onAssociationClick = props.onAssociationClick,
+      onAssociationItemClick = props.onAssociationItemClick,
+      renderAssociation = props.renderAssociation,
+      renderAssociationItem = props.renderAssociationItem,
+      keyword = props.keyword,
+      visible = props.visible;
+  var searchBarAssociationPrefixCls = prefixCls + "-association";
+  var defaultHighlightClassName = searchBarAssociationPrefixCls + "-item-highlight";
+
+  var renderHighlightNode = function renderHighlightNode(content) {
+    if (!content || !keyword || highlightMode === 'none') {
+      return content;
+    }
+
+    var config = {
+      keyword: keyword,
+      content: content,
+      highlightClassName: highlightClassName || defaultHighlightClassName,
+      highlightStyle: highlightStyle
+    };
+
+    if (highlightMode === 'contain') {
+      return (0, _highlight.highlightWithContainMode)(config);
+    }
+
+    if (highlightMode === 'prefix') {
+      return (0, _highlight.highlightWithPrefixMode)(config);
+    }
+
+    return typeof highlightMode === 'function' ? highlightMode(content, keyword, defaultHighlightClassName) : content;
+  };
+
+  var renderItem = function renderItem(item, index) {
+    var itemContent = item.content;
+    var node = itemContent; // itemContent为string类型，并且开启高亮模式才去走渲染高亮内容的逻辑
+    // @en When `itemContent` is a string, and the highlight mode is turned on, the logic of rendering the highlighted content is performed
+
+    if (typeof itemContent === 'string' && highlightMode !== 'none') {
+      node = renderHighlightNode(itemContent);
+    }
+
+    if (renderAssociationItem) {
+      node = renderAssociationItem(item, index, node);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: searchBarAssociationPrefixCls + "-item",
+      onClick: function onClick() {
+        return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
+      }
+    }, node);
+  };
+
+  var renderContent = function renderContent() {
+    var associationContent = associationItems.map(renderItem);
+
+    if (renderAssociation) {
+      return renderAssociation(associationContent);
+    }
+
+    return associationContent;
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(searchBarAssociationPrefixCls, (_cls = {}, _cls[searchBarAssociationPrefixCls + "-visible"] = visible, _cls)),
+    onClick: onAssociationClick
+  }, renderContent());
+}

package/cjs/search-bar/cancel-button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CancelButtonProps {
+    className: string;
+    onCancel?: () => void;
+    focusing: boolean;
+    currentInputValue: string;
+    text?: string;
+}
+export declare function CancelButton(props: CancelButtonProps): JSX.Element | null;
+export {};

package/cjs/search-bar/cancel-button.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.CancelButton = CancelButton;
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function CancelButton(props) {
+  var className = props.className,
+      onCancel = props.onCancel,
+      focusing = props.focusing,
+      currentInputValue = props.currentInputValue,
+      text = props.text;
+
+  var _useState = (0, _react.useState)(focusing || Boolean(currentInputValue)),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var handleClick = function handleClick() {
+    onCancel == null ? void 0 : onCancel(); // 如果不延迟，在聚焦切输入框有值的情况下，点击取消按钮会造成闪烁
+    // @en If there is no delay, when the focus cut input box has a value, clicking the cancel button will cause flickering
+
+    (0, _mobileUtils.nextTick)(function () {
+      setVisible(false);
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    setVisible(focusing || Boolean(currentInputValue));
+  }, [focusing, currentInputValue]);
+  return visible ? /*#__PURE__*/_react.default.createElement("span", {
+    className: className,
+    onClick: handleClick
+  }, text) : null;
+}

package/cjs/search-bar/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+#demo-search-bar .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  font-size: 0.32rem;
+}

package/cjs/search-bar/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-search-bar {
+  .arcodesign-mobile-demo-content {
+    padding: 0;
+    background: transparent;
+    .rem(font-size, 16)
+  }
+}

package/cjs/search-bar/highlight.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchBarAssociationHighlightConfig } from './type';
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+export declare function highlightWithContainMode(config: SearchBarAssociationHighlightConfig): React.ReactNode[];
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+export declare function highlightWithPrefixMode(config: SearchBarAssociationHighlightConfig): string | (string | JSX.Element)[];

package/cjs/search-bar/highlight.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.highlightWithContainMode = highlightWithContainMode;
+exports.highlightWithPrefixMode = highlightWithPrefixMode;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _excluded = ["content", "keyword"];
+
+function createHighlightNode(config, index) {
+  var keyword = config.keyword,
+      highlightClassName = config.highlightClassName,
+      highlightStyle = config.highlightStyle;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: highlightClassName,
+    style: highlightStyle,
+    key: index
+  }, keyword);
+}
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+
+
+function highlightWithContainMode(config) {
+  var _config$content = config.content,
+      content = _config$content === void 0 ? '' : _config$content,
+      _config$keyword = config.keyword,
+      keyword = _config$keyword === void 0 ? '' : _config$keyword; // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
+
+  var splitContent = content.split(keyword); // 再将高亮后的keyword节点，插空填入数组
+
+  var highlightResult = splitContent.reduce(function (prev, word, index) {
+    prev.push(word);
+
+    if (index !== splitContent.length - 1) {
+      prev.push(createHighlightNode(config, index));
+    }
+
+    return prev;
+  }, []);
+  return highlightResult;
+}
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+
+
+function highlightWithPrefixMode(config) {
+  var _config$content2 = config.content,
+      content = _config$content2 === void 0 ? '' : _config$content2,
+      _config$keyword2 = config.keyword,
+      keyword = _config$keyword2 === void 0 ? '' : _config$keyword2,
+      otherConfig = (0, _objectWithoutPropertiesLoose2.default)(config, _excluded);
+  var splitIndex = -1;
+
+  for (var i = 0; i < keyword.length; i++) {
+    if (i >= content.length || content[i] !== keyword[i]) {
+      break;
+    }
+
+    splitIndex = i;
+  }
+
+  return splitIndex > -1 ? [createHighlightNode((0, _extends2.default)({}, otherConfig, {
+    keyword: content.substring(0, splitIndex + 1)
+  }), 0), content.substring(splitIndex + 1)] : content;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchAssociationBaseItem, SearchBarProps, SearchBarRef } from './type';
+export { SearchBarProps, SearchBarRef, SearchAssociationHighlightMode, SearchAssociationItem, SearchAssociationShowType, SearchBarShape, } from './type';
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps<SearchAssociationBaseItem> & React.RefAttributes<SearchBarRef>>;
+export default SearchBar;