@arcblock/ux 2.6.8 → 2.7.0

package/es/PageScroller/index.js

@@ -0,0 +1,286 @@
+/* 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

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

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

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

@@ -0,0 +1,47 @@
+/* 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

@@ -0,0 +1,59 @@
+/* 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

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

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

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

@@ -0,0 +1,9 @@
+// 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/PricingTable/PricingPlan.js

@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function PricingPlan({
+  plan
+}) {
+  return /*#__PURE__*/_jsxs(PlanCard, {
+    $shadow: true,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "card-header",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "title",
+        children: plan.name
+      })
+    }), /*#__PURE__*/_jsxs(CardContent, {
+      className: "card-content",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "plan-content",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "plan-pricing",
+          children: /*#__PURE__*/_jsx(Typography, {
+            component: "h2",
+            variant: "h5",
+            className: "price-number",
+            children: plan.price
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "plan-services",
+          children: plan.featureList.map(line => /*#__PURE__*/_jsx(Typography, {
+            component: "p",
+            variant: "body1",
+            align: "center",
+            children: line
+          }, line))
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "plan-actions",
+        children: plan.showButton && /*#__PURE__*/_jsx(Button, {
+          fullWidth: true,
+          variant: "outlined",
+          color: "primary",
+          component: "a",
+          href: plan.buttonLink,
+          children: plan.buttonText
+        })
+      })]
+    })]
+  });
+}
+export default PricingPlan;
+PricingPlan.propTypes = {
+  plan: PropTypes.object.isRequired
+};
+const PlanCard = styled(Card)`
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  @media (max-width: 320px) {
+    margin-top: 20px;
+  }
+
+  && {
+    ${props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)'}
+  }
+
+  .card-header {
+    height: 80px;
+    background-color: #f1fbfb;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      text-align: center;
+      color: #404040;
+      margin: 0;
+    }
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .plan-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .plan-pricing {
+      display: flex;
+      justify-content: center;
+      align-items: baseline;
+      margin-bottom: 12px;
+      color: #4e6af6;
+      text-align: center;
+    }
+
+    .price-number {
+      font-size: 30px;
+      font-weight: 600;
+      color: #4e6af6;
+    }
+
+    .plan-services strong {
+      color: #4e6af6;
+      font-weight: 500;
+    }
+  }
+
+  .plan-actions {
+    width: 100%;
+  }
+`;