@alilc/lowcode-plugin-components-pane/es/components/Tab/index.js

低代码组件面板

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import cls from 'classnames/bind';
import style from './index.module.scss';
var cx = cls.bind(style);
var Tab = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Tab, _React$Component);
  function Tab() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      active: 0,
      offset: 0
    };
    _this.menus = /*#__PURE__*/React.createRef();
    _this.getIndicatorPos = function (index) {
      var active = _this.state.active;
      index = typeof index === 'undefined' ? active : index;
      var dom = _this.menus.current;
      if (dom) {
        var children = dom.childNodes;
        var target = children[index];
        if (!target) {
          return 0;
        }
        return target.offsetLeft;
      }
      return 0;
    };
    _this.format = function () {
      var children = _this.props.children;
      var childs = React.Children.toArray(children);
      var menus = [];
      for (var i = 0; i < childs.length; i += 1) {
        var _ref = childs[i],
          props = _ref.props;
        menus.push({
          title: props === null || props === void 0 ? void 0 : props.title,
          index: i,
          children: props.children
        });
      }
      return {
        menus: menus
      };
    };
    _this.handleSelect = function (active) {
      _this.setState({
        active: active,
        offset: _this.getIndicatorPos(active)
      });
    };
    return _this;
  }
  var _proto = Tab.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var offset = this.getIndicatorPos();
    // eslint-disable-next-line
    this.setState({
      offset: offset
    });
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$state = this.state,
      active = _this$state.active,
      offset = _this$state.offset;
    var className = this.props.className;
    var _this$format = this.format(),
      menus = _this$format.menus;
    return /*#__PURE__*/React.createElement("div", {
      className: cls(className, cx('tab'))
    }, /*#__PURE__*/React.createElement("div", {
      className: cx('header')
    }, /*#__PURE__*/React.createElement("div", {
      className: cx('indicator'),
      style: {
        left: offset
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: cx('items'),
      ref: this.menus
    }, menus.map(function (menu) {
      return /*#__PURE__*/React.createElement("div", {
        key: menu.index,
        className: cx('item', {
          active: active === menu.index
        }),
        onClick: function onClick() {
          return _this2.handleSelect(menu.index);
        }
      }, menu.title);
    }))), /*#__PURE__*/React.createElement("div", {
      className: cx('tabs')
    }, /*#__PURE__*/React.createElement("div", {
      className: cx('contents'),
      style: {
        transform: "translate3d(-" + active + "00%, 0, 0)"
      }
    }, menus.map(function (_ref2) {
      var children = _ref2.children,
        index = _ref2.index;
      return /*#__PURE__*/React.createElement("div", {
        className: cx('content', {
          active: active === index
        }),
        key: index
      }, children);
    }))));
  };
  return Tab;
}(React.Component);
Tab.Item = void 0;
export { Tab as default };
Tab.Item = function TabItem(_ref3) {
  var children = _ref3.children;
  return children;
};