@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.
- package/dist/CitySelector/CitySelectorCore.js +3 -3
- package/dist/ItemSelector/ItemSelector.css +120 -0
- package/dist/ItemSelector/ItemSelector.d.ts +4 -0
- package/dist/ItemSelector/ItemSelector.js +84 -0
- package/dist/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
- package/dist/ItemSelector/ItemSelector.miniapp.js +125 -0
- package/dist/ItemSelector/ItemSelector.types.d.ts +40 -0
- package/dist/ItemSelector/ItemSelector.types.js +15 -0
- package/dist/ItemSelector/ItemSelectorCore.d.ts +5 -0
- package/dist/ItemSelector/ItemSelectorCore.js +217 -0
- package/dist/ItemSelector/Selector/index.css +11 -0
- package/dist/ItemSelector/Selector/index.d.ts +9 -0
- package/dist/ItemSelector/Selector/index.js +48 -0
- package/dist/ItemSelector/index.d.ts +2 -0
- package/dist/ItemSelector/index.js +41 -0
- package/dist/ItemSelector/miniapp.css +4 -0
- package/dist/Modal/Modal.miniapp.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/es/CitySelector/CitySelectorCore.js +3 -3
- package/es/ItemSelector/ItemSelector.css +120 -0
- package/es/ItemSelector/ItemSelector.d.ts +4 -0
- package/es/ItemSelector/ItemSelector.js +57 -0
- package/es/ItemSelector/ItemSelector.miniapp.d.ts +5 -0
- package/es/ItemSelector/ItemSelector.miniapp.js +98 -0
- package/es/ItemSelector/ItemSelector.types.d.ts +40 -0
- package/es/ItemSelector/ItemSelector.types.js +1 -0
- package/es/ItemSelector/ItemSelectorCore.d.ts +5 -0
- package/es/ItemSelector/ItemSelectorCore.js +190 -0
- package/es/ItemSelector/Selector/index.css +11 -0
- package/es/ItemSelector/Selector/index.d.ts +9 -0
- package/es/ItemSelector/Selector/index.js +19 -0
- package/es/ItemSelector/index.d.ts +2 -0
- package/es/ItemSelector/index.js +6 -0
- package/es/ItemSelector/miniapp.css +4 -0
- package/es/Modal/Modal.miniapp.d.ts +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- 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
|
|
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,
|
|
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 },
|
|
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,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;
|