@arco-design/mobile-react 2.35.2 → 2.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.d.ts +10 -2
  5. package/cjs/_helpers/hooks.js +12 -5
  6. package/cjs/date-picker/index.js +218 -18
  7. package/cjs/date-picker/style/css/index.css +42 -0
  8. package/cjs/date-picker/style/index.less +38 -1
  9. package/cjs/date-picker/type.d.ts +22 -6
  10. package/cjs/form/linked-container.d.ts +2 -2
  11. package/cjs/form/linked-container.js +5 -1
  12. package/cjs/picker/index.js +3 -2
  13. package/cjs/picker/type.d.ts +5 -0
  14. package/cjs/search-bar/association.js +2 -2
  15. package/cjs/search-bar/type.d.ts +1 -1
  16. package/cjs/stepper/hooks/useValue.js +3 -1
  17. package/cjs/tabs/index.js +1 -1
  18. package/cjs/tabs/type.d.ts +2 -2
  19. package/dist/index.js +272 -38
  20. package/dist/index.min.js +4 -4
  21. package/dist/style.css +23 -0
  22. package/dist/style.min.css +1 -1
  23. package/esm/_helpers/hooks.d.ts +10 -2
  24. package/esm/_helpers/hooks.js +12 -5
  25. package/esm/date-picker/index.js +218 -18
  26. package/esm/date-picker/style/css/index.css +42 -0
  27. package/esm/date-picker/style/index.less +38 -1
  28. package/esm/date-picker/type.d.ts +22 -6
  29. package/esm/form/linked-container.d.ts +2 -2
  30. package/esm/form/linked-container.js +5 -1
  31. package/esm/picker/index.js +3 -2
  32. package/esm/picker/type.d.ts +5 -0
  33. package/esm/search-bar/association.js +2 -2
  34. package/esm/search-bar/type.d.ts +1 -1
  35. package/esm/stepper/hooks/useValue.js +1 -0
  36. package/esm/tabs/index.js +1 -1
  37. package/esm/tabs/type.d.ts +2 -2
  38. package/esnext/_helpers/hooks.d.ts +10 -2
  39. package/esnext/_helpers/hooks.js +12 -5
  40. package/esnext/date-picker/index.js +167 -10
  41. package/esnext/date-picker/style/css/index.css +42 -0
  42. package/esnext/date-picker/style/index.less +38 -1
  43. package/esnext/date-picker/type.d.ts +22 -6
  44. package/esnext/form/linked-container.d.ts +2 -2
  45. package/esnext/form/linked-container.js +7 -2
  46. package/esnext/picker/index.js +2 -1
  47. package/esnext/picker/type.d.ts +5 -0
  48. package/esnext/search-bar/association.js +1 -1
  49. package/esnext/search-bar/type.d.ts +1 -1
  50. package/esnext/stepper/hooks/useValue.js +1 -0
  51. package/esnext/tabs/index.js +1 -1
  52. package/esnext/tabs/type.d.ts +2 -2
  53. package/package.json +3 -3
  54. package/tokens/app/arcodesign/default/css-variables.less +10 -0
  55. package/tokens/app/arcodesign/default/index.d.ts +10 -0
  56. package/tokens/app/arcodesign/default/index.js +11 -1
  57. package/tokens/app/arcodesign/default/index.json +108 -0
  58. package/tokens/app/arcodesign/default/index.less +10 -0
  59. package/umd/_helpers/hooks.d.ts +10 -2
  60. package/umd/_helpers/hooks.js +12 -5
  61. package/umd/date-picker/index.js +218 -18
  62. package/umd/date-picker/style/css/index.css +42 -0
  63. package/umd/date-picker/style/index.less +38 -1
  64. package/umd/date-picker/type.d.ts +22 -6
  65. package/umd/form/linked-container.d.ts +2 -2
  66. package/umd/form/linked-container.js +5 -1
  67. package/umd/picker/index.js +3 -2
  68. package/umd/picker/type.d.ts +5 -0
  69. package/umd/search-bar/association.js +2 -2
  70. package/umd/search-bar/type.d.ts +1 -1
  71. package/umd/stepper/hooks/useValue.js +5 -5
  72. package/umd/tabs/index.js +1 -1
  73. package/umd/tabs/type.d.ts +2 -2
@@ -40,18 +40,18 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
40
40
  * 点击选中时执行的回调
41
41
  * @en Callback when clicking OK
42
42
  */
43
- onOk?: (timestamp: number, obj: IDateObj) => void;
43
+ onOk?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
44
44
  /**
45
45
  * 当前选中的时间,timestamp
46
46
  * @en The currently selected time, timestamp
47
47
  * @default Date.now()
48
48
  */
49
- currentTs?: number;
49
+ currentTs?: number | [number, number];
50
50
  /**
51
51
  * 选中后的回调
52
52
  * @en Callback when value is changed
53
53
  */
54
- onChange?: (timestamp: number, obj: IDateObj) => void;
54
+ onChange?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
55
55
  /**
56
56
  * 每列数据选择变化后的回调函数
57
57
  * @en The callback function after each column data selection changes
@@ -75,20 +75,31 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
75
75
  * @default 当前时间的前十年
76
76
  * @default_en 10 years ago from the current time
77
77
  */
78
- minTs?: number;
78
+ minTs?: number | {
79
+ startTs: number;
80
+ endTs: number;
81
+ };
79
82
  /**
80
83
  * 最大可选日期,timestamp
81
84
  * @en Maximum selectable date, timestamp
82
85
  * @default 当前时间的后十年
83
86
  * @default_en Next decade from current time
84
87
  */
85
- maxTs?: number;
88
+ maxTs?: number | {
89
+ startTs: number;
90
+ endTs: number;
91
+ };
86
92
  /**
87
93
  * 是否使用 UTC 时间
88
94
  * @en Whether to use UTC
89
95
  * @default false
90
96
  */
91
97
  useUTC?: boolean;
98
+ /**
99
+ * 日期时间范围选择展示格式
100
+ * @en Time range picker display format
101
+ */
102
+ rangeItemFormat?: string;
92
103
  /**
93
104
  * 各可选项展示的格式化方法,参数type为ItemTypes,参数value为当前行的值,返回展示的文字
94
105
  * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
@@ -106,9 +117,14 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
106
117
  * @en Selector list item intervention to insert custom options.
107
118
  */
108
119
  columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
120
+ /**
121
+ * 自定义分隔符
122
+ * @en Defined separator area
123
+ */
124
+ renderSeparator?: () => React.ReactNode;
109
125
  /**
110
126
  * 将选择器的展现隐藏状态及选中值的展示与某个容器关联,传入后将同时渲染该容器和选择器组件,此时选择器组件的 visible 和 onHide 属性可不传,点击该容器会唤起选择器
111
127
  * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
112
128
  */
113
- renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
129
+ renderLinkedContainer?: (currentTs: number | [number, number] | undefined, itemTypes: ItemType[]) => ReactNode;
114
130
  }
@@ -2,7 +2,7 @@
2
2
  export declare function DefaultPickerLinkedContainer({ value }: {
3
3
  value: (string | number)[];
4
4
  }): JSX.Element;
5
- export declare function DefaultDatePickerLinkedContainer({ ts, types }: {
6
- ts: number;
5
+ export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
6
+ ts: number | [number, number];
7
7
  types: string[];
8
8
  }): JSX.Element;
@@ -50,7 +50,11 @@
50
50
 
51
51
  var className = prefixCls + "-form-picker-link-container";
52
52
  var dateTimeStr = (0, _react.useMemo)(function () {
53
- return formatDateTimeStr(ts, types);
53
+ if (typeof ts === 'number') {
54
+ return formatDateTimeStr(ts, types);
55
+ }
56
+
57
+ return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
54
58
  }, [ts, types]);
55
59
 
56
60
  function formatDateTimeStr(timestamp, itemTypes) {
@@ -36,7 +36,7 @@
36
36
  if (key in _exports && _exports[key] === _type[key]) return;
37
37
  _exports[key] = _type[key];
38
38
  });
39
- var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
39
+ var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer", "renderExtraHeader"];
40
40
 
41
41
  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); }
42
42
 
@@ -77,6 +77,7 @@
77
77
  _props$gestureOutOfCo = props.gestureOutOfControl,
78
78
  gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
79
79
  renderLinkedContainer = props.renderLinkedContainer,
80
+ renderExtraHeader = props.renderExtraHeader,
80
81
  otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
81
82
  var scrollValueRef = (0, _helpers.useLatestRef)(value);
82
83
  var domRef = (0, _react.useRef)(null);
@@ -223,7 +224,7 @@
223
224
  }, title), /*#__PURE__*/_react.default.createElement("div", {
224
225
  className: prefixCls + "-picker-header-btn right",
225
226
  onClick: handleConfirm
226
- }, okText || (locale == null ? void 0 : locale.Picker.okText))), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
227
+ }, okText || (locale == null ? void 0 : locale.Picker.okText))), renderExtraHeader && renderExtraHeader(), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
227
228
  ref: pickerViewRef,
228
229
  data: data,
229
230
  cascade: cascade,
@@ -128,4 +128,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
128
128
  * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
129
129
  */
130
130
  renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
131
+ /**
132
+ * 自定义头部扩展区域
133
+ * @en Define the area of extra header
134
+ */
135
+ renderExtraHeader?: () => ReactNode;
131
136
  }
@@ -77,8 +77,8 @@
77
77
  return /*#__PURE__*/_react.default.createElement("div", {
78
78
  key: index,
79
79
  className: searchBarAssociationPrefixCls + "-item",
80
- onClick: function onClick() {
81
- return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
80
+ onClick: function onClick(e) {
81
+ return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index, e);
82
82
  }
83
83
  }, node);
84
84
  };
@@ -57,7 +57,7 @@ export interface SearchBarAssociationProps<Data = Record<string, any>> {
57
57
  * 每行搜索结果的点击回调
58
58
  * @en Click callback for each row of search results
59
59
  */
60
- onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number) => void;
60
+ onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
61
61
  /**
62
62
  * 搜索联想框整体被点击的回调
63
63
  * @en The callback for the overall click of the search association box
@@ -1,16 +1,16 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "react"], factory);
3
+ define(["exports", "react", "es6-promise"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("react"));
5
+ factory(exports, require("react"), require("es6-promise"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.react);
10
+ factory(mod.exports, global.react, global.es6Promise);
11
11
  global.useValue = mod.exports;
12
12
  }
13
- })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
13
+ })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _es6Promise) {
14
14
  "use strict";
15
15
 
16
16
  _exports.__esModule = true;
@@ -32,7 +32,7 @@
32
32
  var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
33
33
 
34
34
  if (formatter) {
35
- new Promise(function (resolve) {
35
+ new _es6Promise.Promise(function (resolve) {
36
36
  resolve(formatter(Number(tempValue)));
37
37
  }).then(function (result) {
38
38
  var res = Math.max(min, Math.min(max, result));
package/umd/tabs/index.js CHANGED
@@ -439,7 +439,7 @@
439
439
  width = _getOffset.width,
440
440
  height = _getOffset.height;
441
441
 
442
- cellRef.current && cellRef.current.resetUnderlineStyle();
442
+ cellRef.current && cellRef.current.updateLayout();
443
443
  setWrapWidth(width || ((_domRef$current = domRef.current) == null ? void 0 : _domRef$current.offsetWidth) || 0);
444
444
  setWrapHeight(height || ((_domRef$current2 = domRef.current) == null ? void 0 : _domRef$current2.offsetHeight) || 0);
445
445
  paneRef.current && paneRef.current.setCurrentHeight();
@@ -561,8 +561,8 @@ export interface TabCellRef {
561
561
  */
562
562
  setCaterpillarAnimate: (ratio?: number) => void;
563
563
  /**
564
- * 重新计算下划线样式
565
- * @en Recalculate underline style
564
+ * 重新计算下划线样式(仅重算位置,如果 tab cell DOM 被人为改变,请调用 updateLayout)
565
+ * @en Recalculate underline style (only recalculate position, if the tab cell DOM is changed manually, please call updateLayout)
566
566
  */
567
567
  resetUnderlineStyle: () => void;
568
568
  /**