@blocklet/launcher-layout 2.1.108 → 2.2.1

package/es/nav.js

@@ -0,0 +1,407 @@
+import styled from '@emotion/styled';
+import Check from '@mui/icons-material/Check';
+import Skeleton from '@mui/material/Skeleton';
+import PropTypes from 'prop-types';
+import { useStepContext } from './context/step';
+import AppHeader from './header';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Nav({
+  blockletMeta,
+  logoUrl,
+  locale,
+  useOfSkeleton,
+  subTitle,
+  loading
+}) {
+  const {
+    steps,
+    activeStep,
+    setActiveStepByKey,
+    setActiveStepByIndex,
+    getStepStatus,
+    canBackToStep
+  } = useStepContext();
+  const showSkeleton = useOfSkeleton ? loading : false;
+  const getNodeClassName = (step, index) => {
+    const classNameList = ['step-block'];
+    const status = getStepStatus(step.key);
+    switch (status) {
+      case 'current':
+        classNameList.push('step-active');
+        break;
+      case 'before':
+        classNameList.push('step-checked');
+        break;
+      case 'after':
+      default:
+    }
+    switch (step.showChild) {
+      case 'activated':
+        if (status === 'after') {
+          classNameList.push('hide-step-child');
+        }
+        break;
+      case 'activating':
+        if (status === 'after' || status === 'before') {
+          classNameList.push('hide-step-child');
+        }
+        break;
+      case 'always':
+        classNameList.push('always-step-child');
+        break;
+      default:
+    }
+    if (step.optional === true && activeStep < index) {
+      classNameList.push('step-optional'); // optional在没有匹配到路由情况下会隐藏；超越这个步骤后就会一直出现
+    }
+
+    return classNameList.join(' ');
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [/*#__PURE__*/_jsx(AppHeader, {
+      blockletMeta: blockletMeta,
+      loading: loading,
+      logoUrl: logoUrl,
+      locale: locale,
+      subTitle: subTitle
+    }), /*#__PURE__*/_jsx(StepContainer, {
+      className: `${showSkeleton ? 'hide-child-step-desc' : ''}`,
+      children: steps.map((step, index) => {
+        const canBack = !showSkeleton && canBackToStep(index);
+        return /*#__PURE__*/_jsxs("div", {
+          className: getNodeClassName(step, index),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "step-icon",
+            children: /*#__PURE__*/_jsx(Check, {
+              style: {
+                fontSize: 16
+              }
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "step-line"
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "step-content",
+            title: step.name,
+            children: [/*#__PURE__*/_jsx("span", {
+              className: `step-content-name ${canBack ? ' step-clickable' : ''}`,
+              onClick: () => {
+                if (canBack) {
+                  if (step.key) {
+                    setActiveStepByKey(step.key);
+                    return;
+                  }
+                  setActiveStepByIndex(index);
+                }
+              },
+              children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
+                variant: "text",
+                width: 100
+              }) : step.name
+            }), step.description && /*#__PURE__*/_jsx("div", {
+              className: "step-desc",
+              children: step.description
+            }), step.children && step.children.length && /*#__PURE__*/_jsx("div", {
+              className: "step-children",
+              children: step.children.map(e => {
+                let className = '';
+                const childStepStatus = getStepStatus(e.key);
+                switch (childStepStatus) {
+                  case 'before':
+                    className = 'step-child-block-checked';
+                    break;
+                  case 'current':
+                    className = 'step-child-block-active';
+                    break;
+                  case 'after':
+                  default:
+                }
+                return /*#__PURE__*/_jsx("div", {
+                  className: `step-child-block ${className}`,
+                  children: e.name
+                }, e.key);
+              })
+            })]
+          })]
+        }, step.key);
+      })
+    })]
+  });
+}
+const Div = styled.div`
+  overflow-y: auto;
+  ${props => props.theme.breakpoints.up('md')} {
+    padding: 24px;
+    border-right: 1px solid ${props => props.theme.palette.grey[100]};
+    flex: 0 0 280px;
+    min-height: 48px;
+
+    .MuiStepConnector-vertical {
+      padding: 0;
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    padding: 16px;
+
+    .MuiStepConnector-lineVertical {
+      border: none;
+    }
+  }
+
+  .stepper {
+    padding: 0 !important;
+    background: transparent;
+
+    ${props => props.theme.breakpoints.up('sm')} {
+      margin-top: 100px;
+    }
+
+    ${props => props.theme.breakpoints.down('md')} {
+      margin-top: 40px;
+    }
+
+    .step {
+      cursor: pointer;
+    }
+  }
+
+  .always-step-child {
+    .step-child-block {
+      animation: none !important;
+    }
+  }
+`;
+const StepContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 60px;
+
+  @media (max-height: 900px) {
+    margin-top: 32px;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    margin-top: 30px;
+  }
+  .step-clickable {
+    cursor: pointer;
+    &:hover {
+      color: ${props => props.theme.palette.primary.main};
+    }
+  }
+  .step-line {
+    display: block;
+    position: absolute;
+    z-index: 1;
+    left: 11px;
+    top: 12px;
+    width: 2px;
+    height: 100%;
+    opacity: 0.5;
+    background-color: ${props => props.theme.palette.grey[400]};
+    transition: all ease 0.2s;
+  }
+  .step-icon {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 13px;
+    background-color: ${props => props.theme.palette.grey[400]};
+    color: ${props => props.theme.palette.common.white};
+    transition: all ease 0.3s;
+    &:before {
+      position: absolute;
+      left: 4px;
+      top: 4px;
+      z-index: 3;
+      display: block;
+      background-color: ${props => props.theme.palette.common.white};
+      width: 16px;
+      height: 16px;
+      border-radius: 10px;
+      content: '';
+      transform: scale(0);
+      transition: all ease 0.3s;
+    }
+    & > * {
+      transform: scale(0);
+      transition: all ease 0.2s;
+    }
+  }
+  .step-content {
+    position: relative;
+    flex: 1;
+    padding-top: 1px;
+    margin-left: 22px;
+    font-size: 16px;
+    color: ${props => props.theme.palette.grey[700]};
+    white-space: nowrap;
+  }
+  .step-desc {
+    margin-top: 24px;
+    font-size: 12px;
+    font-weight: 500;
+    height: 17px;
+    color: ${props => props.theme.palette.grey[700]};
+    transition: all ease 0.3s;
+    overflow: hidden;
+  }
+  ${props => props.theme.breakpoints.up('md')} {
+    .step-content-name {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &.hide-child-step-desc {
+    .step-desc {
+      margin: 0;
+      opacity: 0;
+      height: 0;
+    }
+  }
+  .step-block {
+    position: relative;
+    display: flex;
+    min-height: 70px;
+    opacity: 0.5;
+    overflow: hidden;
+    transition: all ease 0.2s;
+    &:last-child {
+      height: auto;
+      min-height: auto;
+    }
+    &.step-optional {
+      height: 0;
+      opacity: 0;
+      min-height: 0px;
+    }
+
+    &.step-checked,
+    &.step-active {
+      .step-desc {
+        margin: 0;
+        opacity: 0;
+        height: 0;
+      }
+    }
+
+    &.step-checked {
+      opacity: 1;
+      .step-icon {
+        color: ${props => props.theme.palette.common.white};
+        background-color: ${props => props.theme.palette.primary.main};
+        & > * {
+          transform: scale(1);
+        }
+      }
+
+      .step-line {
+        background-color: ${props => props.theme.palette.primary.main};
+        opacity: 1;
+      }
+    }
+
+    &.step-active {
+      opacity: 1;
+      .step-icon {
+        background-color: ${props => props.theme.palette.primary.main};
+      }
+      .step-icon:before {
+        transform: scale(1);
+      }
+      .step-content {
+        color: ${props => props.theme.palette.primary.main};
+      }
+    }
+
+    &:last-child {
+      .step-line {
+        display: none;
+      }
+
+      .step-child-block {
+        &:last-child {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    &.hide-step-child {
+      .step-children {
+        .step-child-block {
+          margin-top: 0;
+          height: 0;
+          opacity: 0;
+          &:last-child {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .step-children {
+    padding-top: 20px;
+    .step-child-block {
+      margin-top: 4px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 14px;
+      color: #9397a1;
+      transition: all ease 0.3s;
+      &:first-of-type {
+        margin-top: 8px;
+      }
+      &:last-child {
+        padding-bottom: 40px;
+      }
+      &.step-child-block-active {
+        color: ${props => props.theme.palette.common.black};
+        font-weight: 700;
+      }
+      &.step-child-block-checked {
+        color: ${props => props.theme.palette.common.black};
+      }
+    }
+  }
+
+  .step-active {
+    .step-child-block {
+      animation: stepChildAnime ease 0.3s;
+    }
+  }
+
+  @keyframes stepChildAnime {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 24px;
+    }
+  }
+`;
+Nav.propTypes = {
+  blockletMeta: PropTypes.object.isRequired,
+  logoUrl: PropTypes.string,
+  locale: PropTypes.string,
+  useOfSkeleton: PropTypes.bool,
+  subTitle: PropTypes.string,
+  loading: PropTypes.bool
+};
+Nav.defaultProps = {
+  logoUrl: '',
+  locale: '',
+  useOfSkeleton: false,
+  subTitle: '',
+  loading: false
+};
+export default Nav;

package/es/page-header.js

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function PageHeader({
+  title,
+  subTitle,
+  onClickBack,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsxs(Content, {
+    ...rest,
+    children: [onClickBack && /*#__PURE__*/_jsx(ArrowBackIosIcon, {
+      className: "back-btn",
+      onClick: onClickBack
+    }), /*#__PURE__*/_jsx("div", {
+      className: "title",
+      children: title
+    }), /*#__PURE__*/_jsx("div", {
+      className: "sub-title",
+      children: subTitle
+    })]
+  });
+}
+const Content = styled.div`
+  position: relative;
+  width: 100%;
+  text-align: center;
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: ${props => props.theme.palette.common.black};
+
+    ${props => props.theme.breakpoints.down('md')} {
+      font-size: 20px;
+    }
+  }
+
+  .sub-title {
+    font-size: 14px;
+    color: ${props => props.theme.palette.grey[600]};
+    padding: 0 14px;
+    font-weight: 400;
+  }
+
+  .back-btn {
+    position: absolute;
+    left: 0;
+    top: 8px;
+    color: #9397a1;
+    font-size: 18px;
+    cursor: pointer;
+  }
+`;
+export default PageHeader;
+PageHeader.propTypes = {
+  title: PropTypes.string,
+  subTitle: PropTypes.string,
+  onClickBack: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+};
+PageHeader.defaultProps = {
+  title: '',
+  subTitle: '',
+  onClickBack: ''
+};

package/es/theme-provider.js

@@ -0,0 +1,41 @@
+import { createContext, useEffect, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
+import { ThemeProvider as UxThemeProvider, create } from '@arcblock/ux/lib/Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = create({});
+const ThemeContext = /*#__PURE__*/createContext({});
+export default function ThemeProvider({
+  children,
+  theme: _theme
+} = {}) {
+  const [theme, setTheme] = useState(defaultTheme);
+  useEffect(() => {
+    if (_theme && typeof _theme === 'object') setTheme(_theme);
+  }, [_theme]);
+  if (theme) {
+    return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+      value: theme,
+      children: /*#__PURE__*/_jsx(ThemeContext.Consumer, {
+        children: themeValue => {
+          return /*#__PURE__*/_jsx(UxThemeProvider, {
+            theme: themeValue,
+            children: /*#__PURE__*/_jsx(EmotionThemeProvider, {
+              theme: themeValue,
+              children: children
+            })
+          });
+        }
+      })
+    });
+  }
+  return children;
+}
+ThemeProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  theme: PropTypes.object.isRequired
+};
+function useThemeContext() {
+  return useContext(ThemeContext);
+}
+export { ThemeProvider, useThemeContext };

package/es/wizard/server-eula.js

@@ -0,0 +1,98 @@
+/* eslint-disable react/jsx-wrap-multilines */
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Spinner from '@mui/material/CircularProgress';
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import SubmitHotKey from '@blocklet/launcher-ux/lib/hot-key/submit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ServerEula({
+  onContinue,
+  nextDisabled,
+  launching,
+  texts,
+  description
+}) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(x => !x);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Div, {
+      children: /*#__PURE__*/_jsxs(SubmitHotKey, {
+        disabled: nextDisabled,
+        onConfirm: onContinue,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "eula-trigger",
+          onClick: handleOpen,
+          children: texts.listenName
+        }), /*#__PURE__*/_jsx(Button, {
+          disabled: nextDisabled,
+          color: "primary",
+          variant: "contained",
+          className: "next-button",
+          onClick: onContinue,
+          children: launching ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Spinner, {
+              size: 14
+            }), texts.launchingText]
+          }) : texts.buttonNext
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Dialog, {
+      open: open,
+      title: texts.listenName,
+      onClose: () => setOpen(false),
+      children: description
+    })]
+  });
+}
+ServerEula.propTypes = {
+  onContinue: PropTypes.func.isRequired,
+  nextDisabled: PropTypes.bool,
+  launching: PropTypes.bool,
+  description: PropTypes.any,
+  texts: PropTypes.object
+};
+ServerEula.defaultProps = {
+  nextDisabled: false,
+  launching: false,
+  description: '',
+  texts: {
+    listenName: '',
+    launchingText: '',
+    buttonNext: ''
+  }
+};
+const Div = styled.div`
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    flex-direction: column;
+  }
+
+  .eula-trigger {
+    cursor: pointer;
+    text-decoration: underline;
+    ${props => props.theme.breakpoints.up('md')} {
+      padding-right: 24px;
+    }
+    ${props => props.theme.breakpoints.down('md')} {
+      padding: 16px;
+    }
+    font-size: 14px;
+    white-space: nowrap;
+    &:hover {
+      color: ${props => props.theme.palette.primary.main};
+    }
+  }
+
+  .next-button {
+    min-width: 200px;
+  }
+`;
+export default ServerEula;