quick-start-feature-box 1.0.2 → 1.0.3
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/index.js +46 -83
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1,29 +1,18 @@
|
|
|
1
|
+
import React6, { createContext, useState, useMemo, useContext, useEffect } from 'react';
|
|
2
|
+
import { Tooltip, message, Button, Modal, Image } from 'antd';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { useLocation, Link } from 'react-router-dom';
|
|
5
|
+
|
|
1
6
|
// src/FeatureBox/index.js
|
|
2
|
-
import React8, { useEffect, useMemo as useMemo4, useState as useState5, createContext, useContext as useContext3 } from "react";
|
|
3
7
|
|
|
4
8
|
// src/FeatureBox/index.less
|
|
5
9
|
var FeatureBox_default = {};
|
|
6
10
|
|
|
7
|
-
// src/FeatureBox/index.js
|
|
8
|
-
import { Tooltip as Tooltip2, message as message2, Image } from "antd";
|
|
9
|
-
|
|
10
|
-
// src/FeatureContentBox/index.js
|
|
11
|
-
import React7, { useMemo as useMemo3, useState as useState4, useContext as useContext2 } from "react";
|
|
12
|
-
|
|
13
|
-
// src/StepAndQuote/index.js
|
|
14
|
-
import React6, { useMemo as useMemo2, useContext } from "react";
|
|
15
|
-
|
|
16
11
|
// src/StepAndQuote/index.less
|
|
17
12
|
var StepAndQuote_default = {};
|
|
18
13
|
|
|
19
|
-
// src/Tab/index.js
|
|
20
|
-
import React from "react";
|
|
21
|
-
|
|
22
14
|
// src/Tab/index.less
|
|
23
15
|
var Tab_default = {};
|
|
24
|
-
|
|
25
|
-
// src/Tab/index.js
|
|
26
|
-
import classNames from "classnames";
|
|
27
16
|
function isPrefixArray(prefixArray, mainArray) {
|
|
28
17
|
return prefixArray.every((element, index) => element === mainArray[index]);
|
|
29
18
|
}
|
|
@@ -42,14 +31,14 @@ var Tab = (props) => {
|
|
|
42
31
|
}
|
|
43
32
|
return index == 0;
|
|
44
33
|
};
|
|
45
|
-
return /* @__PURE__ */
|
|
34
|
+
return /* @__PURE__ */ React6.createElement("div", { className: classNames(Tab_default.Tab, {
|
|
46
35
|
[Tab_default.noFirstTab]: tabNum != 1,
|
|
47
36
|
[Tab_default.isInternalChanged]: idx < stepChildrenLength - 1
|
|
48
37
|
}) }, (data?.children ?? []).map((item, index) => {
|
|
49
38
|
if (item.type !== "tabItem") {
|
|
50
39
|
return null;
|
|
51
40
|
}
|
|
52
|
-
return /* @__PURE__ */
|
|
41
|
+
return /* @__PURE__ */ React6.createElement(
|
|
53
42
|
"div",
|
|
54
43
|
{
|
|
55
44
|
key: item.id,
|
|
@@ -62,16 +51,13 @@ var Tab = (props) => {
|
|
|
62
51
|
setCurrentLinkList(item.linkList);
|
|
63
52
|
}
|
|
64
53
|
},
|
|
65
|
-
item.icon && /* @__PURE__ */
|
|
54
|
+
item.icon && /* @__PURE__ */ React6.createElement("div", { className: Tab_default.tabIcon, dangerouslySetInnerHTML: { __html: item.icon } }),
|
|
66
55
|
item.text
|
|
67
56
|
);
|
|
68
57
|
}));
|
|
69
58
|
};
|
|
70
59
|
var Tab_default2 = Tab;
|
|
71
60
|
|
|
72
|
-
// src/Article/index.js
|
|
73
|
-
import React2, { useMemo } from "react";
|
|
74
|
-
|
|
75
61
|
// src/Article/index.less
|
|
76
62
|
var Article_default = {};
|
|
77
63
|
|
|
@@ -85,24 +71,15 @@ var Article = (props) => {
|
|
|
85
71
|
return `<div class="img-container">${match}<i class="iconfont img-preview">𑯇</i></div>`;
|
|
86
72
|
}) ?? "";
|
|
87
73
|
}, [data]);
|
|
88
|
-
return /* @__PURE__ */
|
|
74
|
+
return /* @__PURE__ */ React6.createElement("div", { className: Article_default.Article, dangerouslySetInnerHTML: { __html: modifiedText } });
|
|
89
75
|
};
|
|
90
76
|
var Article_default2 = Article;
|
|
91
77
|
|
|
92
|
-
// src/Dictionary/index.js
|
|
93
|
-
import React4, { useState as useState2 } from "react";
|
|
94
|
-
|
|
95
78
|
// src/Dictionary/index.less
|
|
96
79
|
var Dictionary_default = {};
|
|
97
80
|
|
|
98
|
-
// src/HelpModal/index.js
|
|
99
|
-
import React3, { useState } from "react";
|
|
100
|
-
|
|
101
81
|
// src/HelpModal/index.less
|
|
102
82
|
var HelpModal_default = {};
|
|
103
|
-
|
|
104
|
-
// src/HelpModal/index.js
|
|
105
|
-
import { Modal } from "antd";
|
|
106
83
|
var HelpModal = (props) => {
|
|
107
84
|
const {
|
|
108
85
|
visible,
|
|
@@ -110,7 +87,7 @@ var HelpModal = (props) => {
|
|
|
110
87
|
link
|
|
111
88
|
} = props;
|
|
112
89
|
const [loading, setLoading] = useState(true);
|
|
113
|
-
return /* @__PURE__ */
|
|
90
|
+
return /* @__PURE__ */ React6.createElement(
|
|
114
91
|
Modal,
|
|
115
92
|
{
|
|
116
93
|
className: HelpModal_default.HelpModal,
|
|
@@ -120,7 +97,7 @@ var HelpModal = (props) => {
|
|
|
120
97
|
destroyOnClose: true,
|
|
121
98
|
footer: null
|
|
122
99
|
},
|
|
123
|
-
/* @__PURE__ */
|
|
100
|
+
/* @__PURE__ */ React6.createElement(
|
|
124
101
|
"iframe",
|
|
125
102
|
{
|
|
126
103
|
className: HelpModal_default.HelpModalIframe,
|
|
@@ -138,39 +115,33 @@ var Dictionary = (props) => {
|
|
|
138
115
|
const {
|
|
139
116
|
data
|
|
140
117
|
} = props;
|
|
141
|
-
const [visible, setVisible] =
|
|
142
|
-
const [link, setLink] =
|
|
118
|
+
const [visible, setVisible] = useState(false);
|
|
119
|
+
const [link, setLink] = useState("");
|
|
143
120
|
const handleClick = (item) => {
|
|
144
121
|
setLink(item.link);
|
|
145
122
|
setVisible(true);
|
|
146
123
|
};
|
|
147
|
-
return /* @__PURE__ */
|
|
148
|
-
return item.type === "modal" ? /* @__PURE__ */
|
|
149
|
-
}), /* @__PURE__ */
|
|
124
|
+
return /* @__PURE__ */ React6.createElement("div", { className: Dictionary_default.Dictionary }, (data?.children ?? []).map((item) => {
|
|
125
|
+
return item.type === "modal" ? /* @__PURE__ */ React6.createElement("div", { key: item.id, className: Dictionary_default.item, onClick: () => handleClick(item) }, item.icon && /* @__PURE__ */ React6.createElement("div", { className: Dictionary_default.dicIcon, dangerouslySetInnerHTML: { __html: item.icon } }), /* @__PURE__ */ React6.createElement("div", { className: Dictionary_default.title }, item.text)) : /* @__PURE__ */ React6.createElement("a", { className: Dictionary_default.item, href: item.link }, item.icon && /* @__PURE__ */ React6.createElement("div", { className: Dictionary_default.dicIcon, dangerouslySetInnerHTML: { __html: item.icon } }), /* @__PURE__ */ React6.createElement("div", { className: Dictionary_default.title }, item.text));
|
|
126
|
+
}), /* @__PURE__ */ React6.createElement(HelpModal_default2, { visible, setVisible, link }));
|
|
150
127
|
};
|
|
151
128
|
var Dictionary_default2 = Dictionary;
|
|
152
129
|
|
|
153
|
-
// src/Extra/index.js
|
|
154
|
-
import React5, { useState as useState3 } from "react";
|
|
155
|
-
|
|
156
130
|
// src/Extra/index.less
|
|
157
131
|
var Extra_default = {};
|
|
158
|
-
|
|
159
|
-
// src/Extra/index.js
|
|
160
|
-
import { Button } from "antd";
|
|
161
132
|
var Extra = (props) => {
|
|
162
133
|
const {
|
|
163
134
|
data
|
|
164
135
|
} = props;
|
|
165
|
-
const [visible, setVisible] =
|
|
166
|
-
const [currentLink, setCurrentLink] =
|
|
136
|
+
const [visible, setVisible] = useState(false);
|
|
137
|
+
const [currentLink, setCurrentLink] = useState([]);
|
|
167
138
|
const handleClick = (item) => {
|
|
168
139
|
setCurrentLink(item.link);
|
|
169
140
|
setVisible(true);
|
|
170
141
|
};
|
|
171
|
-
return /* @__PURE__ */
|
|
172
|
-
return item.type === "link" ? /* @__PURE__ */
|
|
173
|
-
}), /* @__PURE__ */
|
|
142
|
+
return /* @__PURE__ */ React6.createElement("div", { className: Extra_default.Extra }, (data?.children ?? []).map((item, index) => {
|
|
143
|
+
return item.type === "link" ? /* @__PURE__ */ React6.createElement(Button, { className: Extra_default.ExtraButton, key: index, type: "primary", href: item.link }, item.text) : /* @__PURE__ */ React6.createElement(Button, { className: Extra_default.ExtraButton, key: index, onClick: () => handleClick(item) }, item.text);
|
|
144
|
+
}), /* @__PURE__ */ React6.createElement(
|
|
174
145
|
HelpModal_default2,
|
|
175
146
|
{
|
|
176
147
|
visible,
|
|
@@ -180,10 +151,6 @@ var Extra = (props) => {
|
|
|
180
151
|
));
|
|
181
152
|
};
|
|
182
153
|
var Extra_default2 = Extra;
|
|
183
|
-
|
|
184
|
-
// src/StepAndQuote/index.js
|
|
185
|
-
import classNames2 from "classnames";
|
|
186
|
-
import { Tooltip, message } from "antd";
|
|
187
154
|
var STEP_CHILD_COMPONENTS = {
|
|
188
155
|
tab: Tab_default2,
|
|
189
156
|
article: Article_default2,
|
|
@@ -246,7 +213,7 @@ var Quote = (props) => {
|
|
|
246
213
|
setCurrentQuoteList([...currentQuoteList, quoteID]);
|
|
247
214
|
}
|
|
248
215
|
};
|
|
249
|
-
const isOpen =
|
|
216
|
+
const isOpen = useMemo(() => currentQuoteList.includes(data.id), [currentQuoteList, data.id]);
|
|
250
217
|
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.title, onClick: () => handleClick(data.id) }, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.QuoteBoxLeft }, (() => {
|
|
251
218
|
if (!data.icon) {
|
|
252
219
|
return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
|
|
@@ -264,7 +231,7 @@ var StepAndQuote = (props) => {
|
|
|
264
231
|
index,
|
|
265
232
|
...rest
|
|
266
233
|
} = props;
|
|
267
|
-
return /* @__PURE__ */ React6.createElement("div", { id: `step-${index + 1}`, className:
|
|
234
|
+
return /* @__PURE__ */ React6.createElement("div", { id: `step-${index + 1}`, className: classNames(StepAndQuote_default.StepAndQuote, data.type === "step" ? StepAndQuote_default.Step : StepAndQuote_default.Quote) }, /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.tail }), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.circle }, index + 1), /* @__PURE__ */ React6.createElement("div", { className: StepAndQuote_default.content }, data.type === "step" ? /* @__PURE__ */ React6.createElement(Step, { data, index, ...rest }) : /* @__PURE__ */ React6.createElement(Quote, { data, ...rest })));
|
|
268
235
|
};
|
|
269
236
|
var StepAndQuote_default2 = StepAndQuote;
|
|
270
237
|
|
|
@@ -346,16 +313,16 @@ var FeatureContentBox = (props) => {
|
|
|
346
313
|
content,
|
|
347
314
|
...rest
|
|
348
315
|
} = props;
|
|
349
|
-
const [currentLinkList, setCurrentLinkList] =
|
|
350
|
-
const [currentQuoteList, setCurrentQuoteList] =
|
|
351
|
-
const completeData =
|
|
316
|
+
const [currentLinkList, setCurrentLinkList] = useState(linkList);
|
|
317
|
+
const [currentQuoteList, setCurrentQuoteList] = useState(quoteList);
|
|
318
|
+
const completeData = useMemo(() => {
|
|
352
319
|
return processContentData(structure, content);
|
|
353
320
|
}, [structure]);
|
|
354
|
-
const realRenderData =
|
|
321
|
+
const realRenderData = useMemo(() => {
|
|
355
322
|
return getRealRenderData(completeData, currentLinkList, currentQuoteList);
|
|
356
323
|
}, [completeData, currentLinkList, currentQuoteList]);
|
|
357
|
-
return /* @__PURE__ */
|
|
358
|
-
return /* @__PURE__ */
|
|
324
|
+
return /* @__PURE__ */ React6.createElement(React6.Fragment, null, realRenderData.map((item, index) => {
|
|
325
|
+
return /* @__PURE__ */ React6.createElement(
|
|
359
326
|
StepAndQuote_default2,
|
|
360
327
|
{
|
|
361
328
|
key: item.id,
|
|
@@ -370,12 +337,9 @@ var FeatureContentBox = (props) => {
|
|
|
370
337
|
);
|
|
371
338
|
}));
|
|
372
339
|
};
|
|
373
|
-
var FeatureContentBox_default =
|
|
340
|
+
var FeatureContentBox_default = React6.memo(FeatureContentBox, (prevProps, nextProps) => {
|
|
374
341
|
return prevProps.structure === nextProps.structure;
|
|
375
342
|
});
|
|
376
|
-
|
|
377
|
-
// src/FeatureBox/index.js
|
|
378
|
-
import { Link, useLocation } from "react-router-dom";
|
|
379
343
|
var i18nContext = createContext({});
|
|
380
344
|
function fallbackCopyTextToClipboard(text) {
|
|
381
345
|
const textarea = document.createElement("textarea");
|
|
@@ -384,9 +348,9 @@ function fallbackCopyTextToClipboard(text) {
|
|
|
384
348
|
textarea.select();
|
|
385
349
|
try {
|
|
386
350
|
document.execCommand("copy");
|
|
387
|
-
|
|
351
|
+
message.success(i18n.rebate_copy_share_success);
|
|
388
352
|
} catch (err) {
|
|
389
|
-
|
|
353
|
+
message.error(i18n.rebate_copy_share_failed);
|
|
390
354
|
} finally {
|
|
391
355
|
document.body.removeChild(textarea);
|
|
392
356
|
}
|
|
@@ -400,13 +364,13 @@ var FeatureItem = (props) => {
|
|
|
400
364
|
quoteList,
|
|
401
365
|
module
|
|
402
366
|
} = props;
|
|
403
|
-
const i18n2 =
|
|
404
|
-
const active =
|
|
367
|
+
const i18n2 = useContext(i18nContext);
|
|
368
|
+
const active = useMemo(() => {
|
|
405
369
|
return feature === data.alias;
|
|
406
370
|
}, [feature, data]);
|
|
407
371
|
const location = useLocation();
|
|
408
|
-
const [imgSrc, setImgSrc] =
|
|
409
|
-
const [imgVisible, setImgVisible] =
|
|
372
|
+
const [imgSrc, setImgSrc] = useState("");
|
|
373
|
+
const [imgVisible, setImgVisible] = useState(false);
|
|
410
374
|
useEffect(() => {
|
|
411
375
|
const hash = location.hash;
|
|
412
376
|
setTimeout(() => {
|
|
@@ -428,7 +392,7 @@ var FeatureItem = (props) => {
|
|
|
428
392
|
const copyText = `${window.location.origin}/quickstart/detail?module=${module}&feature=${data.alias}#${data.alias}`;
|
|
429
393
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
430
394
|
navigator.clipboard.writeText(copyText);
|
|
431
|
-
|
|
395
|
+
message.success(i18n2.rebate_copy_share_success);
|
|
432
396
|
} else {
|
|
433
397
|
fallbackCopyTextToClipboard(copyText);
|
|
434
398
|
}
|
|
@@ -446,7 +410,7 @@ var FeatureItem = (props) => {
|
|
|
446
410
|
setImgVisible(true);
|
|
447
411
|
}
|
|
448
412
|
};
|
|
449
|
-
return /* @__PURE__ */
|
|
413
|
+
return /* @__PURE__ */ React6.createElement("div", { id: data.alias, className: FeatureBox_default.FeatureItem }, /* @__PURE__ */ React6.createElement(
|
|
450
414
|
Link,
|
|
451
415
|
{
|
|
452
416
|
className: FeatureBox_default.header,
|
|
@@ -456,15 +420,15 @@ var FeatureItem = (props) => {
|
|
|
456
420
|
...data.alias == feature ? {} : { hash: data.alias }
|
|
457
421
|
}
|
|
458
422
|
},
|
|
459
|
-
/* @__PURE__ */
|
|
460
|
-
/* @__PURE__ */
|
|
423
|
+
/* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.headerLeft }, data.icon && /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.iconBox, dangerouslySetInnerHTML: { __html: data.icon } }), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.title }, data.name, /* @__PURE__ */ React6.createElement(Tooltip, { title: i18n2.rebate_copy_share }, /* @__PURE__ */ React6.createElement("i", { className: "iconfont", onClick: copyLink }, "\uE63E"))), !active && /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.summary }, data.summary))),
|
|
424
|
+
/* @__PURE__ */ React6.createElement(
|
|
461
425
|
"div",
|
|
462
426
|
{
|
|
463
427
|
className: FeatureBox_default.btn
|
|
464
428
|
},
|
|
465
429
|
active ? i18n2.order_close_product : i18n2.read
|
|
466
430
|
)
|
|
467
|
-
), active && /* @__PURE__ */
|
|
431
|
+
), active && /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.wrapper, onClick: imgClick }, data.content && /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.contentBox }, /* @__PURE__ */ React6.createElement("i", { className: "iconfont" }, "\uE649"), /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.contentRight }, /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.title }, i18n2.function_purpose), /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.content, dangerouslySetInnerHTML: { __html: data.content } }))), data.remark && /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.remark }, data.remark), /* @__PURE__ */ React6.createElement(
|
|
468
432
|
Image,
|
|
469
433
|
{
|
|
470
434
|
style: { display: "none" },
|
|
@@ -477,7 +441,7 @@ var FeatureItem = (props) => {
|
|
|
477
441
|
}
|
|
478
442
|
}
|
|
479
443
|
}
|
|
480
|
-
), /* @__PURE__ */
|
|
444
|
+
), /* @__PURE__ */ React6.createElement(
|
|
481
445
|
FeatureContentBox_default,
|
|
482
446
|
{
|
|
483
447
|
structure: data.contentRelative,
|
|
@@ -500,14 +464,14 @@ var FeatureBox = (props) => {
|
|
|
500
464
|
quoteList,
|
|
501
465
|
i18n: i18n2
|
|
502
466
|
} = props;
|
|
503
|
-
const featureData =
|
|
467
|
+
const featureData = useMemo(() => {
|
|
504
468
|
let tempModule = module;
|
|
505
469
|
if (!tempModule) {
|
|
506
470
|
tempModule = data?.[0]?.alias ?? "platform_post";
|
|
507
471
|
}
|
|
508
472
|
return data.find((item) => item.alias === tempModule);
|
|
509
473
|
}, [data, module]);
|
|
510
|
-
return featureData && /* @__PURE__ */
|
|
474
|
+
return featureData && /* @__PURE__ */ React6.createElement(i18nContext.Provider, { value: i18n2 }, /* @__PURE__ */ React6.createElement("div", { className: FeatureBox_default.FeatureBox, style: { marginBottom: feature ? 0 : 200 } }, (featureData.features || []).map((item) => /* @__PURE__ */ React6.createElement(
|
|
511
475
|
FeatureItem,
|
|
512
476
|
{
|
|
513
477
|
key: `${module}-${item.alias}`,
|
|
@@ -522,6 +486,5 @@ var FeatureBox = (props) => {
|
|
|
522
486
|
))));
|
|
523
487
|
};
|
|
524
488
|
var FeatureBox_default2 = FeatureBox;
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
};
|
|
489
|
+
|
|
490
|
+
export { FeatureBox_default2 as FeatureBox };
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quick-start-feature-box",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"keywords": ["react", "components"],
|
|
5
5
|
"author": "",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"module": "dist/index.js",
|
|
9
|
+
"style": "dist/index.css",
|
|
9
10
|
"files": [
|
|
10
11
|
"dist/**"
|
|
11
12
|
],
|