sixue-content/lib/index.js

魔盒系统内容模块模版

"use strict";

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

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

exports.__esModule = true;
exports["default"] = SixueContent;

var _breadcrumb = _interopRequireDefault(require("@alifd/next/lib/breadcrumb"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

require("./index.scss");

function SixueContent(props) {
  var _others$breadList, _others$tabList;

  var others = (0, _extends2["default"])({}, props);

  var _useState = (0, _react.useState)(Number),
      tabNum = _useState[0],
      setTabNum = _useState[1];

  (0, _react.useEffect)(function () {
    setTabNum(others.tabIndex);
  }, [others.tabIndex]);

  var tab = function tab(index) {
    setTabNum(index);
    var key = others.tabList[index].key;

    if (typeof others.tabFunc === 'function') {
      others.tabFunc(key);
    }
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "SixueContent"
  }, ((_others$breadList = others.breadList) === null || _others$breadList === void 0 ? void 0 : _others$breadList.length) > 0 && /*#__PURE__*/_react["default"].createElement(_breadcrumb["default"], {
    id: "SixueBreadcrumb",
    className: "SixueBreadcrumb"
  }, others.breadList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_breadcrumb["default"].Item, {
      link: item.link,
      key: index
    }, item.name);
  })), ((_others$tabList = others.tabList) === null || _others$tabList === void 0 ? void 0 : _others$tabList.length) > 0 && /*#__PURE__*/_react["default"].createElement("ul", {
    id: "SixueTab",
    className: "SixueTab"
  }, others.tabList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement("li", {
      className: tabNum === index ? 'active' : '',
      key: index,
      onClick: function onClick() {
        tab(index);
      }
    }, item.name);
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "SixueScroll"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "scrollNode " + (others.isBackground ? '' : 'backgroundNo'),
    style: others.scrollNodeStyle
  }, others.children)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "placeholderF"
  }));
}

SixueContent.defaultProps = {
  breadList: [],
  tabList: [],
  tabIndex: 0,
  scrollNodeStyle: {},
  tabFunc: '',
  isBackground: true
};