preact-arco-design/es/Tabs/tab-header/tab-nav-icon.js

Arco Design React UI Library.

import React from "preact/compat";
import IconLeft from "../../../icon/react-icon/IconLeft";
import IconRight from "../../../icon/react-icon/IconRight";
import IconUp from "../../../icon/react-icon/IconUp";
import IconDown from "../../../icon/react-icon/IconDown";
import IconHover from "../../_class/icon-hover";
import cs from "../../_util/classNames";

var TabNavIcon = function TabNavIcon(props) {
  var _a, _b, _c, _d;

  var direction = props.direction,
      headerSize = props.headerSize,
      headerWrapperSize = props.headerWrapperSize,
      prefixCls = props.prefixCls,
      iconPos = props.iconPos,
      curOffset = props.currentOffset,
      align = props.align,
      rtl = props.rtl;
  var wrapHeight = headerWrapperSize.height,
      wrapWidth = headerWrapperSize.width;
  var headerHeight = headerSize.height,
      headerWidth = headerSize.width;
  var maxHeightOffset = headerHeight - wrapHeight;
  var maxWidthOffset = headerWidth - wrapWidth;

  var onChange = function onChange(offset) {
    if (offset !== props.currentOffset) {
      props.onChange && props.onChange(offset);
    }
  };

  var handleHozClick = function handleHozClick(e, pos) {
    e.preventDefault();
    var nextOffset;

    if (align === 'left') {
      nextOffset = pos === 'left' ? curOffset - wrapWidth : curOffset + wrapWidth;
    } else {
      nextOffset = pos === 'left' ? curOffset + wrapWidth : curOffset - wrapWidth;
    }

    onChange(nextOffset);
  };

  var handleVerticalClick = function handleVerticalClick(e, pos) {
    e.preventDefault();
    var nextOffset;

    if (pos === 'up') {
      nextOffset = curOffset - wrapHeight;
    } else {
      nextOffset = curOffset + wrapHeight;
      if (nextOffset >= headerHeight) return;
    }

    onChange(nextOffset);
  };

  var disabledPrev = false;
  var disabledNext = false;

  if (align === 'left') {
    disabledPrev = curOffset <= 0;
    disabledNext = direction === 'vertical' ? curOffset >= maxHeightOffset : curOffset >= maxWidthOffset;
  } else {
    disabledPrev = direction === 'vertical' ? curOffset >= maxHeightOffset : curOffset >= maxWidthOffset;
    disabledNext = curOffset <= 0;
  }

  return direction === 'vertical' ? iconPos === 'prev' ? React.createElement(IconHover, {
    disabled: disabledPrev,
    prefix: prefixCls,
    className: cs("".concat(prefixCls, "-up-icon"), (_a = {}, _a["".concat(prefixCls, "-nav-icon-disabled")] = disabledPrev, _a)),
    onClick: function onClick(e) {
      handleVerticalClick(e, 'up');
    }
  }, React.createElement(IconUp, null)) : React.createElement(IconHover, {
    prefix: prefixCls,
    className: cs("".concat(prefixCls, "-down-icon"), (_b = {}, _b["".concat(prefixCls, "-nav-icon-disabled")] = disabledNext, _b)),
    disabled: disabledNext,
    onClick: function onClick(e) {
      handleVerticalClick(e, 'down');
    }
  }, React.createElement(IconDown, null)) : iconPos === 'prev' ? React.createElement(IconHover, {
    prefix: prefixCls,
    disabled: disabledPrev,
    className: cs("".concat(prefixCls, "-left-icon"), (_c = {}, _c["".concat(prefixCls, "-nav-icon-disabled")] = disabledPrev, _c)),
    onClick: function onClick(e) {
      handleHozClick(e, 'left');
    }
  }, rtl ? React.createElement(IconRight, null) : React.createElement(IconLeft, null)) : React.createElement(IconHover, {
    prefix: prefixCls,
    className: cs("".concat(prefixCls, "-right-icon"), (_d = {}, _d["".concat(prefixCls, "-nav-icon-disabled")] = disabledNext, _d)),
    disabled: disabledNext,
    onClick: function onClick(e) {
      handleHozClick(e, 'right');
    }
  }, rtl ? React.createElement(IconLeft, null) : React.createElement(IconRight, null));
};

export default TabNavIcon;