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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _scrollTo = _interopRequireDefault(require("../../../lib/_util/scrollTo"));

var _Button = _interopRequireDefault(require("../button/Button"));

var _enum = require("../button/enum");

var _Picture = _interopRequireDefault(require("./Picture"));

var _EventManager = require("../_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 = (0, _react.useCallback)(function () {
    onClick(index);
  }, [index, onClick]);
  return /*#__PURE__*/_react["default"].createElement(_Picture["default"], {
    className: (0, _classnames["default"])("".concat(prefixCls, "-item"), (0, _defineProperty2["default"])({}, "".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 = /*#__PURE__*/(0, _react.memo)(NavItem);

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

  var _useState = (0, _react.useState)(value),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      currentIndex = _useState2[0],
      setCurrentIndex = _useState2[1];

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

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

  var renderList = function renderList() {
    return list.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement(MemoNavItem, {
        key: String(index),
        prefixCls: navBarPrefixCls,
        active: index === value,
        src: (0, _isString["default"])(item) ? item : item.src,
        onClick: onChange,
        index: index
      });
    });
  };

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

Navbar.displayName = 'Navbar';

var _default = /*#__PURE__*/(0, _react.memo)(Navbar);

exports["default"] = _default;
//# sourceMappingURL=Navbar.js.map