@bifrostui/react 1.4.6 → 1.4.7

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 (39) hide show
  1. package/dist/CitySelector/CitySelectorCore.js +3 -3
  2. package/dist/ItemSelector/ItemSelector.css +120 -0
  3. package/dist/ItemSelector/ItemSelector.d.ts +4 -0
  4. package/dist/ItemSelector/ItemSelector.js +84 -0
  5. package/dist/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
  6. package/dist/ItemSelector/ItemSelector.miniapp.js +125 -0
  7. package/dist/ItemSelector/ItemSelector.types.d.ts +40 -0
  8. package/dist/ItemSelector/ItemSelector.types.js +15 -0
  9. package/dist/ItemSelector/ItemSelectorCore.d.ts +5 -0
  10. package/dist/ItemSelector/ItemSelectorCore.js +217 -0
  11. package/dist/ItemSelector/Selector/index.css +11 -0
  12. package/dist/ItemSelector/Selector/index.d.ts +9 -0
  13. package/dist/ItemSelector/Selector/index.js +48 -0
  14. package/dist/ItemSelector/index.d.ts +2 -0
  15. package/dist/ItemSelector/index.js +41 -0
  16. package/dist/ItemSelector/miniapp.css +4 -0
  17. package/dist/Modal/Modal.miniapp.d.ts +1 -1
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.js +2 -0
  20. package/es/CitySelector/CitySelectorCore.js +3 -3
  21. package/es/ItemSelector/ItemSelector.css +120 -0
  22. package/es/ItemSelector/ItemSelector.d.ts +4 -0
  23. package/es/ItemSelector/ItemSelector.js +57 -0
  24. package/es/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
  25. package/es/ItemSelector/ItemSelector.miniapp.js +98 -0
  26. package/es/ItemSelector/ItemSelector.types.d.ts +40 -0
  27. package/es/ItemSelector/ItemSelector.types.js +1 -0
  28. package/es/ItemSelector/ItemSelectorCore.d.ts +5 -0
  29. package/es/ItemSelector/ItemSelectorCore.js +190 -0
  30. package/es/ItemSelector/Selector/index.css +11 -0
  31. package/es/ItemSelector/Selector/index.d.ts +9 -0
  32. package/es/ItemSelector/Selector/index.js +19 -0
  33. package/es/ItemSelector/index.d.ts +2 -0
  34. package/es/ItemSelector/index.js +6 -0
  35. package/es/ItemSelector/miniapp.css +4 -0
  36. package/es/Modal/Modal.miniapp.d.ts +1 -1
  37. package/es/index.d.ts +1 -0
  38. package/es/index.js +1 -0
  39. package/package.json +5 -5
@@ -174,12 +174,12 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
174
174
  const closeHandler = (e) => {
175
175
  onClose == null ? void 0 : onClose(e);
176
176
  };
177
- const renderTitile = (title, titleCode) => {
177
+ const renderTitle = (title, titleCode) => {
178
178
  const parseTitle = (titleCode || title).toUpperCase();
179
179
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title == null ? void 0 : title.toUpperCase());
180
180
  };
181
181
  const renderCity = (citys, title, titleCode) => {
182
- return /* @__PURE__ */ import_react.default.createElement("div", null, renderTitile(title, titleCode), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {
182
+ return /* @__PURE__ */ import_react.default.createElement("div", null, renderTitle(title, titleCode), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {
183
183
  return /* @__PURE__ */ import_react.default.createElement(import_Selector.default, { key: index, city, onSelect: selectHandler });
184
184
  })));
185
185
  };
@@ -200,7 +200,7 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
200
200
  ) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, (hotCities == null ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, (cities == null ? void 0 : cities.length) > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-list-container` }, cities.map((item, cityGroupIndex) => {
201
201
  if (!(item == null ? void 0 : item.groupName))
202
202
  return null;
203
- return /* @__PURE__ */ import_react.default.createElement("div", { key: cityGroupIndex }, renderTitile(item.groupName, item.groupName), /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-list` }, item.cities.map((city, cityIndex) => {
203
+ return /* @__PURE__ */ import_react.default.createElement("div", { key: cityGroupIndex }, renderTitle(item.groupName, item.groupName), /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-list` }, item.cities.map((city, cityIndex) => {
204
204
  return /* @__PURE__ */ import_react.default.createElement(
205
205
  "li",
206
206
  {
@@ -0,0 +1,120 @@
1
+ :root,
2
+ page,
3
+ xhs-page {
4
+ --bui-item-selector-item-width: 111px;
5
+ --bui-item-selector-item-height: 36px;
6
+ --bui-item-selector-item-border-radius: 20px;
7
+ --bui-item-selector-item-margin: 4.5px 0 4.5px 9px;
8
+ --bui-item-selector-title-height: 45px;
9
+ --bui-item-selector-title-line-height: 45px;
10
+ --bui-item-selector-btn-close-size: 45px;
11
+ --bui-item-selector-btn-close-font-size: 20px;
12
+ --bui-item-selector-container-with-title-height: calc(100% - var(--bui-item-selector-title-height));
13
+ --bui-item-selector-item-container-min-height: 500px;
14
+ --bui-item-selector-select-item-buttons-padding: 7.5px 0 0 3px;
15
+ --bui-item-selector-select-item-title-line-height: 15px;
16
+ --bui-item-selector-list-item-height: 45px;
17
+ --bui-item-selector-item-index-has-title-top: calc(50% + var(--bui-item-selector-title-height) / 2);
18
+ --bui-item-selector-index-item-height: 20px;
19
+ }
20
+ .bui-item-selector {
21
+ font-family: var(--bui-font-family);
22
+ height: 100%;
23
+ position: relative;
24
+ }
25
+ .bui-item-selector-title {
26
+ width: 100%;
27
+ height: var(--bui-item-selector-title-height);
28
+ color: var(--bui-color-fg-default);
29
+ font-size: var(--bui-title-size-3);
30
+ line-height: var(--bui-item-selector-title-line-height);
31
+ text-align: center;
32
+ position: sticky;
33
+ top: 0;
34
+ z-index: 1004;
35
+ border-bottom: solid 1px var(--bui-color-border-default);
36
+ background-color: var(--bui-color-bg-view);
37
+ }
38
+ .bui-item-selector-btn-close {
39
+ position: absolute;
40
+ top: 0;
41
+ right: 0;
42
+ width: var(--bui-item-selector-btn-close-size);
43
+ height: var(--bui-item-selector-btn-close-size);
44
+ color: var(--bui-color-fg-muted);
45
+ text-align: center;
46
+ font-size: var(--bui-item-selector-btn-close-font-size);
47
+ }
48
+ .bui-item-selector-scroll-view-container {
49
+ height: 100%;
50
+ }
51
+ .bui-item-selector-scroll-view-container.container-has-title {
52
+ height: var(--bui-item-selector-container-with-title-height);
53
+ }
54
+ .bui-item-selector-all-item {
55
+ min-height: var(--bui-item-selector-item-container-min-height);
56
+ font-size: var(--bui-text-size-2);
57
+ width: 100%;
58
+ background: var(--bui-color-bg-view);
59
+ align-self: flex-start;
60
+ }
61
+ .bui-item-selector-all-item .select-item-buttons {
62
+ display: flex;
63
+ flex-flow: wrap;
64
+ padding: var(--bui-item-selector-select-item-buttons-padding);
65
+ }
66
+ .bui-item-selector-all-item .select-item-title {
67
+ font-size: var(--bui-title-size-4);
68
+ line-height: var(--bui-item-selector-select-item-title-line-height);
69
+ font-weight: var(--bui-font-weight-bold);
70
+ padding-left: var(--bui-spacing-lg);
71
+ padding-top: var(--bui-spacing-md);
72
+ }
73
+ .bui-item-selector-list {
74
+ padding-left: var(--bui-spacing-lg);
75
+ list-style-type: none;
76
+ }
77
+ .bui-item-selector-list-item {
78
+ height: var(--bui-item-selector-list-item-height);
79
+ font-size: var(--bui-title-size-4);
80
+ display: flex;
81
+ align-items: center;
82
+ }
83
+ .bui-item-selector-list-item:not(:last-child) {
84
+ border-bottom: 0.5px solid var(--bui-color-border-default);
85
+ }
86
+ .bui-item-selector-index-container {
87
+ z-index: 1001;
88
+ position: absolute;
89
+ white-space: nowrap;
90
+ right: 0;
91
+ top: 50%;
92
+ width: 40px;
93
+ will-change: transform;
94
+ transform: translate(0, -50%);
95
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
96
+ }
97
+ .bui-item-selector-index-container.left-in {
98
+ opacity: 1;
99
+ transform: translate(0, -50%);
100
+ }
101
+ .bui-item-selector-index-container.item-index-has-title {
102
+ top: var(--bui-item-selector-item-index-has-title-top);
103
+ }
104
+ .bui-item-selector-index-container ul {
105
+ margin: 0;
106
+ padding: 0;
107
+ float: left;
108
+ width: 100%;
109
+ touch-action: none;
110
+ }
111
+ .bui-item-selector-index-container li {
112
+ list-style: none;
113
+ height: var(--bui-item-selector-index-item-height);
114
+ text-align: center;
115
+ font-size: var(--bui-text-size-3);
116
+ color: var(--bui-color-info, --bui-color-info);
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ }
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ItemSelectorProps } from './ItemSelector.types';
3
+ declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ export default ItemSelector;
@@ -0,0 +1,84 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __export = (target, all) => {
25
+ for (var name in all)
26
+ __defProp(target, name, { get: all[name], enumerable: true });
27
+ };
28
+ var __copyProps = (to, from, except, desc) => {
29
+ if (from && typeof from === "object" || typeof from === "function") {
30
+ for (let key of __getOwnPropNames(from))
31
+ if (!__hasOwnProp.call(to, key) && key !== except)
32
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
33
+ }
34
+ return to;
35
+ };
36
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
37
+ // If the importer is in node compatibility mode or this is not an ESM
38
+ // file that has been converted to a CommonJS file using a Babel-
39
+ // compatible transform (i.e. "__esModule" has not been set), then set
40
+ // "default" to the CommonJS "module.exports" for node compatibility.
41
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
42
+ mod
43
+ ));
44
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
45
+ var ItemSelector_exports = {};
46
+ __export(ItemSelector_exports, {
47
+ default: () => ItemSelector_default
48
+ });
49
+ module.exports = __toCommonJS(ItemSelector_exports);
50
+ var import_react = __toESM(require("react"));
51
+ var import_ItemSelectorCore = __toESM(require("./ItemSelectorCore"));
52
+ const ItemSelector = /* @__PURE__ */ import_react.default.forwardRef(
53
+ (props, ref) => {
54
+ const { items } = props;
55
+ const [height, setHeight] = (0, import_react.useState)("");
56
+ const touchHandler = (e, scrollToCode) => {
57
+ var _a;
58
+ const t = document.elementFromPoint(
59
+ e.changedTouches[0].clientX,
60
+ e.changedTouches[0].clientY
61
+ );
62
+ const code = (_a = t == null ? void 0 : t.dataset) == null ? void 0 : _a.code;
63
+ scrollToCode(code);
64
+ };
65
+ (0, import_react.useEffect)(() => {
66
+ var _a;
67
+ if (!(items == null ? void 0 : items.length) || height)
68
+ return;
69
+ const screenHeight = window.innerHeight || document.documentElement.clientHeight;
70
+ const domHeight = (_a = document.querySelector(".bui-item-selector-scroll-view-container")) == null ? void 0 : _a.getBoundingClientRect().height;
71
+ setHeight(`${domHeight / screenHeight * 100}vh`);
72
+ }, [items]);
73
+ return /* @__PURE__ */ import_react.default.createElement(
74
+ import_ItemSelectorCore.default,
75
+ __spreadProps(__spreadValues({}, props), {
76
+ ref,
77
+ touchHandler,
78
+ height
79
+ })
80
+ );
81
+ }
82
+ );
83
+ ItemSelector.displayName = "BuiItemSelector";
84
+ var ItemSelector_default = ItemSelector;
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ItemSelectorProps } from './ItemSelector.types';
3
+ import './miniapp.less';
4
+ declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
+ export default ItemSelector;
@@ -0,0 +1,125 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __export = (target, all) => {
25
+ for (var name in all)
26
+ __defProp(target, name, { get: all[name], enumerable: true });
27
+ };
28
+ var __copyProps = (to, from, except, desc) => {
29
+ if (from && typeof from === "object" || typeof from === "function") {
30
+ for (let key of __getOwnPropNames(from))
31
+ if (!__hasOwnProp.call(to, key) && key !== except)
32
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
33
+ }
34
+ return to;
35
+ };
36
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
37
+ // If the importer is in node compatibility mode or this is not an ESM
38
+ // file that has been converted to a CommonJS file using a Babel-
39
+ // compatible transform (i.e. "__esModule" has not been set), then set
40
+ // "default" to the CommonJS "module.exports" for node compatibility.
41
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
42
+ mod
43
+ ));
44
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
45
+ var ItemSelector_miniapp_exports = {};
46
+ __export(ItemSelector_miniapp_exports, {
47
+ default: () => ItemSelector_miniapp_default
48
+ });
49
+ module.exports = __toCommonJS(ItemSelector_miniapp_exports);
50
+ var import_react = __toESM(require("react"));
51
+ var import_taro = __toESM(require("@tarojs/taro"));
52
+ var import_ItemSelectorCore = __toESM(require("./ItemSelectorCore"));
53
+ var import_miniapp = require("./miniapp.css");
54
+ const ItemSelector = /* @__PURE__ */ import_react.default.forwardRef(
55
+ (props, ref) => {
56
+ const { items } = props;
57
+ const containerTop = (0, import_react.useRef)(0);
58
+ const codeHeight = (0, import_react.useRef)(0);
59
+ const [height, setHeight] = (0, import_react.useState)("");
60
+ const queryContainerTop = (cbk) => {
61
+ const query = import_taro.default.createSelectorQuery();
62
+ query.select(".bui-item-selector-index-container").boundingClientRect();
63
+ query.exec((res) => {
64
+ var _a;
65
+ containerTop.current = (_a = res[0]) == null ? void 0 : _a.top;
66
+ cbk == null ? void 0 : cbk();
67
+ });
68
+ };
69
+ (0, import_react.useEffect)(() => {
70
+ if ((items == null ? void 0 : items.length) === 0 || codeHeight.current)
71
+ return;
72
+ setTimeout(() => {
73
+ const query = import_taro.default.createSelectorQuery();
74
+ query.select(".bui-item-selector-index-item").boundingClientRect();
75
+ query.exec((res) => {
76
+ var _a;
77
+ codeHeight.current = (_a = res[0]) == null ? void 0 : _a.height;
78
+ });
79
+ }, 300);
80
+ }, [items, height]);
81
+ (0, import_react.useEffect)(() => {
82
+ if (!(items == null ? void 0 : items.length) || height)
83
+ return;
84
+ const { screenHeight } = import_taro.default.getSystemInfoSync();
85
+ const query = import_taro.default.createSelectorQuery();
86
+ query.select(".bui-item-selector-scroll-view-container").boundingClientRect();
87
+ query.exec((codeRect) => {
88
+ var _a;
89
+ const domHeight = (_a = codeRect == null ? void 0 : codeRect[0]) == null ? void 0 : _a.height;
90
+ setHeight(`${domHeight / screenHeight * 100}vh`);
91
+ });
92
+ }, [items]);
93
+ const parseIndex = (length, index) => {
94
+ if (index <= 0)
95
+ return 0;
96
+ if (index >= length - 1)
97
+ return length - 1;
98
+ return index;
99
+ };
100
+ const pxToCode = (clientY, scrollToCode, codeGroup) => {
101
+ let index = Math.floor(
102
+ (clientY - containerTop.current) / codeHeight.current
103
+ );
104
+ index = parseIndex(codeGroup.length, index);
105
+ const codeItem = codeGroup[index];
106
+ scrollToCode(codeItem.code || codeItem);
107
+ };
108
+ const touchHandler = (event, scrollToCode, codeGroup) => {
109
+ const { clientY } = event.changedTouches[0];
110
+ queryContainerTop(() => {
111
+ pxToCode(clientY, scrollToCode, codeGroup);
112
+ });
113
+ };
114
+ return /* @__PURE__ */ import_react.default.createElement(
115
+ import_ItemSelectorCore.default,
116
+ __spreadProps(__spreadValues({}, props), {
117
+ ref,
118
+ touchHandler,
119
+ height
120
+ })
121
+ );
122
+ }
123
+ );
124
+ ItemSelector.displayName = "BuiItemSelector";
125
+ var ItemSelector_miniapp_default = ItemSelector;
@@ -0,0 +1,40 @@
1
+ /// <reference types="react" />
2
+ import { OverrideProps } from '@bifrostui/types';
3
+ export type itemType = {
4
+ /** Item名 */
5
+ name: string;
6
+ };
7
+ export type ItemGroup = {
8
+ /** Item列表 */
9
+ items: itemType[];
10
+ /** 组名 */
11
+ groupName?: string;
12
+ /** 索引字母 */
13
+ indexName?: string;
14
+ /** 索引Code */
15
+ indexCode?: string;
16
+ /** 是否平铺 */
17
+ isFlat?: boolean;
18
+ };
19
+ export type ItemSelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
20
+ props: P & {
21
+ /** Item列表 */
22
+ items: ItemGroup[];
23
+ /** 禁用展示索引 默认false 即展示索引 */
24
+ disableIndex?: boolean;
25
+ /** 头部标题 */
26
+ title?: string;
27
+ /** 选择Item回调 */
28
+ onSelect: (e: React.SyntheticEvent, data: {
29
+ item: itemType;
30
+ group: ItemGroup;
31
+ }) => void;
32
+ /** 和title配合使用,头部右侧的关闭回调 */
33
+ onClose?: (e: React.SyntheticEvent) => void;
34
+ };
35
+ defaultComponent: D;
36
+ }, D>;
37
+ export type ItemSelectorCoreProps = ItemSelectorProps & {
38
+ touchHandler: any;
39
+ height?: string;
40
+ };
@@ -0,0 +1,15 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+ var ItemSelector_types_exports = {};
15
+ module.exports = __toCommonJS(ItemSelector_types_exports);
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ItemSelectorCoreProps } from './ItemSelector.types';
3
+ import './ItemSelector.less';
4
+ declare const ItemSelector: React.ForwardRefExoticComponent<Omit<ItemSelectorCoreProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
+ export default ItemSelector;
@@ -0,0 +1,217 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
33
+ var __export = (target, all) => {
34
+ for (var name in all)
35
+ __defProp(target, name, { get: all[name], enumerable: true });
36
+ };
37
+ var __copyProps = (to, from, except, desc) => {
38
+ if (from && typeof from === "object" || typeof from === "function") {
39
+ for (let key of __getOwnPropNames(from))
40
+ if (!__hasOwnProp.call(to, key) && key !== except)
41
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
42
+ }
43
+ return to;
44
+ };
45
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
46
+ // If the importer is in node compatibility mode or this is not an ESM
47
+ // file that has been converted to a CommonJS file using a Babel-
48
+ // compatible transform (i.e. "__esModule" has not been set), then set
49
+ // "default" to the CommonJS "module.exports" for node compatibility.
50
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
51
+ mod
52
+ ));
53
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
54
+ var ItemSelectorCore_exports = {};
55
+ __export(ItemSelectorCore_exports, {
56
+ default: () => ItemSelectorCore_default
57
+ });
58
+ module.exports = __toCommonJS(ItemSelectorCore_exports);
59
+ var import_react = __toESM(require("react"));
60
+ var import_clsx = __toESM(require("clsx"));
61
+ var import_utils = require("@bifrostui/utils");
62
+ var import_ScrollView = __toESM(require("../ScrollView"));
63
+ var import_Selector = __toESM(require("./Selector"));
64
+ var import_ItemSelector2 = require("./ItemSelector.css");
65
+ const DEVIATION_HEIGHT = "6vmin";
66
+ const prefixCls = "bui-item-selector";
67
+ const ItemSelector = /* @__PURE__ */ import_react.default.forwardRef(
68
+ (props, ref) => {
69
+ const _a = props, {
70
+ className,
71
+ title: pageTitle,
72
+ items,
73
+ disableIndex,
74
+ touchHandler,
75
+ height,
76
+ onSelect,
77
+ onClose
78
+ } = _a, others = __objRest(_a, [
79
+ "className",
80
+ "title",
81
+ "items",
82
+ "disableIndex",
83
+ "touchHandler",
84
+ "height",
85
+ "onSelect",
86
+ "onClose"
87
+ ]);
88
+ const itemRef = (0, import_react.useRef)(null);
89
+ const nodeRef = (0, import_utils.useForkRef)(ref, itemRef);
90
+ (0, import_utils.useTouchEmulator)(itemRef.current);
91
+ const [codeGroup, setCodeGroup] = (0, import_react.useState)([]);
92
+ const [codeShow, setCodeShow] = (0, import_react.useState)(false);
93
+ const [targetId, setTargetId] = (0, import_react.useState)("");
94
+ const getGroupName = (item) => item.groupName || "";
95
+ const getIdxName = (item) => typeof item.indexName === "string" ? item.indexName : getGroupName(item);
96
+ const getIdxCode = (item) => typeof item.indexCode === "string" ? item.indexCode : getIdxName(item);
97
+ const renderTitle = (item) => {
98
+ const title = getGroupName(item);
99
+ return title ? /* @__PURE__ */ import_react.default.createElement(
100
+ "div",
101
+ {
102
+ className: "select-item-title",
103
+ id: disableIndex ? "" : getIdxCode(item)
104
+ },
105
+ title
106
+ ) : null;
107
+ };
108
+ (0, import_react.useEffect)(() => {
109
+ if (!items || (items == null ? void 0 : items.length) === 0 || codeGroup.length !== 0 || disableIndex) {
110
+ return;
111
+ }
112
+ setCodeGroup(
113
+ items.map((item) => {
114
+ return {
115
+ name: getIdxName(item),
116
+ code: getIdxCode(item)
117
+ };
118
+ })
119
+ );
120
+ }, [items]);
121
+ (0, import_react.useEffect)(() => {
122
+ if (codeGroup.length === 0)
123
+ return;
124
+ setCodeShow(true);
125
+ }, [codeGroup]);
126
+ const scrollToCode = (targetCode) => {
127
+ if (!targetCode)
128
+ return;
129
+ setTargetId((oldCode) => {
130
+ if (targetCode !== oldCode)
131
+ return targetCode;
132
+ return oldCode;
133
+ });
134
+ };
135
+ const touchCbk = (e) => {
136
+ e.stopPropagation();
137
+ touchHandler == null ? void 0 : touchHandler(e, scrollToCode, codeGroup);
138
+ };
139
+ const codeClickHandler = (rightCode) => {
140
+ setTargetId(rightCode);
141
+ };
142
+ const scrollHandler = (0, import_utils.throttle)(() => {
143
+ if (targetId) {
144
+ setTargetId(void 0);
145
+ }
146
+ }, 500);
147
+ const closeHandler = (e) => {
148
+ onClose == null ? void 0 : onClose(e);
149
+ };
150
+ return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref: nodeRef }, others), pageTitle ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, pageTitle, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-btn-close`, onClick: closeHandler }, "\u2715")) : null, /* @__PURE__ */ import_react.default.createElement(
151
+ import_ScrollView.default,
152
+ {
153
+ scrollIntoView: targetId,
154
+ scrollY: true,
155
+ className: (0, import_clsx.default)(`${prefixCls}-scroll-view-container tph`, {
156
+ "container-has-title": pageTitle
157
+ }),
158
+ onScroll: scrollHandler
159
+ },
160
+ /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-all-item` }, (items == null ? void 0 : items.length) > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-list-container` }, items.map((item, itemGroupIndex) => {
161
+ if (!(item == null ? void 0 : item.groupName))
162
+ return null;
163
+ return /* @__PURE__ */ import_react.default.createElement("div", { key: itemGroupIndex }, renderTitle(item), item.isFlat ? /* @__PURE__ */ import_react.default.createElement("div", { className: "select-item-buttons" }, item.items.map((it, index) => {
164
+ return /* @__PURE__ */ import_react.default.createElement(
165
+ import_Selector.default,
166
+ {
167
+ key: index,
168
+ item: it,
169
+ onSelect: (e) => {
170
+ onSelect(e, { item: it, group: item });
171
+ }
172
+ }
173
+ );
174
+ })) : /* @__PURE__ */ import_react.default.createElement("ul", { className: `${prefixCls}-list` }, item.items.map((it, itemIndex) => {
175
+ return /* @__PURE__ */ import_react.default.createElement(
176
+ "li",
177
+ {
178
+ className: `${prefixCls}-list-item`,
179
+ key: itemIndex,
180
+ onClick: (e) => {
181
+ onSelect(e, { item: it, group: item });
182
+ }
183
+ },
184
+ it.name
185
+ );
186
+ })));
187
+ })) : null)
188
+ ), (codeGroup == null ? void 0 : codeGroup.length) > 0 && height ? /* @__PURE__ */ import_react.default.createElement(
189
+ "div",
190
+ {
191
+ className: (0, import_clsx.default)(`${prefixCls}-index-container`, {
192
+ "left-in": codeShow,
193
+ "item-index-has-title": pageTitle
194
+ })
195
+ },
196
+ /* @__PURE__ */ import_react.default.createElement("ul", { onTouchMove: touchCbk, className: `${prefixCls}-index-list` }, codeGroup.map((item, idx) => {
197
+ return item.name ? /* @__PURE__ */ import_react.default.createElement(
198
+ "li",
199
+ {
200
+ className: `${prefixCls}-index-item`,
201
+ key: idx,
202
+ "data-code": item.code,
203
+ onClick: () => {
204
+ codeClickHandler(item.code);
205
+ },
206
+ style: {
207
+ maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
208
+ }
209
+ },
210
+ item.name
211
+ ) : null;
212
+ }))
213
+ ) : null);
214
+ }
215
+ );
216
+ ItemSelector.displayName = "BuiItemSelector";
217
+ var ItemSelectorCore_default = ItemSelector;
@@ -0,0 +1,11 @@
1
+ .bui-item-selector-item {
2
+ width: var(--bui-item-selector-item-width);
3
+ height: var(--bui-item-selector-item-height);
4
+ display: inline-flex;
5
+ justify-content: center;
6
+ align-items: center;
7
+ border-radius: var(--bui-item-selector-item-border-radius);
8
+ margin: var(--bui-item-selector-item-margin);
9
+ background-color: var(--bui-color-bg-default);
10
+ font-size: var(--bui-text-size-2);
11
+ }
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { itemType } from '../ItemSelector.types';
3
+ import './index.less';
4
+ type propsType = {
5
+ item: itemType;
6
+ onSelect: (e: React.SyntheticEvent, item: itemType) => void;
7
+ };
8
+ declare const Selector: (props: propsType) => React.JSX.Element;
9
+ export default Selector;