choerodon-ui/pro/es/picture/Navbar.js

An enterprise-class UI design language and React-based implementation

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import isString from 'lodash/isString';
import scrollTo from '../../../es/_util/scrollTo';
import Button from '../button/Button';
import { FuncType } from '../button/enum';
import Picture from './Picture';
import { stopPropagation } from '../_util/EventManager';
var MAX = 5;
var SIZE = 60;
var GUTTER = 8;

var NavItem = function NavItem(props) {
  var prefixCls = props.prefixCls,
      index = props.index,
      onClick = props.onClick,
      active = props.active,
      src = props.src;
  var handleClick = useCallback(function () {
    onClick(index);
  }, [index, onClick]);
  return React.createElement(Picture, {
    className: classNames("".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-current"), active)),
    src: src,
    objectFit: "cover",
    objectPosition: "top left",
    status: "loaded",
    preview: false,
    lazy: false,
    draggable: false,
    width: SIZE,
    height: SIZE,
    onClick: handleClick
  });
};

NavItem.displayName = 'NavItem';
var MemoNavItem = memo(NavItem);

var Navbar = function Navbar(props) {
  var prefixCls = props.prefixCls,
      value = props.value,
      list = props.list,
      onChange = props.onChange;
  var containerRef = useRef(null);

  var _useState = useState(value),
      _useState2 = _slicedToArray(_useState, 2),
      currentIndex = _useState2[0],
      setCurrentIndex = _useState2[1];

  var navBarPrefixCls = "".concat(prefixCls, "-navbar");
  var length = list.length;
  var disabled = length <= MAX;
  var handlePrev = useCallback(function () {
    setCurrentIndex(Math.max(currentIndex - MAX, 0));
  }, [currentIndex, length]);
  var handleNext = useCallback(function () {
    setCurrentIndex(Math.min(currentIndex + MAX, length - 1));
  }, [currentIndex, length]);
  useEffect(function () {
    var current = containerRef.current;

    if (current) {
      scrollTo(currentIndex * (SIZE + GUTTER), {
        getContainer: function getContainer() {
          return current;
        },
        top: false
      });
    }
  }, [currentIndex]);
  useEffect(function () {
    if (value < currentIndex || value >= currentIndex + MAX) {
      setCurrentIndex(value);
    }
  }, [value]);

  var renderList = function renderList() {
    return list.map(function (item, index) {
      return React.createElement(MemoNavItem, {
        key: String(index),
        prefixCls: navBarPrefixCls,
        active: index === value,
        src: isString(item) ? item : item.src,
        onClick: onChange,
        index: index
      });
    });
  };

  return React.createElement("div", {
    className: navBarPrefixCls
  }, React.createElement(Button, {
    icon: "navigate_before",
    disabled: disabled || currentIndex === 0,
    funcType: FuncType.link,
    onClick: handlePrev,
    onMouseDown: stopPropagation,
    className: "".concat(prefixCls, "-btn ").concat(prefixCls, "-btn-nav")
  }), React.createElement("div", {
    ref: containerRef,
    className: "".concat(navBarPrefixCls, "-scroll-container"),
    style: disabled ? undefined : {
      width: SIZE * MAX + GUTTER * (MAX - 1)
    },
    onMouseDown: stopPropagation
  }, React.createElement("div", {
    className: "".concat(navBarPrefixCls, "-scroll"),
    style: disabled ? undefined : {
      width: SIZE * length + GUTTER * (length - 1)
    }
  }, renderList())), React.createElement(Button, {
    icon: "navigate_next",
    disabled: disabled || currentIndex > length - MAX,
    funcType: FuncType.link,
    onClick: handleNext,
    onMouseDown: stopPropagation,
    className: "".concat(prefixCls, "-btn ").concat(prefixCls, "-btn-nav")
  }));
};

Navbar.displayName = 'Navbar';
export default memo(Navbar);
//# sourceMappingURL=Navbar.js.map