@trionesdev/antd-taro-react 0.0.2-beta.13 → 0.0.2-beta.14

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.
@@ -7,8 +7,9 @@ export type DatePickerPops = {
7
7
  onClose?: () => void;
8
8
  title?: React.ReactNode;
9
9
  mode?: Mode;
10
- format?: string;
11
- showTime?: boolean;
10
+ showTime?: boolean | {
11
+ format?: string;
12
+ };
12
13
  value?: dayjs.Dayjs;
13
14
  onOk?: (value: dayjs.Dayjs) => void;
14
15
  minDate?: dayjs.Dayjs;
@@ -1,4 +1,3 @@
1
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
1
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
2
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
3
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,6 +9,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
10
9
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
11
10
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
11
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
13
13
  import { useEffect, useMemo, useState } from "react";
14
14
  import Popup from "../Popup";
15
15
  import PickerView from "../PickerView";
@@ -25,19 +25,20 @@ export var DatePicker = function DatePicker(_ref) {
25
25
  title = _ref.title,
26
26
  _ref$mode = _ref.mode,
27
27
  mode = _ref$mode === void 0 ? 'date' : _ref$mode,
28
- format = _ref.format,
29
28
  showTime = _ref.showTime,
30
29
  value = _ref.value,
31
30
  onOk = _ref.onOk,
32
31
  minDate = _ref.minDate,
33
32
  maxDate = _ref.maxDate;
34
- var cleanFormat = format === null || format === void 0 ? void 0 : format.replace(/\[([^\]]+)\]/g, '');
35
- var hasYear = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('Y');
36
- var hasMouth = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('M');
37
- var hasDate = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('D');
38
- var hasHour = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('H');
39
- var hasMinute = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('m');
40
- var hasSecond = cleanFormat === null || cleanFormat === void 0 ? void 0 : cleanFormat.includes('s');
33
+ var cleanTimeFormat = useMemo(function () {
34
+ if (_typeof(showTime) === 'object' && showTime !== null && showTime !== void 0 && showTime.format) {
35
+ return showTime.format.replace(/\[([^\]]+)\]/g, '');
36
+ }
37
+ return '';
38
+ }, [showTime]);
39
+ var hasHour = cleanTimeFormat === null || cleanTimeFormat === void 0 ? void 0 : cleanTimeFormat.includes('H');
40
+ var hasMinute = cleanTimeFormat === null || cleanTimeFormat === void 0 ? void 0 : cleanTimeFormat.includes('m');
41
+ var hasSecond = cleanTimeFormat === null || cleanTimeFormat === void 0 ? void 0 : cleanTimeFormat.includes('s');
41
42
  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
42
43
  locale = _ConfigProvider$useCo.locale;
43
44
  var _useState = useState({
@@ -52,30 +53,20 @@ export var DatePicker = function DatePicker(_ref) {
52
53
  internalValue = _useState2[0],
53
54
  setInternalValue = _useState2[1];
54
55
  var years = useMemo(function () {
56
+ var startYear = dayjs().year() - 50;
57
+ var endYear = dayjs().year() + 50;
55
58
  if (minDate && maxDate) {
56
- return Array.from({
57
- length: maxDate.year() - minDate.year() + 1
58
- }, function (_, i) {
59
- return minDate.year() + i;
60
- });
59
+ startYear = minDate.year();
60
+ endYear = maxDate.year();
61
61
  }
62
62
  if (minDate) {
63
- return Array.from({
64
- length: dayjs().year() - minDate.year() + 1
65
- }, function (_, i) {
66
- return minDate.year() + i;
67
- });
63
+ startYear = minDate.year();
68
64
  }
69
65
  if (maxDate) {
70
- return Array.from({
71
- length: maxDate.year() - dayjs().year() + 1
72
- }, function (_, i) {
73
- return dayjs().year() + i;
74
- });
66
+ endYear = maxDate.year();
75
67
  }
76
- var startYear = dayjs().year() + 30 - 100;
77
68
  return Array.from({
78
- length: 100
69
+ length: endYear - startYear + 1
79
70
  }, function (_, i) {
80
71
  return startYear + i;
81
72
  });
@@ -90,7 +81,7 @@ export var DatePicker = function DatePicker(_ref) {
90
81
  end = maxDate.month();
91
82
  }
92
83
  return Array.from({
93
- length: end - start + 1
84
+ length: end - start
94
85
  }, function (_, i) {
95
86
  return start + i + 1;
96
87
  });
@@ -128,52 +119,73 @@ export var DatePicker = function DatePicker(_ref) {
128
119
  var columns = useMemo(function () {
129
120
  if (mode === 'date') {
130
121
  var dateColumns = [];
131
- if (!format) {
132
- dateColumns.push(years.map(function (v) {
133
- return {
134
- label: "".concat(v, "\u5E74"),
135
- value: v
136
- };
137
- }), mouths.map(function (v) {
138
- return {
139
- label: "".concat(v, "\u6708"),
140
- value: v
141
- };
142
- }), days.map(function (v) {
143
- return {
144
- label: "".concat(v, "\u65E5"),
145
- value: v
146
- };
147
- }));
148
- } else {
149
- if (hasYear) {
150
- dateColumns.push(years.map(function (v) {
122
+ dateColumns.push(years.map(function (v) {
123
+ return {
124
+ label: "".concat(v, "\u5E74"),
125
+ value: v
126
+ };
127
+ }), mouths.map(function (v) {
128
+ return {
129
+ label: "".concat(v, "\u6708"),
130
+ value: v
131
+ };
132
+ }), days.map(function (v) {
133
+ return {
134
+ label: "".concat(v, "\u65E5"),
135
+ value: v
136
+ };
137
+ }));
138
+ if (Boolean(showTime)) {
139
+ if (cleanTimeFormat) {
140
+ if (hasHour) {
141
+ dateColumns.push(hours.map(function (v) {
142
+ return {
143
+ label: "".concat(v, "\u65F6"),
144
+ value: v
145
+ };
146
+ }));
147
+ }
148
+ if (hasMinute) {
149
+ dateColumns.push(minutes.map(function (v) {
150
+ return {
151
+ label: "".concat(v, "\u5206"),
152
+ value: v
153
+ };
154
+ }));
155
+ }
156
+ if (hasSecond) {
157
+ dateColumns.push(seconds.map(function (v) {
158
+ return {
159
+ label: "".concat(v, "\u79D2"),
160
+ value: v
161
+ };
162
+ }));
163
+ }
164
+ } else {
165
+ dateColumns.push(hours.map(function (v) {
151
166
  return {
152
- label: "".concat(v, "\u5E74"),
167
+ label: "".concat(v, "\u65F6"),
153
168
  value: v
154
169
  };
155
- }));
156
- }
157
- if (hasMouth) {
158
- dateColumns.push(mouths.map(function (v) {
170
+ }), minutes.map(function (v) {
159
171
  return {
160
- label: "".concat(v, "\u6708"),
172
+ label: "".concat(v, "\u5206"),
161
173
  value: v
162
174
  };
163
- }));
164
- }
165
- if (hasDate) {
166
- dateColumns.push(days.map(function (v) {
175
+ }), seconds.map(function (v) {
167
176
  return {
168
- label: "".concat(v, "\u65E5"),
177
+ label: "".concat(v, "\u79D2"),
169
178
  value: v
170
179
  };
171
180
  }));
172
181
  }
173
182
  }
174
- if (showTime) {
183
+ return dateColumns;
184
+ } else if (mode === 'time') {
185
+ var timeColumns = [];
186
+ if (cleanTimeFormat) {
175
187
  if (hasHour) {
176
- dateColumns.push(hours.map(function (v) {
188
+ timeColumns.push(hours.map(function (v) {
177
189
  return {
178
190
  label: "".concat(v, "\u65F6"),
179
191
  value: v
@@ -181,7 +193,7 @@ export var DatePicker = function DatePicker(_ref) {
181
193
  }));
182
194
  }
183
195
  if (hasMinute) {
184
- dateColumns.push(minutes.map(function (v) {
196
+ timeColumns.push(minutes.map(function (v) {
185
197
  return {
186
198
  label: "".concat(v, "\u5206"),
187
199
  value: v
@@ -189,18 +201,14 @@ export var DatePicker = function DatePicker(_ref) {
189
201
  }));
190
202
  }
191
203
  if (hasSecond) {
192
- dateColumns.push(seconds.map(function (v) {
204
+ timeColumns.push(seconds.map(function (v) {
193
205
  return {
194
206
  label: "".concat(v, "\u79D2"),
195
207
  value: v
196
208
  };
197
209
  }));
198
210
  }
199
- }
200
- return dateColumns;
201
- } else if (mode === 'time') {
202
- var timeColumns = [];
203
- if (!format) {
211
+ } else {
204
212
  timeColumns.push(hours.map(function (v) {
205
213
  return {
206
214
  label: "".concat(v, "\u65F6"),
@@ -217,31 +225,6 @@ export var DatePicker = function DatePicker(_ref) {
217
225
  value: v
218
226
  };
219
227
  }));
220
- } else {
221
- if (hasHour) {
222
- timeColumns.push(hours.map(function (v) {
223
- return {
224
- label: "".concat(v, "\u65F6"),
225
- value: v
226
- };
227
- }));
228
- }
229
- if (hasMinute) {
230
- timeColumns.push(minutes.map(function (v) {
231
- return {
232
- label: "".concat(v, "\u5206"),
233
- value: v
234
- };
235
- }));
236
- }
237
- if (hasSecond) {
238
- timeColumns.push(seconds.map(function (v) {
239
- return {
240
- label: "".concat(v, "\u79D2"),
241
- value: v
242
- };
243
- }));
244
- }
245
228
  }
246
229
  return timeColumns;
247
230
  }
@@ -321,7 +304,6 @@ export var DatePicker = function DatePicker(_ref) {
321
304
  columns: columns,
322
305
  value: pickerValue,
323
306
  onChange: function onChange(v) {
324
- console.log(v);
325
307
  handleValueChange(v);
326
308
  }
327
309
  }))));
@@ -7,7 +7,9 @@ export type DatePickerCellPops = Omit<CellProps, 'value'> & {
7
7
  format?: string;
8
8
  onChange?: (value?: dayjs.Dayjs) => void;
9
9
  mode?: Mode;
10
- showTime?: boolean;
10
+ showTime?: boolean | {
11
+ format?: string;
12
+ };
11
13
  minDate?: dayjs.Dayjs;
12
14
  maxDate?: dayjs.Dayjs;
13
15
  };
@@ -62,7 +62,6 @@ export var DatePickerCell = function DatePickerCell(_ref) {
62
62
  setInnerOpen(false);
63
63
  },
64
64
  mode: mode,
65
- format: format,
66
65
  showTime: showTime,
67
66
  minDate: minDate,
68
67
  maxDate: maxDate,
@@ -0,0 +1,19 @@
1
+ import React, { FC } from 'react';
2
+ import type { BadgeProps } from '@trionesdev/antd-mobile-base-react';
3
+ import './style.scss';
4
+ export type FloatButtonProps = {
5
+ icon?: React.ReactNode;
6
+ /** 文字等内容;仅建议在 `shape="square"` 时使用 */
7
+ content?: React.ReactNode;
8
+ type?: 'primary' | 'default';
9
+ shape?: 'circle' | 'square';
10
+ onClick?: (e: any) => void;
11
+ target?: string;
12
+ badge?: Partial<BadgeProps>;
13
+ className?: string;
14
+ style?: React.CSSProperties;
15
+ right?: number;
16
+ bottom?: number;
17
+ zIndex?: number;
18
+ };
19
+ export declare const FloatButton: FC<FloatButtonProps>;
@@ -0,0 +1,60 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ import classNames from 'classnames';
8
+ import React, { useContext } from 'react';
9
+ import { Badge } from '@trionesdev/antd-mobile-base-react';
10
+ import { FloatButtonGroupContext } from "./context";
11
+ import "./style.scss";
12
+ import { AddOutline } from '@trionesdev/antd-mobile-icons-react';
13
+ import { RootPortal } from "@tarojs/components";
14
+ var cls = 'triones-antm-float-button';
15
+ export var FloatButton = function FloatButton(_ref) {
16
+ var _groupCtx$shape;
17
+ var icon = _ref.icon,
18
+ content = _ref.content,
19
+ _ref$type = _ref.type,
20
+ type = _ref$type === void 0 ? 'default' : _ref$type,
21
+ _ref$shape = _ref.shape,
22
+ shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
23
+ onClick = _ref.onClick,
24
+ badge = _ref.badge,
25
+ className = _ref.className,
26
+ style = _ref.style,
27
+ _ref$right = _ref.right,
28
+ right = _ref$right === void 0 ? 24 : _ref$right,
29
+ _ref$bottom = _ref.bottom,
30
+ bottom = _ref$bottom === void 0 ? 24 : _ref$bottom,
31
+ _ref$zIndex = _ref.zIndex,
32
+ zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
33
+ var groupCtx = useContext(FloatButtonGroupContext);
34
+ var mergedShape = (_groupCtx$shape = groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.shape) !== null && _groupCtx$shape !== void 0 ? _groupCtx$shape : shape;
35
+ var mergedContent = content;
36
+ var mergedIcon = icon !== null && icon !== void 0 ? icon : /*#__PURE__*/React.createElement(AddOutline, null);
37
+ var mergedRight = right !== null && right !== void 0 ? right : 24;
38
+ var mergedBottom = bottom !== null && bottom !== void 0 ? bottom : 24;
39
+ var mergedZIndex = zIndex !== null && zIndex !== void 0 ? zIndex : 100;
40
+ var rootClass = classNames(cls, "".concat(cls, "--type-").concat(type), "".concat(cls, "--shape-").concat(mergedShape), _defineProperty(_defineProperty({}, "".concat(cls, "--embedded"), groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.inGroup), "".concat(cls, "--has-content"), mergedShape === 'square' && mergedContent != null && mergedContent !== false), className);
41
+ var inner = /*#__PURE__*/React.createElement(React.Fragment, null, mergedIcon ? /*#__PURE__*/React.createElement("span", {
42
+ className: "".concat(cls, "-icon")
43
+ }, mergedIcon) : null, mergedShape === 'square' && mergedContent ? /*#__PURE__*/React.createElement("span", {
44
+ className: "".concat(cls, "-content")
45
+ }, mergedContent) : null);
46
+ var interactive = /*#__PURE__*/React.createElement("button", {
47
+ className: "".concat(cls, "-body"),
48
+ onClick: onClick
49
+ }, inner);
50
+ var withBadge = badge != null && Object.keys(badge).length > 0 ? /*#__PURE__*/React.createElement(Badge, badge, interactive) : interactive;
51
+ var internal = /*#__PURE__*/React.createElement("div", {
52
+ className: rootClass,
53
+ style: _objectSpread({
54
+ zIndex: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : mergedZIndex,
55
+ right: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : "".concat(mergedRight, "Px"),
56
+ bottom: groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? undefined : "calc(".concat(mergedBottom, "Px + env(safe-area-inset-bottom, 0px))")
57
+ }, style)
58
+ }, withBadge);
59
+ return groupCtx !== null && groupCtx !== void 0 && groupCtx.inGroup ? internal : /*#__PURE__*/React.createElement(RootPortal, null, internal);
60
+ };
@@ -0,0 +1,21 @@
1
+ import React, { FC } from 'react';
2
+ import './style.scss';
3
+ export type FloatButtonGroupProps = {
4
+ shape?: 'circle' | 'square';
5
+ type?: 'primary' | 'default';
6
+ /** 菜单模式下主按钮图标(收起态) */
7
+ icon?: React.ReactNode;
8
+ trigger?: 'click' | 'hover';
9
+ open?: boolean;
10
+ onOpenChange?: (open: boolean) => void;
11
+ closeIcon?: React.ReactNode;
12
+ placement?: 'top' | 'bottom' | 'left' | 'right';
13
+ onClick?: (e: React.MouseEvent) => void;
14
+ className?: string;
15
+ style?: React.CSSProperties;
16
+ children?: React.ReactNode;
17
+ right?: number;
18
+ bottom?: number;
19
+ zIndex?: number;
20
+ };
21
+ export declare const FloatButtonGroup: FC<FloatButtonGroupProps>;
@@ -0,0 +1,141 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
10
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
11
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
+ import classNames from 'classnames';
14
+ import { CloseOutline } from "@trionesdev/antd-mobile-icons-react";
15
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
16
+ import { FloatButton } from "./FloatButton";
17
+ import { FloatButtonGroupContext } from "./context";
18
+ import "./style.scss";
19
+ import { RootPortal, View } from "@tarojs/components";
20
+ import { useTaro } from "../hooks";
21
+ var groupCls = 'triones-antm-float-button-group';
22
+ export var FloatButtonGroup = function FloatButtonGroup(_ref) {
23
+ var _ref$shape = _ref.shape,
24
+ shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
25
+ _ref$type = _ref.type,
26
+ type = _ref$type === void 0 ? 'default' : _ref$type,
27
+ icon = _ref.icon,
28
+ trigger = _ref.trigger,
29
+ openProp = _ref.open,
30
+ onOpenChange = _ref.onOpenChange,
31
+ closeIcon = _ref.closeIcon,
32
+ _ref$placement = _ref.placement,
33
+ placement = _ref$placement === void 0 ? 'top' : _ref$placement,
34
+ onClick = _ref.onClick,
35
+ className = _ref.className,
36
+ style = _ref.style,
37
+ children = _ref.children,
38
+ _ref$right = _ref.right,
39
+ right = _ref$right === void 0 ? 24 : _ref$right,
40
+ _ref$bottom = _ref.bottom,
41
+ bottom = _ref$bottom === void 0 ? 24 : _ref$bottom,
42
+ _ref$zIndex = _ref.zIndex,
43
+ zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
44
+ var _useTaro = useTaro(),
45
+ isTaroWeb = _useTaro.isTaroWeb,
46
+ isTaroEnv = _useTaro.isTaroEnv;
47
+ var rootRef = useRef(null);
48
+ var isMenu = trigger === 'click' || trigger === 'hover';
49
+ var _useState = useState(false),
50
+ _useState2 = _slicedToArray(_useState, 2),
51
+ uncontrolledOpen = _useState2[0],
52
+ setUncontrolledOpen = _useState2[1];
53
+ var mergedOpen = openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen;
54
+ var setOpen = useCallback(function (next) {
55
+ if (openProp === undefined) {
56
+ setUncontrolledOpen(next);
57
+ }
58
+ onOpenChange === null || onOpenChange === void 0 || onOpenChange(next);
59
+ }, [openProp, onOpenChange]);
60
+ var triggerOpen = useCallback(function (next) {
61
+ if (mergedOpen !== next) {
62
+ setOpen(next);
63
+ }
64
+ }, [mergedOpen, setOpen]);
65
+
66
+ /** H5:document 捕获点击;小程序无 document,见下方全屏透明遮罩 */
67
+ useEffect(function () {
68
+ if (!isMenu || trigger !== 'click' || !isTaroWeb) return;
69
+ var onDoc = function onDoc(e) {
70
+ var _rootRef$current;
71
+ if ((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(e.target)) return;
72
+ triggerOpen(false);
73
+ };
74
+ document.addEventListener('click', onDoc, true);
75
+ return function () {
76
+ document.removeEventListener('click', onDoc, true);
77
+ };
78
+ }, [isMenu, trigger, triggerOpen, isTaroWeb]);
79
+
80
+ /** 小程序:页面没有全局 tap 回调,用全屏透明层(zIndex 低于按钮组)模拟「点击页面其它区域」关闭 */
81
+ var showWeappOutsideMask = !isTaroWeb && !!isTaroEnv && isMenu && trigger === 'click' && mergedOpen;
82
+ var onMouseEnter = function onMouseEnter() {
83
+ if (trigger === 'hover') triggerOpen(true);
84
+ };
85
+ var onMouseLeave = function onMouseLeave() {
86
+ if (trigger === 'hover') triggerOpen(false);
87
+ };
88
+ var onTriggerClick = function onTriggerClick(e) {
89
+ if (trigger === 'click') {
90
+ triggerOpen(!mergedOpen);
91
+ }
92
+ onClick === null || onClick === void 0 || onClick(e);
93
+ };
94
+ var mergedCloseIcon = closeIcon !== null && closeIcon !== void 0 ? closeIcon : /*#__PURE__*/React.createElement(CloseOutline, null);
95
+ var listVisible = !isMenu || mergedOpen;
96
+ var listNode = /*#__PURE__*/React.createElement("div", {
97
+ className: classNames("".concat(groupCls, "-list"), _defineProperty({}, "".concat(groupCls, "-list--hidden"), !listVisible)),
98
+ "aria-hidden": !listVisible
99
+ }, children);
100
+ var triggerNode = /*#__PURE__*/React.createElement(FloatButton, {
101
+ type: type,
102
+ shape: shape,
103
+ icon: mergedOpen ? mergedCloseIcon : icon,
104
+ onClick: onTriggerClick
105
+ });
106
+ var ctxValue = useMemo(function () {
107
+ return {
108
+ inGroup: true,
109
+ shape: shape,
110
+ individual: shape === 'circle'
111
+ };
112
+ }, [shape]);
113
+ var rootClass = classNames(groupCls, "".concat(groupCls, "--placement-").concat(placement), _defineProperty({}, "".concat(groupCls, "--menu"), isMenu), className);
114
+ return /*#__PURE__*/React.createElement(RootPortal, null, showWeappOutsideMask && /*#__PURE__*/React.createElement(View, {
115
+ className: "".concat(groupCls, "-weapp-outside-mask"),
116
+ style: {
117
+ position: 'fixed',
118
+ left: 0,
119
+ top: 0,
120
+ right: 0,
121
+ bottom: 0,
122
+ zIndex: zIndex - 1
123
+ },
124
+ catchMove: true,
125
+ onClick: function onClick() {
126
+ return triggerOpen(false);
127
+ }
128
+ }), /*#__PURE__*/React.createElement("div", {
129
+ ref: rootRef,
130
+ className: rootClass,
131
+ style: _objectSpread({
132
+ zIndex: zIndex,
133
+ right: "".concat(right, "Px"),
134
+ bottom: "calc(".concat(bottom, "Px + env(safe-area-inset-bottom, 0px))")
135
+ }, style),
136
+ onMouseEnter: onMouseEnter,
137
+ onMouseLeave: onMouseLeave
138
+ }, /*#__PURE__*/React.createElement(FloatButtonGroupContext.Provider, {
139
+ value: ctxValue
140
+ }, isMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, placement === 'bottom' ? /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, listNode) : placement === 'right' ? /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, listNode) : /*#__PURE__*/React.createElement(React.Fragment, null, listNode, triggerNode)) : children)));
141
+ };
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ export type FloatButtonGroupContextValue = {
3
+ /** 是否在 FloatButton.Group 内(组内子按钮不使用 fixed 定位) */
4
+ inGroup: boolean;
5
+ /** 组级 shape,覆盖子项 */
6
+ shape?: 'circle' | 'square';
7
+ /** 与 antd 一致:circle 组为 true */
8
+ individual?: boolean;
9
+ };
10
+ export declare const FloatButtonGroupContext: React.Context<FloatButtonGroupContextValue | null>;
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export var FloatButtonGroupContext = /*#__PURE__*/React.createContext(null);
@@ -0,0 +1,10 @@
1
+ import { FloatButton as InternalFloatButton, FloatButtonProps } from "./FloatButton";
2
+ import { FloatButtonGroup } from "./FloatButtonGroup";
3
+ type InternalFloatButtonType = typeof InternalFloatButton;
4
+ type CompoundedComponent = InternalFloatButtonType & {
5
+ Group: typeof FloatButtonGroup;
6
+ };
7
+ declare const FloatButton: CompoundedComponent;
8
+ export type { FloatButtonProps };
9
+ export type { FloatButtonGroupProps } from "./FloatButtonGroup";
10
+ export default FloatButton;
@@ -0,0 +1,5 @@
1
+ import { FloatButton as InternalFloatButton } from "./FloatButton";
2
+ import { FloatButtonGroup } from "./FloatButtonGroup";
3
+ var FloatButton = InternalFloatButton;
4
+ FloatButton.Group = FloatButtonGroup;
5
+ export default FloatButton;
@@ -0,0 +1,126 @@
1
+ @use "../style/variable" as variable;
2
+
3
+ $floatButtonCls: "triones-antm-float-button";
4
+ $floatButtonGroupCls: "triones-antm-float-button-group";
5
+
6
+ $floatButtonSize: 48Px;
7
+ $floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
8
+ 0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
9
+
10
+ .#{$floatButtonCls} {
11
+ position: fixed;
12
+ display: inline-flex;
13
+ flex-shrink: 0;
14
+ box-sizing: border-box;
15
+
16
+ &--embedded {
17
+ position: relative;
18
+ right: auto;
19
+ bottom: auto;
20
+ z-index: auto;
21
+ }
22
+
23
+ &-body {
24
+ box-sizing: border-box;
25
+ margin: 0;
26
+ padding: 0;
27
+ display: inline-flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ gap: 8Px;
31
+ min-width: $floatButtonSize;
32
+ min-height: $floatButtonSize;
33
+ border: none;
34
+ border-radius: 50%;
35
+ cursor: pointer;
36
+ font-size: 20Px;
37
+ line-height: 1;
38
+ color: rgba(0, 0, 0, 0.88);
39
+ background: #fff;
40
+ box-shadow: $floatButtonShadow;
41
+ transition: color 0.2s, background 0.2s, box-shadow 0.2s;
42
+ -webkit-tap-highlight-color: transparent;
43
+ text-decoration: none;
44
+
45
+ &:active {
46
+ filter: brightness(0.95);
47
+ }
48
+ }
49
+
50
+ &--shape-square &-body {
51
+ border-radius: variable.$trionesBorderRadius;
52
+ }
53
+
54
+ &--has-content &-body {
55
+ min-height: $floatButtonSize;
56
+ display: inline-flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ justify-content: center;
60
+ }
61
+
62
+ &--type-primary &-body {
63
+ color: #fff;
64
+ background: variable.$trionesColorPrimary;
65
+ }
66
+
67
+ &-icon {
68
+ display: inline-flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ }
72
+
73
+ &-content {
74
+ font-size: variable.$trionesFontSizeSm;
75
+ font-weight: 500;
76
+ white-space: nowrap;
77
+ }
78
+ }
79
+
80
+ .#{$floatButtonGroupCls} {
81
+ position: fixed;
82
+ display: flex;
83
+ gap: 12Px;
84
+ align-items: flex-end;
85
+ box-sizing: border-box;
86
+
87
+ &--placement {
88
+ &-top {
89
+ flex-direction: column;
90
+ }
91
+ &-bottom {
92
+ flex-direction: column;
93
+ }
94
+ &-left {
95
+ flex-direction: row;
96
+ }
97
+ &-right {
98
+ flex-direction: row;
99
+ }
100
+ }
101
+
102
+ &--menu {
103
+ align-items: center;
104
+ }
105
+
106
+ &-list {
107
+ display: flex;
108
+ flex-direction: column;
109
+ gap: 12Px;
110
+ align-items: flex-end;
111
+
112
+ &--hidden {
113
+ display: none;
114
+ }
115
+ }
116
+
117
+ &--placement-left &-list,
118
+ &--placement-right &-list {
119
+ flex-direction: column;
120
+ }
121
+
122
+ /** 小程序点击外部关闭:全屏遮罩;极淡背景避免部分机型不响应 tap */
123
+ &-weapp-outside-mask {
124
+ background: rgba(0, 0, 0, 0.001);
125
+ }
126
+ }
@@ -0,0 +1,3 @@
1
+ import { Segmented, SegmentedProps } from '@trionesdev/antd-mobile-base-react';
2
+ export type { SegmentedProps };
3
+ export default Segmented;
@@ -0,0 +1,2 @@
1
+ import { Segmented } from '@trionesdev/antd-mobile-base-react';
2
+ export default Segmented;
package/dist/index.d.ts CHANGED
@@ -46,6 +46,8 @@ export { default as Empty } from './Empty';
46
46
  export type { EmptyProps } from './Empty';
47
47
  export { default as ErrorBlock } from './ErrorBlock';
48
48
  export type { ErrorBlockStatus, ErrorBlockProps } from './ErrorBlock';
49
+ export { default as FloatButton } from './FloatButton';
50
+ export type { FloatButtonProps } from './FloatButton';
49
51
  export { default as Footer } from './Footer';
50
52
  export type { FooterProps } from './Footer';
51
53
  export { default as Form } from './Form';
@@ -90,6 +92,8 @@ export { default as Scaffold } from './Scaffold';
90
92
  export type { ScaffoldProps } from './Scaffold';
91
93
  export { default as ScrollView } from './ScrollView';
92
94
  export type { ScrollViewProps } from './ScrollView';
95
+ export { default as Segmented } from './Segmented';
96
+ export type { SegmentedProps } from './Segmented';
93
97
  export { default as SideBar } from './SideBar';
94
98
  export type { SideBarProps } from './SideBar';
95
99
  export { default as Space } from './Space';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ export { default as Divider } from "./Divider";
22
22
  export { default as Ellipsis } from "./Ellipsis";
23
23
  export { default as Empty } from "./Empty";
24
24
  export { default as ErrorBlock } from "./ErrorBlock";
25
+ export { default as FloatButton } from "./FloatButton";
25
26
  export { default as Footer } from "./Footer";
26
27
  export { default as Form } from "./Form";
27
28
  export { default as Grid } from "./Grid";
@@ -44,6 +45,7 @@ export { default as Result } from "./Result";
44
45
  export { default as SafeArea } from "./SafeArea";
45
46
  export { default as Scaffold } from "./Scaffold";
46
47
  export { default as ScrollView } from "./ScrollView";
48
+ export { default as Segmented } from "./Segmented";
47
49
  export { default as SideBar } from "./SideBar";
48
50
  export { default as Space } from "./Space";
49
51
  export { default as SpinLoading } from "./SpinLoading";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trionesdev/antd-taro-react",
3
- "version": "0.0.2-beta.13",
3
+ "version": "0.0.2-beta.14",
4
4
  "description": "antd taro react",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -56,7 +56,7 @@
56
56
  },
57
57
  "dependencies": {
58
58
  "@tarojs/components": "^4.1.8",
59
- "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.13",
59
+ "@trionesdev/antd-mobile-base-react": "^0.0.2-beta.14",
60
60
  "crypto-js": "^4.2.0",
61
61
  "dayjs": "^1.11.19",
62
62
  "rc-field-form": "^2.7.0",
@@ -64,7 +64,7 @@
64
64
  },
65
65
  "optionalDependencies": {
66
66
  "@trionesdev/antd-mobile-base-react": "workspace:*",
67
- "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.12"
67
+ "@trionesdev/antd-mobile-icons-react": "0.0.2-beta.14"
68
68
  },
69
- "gitHead": "03ef35d6ef50f219c0a81ac6d54f7269c5b822bc"
69
+ "gitHead": "5d9e7dbf380ca19c5e35509f0a31865ec5bdcc06"
70
70
  }