@blocklet/launcher-layout 2.3.19 → 2.3.21

package/es/compact-layout.js

@@ -1,114 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function CompactLayout({
-  children,
-  bottom,
-  onBottomFix
-}) {
-  const mainCon = useRef(null);
-  const childsCon = useRef(null);
-  const compactCon = useRef(null);
-  const isFix = useRef(null);
-  const [scrollMode, setScrollMode] = useState(false);
-  useEffect(() => {
-    let inTimer;
-    const fixSize = () => {
-      if (inTimer) {
-        return;
-      }
-      inTimer = setTimeout(() => {
-        if (childsCon.current) {
-          if (childsCon.current.scrollHeight > mainCon.current.clientHeight - compactCon.current.clientHeight) {
-            if (isFix.current !== 'fix') {
-              onBottomFix('fix');
-              isFix.current = 'fix';
-            }
-            setScrollMode(true);
-          } else {
-            if (isFix.current !== 'scroll') {
-              onBottomFix('scroll');
-              isFix.current = 'scroll';
-            }
-            setScrollMode(false);
-          }
-        }
-        inTimer = null;
-      }, 50);
-    };
-    let resizeObs;
-    if (window.ResizeObserver) {
-      resizeObs = new ResizeObserver(fixSize);
-    } else {
-      window.addEventListener('resize', fixSize);
-    }
-    resizeObs.observe(mainCon.current);
-    resizeObs.observe(childsCon.current);
-    return () => {
-      if (resizeObs) {
-        resizeObs.disconnect();
-      } else {
-        window.removeEventListener('resize', fixSize);
-      }
-      if (inTimer) {
-        clearTimeout(inTimer);
-      }
-    };
-  }, [onBottomFix]);
-  return /*#__PURE__*/_jsxs(Container, {
-    ref: mainCon,
-    className: `${scrollMode ? 'scroll-mode' : ''}`,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "compact-context",
-      ref: childsCon,
-      children: children
-    }), /*#__PURE__*/_jsx("div", {
-      className: "fix-container",
-      ref: compactCon,
-      children: bottom
-    })]
-  });
-}
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  animation: fadein ease 0.5s;
-
-  .fix-container {
-    margin-top: auto;
-    width: 100%;
-  }
-
-  &.scroll-mode {
-    .compact-context {
-      flex: 1;
-      overflow-y: auto;
-    }
-    .fix-container {
-      margin-top: auto;
-      flex-shrink: 0;
-    }
-  }
-
-  @keyframes fadein {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;
-CompactLayout.propTypes = {
-  children: PropTypes.any,
-  bottom: PropTypes.element.isRequired,
-  onBottomFix: PropTypes.func
-};
-CompactLayout.defaultProps = {
-  children: [],
-  onBottomFix: () => {}
-};
-export default CompactLayout;

package/es/content.js

@@ -1,72 +0,0 @@
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-function Content({
-  children
-}) {
-  return /*#__PURE__*/_jsx(Container, {
-    children: children
-  });
-}
-Content.propTypes = {
-  children: PropTypes.any.isRequired
-};
-export default Content;
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-
-  .center {
-    display: flex;
-    justify-content: center;
-  }
-
-  .page-title {
-    text-align: center;
-  }
-
-  .toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .toolbar_title {
-      color: ${props => props.theme.palette.grey['900']};
-      font-size: 16px;
-    }
-  }
-
-  .page-footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 100%;
-    background: ${props => props.theme.palette.common.white};
-
-    .create-button {
-      margin-right: 32px;
-    }
-
-    & > button,
-    .button {
-      margin: 0 8px;
-    }
-
-    ${props => props.theme.breakpoints.up('md')} {
-      padding: 24px;
-      & > button,
-      .button {
-        margin: 0 12px;
-        min-width: 200px;
-      }
-    }
-
-    ${props => props.theme.breakpoints.down('md')} {
-      margin-top: auto;
-      padding: 16px;
-    }
-  }
-`;

package/es/context/step.js

@@ -1,137 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StepContext = /*#__PURE__*/createContext();
-const {
-  Provider
-} = StepContext;
-const matchPath = (path, exact, currentPathname = window.location.pathname.replace(/\/$/, '/')) => {
-  if (!path) {
-    return false;
-  }
-  if (exact) {
-    return path === currentPathname;
-  }
-  return new RegExp(path).test(currentPathname);
-};
-function StepProvider({
-  children,
-  steps,
-  mode
-}) {
-  const [activeStepKey, setActiveStepKey] = useState('');
-  if (!activeStepKey && steps.length) {
-    setActiveStepKey(steps[0].key);
-  }
-  const flatSteps = steps.map(item => {
-    if (item.children) {
-      return [{
-        key: item.key,
-        hasChild: true
-      }, item.children.map(childItem => {
-        return {
-          parentKey: item.key,
-          key: childItem.key
-        };
-      })];
-    }
-    return {
-      key: item.key
-    };
-  }).flat(Infinity);
-  const totalSteps = flatSteps.filter(e => !e.hasChild);
-
-  // 根据 key 获取当前 step 处于的状态；before已超过该步骤；current处于当前步骤；after还未到这个步骤；
-  const getStepStatus = key => {
-    let activeParentStepKey;
-    const activeIndex = flatSteps.findIndex(e => {
-      if (e.key === activeStepKey) {
-        activeParentStepKey = e.parentKey;
-        return true;
-      }
-      return false;
-    });
-    if (activeParentStepKey === key) {
-      return 'current';
-    }
-    const targetIndex = flatSteps.findIndex(e => e.key === key);
-    if (targetIndex !== -1) {
-      if (targetIndex === activeIndex) {
-        return 'current';
-      }
-      if (targetIndex < activeIndex) {
-        return 'before';
-      }
-    }
-    return 'after';
-  };
-
-  // can use this to set the activeStep by key
-  function setActiveStepByKey(key) {
-    setActiveStepKey(key);
-  }
-
-  // TODO: setIndex模式很难定位到child step，尽量使用key方式去定位
-  function setActiveStepByIndex(index) {
-    if (typeof index === 'function') {
-      const newIndex = index(totalSteps.findIndex(e => e.key === activeStepKey));
-      setActiveStepKey(totalSteps[newIndex].key);
-    } else {
-      setActiveStepKey(totalSteps[index].key);
-    }
-  }
-  const activeStep = totalSteps.findIndex(e => e.key === activeStepKey);
-  useEffect(() => {
-    if (mode === 'history') {
-      let stepKey = '';
-      steps.some(step => {
-        if (step.children && step.children.length) {
-          return step.children.some(childStep => {
-            if (matchPath(childStep.path, childStep.exact)) {
-              stepKey = childStep.key;
-              return true;
-            }
-            return false;
-          });
-        }
-        if (matchPath(step.path, step.exact)) {
-          stepKey = step.key;
-          return true;
-        }
-        return false;
-      });
-      if (stepKey) {
-        setActiveStepKey(stepKey);
-      }
-    }
-    return () => {};
-  }, [steps, mode]);
-  const value = {
-    steps,
-    totalStepsCount: totalSteps.length,
-    getStepStatus,
-    setActiveStepByKey,
-    setActiveStepByIndex,
-    activeStep,
-    // judge node can be clicked to back if the mode is 'memory'
-    canBackToStep: nodeIndex => {
-      return mode === 'memory' && activeStep !== 0 && nodeIndex < activeStep;
-    }
-  };
-  return /*#__PURE__*/_jsx(Provider, {
-    value: value,
-    children: children
-  });
-}
-function useStepContext() {
-  return useContext(StepContext);
-}
-StepProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  steps: PropTypes.array.isRequired,
-  mode: PropTypes.string
-};
-StepProvider.defaultProps = {
-  mode: 'history'
-};
-export { StepProvider, useStepContext };

package/es/header.js

@@ -1,337 +0,0 @@
-import Img from '@arcblock/ux/lib/Img';
-import { getBlockletDisplayName } from '@blocklet/launcher-util/es/util';
-import styled from '@emotion/styled';
-import Skeleton from '@mui/material/Skeleton';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import isEmpty from 'is-empty';
-import PropTypes from 'prop-types';
-import { useEffect, useRef, useState } from 'react';
-import joinUrl from 'url-join';
-import defaultBlockletLogo from './assets/blocklet-default-logo.png';
-import { getLaunchingText } from './locale';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function AppHeader({
-  blockletMeta,
-  subTitle,
-  logoUrl,
-  locale,
-  navLogo,
-  loading
-}) {
-  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
-  const blockletSize = isMobile ? 18 : 48;
-  const appNameRef = useRef(null);
-  const [appNameSize, setAppNameSize] = useState('');
-  useEffect(() => {
-    if (appNameRef.current && appNameRef.current.offsetHeight > 34) {
-      if (appNameSize === '') {
-        setAppNameSize('middle');
-      } else if (appNameSize === 'middle') {
-        setAppNameSize('small');
-      }
-    }
-  }, [appNameSize]);
-  return /*#__PURE__*/_jsxs(Container, {
-    className: appNameSize === 'small' ? 'center-mode' : '',
-    children: [isMobile ? /*#__PURE__*/_jsx("div", {
-      className: "app-icon",
-      children: navLogo
-    }) : /*#__PURE__*/_jsxs("div", {
-      className: "app-icon",
-      children: [loading && /*#__PURE__*/_jsx(AppIconSkeleton, {
-        blockletSize: blockletSize,
-        isMobile: isMobile
-      }), !loading && /*#__PURE__*/_jsx(AppIcon, {
-        blockletSize: blockletSize,
-        logoUrl: logoUrl
-      })]
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "header-title",
-      children: [isMobile && subTitle && /*#__PURE__*/_jsx("div", {
-        className: "header-title-sub",
-        children: subTitle
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "app-name-content",
-        children: [!isMobile && /*#__PURE__*/_jsx("div", {
-          className: "launching-context",
-          children: subTitle || getLaunchingText(locale)
-        }), /*#__PURE__*/_jsx("div", {
-          className: `header-title-name ${appNameSize === 'middle' || appNameSize === 'small' ? 'middle-size' : ''}`,
-          ref: appNameRef,
-          children: /*#__PURE__*/_jsx(AppTitle, {
-            logoUrl: logoUrl,
-            isMobile: isMobile,
-            blockletMeta: blockletMeta,
-            blockletSize: blockletSize,
-            loading: loading
-          })
-        })]
-      })]
-    })]
-  });
-}
-AppHeader.propTypes = {
-  blockletMeta: PropTypes.object,
-  subTitle: PropTypes.any,
-  logoUrl: PropTypes.string,
-  locale: PropTypes.string,
-  navLogo: PropTypes.any,
-  loading: PropTypes.bool
-};
-AppHeader.defaultProps = {
-  subTitle: '',
-  logoUrl: '',
-  locale: '',
-  navLogo: '',
-  loading: false,
-  blockletMeta: {}
-};
-
-// eslint-disable-next-line react/prop-types
-function AppIconSkeleton({
-  blockletSize,
-  isMobile
-}) {
-  if (isMobile) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  return /*#__PURE__*/_jsx(Skeleton, {
-    variant: "rectangular",
-    width: blockletSize,
-    height: blockletSize
-  });
-}
-
-// eslint-disable-next-line react/prop-types
-function AppIcon({
-  logoUrl,
-  blockletSize
-}) {
-  return /*#__PURE__*/_jsx(Img, {
-    // force update
-    width: blockletSize,
-    height: blockletSize,
-    src: logoUrl,
-    alt: "blocklet icon",
-    fallback: defaultBlockletLogo,
-    style: {
-      verticalAlign: 'text-bottom'
-    }
-  }, `layout-app-icon-${logoUrl}`);
-}
-
-// eslint-disable-next-line react/prop-types
-function AppTitle({
-  isMobile,
-  logoUrl,
-  blockletMeta,
-  blockletSize,
-  loading
-}) {
-  const name = getBlockletDisplayName(blockletMeta);
-  if (loading) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  if (isEmpty(blockletMeta)) {
-    return /*#__PURE__*/_jsx(Skeleton, {
-      variant: "rectangular",
-      animation: false,
-      width: 100,
-      height: 16,
-      alt: "icon",
-      style: {
-        marginTop: 4
-      }
-    });
-  }
-  if (isMobile) {
-    return /*#__PURE__*/_jsxs(MobileTitleStyle, {
-      children: [/*#__PURE__*/_jsx(AppIcon, {
-        blockletSize: blockletSize,
-        logoUrl: logoUrl
-      }), /*#__PURE__*/_jsx("span", {
-        className: "ellipsis-title",
-        children: getBlockletDisplayName(blockletMeta)
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(AppLink, {
-    target: "_blank",
-    href: joinUrl(blockletMeta?.registryUrl || '', `/blocklets/${blockletMeta?.did}`),
-    title: name,
-    children: name
-  });
-}
-const MobileTitleStyle = styled.div`
-  .ellipsis-title {
-    flex: 1;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    ${props => props.theme.breakpoints.down('md')} {
-      left: 26px;
-      width: calc(100% - 26px);
-    }
-  }
-`;
-AppTitle.propTypes = {
-  blockletMeta: PropTypes.object
-};
-AppTitle.defaultProps = {
-  blockletMeta: {}
-};
-export default AppHeader;
-const AppLink = styled.a`
-  color: ${props => props.theme.palette.common.black};
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  text-decoration: none;
-  font-weight: 700;
-  -webkit-font-smoothing: antialiased;
-
-  ${props => props.theme.breakpoints.down('md')} {
-    display: block;
-    max-width: calc(100vw - 150px);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-const Container = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  ${props => props.theme.breakpoints.up('md')} {
-    min-height: 70px;
-  }
-  ${props => props.theme.breakpoints.down('md')} {
-    align-items: center;
-  }
-  .app-name-content {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    ${props => props.theme.breakpoints.up('md')} {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-    ${props => props.theme.breakpoints.down('md')} {
-      justify-content: flex-start;
-      height: 22px;
-    }
-  }
-  .launching-context {
-    flex-shrink: 0;
-    font-size: 14px;
-    font-weight: 600;
-    color: ${props => props.theme.palette.grey[500]};
-    ${props => props.theme.breakpoints.up('md')} {
-      margin-bottom: 4px;
-    }
-    ${props => props.theme.breakpoints.down('md')} {
-      font-size: 14px;
-      line-height: 15px;
-      &:after {
-        display: inline-block;
-        margin: 0 4px;
-        content: ':';
-      }
-    }
-  }
-
-  &.center-mode {
-    align-items: flex-start;
-    .launching-context {
-      ${props => props.theme.breakpoints.up('sm')} {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .app-icon {
-    flex-shrink: 0;
-    > * {
-      display: block;
-      vertical-align: middle;
-    }
-  }
-
-  .header-title {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: flex-start;
-    margin-left: 24px;
-    ${props => props.theme.breakpoints.down('md')} {
-      margin-left: 16px;
-    }
-    .header-title-name {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex: 1;
-      height: 100%;
-      color: ${props => props.theme.palette.common.black};
-      font-weight: 700;
-      ${props => props.theme.breakpoints.up('sm')} {
-        font-size: 18px;
-
-        &.middle-size {
-          font-size: 16px;
-        }
-      }
-      ${props => props.theme.breakpoints.down('md')} {
-        display: block;
-        max-width: calc(100vw - 100px);
-        font-size: 16px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    .header-title-sub {
-      color: ${props => props.theme.palette.grey[700]};
-      font-size: 12px;
-      line-height: 16px;
-
-      ${props => props.theme.breakpoints.down('md')} {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-`;