@unicom-cloud/ui 0.8.104 → 0.8.106
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/Segmented.js +4 -2
- package/form/FormItem.js +1 -1
- package/package.json +1 -1
- package/segmented/index.js +93 -90
- package/style.css +1 -1
- package/types/pc/segmented/interface.d.ts +6 -0
- package/version/index.js +1 -1
package/Segmented.js
CHANGED
|
@@ -3,9 +3,11 @@ import "react";
|
|
|
3
3
|
import "./config-provider/ConfigProvider.js";
|
|
4
4
|
import "./components/common/hooks/useMergeProps.js";
|
|
5
5
|
import "@unicom-cloud/utils/class-name";
|
|
6
|
+
import "./components/common/utils/is.js";
|
|
6
7
|
import "./components/common/utils/resizeObserver.js";
|
|
7
8
|
import "./config-provider/context.js";
|
|
8
|
-
import
|
|
9
|
+
import "@unicom-cloud/utils/is";
|
|
10
|
+
import { default as u } from "./segmented/index.js";
|
|
9
11
|
export {
|
|
10
|
-
|
|
12
|
+
u as default
|
|
11
13
|
};
|
package/form/FormItem.js
CHANGED
|
@@ -184,7 +184,6 @@ const we = ({
|
|
|
184
184
|
L ? /* @__PURE__ */ i(
|
|
185
185
|
G,
|
|
186
186
|
{
|
|
187
|
-
...e.labelCol || r.labelCol,
|
|
188
187
|
className: C(
|
|
189
188
|
oe,
|
|
190
189
|
e.labelCol?.className,
|
|
@@ -194,6 +193,7 @@ const we = ({
|
|
|
194
193
|
}
|
|
195
194
|
),
|
|
196
195
|
flex: A ? 0 : void 0,
|
|
196
|
+
...e.labelCol || r.labelCol,
|
|
197
197
|
children: /* @__PURE__ */ i(
|
|
198
198
|
he,
|
|
199
199
|
{
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@unicom-cloud/ui","version":"0.8.
|
|
1
|
+
{"name":"@unicom-cloud/ui","version":"0.8.106","dependencies":{"@unicom-cloud/icons":"latest"},"peerDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","dayjs":"^1.11.10","lodash":"^4.17.21","uuid":"^11.1.0","qrcode.react":"^4.2.0"},"peerDependenciesMeta":{},"type":"module","types":"types/pc/index.d.ts","main":"./index.js","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}
|
package/segmented/index.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { jsxs as D, jsx as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsxs as D, jsx as v, Fragment as ne } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as re, useContext as oe, useMemo as ie, useState as P, useRef as A, useCallback as se, useEffect as $ } from "react";
|
|
3
3
|
import "../config-provider/ConfigProvider.js";
|
|
4
4
|
import ae from "../components/common/hooks/useMergeProps.js";
|
|
5
5
|
import j from "@unicom-cloud/utils/class-name";
|
|
6
|
-
import
|
|
7
|
-
import le from "../
|
|
8
|
-
|
|
6
|
+
import "../components/common/utils/is.js";
|
|
7
|
+
import { resizeObserver as le } from "../components/common/utils/resizeObserver.js";
|
|
8
|
+
import ce from "../config-provider/context.js";
|
|
9
|
+
import { isNil as ue, isFunction as de } from "@unicom-cloud/utils/is";
|
|
10
|
+
const fe = {
|
|
9
11
|
options: [],
|
|
10
12
|
size: "medium",
|
|
11
13
|
mode: "default",
|
|
@@ -14,56 +16,57 @@ const ce = {
|
|
|
14
16
|
direction: "horizontal",
|
|
15
17
|
showIndicator: !0,
|
|
16
18
|
animationDuration: 300
|
|
17
|
-
},
|
|
18
|
-
(B,
|
|
19
|
-
const { getPrefixCls: E, componentConfig: M, rtl:
|
|
19
|
+
}, pe = re(
|
|
20
|
+
(B, p) => {
|
|
21
|
+
const { getPrefixCls: E, componentConfig: M, rtl: F } = oe(ce), K = ae(
|
|
20
22
|
B,
|
|
21
|
-
|
|
23
|
+
fe,
|
|
22
24
|
M?.Segmented
|
|
23
25
|
), {
|
|
24
|
-
style:
|
|
25
|
-
className:
|
|
26
|
+
style: L,
|
|
27
|
+
className: U,
|
|
26
28
|
options: O = [],
|
|
27
|
-
defaultValue:
|
|
29
|
+
defaultValue: c,
|
|
28
30
|
value: R,
|
|
29
31
|
size: H,
|
|
30
|
-
mode:
|
|
31
|
-
disabled:
|
|
32
|
-
block:
|
|
33
|
-
direction:
|
|
34
|
-
showIndicator:
|
|
35
|
-
animationDuration:
|
|
32
|
+
mode: k,
|
|
33
|
+
disabled: m,
|
|
34
|
+
block: T,
|
|
35
|
+
direction: h,
|
|
36
|
+
showIndicator: C,
|
|
37
|
+
animationDuration: _,
|
|
36
38
|
name: x,
|
|
37
|
-
|
|
39
|
+
immediateTrigger: q,
|
|
40
|
+
onChange: u,
|
|
38
41
|
...G
|
|
39
|
-
} =
|
|
42
|
+
} = K, i = ie(() => O.map((e) => typeof e == "string" ? { value: e, label: e } : e), [O]), [J, S] = P(() => c && i.some((e) => e.value === c) ? c : i[0]?.value || ""), [Q, b] = P({}), d = A(null), I = A([]), V = A(!1), r = E?.("segmented"), W = j(
|
|
40
43
|
r,
|
|
41
44
|
{
|
|
42
|
-
[`${r}-block`]:
|
|
43
|
-
[`${r}-disabled`]:
|
|
44
|
-
[`${r}-rtl`]:
|
|
45
|
-
[`${r}-${
|
|
46
|
-
[`${r}-${
|
|
45
|
+
[`${r}-block`]: T,
|
|
46
|
+
[`${r}-disabled`]: m,
|
|
47
|
+
[`${r}-rtl`]: F,
|
|
48
|
+
[`${r}-${k}`]: k,
|
|
49
|
+
[`${r}-${h}`]: h
|
|
47
50
|
},
|
|
48
|
-
|
|
49
|
-
),
|
|
50
|
-
if (
|
|
51
|
-
|
|
51
|
+
U
|
|
52
|
+
), g = R !== void 0, a = g ? R : J, w = se(() => {
|
|
53
|
+
if (!C || !d.current) {
|
|
54
|
+
b((s) => ({ ...s, opacity: 0 }));
|
|
52
55
|
return;
|
|
53
56
|
}
|
|
54
|
-
const e =
|
|
55
|
-
(
|
|
57
|
+
const e = i.findIndex(
|
|
58
|
+
(s) => s?.value === a
|
|
56
59
|
);
|
|
57
60
|
if (e === -1) {
|
|
58
|
-
|
|
61
|
+
b((s) => ({ ...s, opacity: 0 }));
|
|
59
62
|
return;
|
|
60
63
|
}
|
|
61
|
-
const o =
|
|
64
|
+
const o = I.current[e];
|
|
62
65
|
if (!o) {
|
|
63
|
-
|
|
66
|
+
b((s) => ({ ...s, opacity: 0 }));
|
|
64
67
|
return;
|
|
65
68
|
}
|
|
66
|
-
const n =
|
|
69
|
+
const n = d.current.getBoundingClientRect(), t = o.getBoundingClientRect(), l = h === "vertical" ? {
|
|
67
70
|
width: t.width,
|
|
68
71
|
// 垂直模式下宽度撑满
|
|
69
72
|
top: t.top - n.top,
|
|
@@ -74,15 +77,15 @@ const ce = {
|
|
|
74
77
|
height: t.height
|
|
75
78
|
// 水平模式下高度撑满
|
|
76
79
|
};
|
|
77
|
-
|
|
80
|
+
b({
|
|
78
81
|
...l,
|
|
79
82
|
opacity: 1
|
|
80
83
|
});
|
|
81
|
-
}, [i,
|
|
82
|
-
o ||
|
|
83
|
-
},
|
|
84
|
-
if (
|
|
85
|
-
const n =
|
|
84
|
+
}, [a, i, C, h]), z = (e, o) => {
|
|
85
|
+
o || m || (g || S(e), u?.(e));
|
|
86
|
+
}, X = (e, o) => {
|
|
87
|
+
if (m) return;
|
|
88
|
+
const n = i.length;
|
|
86
89
|
if (n === 0) return;
|
|
87
90
|
let t = o;
|
|
88
91
|
switch (e.key) {
|
|
@@ -103,114 +106,114 @@ const ce = {
|
|
|
103
106
|
default:
|
|
104
107
|
return;
|
|
105
108
|
}
|
|
106
|
-
for (; t !== o &&
|
|
109
|
+
for (; t !== o && i[t]?.disabled; )
|
|
107
110
|
t = (t + (e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1) + n) % n;
|
|
108
|
-
const l =
|
|
109
|
-
l && l !==
|
|
111
|
+
const l = i[t]?.value;
|
|
112
|
+
l && l !== a && (z(l), I.current[t]?.focus());
|
|
110
113
|
};
|
|
111
|
-
|
|
114
|
+
$(() => {
|
|
112
115
|
if (!V.current) {
|
|
113
116
|
V.current = !0;
|
|
114
117
|
return;
|
|
115
118
|
}
|
|
116
|
-
if (!
|
|
117
|
-
const e =
|
|
118
|
-
|
|
119
|
+
if (!i.some((e) => e.value === a)) {
|
|
120
|
+
const e = i[0]?.value || "";
|
|
121
|
+
g || S(e), u?.(e);
|
|
119
122
|
}
|
|
120
|
-
}, [
|
|
121
|
-
|
|
122
|
-
}, [
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
123
|
+
}, [i, a, g, u]), $(() => {
|
|
124
|
+
q && !ue(c) && de(u) && u(c);
|
|
125
|
+
}, []), $(() => {
|
|
126
|
+
w();
|
|
127
|
+
}, [a, i, w]), $(() => {
|
|
128
|
+
if (!d.current) return;
|
|
129
|
+
const e = le(
|
|
130
|
+
[d.current],
|
|
126
131
|
() => {
|
|
127
|
-
|
|
132
|
+
w();
|
|
128
133
|
}
|
|
129
134
|
);
|
|
130
135
|
return () => {
|
|
131
136
|
e();
|
|
132
137
|
};
|
|
133
|
-
}, [
|
|
134
|
-
const
|
|
138
|
+
}, [w]);
|
|
139
|
+
const Y = (e, o) => {
|
|
135
140
|
if (e.render)
|
|
136
141
|
return e.render(e, o);
|
|
137
142
|
const n = !e.label && !!e.icon;
|
|
138
|
-
return /* @__PURE__ */ D(
|
|
139
|
-
e.icon && /* @__PURE__ */
|
|
140
|
-
!n && e.label && /* @__PURE__ */
|
|
143
|
+
return /* @__PURE__ */ D(ne, { children: [
|
|
144
|
+
e.icon && /* @__PURE__ */ v("span", { className: `${r}-option-icon`, children: e.icon }),
|
|
145
|
+
!n && e.label && /* @__PURE__ */ v("span", { className: `${r}-option-label`, children: e.label })
|
|
141
146
|
] });
|
|
142
147
|
};
|
|
143
148
|
return /* @__PURE__ */ D(
|
|
144
149
|
"div",
|
|
145
150
|
{
|
|
146
151
|
ref: (e) => {
|
|
147
|
-
typeof
|
|
152
|
+
typeof p == "function" ? p(e) : p && (p.current = e), d.current = e;
|
|
148
153
|
},
|
|
149
154
|
...G,
|
|
150
|
-
style:
|
|
151
|
-
className:
|
|
155
|
+
style: L,
|
|
156
|
+
className: W,
|
|
152
157
|
role: "radiogroup",
|
|
153
158
|
children: [
|
|
154
|
-
!Array.isArray(
|
|
159
|
+
!Array.isArray(i) || i.length === 0 ? null : i.map((e, o) => {
|
|
155
160
|
if (!e) return null;
|
|
156
161
|
const {
|
|
157
162
|
value: n,
|
|
158
163
|
label: t,
|
|
159
164
|
disabled: l,
|
|
160
|
-
icon:
|
|
161
|
-
render:
|
|
162
|
-
...
|
|
163
|
-
} = e,
|
|
165
|
+
icon: s,
|
|
166
|
+
render: he,
|
|
167
|
+
...Z
|
|
168
|
+
} = e, f = n === a, y = l || m, ee = !t && !!s, te = [t, n, o].filter(Boolean).join("-");
|
|
164
169
|
return /* @__PURE__ */ D(
|
|
165
170
|
"button",
|
|
166
171
|
{
|
|
167
|
-
ref: (
|
|
172
|
+
ref: (N) => I.current[o] = N,
|
|
168
173
|
className: j(
|
|
169
174
|
`${r}-option`,
|
|
170
175
|
`${r}-option-${H}`,
|
|
171
|
-
`${r}-option-${
|
|
176
|
+
`${r}-option-${k}`,
|
|
172
177
|
{
|
|
173
|
-
[`${r}-option-active`]:
|
|
174
|
-
[`${r}-option-disabled`]:
|
|
175
|
-
[`${r}-option-icon-only`]:
|
|
178
|
+
[`${r}-option-active`]: f,
|
|
179
|
+
[`${r}-option-disabled`]: y,
|
|
180
|
+
[`${r}-option-icon-only`]: ee
|
|
176
181
|
}
|
|
177
182
|
),
|
|
178
|
-
onClick: () => z(n,
|
|
179
|
-
onKeyDown: (
|
|
180
|
-
disabled:
|
|
183
|
+
onClick: () => z(n, y),
|
|
184
|
+
onKeyDown: (N) => X(N, o),
|
|
185
|
+
disabled: y,
|
|
181
186
|
role: "radio",
|
|
182
|
-
"aria-checked":
|
|
183
|
-
"aria-disabled":
|
|
184
|
-
tabIndex:
|
|
185
|
-
...
|
|
187
|
+
"aria-checked": f,
|
|
188
|
+
"aria-disabled": y,
|
|
189
|
+
tabIndex: f ? 0 : -1,
|
|
190
|
+
...Z,
|
|
186
191
|
children: [
|
|
187
|
-
x && /* @__PURE__ */
|
|
192
|
+
x && /* @__PURE__ */ v(
|
|
188
193
|
"input",
|
|
189
194
|
{
|
|
190
195
|
type: "radio",
|
|
191
196
|
name: x,
|
|
192
197
|
value: n,
|
|
193
|
-
checked:
|
|
194
|
-
onChange: () => {
|
|
195
|
-
},
|
|
198
|
+
checked: f,
|
|
196
199
|
className: `${r}-input`,
|
|
197
200
|
tabIndex: -1,
|
|
198
201
|
"aria-hidden": "true"
|
|
199
202
|
}
|
|
200
203
|
),
|
|
201
|
-
|
|
204
|
+
Y(e, f)
|
|
202
205
|
]
|
|
203
206
|
},
|
|
204
|
-
|
|
207
|
+
te
|
|
205
208
|
);
|
|
206
209
|
}),
|
|
207
|
-
|
|
210
|
+
C && /* @__PURE__ */ v(
|
|
208
211
|
"div",
|
|
209
212
|
{
|
|
210
213
|
className: `${r}-indicator`,
|
|
211
214
|
style: {
|
|
212
215
|
...Q,
|
|
213
|
-
transitionDuration: `${
|
|
216
|
+
transitionDuration: `${_}ms`
|
|
214
217
|
}
|
|
215
218
|
}
|
|
216
219
|
)
|
|
@@ -219,7 +222,7 @@ const ce = {
|
|
|
219
222
|
);
|
|
220
223
|
}
|
|
221
224
|
);
|
|
222
|
-
|
|
225
|
+
pe.displayName = "Segmented";
|
|
223
226
|
export {
|
|
224
|
-
|
|
227
|
+
pe as default
|
|
225
228
|
};
|