@nutui/nutui-react 2.5.2 → 2.6.0

package/dist/esm/Swiper.js

@@ -1,333 +1,273 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useRef, useState, useMemo, useEffect } from "react";
+import React__default, { useRef, useState, useEffect, useMemo } from "react";
+import { useDrag } from "@use-gesture/react";
+import { animated, useSpring } from "@react-spring/web";
 import classNames from "classnames";
-import { D as DataContext } from "./context4.js";
-import { g as getRect } from "./use-client-rect.js";
-import { I as Indicator } from "./indicator2.js";
-import { u as useTouch } from "./use-touch.js";
-import { r as requestAniFrame } from "./raf.js";
-import { useRtl } from "./ConfigProvider.js";
+import Indicator__default from "./Indicator.js";
 import SwiperItem__default from "./SwiperItem.js";
+const getRefValue = (ref) => {
+  return ref.current;
+};
+const useRefState = (param) => {
+  const ref = useRef(param);
+  const [, setState] = useState(param);
+  const updateState = (p) => {
+    ref.current = p;
+    setState(p);
+  };
+  return [ref, updateState];
+};
+const getPerSlidePosition$1 = (index, position, loop, count) => {
+  const currentPosition = index * 100 + position;
+  if (loop) {
+    const cycle = count * 100;
+    const shift = cycle / 2;
+    const nextPosition = (currentPosition + shift) % cycle;
+    const shiftedPosition = (nextPosition < 0 ? nextPosition + cycle : nextPosition) - shift;
+    return `${shiftedPosition}%`;
+  }
+  return `${currentPosition}%`;
+};
+const defaultEffect = (args) => {
+  return React__default.Children.map(args.children, (child, index) => {
+    const { isVertical, getSpringsAxis, loop, count } = args;
+    return React__default.createElement(animated.div, { className: "nut-swiper-slide", style: {
+      [isVertical ? "y" : "x"]: getSpringsAxis().to((position) => {
+        return getPerSlidePosition$1(index, position, loop, count);
+      }),
+      [isVertical ? "top" : "left"]: `-${index * 100}%`
+    } }, child);
+  });
+};
+const getPerSlidePosition = (index, position, loop, count) => {
+  const currentPosition = index * 100 + position;
+  if (loop) {
+    const cycle = count * 100;
+    const shift = cycle / 2;
+    const nextPosition = (currentPosition + shift) % cycle;
+    const shiftedPosition = (nextPosition < 0 ? nextPosition + cycle : nextPosition) - shift;
+    return `${shiftedPosition}%`;
+  }
+  return `${currentPosition}%`;
+};
+const focusEffect = (args) => {
+  return React__default.Children.map(args.children, (child, index) => {
+    const { isVertical, springs, transforms, loop, count, swiperDirection, dragging, current, effect } = args;
+    return React__default.createElement(animated.div, { className: "nut-swiper-slide", style: {
+      [isVertical ? "y" : "x"]: springs[isVertical ? "y" : "x"].to((position) => {
+        return getPerSlidePosition(index, position, loop, count);
+      }),
+      [isVertical ? "top" : "left"]: `-${index * 100}%`,
+      scale: springs.s.to((ss) => {
+        const scales = getRefValue(transforms);
+        if (!scales)
+          return 1;
+        const scale = scales[index];
+        const currentRefValue = getRefValue(current);
+        if (dragging === false)
+          ss = 0;
+        const ps = ss * scale;
+        if (index === currentRefValue) {
+          return Math.max(scale - ps, effect.scale);
+        }
+        if (index === currentRefValue + swiperDirection.current) {
+          return Math.min(scale + ps, 1);
+        }
+        return scale;
+      })
+    } }, child);
+  });
+};
+const useList = (effect, count, current) => {
+  const [transforms, setTransforms] = useRefState([]);
+  useEffect(() => {
+    setTransforms(Array.from({ length: count }).fill(1).map((scale, index) => index !== getRefValue(current) ? scale * (effect ? effect.scale : 1) : scale));
+  }, [count]);
+  return [transforms, setTransforms];
+};
+const updateTransform = (transforms, setTransforms, effect, page) => {
+  setTransforms(getRefValue(transforms).map((s, index) => (
+    // eslint-disable-next-line no-nested-ternary
+    page === index ? 1 : effect ? effect.scale : 1
+  )));
+};
 const defaultProps = {
-  duration: 500,
-  defaultValue: 0,
-  autoPlay: 0,
   direction: "horizontal",
   indicator: false,
   loop: false,
+  duration: 3e3,
+  autoPlay: false,
+  defaultValue: 0,
   touchable: true,
-  preventDefault: true,
-  stopPropagation: true,
-  center: false,
-  className: ""
+  effect: void 0
 };
 const Swiper = React__default.forwardRef((props, ref) => {
-  const rtl = useRtl();
-  const mergedProps = Object.assign(Object.assign({}, defaultProps), props);
-  const { children, direction, className, onChange, defaultValue, indicator, touchable, preventDefault, stopPropagation, autoPlay, center } = mergedProps, rest = __rest(mergedProps, ["children", "direction", "className", "onChange", "defaultValue", "indicator", "touchable", "preventDefault", "stopPropagation", "autoPlay", "center"]);
-  const container = useRef(null);
-  const innerRef = useRef(null);
-  const swiperRef = useRef({
-    moving: false,
-    autoplayTimer: null,
-    width: 0,
-    height: 0,
-    offset: 0,
-    size: 0
-  });
-  const touch = useTouch();
+  const classPrefix = "nut-swiper";
+  const { children, direction, indicator, loop, effect, autoPlay, touchable, defaultValue, duration, style, className } = Object.assign(Object.assign({}, defaultProps), props);
   const isVertical = direction === "vertical";
-  const [rect, setRect] = useState(null);
-  let [active, setActive] = useState(0);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const [offset, setOffset] = useState(0);
-  const [childOffset, setChildOffset] = useState([]);
-  const [ready, setReady] = useState(false);
-  let size = isVertical ? height : width;
-  const { swiperItems, swiperItemCount } = useMemo(() => {
-    let count = 0;
-    const swiperItems2 = React__default.Children.map(props.children, (child) => {
-      if (!React__default.isValidElement(child))
-        return null;
-      count++;
-      return child;
+  const count = useMemo(() => {
+    let c = 0;
+    React__default.Children.map(children, (child, index) => {
+      c += 1;
     });
-    return {
-      swiperItems: swiperItems2,
-      swiperItemCount: count
-    };
-  }, [props.children]);
-  let trackSize = swiperItemCount * Number(size);
-  const parent = {
-    propSwiper: mergedProps,
-    size
-  };
-  const minOffset = (() => {
-    if (rect) {
-      const base = isVertical ? rect.height : rect.width;
-      return base - Number(size) * swiperItemCount;
+    return c;
+  }, [children]);
+  const getSlideSize = () => {
+    if (props.slideSize)
+      return props.slideSize;
+    if (stageRef.current) {
+      if (isVertical)
+        return stageRef.current.offsetHeight;
+      return stageRef.current.offsetWidth;
     }
     return 0;
-  })();
-  const stopAutoPlay = () => {
-    clearTimeout(swiperRef.current.autoplayTimer);
-    swiperRef.current.autoplayTimer = null;
   };
-  const startPlay = () => {
-    if (Number(mergedProps.autoPlay) <= 0 || swiperItemCount <= 1)
-      return;
-    stopAutoPlay();
-    swiperRef.current.autoplayTimer = setTimeout(() => {
-      next();
-      startPlay();
-    }, Number(mergedProps.autoPlay));
+  const getSwiperSize = () => {
+    if (swiperRef.current) {
+      if (isVertical)
+        return swiperRef.current.offsetHeight;
+      return swiperRef.current.offsetWidth;
+    }
+    return 0;
   };
-  const resetPosition = () => {
-    swiperRef.current.moving = true;
-    if (active <= -1) {
-      move({ pace: swiperItemCount });
+  const bound = (v, min, max) => {
+    if (min !== void 0) {
+      v = Math.max(v, min);
     }
-    if (active >= swiperItemCount) {
-      move({ pace: -swiperItemCount });
+    if (max !== void 0) {
+      v = Math.min(v, max);
     }
+    return v;
   };
-  const prev = () => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame(() => {
-      requestAniFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: -1,
-          isEmit: true
-        });
-      });
+  const timeoutRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [current, setCurrent] = useRefState(defaultValue);
+  const stageRef = useRef(null);
+  const swiperRef = useRef(null);
+  const [springs, api] = useSpring(() => ({
+    x: !isVertical ? current.current * 100 * -1 : 0,
+    y: isVertical ? current.current * 100 * -1 : 0,
+    s: 0,
+    reset: () => {
+    },
+    config: { tension: 200, friction: 30 }
+  }));
+  useEffect(() => {
+    api.start({
+      [isVertical ? "y" : "x"]: boundIndex(current.current) * -1 * 100,
+      immediate: true
     });
+  }, [swiperRef.current]);
+  const swiperDirection = useRef(1);
+  const [transforms, setTransforms] = useList(effect, count, current);
+  const runTimeSwiper = () => {
+    const durationNumber = typeof duration === "string" ? parseInt(duration) : duration;
+    const d = typeof autoPlay === "number" ? autoPlay : durationNumber;
+    timeoutRef.current = window.setTimeout(() => {
+      next();
+      runTimeSwiper();
+    }, d);
   };
-  const next = () => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame(() => {
-      requestAniFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: 1,
-          isEmit: true
-        });
-      });
+  useEffect(() => {
+    if (!autoPlay || dragging)
+      return;
+    runTimeSwiper();
+    return () => {
+      if (timeoutRef.current)
+        window.clearTimeout(timeoutRef.current);
+    };
+  }, [autoPlay, duration, dragging, count]);
+  function boundIndex(current2) {
+    const min = 0;
+    const max = count - 1;
+    if (current2 === max && !loop && props.slideSize) {
+      const slideSize = props.slideSize;
+      const swiperSize = getSwiperSize();
+      const ratio = (swiperSize - slideSize) / slideSize;
+      return bound(current2, min, max - ratio);
+    }
+    return current2;
+  }
+  const to = (index, immediate = false) => {
+    var _a;
+    let targetIndex = bound(index, 0, count - 1);
+    if (loop) {
+      const cycleIndex = index % count;
+      targetIndex = cycleIndex < 0 ? cycleIndex + count : cycleIndex;
+    }
+    setCurrent(targetIndex);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, targetIndex);
+    if (effect) {
+      updateTransform(transforms, setTransforms, effect, targetIndex);
+    }
+    api.start({
+      // 这里需要统一成百分比
+      [isVertical ? "y" : "x"]: (loop ? -index : boundIndex(targetIndex) * -1) * 100,
+      s: 0,
+      immediate
     });
   };
-  const to = (index) => {
-    resetPosition();
-    touch.reset();
-    requestAniFrame(() => {
-      requestAniFrame(() => {
-        swiperRef.current.moving = false;
-        let targetIndex;
-        if (props.loop && swiperItemCount === index) {
-          targetIndex = active === 0 ? 0 : index;
-        } else {
-          targetIndex = index % swiperItemCount;
-        }
-        move({
-          pace: targetIndex - active,
-          isEmit: true
-        });
-      });
-    });
+  const getSpringsAxis = () => {
+    return springs[isVertical ? "y" : "x"];
   };
-  const resize = () => {
-    init(active);
+  const next = () => {
+    to(Math.round(-getSpringsAxis().get() / 100) + 1);
   };
-  const move = ({ pace = 0, offset: offset2 = 0, isEmit = false, movingStatus = false }) => {
-    var _a;
-    if (swiperItemCount <= 1)
-      return;
-    const targetActive = getActive(pace);
-    const targetOffset = getOffset(targetActive, offset2);
-    if (props.loop) {
-      if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-        const rightBound = targetOffset < minOffset;
-        childOffset[0] = rightBound ? trackSize : 0;
-      }
-      if (Array.isArray(children) && children[swiperItemCount - 1] && targetOffset !== 0) {
-        const leftBound = targetOffset > 0;
-        childOffset[swiperItemCount - 1] = leftBound ? -trackSize : 0;
-      }
-      setChildOffset(childOffset);
-    }
-    if (isEmit && active !== targetActive) {
-      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (targetActive + swiperItemCount) % swiperItemCount);
-    }
-    active = targetActive;
-    setActive(targetActive);
-    setOffset(targetOffset);
-    getStyle(targetOffset);
+  const prev = () => {
+    to(Math.round(-getSpringsAxis().get() / 100) - 1);
   };
   React__default.useImperativeHandle(ref, () => ({
     to,
     next,
-    prev,
-    resize
+    prev
   }));
-  const getActive = (pace) => {
-    if (pace) {
-      const _active = active + pace;
-      if (props.loop) {
-        return range(_active, -1, swiperItemCount);
-      }
-      return range(_active, 0, swiperItemCount - 1);
-    }
-    return active;
-  };
-  const getOffset = (active2, offset2 = 0) => {
-    let currentPosition = active2 * Number(size);
-    if (!props.loop) {
-      currentPosition = Math.min(currentPosition, -minOffset);
-    }
-    let targetOffset = offset2 - currentPosition;
-    if (!props.loop) {
-      targetOffset = range(targetOffset, minOffset, 0);
-    }
-    return targetOffset;
-  };
-  const range = (num, min, max) => {
-    return Math.min(Math.max(num, min), max);
-  };
-  const classPrefix = "nut-swiper";
-  const contentClass = classNames({
-    [`${classPrefix}-inner`]: true,
-    [`${classPrefix}-vertical`]: isVertical
-  });
-  const getStyle = (moveOffset = offset) => {
-    const target = innerRef.current;
-    if (!target)
-      return;
-    let _offset = 0;
-    if (!center) {
-      _offset = moveOffset;
+  const bind = useDrag((state) => {
+    const axis = Number(isVertical);
+    const slideSize = getSlideSize();
+    const offset = state.offset[axis];
+    setDragging(!!state.dragging);
+    const distance = state.distance[axis];
+    swiperDirection.current = state.direction[axis];
+    if (state.last) {
+      const swipeDirection = state.direction[axis];
+      const velocity = state.velocity[axis];
+      const minIndex = Math.floor(offset / slideSize);
+      const maxIndex = minIndex + 1;
+      const index = Math.round((offset + velocity * 2e3 * swipeDirection) / slideSize);
+      to(bound(index, minIndex, maxIndex));
     } else {
-      const _size = isVertical ? height : width;
-      const val = isVertical ? rect.height - _size : rect.width - _size;
-      _offset = moveOffset + (active === swiperItemCount - 1 && !props.loop ? -val / 2 : val / 2);
-    }
-    target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
-    target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
-    target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-    target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
-  };
-  const onTouchStart = (e) => {
-    if (!props.touchable)
-      return;
-    touch.start(e);
-    stopAutoPlay();
-    resetPosition();
-  };
-  const onTouchMove = (e) => {
-    if (props.preventDefault)
-      e.preventDefault();
-    if (props.stopPropagation)
-      e.stopPropagation();
-    if (props.touchable && swiperRef.current.moving) {
-      touch.move(e);
-      if (touch.direction.current === props.direction) {
-        move({
-          offset: touch.delta.current
-        });
-      }
-    }
-  };
-  const onTouchEnd = (e) => {
-    if (!props.touchable || !swiperRef.current.moving)
-      return;
-    const speed = touch.delta.current / (Date.now() - touch.touchTime.current);
-    const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta.current) > Number((size / 2).toFixed(2));
-    swiperRef.current.moving = false;
-    if (isShouldMove && touch.direction.current === props.direction) {
-      let pace = 0;
-      const offset2 = touch.isVertical() ? touch.offsetY : touch.offsetX;
-      if (props.loop) {
-        if (offset2.current > 0) {
-          pace = touch.delta.current > 0 ? -1 : 1;
-        }
-      } else {
-        pace = -Math[touch.delta.current > 0 ? "ceil" : "floor"](touch.delta.current / size);
-      }
-      move({
-        pace,
-        isEmit: true
+      api.start({
+        [isVertical ? "y" : "x"]: -(offset / slideSize * 100),
+        s: distance / slideSize,
+        immediate: true
       });
-    } else if (touch.delta.current) {
-      move({ pace: 0 });
-    } else {
-      getStyle();
-    }
-    startPlay();
-  };
-  const getItemStyle = (index) => {
-    const style = {};
-    if (size) {
-      style[direction === "horizontal" ? "width" : "height"] = `${size}px`;
-    }
-    const offset2 = childOffset[index];
-    if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
-    }
-    return style;
-  };
-  const init = (index) => {
-    const rect2 = getRect(container === null || container === void 0 ? void 0 : container.current);
-    const currentIndex = Math.max(Math.min(swiperItemCount - 1, index || Number(mergedProps.defaultValue)), 0);
-    const width2 = Number(mergedProps.width) || rect2.width;
-    const height2 = Number(mergedProps.height) || rect2.height;
-    size = isVertical ? height2 : width2;
-    trackSize = swiperItemCount * Number(size);
-    const targetOffset = getOffset(currentIndex);
-    swiperRef.current.moving = true;
-    if (ready) {
-      swiperRef.current.moving = false;
     }
-    setRect(rect2);
-    setActive(currentIndex);
-    setWidth(width2);
-    setHeight(height2);
-    setOffset(targetOffset);
-    setReady(true);
-  };
-  useEffect(() => {
-    if (ready) {
-      getStyle();
-    }
-  }, [isVertical, width, height, offset, ready]);
-  useEffect(() => {
-    if (ready) {
-      stopAutoPlay();
-      startPlay();
+  }, {
+    enabled: touchable,
+    transform: ([x, y]) => [-x, -y],
+    from: () => {
+      const slideSize = getSlideSize();
+      const x = springs.x.get() / 100 * slideSize;
+      const y = springs.y.get() / 100 * slideSize;
+      return [-x, -y];
+    },
+    triggerAllEvents: true,
+    bounds: () => {
+      if (loop)
+        return {};
+      const slideSize = getSlideSize();
+      getSwiperSize();
+      if (isVertical) {
+        return { top: 0, bottom: (count - 1) * slideSize };
+      }
+      return { left: 0, right: (count - 1) * slideSize };
+    },
+    preventDefault: true,
+    rubberband: true,
+    axis: isVertical ? "y" : "x",
+    pointer: {
+      touch: true
     }
-    return () => setReady(false);
-  }, [ready]);
-  useEffect(() => {
-    const events = [
-      { name: "touchstart", e: onTouchStart },
-      { name: "touchmove", e: onTouchMove },
-      { name: "touchend", e: onTouchEnd }
-    ];
-    events.forEach((item) => {
-      var _a;
-      (_a = container.current) === null || _a === void 0 ? void 0 : _a.addEventListener(item.name, item.e, false);
-    });
-    return () => {
-      events.forEach((item) => {
-        var _a;
-        (_a = container.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(item.name, item.e, false);
-      });
-    };
   });
-  useEffect(() => init(), [props.defaultValue]);
-  useEffect(() => {
-    return () => stopAutoPlay();
-  }, []);
   const renderIndicator = () => {
     if (React__default.isValidElement(indicator))
       return indicator;
@@ -337,20 +277,47 @@ const Swiper = React__default.forwardRef((props, ref) => {
       "div",
       { className: classNames({
         [`${classPrefix}-indicator`]: true,
-        [`${classPrefix}-indicator-vertical`]: isVertical
+        [`${classPrefix}-indicator-vertical`]: isVertical,
+        [`${classPrefix}-indicator-horizontal`]: !isVertical
       }) },
-      React__default.createElement(Indicator, { current: (active + swiperItemCount) % swiperItemCount, total: swiperItems === null || swiperItems === void 0 ? void 0 : swiperItems.length, direction })
+      React__default.createElement(Indicator__default, { current: getRefValue(current), total: count, direction })
     );
   };
+  const renderEffect = () => {
+    if (!effect)
+      return defaultEffect({
+        children,
+        getSpringsAxis,
+        loop,
+        count,
+        isVertical
+      });
+    if (effect && effect.name === "focus") {
+      return focusEffect({
+        children,
+        springs,
+        loop,
+        count,
+        isVertical,
+        effect,
+        current,
+        swiperDirection,
+        dragging,
+        transforms
+      });
+    }
+  };
+  const renderSlides = () => {
+    return React__default.createElement("div", { ref: stageRef, className: classNames("nut-swiper-inner", {
+      "nut-swiper-inner-vertical": isVertical,
+      "nut-swiper-inner-horizontal": !isVertical
+    }), style: Object.assign({}, props.slideSize ? { [isVertical ? "height" : "width"]: `${props.slideSize}px` } : {}) }, renderEffect());
+  };
   return React__default.createElement(
-    DataContext.Provider,
-    { value: parent },
-    React__default.createElement(
-      "div",
-      Object.assign({ className: classNames(classPrefix, className), ref: container }, rest),
-      React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(swiperItems, (child, index) => React__default.createElement("div", { className: `${classPrefix}-item-wrapper`, style: getItemStyle(index), key: index }, child))),
-      renderIndicator()
-    )
+    "div",
+    Object.assign({ className: classNames("nut-swiper", className), style, ref: swiperRef }, bind()),
+    renderSlides(),
+    renderIndicator()
   );
 });
 Swiper.defaultProps = defaultProps;

package/dist/esm/SwiperItem.js

@@ -1,26 +1,14 @@
-import React__default, { useContext } from "react";
+import React__default from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./context4.js";
 const defaultProps = {
-  direction: "horizontal"
+  onClick: (e) => void 0
 };
-const SwiperItem = React__default.forwardRef((props, ref) => {
+const SwiperItem = (props) => {
   const classPrefix = "nut-swiper-item";
-  const _props = Object.assign(Object.assign({}, defaultProps), props);
-  const { className, style, children, direction, size } = _props;
-  const parent = useContext(DataContext);
+  const { className, style, children } = Object.assign(Object.assign({}, defaultProps), props);
   const classes = classNames(classPrefix, className);
-  const getStyle = () => {
-    const style2 = {};
-    const _direction = (parent === null || parent === void 0 ? void 0 : parent.propSwiper.direction) || direction;
-    const _size = (parent === null || parent === void 0 ? void 0 : parent.size) || size;
-    if (_size) {
-      style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
-    }
-    return style2;
-  };
-  return React__default.createElement("div", { className: classes, style: Object.assign(Object.assign({}, style), getStyle()) }, children);
-});
+  return React__default.createElement("div", { className: classes, onClick: props.onClick, style }, children);
+};
 SwiperItem.defaultProps = defaultProps;
 SwiperItem.displayName = "NutSwiperItem";
 export {

package/dist/esm/context4.js

@@ -1,5 +1,19 @@
 import { createContext } from "react";
-const DataContext = createContext({});
+const handleClick = (e) => {
+  e.stopPropagation();
+  const isIcon = e.target.className.includes("arrow-icon");
+  const isTitle = e.target.className.includes("-title") || isIcon;
+  const currentClass = e.currentTarget.className;
+  const isShow = currentClass.includes("sidenavbar-show");
+  const arrowIcon = e.currentTarget.querySelector(".arrow-icon");
+  const iconClass = arrowIcon.className;
+  if (isTitle) {
+    e.currentTarget.className = isShow ? currentClass.replace("sidenavbar-show", "sidenavbar-hide") : currentClass.replace("sidenavbar-hide", "sidenavbar-show");
+    arrowIcon.className = isShow ? iconClass.replace("arrow-down", "arrow-up") : iconClass.replace("arrow-up", "arrow-down");
+  }
+};
+const OffsetContext = createContext(20);
 export {
-  DataContext as D
+  OffsetContext as O,
+  handleClick as h
 };