@pisell/private-materials 6.2.35 → 6.2.37
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/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +1 -1
- package/build/lowcode/preview.js +13 -29
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +6 -6
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +8 -8
- package/es/components/appointmentBooking/components/Content/index.js +1 -1
- package/es/components/appointmentBooking/components/Content/index.less +3 -3
- package/es/components/appointmentBooking/components/Services/index.js +2 -2
- package/es/components/appointmentBooking/index.js +8 -2
- package/es/components/booking/components/voucher/index.js +5 -0
- package/es/components/booking/deposit/ClientItem/index.js +1 -1
- package/es/components/booking/deposit/DepositItem/index.js +1 -1
- package/es/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/es/components/booking/forms/single/RenderValueById.js +68 -17
- package/es/components/booking/forms/single/index.less +67 -1
- package/es/components/booking/hooks/useQuotation.js +1 -1
- package/es/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/es/components/booking/info/clientVariant/utils.js +7 -0
- package/es/components/booking/info/clientVariant/vertical/index.js +3 -2
- package/es/components/booking/info2/service/addService/utils.js +2 -1
- package/es/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/es/components/booking/info2/service/editService/index.js +37 -29
- package/es/components/booking/info2/utilsByBooking.js +4 -4
- package/es/components/booking/locales.d.ts +3 -0
- package/es/components/booking/locales.js +6 -3
- package/es/components/booking/materiels/duration/index.js +1 -1
- package/es/components/booking/materiels/startTime/index.d.ts +1 -0
- package/es/components/booking/materiels/startTime/index.js +1 -1
- package/es/components/booking/utils.js +3 -3
- package/es/components/eftposPay/amount.d.ts +1 -1
- package/es/components/eftposPay/device.d.ts +1 -1
- package/es/components/eftposPay/store/index.d.ts +3 -3
- package/es/components/eventBooking/index.js +8 -1
- package/es/components/productSelect/components/TabProduct/index.js +7 -2
- package/es/components/schedules/utils.d.ts +1 -1
- package/es/components/shoppingCart/components/Cart/Product.js +2 -1
- package/es/components/ticketBooking/components/addServiceVariant/addService.js +172 -91
- package/es/components/ticketBooking/components/timeBar/index.js +3 -3
- package/es/components/ticketBooking/utils/index.d.ts +3 -1
- package/es/components/ticketBooking/utils/index.js +18 -2
- package/es/hooks/useWindowSize.js +8 -1
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.js +29 -0
- package/es/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/es/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/es/plus/productSelect/CategoryTabs/index.js +171 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.js +37 -0
- package/es/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/es/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/es/plus/productSelect/ProductCard/index.js +170 -0
- package/es/plus/productSelect/ProductCard/index.less +270 -0
- package/es/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/es/plus/productSelect/ProductList/gridComponents.js +149 -0
- package/es/plus/productSelect/ProductList/index.d.ts +22 -0
- package/es/plus/productSelect/ProductList/index.js +72 -0
- package/es/plus/productSelect/ProductList/index.less +0 -0
- package/es/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/es/plus/productSelect/components/IntersectionObserver.js +276 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.js +357 -0
- package/es/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/es/plus/productSelect/components/TabsStructure/hooks.js +243 -0
- package/es/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/es/plus/productSelect/components/TabsStructure/index.js +13 -0
- package/es/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/es/plus/productSelect/components/TabsStructure/styles.js +87 -0
- package/es/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/es/plus/productSelect/components/TabsStructure/types.js +1 -0
- package/es/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/es/plus/productSelect/components/TabsStructure/utils.js +56 -0
- package/es/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/es/plus/productSelect/components/pisellPriceText/index.js +43 -0
- package/es/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/es/plus/productSelect/hooks/useToken.js +34 -0
- package/es/plus/productSelect/index.d.ts +31 -0
- package/es/plus/productSelect/index.js +270 -0
- package/es/plus/productSelect/index.less +56 -0
- package/es/plus/productSelect/locales.d.ts +18 -0
- package/es/plus/productSelect/locales.js +17 -0
- package/es/plus/productSelect/theme/token.d.ts +17 -0
- package/es/plus/productSelect/theme/token.js +19 -0
- package/es/plus/productSelect/utils.d.ts +39 -0
- package/es/plus/productSelect/utils.js +162 -0
- package/es/pro/pisellNumberSelector/index.js +3 -3
- package/es/pro/pisellPhoneKeyboard/index.js +1 -1
- package/es/utils/index.d.ts +1 -1
- package/lib/components/appointmentBooking/components/Content/index.js +1 -1
- package/lib/components/appointmentBooking/components/Content/index.less +3 -3
- package/lib/components/appointmentBooking/components/Services/index.js +2 -2
- package/lib/components/appointmentBooking/index.js +6 -1
- package/lib/components/booking/components/voucher/index.js +5 -0
- package/lib/components/booking/deposit/ClientItem/index.js +1 -1
- package/lib/components/booking/deposit/DepositItem/index.js +1 -1
- package/lib/components/booking/forms/single/RenderValueById.d.ts +1 -0
- package/lib/components/booking/forms/single/RenderValueById.js +37 -9
- package/lib/components/booking/forms/single/index.less +67 -1
- package/lib/components/booking/hooks/useQuotation.js +1 -1
- package/lib/components/booking/info/clientVariant/utils.d.ts +2 -0
- package/lib/components/booking/info/clientVariant/utils.js +13 -2
- package/lib/components/booking/info/clientVariant/vertical/index.js +7 -6
- package/lib/components/booking/info2/service/addService/utils.js +3 -3
- package/lib/components/booking/info2/service/addTimeModal/index.js +0 -1
- package/lib/components/booking/info2/service/editService/index.js +22 -12
- package/lib/components/booking/info2/utilsByBooking.js +7 -8
- package/lib/components/booking/locales.d.ts +3 -0
- package/lib/components/booking/locales.js +6 -3
- package/lib/components/booking/materiels/duration/index.js +1 -1
- package/lib/components/booking/materiels/startTime/index.d.ts +1 -0
- package/lib/components/booking/materiels/startTime/index.js +1 -1
- package/lib/components/booking/utils.js +3 -3
- package/lib/components/eftposPay/amount.d.ts +1 -1
- package/lib/components/eftposPay/device.d.ts +1 -1
- package/lib/components/eftposPay/store/index.d.ts +3 -3
- package/lib/components/eventBooking/index.js +6 -1
- package/lib/components/productSelect/components/TabProduct/index.js +7 -1
- package/lib/components/schedules/utils.d.ts +1 -1
- package/lib/components/shoppingCart/components/Cart/Product.js +7 -4
- package/lib/components/ticketBooking/components/addServiceVariant/addService.js +87 -14
- package/lib/components/ticketBooking/components/timeBar/index.js +89 -70
- package/lib/components/ticketBooking/utils/index.d.ts +3 -1
- package/lib/components/ticketBooking/utils/index.js +21 -0
- package/lib/hooks/useWindowSize.js +6 -1
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.d.ts +10 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.js +62 -0
- package/lib/plus/productSelect/CategoryTabs/CategorySkeleton.less +30 -0
- package/lib/plus/productSelect/CategoryTabs/index.d.ts +18 -0
- package/lib/plus/productSelect/CategoryTabs/index.js +183 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.d.ts +10 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.js +58 -0
- package/lib/plus/productSelect/ProductCard/ProductCardSkeleton.less +81 -0
- package/lib/plus/productSelect/ProductCard/index.d.ts +45 -0
- package/lib/plus/productSelect/ProductCard/index.js +184 -0
- package/lib/plus/productSelect/ProductCard/index.less +270 -0
- package/lib/plus/productSelect/ProductList/gridComponents.d.ts +44 -0
- package/lib/plus/productSelect/ProductList/gridComponents.js +148 -0
- package/lib/plus/productSelect/ProductList/index.d.ts +22 -0
- package/lib/plus/productSelect/ProductList/index.js +86 -0
- package/lib/plus/productSelect/ProductList/index.less +0 -0
- package/lib/plus/productSelect/components/IntersectionObserver.d.ts +42 -0
- package/lib/plus/productSelect/components/IntersectionObserver.js +269 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.d.ts +30 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.js +393 -0
- package/lib/plus/productSelect/components/TabsStructure/TabsStructure.less +224 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.d.ts +22 -0
- package/lib/plus/productSelect/components/TabsStructure/hooks.js +209 -0
- package/lib/plus/productSelect/components/TabsStructure/index.d.ts +5 -0
- package/lib/plus/productSelect/components/TabsStructure/index.js +92 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.d.ts +47 -0
- package/lib/plus/productSelect/components/TabsStructure/styles.js +122 -0
- package/lib/plus/productSelect/components/TabsStructure/types.d.ts +105 -0
- package/lib/plus/productSelect/components/TabsStructure/types.js +17 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.d.ts +12 -0
- package/lib/plus/productSelect/components/TabsStructure/utils.js +72 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.d.ts +11 -0
- package/lib/plus/productSelect/components/pisellPriceText/index.js +72 -0
- package/lib/plus/productSelect/hooks/useToken.d.ts +18 -0
- package/lib/plus/productSelect/hooks/useToken.js +50 -0
- package/lib/plus/productSelect/index.d.ts +31 -0
- package/lib/plus/productSelect/index.js +299 -0
- package/lib/plus/productSelect/index.less +56 -0
- package/lib/plus/productSelect/locales.d.ts +18 -0
- package/lib/plus/productSelect/locales.js +41 -0
- package/lib/plus/productSelect/theme/token.d.ts +17 -0
- package/lib/plus/productSelect/theme/token.js +47 -0
- package/lib/plus/productSelect/utils.d.ts +39 -0
- package/lib/plus/productSelect/utils.js +138 -0
- package/lib/pro/pisellNumberSelector/index.js +3 -3
- package/lib/pro/pisellPhoneKeyboard/index.js +1 -1
- package/lib/utils/index.d.ts +1 -1
- package/package.json +4 -4
@@ -0,0 +1,270 @@
|
|
1
|
+
.pisell-product-select {
|
2
|
+
&__product-category {
|
3
|
+
padding: 4px 0;
|
4
|
+
|
5
|
+
&[data-index='0'] {
|
6
|
+
padding-top: 0px;
|
7
|
+
}
|
8
|
+
.category-title {
|
9
|
+
color: var(--ps-category-text-color, #000);
|
10
|
+
font-size: 18px;
|
11
|
+
font-style: normal;
|
12
|
+
font-weight: 600;
|
13
|
+
line-height: 24px;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
&__product-card {
|
18
|
+
user-select: none;
|
19
|
+
cursor: pointer;
|
20
|
+
border-radius: 12px;
|
21
|
+
background: var(--ps-card-bg, #fff);
|
22
|
+
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
23
|
+
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
24
|
+
padding: 8px;
|
25
|
+
display: flex;
|
26
|
+
gap: 20px;
|
27
|
+
position: relative;
|
28
|
+
overflow: hidden;
|
29
|
+
min-height: 142px;
|
30
|
+
height: 100%;
|
31
|
+
align-items: center;
|
32
|
+
box-sizing: border-box;
|
33
|
+
|
34
|
+
// 只在非触摸设备上启用hover效果
|
35
|
+
@media (hover: hover) {
|
36
|
+
&:hover {
|
37
|
+
background: var(--ps-card-hover-bg, #eaecf0);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
&.selected {
|
42
|
+
background: var(--ps-card-selected-bg, #8157d5);
|
43
|
+
|
44
|
+
.card-right {
|
45
|
+
.title,
|
46
|
+
.subtitle,
|
47
|
+
.price {
|
48
|
+
color: var(--ps-card-selected-text-color, #ffffff);
|
49
|
+
}
|
50
|
+
|
51
|
+
.spec-item,
|
52
|
+
.original-price,
|
53
|
+
.stock {
|
54
|
+
color: var(
|
55
|
+
--ps-card-selected-secondary-text-color,
|
56
|
+
rgba(255, 255, 255, 0.7)
|
57
|
+
);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
.marketing-tags-wrapper {
|
63
|
+
position: absolute;
|
64
|
+
top: 0;
|
65
|
+
left: 0;
|
66
|
+
pointer-events: none;
|
67
|
+
user-select: none;
|
68
|
+
z-index: 1;
|
69
|
+
|
70
|
+
.marketing-tags {
|
71
|
+
display: flex;
|
72
|
+
flex-direction: column;
|
73
|
+
row-gap: 6px;
|
74
|
+
}
|
75
|
+
|
76
|
+
.marketing-tag-item {
|
77
|
+
display: flex;
|
78
|
+
padding: 6px 10px;
|
79
|
+
justify-content: center;
|
80
|
+
align-items: center;
|
81
|
+
gap: 10px;
|
82
|
+
border-radius: 0 12px 12px 0;
|
83
|
+
background: var(--Error-100, #fee4e2);
|
84
|
+
color: var(--Error-700, #b42318);
|
85
|
+
text-align: center;
|
86
|
+
font-size: 14px;
|
87
|
+
font-style: normal;
|
88
|
+
font-weight: 500;
|
89
|
+
line-height: 20px;
|
90
|
+
|
91
|
+
&:nth-of-type(1) {
|
92
|
+
border-radius: 0 0 12px 0;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.card-left {
|
98
|
+
flex-shrink: 0;
|
99
|
+
|
100
|
+
img {
|
101
|
+
border-radius: 8px;
|
102
|
+
background: lightgray 50% / cover no-repeat;
|
103
|
+
width: 100%;
|
104
|
+
height: 100%;
|
105
|
+
object-fit: cover;
|
106
|
+
}
|
107
|
+
|
108
|
+
.text-cover {
|
109
|
+
width: 100%;
|
110
|
+
height: 100%;
|
111
|
+
display: flex;
|
112
|
+
align-items: center;
|
113
|
+
justify-content: center;
|
114
|
+
background: #dedede;
|
115
|
+
color: #6c6c6c;
|
116
|
+
font-size: 60px;
|
117
|
+
font-weight: 600;
|
118
|
+
text-align: center;
|
119
|
+
line-height: 1;
|
120
|
+
letter-spacing: 1px;
|
121
|
+
border-radius: 8px;
|
122
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
.card-right {
|
127
|
+
display: flex;
|
128
|
+
flex-direction: column;
|
129
|
+
row-gap: 8px;
|
130
|
+
min-height: 92px;
|
131
|
+
overflow: hidden;
|
132
|
+
flex: 1;
|
133
|
+
|
134
|
+
.title {
|
135
|
+
color: var(--ps-color-text, #1b1b1b);
|
136
|
+
font-size: 18px;
|
137
|
+
font-style: normal;
|
138
|
+
font-weight: 600;
|
139
|
+
line-height: 28px;
|
140
|
+
display: -webkit-box;
|
141
|
+
-webkit-line-clamp: 2;
|
142
|
+
-webkit-box-orient: vertical;
|
143
|
+
overflow: hidden;
|
144
|
+
text-overflow: ellipsis;
|
145
|
+
}
|
146
|
+
|
147
|
+
.subtitle {
|
148
|
+
color: var(--ps-color-text, #1b1b1b);
|
149
|
+
font-size: 16px;
|
150
|
+
font-style: normal;
|
151
|
+
font-weight: 500;
|
152
|
+
line-height: 24px;
|
153
|
+
display: -webkit-box;
|
154
|
+
-webkit-line-clamp: 2;
|
155
|
+
-webkit-box-orient: vertical;
|
156
|
+
overflow: hidden;
|
157
|
+
text-overflow: ellipsis;
|
158
|
+
}
|
159
|
+
|
160
|
+
.stock,
|
161
|
+
.specs {
|
162
|
+
overflow: hidden;
|
163
|
+
color: var(--ps-color-text-secondary, #4e4e4e);
|
164
|
+
text-overflow: ellipsis;
|
165
|
+
font-size: 14px;
|
166
|
+
font-style: normal;
|
167
|
+
font-weight: 500;
|
168
|
+
line-height: 20px;
|
169
|
+
|
170
|
+
.spec-item {
|
171
|
+
margin-top: 8px;
|
172
|
+
|
173
|
+
&:nth-of-type(1) {
|
174
|
+
margin-top: 0;
|
175
|
+
}
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
.tags {
|
180
|
+
display: flex;
|
181
|
+
gap: 8px;
|
182
|
+
flex-wrap: wrap;
|
183
|
+
|
184
|
+
.tag-item {
|
185
|
+
display: flex;
|
186
|
+
padding: 4px 12px;
|
187
|
+
align-items: center;
|
188
|
+
border-radius: 16px;
|
189
|
+
border: 1px solid var(--Error-200, #fecdca);
|
190
|
+
background: var(--Error-50, #fef3f2);
|
191
|
+
mix-blend-mode: multiply;
|
192
|
+
color: var(--Error-700, #b42318);
|
193
|
+
text-align: center;
|
194
|
+
font-size: 14px;
|
195
|
+
font-style: normal;
|
196
|
+
font-weight: 500;
|
197
|
+
line-height: 20px;
|
198
|
+
}
|
199
|
+
}
|
200
|
+
|
201
|
+
.price-info {
|
202
|
+
display: flex;
|
203
|
+
align-items: center;
|
204
|
+
gap: 8px;
|
205
|
+
}
|
206
|
+
|
207
|
+
.price {
|
208
|
+
color: var(--ps-color-text, #1b1b1b);
|
209
|
+
font-size: 18px;
|
210
|
+
font-style: normal;
|
211
|
+
font-weight: 600;
|
212
|
+
line-height: 28px;
|
213
|
+
}
|
214
|
+
|
215
|
+
.original-price {
|
216
|
+
color: var(--ps-color-text-secondary, #4e4e4e);
|
217
|
+
font-size: 16px;
|
218
|
+
font-style: normal;
|
219
|
+
font-weight: 400;
|
220
|
+
line-height: 24px;
|
221
|
+
position: relative;
|
222
|
+
|
223
|
+
&::before {
|
224
|
+
content: '';
|
225
|
+
display: block;
|
226
|
+
position: absolute;
|
227
|
+
top: 50%;
|
228
|
+
left: 0;
|
229
|
+
width: 100%;
|
230
|
+
height: 1px;
|
231
|
+
background-color: #4e4e4e;
|
232
|
+
transform: translateY(-50%);
|
233
|
+
}
|
234
|
+
|
235
|
+
> span {
|
236
|
+
vertical-align: middle;
|
237
|
+
}
|
238
|
+
}
|
239
|
+
|
240
|
+
.remark {
|
241
|
+
color: var(--Warning-600, #dc6803);
|
242
|
+
font-size: 14px;
|
243
|
+
font-style: normal;
|
244
|
+
font-weight: 600;
|
245
|
+
line-height: 20px;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
// 网格布局中的产品卡片样式调整
|
251
|
+
.product-grid-wrapper {
|
252
|
+
.pisell-product-select__product-card {
|
253
|
+
min-width: unset;
|
254
|
+
width: 100%;
|
255
|
+
}
|
256
|
+
}
|
257
|
+
|
258
|
+
// 列表布局中的产品卡片样式调整
|
259
|
+
.product-list-wrapper {
|
260
|
+
.pisell-product-select__product-card {
|
261
|
+
min-width: 363px;
|
262
|
+
max-width: unset;
|
263
|
+
margin-top: 12px;
|
264
|
+
|
265
|
+
&:first-child {
|
266
|
+
margin-top: 0;
|
267
|
+
}
|
268
|
+
}
|
269
|
+
}
|
270
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export interface GridConfig {
|
3
|
+
grid: boolean;
|
4
|
+
config: string;
|
5
|
+
}
|
6
|
+
export declare const parseGridConfig: (config: string) => number[];
|
7
|
+
export declare const createGridComponents: (layout?: GridConfig | null) => {
|
8
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
9
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
10
|
+
};
|
11
|
+
export declare const GRID_LAYOUTS: {
|
12
|
+
readonly SINGLE_COLUMN: {
|
13
|
+
readonly grid: false;
|
14
|
+
readonly config: "12";
|
15
|
+
};
|
16
|
+
readonly TWO_COLUMNS: {
|
17
|
+
readonly grid: true;
|
18
|
+
readonly config: "12:12";
|
19
|
+
};
|
20
|
+
readonly THREE_COLUMNS: {
|
21
|
+
readonly grid: true;
|
22
|
+
readonly config: "8:8:8";
|
23
|
+
};
|
24
|
+
readonly FOUR_COLUMNS: {
|
25
|
+
readonly grid: true;
|
26
|
+
readonly config: "6:6:6:6";
|
27
|
+
};
|
28
|
+
readonly UNEQUAL_TWO: {
|
29
|
+
readonly grid: true;
|
30
|
+
readonly config: "8:16";
|
31
|
+
};
|
32
|
+
readonly UNEQUAL_THREE: {
|
33
|
+
readonly grid: true;
|
34
|
+
readonly config: "6:12:6";
|
35
|
+
};
|
36
|
+
};
|
37
|
+
export declare const createTwoColumnGrid: () => {
|
38
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
39
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
40
|
+
};
|
41
|
+
export declare const createCustomGrid: (config: string) => {
|
42
|
+
List: React.MemoExoticComponent<({ children, ...props }: any) => JSX.Element>;
|
43
|
+
Item: React.MemoExoticComponent<({ children, index, item, ...props }: any) => JSX.Element>;
|
44
|
+
};
|
@@ -0,0 +1,149 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
|
+
var _excluded = ["children"],
|
3
|
+
_excluded2 = ["children", "index", "item"];
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
6
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
7
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
8
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
9
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
10
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
11
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
12
|
+
import React, { memo } from 'react';
|
13
|
+
|
14
|
+
// 网格配置类型定义
|
15
|
+
|
16
|
+
// 解析网格配置字符串
|
17
|
+
export var parseGridConfig = function parseGridConfig(config) {
|
18
|
+
return config.split(':').map(function (num) {
|
19
|
+
return parseInt(num, 10);
|
20
|
+
}).filter(function (num) {
|
21
|
+
return !isNaN(num);
|
22
|
+
});
|
23
|
+
};
|
24
|
+
|
25
|
+
// 计算网格列宽度
|
26
|
+
var calculateColumnWidth = function calculateColumnWidth(columns, index) {
|
27
|
+
var total = columns.reduce(function (sum, col) {
|
28
|
+
return sum + col;
|
29
|
+
}, 0);
|
30
|
+
var percentage = columns[index] / total * 100;
|
31
|
+
return "".concat(percentage, "%");
|
32
|
+
};
|
33
|
+
|
34
|
+
// 创建网格组件的工厂函数
|
35
|
+
export var createGridComponents = function createGridComponents(layout) {
|
36
|
+
// 兼容性处理:当传入空值时,默认为单列布局
|
37
|
+
if (!layout) {
|
38
|
+
layout = GRID_LAYOUTS.SINGLE_COLUMN;
|
39
|
+
}
|
40
|
+
var columns = parseGridConfig(layout.config);
|
41
|
+
var isGrid = layout.grid && columns.length > 1;
|
42
|
+
|
43
|
+
// 网格容器组件
|
44
|
+
var GridListComponent = /*#__PURE__*/memo(function (_ref) {
|
45
|
+
var children = _ref.children,
|
46
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
47
|
+
if (!isGrid) {
|
48
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
49
|
+
className: "product-list-wrapper",
|
50
|
+
style: {
|
51
|
+
display: 'flex',
|
52
|
+
flexDirection: 'column',
|
53
|
+
gap: '12px'
|
54
|
+
}
|
55
|
+
}, props), children);
|
56
|
+
}
|
57
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
58
|
+
className: "product-grid-wrapper",
|
59
|
+
style: _objectSpread({
|
60
|
+
display: 'flex',
|
61
|
+
flexWrap: 'wrap',
|
62
|
+
gap: '12px'
|
63
|
+
}, props.style)
|
64
|
+
}, props), children);
|
65
|
+
});
|
66
|
+
|
67
|
+
// 网格项组件
|
68
|
+
var GridItemComponent = /*#__PURE__*/memo(function (_ref2) {
|
69
|
+
var children = _ref2.children,
|
70
|
+
index = _ref2.index,
|
71
|
+
item = _ref2.item,
|
72
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
73
|
+
if (!isGrid) {
|
74
|
+
if (item && item.__typename === 'category') {
|
75
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
76
|
+
id: "ps_category_".concat(item.id)
|
77
|
+
}, props), children);
|
78
|
+
}
|
79
|
+
return /*#__PURE__*/React.createElement("div", props, children);
|
80
|
+
}
|
81
|
+
|
82
|
+
// 如果是category类型,占据整行
|
83
|
+
if (item && item.__typename === 'category') {
|
84
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
85
|
+
id: "ps_category_".concat(item.id),
|
86
|
+
style: _objectSpread({
|
87
|
+
width: '100%',
|
88
|
+
flexShrink: 0
|
89
|
+
}, props.style)
|
90
|
+
}, props), children);
|
91
|
+
}
|
92
|
+
var columnIndex = index % columns.length;
|
93
|
+
var width = calculateColumnWidth(columns, columnIndex);
|
94
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
95
|
+
style: _objectSpread({
|
96
|
+
width: "calc(".concat(width, " - ").concat((columns.length - 1) * 12 / columns.length, "px)"),
|
97
|
+
flexShrink: 0
|
98
|
+
}, props.style)
|
99
|
+
}, props), children);
|
100
|
+
});
|
101
|
+
GridListComponent.displayName = "GridListComponent_".concat(layout.config);
|
102
|
+
GridItemComponent.displayName = "GridItemComponent_".concat(layout.config);
|
103
|
+
return {
|
104
|
+
List: GridListComponent,
|
105
|
+
Item: GridItemComponent
|
106
|
+
};
|
107
|
+
};
|
108
|
+
|
109
|
+
// 预定义的常用网格配置
|
110
|
+
export var GRID_LAYOUTS = {
|
111
|
+
SINGLE_COLUMN: {
|
112
|
+
grid: false,
|
113
|
+
config: '12'
|
114
|
+
},
|
115
|
+
TWO_COLUMNS: {
|
116
|
+
grid: true,
|
117
|
+
config: '12:12'
|
118
|
+
},
|
119
|
+
THREE_COLUMNS: {
|
120
|
+
grid: true,
|
121
|
+
config: '8:8:8'
|
122
|
+
},
|
123
|
+
FOUR_COLUMNS: {
|
124
|
+
grid: true,
|
125
|
+
config: '6:6:6:6'
|
126
|
+
},
|
127
|
+
UNEQUAL_TWO: {
|
128
|
+
grid: true,
|
129
|
+
config: '8:16'
|
130
|
+
},
|
131
|
+
// 1:2 比例
|
132
|
+
UNEQUAL_THREE: {
|
133
|
+
grid: true,
|
134
|
+
config: '6:12:6'
|
135
|
+
} // 1:2:1 比例
|
136
|
+
};
|
137
|
+
|
138
|
+
// 便捷函数:创建常用网格组件
|
139
|
+
export var createTwoColumnGrid = function createTwoColumnGrid() {
|
140
|
+
return createGridComponents(GRID_LAYOUTS.TWO_COLUMNS);
|
141
|
+
};
|
142
|
+
|
143
|
+
// 自定义网格配置创建函数
|
144
|
+
export var createCustomGrid = function createCustomGrid(config) {
|
145
|
+
return createGridComponents({
|
146
|
+
grid: true,
|
147
|
+
config: config
|
148
|
+
});
|
149
|
+
};
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface IProps {
|
3
|
+
className?: string;
|
4
|
+
loading?: boolean;
|
5
|
+
data: any[];
|
6
|
+
context: {
|
7
|
+
onItemIntersectionIn: (item: any) => void;
|
8
|
+
onItemIntersectionOut: (item: any) => void;
|
9
|
+
};
|
10
|
+
customScrollParent?: Element | null;
|
11
|
+
components?: {
|
12
|
+
List?: React.ComponentType<any>;
|
13
|
+
Item?: React.ComponentType<any>;
|
14
|
+
[key: string]: React.ComponentType<any> | undefined;
|
15
|
+
};
|
16
|
+
itemContent?: (index: number, data: any, context: any) => React.ReactNode;
|
17
|
+
itemSkeleton?: React.ReactNode;
|
18
|
+
[key: string]: any;
|
19
|
+
}
|
20
|
+
declare const ProductList: React.ForwardRefExoticComponent<Omit<IProps, "ref"> & React.RefAttributes<any>>;
|
21
|
+
export default ProductList;
|
22
|
+
export { createGridComponents, createTwoColumnGrid, createCustomGrid, GRID_LAYOUTS, type GridConfig, } from './gridComponents';
|
@@ -0,0 +1,72 @@
|
|
1
|
+
var _excluded = ["children"],
|
2
|
+
_excluded2 = ["children", "index"];
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
5
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
6
|
+
import React, { forwardRef, useMemo, memo } from 'react';
|
7
|
+
import classNames from 'classnames';
|
8
|
+
// 将默认组件移到组件外部,避免重复创建
|
9
|
+
var DefaultListComponent = /*#__PURE__*/memo(function (_ref) {
|
10
|
+
var children = _ref.children,
|
11
|
+
listProps = _objectWithoutProperties(_ref, _excluded);
|
12
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
13
|
+
className: "product-list-wrapper"
|
14
|
+
}, listProps), children);
|
15
|
+
});
|
16
|
+
var DefaultItemComponent = /*#__PURE__*/memo(function (_ref2) {
|
17
|
+
var children = _ref2.children,
|
18
|
+
index = _ref2.index,
|
19
|
+
itemProps = _objectWithoutProperties(_ref2, _excluded2);
|
20
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, itemProps, {
|
21
|
+
"data-index": index,
|
22
|
+
"data-item-index": index
|
23
|
+
}), children);
|
24
|
+
});
|
25
|
+
var ProductList = /*#__PURE__*/forwardRef(function (props, ref) {
|
26
|
+
var className = props.className,
|
27
|
+
data = props.data,
|
28
|
+
context = props.context,
|
29
|
+
components = props.components,
|
30
|
+
itemContent = props.itemContent;
|
31
|
+
|
32
|
+
// 使用 useMemo 缓存组件选择
|
33
|
+
var ListComponent = useMemo(function () {
|
34
|
+
return (components === null || components === void 0 ? void 0 : components.List) || DefaultListComponent;
|
35
|
+
}, [components === null || components === void 0 ? void 0 : components.List]);
|
36
|
+
var ItemComponent = useMemo(function () {
|
37
|
+
return (components === null || components === void 0 ? void 0 : components.Item) || DefaultItemComponent;
|
38
|
+
}, [components === null || components === void 0 ? void 0 : components.Item]);
|
39
|
+
var itemContentRenderer = useMemo(function () {
|
40
|
+
if (itemContent) {
|
41
|
+
return function (item, index) {
|
42
|
+
return itemContent(index, item, context);
|
43
|
+
};
|
44
|
+
}
|
45
|
+
return function (item, index) {
|
46
|
+
return /*#__PURE__*/React.createElement("div", null, index);
|
47
|
+
};
|
48
|
+
}, [itemContent, context]);
|
49
|
+
var renderedItems = useMemo(function () {
|
50
|
+
return data === null || data === void 0 ? void 0 : data.map(function (item, index) {
|
51
|
+
var content = itemContentRenderer(item, index);
|
52
|
+
return /*#__PURE__*/React.createElement(ItemComponent, {
|
53
|
+
key: "".concat(item.id || index, "-").concat(index),
|
54
|
+
item: item,
|
55
|
+
index: index,
|
56
|
+
"data-index": index,
|
57
|
+
"data-item-index": index,
|
58
|
+
context: context
|
59
|
+
}, content);
|
60
|
+
});
|
61
|
+
}, [data, ItemComponent, itemContentRenderer]);
|
62
|
+
return /*#__PURE__*/React.createElement("div", {
|
63
|
+
className: classNames(className)
|
64
|
+
}, /*#__PURE__*/React.createElement(ListComponent, {
|
65
|
+
ref: ref,
|
66
|
+
context: context
|
67
|
+
}, renderedItems));
|
68
|
+
});
|
69
|
+
export default ProductList;
|
70
|
+
|
71
|
+
// 导出网格组件工厂函数,方便外部使用
|
72
|
+
export { createGridComponents, createTwoColumnGrid, createCustomGrid, GRID_LAYOUTS } from "./gridComponents";
|
File without changes
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { ReactNode, CSSProperties } from 'react';
|
3
|
+
declare global {
|
4
|
+
interface Window {
|
5
|
+
IntersectionObserver: typeof IntersectionObserver;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
interface IntersectionObserverContextValue {
|
9
|
+
initialized: boolean;
|
10
|
+
register: (params: {
|
11
|
+
ref: React.RefObject<HTMLElement>;
|
12
|
+
callback: (entry: IntersectionObserverEntry) => void;
|
13
|
+
}) => void;
|
14
|
+
unregister: (params: {
|
15
|
+
ref: React.RefObject<HTMLElement>;
|
16
|
+
}) => void;
|
17
|
+
}
|
18
|
+
declare type PriorityMode = 'top' | 'bottom' | 'left' | 'right' | undefined;
|
19
|
+
interface IntersectionObserverProps {
|
20
|
+
children: ReactNode;
|
21
|
+
root?: Element | null;
|
22
|
+
rootMargin?: string;
|
23
|
+
threshold?: number | number[];
|
24
|
+
priorityMode?: PriorityMode;
|
25
|
+
}
|
26
|
+
interface IntersectionTriggerOptions {
|
27
|
+
once?: boolean;
|
28
|
+
onHide?: (cleanup: () => void) => void;
|
29
|
+
onShow?: (cleanup: () => void) => void;
|
30
|
+
}
|
31
|
+
interface IntersectionTriggerProps extends IntersectionTriggerOptions {
|
32
|
+
children?: ReactNode;
|
33
|
+
className?: string;
|
34
|
+
style?: CSSProperties;
|
35
|
+
}
|
36
|
+
declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
|
37
|
+
declare const Consumer: React.Consumer<IntersectionObserverContextValue>;
|
38
|
+
export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
|
39
|
+
export declare const IntersectionTrigger: React.FC<IntersectionTriggerProps>;
|
40
|
+
export type { IntersectionObserverProps, IntersectionTriggerProps, IntersectionTriggerOptions, IntersectionObserverContextValue, PriorityMode, };
|
41
|
+
export { IntersectionObserverContext, Consumer as IntersectionObserverConsumer, };
|
42
|
+
export default IntersectionObserverProvider;
|