@blocklet/launcher-layout 2.3.20 → 2.3.22

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/es/nav.js DELETED
@@ -1,405 +0,0 @@
1
- import styled from '@emotion/styled';
2
- import Check from '@mui/icons-material/Check';
3
- import Skeleton from '@mui/material/Skeleton';
4
- import PropTypes from 'prop-types';
5
- import { useStepContext } from './context/step';
6
- import AppHeader from './header';
7
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
- function Nav({
9
- blockletMeta,
10
- logoUrl,
11
- locale,
12
- useOfSkeleton,
13
- subTitle,
14
- loading
15
- }) {
16
- const {
17
- steps,
18
- activeStep,
19
- setActiveStepByKey,
20
- setActiveStepByIndex,
21
- getStepStatus,
22
- canBackToStep
23
- } = useStepContext();
24
- const showSkeleton = useOfSkeleton ? loading : false;
25
- const getNodeClassName = (step, index) => {
26
- const classNameList = ['step-block'];
27
- const status = getStepStatus(step.key);
28
- switch (status) {
29
- case 'current':
30
- classNameList.push('step-active');
31
- break;
32
- case 'before':
33
- classNameList.push('step-checked');
34
- break;
35
- case 'after':
36
- default:
37
- }
38
- switch (step.showChild) {
39
- case 'activated':
40
- if (status === 'after') {
41
- classNameList.push('hide-step-child');
42
- }
43
- break;
44
- case 'activating':
45
- if (status === 'after' || status === 'before') {
46
- classNameList.push('hide-step-child');
47
- }
48
- break;
49
- case 'always':
50
- classNameList.push('always-step-child');
51
- break;
52
- default:
53
- }
54
- if (step.optional === true && activeStep < index) {
55
- classNameList.push('step-optional'); // optional在没有匹配到路由情况下会隐藏;超越这个步骤后就会一直出现
56
- }
57
- return classNameList.join(' ');
58
- };
59
- return /*#__PURE__*/_jsxs(Div, {
60
- children: [/*#__PURE__*/_jsx(AppHeader, {
61
- blockletMeta: blockletMeta,
62
- loading: loading,
63
- logoUrl: logoUrl,
64
- locale: locale,
65
- subTitle: subTitle
66
- }), /*#__PURE__*/_jsx(StepContainer, {
67
- className: `${showSkeleton ? 'hide-child-step-desc' : ''}`,
68
- children: steps.map((step, index) => {
69
- const canBack = !showSkeleton && canBackToStep(index);
70
- return /*#__PURE__*/_jsxs("div", {
71
- className: getNodeClassName(step, index),
72
- children: [/*#__PURE__*/_jsx("div", {
73
- className: "step-icon",
74
- children: /*#__PURE__*/_jsx(Check, {
75
- style: {
76
- fontSize: 16
77
- }
78
- })
79
- }), /*#__PURE__*/_jsx("div", {
80
- className: "step-line"
81
- }), /*#__PURE__*/_jsxs("div", {
82
- className: "step-content",
83
- title: step.name,
84
- children: [/*#__PURE__*/_jsx("span", {
85
- className: `step-content-name ${canBack ? ' step-clickable' : ''}`,
86
- onClick: () => {
87
- if (canBack) {
88
- if (step.key) {
89
- setActiveStepByKey(step.key);
90
- return;
91
- }
92
- setActiveStepByIndex(index);
93
- }
94
- },
95
- children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
96
- variant: "text",
97
- width: 100
98
- }) : step.name
99
- }), step.description && /*#__PURE__*/_jsx("div", {
100
- className: "step-desc",
101
- children: step.description
102
- }), step.children && step.children.length && /*#__PURE__*/_jsx("div", {
103
- className: "step-children",
104
- children: step.children.map(e => {
105
- let className = '';
106
- const childStepStatus = getStepStatus(e.key);
107
- switch (childStepStatus) {
108
- case 'before':
109
- className = 'step-child-block-checked';
110
- break;
111
- case 'current':
112
- className = 'step-child-block-active';
113
- break;
114
- case 'after':
115
- default:
116
- }
117
- return /*#__PURE__*/_jsx("div", {
118
- className: `step-child-block ${className}`,
119
- children: e.name
120
- }, e.key);
121
- })
122
- })]
123
- })]
124
- }, step.key);
125
- })
126
- })]
127
- });
128
- }
129
- const Div = styled.div`
130
- overflow-y: auto;
131
- ${props => props.theme.breakpoints.up('md')} {
132
- padding: 24px;
133
- border-right: 1px solid ${props => props.theme.palette.grey[100]};
134
- flex: 0 0 280px;
135
- min-height: 48px;
136
-
137
- .MuiStepConnector-vertical {
138
- padding: 0;
139
- }
140
- }
141
-
142
- ${props => props.theme.breakpoints.down('md')} {
143
- padding: 16px;
144
-
145
- .MuiStepConnector-lineVertical {
146
- border: none;
147
- }
148
- }
149
-
150
- .stepper {
151
- padding: 0 !important;
152
- background: transparent;
153
-
154
- ${props => props.theme.breakpoints.up('sm')} {
155
- margin-top: 100px;
156
- }
157
-
158
- ${props => props.theme.breakpoints.down('md')} {
159
- margin-top: 40px;
160
- }
161
-
162
- .step {
163
- cursor: pointer;
164
- }
165
- }
166
-
167
- .always-step-child {
168
- .step-child-block {
169
- animation: none !important;
170
- }
171
- }
172
- `;
173
- const StepContainer = styled.div`
174
- display: flex;
175
- flex-direction: column;
176
- margin-top: 60px;
177
-
178
- @media (max-height: 900px) {
179
- margin-top: 32px;
180
- }
181
-
182
- ${props => props.theme.breakpoints.down('md')} {
183
- margin-top: 30px;
184
- }
185
- .step-clickable {
186
- cursor: pointer;
187
- &:hover {
188
- color: ${props => props.theme.palette.primary.main};
189
- }
190
- }
191
- .step-line {
192
- display: block;
193
- position: absolute;
194
- z-index: 1;
195
- left: 11px;
196
- top: 12px;
197
- width: 2px;
198
- height: 100%;
199
- opacity: 0.5;
200
- background-color: ${props => props.theme.palette.grey[400]};
201
- transition: all ease 0.2s;
202
- }
203
- .step-icon {
204
- position: relative;
205
- z-index: 2;
206
- display: flex;
207
- flex-shrink: 0;
208
- justify-content: center;
209
- align-items: center;
210
- width: 24px;
211
- height: 24px;
212
- border-radius: 13px;
213
- background-color: ${props => props.theme.palette.grey[400]};
214
- color: ${props => props.theme.palette.common.white};
215
- transition: all ease 0.3s;
216
- &:before {
217
- position: absolute;
218
- left: 4px;
219
- top: 4px;
220
- z-index: 3;
221
- display: block;
222
- background-color: ${props => props.theme.palette.common.white};
223
- width: 16px;
224
- height: 16px;
225
- border-radius: 10px;
226
- content: '';
227
- transform: scale(0);
228
- transition: all ease 0.3s;
229
- }
230
- & > * {
231
- transform: scale(0);
232
- transition: all ease 0.2s;
233
- }
234
- }
235
- .step-content {
236
- position: relative;
237
- flex: 1;
238
- padding-top: 1px;
239
- margin-left: 22px;
240
- font-size: 16px;
241
- color: ${props => props.theme.palette.grey[700]};
242
- white-space: nowrap;
243
- }
244
- .step-desc {
245
- margin-top: 24px;
246
- font-size: 12px;
247
- font-weight: 500;
248
- height: 17px;
249
- color: ${props => props.theme.palette.grey[700]};
250
- transition: all ease 0.3s;
251
- overflow: hidden;
252
- }
253
- ${props => props.theme.breakpoints.up('md')} {
254
- .step-content-name {
255
- position: absolute;
256
- left: 0;
257
- top: 0;
258
- width: 100%;
259
- overflow: hidden;
260
- text-overflow: ellipsis;
261
- }
262
- }
263
- &.hide-child-step-desc {
264
- .step-desc {
265
- margin: 0;
266
- opacity: 0;
267
- height: 0;
268
- }
269
- }
270
- .step-block {
271
- position: relative;
272
- display: flex;
273
- min-height: 70px;
274
- opacity: 0.5;
275
- overflow: hidden;
276
- transition: all ease 0.2s;
277
- &:last-child {
278
- height: auto;
279
- min-height: auto;
280
- }
281
- &.step-optional {
282
- height: 0;
283
- opacity: 0;
284
- min-height: 0px;
285
- }
286
-
287
- &.step-checked,
288
- &.step-active {
289
- .step-desc {
290
- margin: 0;
291
- opacity: 0;
292
- height: 0;
293
- }
294
- }
295
-
296
- &.step-checked {
297
- opacity: 1;
298
- .step-icon {
299
- color: ${props => props.theme.palette.common.white};
300
- background-color: ${props => props.theme.palette.primary.main};
301
- & > * {
302
- transform: scale(1);
303
- }
304
- }
305
-
306
- .step-line {
307
- background-color: ${props => props.theme.palette.primary.main};
308
- opacity: 1;
309
- }
310
- }
311
-
312
- &.step-active {
313
- opacity: 1;
314
- .step-icon {
315
- background-color: ${props => props.theme.palette.primary.main};
316
- }
317
- .step-icon:before {
318
- transform: scale(1);
319
- }
320
- .step-content {
321
- color: ${props => props.theme.palette.primary.main};
322
- }
323
- }
324
-
325
- &:last-child {
326
- .step-line {
327
- display: none;
328
- }
329
-
330
- .step-child-block {
331
- &:last-child {
332
- padding-bottom: 0;
333
- }
334
- }
335
- }
336
-
337
- &.hide-step-child {
338
- .step-children {
339
- .step-child-block {
340
- margin-top: 0;
341
- height: 0;
342
- opacity: 0;
343
- &:last-child {
344
- padding-bottom: 0;
345
- }
346
- }
347
- }
348
- }
349
- }
350
- .step-children {
351
- padding-top: 20px;
352
- .step-child-block {
353
- margin-top: 4px;
354
- height: 24px;
355
- line-height: 24px;
356
- font-size: 14px;
357
- color: #9397a1;
358
- transition: all ease 0.3s;
359
- &:first-of-type {
360
- margin-top: 8px;
361
- }
362
- &:last-child {
363
- padding-bottom: 40px;
364
- }
365
- &.step-child-block-active {
366
- color: ${props => props.theme.palette.common.black};
367
- font-weight: 700;
368
- }
369
- &.step-child-block-checked {
370
- color: ${props => props.theme.palette.common.black};
371
- }
372
- }
373
- }
374
-
375
- .step-active {
376
- .step-child-block {
377
- animation: stepChildAnime ease 0.3s;
378
- }
379
- }
380
-
381
- @keyframes stepChildAnime {
382
- 0% {
383
- height: 0;
384
- }
385
- 100% {
386
- height: 24px;
387
- }
388
- }
389
- `;
390
- Nav.propTypes = {
391
- blockletMeta: PropTypes.object.isRequired,
392
- logoUrl: PropTypes.string,
393
- locale: PropTypes.string,
394
- useOfSkeleton: PropTypes.bool,
395
- subTitle: PropTypes.string,
396
- loading: PropTypes.bool
397
- };
398
- Nav.defaultProps = {
399
- logoUrl: '',
400
- locale: '',
401
- useOfSkeleton: false,
402
- subTitle: '',
403
- loading: false
404
- };
405
- export default Nav;
package/es/page-header.js DELETED
@@ -1,66 +0,0 @@
1
- import styled from '@emotion/styled';
2
- import PropTypes from 'prop-types';
3
- import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
4
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
- function PageHeader({
6
- title,
7
- subTitle,
8
- onClickBack,
9
- ...rest
10
- }) {
11
- return /*#__PURE__*/_jsxs(Content, {
12
- ...rest,
13
- children: [onClickBack && /*#__PURE__*/_jsx(ArrowBackIosIcon, {
14
- className: "back-btn",
15
- onClick: onClickBack
16
- }), /*#__PURE__*/_jsx("div", {
17
- className: "title",
18
- children: title
19
- }), /*#__PURE__*/_jsx("div", {
20
- className: "sub-title",
21
- children: subTitle
22
- })]
23
- });
24
- }
25
- const Content = styled.div`
26
- position: relative;
27
- width: 100%;
28
- text-align: center;
29
-
30
- .title {
31
- font-size: 24px;
32
- font-weight: 700;
33
- color: ${props => props.theme.palette.common.black};
34
-
35
- ${props => props.theme.breakpoints.down('md')} {
36
- font-size: 20px;
37
- }
38
- }
39
-
40
- .sub-title {
41
- font-size: 14px;
42
- color: ${props => props.theme.palette.grey[600]};
43
- padding: 0 14px;
44
- font-weight: 400;
45
- }
46
-
47
- .back-btn {
48
- position: absolute;
49
- left: 0;
50
- top: 8px;
51
- color: #9397a1;
52
- font-size: 18px;
53
- cursor: pointer;
54
- }
55
- `;
56
- export default PageHeader;
57
- PageHeader.propTypes = {
58
- title: PropTypes.string,
59
- subTitle: PropTypes.string,
60
- onClickBack: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
61
- };
62
- PageHeader.defaultProps = {
63
- title: '',
64
- subTitle: '',
65
- onClickBack: ''
66
- };
@@ -1,41 +0,0 @@
1
- import { createContext, useEffect, useState, useContext } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
4
- import { ThemeProvider as UxThemeProvider, create } from '@arcblock/ux/lib/Theme';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- const defaultTheme = create({});
7
- const ThemeContext = /*#__PURE__*/createContext({});
8
- export default function ThemeProvider({
9
- children,
10
- theme: _theme
11
- } = {}) {
12
- const [theme, setTheme] = useState(defaultTheme);
13
- useEffect(() => {
14
- if (_theme && typeof _theme === 'object') setTheme(_theme);
15
- }, [_theme]);
16
- if (theme) {
17
- return /*#__PURE__*/_jsx(ThemeContext.Provider, {
18
- value: theme,
19
- children: /*#__PURE__*/_jsx(ThemeContext.Consumer, {
20
- children: themeValue => {
21
- return /*#__PURE__*/_jsx(UxThemeProvider, {
22
- theme: themeValue,
23
- children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
24
- theme: themeValue,
25
- children: children
26
- })
27
- });
28
- }
29
- })
30
- });
31
- }
32
- return children;
33
- }
34
- ThemeProvider.propTypes = {
35
- children: PropTypes.any.isRequired,
36
- theme: PropTypes.object.isRequired
37
- };
38
- function useThemeContext() {
39
- return useContext(ThemeContext);
40
- }
41
- export { ThemeProvider, useThemeContext };
@@ -1,96 +0,0 @@
1
- /* eslint-disable react/jsx-wrap-multilines */
2
- import { useState } from 'react';
3
- import styled from '@emotion/styled';
4
- import PropTypes from 'prop-types';
5
- import Spinner from '@mui/material/CircularProgress';
6
- import Button from '@arcblock/ux/lib/Button';
7
- import Dialog from '@arcblock/ux/lib/Dialog';
8
- import SubmitHotKey from '@blocklet/launcher-ux/lib/hot-key/submit';
9
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
10
- function ServerEula({
11
- onContinue,
12
- nextDisabled,
13
- launching,
14
- texts,
15
- description
16
- }) {
17
- const [open, setOpen] = useState(false);
18
- const handleOpen = () => setOpen(x => !x);
19
- return /*#__PURE__*/_jsxs(_Fragment, {
20
- children: [/*#__PURE__*/_jsx(Div, {
21
- children: /*#__PURE__*/_jsxs(SubmitHotKey, {
22
- disabled: nextDisabled,
23
- onConfirm: onContinue,
24
- children: [/*#__PURE__*/_jsx("div", {
25
- className: "eula-trigger",
26
- onClick: handleOpen,
27
- children: texts.listenName
28
- }), /*#__PURE__*/_jsx(Button, {
29
- disabled: nextDisabled,
30
- color: "primary",
31
- variant: "contained",
32
- className: "next-button",
33
- onClick: onContinue,
34
- children: launching ? /*#__PURE__*/_jsxs(_Fragment, {
35
- children: [/*#__PURE__*/_jsx(Spinner, {
36
- size: 14
37
- }), texts.launchingText]
38
- }) : texts.buttonNext
39
- })]
40
- })
41
- }), /*#__PURE__*/_jsx(Dialog, {
42
- open: open,
43
- title: texts.listenName,
44
- onClose: () => setOpen(false),
45
- children: description
46
- })]
47
- });
48
- }
49
- ServerEula.propTypes = {
50
- onContinue: PropTypes.func.isRequired,
51
- nextDisabled: PropTypes.bool,
52
- launching: PropTypes.bool,
53
- description: PropTypes.any,
54
- texts: PropTypes.object
55
- };
56
- ServerEula.defaultProps = {
57
- nextDisabled: false,
58
- launching: false,
59
- description: '',
60
- texts: {
61
- listenName: '',
62
- launchingText: '',
63
- buttonNext: ''
64
- }
65
- };
66
- const Div = styled.div`
67
- margin: 0 auto;
68
- display: flex;
69
- justify-content: space-between;
70
- align-items: center;
71
-
72
- @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
73
- flex-direction: column;
74
- }
75
-
76
- .eula-trigger {
77
- cursor: pointer;
78
- text-decoration: underline;
79
- ${props => props.theme.breakpoints.up('md')} {
80
- padding-right: 24px;
81
- }
82
- ${props => props.theme.breakpoints.down('md')} {
83
- padding: 16px;
84
- }
85
- font-size: 14px;
86
- white-space: nowrap;
87
- &:hover {
88
- color: ${props => props.theme.palette.primary.main};
89
- }
90
- }
91
-
92
- .next-button {
93
- min-width: 200px;
94
- }
95
- `;
96
- export default ServerEula;