@blocklet/launcher-layout 1.9.2 → 1.9.3

package/README.md

@@ -6,17 +6,23 @@
 
 ```javascript
 import React from 'react';
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import { LocaleProvider } from '@blocklet/launcher-layout/Locale/context';
-import Layout from '@blocklet/launcher-layout';
+import { ThemeProvider } from '@blocklet/launcher-layout/lib/theme-provider';
 import { StepProvider } from '@blocklet/launcher-layout/lib/context/step';
+import Layout from '@blocklet/launcher-layout';
 ```
 
 ### Layout
 
 ```jsx
-<LocaleProvider translations={[]}>
-  <StepProvider steps={steps}>
-    <Layout blockletMeta={blockletMeta}>This is page content</Layout>
-  </StepProvider>
-</LocaleProvider>
+const theme = useTheme()
+
+return <ThemeProvider theme={theme}> {/* The component library depends on the theme of mui, you should wrap components with ThemeProvider */}
+  <LocaleProvider translations={[]}>
+    <StepProvider steps={steps}>
+      <Layout blockletMeta={blockletMeta}>This is page content</Layout>
+    </StepProvider>
+  </LocaleProvider>
+<ThemeProvider>
 ```

package/lib/compact-layout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = CompactLayout;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -108,4 +108,6 @@ CompactLayout.propTypes = {
 CompactLayout.defaultProps = {
   children: [],
   onBottomFix: () => {}
-};
+};
+var _default = CompactLayout;
+exports.default = _default;

package/lib/content.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Content;
+exports.default = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
@@ -29,5 +29,7 @@ function Content(_ref) {
 Content.propTypes = {
   children: _propTypes.default.any.isRequired
 };
+var _default = Content;
+exports.default = _default;
 
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n\n  .center {\n    display: flex;\n    justify-content: center;\n  }\n\n  .page-title {\n    text-align: center;\n  }\n\n  .toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .toolbar_title {\n      color: ", ";\n      font-size: 16px;\n    }\n  }\n\n  .page-footer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    width: 100%;\n    background: ", ";\n\n    .create-button {\n      margin-right: 32px;\n    }\n\n    & > button,\n    .button {\n      margin: 0 8px;\n    }\n\n    ", " {\n      padding: 24px;\n      & > button,\n      .button {\n        margin: 0 12px;\n        min-width: 200px;\n      }\n    }\n\n    ", " {\n      margin-top: auto;\n      padding: 16px;\n    }\n  }\n"])), props => props.theme.palette.grey['900'], props => props.theme.palette.common.white, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'));

package/lib/header.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = AppHeader;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -129,5 +129,7 @@ AppHeader.defaultProps = {
   locale: '',
   navLogo: ''
 };
+var _default = AppHeader;
+exports.default = _default;
 
 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'));

package/lib/launch-result-message.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = LaunchResultMessage;
+exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -99,5 +99,7 @@ LaunchResultMessage.defaultProps = {
   subTitle: '',
   footer: null
 };
+var _default = LaunchResultMessage;
+exports.default = _default;
 
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n  height: 100%;\n\n  .result-body {\n    padding: 0 14px;\n    max-width: 500px;\n    text-align: center;\n    margin-top: -64px;\n  }\n\n  .result-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 24px;\n    width: 48px;\n    height: 48px;\n    border-radius: 100%;\n    color: ", ";\n    transition: all ease 0.3s;\n    &.color-success {\n      background-color: ", ";\n    }\n    &.color-error {\n      background-color: ", ";\n    }\n    &.color-info {\n      background-color: ", ";\n    }\n  }\n\n  .result-title {\n    height: 34px;\n    font-size: 24px;\n    margin-bottom: 8px;\n    font-weight: bolder;\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n    &.color-success {\n      color: ", ";\n    }\n    &.color-error {\n      color: ", ";\n    }\n    &.color-info {\n      color: ", ";\n    }\n    &.ele-hide {\n      height: 0;\n      opacity: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .result-sub-title {\n    margin: 0 auto;\n    min-height: 17px;\n    color: ", ";\n    font-size: 14px;\n    line-height: 1.21em; // 0.01\u53EF\u4EE5\u89E3\u51B3\u89C6\u7F51\u819C\u5C4F\u8F7B\u5FAE\u504F\u79FB\u95EE\u9898\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n    word-break: break-word;\n    &.ele-hide {\n      line-height: 0;\n      opacity: 0;\n      min-height: 0;\n    }\n  }\n\n  .result-footer {\n    padding-top: 24px;\n    transition: all ease 0.3s;\n    transition-delay: 0.2s;\n  }\n"])), props => props.theme.palette.common.white, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.grey[700]);

package/lib/theme-provider.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeProvider = exports.default = ThemeProvider;
+exports.useThemeContext = useThemeContext;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("@emotion/react");
+
+var _Theme = require("@arcblock/ux/lib/Theme");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultTheme = (0, _Theme.create)({});
+const ThemeContext = /*#__PURE__*/(0, _react.createContext)({});
+
+function ThemeProvider() {
+  let {
+    children: _children,
+    theme: _theme
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  (0, _react.useEffect)(() => {
+    if (_theme && typeof _theme === 'object') setTheme(_theme);
+  }, [_theme]);
+
+  if (theme) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
+      value: theme,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Consumer, {
+        children: themeValue => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
+            theme: themeValue,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
+              theme: themeValue,
+              children: _children
+            })
+          });
+        }
+      })
+    });
+  }
+
+  return _children;
+}
+
+ThemeProvider.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  theme: _propTypes.default.object.isRequired
+};
+
+function useThemeContext() {
+  return (0, _react.useContext)(ThemeContext);
+}

package/lib/wizard/server-eula.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = ServerEula;
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -88,4 +88,7 @@ ServerEula.defaultProps = {
   }
 };
 
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n  }\n\n  .eula-trigger {\n    cursor: pointer;\n    text-decoration: underline;\n    ", " {\n      padding-right: 24px;\n    }\n    ", " {\n      padding: 16px;\n    }\n    font-size: 14px;\n    white-space: nowrap;\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  .next-button {\n    min-width: 200px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main);
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  @media (max-width: ", "px) {\n    flex-direction: column;\n  }\n\n  .eula-trigger {\n    cursor: pointer;\n    text-decoration: underline;\n    ", " {\n      padding-right: 24px;\n    }\n    ", " {\n      padding: 16px;\n    }\n    font-size: 14px;\n    white-space: nowrap;\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  .next-button {\n    min-width: 200px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('md'), props => props.theme.palette.primary.main);
+
+var _default = ServerEula;
+exports.default = _default;

package/lib/wizard/wizard-desc.js

@@ -236,8 +236,6 @@ function WizardDesc(_ref) {
 
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .info-table {\n    a {\n      word-break: break-all;\n    }\n  }\n  .app-overview {\n    font-size: 16px;\n    margin: 16px 0 0 16px;\n    h1 {\n      margin: 8px 0;\n      font-size: 20px;\n    }\n    h2 {\n      margin: 8px 0;\n      font-size: 18px;\n    }\n    ul {\n      display: block;\n      list-style-type: disc;\n      padding-left: 2em;\n      li {\n        display: list-item;\n        list-style: disc;\n      }\n    }\n    blockquote {\n      margin-left: 2em;\n    }\n  }\n"])));
 
-var _default = WizardDesc;
-exports.default = _default;
 WizardDesc.propTypes = {
   blockletMeta: _propTypes.default.object.isRequired,
   locale: _propTypes.default.string.isRequired,
@@ -245,4 +243,6 @@ WizardDesc.propTypes = {
 };
 WizardDesc.defaultProps = {
   handleDescEle: ''
-};
+};
+var _default = WizardDesc;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-layout",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "Common ux components of launcher",
   "publishConfig": {
     "access": "public"
@@ -37,16 +37,16 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.35",
-    "@arcblock/icons": "^2.4.35",
-    "@arcblock/ux": "^2.4.35",
-    "@blocklet/launcher-ux": "1.9.2",
-    "@blocklet/meta": "^1.8.26",
+    "@arcblock/did-connect": "^2.4.36",
+    "@arcblock/icons": "^2.4.36",
+    "@arcblock/ux": "^2.4.36",
+    "@blocklet/launcher-ux": "1.9.3",
+    "@blocklet/meta": "^1.8.27",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "^5.0.0-alpha.101",
-    "@mui/material": "^5.10.7",
+    "@mui/lab": "^5.0.0-alpha.102",
+    "@mui/material": "^5.10.8",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "rehype-react": "^7.1.1",
@@ -60,5 +60,5 @@
     "@storybook/react": "^6.5.12",
     "babel-plugin-inline-react-svg": "^2.0.1"
   },
-  "gitHead": "015bf7a244d44cca6658b003b8ecd4c5dbff2c94"
+  "gitHead": "223fbade6bedb920abfac395135a9ec397ca9e0f"
 }