@arcblock/ux 2.9.90 → 2.10.0

package/es/PageScroller/index.js

@@ -1,286 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import isEqual from 'lodash/isEqual';
-import isNil from 'lodash/isNil';
-import isNull from 'lodash/isNull';
-import usePrevious from './usePrevValue';
-import { withDeprecated } from '../Util/deprecate';
-import { jsx as _jsx } from "react/jsx-runtime";
-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,
-  blockScrollDown,
-  blockScrollUp,
-  children,
-  height,
-  width,
-  customPageNumber,
-  onScrollUnavailable,
-  onChange,
-  renderAllPagesOnFirstRender,
-  transitionTimingFunction
-}) {
-  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 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;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    isScrolling = false;
-    previousTouchMove = null;
-    if (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);
-        }
-      }
-    }
-    // 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,
-      style: {
-        height: '100%',
-        width: '100%',
-        transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
-        outline: 'none'
-      },
-      tabIndex: 0,
-      children: setRenderComponents()
-    })
-  });
-}
-PageScroller.propTypes = {
-  animationTimer: PropTypes.number,
-  blockScrollDown: PropTypes.bool,
-  blockScrollUp: PropTypes.bool,
-  children: PropTypes.any.isRequired,
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  customPageNumber: PropTypes.number,
-  onScrollUnavailable: PropTypes.func,
-  onChange: PropTypes.func,
-  renderAllPagesOnFirstRender: PropTypes.bool,
-  transitionTimingFunction: PropTypes.string
-};
-PageScroller.defaultProps = {
-  animationTimer: DEFAULT_ANIMATION_TIMER,
-  transitionTimingFunction: DEFAULT_ANIMATION,
-  height: DEFAULT_CONTAINER_HEIGHT,
-  width: DEFAULT_CONTAINER_WIDTH,
-  onChange: undefined,
-  onScrollUnavailable: undefined,
-  blockScrollUp: false,
-  blockScrollDown: false,
-  renderAllPagesOnFirstRender: false,
-  customPageNumber: undefined
-};
-export default withDeprecated(PageScroller, {
-  name: 'PageScroller'
-});

package/es/PageScroller/story/FifthComponent.js

@@ -1,9 +0,0 @@
-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"
-    })
-  });
-}

package/es/PageScroller/story/FirstComponent.js

@@ -1,9 +0,0 @@
-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"
-    })
-  });
-}

package/es/PageScroller/story/FourthComponent.js

@@ -1,12 +0,0 @@
-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"
-    })
-  });
-}

package/es/PageScroller/story/FullPage.js

@@ -1,47 +0,0 @@
-/* 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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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}%`
-      }
-    }), /*#__PURE__*/_jsx("div", {
-      className: "pagination-additional-class",
-      children: pageNumbers
-    })]
-  });
-}

package/es/PageScroller/story/PageContain.js

@@ -1,59 +0,0 @@
-/* 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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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-contain",
-    children: [/*#__PURE__*/_jsx("h3", {
-      className: "demo-page-contain__hint",
-      children: "You need to focus or hover page scroller to make scroll, keys or touch work"
-    }), /*#__PURE__*/_jsxs("div", {
-      style: {
-        width: 360,
-        height: 640,
-        position: 'relative'
-      },
-      children: [/*#__PURE__*/_jsxs(PageScroller, {
-        onChange: i => setCurrent(i),
-        width: 360,
-        height: 640,
-        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}%`
-        }
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: "pagination-additional-class",
-      children: pageNumbers
-    })]
-  });
-}

package/es/PageScroller/story/SecondComponent.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function SecondComponent() {
-  return /*#__PURE__*/_jsx("div", {
-    className: "component second-component",
-    children: /*#__PURE__*/_jsx("h2", {
-      children: "Second Component"
-    })
-  });
-}

package/es/PageScroller/story/ThirdComponent.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThirdComponent() {
-  return /*#__PURE__*/_jsx("div", {
-    className: "component third-component",
-    children: /*#__PURE__*/_jsx("h2", {
-      children: "Third Component"
-    })
-  });
-}

package/es/PageScroller/story/index.css

@@ -1,115 +0,0 @@
-html,
-body {
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.links {
-  display: flex;
-  flex-direction: column;
-  margin-left: 50px;
-}
-
-.links .link {
-  margin-top: 20px;
-}
-
-.component {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-
-.component.first-component {
-  background-color: gray;
-  position: relative;
-}
-
-.first-component--inside-scroller {
-  position: absolute;
-  right: 20px;
-  top: 100px;
-}
-
-.component.second-component {
-  background-color: red;
-}
-
-.component.third-component {
-  background-color: blue;
-}
-
-.component.fourth-component {
-  background-color: yellow;
-}
-
-.component.fifth-component {
-  background-color: purple;
-}
-
-h2 {
-  margin: auto;
-  text-align: center;
-}
-
-.pagination-additional-class {
-  margin: 0;
-  position: fixed;
-  top: 20px;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.pagination-additional-class > li:not(:last-of-type) > a,
-.pagination-additional-class > li:not(:last-of-type) > span {
-  margin-right: 50px;
-}
-
-.demo-page-contain {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  flex-direction: column;
-}
-
-.demo-page-contain__hint {
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  .pagination-additional-class > li:not(:last-of-type) > a,
-  .pagination-additional-class > li:not(:last-of-type) > span {
-    margin-right: 5px;
-  }
-}
-
-.demo-page-full {
-  position: relative;
-}
-.progress {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0;
-  overflow: hidden;
-  transition: all 0.2s linear;
-}
-.progress,
-.progress:before {
-  height: 6px;
-}
-.progress:before {
-  display: block;
-  width: 100%;
-  background-color: #4e6af6;
-  content: '';
-  transform-origin: 0 100%;
-  transform: skewX(45deg);
-}
-.progress[style*='100%']:before {
-  transform: none;
-}

package/es/PageScroller/usePrevValue.js

@@ -1,9 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import { useEffect, useRef } from 'react';
-export default function usePrevious(value) {
-  const ref = useRef({});
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}

package/es/Passport/index.js

@@ -1,2 +0,0 @@
-import PassportItem from './passport';
-export default PassportItem;

package/es/Passport/passport.js

@@ -1,103 +0,0 @@
-import PropTypes from 'prop-types';
-import upperFirst from 'lodash/upperFirst';
-import { Box } from '@mui/material';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Passport({
-  passport,
-  user,
-  color,
-  width,
-  icon,
-  children,
-  createPassportSvg,
-  ...rest
-}) {
-  const {
-    t
-  } = useLocaleContext();
-  return /*#__PURE__*/_jsxs(Box, {
-    ...rest,
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      ...rest?.sx
-    },
-    children: [/*#__PURE__*/_jsx(Box, {
-      className: "passport-item__display"
-      // eslint-disable-next-line react/no-danger
-      ,
-      dangerouslySetInnerHTML: {
-        __html: createPassportSvg({
-          title: passport.title || passport.name,
-          issuer: passport.issuer && passport.issuer.name,
-          issuerDid: passport.issuer && passport.issuer.id,
-          ownerName: user.fullName,
-          ownerDid: user.did,
-          ownerAvatarUrl: user.avatar,
-          revoked: passport.revoked,
-          preferredColor: color,
-          width
-        })
-      }
-    }), /*#__PURE__*/_jsxs(Box, {
-      className: "passport-item__body",
-      sx: {
-        p: 0,
-        ml: 3,
-        mt: 0
-      },
-      children: [/*#__PURE__*/_jsxs(Box, {
-        className: "passport-item__title",
-        sx: {
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 400,
-          fontSize: '16px',
-          lineHeight: 1.1875,
-          color: '#222222'
-        },
-        children: [upperFirst(passport.title), /*#__PURE__*/_jsxs(Box, {
-          className: "passport-item__status-icon",
-          sx: {
-            svg: {
-              fill: '#bfbfbf',
-              height: '1.2em',
-              marginLeft: '0.4em'
-            }
-          },
-          children: [icon, passport.revoked && /*#__PURE__*/_jsx(RevokeIcon, {})]
-        })]
-      }), passport.expirationDate && /*#__PURE__*/_jsx(Box, {
-        className: "passport-item__title",
-        sx: {
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 400,
-          fontSize: '16px',
-          lineHeight: 1.1875,
-          color: '#222222'
-        },
-        children: t('team.passport.validUntil', {
-          date: passport.expirationDate
-        })
-      }), children]
-    })]
-  });
-}
-Passport.propTypes = {
-  passport: PropTypes.any.isRequired,
-  user: PropTypes.any.isRequired,
-  color: PropTypes.string.isRequired,
-  createPassportSvg: PropTypes.func.isRequired,
-  icon: PropTypes.any,
-  children: PropTypes.any,
-  width: PropTypes.number
-};
-Passport.defaultProps = {
-  icon: null,
-  children: null,
-  width: 150
-};