@blocklet/launcher-layout 2.0.27 → 2.0.29
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 +5 -6
- package/lib/nav.js +5 -4
- package/package.json +7 -7
package/lib/index.js
CHANGED
|
@@ -29,8 +29,9 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
|
|
|
29
29
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
30
30
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
31
31
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
32
|
+
const HEADER_HEIGHT_MD = '56px';
|
|
32
33
|
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: 68px;\n"])));
|
|
33
|
-
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"])), props => props.contentMaxWidth);
|
|
34
|
+
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);
|
|
34
35
|
function Layout(_ref) {
|
|
35
36
|
let {
|
|
36
37
|
blockletMeta,
|
|
@@ -98,10 +99,8 @@ function Layout(_ref) {
|
|
|
98
99
|
})]
|
|
99
100
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
100
101
|
contentMaxWidth: contentMaxWidth,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
height: pcHeight
|
|
104
|
-
} : {},
|
|
102
|
+
width: pcWidth,
|
|
103
|
+
height: pcHeight,
|
|
105
104
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
|
|
106
105
|
mdDown: true,
|
|
107
106
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nav.default, {
|
|
@@ -155,7 +154,7 @@ let injectStyle = '';
|
|
|
155
154
|
if (ua.includes('iphone os') && ua.includes('crios')) {
|
|
156
155
|
injectStyle = 'height: calc(100vh - 60px);';
|
|
157
156
|
}
|
|
158
|
-
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:
|
|
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'));
|
|
159
158
|
const LogoContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block;\n margin-top: 4px;\n"])));
|
|
160
159
|
var _default = Layout;
|
|
161
160
|
exports.default = _default;
|
package/lib/nav.js
CHANGED
|
@@ -30,7 +30,8 @@ function Nav(_ref) {
|
|
|
30
30
|
getStepStatus,
|
|
31
31
|
canBackToStep
|
|
32
32
|
} = (0, _step.useStepContext)();
|
|
33
|
-
const
|
|
33
|
+
const name = (blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.title) || (blockletMeta === null || blockletMeta === void 0 ? void 0 : blockletMeta.name); // 'name' 是兼容字段
|
|
34
|
+
const showSkeleton = useOfSkeleton ? !blockletMeta || !name : false;
|
|
34
35
|
const getNodeClassName = (step, index) => {
|
|
35
36
|
const classNameList = ['step-block'];
|
|
36
37
|
const status = getStepStatus(step.key);
|
|
@@ -71,8 +72,8 @@ function Nav(_ref) {
|
|
|
71
72
|
title: /*#__PURE__*/(0, _jsxRuntime.jsx)(AppLink, {
|
|
72
73
|
target: "_blank",
|
|
73
74
|
href: (0, _urlJoin.default)(blockletMeta.registryUrl || '', "/blocklets/".concat(blockletMeta.did)),
|
|
74
|
-
title:
|
|
75
|
-
children:
|
|
75
|
+
title: name,
|
|
76
|
+
children: name || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
|
|
76
77
|
variant: "text",
|
|
77
78
|
width: 150
|
|
78
79
|
})
|
|
@@ -145,7 +146,7 @@ function Nav(_ref) {
|
|
|
145
146
|
}
|
|
146
147
|
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'));
|
|
147
148
|
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'));
|
|
148
|
-
const StepContainer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: 60px;\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);
|
|
149
|
+
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);
|
|
149
150
|
Nav.propTypes = {
|
|
150
151
|
blockletMeta: _propTypes.default.object.isRequired,
|
|
151
152
|
logoUrl: _propTypes.default.string,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-layout",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.29",
|
|
4
4
|
"description": "Common ux components of launcher",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -37,11 +37,11 @@
|
|
|
37
37
|
"react": ">=18.1.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@arcblock/did-connect": "^2.5.
|
|
41
|
-
"@arcblock/icons": "^2.5.
|
|
42
|
-
"@arcblock/ux": "^2.5.
|
|
43
|
-
"@blocklet/launcher-ux": "2.0.
|
|
44
|
-
"@blocklet/meta": "^1.16.
|
|
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",
|
|
45
45
|
"@emotion/react": "^11.10.6",
|
|
46
46
|
"@emotion/styled": "^11.10.6",
|
|
47
47
|
"@mui/icons-material": "^5.11.16",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"@storybook/react": "^6.5.16",
|
|
60
60
|
"babel-plugin-inline-react-svg": "^2.0.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "1dd45e9681ee59f58353ebf31fe79a57355ef87a"
|
|
63
63
|
}
|