react-vant-nova 1.0.7 → 1.0.9
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/README.md +2 -2
- package/bundle/index.css +149 -0
- package/bundle/index.min.css +1 -1
- package/bundle/react-vant-nova.es.js +949 -728
- package/bundle/react-vant-nova.js +868 -646
- package/bundle/react-vant-nova.min.js +2 -2
- package/es/empty/Network.d.ts +1 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/radio/Radio.d.ts +1 -0
- package/es/radio/RadioGroup.d.ts +1 -0
- package/es/treeSelect/PropsType.d.ts +85 -0
- package/es/treeSelect/PropsType.js +1 -0
- package/es/treeSelect/TreeSelect.d.ts +4 -0
- package/es/treeSelect/TreeSelect.js +259 -0
- package/es/treeSelect/index.d.ts +5 -0
- package/es/treeSelect/index.js +4 -0
- package/es/treeSelect/style/index.css +149 -0
- package/es/treeSelect/style/var.css +0 -0
- package/es/utils/dom/render.js +12 -30
- package/es/utils/dom/render1.d.ts +9 -0
- package/es/utils/dom/render1.js +85 -0
- package/lib/empty/Network.d.ts +1 -0
- package/lib/index.css +149 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +12 -0
- package/lib/index.min.css +1 -1
- package/lib/radio/Radio.d.ts +1 -0
- package/lib/radio/RadioGroup.d.ts +1 -0
- package/lib/treeSelect/PropsType.d.ts +85 -0
- package/lib/treeSelect/PropsType.js +6 -0
- package/lib/treeSelect/TreeSelect.d.ts +4 -0
- package/lib/treeSelect/TreeSelect.js +291 -0
- package/lib/treeSelect/index.d.ts +5 -0
- package/lib/treeSelect/index.js +16 -0
- package/lib/treeSelect/style/index.css +149 -0
- package/lib/treeSelect/style/var.css +0 -0
- package/lib/utils/dom/render.js +20 -32
- package/lib/utils/dom/render1.d.ts +9 -0
- package/lib/utils/dom/render1.js +106 -0
- package/package.json +1 -1
package/lib/radio/Radio.d.ts
CHANGED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BaseTypeProps } from '../utils';
|
|
3
|
+
export declare type TreeSelectNode = {
|
|
4
|
+
/** 节点标题 */
|
|
5
|
+
title?: React.ReactNode;
|
|
6
|
+
/** 节点值 */
|
|
7
|
+
value?: string | number;
|
|
8
|
+
/** 节点键值 */
|
|
9
|
+
key?: string | number;
|
|
10
|
+
/** 子节点列表 */
|
|
11
|
+
children?: TreeSelectNode[];
|
|
12
|
+
/** 是否禁用节点 */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** 是否为叶子节点 */
|
|
15
|
+
isLeaf?: boolean;
|
|
16
|
+
/** 自定义图标 */
|
|
17
|
+
icon?: React.ReactNode;
|
|
18
|
+
/** 节点的自定义类名 */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** 节点的自定义样式 */
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
/** 扩展字段 */
|
|
23
|
+
[key: string]: any;
|
|
24
|
+
};
|
|
25
|
+
export declare type TreeSelectFieldNames = {
|
|
26
|
+
title?: string;
|
|
27
|
+
value?: string;
|
|
28
|
+
key?: string;
|
|
29
|
+
children?: string;
|
|
30
|
+
};
|
|
31
|
+
export interface TreeSelectProps extends Omit<BaseTypeProps, 'children'> {
|
|
32
|
+
/** 当前选中的值 */
|
|
33
|
+
value?: string | number | Array<string | number>;
|
|
34
|
+
/** 默认选中的值 */
|
|
35
|
+
defaultValue?: string | number | Array<string | number>;
|
|
36
|
+
/** 树形数据 */
|
|
37
|
+
treeData?: TreeSelectNode[];
|
|
38
|
+
/** 自定义树节点的字段 */
|
|
39
|
+
fieldNames?: TreeSelectFieldNames;
|
|
40
|
+
/** 选择框默认文字 */
|
|
41
|
+
placeholder?: string;
|
|
42
|
+
/** 是否支持多选 */
|
|
43
|
+
multiple?: boolean;
|
|
44
|
+
/** 是否可以清除 */
|
|
45
|
+
allowClear?: boolean;
|
|
46
|
+
/** 是否禁用 */
|
|
47
|
+
disabled?: boolean;
|
|
48
|
+
/** 高度,默认 272px */
|
|
49
|
+
height?: number | string;
|
|
50
|
+
/** 左侧导航宽度 */
|
|
51
|
+
navWidth?: number | string;
|
|
52
|
+
/** 自定义右侧区域内容 */
|
|
53
|
+
contentRender?: (item: TreeSelectNode) => React.ReactNode;
|
|
54
|
+
/** 选中项改变时触发 */
|
|
55
|
+
onChange?: (value: string | number | Array<string | number>, selectedNodes: TreeSelectNode[]) => void;
|
|
56
|
+
/** 点击左侧导航时触发 */
|
|
57
|
+
onNavClick?: (index: number) => void;
|
|
58
|
+
/** 左侧导航当前选中项的索引 */
|
|
59
|
+
activeIndex?: number;
|
|
60
|
+
/** 默认选中的左侧导航索引 */
|
|
61
|
+
defaultActiveIndex?: number;
|
|
62
|
+
/** 左侧导航样式 */
|
|
63
|
+
navStyle?: React.CSSProperties;
|
|
64
|
+
/** 右侧内容样式 */
|
|
65
|
+
contentStyle?: React.CSSProperties;
|
|
66
|
+
/** 左侧导航类名 */
|
|
67
|
+
navClassName?: string;
|
|
68
|
+
/** 右侧内容类名 */
|
|
69
|
+
contentClassName?: string;
|
|
70
|
+
children?: React.ReactNode;
|
|
71
|
+
}
|
|
72
|
+
export interface TreeSelectItemProps {
|
|
73
|
+
/** 节点数据 */
|
|
74
|
+
node: TreeSelectNode;
|
|
75
|
+
/** 是否选中 */
|
|
76
|
+
selected: boolean;
|
|
77
|
+
/** 是否多选模式 */
|
|
78
|
+
multiple?: boolean;
|
|
79
|
+
/** 层级 */
|
|
80
|
+
level?: number;
|
|
81
|
+
/** 点击回调 */
|
|
82
|
+
onClick?: (node: TreeSelectNode) => void;
|
|
83
|
+
/** 字段映射 */
|
|
84
|
+
fieldNames?: TreeSelectFieldNames;
|
|
85
|
+
}
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
function _react() {
|
|
8
|
+
const data = _interopRequireWildcard(require("react"));
|
|
9
|
+
_react = function () {
|
|
10
|
+
return data;
|
|
11
|
+
};
|
|
12
|
+
return data;
|
|
13
|
+
}
|
|
14
|
+
function _jsxRuntime() {
|
|
15
|
+
const data = require("react/jsx-runtime");
|
|
16
|
+
_jsxRuntime = function () {
|
|
17
|
+
return data;
|
|
18
|
+
};
|
|
19
|
+
return data;
|
|
20
|
+
}
|
|
21
|
+
function _clsx() {
|
|
22
|
+
const data = _interopRequireDefault(require("clsx"));
|
|
23
|
+
_clsx = function () {
|
|
24
|
+
return data;
|
|
25
|
+
};
|
|
26
|
+
return data;
|
|
27
|
+
}
|
|
28
|
+
function _icons() {
|
|
29
|
+
const data = require("@react-vant/icons");
|
|
30
|
+
_icons = function () {
|
|
31
|
+
return data;
|
|
32
|
+
};
|
|
33
|
+
return data;
|
|
34
|
+
}
|
|
35
|
+
var _utils = require("../utils");
|
|
36
|
+
var _hooks = require("../hooks");
|
|
37
|
+
var _useMergedState = _interopRequireDefault(require("../hooks/use-merged-state"));
|
|
38
|
+
var _getDefaultProps = require("../utils/get-default-props");
|
|
39
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
40
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
41
|
+
const [bem] = (0, _utils.createNamespace)('tree-select');
|
|
42
|
+
// TreeSelect 子项组件
|
|
43
|
+
const TreeSelectItem = ({
|
|
44
|
+
node,
|
|
45
|
+
selected,
|
|
46
|
+
multiple,
|
|
47
|
+
level = 0,
|
|
48
|
+
onClick,
|
|
49
|
+
fieldNames
|
|
50
|
+
}) => {
|
|
51
|
+
const {
|
|
52
|
+
title: titleKey = 'title',
|
|
53
|
+
value: valueKey = 'value',
|
|
54
|
+
children: childrenKey = 'children'
|
|
55
|
+
} = fieldNames || {};
|
|
56
|
+
const title = node[titleKey];
|
|
57
|
+
const children = node[childrenKey];
|
|
58
|
+
const hasChildren = children && children.length > 0;
|
|
59
|
+
const handleClick = () => {
|
|
60
|
+
if (!node.disabled) {
|
|
61
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(node);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
return (0, _jsxRuntime().jsxs)("div", Object.assign({
|
|
65
|
+
className: (0, _clsx().default)(bem('item-wrapper'))
|
|
66
|
+
}, {
|
|
67
|
+
children: [(0, _jsxRuntime().jsxs)("div", Object.assign({
|
|
68
|
+
className: (0, _clsx().default)(bem('item', {
|
|
69
|
+
active: selected,
|
|
70
|
+
disabled: node.disabled,
|
|
71
|
+
level: `level-${level}`
|
|
72
|
+
}), node.className),
|
|
73
|
+
style: node.style,
|
|
74
|
+
onClick: handleClick
|
|
75
|
+
}, {
|
|
76
|
+
children: [(0, _jsxRuntime().jsxs)("div", Object.assign({
|
|
77
|
+
className: (0, _clsx().default)(bem('item-content'))
|
|
78
|
+
}, {
|
|
79
|
+
children: [node.icon && (0, _jsxRuntime().jsx)("span", Object.assign({
|
|
80
|
+
className: (0, _clsx().default)(bem('item-icon'))
|
|
81
|
+
}, {
|
|
82
|
+
children: node.icon
|
|
83
|
+
})), (0, _jsxRuntime().jsx)("span", Object.assign({
|
|
84
|
+
className: (0, _clsx().default)(bem('item-title'))
|
|
85
|
+
}, {
|
|
86
|
+
children: title
|
|
87
|
+
}))]
|
|
88
|
+
})), selected && !multiple && (0, _jsxRuntime().jsx)(_icons().Success, {
|
|
89
|
+
className: (0, _clsx().default)(bem('item-selected-icon'))
|
|
90
|
+
}), multiple && (0, _jsxRuntime().jsx)("input", {
|
|
91
|
+
type: 'checkbox',
|
|
92
|
+
checked: selected,
|
|
93
|
+
disabled: node.disabled,
|
|
94
|
+
className: (0, _clsx().default)(bem('item-checkbox')),
|
|
95
|
+
readOnly: true
|
|
96
|
+
})]
|
|
97
|
+
})), hasChildren && (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
98
|
+
className: (0, _clsx().default)(bem('item-children'))
|
|
99
|
+
}, {
|
|
100
|
+
children: children.map((child, index) => (0, _jsxRuntime().jsx)(TreeSelectItem, {
|
|
101
|
+
node: child,
|
|
102
|
+
selected: false,
|
|
103
|
+
multiple: multiple,
|
|
104
|
+
level: level + 1,
|
|
105
|
+
onClick: onClick,
|
|
106
|
+
fieldNames: fieldNames
|
|
107
|
+
}, child[valueKey] || index))
|
|
108
|
+
}))]
|
|
109
|
+
}));
|
|
110
|
+
};
|
|
111
|
+
const TreeSelect = p => {
|
|
112
|
+
const props = (0, _getDefaultProps.mergeProps)(p, {
|
|
113
|
+
treeData: [],
|
|
114
|
+
height: 272,
|
|
115
|
+
navWidth: 80,
|
|
116
|
+
defaultActiveIndex: 0,
|
|
117
|
+
fieldNames: {
|
|
118
|
+
title: 'title',
|
|
119
|
+
value: 'value',
|
|
120
|
+
key: 'key',
|
|
121
|
+
children: 'children'
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
const {
|
|
125
|
+
title: titleKey,
|
|
126
|
+
value: valueKey,
|
|
127
|
+
key: keyKey,
|
|
128
|
+
children: childrenKey
|
|
129
|
+
} = (0, _utils.extend)({
|
|
130
|
+
title: 'title',
|
|
131
|
+
value: 'value',
|
|
132
|
+
key: 'key',
|
|
133
|
+
children: 'children'
|
|
134
|
+
}, props.fieldNames);
|
|
135
|
+
// 当前选中的值
|
|
136
|
+
const [selectedValue, setSelectedValue] = (0, _useMergedState.default)({
|
|
137
|
+
value: props.value,
|
|
138
|
+
defaultValue: props.defaultValue
|
|
139
|
+
});
|
|
140
|
+
// 左侧导航当前选中的索引
|
|
141
|
+
const [activeIndex, setActiveIndex] = (0, _useMergedState.default)({
|
|
142
|
+
value: props.activeIndex,
|
|
143
|
+
defaultValue: props.defaultActiveIndex
|
|
144
|
+
});
|
|
145
|
+
// 获取所有顶级节点(左侧导航)
|
|
146
|
+
const navItems = (0, _react().useMemo)(() => {
|
|
147
|
+
return props.treeData || [];
|
|
148
|
+
}, [props.treeData]);
|
|
149
|
+
// 获取当前激活项的子节点(右侧内容)
|
|
150
|
+
const contentItems = (0, _react().useMemo)(() => {
|
|
151
|
+
const currentNav = navItems[activeIndex];
|
|
152
|
+
return (currentNav === null || currentNav === void 0 ? void 0 : currentNav[childrenKey]) || [];
|
|
153
|
+
}, [navItems, activeIndex, childrenKey]);
|
|
154
|
+
// 判断值是否选中
|
|
155
|
+
const isValueSelected = (0, _hooks.useMemoizedFn)(value => {
|
|
156
|
+
if (props.multiple) {
|
|
157
|
+
return Array.isArray(selectedValue) && selectedValue.includes(value);
|
|
158
|
+
}
|
|
159
|
+
return selectedValue === value;
|
|
160
|
+
});
|
|
161
|
+
// 查找节点
|
|
162
|
+
const findNode = (0, _hooks.useMemoizedFn)((nodes, value) => {
|
|
163
|
+
for (const node of nodes) {
|
|
164
|
+
if (node[valueKey] === value) {
|
|
165
|
+
return node;
|
|
166
|
+
}
|
|
167
|
+
if (node[childrenKey]) {
|
|
168
|
+
const found = findNode(node[childrenKey], value);
|
|
169
|
+
if (found) return found;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
return null;
|
|
173
|
+
});
|
|
174
|
+
// 获取所有选中的节点
|
|
175
|
+
const getSelectedNodes = (0, _hooks.useMemoizedFn)(value => {
|
|
176
|
+
const values = Array.isArray(value) ? value : [value];
|
|
177
|
+
const nodes = [];
|
|
178
|
+
values.forEach(val => {
|
|
179
|
+
const node = findNode(props.treeData || [], val);
|
|
180
|
+
if (node) nodes.push(node);
|
|
181
|
+
});
|
|
182
|
+
return nodes;
|
|
183
|
+
});
|
|
184
|
+
// 左侧导航点击
|
|
185
|
+
const handleNavClick = (0, _hooks.useMemoizedFn)(index => {
|
|
186
|
+
var _a;
|
|
187
|
+
setActiveIndex(index);
|
|
188
|
+
(_a = props.onNavClick) === null || _a === void 0 ? void 0 : _a.call(props, index);
|
|
189
|
+
});
|
|
190
|
+
// 右侧内容项点击
|
|
191
|
+
const handleItemClick = (0, _hooks.useMemoizedFn)(node => {
|
|
192
|
+
var _a;
|
|
193
|
+
const value = node[valueKey];
|
|
194
|
+
let newValue;
|
|
195
|
+
if (props.multiple) {
|
|
196
|
+
const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
|
|
197
|
+
if (currentValues.includes(value)) {
|
|
198
|
+
newValue = currentValues.filter(v => v !== value);
|
|
199
|
+
} else {
|
|
200
|
+
newValue = [...currentValues, value];
|
|
201
|
+
}
|
|
202
|
+
} else {
|
|
203
|
+
newValue = value;
|
|
204
|
+
}
|
|
205
|
+
setSelectedValue(newValue);
|
|
206
|
+
const selectedNodes = getSelectedNodes(newValue);
|
|
207
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue, selectedNodes);
|
|
208
|
+
});
|
|
209
|
+
// 渲染左侧导航
|
|
210
|
+
const renderNav = () => (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
211
|
+
className: (0, _clsx().default)(bem('nav'), props.navClassName),
|
|
212
|
+
style: Object.assign({
|
|
213
|
+
width: props.navWidth,
|
|
214
|
+
height: props.height
|
|
215
|
+
}, props.navStyle)
|
|
216
|
+
}, {
|
|
217
|
+
children: navItems.map((item, index) => {
|
|
218
|
+
const isActive = index === activeIndex;
|
|
219
|
+
const title = item[titleKey];
|
|
220
|
+
return (0, _jsxRuntime().jsxs)("div", Object.assign({
|
|
221
|
+
className: (0, _clsx().default)(bem('nav-item', {
|
|
222
|
+
active: isActive,
|
|
223
|
+
disabled: item.disabled
|
|
224
|
+
}), item.className),
|
|
225
|
+
style: item.style,
|
|
226
|
+
onClick: () => !item.disabled && handleNavClick(index)
|
|
227
|
+
}, {
|
|
228
|
+
children: [item.icon && (0, _jsxRuntime().jsx)("span", Object.assign({
|
|
229
|
+
className: (0, _clsx().default)(bem('nav-icon'))
|
|
230
|
+
}, {
|
|
231
|
+
children: item.icon
|
|
232
|
+
})), (0, _jsxRuntime().jsx)("span", Object.assign({
|
|
233
|
+
className: (0, _clsx().default)(bem('nav-text'))
|
|
234
|
+
}, {
|
|
235
|
+
children: title
|
|
236
|
+
})), item.badge && (0, _jsxRuntime().jsx)("span", Object.assign({
|
|
237
|
+
className: (0, _clsx().default)(bem('nav-badge'))
|
|
238
|
+
}, {
|
|
239
|
+
children: item.badge
|
|
240
|
+
}))]
|
|
241
|
+
}), item[keyKey] || item[valueKey] || index);
|
|
242
|
+
})
|
|
243
|
+
}));
|
|
244
|
+
// 渲染右侧内容
|
|
245
|
+
const renderContent = () => {
|
|
246
|
+
const currentNav = navItems[activeIndex];
|
|
247
|
+
if (props.contentRender && currentNav) {
|
|
248
|
+
return (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
249
|
+
className: (0, _clsx().default)(bem('content'), props.contentClassName),
|
|
250
|
+
style: Object.assign({
|
|
251
|
+
height: props.height
|
|
252
|
+
}, props.contentStyle)
|
|
253
|
+
}, {
|
|
254
|
+
children: props.contentRender(currentNav)
|
|
255
|
+
}));
|
|
256
|
+
}
|
|
257
|
+
return (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
258
|
+
className: (0, _clsx().default)(bem('content'), props.contentClassName),
|
|
259
|
+
style: Object.assign({
|
|
260
|
+
height: props.height
|
|
261
|
+
}, props.contentStyle)
|
|
262
|
+
}, {
|
|
263
|
+
children: contentItems.length > 0 ? (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
264
|
+
className: (0, _clsx().default)(bem('items'))
|
|
265
|
+
}, {
|
|
266
|
+
children: contentItems.map((item, index) => {
|
|
267
|
+
const value = item[valueKey];
|
|
268
|
+
const selected = isValueSelected(value);
|
|
269
|
+
return (0, _jsxRuntime().jsx)(TreeSelectItem, {
|
|
270
|
+
node: item,
|
|
271
|
+
selected: selected,
|
|
272
|
+
multiple: props.multiple,
|
|
273
|
+
onClick: handleItemClick,
|
|
274
|
+
fieldNames: props.fieldNames
|
|
275
|
+
}, item[keyKey] || value || index);
|
|
276
|
+
})
|
|
277
|
+
})) : (0, _jsxRuntime().jsx)("div", Object.assign({
|
|
278
|
+
className: (0, _clsx().default)(bem('content-empty'))
|
|
279
|
+
}, {
|
|
280
|
+
children: props.placeholder || '暂无数据'
|
|
281
|
+
}))
|
|
282
|
+
}));
|
|
283
|
+
};
|
|
284
|
+
return (0, _jsxRuntime().jsxs)("div", Object.assign({
|
|
285
|
+
className: (0, _clsx().default)(props.className, bem()),
|
|
286
|
+
style: props.style
|
|
287
|
+
}, {
|
|
288
|
+
children: [renderNav(), renderContent()]
|
|
289
|
+
}));
|
|
290
|
+
};
|
|
291
|
+
var _default = exports.default = TreeSelect;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TreeSelect", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TreeSelect.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
exports.default = void 0;
|
|
13
|
+
require("./style/index.css");
|
|
14
|
+
var _TreeSelect = _interopRequireDefault(require("./TreeSelect"));
|
|
15
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
var _default = exports.default = _TreeSelect.default;
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--rv-tree-select-font-size: 14px;
|
|
3
|
+
--rv-tree-select-nav-width: 80px;
|
|
4
|
+
--rv-tree-select-nav-background-color: var(--rv-gray-1);
|
|
5
|
+
--rv-tree-select-content-background-color: #fff;
|
|
6
|
+
--rv-tree-select-nav-item-padding: 14px 12px;
|
|
7
|
+
--rv-tree-select-item-height: 48px;
|
|
8
|
+
--rv-tree-select-item-active-color: #f44336;
|
|
9
|
+
--rv-tree-select-item-disabled-color: #c8c9cc;
|
|
10
|
+
--rv-tree-select-item-selected-size: 16px;
|
|
11
|
+
--rv-tree-select-height: 300px;
|
|
12
|
+
}
|
|
13
|
+
.rv-tree-select {
|
|
14
|
+
display: flex;
|
|
15
|
+
font-size: var(--rv-tree-select-font-size);
|
|
16
|
+
user-select: none;
|
|
17
|
+
}
|
|
18
|
+
.rv-tree-select__nav {
|
|
19
|
+
flex: none;
|
|
20
|
+
overflow-y: auto;
|
|
21
|
+
background-color: var(--rv-tree-select-nav-background-color);
|
|
22
|
+
-webkit-overflow-scrolling: touch;
|
|
23
|
+
}
|
|
24
|
+
.rv-tree-select__nav-item {
|
|
25
|
+
position: relative;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
padding: var(--rv-tree-select-nav-item-padding);
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
transition: background-color 0.2s;
|
|
31
|
+
}
|
|
32
|
+
.rv-tree-select__nav-item:active {
|
|
33
|
+
opacity: 0.7;
|
|
34
|
+
}
|
|
35
|
+
.rv-tree-select__nav-item--active {
|
|
36
|
+
color: var(--rv-tree-select-item-active-color);
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
background-color: var(--rv-tree-select-content-background-color);
|
|
39
|
+
}
|
|
40
|
+
.rv-tree-select__nav-item--active::before {
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 50%;
|
|
43
|
+
left: 0;
|
|
44
|
+
width: 3px;
|
|
45
|
+
height: 16px;
|
|
46
|
+
background-color: var(--rv-tree-select-item-active-color);
|
|
47
|
+
transform: translateY(-50%);
|
|
48
|
+
content: '';
|
|
49
|
+
}
|
|
50
|
+
.rv-tree-select__nav-item--disabled {
|
|
51
|
+
color: var(--rv-tree-select-item-disabled-color);
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
}
|
|
54
|
+
.rv-tree-select__nav-item--disabled:active {
|
|
55
|
+
opacity: 1;
|
|
56
|
+
}
|
|
57
|
+
.rv-tree-select__nav-icon {
|
|
58
|
+
margin-right: 4px;
|
|
59
|
+
}
|
|
60
|
+
.rv-tree-select__nav-text {
|
|
61
|
+
flex: 1;
|
|
62
|
+
word-break: break-all;
|
|
63
|
+
}
|
|
64
|
+
.rv-tree-select__nav-badge {
|
|
65
|
+
margin-left: 4px;
|
|
66
|
+
padding: 0 6px;
|
|
67
|
+
font-size: 12px;
|
|
68
|
+
color: #fff;
|
|
69
|
+
background-color: var(--rv-tree-select-item-active-color);
|
|
70
|
+
border-radius: 10px;
|
|
71
|
+
}
|
|
72
|
+
.rv-tree-select__content {
|
|
73
|
+
flex: 1;
|
|
74
|
+
overflow-y: auto;
|
|
75
|
+
background-color: var(--rv-tree-select-content-background-color);
|
|
76
|
+
-webkit-overflow-scrolling: touch;
|
|
77
|
+
}
|
|
78
|
+
.rv-tree-select__items {
|
|
79
|
+
padding: 12px 16px;
|
|
80
|
+
}
|
|
81
|
+
.rv-tree-select__content-empty {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
height: 100%;
|
|
86
|
+
color: var(--rv-tree-select-item-disabled-color);
|
|
87
|
+
}
|
|
88
|
+
.rv-tree-select__item-wrapper {
|
|
89
|
+
margin-bottom: 12px;
|
|
90
|
+
}
|
|
91
|
+
.rv-tree-select__item-wrapper:last-child {
|
|
92
|
+
margin-bottom: 0;
|
|
93
|
+
}
|
|
94
|
+
.rv-tree-select__item {
|
|
95
|
+
position: relative;
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: space-between;
|
|
99
|
+
min-height: var(--rv-tree-select-item-height);
|
|
100
|
+
padding: 10px 12px;
|
|
101
|
+
background-color: var(--rv-tree-select-nav-background-color);
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
transition: all 0.2s;
|
|
105
|
+
}
|
|
106
|
+
.rv-tree-select__item:active {
|
|
107
|
+
opacity: 0.7;
|
|
108
|
+
}
|
|
109
|
+
.rv-tree-select__item--active {
|
|
110
|
+
color: var(--rv-tree-select-item-active-color);
|
|
111
|
+
background-color: rgba(238, 10, 36, 0.08);
|
|
112
|
+
font-weight: 500;
|
|
113
|
+
}
|
|
114
|
+
.rv-tree-select__item--disabled {
|
|
115
|
+
color: var(--rv-tree-select-item-disabled-color);
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
.rv-tree-select__item--disabled:active {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
.rv-tree-select__item-content {
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
flex: 1;
|
|
125
|
+
}
|
|
126
|
+
.rv-tree-select__item-icon {
|
|
127
|
+
margin-right: 8px;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
}
|
|
131
|
+
.rv-tree-select__item-title {
|
|
132
|
+
flex: 1;
|
|
133
|
+
}
|
|
134
|
+
.rv-tree-select__item-selected-icon {
|
|
135
|
+
margin-left: 8px;
|
|
136
|
+
font-size: var(--rv-tree-select-item-selected-size);
|
|
137
|
+
color: var(--rv-tree-select-item-active-color);
|
|
138
|
+
}
|
|
139
|
+
.rv-tree-select__item-checkbox {
|
|
140
|
+
margin-left: 8px;
|
|
141
|
+
width: 18px;
|
|
142
|
+
height: 18px;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
}
|
|
145
|
+
.rv-tree-select__item-children {
|
|
146
|
+
margin-top: 8px;
|
|
147
|
+
padding-left: 20px;
|
|
148
|
+
border-left: 2px solid var(--rv-tree-select-nav-background-color);
|
|
149
|
+
}
|
|
File without changes
|
package/lib/utils/dom/render.js
CHANGED
|
@@ -19,26 +19,22 @@ function ReactDOM() {
|
|
|
19
19
|
};
|
|
20
20
|
return data;
|
|
21
21
|
}
|
|
22
|
+
function _client() {
|
|
23
|
+
const data = require("react-dom/client");
|
|
24
|
+
_client = function () {
|
|
25
|
+
return data;
|
|
26
|
+
};
|
|
27
|
+
return data;
|
|
28
|
+
}
|
|
22
29
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
23
30
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
|
-
//
|
|
31
|
+
// Copy from rc-util to fix React 19 support
|
|
32
|
+
// https://github.com/react-component/util/blob/master/src/React/render.ts
|
|
25
33
|
const fullClone = Object.assign({}, ReactDOM());
|
|
26
34
|
const {
|
|
35
|
+
render: reactRender,
|
|
27
36
|
unmountComponentAtNode
|
|
28
37
|
} = fullClone;
|
|
29
|
-
let createRoot;
|
|
30
|
-
// 确保在React 18+版本中获取createRoot
|
|
31
|
-
if (fullClone.createRoot) {
|
|
32
|
-
createRoot = fullClone.createRoot;
|
|
33
|
-
} else {
|
|
34
|
-
// 如果createRoot不可用,尝试从react-dom/client导入
|
|
35
|
-
try {
|
|
36
|
-
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
37
|
-
createRoot = require('react-dom/client').createRoot;
|
|
38
|
-
} catch (e) {
|
|
39
|
-
// 保留原有行为以兼容旧版本
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
38
|
function toggleWarning(skip) {
|
|
43
39
|
const {
|
|
44
40
|
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
|
|
@@ -48,34 +44,25 @@ function toggleWarning(skip) {
|
|
|
48
44
|
}
|
|
49
45
|
}
|
|
50
46
|
const MARK = '__react_vant_root__';
|
|
51
|
-
/************* ✨ Windsurf Command ⭐ *************/
|
|
52
|
-
/**
|
|
53
|
-
* 使用ReactDOM.render的替代方案,仅用于旧版本React
|
|
54
|
-
* 如果ReactDOM.render不可用,将降级使用createRoot(如果可用)
|
|
55
|
-
/******* 57770e2e-0e81-41a7-aee6-9175a4a59062 *******/
|
|
56
47
|
function legacyRender(node, container) {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
if (fullClone.render) {
|
|
48
|
+
if (reactRender) {
|
|
49
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
60
50
|
// @ts-ignore
|
|
61
|
-
|
|
62
|
-
} else {
|
|
63
|
-
// 如果ReactDOM.render不可用,降级使用createRoot(如果可用)
|
|
64
|
-
if (createRoot) {
|
|
65
|
-
concurrentRender(node, container);
|
|
66
|
-
}
|
|
51
|
+
reactRender(node, container);
|
|
67
52
|
}
|
|
68
53
|
}
|
|
69
54
|
function concurrentRender(node, container) {
|
|
70
55
|
toggleWarning(true);
|
|
71
|
-
const root = container[MARK] || createRoot(container);
|
|
56
|
+
const root = container[MARK] || (0, _client().createRoot)(container);
|
|
72
57
|
toggleWarning(false);
|
|
58
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
73
59
|
// @ts-ignore
|
|
74
60
|
root.render(node);
|
|
75
61
|
container[MARK] = root;
|
|
76
62
|
}
|
|
77
63
|
function render(node, container) {
|
|
78
|
-
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
if (_client().createRoot) {
|
|
79
66
|
concurrentRender(node, container);
|
|
80
67
|
return;
|
|
81
68
|
}
|
|
@@ -83,7 +70,7 @@ function render(node, container) {
|
|
|
83
70
|
}
|
|
84
71
|
// ========================== Unmount =========================
|
|
85
72
|
function legacyUnmount(container) {
|
|
86
|
-
return unmountComponentAtNode(container);
|
|
73
|
+
return unmountComponentAtNode ? unmountComponentAtNode(container) : false;
|
|
87
74
|
}
|
|
88
75
|
function concurrentUnmount(container) {
|
|
89
76
|
return (0, _tslib().__awaiter)(this, void 0, void 0, function* () {
|
|
@@ -96,7 +83,8 @@ function concurrentUnmount(container) {
|
|
|
96
83
|
});
|
|
97
84
|
}
|
|
98
85
|
function unmount(container) {
|
|
99
|
-
|
|
86
|
+
// @ts-ignore
|
|
87
|
+
if (_client().createRoot || container[MARK]) {
|
|
100
88
|
return concurrentUnmount(container);
|
|
101
89
|
}
|
|
102
90
|
return legacyUnmount(container);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import type { Root } from 'react-dom/client';
|
|
3
|
+
declare const MARK = "__react_vant_root__";
|
|
4
|
+
declare type ContainerType = (Element | DocumentFragment) & {
|
|
5
|
+
[MARK]?: Root;
|
|
6
|
+
};
|
|
7
|
+
export declare function render(node: ReactElement, container: ContainerType): void;
|
|
8
|
+
export declare function unmount(container: ContainerType): boolean | Promise<void>;
|
|
9
|
+
export {};
|