@blocklet/launcher-layout 2.13.69 → 3.0.0

package/lib/compact-layout.js

@@ -1,76 +1,27 @@
-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);
+import { jsxs as x, jsx as u } from "react/jsx-runtime";
+import { useRef as n, useState as h, useEffect as v } from "react";
+import w from "@emotion/styled";
+import l from "prop-types";
+import y from "lodash/noop";
+function b({ children: m = [], bottom: d, onBottomFix: o = y }) {
+  const s = n(null), t = n(null), f = n(null), i = n(null), [p, a] = h(!1);
+  return v(() => {
+    let e;
+    const c = () => {
+      e || (e = setTimeout(() => {
+        t.current && (t.current.scrollHeight > s.current.clientHeight - f.current.clientHeight ? (i.current !== "fix" && (o("fix"), i.current = "fix"), a(!0)) : (i.current !== "scroll" && (o("scroll"), i.current = "scroll"), a(!1))), e = 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);
-      }
+    let r;
+    return window.ResizeObserver ? r = new ResizeObserver(c) : window.addEventListener("resize", c), r.observe(s.current), r.observe(t.current), () => {
+      r ? r.disconnect() : window.removeEventListener("resize", c), e && clearTimeout(e);
     };
-  }, [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
-    })]
-  });
+  }, [o]), /* @__PURE__ */ x(g, { ref: s, className: `${p ? "scroll-mode" : ""}`, children: [
+    /* @__PURE__ */ u("div", { className: "compact-context", ref: t, children: m }),
+    /* @__PURE__ */ u("div", { className: "fix-container", ref: f, children: d })
+  ] });
 }
-const Container = styled.div`
+const g = w.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -102,13 +53,11 @@ const Container = styled.div`
     }
   }
 `;
-CompactLayout.propTypes = {
-  children: PropTypes.any,
-  bottom: PropTypes.element.isRequired,
-  onBottomFix: PropTypes.func
+b.propTypes = {
+  children: l.any,
+  bottom: l.element.isRequired,
+  onBottomFix: l.func
 };
-CompactLayout.defaultProps = {
-  children: [],
-  onBottomFix: () => {}
+export {
+  b as default
 };
-export default CompactLayout;

package/lib/content.js

@@ -1,18 +1,13 @@
-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
-  });
+import { jsx as e } from "react/jsx-runtime";
+import n from "@emotion/styled";
+import i from "prop-types";
+function o({ children: t }) {
+  return /* @__PURE__ */ e(r, { children: t });
 }
-Content.propTypes = {
-  children: PropTypes.any.isRequired
+o.propTypes = {
+  children: i.any.isRequired
 };
-export default Content;
-const Container = styled.div`
+const r = n.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -33,7 +28,7 @@ const Container = styled.div`
     align-items: center;
 
     .toolbar_title {
-      color: ${props => props.theme.palette.grey['900']};
+      color: ${(t) => t.theme.palette.grey[900]};
       font-size: 16px;
     }
   }
@@ -44,7 +39,7 @@ const Container = styled.div`
     align-items: center;
 
     width: 100%;
-    background: ${props => props.theme.palette.background.paper};
+    background: ${(t) => t.theme.palette.background.paper};
 
     .create-button {
       margin-right: 32px;
@@ -55,7 +50,7 @@ const Container = styled.div`
       margin: 0 8px;
     }
 
-    ${props => props.theme.breakpoints.up('md')} {
+    ${(t) => t.theme.breakpoints.up("md")} {
       padding: 24px;
       & > button,
       .button {
@@ -64,9 +59,12 @@ const Container = styled.div`
       }
     }
 
-    ${props => props.theme.breakpoints.down('md')} {
+    ${(t) => t.theme.breakpoints.down("md")} {
       margin-top: auto;
       padding: 16px;
     }
   }
-`;
+`;
+export {
+  o as default
+};

package/lib/context/step.js

@@ -1,137 +1,72 @@
-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';
-      }
+import { jsx as I } from "react/jsx-runtime";
+import { createContext as m, useState as g, useEffect as K, use as C } from "react";
+import p from "prop-types";
+const k = m(), { Provider: w } = k, d = (o, r, i = window.location.pathname.replace(/\/$/, "/")) => o ? r ? o === i : new RegExp(o).test(i) : !1;
+function P({ children: o, steps: r, mode: i = "history" }) {
+  const [c, f] = g("");
+  !c && r.length && f(r[0].key);
+  const y = r.map((e) => e.children ? [
+    {
+      key: e.key,
+      hasChild: !0
+    },
+    e.children.map((t) => ({ parentKey: e.key, key: t.key }))
+  ] : {
+    key: e.key
+  }).flat(1 / 0), u = y.filter((e) => !e.hasChild), h = (e) => {
+    let t;
+    const n = y.findIndex((a) => a.key === c ? (t = a.parentKey, !0) : !1);
+    if (t === e)
+      return "current";
+    const l = y.findIndex((a) => a.key === e);
+    if (l !== -1) {
+      if (l === n)
+        return "current";
+      if (l < n)
+        return "before";
     }
-    return 'after';
+    return "after";
   };
-
-  // can use this to set the activeStep by key
-  function setActiveStepByKey(key) {
-    setActiveStepKey(key);
+  function x(e) {
+    f(e);
   }
-
-  // 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);
-    }
+  function S(e) {
+    if (typeof e == "function") {
+      const t = e(u.findIndex((n) => n.key === c));
+      f(u[t].key);
+    } else
+      f(u[e].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);
-      }
+  const s = u.findIndex((e) => e.key === c);
+  K(() => {
+    if (i === "history") {
+      let e = "";
+      r.some((t) => t.children && t.children.length ? t.children.some((n) => d(n.path, n.exact) ? (e = n.key, !0) : !1) : d(t.path, t.exact) ? (e = t.key, !0) : !1), e && f(e);
     }
-    return () => {};
-  }, [steps, mode]);
-  const value = {
-    steps,
-    totalStepsCount: totalSteps.length,
-    getStepStatus,
-    setActiveStepByKey,
-    setActiveStepByIndex,
-    activeStep,
+    return () => {
+    };
+  }, [r, i]);
+  const v = {
+    steps: r,
+    totalStepsCount: u.length,
+    getStepStatus: h,
+    setActiveStepByKey: x,
+    setActiveStepByIndex: S,
+    activeStep: s,
     // judge node can be clicked to back if the mode is 'memory'
-    canBackToStep: nodeIndex => {
-      return mode === 'memory' && activeStep !== 0 && nodeIndex < activeStep;
-    }
+    canBackToStep: (e) => i === "memory" && s !== 0 && e < s
   };
-  return /*#__PURE__*/_jsx(Provider, {
-    value: value,
-    children: children
-  });
+  return /* @__PURE__ */ I(w, { value: v, children: o });
 }
-function useStepContext() {
-  return useContext(StepContext);
+function T() {
+  return C(k);
 }
-StepProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  steps: PropTypes.array.isRequired,
-  mode: PropTypes.string
+P.propTypes = {
+  children: p.any.isRequired,
+  steps: p.array.isRequired,
+  mode: p.string
 };
-StepProvider.defaultProps = {
-  mode: 'history'
+export {
+  P as StepProvider,
+  T as useStepContext
 };
-export { StepProvider, useStepContext };