@blocklet/launcher-layout 1.9.64 → 2.0.0
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/compact-layout.js +1 -1
- package/lib/context/step.js +1 -1
- package/lib/index.js +2 -6
- package/lib/page-header.js +8 -5
- package/package.json +3 -3
package/lib/compact-layout.js
CHANGED
|
@@ -80,7 +80,7 @@ function CompactLayout(_ref) {
|
|
|
80
80
|
})]
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
|
-
const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n animation: fadein ease 0.5s;\n &.scroll-mode {\n .compact-context {\n flex: 1;\n overflow-y: auto;\n }\n .fix-container {\n flex-shrink: 0;\n }\n }\n\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n"])));
|
|
83
|
+
const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n animation: fadein ease 0.5s;\n\n .fix-container {\n margin-top: auto;\n width: 100%;\n }\n\n &.scroll-mode {\n .compact-context {\n flex: 1;\n overflow-y: auto;\n }\n .fix-container {\n margin-top: auto;\n flex-shrink: 0;\n }\n }\n\n @keyframes fadein {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n"])));
|
|
84
84
|
CompactLayout.propTypes = {
|
|
85
85
|
children: _propTypes.default.any,
|
|
86
86
|
bottom: _propTypes.default.element.isRequired,
|
package/lib/context/step.js
CHANGED
|
@@ -14,7 +14,7 @@ const {
|
|
|
14
14
|
Provider
|
|
15
15
|
} = StepContext;
|
|
16
16
|
const matchPath = function matchPath(path, exact) {
|
|
17
|
-
let currentPathname = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname.replace(/\/$/, '');
|
|
17
|
+
let currentPathname = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname.replace(/\/$/, '/');
|
|
18
18
|
if (!path) {
|
|
19
19
|
return false;
|
|
20
20
|
}
|
package/lib/index.js
CHANGED
|
@@ -30,7 +30,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
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
32
|
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
|
|
33
|
+
const PcContent = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n height: 80%;\n max-height: 880px;\n border-radius: 8px;\n background-color: #fff;\n\n @media (min-width: 2400px) {\n width: 50%;\n }\n\n @media (min-width: 1920px) and (max-width: 2399px) {\n width: 60%;\n }\n\n @media (min-width: 1025px) and (max-width: 1920px) {\n width: 80%;\n }\n\n @media (min-width: 769px) and (max-width: 1024px) {\n width: 80%;\n }\n\n @media (max-width: 768px) {\n width: 80%;\n }\n"])));
|
|
34
34
|
function Layout(_ref) {
|
|
35
35
|
let {
|
|
36
36
|
blockletMeta,
|
|
@@ -94,10 +94,6 @@ function Layout(_ref) {
|
|
|
94
94
|
children: headerEndAddons
|
|
95
95
|
})]
|
|
96
96
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
97
|
-
style: !isMobile ? {
|
|
98
|
-
width: pcWidth,
|
|
99
|
-
height: pcHeight
|
|
100
|
-
} : {},
|
|
101
97
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
|
|
102
98
|
mdDown: true,
|
|
103
99
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nav.default, {
|
|
@@ -149,7 +145,7 @@ let injectStyle = '';
|
|
|
149
145
|
if (ua.includes('iphone os') && ua.includes('crios')) {
|
|
150
146
|
injectStyle = 'height: calc(100vh - 60px);';
|
|
151
147
|
}
|
|
152
|
-
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
|
|
148
|
+
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 height: 68px;\n align-items: center;\n\n ", " {\n padding: 24px;\n justify-content: flex-end;\n }\n\n ", " {\n height: 56px;\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.theme.breakpoints.up('sm'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
|
|
153
149
|
const LogoContainer = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: block;\n margin-top: 4px;\n"])));
|
|
154
150
|
var _default = Layout;
|
|
155
151
|
exports.default = _default;
|
package/lib/page-header.js
CHANGED
|
@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
11
|
var _templateObject;
|
|
12
|
-
const _excluded = ["title", "subTitle", "onClickBack"];
|
|
12
|
+
const _excluded = ["title", "subTitle", "disableBack", "onClickBack"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
15
|
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; }
|
|
@@ -23,11 +23,12 @@ function PageHeader(_ref) {
|
|
|
23
23
|
let {
|
|
24
24
|
title,
|
|
25
25
|
subTitle,
|
|
26
|
+
disableBack,
|
|
26
27
|
onClickBack
|
|
27
28
|
} = _ref,
|
|
28
29
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
29
30
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, _objectSpread(_objectSpread({}, rest), {}, {
|
|
30
|
-
children: [
|
|
31
|
+
children: [!disableBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {
|
|
31
32
|
className: "back-btn",
|
|
32
33
|
onClick: onClickBack
|
|
33
34
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -39,16 +40,18 @@ function PageHeader(_ref) {
|
|
|
39
40
|
})]
|
|
40
41
|
}));
|
|
41
42
|
}
|
|
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:
|
|
43
|
+
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]);
|
|
43
44
|
var _default = PageHeader;
|
|
44
45
|
exports.default = _default;
|
|
45
46
|
PageHeader.propTypes = {
|
|
46
47
|
title: _propTypes.default.string,
|
|
47
48
|
subTitle: _propTypes.default.string,
|
|
48
|
-
|
|
49
|
+
disableBack: _propTypes.default.bool,
|
|
50
|
+
onClickBack: _propTypes.default.func
|
|
49
51
|
};
|
|
50
52
|
PageHeader.defaultProps = {
|
|
51
53
|
title: '',
|
|
52
54
|
subTitle: '',
|
|
53
|
-
onClickBack:
|
|
55
|
+
onClickBack: () => {},
|
|
56
|
+
disableBack: false
|
|
54
57
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Common ux components of launcher",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@arcblock/did-connect": "^2.4.68",
|
|
41
41
|
"@arcblock/icons": "^2.4.68",
|
|
42
42
|
"@arcblock/ux": "^2.4.68",
|
|
43
|
-
"@blocklet/launcher-ux": "
|
|
43
|
+
"@blocklet/launcher-ux": "2.0.0",
|
|
44
44
|
"@blocklet/meta": "^1.8.64",
|
|
45
45
|
"@emotion/react": "^11.10.5",
|
|
46
46
|
"@emotion/styled": "^11.10.5",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"@storybook/react": "^6.5.16",
|
|
60
60
|
"babel-plugin-inline-react-svg": "^2.0.1"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "d55d16c2830ccaea07e9dd5cc81e55bffa6f597d"
|
|
63
63
|
}
|