@arcblock/ux 2.9.90 → 2.10.0

package/lib/PageScroller/index.js

@@ -1,23 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _isNil = _interopRequireDefault(require("lodash/isNil"));
-var _isNull = _interopRequireDefault(require("lodash/isNull"));
-var _usePrevValue = _interopRequireDefault(require("./usePrevValue"));
-var _deprecate = require("../Util/deprecate");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/* 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'
@@ -38,45 +27,44 @@ let isMounted = false;
 let isBodyScrollEnabled = true;
 let isTransitionAfterComponentsToRenderChanged = false;
 const containers = [];
-function PageScroller(_ref) {
-  let {
-    animationTimer,
-    blockScrollDown,
-    blockScrollUp,
-    children,
-    height,
-    width,
-    customPageNumber,
-    onScrollUnavailable,
-    onChange,
-    renderAllPagesOnFirstRender,
-    transitionTimingFunction
-  } = _ref;
-  const [componentIndex, setComponentIndex] = (0, _react.useState)(DEFAULT_COMPONENT_INDEX);
-  const [componentsToRenderLength, setComponentsToRenderLength] = (0, _react.useState)(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
-  const prevComponentIndex = (0, _usePrevValue.default)(componentIndex);
-  const pageContainer = (0, _react.useRef)(null);
-  const addNextComponent = (0, _react.useCallback)(componentsToRenderOnMountLength => {
+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 (!(0, _isNil.default)(componentsToRenderOnMountLength)) {
+    if (!isNil(componentsToRenderOnMountLength)) {
       tempComponentsToRenderLength = componentsToRenderOnMountLength;
     }
     tempComponentsToRenderLength = Math.max(tempComponentsToRenderLength, componentsToRenderLength);
     if (tempComponentsToRenderLength <= componentIndex + 1) {
-      if (!(0, _isNil.default)(children[componentIndex + 1])) {
+      if (!isNil(children[componentIndex + 1])) {
         tempComponentsToRenderLength++;
       }
     }
     setComponentsToRenderLength(tempComponentsToRenderLength);
   }, [children, componentIndex, componentsToRenderLength]);
-  const checkRenderOnMount = (0, _react.useCallback)(() => {
+  const checkRenderOnMount = useCallback(() => {
     if (renderAllPagesOnFirstRender) {
-      setComponentsToRenderLength(_react.Children.count(children));
-    } else if (!(0, _isNil.default)(children[DEFAULT_COMPONENT_INDEX + 1])) {
+      setComponentsToRenderLength(Children.count(children));
+    } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
       addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
     }
   }, [addNextComponent, children, renderAllPagesOnFirstRender]);
-  const disableScroll = (0, _react.useCallback)(() => {
+  const disableScroll = useCallback(() => {
     if (isBodyScrollEnabled) {
       isBodyScrollEnabled = false;
       window.scrollTo({
@@ -88,35 +76,37 @@ function PageScroller(_ref) {
       document.documentElement.classList.add(DISABLED_CLASS_NAME);
     }
   }, []);
-  const enableDocumentScroll = (0, _react.useCallback)(() => {
+  const enableDocumentScroll = useCallback(() => {
     if (!isBodyScrollEnabled) {
       isBodyScrollEnabled = true;
       document.body.classList.remove(DISABLED_CLASS_NAME);
       document.documentElement.classList.remove(DISABLED_CLASS_NAME);
     }
   }, []);
-  const setRenderComponents = (0, _react.useCallback)(() => {
+  const setRenderComponents = useCallback(() => {
     const newComponentsToRender = [];
     let i = 0;
-    while (i < componentsToRenderLength && !(0, _isNil.default)(children[i])) {
+    while (i < componentsToRenderLength && !isNil(children[i])) {
       containers[i] = true;
-      newComponentsToRender.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      newComponentsToRender.push( /*#__PURE__*/_jsx("div", {
         style: {
           height: '100%',
           width: '100%'
         },
-        children: /*#__PURE__*/(0, _react.cloneElement)(children[i], _objectSpread({}, children[i].props))
+        children: /*#__PURE__*/cloneElement(children[i], {
+          ...children[i].props
+        })
       }, i));
       i++;
     }
     return newComponentsToRender;
   }, [children, componentsToRenderLength]);
-  const scrollWindowDown = (0, _react.useCallback)(() => {
+  const scrollWindowDown = useCallback(() => {
     if (!isScrolling && !blockScrollDown) {
-      if (!(0, _isNil.default)(containers[componentIndex + 1])) {
+      if (!isNil(containers[componentIndex + 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = "translate3d(0, ".concat((componentIndex + 1) * -100, "%, 0)"); // prettier-ignore
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
 
         setTimeout(() => {
           if (isMounted) {
@@ -131,12 +121,12 @@ function PageScroller(_ref) {
       }
     }
   }, [animationTimer, blockScrollDown, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-  const scrollWindowUp = (0, _react.useCallback)(() => {
+  const scrollWindowUp = useCallback(() => {
     if (!isScrolling && !blockScrollUp) {
-      if (!(0, _isNil.default)(containers[componentIndex - 1])) {
+      if (!isNil(containers[componentIndex - 1])) {
         disableScroll();
         isScrolling = true;
-        pageContainer.current.style.transform = "translate3d(0, ".concat((componentIndex - 1) * -100, "%, 0)"); // prettier-ignore
+        pageContainer.current.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
 
         setTimeout(() => {
           if (isMounted) {
@@ -151,8 +141,8 @@ function PageScroller(_ref) {
       }
     }
   }, [animationTimer, blockScrollUp, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-  const touchMove = (0, _react.useCallback)(event => {
-    if (!(0, _isNull.default)(previousTouchMove)) {
+  const touchMove = useCallback(event => {
+    if (!isNull(previousTouchMove)) {
       if (event.touches[0].clientY > previousTouchMove) {
         scrollWindowUp();
       } else {
@@ -162,34 +152,33 @@ function PageScroller(_ref) {
       previousTouchMove = event.touches[0].clientY;
     }
   }, [scrollWindowDown, scrollWindowUp]);
-  const wheelScroll = (0, _react.useCallback)(event => {
+  const wheelScroll = useCallback(event => {
     if (event.deltaY < 0) {
       scrollWindowUp();
     } else {
       scrollWindowDown();
     }
   }, [scrollWindowDown, scrollWindowUp]);
-  const keyPress = (0, _react.useCallback)(event => {
-    if ((0, _isEqual.default)(event.keyCode, KEY_UP)) {
+  const keyPress = useCallback(event => {
+    if (isEqual(event.keyCode, KEY_UP)) {
       scrollWindowUp();
     }
-    if ((0, _isEqual.default)(event.keyCode, KEY_DOWN)) {
+    if (isEqual(event.keyCode, KEY_DOWN)) {
       scrollWindowDown();
     }
   }, [scrollWindowDown, scrollWindowUp]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     pageContainer.current.addEventListener(Events.TOUCHMOVE, touchMove);
     pageContainer.current.addEventListener(Events.KEYDOWN, keyPress);
     return () => {
-      var _pageContainer$curren;
-      if ((_pageContainer$curren = pageContainer.current) !== null && _pageContainer$curren !== void 0 && _pageContainer$curren.removeEventListener) {
+      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]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     isMounted = true;
     checkRenderOnMount();
     return () => {
@@ -197,37 +186,37 @@ function PageScroller(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     isScrolling = false;
     previousTouchMove = null;
     if (componentIndex > prevComponentIndex) {
       addNextComponent();
     }
   }, [addNextComponent, componentIndex, prevComponentIndex]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (onChange) {
       onChange(componentIndex);
     }
   }, [onChange, componentIndex]);
-  (0, _react.useEffect)(() => {
-    if (!(0, _isNil.default)(customPageNumber) && !(0, _isEqual.default)(customPageNumber, componentIndex)) {
+  useEffect(() => {
+    if (!isNil(customPageNumber) && !isEqual(customPageNumber, componentIndex)) {
       let newComponentsToRenderLength = componentsToRenderLength;
-      if (!(0, _isEqual.default)(componentIndex, customPageNumber)) {
-        if (!(0, _isNil.default)(containers[customPageNumber]) && !isScrolling) {
+      if (!isEqual(componentIndex, customPageNumber)) {
+        if (!isNil(containers[customPageNumber]) && !isScrolling) {
           isScrolling = true;
-          pageContainer.current.style.transform = "translate3d(0, ".concat(customPageNumber * -100, "%, 0)");
-          if ((0, _isNil.default)(containers[customPageNumber]) && !(0, _isNil.default)(children[customPageNumber])) {
+          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 && !(0, _isNil.default)(children[customPageNumber])) {
+        } else if (!isScrolling && !isNil(children[customPageNumber])) {
           for (let i = componentsToRenderLength; i <= customPageNumber; i++) {
             newComponentsToRenderLength++;
           }
-          if (!(0, _isNil.default)(children[customPageNumber])) {
+          if (!isNil(children[customPageNumber])) {
             newComponentsToRenderLength++;
           }
           isScrolling = true;
@@ -238,28 +227,28 @@ function PageScroller(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [customPageNumber]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (isTransitionAfterComponentsToRenderChanged) {
       isTransitionAfterComponentsToRenderChanged = false;
-      pageContainer.current.style.transform = "translate3d(0, ".concat(customPageNumber * -100, "%, 0)");
+      pageContainer.current.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
       setTimeout(() => {
         setComponentIndex(customPageNumber);
       }, animationTimer + ANIMATION_TIMER_BUFFER);
     }
   }, [animationTimer, componentsToRenderLength, customPageNumber]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_jsx("div", {
     style: {
       height,
       width,
       overflow: 'hidden'
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/_jsx("div", {
       ref: pageContainer,
       onWheel: wheelScroll,
       style: {
         height: '100%',
         width: '100%',
-        transition: "transform ".concat(animationTimer, "ms ").concat(transitionTimingFunction),
+        transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
         outline: 'none'
       },
       tabIndex: 0,
@@ -268,17 +257,17 @@ function PageScroller(_ref) {
   });
 }
 PageScroller.propTypes = {
-  animationTimer: _propTypes.default.number,
-  blockScrollDown: _propTypes.default.bool,
-  blockScrollUp: _propTypes.default.bool,
-  children: _propTypes.default.any.isRequired,
-  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  customPageNumber: _propTypes.default.number,
-  onScrollUnavailable: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  renderAllPagesOnFirstRender: _propTypes.default.bool,
-  transitionTimingFunction: _propTypes.default.string
+  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,
@@ -292,6 +281,6 @@ PageScroller.defaultProps = {
   renderAllPagesOnFirstRender: false,
   customPageNumber: undefined
 };
-var _default = exports.default = (0, _deprecate.withDeprecated)(PageScroller, {
+export default withDeprecated(PageScroller, {
   name: 'PageScroller'
 });

package/lib/PageScroller/story/FifthComponent.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FifthComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-function FifthComponent() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FifthComponent() {
+  return /*#__PURE__*/_jsx("div", {
     className: "component fifth-component",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    children: /*#__PURE__*/_jsx("h2", {
       children: "Fifth Component"
     })
   });

package/lib/PageScroller/story/FirstComponent.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FirstComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-function FirstComponent() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FirstComponent() {
+  return /*#__PURE__*/_jsx("div", {
     className: "component first-component",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    children: /*#__PURE__*/_jsx("h2", {
       children: "First Component"
     })
   });

package/lib/PageScroller/story/FourthComponent.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FourthComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-function FourthComponent() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FourthComponent() {
+  return /*#__PURE__*/_jsx("div", {
     className: "component fourth-component",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    children: /*#__PURE__*/_jsx("h2", {
       style: {
         margin: 'auto'
       },

package/lib/PageScroller/story/FullPage.js

@@ -1,27 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FullPage;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../../Button"));
-var _ = _interopRequireDefault(require(".."));
-var _FirstComponent = _interopRequireDefault(require("./FirstComponent"));
-var _SecondComponent = _interopRequireDefault(require("./SecondComponent"));
-var _ThirdComponent = _interopRequireDefault(require("./ThirdComponent"));
-var _FourthComponent = _interopRequireDefault(require("./FourthComponent"));
-var _FifthComponent = _interopRequireDefault(require("./FifthComponent"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable jsx-a11y/control-has-associated-label */
-
-function FullPage() {
-  const [current, setCurrent] = (0, _react.useState)(0);
+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__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    pageNumbers.push( /*#__PURE__*/_jsx(Button, {
       variant: i === current ? 'contained' : 'outlined',
       size: "small",
       onClick: () => setCurrent(i),
@@ -30,23 +23,23 @@ function FullPage() {
     }, i));
   }
   const progress = current / (5 - 1) * 100;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "demo-page-full",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+    children: [/*#__PURE__*/_jsxs(PageScroller, {
       onChange: i => setCurrent(i),
       customPageNumber: current,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FirstComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThirdComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FourthComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FifthComponent.default, {})]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      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: ".concat(progress),
+      "aria-valuetext": `Page Scroller Progress: ${progress}`,
       style: {
-        width: "".concat(progress, "%")
+        width: `${progress}%`
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "pagination-additional-class",
       children: pageNumbers
     })]

package/lib/PageScroller/story/PageContain.js

@@ -1,27 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = FullPage;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../../Button"));
-var _ = _interopRequireDefault(require(".."));
-var _FirstComponent = _interopRequireDefault(require("./FirstComponent"));
-var _SecondComponent = _interopRequireDefault(require("./SecondComponent"));
-var _ThirdComponent = _interopRequireDefault(require("./ThirdComponent"));
-var _FourthComponent = _interopRequireDefault(require("./FourthComponent"));
-var _FifthComponent = _interopRequireDefault(require("./FifthComponent"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable jsx-a11y/control-has-associated-label */
-
-function FullPage() {
-  const [current, setCurrent] = (0, _react.useState)(0);
+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__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    pageNumbers.push( /*#__PURE__*/_jsx(Button, {
       variant: i === current ? 'contained' : 'outlined',
       size: "small",
       onClick: () => setCurrent(i),
@@ -30,35 +23,35 @@ function FullPage() {
     }, i));
   }
   const progress = current / (5 - 1) * 100;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "demo-page-contain",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+    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__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       style: {
         width: 360,
         height: 640,
         position: 'relative'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
+      children: [/*#__PURE__*/_jsxs(PageScroller, {
         onChange: i => setCurrent(i),
         width: 360,
         height: 640,
         customPageNumber: current,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FirstComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThirdComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FourthComponent.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FifthComponent.default, {})]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        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: ".concat(progress),
+        "aria-valuetext": `Page Scroller Progress: ${progress}`,
         style: {
-          width: "".concat(progress, "%")
+          width: `${progress}%`
         }
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: "pagination-additional-class",
       children: pageNumbers
     })]

package/lib/PageScroller/story/SecondComponent.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SecondComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-function SecondComponent() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SecondComponent() {
+  return /*#__PURE__*/_jsx("div", {
     className: "component second-component",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    children: /*#__PURE__*/_jsx("h2", {
       children: "Second Component"
     })
   });

package/lib/PageScroller/story/ThirdComponent.js

@@ -1,14 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ThirdComponent;
-var _jsxRuntime = require("react/jsx-runtime");
-function ThirdComponent() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThirdComponent() {
+  return /*#__PURE__*/_jsx("div", {
     className: "component third-component",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+    children: /*#__PURE__*/_jsx("h2", {
       children: "Third Component"
     })
   });

package/lib/PageScroller/usePrevValue.js

@@ -1,15 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = usePrevious;
-var _react = require("react");
 // eslint-disable-next-line no-unused-vars
-
-function usePrevious(value) {
-  const ref = (0, _react.useRef)({});
-  (0, _react.useEffect)(() => {
+import { useEffect, useRef } from 'react';
+export default function usePrevious(value) {
+  const ref = useRef({});
+  useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;

package/lib/Passport/index.js

@@ -1,9 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _passport = _interopRequireDefault(require("./passport"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = _passport.default;
+import PassportItem from './passport';
+export default PassportItem;