@blocklet/launcher-layout 1.5.51 → 1.5.54

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 (4) hide show
  1. package/lib/header.js +3 -3
  2. package/lib/index.js +4 -2
  3. package/lib/nav.js +17 -48
  4. package/package.json +2 -2
package/lib/header.js CHANGED
@@ -67,11 +67,11 @@ function AppHeader(_ref) {
67
67
  setAppNameSize('small');
68
68
  }
69
69
  }
70
- }, [appNameSize]);
70
+ }, [appNameSize, title]);
71
71
  return /*#__PURE__*/_react.default.createElement(Container, {
72
72
  className: appNameSize === 'small' ? 'center-mode' : ''
73
73
  }, /*#__PURE__*/_react.default.createElement("div", {
74
- className: "app_icon"
74
+ className: "app-icon"
75
75
  }, icon), /*#__PURE__*/_react.default.createElement("div", {
76
76
  className: "header-title"
77
77
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -104,4 +104,4 @@ AppHeader.defaultProps = {
104
104
  const Container = _styledComponents.default.div.withConfig({
105
105
  displayName: "header__Container",
106
106
  componentId: "sc-1twhts3-0"
107
- })(["display:flex;justify-content:flex-start;align-items:flex-start;", "{min-height:70px;}.app-name-content{display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:16px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app_icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{display:flex;justify-content:center;align-items:center;color:", ";font-weight:500;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:14px;line-height:16px;margin-top:5px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('sm'));
107
+ })(["display:flex;justify-content:flex-start;align-items:flex-start;width:100%;", "{min-height:70px;}", "{align-items:center;}.app-name-content{width:100%;display:flex;align-items:center;justify-content:center;", "{align-items:flex-start;flex-direction:column;}", "{height:22px;}}.launching-context{flex-shrink:0;font-size:16px;font-weight:600;color:", ";", "{margin-bottom:4px;}", "{font-size:14px;line-height:15px;&:after{display:inline-block;margin:0 4px;content:':';}}}&.center-mode{align-items:flex-start;.launching-context{", "{margin-bottom:0;}}}.app-icon{flex-shrink:0;> *{display:block;vertical-align:middle;}}.header-title{flex:1;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;margin-left:24px;", "{margin-left:16px;}.header-title-name{position:relative;display:flex;justify-content:center;align-items:center;flex:1;height:100%;color:", ";font-weight:500;", "{font-size:18px;line-height:1.2em;&.middle-size{font-size:16px;}}", "{display:block;max-width:calc(100vw - 100px);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}.header-title-sub{color:", ";font-size:14px;line-height:16px;margin-top:5px;", "{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[500], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.black, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.grey[700], props => props.theme.breakpoints.down('sm'));
package/lib/index.js CHANGED
@@ -74,7 +74,9 @@ function Layout(_ref) {
74
74
  onClick: () => toggleNav(true),
75
75
  className: "menu__icon"
76
76
  }), /*#__PURE__*/_react.default.createElement(_header.default, {
77
- title: blockletMeta.title,
77
+ title: /*#__PURE__*/_react.default.createElement("span", {
78
+ className: "ellipsis-title"
79
+ }, blockletMeta.title),
78
80
  subTitle: "".concat(translations.stepTip, " ").concat(activeStep + 1, "/").concat(totalStepsCount),
79
81
  logoUrl: logoUrl,
80
82
  did: blockletMeta.did,
@@ -132,7 +134,7 @@ if (ua.includes('iphone os') && ua.includes('crios')) {
132
134
  const Root = _styledComponents.default.div.withConfig({
133
135
  displayName: "src__Root",
134
136
  componentId: "sc-11nbl7p-2"
135
- })(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " ", "{background:#ebeef2;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;height:68px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{padding:14px;justify-content:space-between;background:", ";}.left{display:flex;align-items:center;.menu__icon{margin-right:16px;color:#999999;}}.right{display:flex;align-items:center;}}"], injectStyle, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white);
137
+ })(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;", " .ellipsis-title{flex:1;position:absolute;left:0;top:0;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", "{background:#ebeef2;}", "{background:", ";}.root-header{position:fixed;z-index:200;top:0;display:flex;width:100%;height:72px;align-items:center;", "{padding:24px;justify-content:flex-end;}", "{padding:14px 16px;justify-content:space-between;background:", ";}.left{flex:1;display:flex;align-items:center;.menu__icon{margin-right:16px;color:", ";}}.right{display:flex;align-items:center;}}"], injectStyle, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('sm'), props => props.theme.palette.common.white, props => props.theme.palette.grey[900]);
136
138
 
137
139
  const Center = _styledComponents.default.div.withConfig({
138
140
  displayName: "src__Center",
package/lib/nav.js CHANGED
@@ -13,10 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
13
 
14
14
  var _urlJoin = _interopRequireDefault(require("url-join"));
15
15
 
16
- var _Pending = _interopRequireDefault(require("@arcblock/icons/lib/Pending"));
17
-
18
- var _icons = require("@material-ui/icons");
19
-
20
16
  var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
21
17
 
22
18
  var _Skeleton = _interopRequireDefault(require("@material-ui/lab/Skeleton"));
@@ -27,46 +23,17 @@ var _step = require("./context/step");
27
23
 
28
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
25
 
30
- function CustomStepIcon(_ref) {
31
- let {
32
- active,
33
- completed
34
- } = _ref;
35
-
36
- if (completed) {
37
- return /*#__PURE__*/_react.default.createElement(_icons.Done, {
38
- style: {
39
- color: '#31AB86'
40
- }
41
- });
42
- }
43
-
44
- if (active) {
45
- return /*#__PURE__*/_react.default.createElement(_Pending.default, {
46
- color: "#4F6AF6"
47
- });
48
- }
49
-
50
- return /*#__PURE__*/_react.default.createElement(_icons.FiberManualRecord, {
51
- color: "disabled"
52
- });
53
- }
54
-
55
- CustomStepIcon.propTypes = {
56
- active: _propTypes.default.bool.isRequired,
57
- completed: _propTypes.default.bool.isRequired
58
- };
59
-
60
- function Nav(_ref2) {
26
+ function Nav(_ref) {
61
27
  let {
62
28
  blockletMeta,
63
29
  logoUrl,
64
30
  locale
65
- } = _ref2;
31
+ } = _ref;
66
32
  const {
67
33
  steps,
68
34
  activeStep
69
35
  } = (0, _step.useStepContext)();
36
+ const showSkeleton = !blockletMeta || !blockletMeta.title;
70
37
  return /*#__PURE__*/_react.default.createElement(Div, {
71
38
  className: "nav-sidebar"
72
39
  }, /*#__PURE__*/_react.default.createElement(_header.default, {
@@ -76,45 +43,47 @@ function Nav(_ref2) {
76
43
  title: blockletMeta.title
77
44
  }, blockletMeta.title || /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
78
45
  variant: "text",
79
- width: 150,
80
- height: 18
46
+ width: 150
81
47
  })),
82
48
  did: blockletMeta.did,
83
49
  logoUrl: logoUrl,
84
50
  locale: locale
85
51
  }), /*#__PURE__*/_react.default.createElement(StepContainer, null, steps.map((step, index) => /*#__PURE__*/_react.default.createElement("div", {
86
52
  className: (() => {
87
- let classList = 'step_block';
53
+ let classList = 'step-block';
88
54
 
89
55
  if (activeStep === index) {
90
- classList += ' step_active';
56
+ classList += ' step-active';
91
57
  }
92
58
 
93
59
  if (activeStep > index) {
94
- classList += ' step_checked';
60
+ classList += ' step-checked';
95
61
  }
96
62
 
97
63
  if (step.optional === true && activeStep < index) {
98
- classList += ' step_optional';
64
+ classList += ' step-optional';
99
65
  }
100
66
 
101
67
  return classList;
102
68
  })(),
103
69
  key: step.key
104
70
  }, /*#__PURE__*/_react.default.createElement("div", {
105
- className: "step_icon"
71
+ className: "step-icon"
106
72
  }, /*#__PURE__*/_react.default.createElement(_Check.default, {
107
73
  style: {
108
74
  fontSize: 16
109
75
  }
110
76
  })), /*#__PURE__*/_react.default.createElement("div", {
111
- className: "step_line"
77
+ className: "step-line"
112
78
  }), /*#__PURE__*/_react.default.createElement("div", {
113
- className: "step_name",
79
+ className: "step-name",
114
80
  title: step.name
115
81
  }, /*#__PURE__*/_react.default.createElement("span", {
116
- className: "step_name_content"
117
- }, step.name))))));
82
+ className: "step-name-content"
83
+ }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
84
+ variant: "text",
85
+ width: 100
86
+ }) : step.name))))));
118
87
  }
119
88
 
120
89
  const AppLink = _styledComponents.default.a.withConfig({
@@ -130,7 +99,7 @@ const Div = _styledComponents.default.div.withConfig({
130
99
  const StepContainer = _styledComponents.default.div.withConfig({
131
100
  displayName: "nav__StepContainer",
132
101
  componentId: "sc-1qwhj4c-2"
133
- })(["display:flex;flex-direction:column;margin-top:50px;", "{margin-top:30px;}.step_line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;background-color:", ";}.step_icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step_name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";}.step_name_content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}.step_block{position:relative;display:flex;height:70px;overflow:hidden;transition:all ease 0.2s;&.step_optional{height:0;opacity:0;}&.step_checked{.step_icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step_line{background-color:", ";}}&.step_active{.step_icon{background-color:", ";}.step_icon:before{transform:scale(1);}.step_name{color:", ";}}&:last-child{.step_line{display:none;}}}"], props => props.theme.breakpoints.down('sm'), 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.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);
102
+ })(["display:flex;flex-direction:column;margin-top:60px;", "{margin-top:30px;}.step-line{display:block;position:absolute;z-index:1;left:11px;top:12px;width:2px;height:100%;background-color:", ";}.step-icon{position:relative;z-index:2;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;border-radius:13px;background-color:", ";color:", ";transition:all ease 0.3s;&:before{position:absolute;left:4px;top:4px;z-index:3;display:block;background-color:", ";width:16px;height:16px;border-radius:10px;content:'';transform:scale(0);transition:all ease 0.3s;}& > *{transform:scale(0);transition:all ease 0.2s;}}.step-name{position:relative;flex:1;padding-top:1px;margin-left:22px;font-size:16px;color:", ";}.step-name-content{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;}.step-block{position:relative;display:flex;height:70px;overflow:hidden;transition:all ease 0.2s;&.step-optional{height:0;opacity:0;}&.step-checked{.step-icon{color:", ";background-color:", ";& > *{transform:scale(1);}}.step-line{background-color:", ";}}&.step-active{.step-icon{background-color:", ";}.step-icon:before{transform:scale(1);}.step-name{color:", ";}}&:last-child{.step-line{display:none;}}}"], props => props.theme.breakpoints.down('sm'), 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.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);
134
103
 
135
104
  Nav.propTypes = {
136
105
  blockletMeta: _propTypes.default.object.isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-layout",
3
- "version": "1.5.51",
3
+ "version": "1.5.54",
4
4
  "description": "Common ux components of launcher",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -56,5 +56,5 @@
56
56
  "babel-plugin-inline-react-svg": "^2.0.1",
57
57
  "babel-plugin-styled-components": "^1.10.7"
58
58
  },
59
- "gitHead": "ec0b19e2d46c7bd89bdeb6ca5cabd4f3ab26a57e"
59
+ "gitHead": "c138467be17105e54c9450b0281952c1195828a9"
60
60
  }