@blocklet/launcher-layout 2.3.19 → 2.3.21

package/es/index.js

@@ -1,307 +0,0 @@
-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, jsxs as _jsxs, 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: 1200px) {
-    margin-top: ${HEADER_HEIGHT_MD};
-    height: 100%;
-    max-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,
-            className: "ll-container",
-            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};
-    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}
-
-  header:empty {
-    display: none;
-  }
-
-  header:empty + div {
-    margin-top: 0;
-    padding-top: 0;
-  }
-
-  .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

@@ -1,144 +0,0 @@
-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, 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

@@ -1,13 +0,0 @@
-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 };