@blocklet/launcher-layout 2.1.108 → 2.2.0

package/es/index.js

@@ -0,0 +1,302 @@
+import Center from '@arcblock/ux/lib/Center';
+import { create } from '@arcblock/ux/lib/Theme';
+import SmallCircleProgress from '@blocklet/launcher-ux/lib/small-circle-progress';
+import styled from '@emotion/styled';
+import Spinner from '@mui/material/CircularProgress';
+import Hidden from '@mui/material/Hidden';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Typography from '@mui/material/Typography';
+import isObject from 'lodash/isObject';
+import PropTypes from 'prop-types';
+import { Suspense, isValidElement } from 'react';
+import { useStepContext } from './context/step';
+import AppHeader from './header';
+import { getTranslations } from './locale';
+import Nav from './nav';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const HEADER_HEIGHT_MD = '72px';
+const MobileContent = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding-top: ${HEADER_HEIGHT_MD};
+`;
+const PcContent = styled.div`
+  display: flex;
+  min-width: 900px;
+  max-width: ${props => props.contentMaxWidth};
+  max-height: 880px;
+  border-radius: 8px;
+  background-color: #fff;
+  width: ${props => props.width || '80%'};
+  height: ${props => props.height || '80%'};
+
+  @media (max-height: 900px) {
+    margin-top: ${HEADER_HEIGHT_MD};
+    width: 100%;
+    height: 100%;
+  }
+`;
+const theme = create({
+  typography: {
+    fontSize: 14
+  },
+  palette: {
+    primary: {
+      main: '#1dc1c7',
+      contrastText: '#fff'
+    },
+    secondary: {
+      main: '#1976d2',
+      contrastText: '#fff'
+    }
+  }
+});
+function Layout({
+  blockletMeta: tmpBlockletMeta,
+  loading,
+  children,
+  logoUrl,
+  locale,
+  header,
+  headerEndAddons,
+  pcWidth,
+  pcHeight,
+  navLogo,
+  useOfSkeleton,
+  stepTip,
+  navSubTitle,
+  contentMaxWidth,
+  theme: userTheme,
+  ...rest
+}) {
+  const isMobile = useMediaQuery(t => t.breakpoints.down('md'));
+  const {
+    activeStep,
+    totalStepsCount
+  } = useStepContext();
+  const blockletMeta = tmpBlockletMeta || {};
+  const Container = isMobile ? MobileContent : PcContent;
+  const translations = getTranslations(locale);
+  if (navLogo && ! /*#__PURE__*/isValidElement(navLogo) && isObject(navLogo)) {
+    if (isMobile) {
+      // eslint-disable-next-line no-param-reassign
+      navLogo = navLogo.mobile;
+    } else {
+      // eslint-disable-next-line no-param-reassign
+      navLogo = /*#__PURE__*/_jsx(LogoContainer, {
+        children: navLogo.desktop
+      });
+    }
+  }
+  const tempTheme = Object.assign(theme, userTheme || {});
+  return /*#__PURE__*/_jsx(StyledEngineProvider, {
+    injectFirst: true,
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: tempTheme,
+      children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
+        theme: tempTheme,
+        children: /*#__PURE__*/_jsxs(Root, {
+          ...rest,
+          children: [/*#__PURE__*/_jsxs(Header, {
+            maxWidth: contentMaxWidth,
+            width: pcWidth,
+            children: [header && header, !header && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [isMobile && /*#__PURE__*/_jsx("div", {
+                className: "left",
+                children: /*#__PURE__*/_jsx(AppHeader, {
+                  blockletMeta: blockletMeta,
+                  navLogo: navLogo,
+                  subTitle: /*#__PURE__*/_jsxs("span", {
+                    children: [`${navSubTitle || translations.defaultNavSubTitle} ${activeStep + 1}/${totalStepsCount}`, /*#__PURE__*/_jsx(SmallCircleProgress, {
+                      value: (activeStep + 1) / totalStepsCount * 100,
+                      style: {
+                        marginLeft: 3
+                      }
+                    })]
+                  }),
+                  logoUrl: logoUrl,
+                  locale: locale,
+                  loading: loading
+                })
+              }), navLogo && !isMobile && /*#__PURE__*/_jsx("div", {
+                className: "left",
+                children: navLogo
+              }), headerEndAddons && /*#__PURE__*/_jsx("div", {
+                className: "right",
+                children: headerEndAddons
+              })]
+            })]
+          }), /*#__PURE__*/_jsxs(Container, {
+            contentMaxWidth: contentMaxWidth,
+            width: pcWidth,
+            height: pcHeight,
+            children: [/*#__PURE__*/_jsx(Hidden, {
+              mdDown: true,
+              children: /*#__PURE__*/_jsx(Nav, {
+                locale: locale,
+                blockletMeta: blockletMeta,
+                logoUrl: logoUrl,
+                useOfSkeleton: useOfSkeleton,
+                subTitle: navSubTitle,
+                loading: loading
+              })
+            }), /*#__PURE__*/_jsx(Typography, {
+              component: "div",
+              className: "layout-content",
+              children: /*#__PURE__*/_jsx(Suspense, {
+                fallback: /*#__PURE__*/_jsx(Center, {
+                  relative: "parent",
+                  children: /*#__PURE__*/_jsx(Spinner, {
+                    style: {
+                      marginTop: 36
+                    }
+                  })
+                }),
+                children: children
+              })
+            })]
+          })]
+        })
+      })
+    })
+  });
+}
+Layout.propTypes = {
+  loading: PropTypes.bool,
+  blockletMeta: PropTypes.object,
+  children: PropTypes.object.isRequired,
+  logoUrl: PropTypes.string,
+  locale: PropTypes.oneOf(['en', 'zh']),
+  header: PropTypes.any,
+  headerEndAddons: PropTypes.any,
+  pcWidth: PropTypes.any,
+  pcHeight: PropTypes.any,
+  contentMaxWidth: PropTypes.string,
+  navLogo: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
+  useOfSkeleton: PropTypes.bool,
+  stepTip: PropTypes.string,
+  navSubTitle: PropTypes.string,
+  theme: PropTypes.object
+};
+Layout.defaultProps = {
+  loading: false,
+  blockletMeta: {},
+  logoUrl: '',
+  locale: 'en',
+  header: null,
+  headerEndAddons: null,
+  pcWidth: '80%',
+  pcHeight: '80%',
+  contentMaxWidth: '1245px',
+  navLogo: '',
+  useOfSkeleton: true,
+  stepTip: '',
+  navSubTitle: '',
+  theme: null
+};
+
+// 针对 safari 下的 chrome 适配
+const ua = navigator.userAgent.toLocaleLowerCase();
+let injectStyle = '';
+if (ua.includes('iphone os') && ua.includes('crios')) {
+  injectStyle = 'height: calc(100vh - 60px);';
+}
+const Header = styled.header`
+  width: ${props => props.width || '80%'};
+  min-width: 900px;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 200;
+  top: 0;
+  display: flex;
+  max-width: ${props => props.maxWidth};
+  height: 68px;
+  align-items: center;
+
+  @media (max-height: 900px) {
+    width: 100%;
+  }
+
+  ${props => props.theme.breakpoints.up('sm')} and (min-height: 900px) {
+    justify-content: flex-end;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    min-width: 360px;
+    width: 100%;
+    height: ${HEADER_HEIGHT_MD};
+    padding: 14px 16px;
+    justify-content: space-between;
+    background: #f6f8fa;
+  }
+
+  .left {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    ${props => props.theme.breakpoints.down('md')} {
+      button,
+      a {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+`;
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  letter-spacing: normal;
+  ${injectStyle}
+
+  .circular {
+    display: inline-block;
+    position: relative;
+    width: 15px;
+    height: 12px;
+    > * {
+      position: absolute;
+      left: 3px;
+      top: 2px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .layout-content {
+    width: 100%;
+    height: 100%;
+    padding: 32px;
+
+    ${props => props.theme.breakpoints.down('md')} {
+      padding: 16px;
+    }
+  }
+
+  ${props => props.theme.breakpoints.up('sm')} {
+    background: #f6f8fa;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    background: ${props => props.theme.palette.common.white};
+  }
+`;
+const LogoContainer = styled.div`
+  display: block;
+  margin-top: 4px;
+`;
+export default Layout;

package/es/launch-result-message.js

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import Spinner from '@mui/material/CircularProgress';
+import PriorityHigh from '@mui/icons-material/PriorityHigh';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function LaunchResultMessage({
+  variant,
+  title,
+  subTitle,
+  footer,
+  ...props
+}) {
+  let Icon;
+  switch (variant) {
+    case 'error':
+      Icon = Close;
+      break;
+    case 'info':
+      Icon = PriorityHigh;
+      break;
+    case 'loading':
+      Icon = Spinner;
+      break;
+    default:
+      Icon = Check;
+  }
+  return /*#__PURE__*/_jsx(Container, {
+    variant: variant,
+    ...props,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "result-body",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `result-icon color-${variant}`,
+        children: /*#__PURE__*/_jsx(Icon, {})
+      }), /*#__PURE__*/_jsx("div", {
+        className: `result-title color-${variant} ${title ? '' : 'ele-hide'}`,
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        className: `result-sub-title ${subTitle ? '' : 'ele-hide'}`,
+        children: subTitle
+      }), footer && /*#__PURE__*/_jsx("div", {
+        className: "result-footer",
+        children: footer
+      })]
+    })
+  });
+}
+LaunchResultMessage.propTypes = {
+  variant: PropTypes.oneOf(['success', 'error', 'info', 'loading']),
+  title: PropTypes.string,
+  subTitle: PropTypes.any,
+  footer: PropTypes.any
+};
+LaunchResultMessage.defaultProps = {
+  variant: 'success',
+  title: '',
+  subTitle: '',
+  footer: null
+};
+export default LaunchResultMessage;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+
+  .result-body {
+    padding: 0 14px;
+    max-width: 500px;
+    text-align: center;
+    margin-top: -64px;
+  }
+
+  .result-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 24px;
+    width: 48px;
+    height: 48px;
+    border-radius: 100%;
+    color: ${props => props.theme.palette.common.white};
+    transition: all ease 0.3s;
+    &.color-success {
+      background-color: ${props => props.theme.palette.success.main};
+    }
+    &.color-error {
+      background-color: ${props => props.theme.palette.error.main};
+    }
+    &.color-info {
+      background-color: ${props => props.theme.palette.primary.main};
+    }
+  }
+
+  .result-title {
+    height: 34px;
+    font-size: 21px;
+    margin-bottom: 8px;
+    font-weight: bolder;
+    transition: all ease 0.3s;
+    transition-delay: 0.2s;
+    &.color-success {
+      color: ${props => props.theme.palette.success.main};
+    }
+    &.color-error {
+      color: ${props => props.theme.palette.error.main};
+    }
+    &.color-info {
+      color: ${props => props.theme.palette.primary.main};
+    }
+    &.ele-hide {
+      height: 0;
+      opacity: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .result-sub-title {
+    margin: 0 auto;
+    min-height: 17px;
+    color: ${props => props.theme.palette.grey[700]};
+    font-size: 14px;
+    line-height: 1.21em; // 0.01可以解决视网膜屏轻微偏移问题
+    transition: all ease 0.3s;
+    transition-delay: 0.2s;
+    word-break: break-word;
+    &.ele-hide {
+      line-height: 0;
+      opacity: 0;
+      min-height: 0;
+    }
+  }
+
+  .result-footer {
+    padding-top: 24px;
+    transition: all ease 0.3s;
+    transition-delay: 0.2s;
+  }
+`;

package/es/locale.js

@@ -0,0 +1,13 @@
+const translations = {
+  en: {
+    optional: 'Optional',
+    defaultNavSubTitle: 'Launching'
+  },
+  zh: {
+    optional: '可选',
+    defaultNavSubTitle: '启动'
+  }
+};
+const getTranslations = locale => translations[locale] ? translations[locale] : translations.en;
+const getLaunchingText = locale => locale === 'zh' ? '启动' : 'Launching';
+export { getTranslations, getLaunchingText };