@blocklet/launcher-layout 2.1.108 → 2.2.0

package/es/compact-layout.js

@@ -0,0 +1,115 @@
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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

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

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

@@ -0,0 +1,337 @@
+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 } from "react/jsx-runtime";
+import { 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')} {
+      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;
+      }
+    }
+  }
+`;