@arcblock/ux 2.13.70 → 3.0.1

package/lib/NavMenu/sub-item-group.js

@@ -1,19 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { styled } from '../Theme';
-const Group = styled(Box)`
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { Box as r } from "@mui/material";
+import { styled as l } from "../Theme/index.js";
+const u = l(r)`
   padding: 16px 24px;
   border-radius: 8px;
-  background-color: ${({
-  theme
-}) => theme.palette.background.paper};
+  background-color: ${({ theme: o }) => o.palette.background.paper};
   cursor: auto;
 
   .group-label {
     margin-bottom: 8px;
-    color: ${({
-  theme
-}) => theme.palette.grey[600]};
+    color: ${({ theme: o }) => o.palette.grey[600]};
     font-size: 12px;
   }
 
@@ -23,26 +19,12 @@ const Group = styled(Box)`
     padding: 0;
   }
 `;
-export default function NavMenuSubItemGroup({
-  label,
-  children,
-  className,
-  sx,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsxs(Group, {
-    className: `nav-menu-sub-item-group ${className}`,
-    sx: {
-      ...sx
-    },
-    ...rest,
-    children: [/*#__PURE__*/_jsx(Box, {
-      className: "group-label",
-      children: label
-    }), /*#__PURE__*/_jsx(Box, {
-      component: "ul",
-      className: "nav",
-      children: children
-    })]
-  });
-}
+function d({ label: o, children: a, className: n, sx: t, ...p }) {
+  return /* @__PURE__ */ s(u, { className: `nav-menu-sub-item-group ${n}`, sx: { ...t }, ...p, children: [
+    /* @__PURE__ */ e(r, { className: "group-label", children: o }),
+    /* @__PURE__ */ e(r, { component: "ul", className: "nav", children: a })
+  ] });
+}
+export {
+  d as default
+};

package/lib/PageScroller/index.d.ts

@@ -2,7 +2,7 @@ export interface PageScrollerProps {
     animationTimer?: number;
     blockScrollDown?: false | true;
     blockScrollUp?: false | true;
-    children?: React.ReactElement | React.ReactElement[];
+    children?: React.ReactElement<any> | React.ReactElement<any>[];
     height?: number | string;
     width?: number | string;
     customPageNumber?: number;

package/lib/PageScroller/index.js

@@ -1,261 +1,125 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
-import isEqual from 'lodash/isEqual';
-import isNil from 'lodash/isNil';
-import isNull from 'lodash/isNull';
-import usePrevious from './usePrevValue';
-import { withDeprecated } from '../Util/deprecate';
-const Events = {
-  TOUCHMOVE: 'touchmove',
-  KEYDOWN: 'keydown'
-};
-const DEFAULT_ANIMATION_TIMER = 500;
-const DEFAULT_ANIMATION = 'ease-in-out';
-const DEFAULT_CONTAINER_HEIGHT = '100vh';
-const DEFAULT_CONTAINER_WIDTH = '100vw';
-const DEFAULT_COMPONENT_INDEX = 0;
-const DEFAULT_COMPONENTS_TO_RENDER_LENGTH = 0;
-const ANIMATION_TIMER_BUFFER = 100;
-const KEY_UP = 38;
-const KEY_DOWN = 40;
-const DISABLED_CLASS_NAME = 'rps-scroll--disabled';
-let previousTouchMove = null;
-let isScrolling = false;
-let isMounted = false;
-let isBodyScrollEnabled = true;
-let isTransitionAfterComponentsToRenderChanged = false;
-const containers = [];
-function PageScroller({
-  animationTimer = DEFAULT_ANIMATION_TIMER,
-  blockScrollDown = false,
-  blockScrollUp = false,
-  children: _children,
-  height = DEFAULT_CONTAINER_HEIGHT,
-  width = DEFAULT_CONTAINER_WIDTH,
-  customPageNumber,
-  onScrollUnavailable,
-  onChange,
-  renderAllPagesOnFirstRender = false,
-  transitionTimingFunction = DEFAULT_ANIMATION
+import { jsx as W } from "react/jsx-runtime";
+import { useState as U, useRef as Q, Children as K, useCallback as i, cloneElement as Z, useEffect as p } from "react";
+import A from "lodash/isEqual";
+import r from "lodash/isNil";
+import g from "lodash/isNull";
+import P from "./usePrevValue.js";
+import { withDeprecated as b } from "../Util/deprecate.js";
+const I = {
+  TOUCHMOVE: "touchmove",
+  KEYDOWN: "keydown"
+}, ee = 500, te = "ease-in-out", ne = "100vh", se = "100vw", k = 0, B = 0, D = 100, oe = 38, re = 40, y = "rps-scroll--disabled";
+let M = null, f = !1, a = !1, w = !0, Y = !1;
+const T = [];
+function le({
+  animationTimer: d = ee,
+  blockScrollDown: F = !1,
+  blockScrollUp: H = !1,
+  children: V,
+  height: G = ne,
+  width: j = se,
+  customPageNumber: s,
+  onScrollUnavailable: E,
+  onChange: R,
+  renderAllPagesOnFirstRender: $ = !1,
+  transitionTimingFunction: q = te
 }) {
-  const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
-  const [componentsToRenderLength, setComponentsToRenderLength] = useState(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
-  const prevComponentIndex = usePrevious(componentIndex);
-  const pageContainer = useRef(null);
-  const children = Children.toArray(_children);
-  const addNextComponent = useCallback(componentsToRenderOnMountLength => {
-    let tempComponentsToRenderLength = 0;
-    if (!isNil(componentsToRenderOnMountLength)) {
-      tempComponentsToRenderLength = componentsToRenderOnMountLength;
-    }
-    tempComponentsToRenderLength = Math.max(tempComponentsToRenderLength, componentsToRenderLength);
-    if (tempComponentsToRenderLength <= componentIndex + 1) {
-      if (!isNil(children[componentIndex + 1])) {
-        tempComponentsToRenderLength++;
-      }
-    }
-    setComponentsToRenderLength(tempComponentsToRenderLength);
-  }, [children, componentIndex, componentsToRenderLength]);
-  const checkRenderOnMount = useCallback(() => {
-    if (renderAllPagesOnFirstRender) {
-      setComponentsToRenderLength(Children.count(children));
-    } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
-      addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
-    }
-  }, [addNextComponent, children, renderAllPagesOnFirstRender]);
-  const disableScroll = useCallback(() => {
-    if (isBodyScrollEnabled) {
-      isBodyScrollEnabled = false;
-      window.scrollTo({
-        left: 0,
-        top: 0,
-        behavior: 'smooth'
-      });
-      document.body.classList.add(DISABLED_CLASS_NAME);
-      document.documentElement.classList.add(DISABLED_CLASS_NAME);
-    }
-  }, []);
-  const enableDocumentScroll = useCallback(() => {
-    if (!isBodyScrollEnabled) {
-      isBodyScrollEnabled = true;
-      document.body.classList.remove(DISABLED_CLASS_NAME);
-      document.documentElement.classList.remove(DISABLED_CLASS_NAME);
-    }
-  }, []);
-  const setRenderComponents = useCallback(() => {
-    const newComponentsToRender = [];
-    let i = 0;
-    while (i < componentsToRenderLength && !isNil(children[i])) {
-      containers[i] = true;
-      newComponentsToRender.push(/*#__PURE__*/_jsx("div", {
-        style: {
-          height: '100%',
-          width: '100%'
-        },
-        children: /*#__PURE__*/cloneElement(children[i], {
-          ...children[i].props
-        })
-      }, i));
-      i++;
-    }
-    return newComponentsToRender;
-  }, [children, componentsToRenderLength]);
-  const scrollWindowDown = useCallback(() => {
-    if (!isScrolling && !blockScrollDown) {
-      if (!isNil(containers[componentIndex + 1])) {
-        disableScroll();
-        isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
-
-        setTimeout(() => {
-          if (isMounted) {
-            setComponentIndex(prevState => prevState + 1);
-          }
-        }, animationTimer + ANIMATION_TIMER_BUFFER);
-      } else {
-        enableDocumentScroll();
-        if (onScrollUnavailable) {
-          onScrollUnavailable();
-        }
-      }
-    }
-  }, [animationTimer, blockScrollDown, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-  const scrollWindowUp = useCallback(() => {
-    if (!isScrolling && !blockScrollUp) {
-      if (!isNil(containers[componentIndex - 1])) {
-        disableScroll();
-        isScrolling = true;
-        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
-
-        setTimeout(() => {
-          if (isMounted) {
-            setComponentIndex(prevState => prevState - 1);
-          }
-        }, animationTimer + ANIMATION_TIMER_BUFFER);
-      } else {
-        enableDocumentScroll();
-        if (onScrollUnavailable) {
-          onScrollUnavailable();
-        }
-      }
-    }
-  }, [animationTimer, blockScrollUp, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-  const touchMove = useCallback(event => {
-    if (!isNull(previousTouchMove)) {
-      if (event.touches[0].clientY > previousTouchMove) {
-        scrollWindowUp();
-      } else {
-        scrollWindowDown();
-      }
-    } else {
-      previousTouchMove = event.touches[0].clientY;
-    }
-  }, [scrollWindowDown, scrollWindowUp]);
-  const wheelScroll = useCallback(event => {
-    if (event.deltaY < 0) {
-      scrollWindowUp();
-    } else {
-      scrollWindowDown();
-    }
-  }, [scrollWindowDown, scrollWindowUp]);
-  const keyPress = useCallback(event => {
-    if (isEqual(event.keyCode, KEY_UP)) {
-      scrollWindowUp();
-    }
-    if (isEqual(event.keyCode, KEY_DOWN)) {
-      scrollWindowDown();
-    }
-  }, [scrollWindowDown, scrollWindowUp]);
-  useEffect(() => {
-    pageContainer.current?.addEventListener(Events.TOUCHMOVE, touchMove);
-    pageContainer.current?.addEventListener(Events.KEYDOWN, keyPress);
-    return () => {
-      if (pageContainer.current?.removeEventListener) {
-        pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
-      }
-    };
-  }, [touchMove, keyPress]);
-  useEffect(() => {
-    isMounted = true;
-    checkRenderOnMount();
-    return () => {
-      isMounted = false;
+  const [n, C] = U(k), [c, L] = U(B), m = P(n), l = Q(null), o = K.toArray(V), O = i(
+    (e) => {
+      let t = 0;
+      r(e) || (t = e), t = Math.max(t, c), t <= n + 1 && (r(o[n + 1]) || t++), L(t);
+    },
+    [o, n, c]
+  ), X = i(() => {
+    $ ? L(K.count(o)) : r(o[k + 1]) || O(B + 1);
+  }, [O, o, $]), _ = i(() => {
+    w && (w = !1, window.scrollTo({
+      left: 0,
+      top: 0,
+      behavior: "smooth"
+    }), document.body.classList.add(y), document.documentElement.classList.add(y));
+  }, []), v = i(() => {
+    w || (w = !0, document.body.classList.remove(y), document.documentElement.classList.remove(y));
+  }, []), z = i(() => {
+    const e = [];
+    let t = 0;
+    for (; t < c && !r(o[t]); )
+      T[t] = !0, e.push(
+        /* @__PURE__ */ W("div", { style: { height: "100%", width: "100%" }, children: Z(o[t], { ...o[t].props }) }, t)
+      ), t++;
+    return e;
+  }, [o, c]), h = i(() => {
+    !f && !F && (r(T[n + 1]) ? (v(), E && E()) : (_(), f = !0, l.current.style.transform = `translate3d(0, ${(n + 1) * -100}%, 0)`, setTimeout(() => {
+      a && C((e) => e + 1);
+    }, d + D)));
+  }, [d, F, n, _, v, E]), u = i(() => {
+    !f && !H && (r(T[n - 1]) ? (v(), E && E()) : (_(), f = !0, l.current.style.transform = `translate3d(0, ${(n - 1) * -100}%, 0)`, setTimeout(() => {
+      a && C((e) => e - 1);
+    }, d + D)));
+  }, [d, H, n, _, v, E]), N = i(
+    (e) => {
+      g(M) ? M = e.touches[0].clientY : e.touches[0].clientY > M ? u() : h();
+    },
+    [h, u]
+  ), J = i(
+    (e) => {
+      e.deltaY < 0 ? u() : h();
+    },
+    [h, u]
+  ), x = i(
+    (e) => {
+      A(e.keyCode, oe) && u(), A(e.keyCode, re) && h();
+    },
+    [h, u]
+  );
+  return p(() => {
+    var e, t;
+    return (e = l.current) == null || e.addEventListener(I.TOUCHMOVE, N), (t = l.current) == null || t.addEventListener(I.KEYDOWN, x), () => {
+      var S;
+      (S = l.current) != null && S.removeEventListener && (l.current.removeEventListener(I.TOUCHMOVE, N), l.current.removeEventListener(I.KEYDOWN, x));
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    isScrolling = false;
-    previousTouchMove = null;
-    if (prevComponentIndex !== undefined && componentIndex > prevComponentIndex) {
-      addNextComponent();
-    }
-  }, [addNextComponent, componentIndex, prevComponentIndex]);
-  useEffect(() => {
-    if (onChange) {
-      onChange(componentIndex);
-    }
-  }, [onChange, componentIndex]);
-  useEffect(() => {
-    if (!isNil(customPageNumber) && !isEqual(customPageNumber, componentIndex)) {
-      let newComponentsToRenderLength = componentsToRenderLength;
-      if (!isEqual(componentIndex, customPageNumber)) {
-        if (!isNil(containers[customPageNumber]) && !isScrolling) {
-          isScrolling = true;
-          pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
-          if (isNil(containers[customPageNumber]) && !isNil(children[customPageNumber])) {
-            newComponentsToRenderLength++;
-          }
-          setTimeout(() => {
-            setComponentIndex(customPageNumber);
-            setComponentsToRenderLength(newComponentsToRenderLength);
-          }, animationTimer + ANIMATION_TIMER_BUFFER);
-        } else if (!isScrolling && !isNil(children[customPageNumber])) {
-          for (let i = componentsToRenderLength; i <= customPageNumber; i++) {
-            newComponentsToRenderLength++;
-          }
-          if (!isNil(children[customPageNumber])) {
-            newComponentsToRenderLength++;
-          }
-          isScrolling = true;
-          isTransitionAfterComponentsToRenderChanged = true;
-          setComponentsToRenderLength(newComponentsToRenderLength);
+  }, [N, x]), p(() => (a = !0, X(), () => {
+    a = !1;
+  }), []), p(() => {
+    f = !1, M = null, m !== void 0 && n > m && O();
+  }, [O, n, m]), p(() => {
+    R && R(n);
+  }, [R, n]), p(() => {
+    if (!r(s) && !A(s, n)) {
+      let e = c;
+      if (!A(n, s)) {
+        if (!r(T[s]) && !f)
+          f = !0, l.current.style.transform = `translate3d(0, ${s * -100}%, 0)`, r(T[s]) && !r(o[s]) && e++, setTimeout(() => {
+            C(s), L(e);
+          }, d + D);
+        else if (!f && !r(o[s])) {
+          for (let t = c; t <= s; t++)
+            e++;
+          r(o[s]) || e++, f = !0, Y = !0, L(e);
         }
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customPageNumber]);
-  useEffect(() => {
-    if (isTransitionAfterComponentsToRenderChanged) {
-      isTransitionAfterComponentsToRenderChanged = false;
-      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
-      setTimeout(() => {
-        setComponentIndex(customPageNumber);
-      }, animationTimer + ANIMATION_TIMER_BUFFER);
-    }
-  }, [animationTimer, componentsToRenderLength, customPageNumber]);
-  return /*#__PURE__*/_jsx("div", {
-    style: {
-      height,
-      width,
-      overflow: 'hidden'
-    },
-    children: /*#__PURE__*/_jsx("div", {
-      ref: pageContainer,
-      onWheel: wheelScroll,
+  }, [s]), p(() => {
+    Y && (Y = !1, l.current.style.transform = `translate3d(0, ${s * -100}%, 0)`, setTimeout(() => {
+      C(s);
+    }, d + D));
+  }, [d, c, s]), /* @__PURE__ */ W("div", { style: { height: G, width: j, overflow: "hidden" }, children: /* @__PURE__ */ W(
+    "div",
+    {
+      ref: l,
+      onWheel: J,
       style: {
-        height: '100%',
-        width: '100%',
-        transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
-        outline: 'none'
+        height: "100%",
+        width: "100%",
+        transition: `transform ${d}ms ${q}`,
+        outline: "none"
       },
       tabIndex: 0,
-      children: setRenderComponents()
-    })
-  });
+      children: z()
+    }
+  ) });
 }
-export default withDeprecated(PageScroller, {
-  name: 'PageScroller'
-});
+const pe = b(le, { name: "PageScroller" });
+export {
+  pe as default
+};

package/lib/PageScroller/story/FifthComponent.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function FifthComponent() {
-  return /*#__PURE__*/_jsx("div", {
-    className: "component fifth-component",
-    children: /*#__PURE__*/_jsx("h2", {
-      children: "Fifth Component"
-    })
-  });
-}
+import { jsx as n } from "react/jsx-runtime";
+function t() {
+  return /* @__PURE__ */ n("div", { className: "component fifth-component", children: /* @__PURE__ */ n("h2", { children: "Fifth Component" }) });
+}
+export {
+  t as default
+};

package/lib/PageScroller/story/FirstComponent.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function FirstComponent() {
-  return /*#__PURE__*/_jsx("div", {
-    className: "component first-component",
-    children: /*#__PURE__*/_jsx("h2", {
-      children: "First Component"
-    })
-  });
-}
+import { jsx as n } from "react/jsx-runtime";
+function t() {
+  return /* @__PURE__ */ n("div", { className: "component first-component", children: /* @__PURE__ */ n("h2", { children: "First Component" }) });
+}
+export {
+  t as default
+};

package/lib/PageScroller/story/FourthComponent.js

@@ -1,12 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function FourthComponent() {
-  return /*#__PURE__*/_jsx("div", {
-    className: "component fourth-component",
-    children: /*#__PURE__*/_jsx("h2", {
-      style: {
-        margin: 'auto'
-      },
-      children: "Fourth Component"
-    })
-  });
-}
+import { jsx as o } from "react/jsx-runtime";
+function t() {
+  return /* @__PURE__ */ o("div", { className: "component fourth-component", children: /* @__PURE__ */ o("h2", { style: { margin: "auto" }, children: "Fourth Component" }) });
+}
+export {
+  t as default
+};

package/lib/PageScroller/story/FullPage.js

@@ -1,46 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import { useState } from 'react';
-import Button from '../../Button';
-import PageScroller from '..';
-import FirstComponent from './FirstComponent';
-import SecondComponent from './SecondComponent';
-import ThirdComponent from './ThirdComponent';
-import FourthComponent from './FourthComponent';
-import FifthComponent from './FifthComponent';
-import './index.css';
-export default function FullPage() {
-  const [current, setCurrent] = useState(0);
-  const pageNumbers = [];
-  for (let i = 0; i < 5; i++) {
-    pageNumbers.push(/*#__PURE__*/_jsx(Button, {
-      variant: i === current ? 'contained' : 'outlined',
-      size: "small",
-      onClick: () => setCurrent(i),
-      color: i === current ? 'primary' : 'secondary',
-      children: i + 1
-    }, i));
-  }
-  const progress = current / (5 - 1) * 100;
-  return /*#__PURE__*/_jsxs("div", {
-    className: "demo-page-full",
-    children: [/*#__PURE__*/_jsxs(PageScroller, {
-      onChange: i => setCurrent(i),
-      customPageNumber: current,
-      children: [/*#__PURE__*/_jsx(FirstComponent, {}), /*#__PURE__*/_jsx(SecondComponent, {}), /*#__PURE__*/_jsx(ThirdComponent, {}), /*#__PURE__*/_jsx(FourthComponent, {}), /*#__PURE__*/_jsx(FifthComponent, {})]
-    }), /*#__PURE__*/_jsx("div", {
-      className: "progress",
-      role: "progressbar",
-      "aria-valuemin": "0",
-      "aria-valuemax": "100",
-      "aria-valuenow": progress,
-      "aria-valuetext": `Page Scroller Progress: ${progress}`,
-      style: {
-        width: `${progress}%`
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useState as m } from "react";
+import s from "../../Button/index.js";
+import l from "../index.js";
+import p from "./FirstComponent.js";
+import c from "./SecondComponent.js";
+import u from "./ThirdComponent.js";
+import d from "./FourthComponent.js";
+import f from "./FifthComponent.js";
+/* empty css          */
+function y() {
+  const [e, a] = m(0), n = [];
+  for (let o = 0; o < 5; o++)
+    n.push(
+      /* @__PURE__ */ r(
+        s,
+        {
+          variant: o === e ? "contained" : "outlined",
+          size: "small",
+          onClick: () => a(o),
+          color: o === e ? "primary" : "secondary",
+          children: o + 1
+        },
+        o
+      )
+    );
+  const t = e / 4 * 100;
+  return /* @__PURE__ */ i("div", { className: "demo-page-full", children: [
+    /* @__PURE__ */ i(l, { onChange: (o) => a(o), customPageNumber: e, children: [
+      /* @__PURE__ */ r(p, {}),
+      /* @__PURE__ */ r(c, {}),
+      /* @__PURE__ */ r(u, {}),
+      /* @__PURE__ */ r(d, {}),
+      /* @__PURE__ */ r(f, {})
+    ] }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "progress",
+        role: "progressbar",
+        "aria-valuemin": "0",
+        "aria-valuemax": "100",
+        "aria-valuenow": t,
+        "aria-valuetext": `Page Scroller Progress: ${t}`,
+        style: { width: `${t}%` }
       }
-    }), /*#__PURE__*/_jsx("div", {
-      className: "pagination-additional-class",
-      children: pageNumbers
-    })]
-  });
-}
+    ),
+    /* @__PURE__ */ r("div", { className: "pagination-additional-class", children: n })
+  ] });
+}
+export {
+  y as default
+};