clxx 2.1.6 → 2.1.8

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 (70) hide show
  1. package/AGENTS.md +2 -0
  2. package/README.md +63 -0
  3. package/build/Ago/index.js +14 -8
  4. package/build/Alert/Wrapper.js +20 -20
  5. package/build/Alert/index.js +17 -11
  6. package/build/Alert/style.js +44 -26
  7. package/build/AutoGrid/index.js +50 -14
  8. package/build/AutoGrid/style.js +9 -6
  9. package/build/CarouselNotice/index.js +22 -19
  10. package/build/CarouselNotice/style.js +6 -3
  11. package/build/CitySelect/data.d.ts +3 -0
  12. package/build/CitySelect/data.js +2355 -0
  13. package/build/CitySelect/index.d.ts +17 -0
  14. package/build/CitySelect/index.js +335 -0
  15. package/build/CitySelect/search.d.ts +2 -0
  16. package/build/CitySelect/search.js +70 -0
  17. package/build/CitySelect/style.d.ts +4 -0
  18. package/build/CitySelect/style.js +237 -0
  19. package/build/CitySelect/type.d.ts +17 -0
  20. package/build/CitySelect/type.js +2 -0
  21. package/build/Clickable/index.js +56 -20
  22. package/build/Container/index.js +52 -16
  23. package/build/Countdowner/index.js +50 -14
  24. package/build/Dialog/Wrapper.js +13 -10
  25. package/build/Dialog/index.js +18 -12
  26. package/build/Dialog/style.js +29 -25
  27. package/build/Effect/useInterval.js +7 -4
  28. package/build/Effect/useTick.js +9 -6
  29. package/build/Effect/useUpdate.js +6 -3
  30. package/build/Effect/useViewport.js +15 -8
  31. package/build/Effect/useWindowResize.js +7 -4
  32. package/build/Fixed/index.js +6 -3
  33. package/build/Flex/Col.js +23 -15
  34. package/build/Flex/Row.js +23 -15
  35. package/build/Flex/index.js +9 -5
  36. package/build/Indicator/index.js +20 -14
  37. package/build/Indicator/style.js +6 -3
  38. package/build/Loading/Wrapper.js +14 -11
  39. package/build/Loading/index.js +17 -10
  40. package/build/Loading/style.js +9 -6
  41. package/build/Overlay/index.js +12 -9
  42. package/build/SafeArea/index.js +8 -5
  43. package/build/ScrollView/index.js +24 -21
  44. package/build/ScrollView/style.js +4 -1
  45. package/build/Toast/Toast.js +53 -17
  46. package/build/Toast/index.js +21 -14
  47. package/build/Toast/style.d.ts +0 -3
  48. package/build/Toast/style.js +49 -41
  49. package/build/index.d.ts +1 -1
  50. package/build/index.js +102 -36
  51. package/build/utils/Countdown.js +7 -3
  52. package/build/utils/ago.js +10 -4
  53. package/build/utils/calendarTable.js +9 -3
  54. package/build/utils/createApp.js +35 -27
  55. package/build/utils/cssUtil.js +10 -5
  56. package/build/utils/defaultScroll.js +4 -1
  57. package/build/utils/dom.js +6 -3
  58. package/build/utils/is.js +6 -2
  59. package/build/utils/jsonp.js +4 -1
  60. package/build/utils/request.js +40 -27
  61. package/build/utils/tick.js +4 -1
  62. package/build/utils/uniqKey.js +4 -1
  63. package/build/utils/wait.js +8 -4
  64. package/package.json +1 -1
  65. package/test/src/city-select/index.jsx +21 -0
  66. package/test/src/index/index.jsx +1 -0
  67. package/test/src/toast/index.jsx +1 -0
  68. package/test/vite.config.js +6 -2
  69. package/build/context.d.ts +0 -14
  70. package/build/context.js +0 -21
package/AGENTS.md ADDED
@@ -0,0 +1,2 @@
1
+ - 所有回答用中文
2
+ - 任意修改都要检查是否创造了新的bug,如果有bug则修复
package/README.md CHANGED
@@ -432,6 +432,67 @@ import { CarouselNotice } from 'clxx';
432
432
 
433
433
  ---
434
434
 
435
+ #### CitySelect / showCitySelect — 城市选择器
436
+
437
+ 移动端全屏城市选择器,支持字母侧边栏触摸导航、粘滞字母标题、列表与字母双向联动、搜索(含中文 IME 保护)、滑入/滑出动画、外部定位回显等。
438
+
439
+ ```tsx
440
+ import { CitySelect, showCitySelect } from 'clxx';
441
+
442
+ // 组件方式
443
+ <CitySelect
444
+ primary="#2f7dff"
445
+ getLocation={async () => '北京'}
446
+ onSelect={(city) => console.log(city)}
447
+ onClose={() => console.log('closed')}
448
+ />
449
+
450
+ // 函数式方式(内部使用 Portal 挂载到 body,选中或点击退出后自动卸载)
451
+ showCitySelect({
452
+ primary: '#2f7dff',
453
+ // 同步返回
454
+ getLocation: () => '110100',
455
+ // 或异步返回
456
+ // getLocation: async () => fetchCurrentCity(),
457
+ onSelect: (city) => {
458
+ console.log(city.name, city.code, city.province);
459
+ },
460
+ });
461
+ ```
462
+
463
+ **Props:**
464
+
465
+ | 属性 | 类型 | 默认值 | 说明 |
466
+ |------|------|--------|------|
467
+ | `onSelect` | `(city: SelectedCity) => void` | — | 选中城市时触发 |
468
+ | `onClose` | `() => void` | — | 退出动画结束时触发 |
469
+ | `onLetterChange` | `(letter: string) => void` | — | 侧边栏当前字母变化回调 |
470
+ | `getLocation` | `() => string \| null \| undefined \| Promise<string \| null \| undefined>` | — | 外部定位能力,可同步或异步,返回城市名或城市 code |
471
+ | `primary` | `string` | `'#2f7dff'` | 主题主色,形如 `#rrggbb`;active 态颜色自动派生 |
472
+
473
+ **SelectedCity:**
474
+
475
+ ```typescript
476
+ interface SelectedCity {
477
+ name: string; // 城市名,如 "北京市"
478
+ code: string; // 城市 code(直辖市为市辖区 code,如 "110100")
479
+ province: {
480
+ name: string; // 省级名称
481
+ code: string; // 省级 code
482
+ };
483
+ }
484
+ ```
485
+
486
+ **特性:**
487
+ - **首次挂载调用一次** `getLocation`:结果能匹配 `cityData`(按 code 精确匹配,按 name 允许省略末尾"市",如"北京"命中"北京市")才展示「当前定位」快捷块;失败、为空、匹配不到均不显示。
488
+ - **字母侧边栏触摸导航**:非 passive 触摸监听,滑动时实时切换字母并滚动列表;松开显示大字母提示。
489
+ - **双向联动**:手动滚动列表时基于缓存的 `offsetTop` 二分查找激活对应字母;并通过 `ResizeObserver` 重新测量。
490
+ - **搜索**:按拼音全拼、拼音首字母、中文名前缀匹配;中文输入法合成期间不触发搜索,避免中间态干扰。
491
+ - **滑入滑出动画**:首次挂载右侧滑入;选中或点击退出时滑出,动画结束后才触发 `onClose`(首帧立即退出时直接回调,避免卡住)。
492
+ - **纯属性化主题**:无 `containerStyle`,只允许通过 `primary` 控制主题色。
493
+
494
+ ---
495
+
435
496
  ### 🔔 反馈组件
436
497
 
437
498
  #### showToast / showUniqToast — 轻提示
@@ -1065,6 +1126,7 @@ getContextValue(); // { token: 'xxx', userId: 123 }
1065
1126
  | `Overlay` | 组件 | 覆盖层 |
1066
1127
  | `ScrollView` | 组件 | 滚动视图 |
1067
1128
  | `CarouselNotice` | 组件 | 轮播公告 |
1129
+ | `CitySelect` | 组件 | 城市选择器 |
1068
1130
  | `Indicator` | 组件 | 加载指示器 |
1069
1131
  | `Countdowner` | 组件 | 倒计时 |
1070
1132
  | `Ago` | 组件 | 相对时间 |
@@ -1076,6 +1138,7 @@ getContextValue(); // { token: 'xxx', userId: 123 }
1076
1138
  | `showDialog` | 对话框 |
1077
1139
  | `showAlert` | 弹窗提示 |
1078
1140
  | `showLoading` / `showLoadingAtLeast` | 加载指示 |
1141
+ | `showCitySelect` | 城市选择器 |
1079
1142
 
1080
1143
  ### Hooks
1081
1144
  | 导出 | 说明 |
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __rest = (this && this.__rest) || function (s, e) {
2
3
  var t = {};
3
4
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,12 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
9
10
  }
10
11
  return t;
11
12
  };
12
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
13
- import dayjs from 'dayjs';
14
- import { ago } from '../utils/ago';
15
- export function Ago(props) {
16
- const { date = dayjs(), block = false, renderContent } = props, attrs = __rest(props, ["date", "block", "renderContent"]);
17
- const agoValue = ago(date);
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.Ago = Ago;
18
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
19
+ const dayjs_1 = __importDefault(require("dayjs"));
20
+ const ago_1 = require("../utils/ago");
21
+ function Ago(props) {
22
+ const { date = (0, dayjs_1.default)(), block = false, renderContent } = props, attrs = __rest(props, ["date", "block", "renderContent"]);
23
+ const agoValue = (0, ago_1.ago)(date);
18
24
  // 格式化内容
19
25
  let content = agoValue.format;
20
26
  if (typeof renderContent === 'function') {
@@ -22,8 +28,8 @@ export function Ago(props) {
22
28
  }
23
29
  // 是否显示为块元素
24
30
  if (block) {
25
- return _jsx("div", Object.assign({}, attrs, { children: content }));
31
+ return (0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { children: content }));
26
32
  }
27
33
  // 默认显示行内元素
28
- return _jsx("span", Object.assign({}, attrs, { children: content }));
34
+ return (0, jsx_runtime_1.jsx)("span", Object.assign({}, attrs, { children: content }));
29
35
  }
@@ -1,25 +1,25 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
- import { Clickable } from '../Clickable';
3
- import { Row } from '../Flex/Row';
4
- import { style } from './style';
5
- export function AlertWrapper(props) {
6
- const { title = '提示', description, confirm = '确定', confirmColor = '#007afe', cancel = '取消', cancelColor = '#666', showCancel = false, onConfirm, onCancel,
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.AlertWrapper = AlertWrapper;
4
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
5
+ const Clickable_1 = require("../Clickable");
6
+ const Row_1 = require("../Flex/Row");
7
+ const style_1 = require("./style");
8
+ function AlertWrapper(props) {
9
+ const { title = '提示', description, confirm = '确定', confirmColor = '#007aff', cancel = '取消', cancelColor = '#6b7280', showCancel = false, onConfirm, onCancel,
7
10
  // 可定制的样式
8
11
  titleStyle, descStyle, btnStyle, cancelStyle, confirmStyle, } = props;
9
- // 标题样式
10
- let titleCss = [
11
- style.title,
12
- description ? { paddingBottom: 0 } : {},
13
- titleStyle
14
- ];
15
12
  // 展示按钮组
16
- let btnBoxCss = [
17
- style.btnBox,
18
- showCancel ? style.btnBoxWithCancel : {}
13
+ const btnBoxCss = [
14
+ style_1.style.btnBox,
15
+ showCancel ? style_1.style.btnBoxWithCancel : {}
19
16
  ];
20
- return (_jsxs("div", { css: style.container, children: [_jsxs("div", { css: style.content, children: [_jsx("div", { css: titleCss, children: title }), description && _jsx("div", { css: [style.desc, descStyle], children: description })] }), _jsxs(Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && (_jsx(Clickable, { css: [style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: {
21
- backgroundColor: `#c0c0c022`,
22
- }, children: cancel })), _jsx(Clickable, { css: [style.btn, btnStyle, confirmStyle, { color: confirmColor }], onClick: onConfirm, activeStyle: {
23
- backgroundColor: `#c0c0c022`,
24
- }, children: confirm })] })] }));
17
+ const activeBg = { backgroundColor: 'rgba(0,0,0,.04)' };
18
+ return ((0, jsx_runtime_1.jsxs)("div", { css: style_1.style.container, children: [(0, jsx_runtime_1.jsxs)("div", { css: style_1.style.content, children: [(0, jsx_runtime_1.jsx)("div", { css: [style_1.style.title, titleStyle], children: title }), description && (0, jsx_runtime_1.jsx)("div", { css: [style_1.style.desc, descStyle], children: description })] }), (0, jsx_runtime_1.jsxs)(Row_1.Row, { alignItems: "stretch", css: btnBoxCss, children: [showCancel && ((0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [style_1.style.btn, btnStyle, cancelStyle, { color: cancelColor }], onClick: onCancel, activeStyle: activeBg, children: cancel })), (0, jsx_runtime_1.jsx)(Clickable_1.Clickable, { css: [
19
+ style_1.style.btn,
20
+ style_1.style.btnConfirm,
21
+ btnStyle,
22
+ confirmStyle,
23
+ { color: confirmColor },
24
+ ], onClick: onConfirm, activeStyle: activeBg, children: confirm })] })] }));
25
25
  }
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
3
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
4
  return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,19 +8,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
8
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
9
  });
9
10
  };
10
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
11
- import React from 'react';
12
- import { showDialog } from '../Dialog';
13
- import { AlertWrapper } from './Wrapper';
14
- import isPlainObject from 'lodash/isPlainObject';
15
- import omit from 'lodash/omit';
11
+ var __importDefault = (this && this.__importDefault) || function (mod) {
12
+ return (mod && mod.__esModule) ? mod : { "default": mod };
13
+ };
14
+ Object.defineProperty(exports, "__esModule", { value: true });
15
+ exports.showAlert = showAlert;
16
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
17
+ const react_1 = __importDefault(require("react"));
18
+ const Dialog_1 = require("../Dialog");
19
+ const Wrapper_1 = require("./Wrapper");
20
+ const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
21
+ const omit_1 = __importDefault(require("lodash/omit"));
16
22
  /**
17
23
  * 显示弹框
18
24
  * @param option
19
25
  */
20
- export function showAlert(option) {
26
+ function showAlert(option) {
21
27
  let config;
22
- if (React.isValidElement(option) || !isPlainObject(option)) {
28
+ if (react_1.default.isValidElement(option) || !(0, isPlainObject_1.default)(option)) {
23
29
  config = {
24
30
  title: option,
25
31
  };
@@ -28,7 +34,7 @@ export function showAlert(option) {
28
34
  config = option;
29
35
  }
30
36
  // 组件选项
31
- const props = omit(config, ['showMask']);
37
+ const props = (0, omit_1.default)(config, ['showMask']);
32
38
  props.onCancel = () => __awaiter(this, void 0, void 0, function* () {
33
39
  var _a;
34
40
  yield closeDialog();
@@ -40,9 +46,9 @@ export function showAlert(option) {
40
46
  (_a = config.onConfirm) === null || _a === void 0 ? void 0 : _a.call(config);
41
47
  });
42
48
  // 创建对话框
43
- const closeDialog = showDialog({
49
+ const closeDialog = (0, Dialog_1.showDialog)({
44
50
  showMask: typeof config.showMask === 'undefined' ? true : !!config.showMask,
45
- content: _jsx(AlertWrapper, Object.assign({}, props)),
51
+ content: (0, jsx_runtime_1.jsx)(Wrapper_1.AlertWrapper, Object.assign({}, props)),
46
52
  });
47
53
  // 返回关闭逻辑
48
54
  return closeDialog;
@@ -1,14 +1,28 @@
1
- export const style = {
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.style = void 0;
4
+ // 1px 硬边框(高清屏 hairline)
5
+ const hairline = 1 / (typeof window !== "undefined" ? window.devicePixelRatio : 1);
6
+ const fontStack = '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
7
+ exports.style = {
2
8
  container: {
3
9
  position: "relative",
4
10
  overflow: "hidden",
5
- backgroundColor: "#fff",
6
- boxShadow: "0 0 2px 0 #00000055",
7
- borderRadius: '.16rem',
8
- width: 750 * 0.84 / 100 + 'rem',
11
+ backgroundColor: "#ffffff",
12
+ borderRadius: ".28rem",
13
+ width: (750 * 0.78) / 100 + "rem",
14
+ fontFamily: fontStack,
15
+ color: "#1f2328",
16
+ WebkitFontSmoothing: "antialiased",
17
+ MozOsxFontSmoothing: "grayscale",
18
+ boxShadow: "0 .2rem .6rem rgba(0,0,0,.18)",
9
19
  },
10
20
  content: {
11
21
  position: "relative",
22
+ paddingTop: ".4rem",
23
+ paddingBottom: ".4rem",
24
+ paddingLeft: ".36rem",
25
+ paddingRight: ".36rem",
12
26
  "&:after,&::after": {
13
27
  content: "''",
14
28
  position: "absolute",
@@ -16,33 +30,30 @@ export const style = {
16
30
  left: 0,
17
31
  right: 0,
18
32
  height: "1px",
19
- backgroundColor: "#c0c0c0",
20
- transform: `scale(1, ${1 / window.devicePixelRatio})`,
33
+ backgroundColor: "#e5e7eb",
34
+ transform: `scale(1, ${hairline})`,
35
+ transformOrigin: "0 100%",
21
36
  },
22
37
  },
23
38
  title: {
24
39
  textAlign: "center",
25
- lineHeight: 1.4,
26
- color: "#000",
27
- paddingTop: '.5rem',
28
- paddingLeft: '.4rem',
29
- paddingRight: '.4rem',
30
- paddingBottom: '.5rem',
31
- fontSize: '.33rem',
40
+ lineHeight: 1.45,
41
+ color: "#1f2328",
42
+ fontSize: ".34rem",
43
+ fontWeight: 600,
44
+ letterSpacing: ".01rem",
32
45
  },
33
46
  desc: {
34
47
  textAlign: "center",
35
- lineHeight: 1.4,
36
- color: "#666",
37
- paddingTop: '.2rem',
38
- paddingLeft: '.4rem',
39
- paddingRight: '.4rem',
40
- paddingBottom: '.5rem',
41
- fontSize: '.29rem',
48
+ lineHeight: 1.55,
49
+ color: "#6b7280",
50
+ fontSize: ".28rem",
51
+ marginTop: ".18rem",
52
+ wordBreak: "break-word",
42
53
  },
43
54
  btnBox: {
44
55
  position: "relative",
45
- height: '.9rem',
56
+ height: ".92rem",
46
57
  },
47
58
  btnBoxWithCancel: {
48
59
  "&:after,&::after": {
@@ -53,8 +64,9 @@ export const style = {
53
64
  left: "50%",
54
65
  marginLeft: "-.5px",
55
66
  width: "1px",
56
- backgroundColor: "#c0c0c0",
57
- transform: `scale(${1 / window.devicePixelRatio}, 1)`,
67
+ backgroundColor: "#e5e7eb",
68
+ transform: `scale(${hairline}, 1)`,
69
+ transformOrigin: "0 0",
58
70
  },
59
71
  },
60
72
  btn: {
@@ -63,7 +75,13 @@ export const style = {
63
75
  alignItems: "center",
64
76
  justifyContent: "center",
65
77
  userSelect: "none",
66
- letterSpacing: "1px",
67
- fontSize: '.33rem',
78
+ fontSize: ".32rem",
79
+ fontWeight: 500,
80
+ letterSpacing: ".01rem",
81
+ cursor: "pointer",
82
+ transition: "background-color .12s",
83
+ },
84
+ btnConfirm: {
85
+ fontWeight: 600,
68
86
  },
69
87
  };
@@ -1,3 +1,37 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
1
35
  var __rest = (this && this.__rest) || function (s, e) {
2
36
  var t = {};
3
37
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,23 +43,25 @@ var __rest = (this && this.__rest) || function (s, e) {
9
43
  }
10
44
  return t;
11
45
  };
12
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
13
- import React, { useMemo } from 'react';
14
- import { style } from './style';
15
- import { normalizeUnit } from '../utils/cssUtil';
46
+ Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.AutoGrid = AutoGrid;
48
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
49
+ const react_1 = __importStar(require("react"));
50
+ const style_1 = require("./style");
51
+ const cssUtil_1 = require("../utils/cssUtil");
16
52
  /**
17
53
  * 自动化生成表格
18
54
  * @param props
19
55
  */
20
- export function AutoGrid(props) {
56
+ function AutoGrid(props) {
21
57
  const { children, cols: rawCols = 1, gap: rawGap = 0, isSquare = false, itemStyle, containerStyle } = props, extra = __rest(props, ["children", "cols", "gap", "isSquare", "itemStyle", "containerStyle"]);
22
58
  // 规范化,确保 cols >= 1
23
59
  const cols = Math.max(1, Math.floor(+rawCols) || 1);
24
- const gap = normalizeUnit(rawGap);
60
+ const gap = (0, cssUtil_1.normalizeUnit)(rawGap);
25
61
  // 将 children 分组为二维数组
26
- const gridData = useMemo(() => {
62
+ const gridData = (0, react_1.useMemo)(() => {
27
63
  const list = [];
28
- React.Children.forEach(children, (child) => {
64
+ react_1.default.Children.forEach(children, (child) => {
29
65
  if (child !== null && child !== undefined) {
30
66
  if (list.length === 0 || list[list.length - 1].length >= cols) {
31
67
  list.push([]);
@@ -43,20 +79,20 @@ export function AutoGrid(props) {
43
79
  return list;
44
80
  }, [children, cols]);
45
81
  // 缓存 item 宽度计算
46
- const itemWidth = useMemo(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
47
- return (_jsx("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => (_jsx("div", { css: [
48
- style.row,
82
+ const itemWidth = (0, react_1.useMemo)(() => `calc((100% - ${cols - 1} * ${gap}) / ${cols})`, [cols, gap]);
83
+ return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, extra, { css: containerStyle, children: gridData.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { css: [
84
+ style_1.style.row,
49
85
  { gap },
50
86
  rowIndex !== gridData.length - 1 ? { marginBottom: gap } : undefined,
51
87
  ], children: row.map((item, colIndex) => {
52
88
  const isPlaceholder = item === null;
53
89
  const boxCss = [
54
- style.itemBox,
90
+ style_1.style.itemBox,
55
91
  { width: itemWidth },
56
92
  isPlaceholder ? { visibility: 'hidden' } : undefined,
57
- isSquare ? style.itemBoxSquare : undefined,
93
+ isSquare ? style_1.style.itemBoxSquare : undefined,
58
94
  itemStyle,
59
95
  ];
60
- return isSquare ? (_jsx("div", { css: boxCss, children: _jsx("div", { css: style.itemInner, children: item }) }, colIndex)) : (_jsx("div", { css: boxCss, children: item }, colIndex));
96
+ return isSquare ? ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: (0, jsx_runtime_1.jsx)("div", { css: style_1.style.itemInner, children: item }) }, colIndex)) : ((0, jsx_runtime_1.jsx)("div", { css: boxCss, children: item }, colIndex));
61
97
  }) }, rowIndex))) })));
62
98
  }
@@ -1,14 +1,17 @@
1
- import { css } from "@emotion/react";
2
- export const style = {
3
- row: css({
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.style = void 0;
4
+ const react_1 = require("@emotion/react");
5
+ exports.style = {
6
+ row: (0, react_1.css)({
4
7
  display: "flex",
5
8
  width: "100%",
6
9
  }),
7
- itemBox: css({
10
+ itemBox: (0, react_1.css)({
8
11
  position: "relative",
9
12
  minWidth: 0,
10
13
  }),
11
- itemBoxSquare: css({
14
+ itemBoxSquare: (0, react_1.css)({
12
15
  "&:after,&::after": {
13
16
  content: "''",
14
17
  display: "block",
@@ -17,7 +20,7 @@ export const style = {
17
20
  paddingBottom: "100%",
18
21
  },
19
22
  }),
20
- itemInner: css({
23
+ itemInner: (0, react_1.css)({
21
24
  position: "absolute",
22
25
  left: 0,
23
26
  right: 0,
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __rest = (this && this.__rest) || function (s, e) {
2
3
  var t = {};
3
4
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,30 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
9
10
  }
10
11
  return t;
11
12
  };
12
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
13
- import { css } from '@emotion/react';
14
- import { useState, useEffect } from 'react';
15
- import { useInterval } from '../Effect/useInterval';
16
- import { style, Bubble } from './style';
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.CarouselNotice = CarouselNotice;
15
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
16
+ const react_1 = require("@emotion/react");
17
+ const react_2 = require("react");
18
+ const useInterval_1 = require("../Effect/useInterval");
19
+ const style_1 = require("./style");
17
20
  /**
18
21
  * 滚动循环轮播公告
19
22
  * @param props
20
23
  */
21
- export function CarouselNotice(props) {
24
+ function CarouselNotice(props) {
22
25
  const { width, height, justify = 'center', interval = 3000, duration = 200, list = [], containerStyle, wrapperStyle, itemStyle } = props, attrs = __rest(props, ["width", "height", "justify", "interval", "duration", "list", "containerStyle", "wrapperStyle", "itemStyle"]);
23
- const [current, setCurrent] = useState(0);
24
- const [animation, setAnimation] = useState(false);
26
+ const [current, setCurrent] = (0, react_2.useState)(0);
27
+ const [animation, setAnimation] = (0, react_2.useState)(false);
25
28
  /**
26
29
  * 一旦列表发生更新时,触发的逻辑
27
30
  */
28
- useEffect(() => {
31
+ (0, react_2.useEffect)(() => {
29
32
  setCurrent(0);
30
33
  setAnimation(false);
31
34
  }, [list]);
32
35
  /**
33
36
  * 每隔多少秒更新一次动画
34
37
  */
35
- useInterval(() => {
38
+ (0, useInterval_1.useInterval)(() => {
36
39
  setAnimation(true);
37
40
  }, list.length > 1 ? interval : null);
38
41
  /**
@@ -52,18 +55,18 @@ export function CarouselNotice(props) {
52
55
  else {
53
56
  justifyStyle.justifyContent = 'center';
54
57
  }
55
- const itemCss = [style.item, justifyStyle];
58
+ const itemCss = [style_1.style.item, justifyStyle];
56
59
  if (list.length === 1) {
57
- return (_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
60
+ return ((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
58
61
  }
59
62
  const showList = [];
60
63
  if (current === list.length - 1) {
61
- showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
62
- showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
64
+ showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[list.length - 1] }, current));
65
+ showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[0] }, 0));
63
66
  }
64
67
  else {
65
- showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current] }, current));
66
- showList.push(_jsx("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
68
+ showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current] }, current));
69
+ showList.push((0, jsx_runtime_1.jsx)("div", { css: [itemCss, itemStyle], children: list[current + 1] }, current + 1));
67
70
  }
68
71
  return showList;
69
72
  };
@@ -74,8 +77,8 @@ export function CarouselNotice(props) {
74
77
  if (!animation || list.length <= 1) {
75
78
  return null;
76
79
  }
77
- return css({
78
- animationName: Bubble,
80
+ return (0, react_1.css)({
81
+ animationName: style_1.Bubble,
79
82
  animationTimingFunction: 'linear',
80
83
  animationDuration: `${duration}ms`,
81
84
  });
@@ -92,5 +95,5 @@ export function CarouselNotice(props) {
92
95
  setAnimation(false);
93
96
  };
94
97
  return (Array.isArray(list) &&
95
- list.length > 0 && (_jsx("div", Object.assign({}, attrs, { css: [style.box, { width, height }, containerStyle], children: _jsx("div", { onAnimationEnd: animationEnd, css: [style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
98
+ list.length > 0 && ((0, jsx_runtime_1.jsx)("div", Object.assign({}, attrs, { css: [style_1.style.box, { width, height }, containerStyle], children: (0, jsx_runtime_1.jsx)("div", { onAnimationEnd: animationEnd, css: [style_1.style.wrapper, getAnimation(), wrapperStyle], children: showContent() }) }))));
96
99
  }
@@ -1,5 +1,8 @@
1
- import { keyframes } from "@emotion/react";
2
- export const Bubble = keyframes `
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.style = exports.Bubble = void 0;
4
+ const react_1 = require("@emotion/react");
5
+ exports.Bubble = (0, react_1.keyframes) `
3
6
  from {
4
7
  transform: translateY(0);
5
8
  }
@@ -7,7 +10,7 @@ export const Bubble = keyframes `
7
10
  transform: translateY(-50%);
8
11
  }
9
12
  `;
10
- export const style = {
13
+ exports.style = {
11
14
  box: {
12
15
  position: "relative",
13
16
  overflow: "hidden",
@@ -0,0 +1,3 @@
1
+ import type { ProvinceData, CityData } from './type';
2
+ export declare const provinceData: ProvinceData;
3
+ export declare const cityData: CityData;