@blocklet/launcher-layout 2.1.85 → 2.1.87

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.
Files changed (7) hide show
  1. package/README.md +34 -4
  2. package/lib/header.js +134 -54
  3. package/lib/index.js +91 -63
  4. package/lib/locale.js +2 -2
  5. package/lib/nav.js +17 -22
  6. package/package.json +5 -4
  7. /package/lib/assets/{defaultBlockletLogo.png → blocklet-default-logo.png} +0 -0
package/README.md CHANGED
@@ -16,13 +16,43 @@ import Layout from '@blocklet/launcher-layout';
16
16
  ### Layout
17
17
 
18
18
  ```jsx
19
- const theme = useTheme()
19
+ return (
20
+ <LocaleProvider translations={[]}>
21
+ <StepProvider steps={steps}>
22
+ <Layout blockletMeta={blockletMeta} loading={false} navSubTitle="Restore">
23
+ This is page content
24
+ </Layout>
25
+ </StepProvider>
26
+ </LocaleProvider>
27
+ );
28
+ ```
29
+
30
+ `Custom theme`
31
+
32
+ ```jsx
33
+ const theme = create({
34
+ typography: {
35
+ fontSize: 14,
36
+ },
37
+ palette: {
38
+ primary: {
39
+ main: '#1dc1c7',
40
+ contrastText: '#fff',
41
+ },
42
+ secondary: {
43
+ main: '#1976d2',
44
+ contrastText: '#fff',
45
+ },
46
+ },
47
+ });
20
48
 
21
- return <ThemeProvider theme={theme}> {/* The component library depends on the theme of mui, you should wrap components with ThemeProvider */}
49
+ return (
22
50
  <LocaleProvider translations={[]}>
23
51
  <StepProvider steps={steps}>
24
- <Layout blockletMeta={blockletMeta}>This is page content</Layout>
52
+ <Layout blockletMeta={blockletMeta} loading={false} navSubTitle="Launching" theme={theme}>
53
+ This is page content
54
+ </Layout>
25
55
  </StepProvider>
26
56
  </LocaleProvider>
27
- <ThemeProvider>
57
+ );
28
58
  ```
package/lib/header.js CHANGED
@@ -4,62 +4,34 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _react = require("react");
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
7
+ var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
8
+ var _launcherUtil = require("@blocklet/launcher-util");
9
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
11
10
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
12
- var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
13
- var _Img = _interopRequireDefault(require("@arcblock/ux/lib/Img"));
14
- var _defaultBlockletLogo = _interopRequireDefault(require("./assets/defaultBlockletLogo.png"));
11
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
12
+ var _isEmpty = _interopRequireDefault(require("is-empty"));
13
+ var _propTypes = _interopRequireDefault(require("prop-types"));
14
+ var _react = require("react");
15
+ var _urlJoin = _interopRequireDefault(require("url-join"));
16
+ var _blockletDefaultLogo = _interopRequireDefault(require("./assets/blocklet-default-logo.png"));
15
17
  var _locale = require("./locale");
16
18
  var _jsxRuntime = require("react/jsx-runtime");
17
- var _templateObject;
19
+ var _templateObject, _templateObject2, _templateObject3;
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
20
22
  function AppHeader(_ref) {
21
23
  let {
22
- title,
24
+ blockletMeta,
23
25
  subTitle,
24
26
  logoUrl,
25
- did,
26
27
  locale,
27
- navLogo
28
+ navLogo,
29
+ loading
28
30
  } = _ref;
29
31
  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
30
32
  const blockletSize = isMobile ? 18 : 48;
31
33
  const appNameRef = (0, _react.useRef)(null);
32
34
  const [appNameSize, setAppNameSize] = (0, _react.useState)('');
33
- let blockletIcon = isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
34
- variant: "rectangular",
35
- width: 100,
36
- height: 16,
37
- alt: "".concat(title, " icon"),
38
- style: {
39
- marginTop: 4
40
- }
41
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
42
- variant: "rectangular",
43
- width: blockletSize,
44
- height: blockletSize
45
- });
46
- if (logoUrl) {
47
- blockletIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
48
- width: blockletSize,
49
- height: blockletSize,
50
- src: logoUrl,
51
- alt: "blocklet icon",
52
- fallback: _defaultBlockletLogo.default,
53
- style: {
54
- verticalAlign: 'text-bottom'
55
- }
56
- });
57
- } else if (did) {
58
- blockletIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
59
- did: did,
60
- size: blockletSize
61
- });
62
- }
63
35
  (0, _react.useEffect)(() => {
64
36
  if (appNameRef.current && appNameRef.current.offsetHeight > 34) {
65
37
  if (appNameSize === '') {
@@ -68,50 +40,158 @@ function AppHeader(_ref) {
68
40
  setAppNameSize('small');
69
41
  }
70
42
  }
71
- }, [appNameSize, title]);
43
+ }, [appNameSize]);
72
44
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
73
45
  className: appNameSize === 'small' ? 'center-mode' : '',
74
46
  children: [isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
75
47
  className: "app-icon",
76
48
  children: navLogo
77
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
49
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
78
50
  className: "app-icon",
79
- children: blockletIcon
51
+ children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIconSkeleton, {
52
+ blockletSize: blockletSize,
53
+ isMobile: isMobile
54
+ }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIcon, {
55
+ blockletSize: blockletSize,
56
+ logoUrl: logoUrl
57
+ })]
80
58
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
81
59
  className: "header-title",
82
- children: [subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
60
+ children: [isMobile && subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
83
61
  className: "header-title-sub",
84
62
  children: subTitle
85
63
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
86
64
  className: "app-name-content",
87
65
  children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
88
66
  className: "launching-context",
89
- children: (0, _locale.getLaunchingText)(locale)
90
- }), title && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
67
+ children: subTitle || (0, _locale.getLaunchingText)(locale)
68
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
91
69
  className: "header-title-name ".concat(appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''),
92
70
  ref: appNameRef,
93
- children: [isMobile ? blockletIcon : '', " ", title]
71
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AppTitle, {
72
+ logoUrl: logoUrl,
73
+ isMobile: isMobile,
74
+ blockletMeta: blockletMeta,
75
+ blockletSize: blockletSize,
76
+ loading: loading
77
+ })
94
78
  })]
95
79
  })]
96
80
  })]
97
81
  });
98
82
  }
99
83
  AppHeader.propTypes = {
100
- title: _propTypes.default.any,
84
+ blockletMeta: _propTypes.default.object,
101
85
  subTitle: _propTypes.default.any,
102
86
  logoUrl: _propTypes.default.string,
103
- did: _propTypes.default.string,
104
87
  locale: _propTypes.default.string,
105
- navLogo: _propTypes.default.any
88
+ navLogo: _propTypes.default.any,
89
+ loading: _propTypes.default.bool
106
90
  };
107
91
  AppHeader.defaultProps = {
108
- title: '',
109
92
  subTitle: '',
110
93
  logoUrl: '',
111
- did: '',
112
94
  locale: '',
113
- navLogo: ''
95
+ navLogo: '',
96
+ loading: false,
97
+ blockletMeta: {}
98
+ };
99
+
100
+ // eslint-disable-next-line react/prop-types
101
+ function AppIconSkeleton(_ref2) {
102
+ let {
103
+ blockletSize,
104
+ isMobile
105
+ } = _ref2;
106
+ if (isMobile) {
107
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
108
+ variant: "rectangular",
109
+ width: 100,
110
+ height: 16,
111
+ alt: "icon",
112
+ style: {
113
+ marginTop: 4
114
+ }
115
+ });
116
+ }
117
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
118
+ variant: "rectangular",
119
+ width: blockletSize,
120
+ height: blockletSize
121
+ });
122
+ }
123
+
124
+ // eslint-disable-next-line react/prop-types
125
+ function AppIcon(_ref3) {
126
+ let {
127
+ logoUrl,
128
+ blockletSize
129
+ } = _ref3;
130
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
131
+ width: blockletSize,
132
+ height: blockletSize,
133
+ src: logoUrl,
134
+ alt: "blocklet icon",
135
+ fallback: _blockletDefaultLogo.default,
136
+ style: {
137
+ verticalAlign: 'text-bottom'
138
+ }
139
+ });
140
+ }
141
+
142
+ // eslint-disable-next-line react/prop-types
143
+ function AppTitle(_ref4) {
144
+ let {
145
+ isMobile,
146
+ logoUrl,
147
+ blockletMeta,
148
+ blockletSize,
149
+ loading
150
+ } = _ref4;
151
+ const name = (0, _launcherUtil.getBlockletDisplayName)(blockletMeta);
152
+ if (loading) {
153
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(AppIconSkeleton, {
154
+ blockletSize: blockletSize
155
+ });
156
+ }
157
+ if ((0, _isEmpty.default)(blockletMeta)) {
158
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
159
+ variant: "rectangular",
160
+ animation: false,
161
+ width: 100,
162
+ height: 16,
163
+ alt: "icon",
164
+ style: {
165
+ marginTop: 4
166
+ }
167
+ });
168
+ }
169
+ if (isMobile) {
170
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileTitleStyle, {
171
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AppIcon, {
172
+ blockletSize: blockletSize,
173
+ logoUrl: logoUrl
174
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
175
+ className: "ellipsis-title",
176
+ children: (0, _launcherUtil.getBlockletDisplayName)(blockletMeta)
177
+ })]
178
+ });
179
+ }
180
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(AppLink, {
181
+ target: "_blank",
182
+ href: (0, _urlJoin.default)((blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.registryUrl) || '', "/blocklets/".concat(blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.did)),
183
+ title: name,
184
+ children: name
185
+ });
186
+ }
187
+ const MobileTitleStyle = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ellipsis-title {\n flex: 1;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n ", " {\n left: 26px;\n width: calc(100% - 26px);\n }\n }\n"])), props => props.theme.breakpoints.down('md'));
188
+ AppTitle.propTypes = {
189
+ blockletMeta: _propTypes.default.object
190
+ };
191
+ AppTitle.defaultProps = {
192
+ blockletMeta: {}
114
193
  };
115
194
  var _default = AppHeader;
116
195
  exports.default = _default;
117
- const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n width: 100%;\n ", " {\n min-height: 70px;\n }\n ", " {\n align-items: center;\n }\n .app-name-content {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n align-items: flex-start;\n flex-direction: column;\n }\n ", " {\n height: 22px;\n }\n }\n .launching-context {\n flex-shrink: 0;\n font-size: 14px;\n font-weight: 600;\n color: ", ";\n ", " {\n margin-bottom: 4px;\n }\n ", " {\n font-size: 14px;\n line-height: 15px;\n &:after {\n display: inline-block;\n margin: 0 4px;\n content: ':';\n }\n }\n }\n\n &.center-mode {\n align-items: flex-start;\n .launching-context {\n ", " {\n margin-bottom: 0;\n }\n }\n }\n\n .app-icon {\n flex-shrink: 0;\n > * {\n display: block;\n vertical-align: middle;\n }\n }\n\n .header-title {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: flex-start;\n margin-left: 24px;\n ", " {\n margin-left: 16px;\n }\n .header-title-name {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n height: 100%;\n color: ", ";\n font-weight: 700;\n ", " {\n font-size: 18px;\n\n &.middle-size {\n font-size: 16px;\n }\n }\n ", " {\n display: block;\n max-width: calc(100vw - 100px);\n font-size: 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .header-title-sub {\n color: ", ";\n font-size: 12px;\n line-height: 16px;\n\n ", " {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));
196
+ const AppLink = _styled.default.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n text-decoration: none;\n font-weight: 700;\n -webkit-font-smoothing: antialiased;\n\n ", " {\n display: block;\n max-width: calc(100vw - 150px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
197
+ const Container = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n width: 100%;\n ", " {\n min-height: 70px;\n }\n ", " {\n align-items: center;\n }\n .app-name-content {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n ", " {\n align-items: flex-start;\n flex-direction: column;\n }\n ", " {\n height: 22px;\n }\n }\n .launching-context {\n flex-shrink: 0;\n font-size: 14px;\n font-weight: 600;\n color: ", ";\n ", " {\n margin-bottom: 4px;\n }\n ", " {\n font-size: 14px;\n line-height: 15px;\n &:after {\n display: inline-block;\n margin: 0 4px;\n content: ':';\n }\n }\n }\n\n &.center-mode {\n align-items: flex-start;\n .launching-context {\n ", " {\n margin-bottom: 0;\n }\n }\n }\n\n .app-icon {\n flex-shrink: 0;\n > * {\n display: block;\n vertical-align: middle;\n }\n }\n\n .header-title {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: flex-start;\n margin-left: 24px;\n ", " {\n margin-left: 16px;\n }\n .header-title-name {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1;\n height: 100%;\n color: ", ";\n font-weight: 700;\n ", " {\n font-size: 18px;\n\n &.middle-size {\n font-size: 16px;\n }\n }\n ", " {\n display: block;\n max-width: calc(100vw - 100px);\n font-size: 16px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .header-title-sub {\n color: ", ";\n font-size: 12px;\n line-height: 16px;\n\n ", " {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('md'));
package/lib/index.js CHANGED
@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
8
- var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
9
- var _launcherUtil = require("@blocklet/launcher-util");
8
+ var _Theme = require("@arcblock/ux/lib/Theme");
10
9
  var _smallCircleProgress = _interopRequireDefault(require("@blocklet/launcher-ux/lib/small-circle-progress"));
11
10
  var _styled = _interopRequireDefault(require("@emotion/styled"));
11
+ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
12
12
  var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
13
+ var _styles = require("@mui/material/styles");
13
14
  var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
14
15
  var _isObject = _interopRequireDefault(require("lodash/isObject"));
15
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +20,7 @@ var _header = _interopRequireDefault(require("./header"));
19
20
  var _locale = require("./locale");
20
21
  var _nav = _interopRequireDefault(require("./nav"));
21
22
  var _jsxRuntime = require("react/jsx-runtime");
22
- const _excluded = ["blockletMeta", "children", "logoUrl", "locale", "header", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "contentMaxWidth"];
23
+ const _excluded = ["blockletMeta", "loading", "children", "logoUrl", "locale", "header", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "navSubTitle", "contentMaxWidth", "theme"];
23
24
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
24
25
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
26
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,9 +34,25 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
33
34
  const HEADER_HEIGHT_MD = '72px';
34
35
  const MobileContent = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 100%;\n padding-top: ", ";\n"])), HEADER_HEIGHT_MD);
35
36
  const PcContent = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n min-width: 900px;\n max-width: ", ";\n max-height: 880px;\n border-radius: 8px;\n background-color: #fff;\n width: ", ";\n height: ", ";\n\n @media (max-height: 900px) {\n margin-top: ", ";\n width: 100%;\n height: 100%;\n }\n"])), props => props.contentMaxWidth, props => props.width || '80%', props => props.height || '80%', HEADER_HEIGHT_MD);
37
+ const theme = (0, _Theme.create)({
38
+ typography: {
39
+ fontSize: 14
40
+ },
41
+ palette: {
42
+ primary: {
43
+ main: '#1dc1c7',
44
+ contrastText: '#fff'
45
+ },
46
+ secondary: {
47
+ main: '#1976d2',
48
+ contrastText: '#fff'
49
+ }
50
+ }
51
+ });
36
52
  function Layout(_ref) {
37
53
  let {
38
54
  blockletMeta,
55
+ loading,
39
56
  children,
40
57
  logoUrl,
41
58
  locale,
@@ -46,10 +63,12 @@ function Layout(_ref) {
46
63
  navLogo,
47
64
  useOfSkeleton,
48
65
  stepTip,
49
- contentMaxWidth
66
+ navSubTitle,
67
+ contentMaxWidth,
68
+ theme: userTheme
50
69
  } = _ref,
51
70
  rest = _objectWithoutProperties(_ref, _excluded);
52
- const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
71
+ const isMobile = (0, _useMediaQuery.default)(t => t.breakpoints.down('md'));
53
72
  const {
54
73
  activeStep,
55
74
  totalStepsCount
@@ -67,67 +86,70 @@ function Layout(_ref) {
67
86
  });
68
87
  }
69
88
  }
70
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
71
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
72
- maxWidth: contentMaxWidth,
73
- width: pcWidth,
74
- children: [header && header, !header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
75
- children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
76
- className: "left",
77
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
78
- title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
79
- className: "ellipsis-title",
80
- children: (0, _launcherUtil.getBlockletDisplayName)(blockletMeta)
81
- }),
82
- navLogo: navLogo,
83
- subTitle: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
84
- children: ["".concat(stepTip || translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
85
- value: (activeStep + 1) / totalStepsCount * 100,
86
- style: {
87
- marginLeft: 3
88
- }
89
- })]
90
- }),
89
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
90
+ theme: Object.assign(theme, userTheme || {}),
91
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
92
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
93
+ maxWidth: contentMaxWidth,
94
+ width: pcWidth,
95
+ children: [header && header, !header && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
96
+ children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
97
+ className: "left",
98
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
99
+ blockletMeta: blockletMeta,
100
+ navLogo: navLogo,
101
+ subTitle: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
102
+ children: ["".concat(navSubTitle || translations.defaultNavSubTitle, " ").concat(activeStep + 1, "/").concat(totalStepsCount), /*#__PURE__*/(0, _jsxRuntime.jsx)(_smallCircleProgress.default, {
103
+ value: (activeStep + 1) / totalStepsCount * 100,
104
+ style: {
105
+ marginLeft: 3
106
+ }
107
+ })]
108
+ }),
109
+ logoUrl: logoUrl,
110
+ locale: locale,
111
+ loading: loading
112
+ })
113
+ }), navLogo && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
114
+ className: "left",
115
+ children: navLogo
116
+ }), headerEndAddons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
117
+ className: "right",
118
+ children: headerEndAddons
119
+ })]
120
+ })]
121
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
122
+ contentMaxWidth: contentMaxWidth,
123
+ width: pcWidth,
124
+ height: pcHeight,
125
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
126
+ mdDown: true,
127
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nav.default, {
128
+ locale: locale,
129
+ blockletMeta: blockletMeta,
91
130
  logoUrl: logoUrl,
92
- did: blockletMeta.did,
93
- locale: locale
131
+ useOfSkeleton: useOfSkeleton,
132
+ subTitle: navSubTitle,
133
+ loading: loading
94
134
  })
95
- }), navLogo && !isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
96
- className: "left",
97
- children: navLogo
98
- }), headerEndAddons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
99
- className: "right",
100
- children: headerEndAddons
135
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
136
+ fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
137
+ relative: "parent",
138
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
139
+ style: {
140
+ marginTop: 36
141
+ }
142
+ })
143
+ }),
144
+ children: children
101
145
  })]
102
146
  })]
103
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
104
- contentMaxWidth: contentMaxWidth,
105
- width: pcWidth,
106
- height: pcHeight,
107
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
108
- mdDown: true,
109
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nav.default, {
110
- locale: locale,
111
- blockletMeta: blockletMeta,
112
- logoUrl: logoUrl,
113
- useOfSkeleton: useOfSkeleton
114
- })
115
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
116
- fallback: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
117
- relative: "parent",
118
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
119
- style: {
120
- marginTop: 36
121
- }
122
- })
123
- }),
124
- children: children
125
- })]
126
- })]
127
- }));
147
+ }))
148
+ });
128
149
  }
129
150
  Layout.propTypes = {
130
- blockletMeta: _propTypes.default.object.isRequired,
151
+ loading: _propTypes.default.bool,
152
+ blockletMeta: _propTypes.default.object,
131
153
  children: _propTypes.default.object.isRequired,
132
154
  logoUrl: _propTypes.default.string,
133
155
  locale: _propTypes.default.oneOf(['en', 'zh']),
@@ -138,9 +160,13 @@ Layout.propTypes = {
138
160
  contentMaxWidth: _propTypes.default.string,
139
161
  navLogo: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.object]),
140
162
  useOfSkeleton: _propTypes.default.bool,
141
- stepTip: _propTypes.default.string
163
+ stepTip: _propTypes.default.string,
164
+ navSubTitle: _propTypes.default.string,
165
+ theme: _propTypes.default.object
142
166
  };
143
167
  Layout.defaultProps = {
168
+ loading: false,
169
+ blockletMeta: {},
144
170
  logoUrl: '',
145
171
  locale: 'en',
146
172
  header: null,
@@ -150,7 +176,9 @@ Layout.defaultProps = {
150
176
  contentMaxWidth: '1245px',
151
177
  navLogo: '',
152
178
  useOfSkeleton: true,
153
- stepTip: ''
179
+ stepTip: '',
180
+ navSubTitle: '',
181
+ theme: null
154
182
  };
155
183
 
156
184
  // 针对 safari 下的 chrome 适配
@@ -159,7 +187,7 @@ let injectStyle = '';
159
187
  if (ua.includes('iphone os') && ua.includes('crios')) {
160
188
  injectStyle = 'height: calc(100vh - 60px);';
161
189
  }
162
- const Header = _styled.default.header(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n min-width: 900px;\n box-sizing: border-box;\n position: absolute;\n z-index: 200;\n top: 0;\n display: flex;\n max-width: ", ";\n height: 68px;\n align-items: center;\n\n @media (max-height: 900px) {\n width: 100%;\n }\n\n ", " and (min-height: 900px) {\n justify-content: flex-end;\n }\n\n ", " {\n min-width: 360px;\n width: 100%;\n height: ", ";\n padding: 14px 16px;\n justify-content: space-between;\n background: #f6f8fa;\n }\n\n .left {\n flex: 1;\n display: flex;\n align-items: center;\n }\n\n .right {\n display: flex;\n align-items: center;\n ", " {\n button,\n a {\n padding-left: 8px;\n padding-right: 8px;\n }\n }\n }\n\n .ellipsis-title {\n flex: 1;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n ", " {\n left: 26px;\n width: calc(100% - 26px);\n }\n }\n"])), props => props.width || '80%', props => props.maxWidth, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), HEADER_HEIGHT_MD, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
190
+ const Header = _styled.default.header(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n min-width: 900px;\n box-sizing: border-box;\n position: absolute;\n z-index: 200;\n top: 0;\n display: flex;\n max-width: ", ";\n height: 68px;\n align-items: center;\n\n @media (max-height: 900px) {\n width: 100%;\n }\n\n ", " and (min-height: 900px) {\n justify-content: flex-end;\n }\n\n ", " {\n min-width: 360px;\n width: 100%;\n height: ", ";\n padding: 14px 16px;\n justify-content: space-between;\n background: #f6f8fa;\n }\n\n .left {\n flex: 1;\n display: flex;\n align-items: center;\n }\n\n .right {\n display: flex;\n align-items: center;\n ", " {\n button,\n a {\n padding-left: 8px;\n padding-right: 8px;\n }\n }\n }\n"])), props => props.width || '80%', props => props.maxWidth, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), HEADER_HEIGHT_MD, props => props.theme.breakpoints.down('md'));
163
191
  const Root = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n letter-spacing: normal;\n ", "\n\n .circular {\n display: inline-block;\n position: relative;\n width: 15px;\n height: 12px;\n > * {\n position: absolute;\n left: 3px;\n top: 2px;\n width: 100%;\n height: 100%;\n }\n }\n\n ", " {\n background: #f6f8fa;\n }\n\n ", " {\n background: ", ";\n }\n"])), injectStyle, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white);
164
192
  const LogoContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: block;\n margin-top: 4px;\n"])));
165
193
  var _default = Layout;
package/lib/locale.js CHANGED
@@ -3,11 +3,11 @@
3
3
  const translations = {
4
4
  en: {
5
5
  optional: 'Optional',
6
- stepTip: 'Launching Step'
6
+ defaultNavSubTitle: 'Launching'
7
7
  },
8
8
  zh: {
9
9
  optional: '可选',
10
- stepTip: '启动步骤'
10
+ defaultNavSubTitle: '启动'
11
11
  }
12
12
  };
13
13
  const getTranslations = locale => translations[locale] ? translations[locale] : translations.en;
package/lib/nav.js CHANGED
@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _util = require("@blocklet/launcher-util/lib/util");
8
7
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
8
  var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
10
9
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
11
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _urlJoin = _interopRequireDefault(require("url-join"));
13
11
  var _step = require("./context/step");
14
12
  var _header = _interopRequireDefault(require("./header"));
15
13
  var _jsxRuntime = require("react/jsx-runtime");
16
- var _templateObject, _templateObject2, _templateObject3;
14
+ var _templateObject, _templateObject2;
17
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
16
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
17
  function Nav(_ref) {
@@ -21,7 +19,9 @@ function Nav(_ref) {
21
19
  blockletMeta,
22
20
  logoUrl,
23
21
  locale,
24
- useOfSkeleton
22
+ useOfSkeleton,
23
+ subTitle,
24
+ loading
25
25
  } = _ref;
26
26
  const {
27
27
  steps,
@@ -31,8 +31,7 @@ function Nav(_ref) {
31
31
  getStepStatus,
32
32
  canBackToStep
33
33
  } = (0, _step.useStepContext)();
34
- const name = (0, _util.getBlockletDisplayName)(blockletMeta);
35
- const showSkeleton = useOfSkeleton ? !blockletMeta || !name : false;
34
+ const showSkeleton = useOfSkeleton ? loading : false;
36
35
  const getNodeClassName = (step, index) => {
37
36
  const classNameList = ['step-block'];
38
37
  const status = getStepStatus(step.key);
@@ -70,18 +69,11 @@ function Nav(_ref) {
70
69
  };
71
70
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
72
71
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
73
- title: /*#__PURE__*/(0, _jsxRuntime.jsx)(AppLink, {
74
- target: "_blank",
75
- href: (0, _urlJoin.default)(blockletMeta.registryUrl || '', "/blocklets/".concat(blockletMeta.did)),
76
- title: name,
77
- children: name || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
78
- variant: "text",
79
- width: 150
80
- })
81
- }),
82
- did: blockletMeta.did,
72
+ blockletMeta: blockletMeta,
73
+ loading: loading,
83
74
  logoUrl: logoUrl,
84
- locale: locale
75
+ locale: locale,
76
+ subTitle: subTitle
85
77
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepContainer, {
86
78
  className: "".concat(showSkeleton ? 'hide-child-step-desc' : ''),
87
79
  children: steps.map((step, index) => {
@@ -145,19 +137,22 @@ function Nav(_ref) {
145
137
  })]
146
138
  });
147
139
  }
148
- const AppLink = _styled.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n text-decoration: none;\n font-weight: 700;\n -webkit-font-smoothing: antialiased;\n\n ", " {\n display: block;\n max-width: calc(100vw - 150px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'));
149
- const Div = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n overflow-y: auto;\n ", " {\n padding: 24px;\n border-right: 1px solid ", ";\n flex: 0 0 280px;\n min-height: 48px;\n\n .MuiStepConnector-vertical {\n padding: 0;\n }\n }\n\n ", " {\n padding: 16px;\n\n .MuiStepConnector-lineVertical {\n border: none;\n }\n }\n\n .stepper {\n padding: 0 !important;\n background: transparent;\n\n ", " {\n margin-top: 100px;\n }\n\n ", " {\n margin-top: 40px;\n }\n\n .step {\n cursor: pointer;\n }\n }\n\n .always-step-child {\n .step-child-block {\n animation: none !important;\n }\n }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
150
- const StepContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: 60px;\n\n @media (max-height: 900px) {\n margin-top: 32px;\n }\n\n ", " {\n margin-top: 30px;\n }\n .step-clickable {\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n .step-line {\n display: block;\n position: absolute;\n z-index: 1;\n left: 11px;\n top: 12px;\n width: 2px;\n height: 100%;\n opacity: 0.5;\n background-color: ", ";\n transition: all ease 0.2s;\n }\n .step-icon {\n position: relative;\n z-index: 2;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 24px;\n height: 24px;\n border-radius: 13px;\n background-color: ", ";\n color: ", ";\n transition: all ease 0.3s;\n &:before {\n position: absolute;\n left: 4px;\n top: 4px;\n z-index: 3;\n display: block;\n background-color: ", ";\n width: 16px;\n height: 16px;\n border-radius: 10px;\n content: '';\n transform: scale(0);\n transition: all ease 0.3s;\n }\n & > * {\n transform: scale(0);\n transition: all ease 0.2s;\n }\n }\n .step-content {\n position: relative;\n flex: 1;\n padding-top: 1px;\n margin-left: 22px;\n font-size: 16px;\n color: ", ";\n white-space: nowrap;\n }\n .step-desc {\n margin-top: 24px;\n font-size: 12px;\n font-weight: 500;\n height: 17px;\n color: ", ";\n transition: all ease 0.3s;\n overflow: hidden;\n }\n ", " {\n .step-content-name {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n &.hide-child-step-desc {\n .step-desc {\n margin: 0;\n opacity: 0;\n height: 0;\n }\n }\n .step-block {\n position: relative;\n display: flex;\n min-height: 70px;\n opacity: 0.5;\n overflow: hidden;\n transition: all ease 0.2s;\n &:last-child {\n height: auto;\n min-height: auto;\n }\n &.step-optional {\n height: 0;\n opacity: 0;\n min-height: 0px;\n }\n\n &.step-checked,\n &.step-active {\n .step-desc {\n margin: 0;\n opacity: 0;\n height: 0;\n }\n }\n\n &.step-checked {\n opacity: 1;\n .step-icon {\n color: ", ";\n background-color: ", ";\n & > * {\n transform: scale(1);\n }\n }\n\n .step-line {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &.step-active {\n opacity: 1;\n .step-icon {\n background-color: ", ";\n }\n .step-icon:before {\n transform: scale(1);\n }\n .step-content {\n color: ", ";\n }\n }\n\n &:last-child {\n .step-line {\n display: none;\n }\n\n .step-child-block {\n &:last-child {\n padding-bottom: 0;\n }\n }\n }\n\n &.hide-step-child {\n .step-children {\n .step-child-block {\n margin-top: 0;\n height: 0;\n opacity: 0;\n &:last-child {\n padding-bottom: 0;\n }\n }\n }\n }\n }\n .step-children {\n padding-top: 20px;\n .step-child-block {\n margin-top: 4px;\n height: 24px;\n line-height: 24px;\n font-size: 14px;\n color: #9397a1;\n transition: all ease 0.3s;\n &:first-of-type {\n margin-top: 8px;\n }\n &:last-child {\n padding-bottom: 40px;\n }\n &.step-child-block-active {\n color: ", ";\n font-weight: 700;\n }\n &.step-child-block-checked {\n color: ", ";\n }\n }\n }\n\n .step-active {\n .step-child-block {\n animation: stepChildAnime ease 0.3s;\n }\n }\n\n @keyframes stepChildAnime {\n 0% {\n height: 0;\n }\n 100% {\n height: 24px;\n }\n }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
140
+ const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow-y: auto;\n ", " {\n padding: 24px;\n border-right: 1px solid ", ";\n flex: 0 0 280px;\n min-height: 48px;\n\n .MuiStepConnector-vertical {\n padding: 0;\n }\n }\n\n ", " {\n padding: 16px;\n\n .MuiStepConnector-lineVertical {\n border: none;\n }\n }\n\n .stepper {\n padding: 0 !important;\n background: transparent;\n\n ", " {\n margin-top: 100px;\n }\n\n ", " {\n margin-top: 40px;\n }\n\n .step {\n cursor: pointer;\n }\n }\n\n .always-step-child {\n .step-child-block {\n animation: none !important;\n }\n }\n"])), props => props.theme.breakpoints.up('md'), props => props.theme.palette.grey[100], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'));
141
+ const StepContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: 60px;\n\n @media (max-height: 900px) {\n margin-top: 32px;\n }\n\n ", " {\n margin-top: 30px;\n }\n .step-clickable {\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n .step-line {\n display: block;\n position: absolute;\n z-index: 1;\n left: 11px;\n top: 12px;\n width: 2px;\n height: 100%;\n opacity: 0.5;\n background-color: ", ";\n transition: all ease 0.2s;\n }\n .step-icon {\n position: relative;\n z-index: 2;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 24px;\n height: 24px;\n border-radius: 13px;\n background-color: ", ";\n color: ", ";\n transition: all ease 0.3s;\n &:before {\n position: absolute;\n left: 4px;\n top: 4px;\n z-index: 3;\n display: block;\n background-color: ", ";\n width: 16px;\n height: 16px;\n border-radius: 10px;\n content: '';\n transform: scale(0);\n transition: all ease 0.3s;\n }\n & > * {\n transform: scale(0);\n transition: all ease 0.2s;\n }\n }\n .step-content {\n position: relative;\n flex: 1;\n padding-top: 1px;\n margin-left: 22px;\n font-size: 16px;\n color: ", ";\n white-space: nowrap;\n }\n .step-desc {\n margin-top: 24px;\n font-size: 12px;\n font-weight: 500;\n height: 17px;\n color: ", ";\n transition: all ease 0.3s;\n overflow: hidden;\n }\n ", " {\n .step-content-name {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n &.hide-child-step-desc {\n .step-desc {\n margin: 0;\n opacity: 0;\n height: 0;\n }\n }\n .step-block {\n position: relative;\n display: flex;\n min-height: 70px;\n opacity: 0.5;\n overflow: hidden;\n transition: all ease 0.2s;\n &:last-child {\n height: auto;\n min-height: auto;\n }\n &.step-optional {\n height: 0;\n opacity: 0;\n min-height: 0px;\n }\n\n &.step-checked,\n &.step-active {\n .step-desc {\n margin: 0;\n opacity: 0;\n height: 0;\n }\n }\n\n &.step-checked {\n opacity: 1;\n .step-icon {\n color: ", ";\n background-color: ", ";\n & > * {\n transform: scale(1);\n }\n }\n\n .step-line {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &.step-active {\n opacity: 1;\n .step-icon {\n background-color: ", ";\n }\n .step-icon:before {\n transform: scale(1);\n }\n .step-content {\n color: ", ";\n }\n }\n\n &:last-child {\n .step-line {\n display: none;\n }\n\n .step-child-block {\n &:last-child {\n padding-bottom: 0;\n }\n }\n }\n\n &.hide-step-child {\n .step-children {\n .step-child-block {\n margin-top: 0;\n height: 0;\n opacity: 0;\n &:last-child {\n padding-bottom: 0;\n }\n }\n }\n }\n }\n .step-children {\n padding-top: 20px;\n .step-child-block {\n margin-top: 4px;\n height: 24px;\n line-height: 24px;\n font-size: 14px;\n color: #9397a1;\n transition: all ease 0.3s;\n &:first-of-type {\n margin-top: 8px;\n }\n &:last-child {\n padding-bottom: 40px;\n }\n &.step-child-block-active {\n color: ", ";\n font-weight: 700;\n }\n &.step-child-block-checked {\n color: ", ";\n }\n }\n }\n\n .step-active {\n .step-child-block {\n animation: stepChildAnime ease 0.3s;\n }\n }\n\n @keyframes stepChildAnime {\n 0% {\n height: 0;\n }\n 100% {\n height: 24px;\n }\n }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main, props => props.theme.palette.grey[400], props => props.theme.palette.grey[400], props => props.theme.palette.common.white, props => props.theme.palette.common.white, props => props.theme.palette.grey[700], props => props.theme.palette.grey[700], props => props.theme.breakpoints.up('md'), props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.black, props => props.theme.palette.common.black);
151
142
  Nav.propTypes = {
152
143
  blockletMeta: _propTypes.default.object.isRequired,
153
144
  logoUrl: _propTypes.default.string,
154
145
  locale: _propTypes.default.string,
155
- useOfSkeleton: _propTypes.default.bool
146
+ useOfSkeleton: _propTypes.default.bool,
147
+ subTitle: _propTypes.default.string,
148
+ loading: _propTypes.default.bool
156
149
  };
157
150
  Nav.defaultProps = {
158
151
  logoUrl: '',
159
152
  locale: '',
160
- useOfSkeleton: false
153
+ useOfSkeleton: false,
154
+ subTitle: '',
155
+ loading: false
161
156
  };
162
157
  var _default = Nav;
163
158
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-layout",
3
- "version": "2.1.85",
3
+ "version": "2.1.87",
4
4
  "description": "Common ux components of launcher",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -39,13 +39,14 @@
39
39
  "@arcblock/did-connect": "^2.6.7",
40
40
  "@arcblock/icons": "^2.6.7",
41
41
  "@arcblock/ux": "^2.6.7",
42
- "@blocklet/launcher-util": "2.1.85",
43
- "@blocklet/launcher-ux": "2.1.85",
42
+ "@blocklet/launcher-util": "2.1.87",
43
+ "@blocklet/launcher-ux": "2.1.87",
44
44
  "@blocklet/meta": "^1.16.13",
45
45
  "@emotion/react": "^11.11.1",
46
46
  "@emotion/styled": "^11.11.0",
47
47
  "@mui/icons-material": "^5.14.1",
48
48
  "@mui/material": "^5.14.2",
49
+ "is-empty": "^1.2.0",
49
50
  "lodash": "^4.17.21",
50
51
  "prop-types": "^15.8.1",
51
52
  "rehype-react": "^7.2.0",
@@ -59,5 +60,5 @@
59
60
  "@storybook/react": "^6.5.16",
60
61
  "babel-plugin-inline-react-svg": "^2.0.2"
61
62
  },
62
- "gitHead": "2eace09047f3a231376882559925c3f654848be4"
63
+ "gitHead": "2449eebc1d6a3689dfb2d3ee899cb61d5445779d"
63
64
  }