@blocklet/launcher-layout 2.0.29 → 2.0.31

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/lib/index.js CHANGED
@@ -4,22 +4,23 @@ 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"));
9
- var _styled = _interopRequireDefault(require("@emotion/styled"));
10
- var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
11
- var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
12
7
  var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
13
8
  var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
9
+ var _launcherUtil = require("@blocklet/launcher-util");
14
10
  var _smallCircleProgress = _interopRequireDefault(require("@blocklet/launcher-ux/lib/small-circle-progress"));
11
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
12
+ var _Hidden = _interopRequireDefault(require("@mui/material/Hidden"));
13
+ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
15
14
  var _isObject = _interopRequireDefault(require("lodash/isObject"));
15
+ var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var _react = require("react");
16
17
  var _step = require("./context/step");
17
- var _locale = require("./locale");
18
18
  var _header = _interopRequireDefault(require("./header"));
19
+ var _locale = require("./locale");
19
20
  var _nav = _interopRequireDefault(require("./nav"));
20
21
  var _jsxRuntime = require("react/jsx-runtime");
21
22
  const _excluded = ["blockletMeta", "children", "logoUrl", "locale", "headerEndAddons", "pcWidth", "pcHeight", "navLogo", "useOfSkeleton", "stepTip", "contentMaxWidth"];
22
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
23
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
23
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24
25
  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; }
25
26
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -65,17 +66,16 @@ function Layout(_ref) {
65
66
  });
66
67
  }
67
68
  }
68
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
69
- contentMaxWidth: contentMaxWidth
70
- }, rest), {}, {
71
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
72
- className: "root-header",
69
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
70
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
71
+ maxWidth: contentMaxWidth,
72
+ width: pcWidth,
73
73
  children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
74
74
  className: "left",
75
75
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
76
76
  title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
77
77
  className: "ellipsis-title",
78
- children: blockletMeta.title
78
+ children: (0, _launcherUtil.getBlockletDisplayName)(blockletMeta)
79
79
  }),
80
80
  navLogo: navLogo,
81
81
  subTitle: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
@@ -154,7 +154,8 @@ let injectStyle = '';
154
154
  if (ua.includes('iphone os') && ua.includes('crios')) {
155
155
  injectStyle = 'height: calc(100vh - 60px);';
156
156
  }
157
- const Root = _styled.default.div(_templateObject3 || (_templateObject3 = _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 .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\n ", " {\n background: #f6f8fa;\n }\n\n ", " {\n background: ", ";\n }\n\n .root-header {\n box-sizing: border-box;\n position: absolute;\n z-index: 200;\n top: 0;\n display: flex;\n width: 100%;\n max-width: ", ";\n height: 68px;\n align-items: center;\n\n ", " {\n padding: 24px;\n justify-content: flex-end;\n }\n\n ", " {\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"])), injectStyle, props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.common.white, props => props.contentMaxWidth, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), HEADER_HEIGHT_MD, props => props.theme.breakpoints.down('md'));
158
- const LogoContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block;\n margin-top: 4px;\n"])));
157
+ 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 padding: 24px;\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'));
158
+ 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);
159
+ const LogoContainer = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: block;\n margin-top: 4px;\n"])));
159
160
  var _default = Layout;
160
161
  exports.default = _default;
package/lib/nav.js CHANGED
@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _propTypes = _interopRequireDefault(require("prop-types"));
7
+ var _util = require("@blocklet/launcher-util/lib/util");
8
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
- var _urlJoin = _interopRequireDefault(require("url-join"));
10
9
  var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
11
10
  var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
12
- var _header = _interopRequireDefault(require("./header"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _urlJoin = _interopRequireDefault(require("url-join"));
13
13
  var _step = require("./context/step");
14
+ var _header = _interopRequireDefault(require("./header"));
14
15
  var _jsxRuntime = require("react/jsx-runtime");
15
16
  var _templateObject, _templateObject2, _templateObject3;
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +31,7 @@ function Nav(_ref) {
30
31
  getStepStatus,
31
32
  canBackToStep
32
33
  } = (0, _step.useStepContext)();
33
- const name = (blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.title) || (blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.name); // 'name' 是兼容字段
34
+ const name = (0, _util.getBlockletDisplayName)(blockletMeta);
34
35
  const showSkeleton = useOfSkeleton ? !blockletMeta || !name : false;
35
36
  const getNodeClassName = (step, index) => {
36
37
  const classNameList = ['step-block'];
@@ -39,7 +39,7 @@ function PageHeader(_ref) {
39
39
  })]
40
40
  }));
41
41
  }
42
- const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n text-align: center;\n\n .title {\n font-size: 24px;\n font-weight: 700;\n color: ", ";\n }\n\n .sub-title {\n font-size: 14px;\n color: ", ";\n padding: 0 14px;\n font-weight: 400;\n }\n\n .back-btn {\n position: absolute;\n left: 0;\n top: 8px;\n color: #9397a1;\n font-size: 18px;\n cursor: pointer;\n }\n"])), props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
42
+ const Content = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n text-align: center;\n\n .title {\n font-size: 24px;\n font-weight: 700;\n color: ", ";\n\n ", " {\n font-size: 20px;\n }\n }\n\n .sub-title {\n font-size: 14px;\n color: ", ";\n padding: 0 14px;\n font-weight: 400;\n }\n\n .back-btn {\n position: absolute;\n left: 0;\n top: 8px;\n color: #9397a1;\n font-size: 18px;\n cursor: pointer;\n }\n"])), props => props.theme.palette.common.black, props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[600]);
43
43
  var _default = PageHeader;
44
44
  exports.default = _default;
45
45
  PageHeader.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-layout",
3
- "version": "2.0.29",
3
+ "version": "2.0.31",
4
4
  "description": "Common ux components of launcher",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -37,18 +37,19 @@
37
37
  "react": ">=18.1.0"
38
38
  },
39
39
  "dependencies": {
40
- "@arcblock/did-connect": "^2.5.24",
41
- "@arcblock/icons": "^2.5.24",
42
- "@arcblock/ux": "^2.5.24",
43
- "@blocklet/launcher-ux": "2.0.29",
44
- "@blocklet/meta": "^1.16.4",
40
+ "@arcblock/did-connect": "^2.5.25",
41
+ "@arcblock/icons": "^2.5.25",
42
+ "@arcblock/ux": "^2.5.25",
43
+ "@blocklet/launcher-util": "2.0.31",
44
+ "@blocklet/launcher-ux": "2.0.31",
45
+ "@blocklet/meta": "^1.16.5",
45
46
  "@emotion/react": "^11.10.6",
46
47
  "@emotion/styled": "^11.10.6",
47
48
  "@mui/icons-material": "^5.11.16",
48
- "@mui/material": "^5.12.0",
49
+ "@mui/material": "^5.12.1",
49
50
  "lodash": "^4.17.21",
50
51
  "prop-types": "^15.8.1",
51
- "rehype-react": "^7.1.2",
52
+ "rehype-react": "^7.2.0",
52
53
  "url-join": "^4.0.1"
53
54
  },
54
55
  "devDependencies": {
@@ -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": "1dd45e9681ee59f58353ebf31fe79a57355ef87a"
63
+ "gitHead": "a2504029bf7037ff719841a011b49ef85fb36cf2"
63
64
  }