fan-standard-comp 3.2.1 → 4.0.1

package/es/NavLeafScroll/index.js

@@ -1,397 +1,23 @@
-import "antd/es/badge/style";
-import _Badge from "antd/es/badge";
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React from 'react';
 // @ts-ignore
-import React, { Component } from 'react';
-import SpecIcon from "../SpecIcon/index";
-import _ from 'lodash';
+import NavLeafScroll from "./Main.js";
+import useStyle from "./style";
 import classNames from 'classnames';
-import './style/index.less';
-var NavLeafScroll = /*#__PURE__*/function (_Component) {
-  _inherits(NavLeafScroll, _Component);
-  var _super = _createSuper(NavLeafScroll);
-  function NavLeafScroll(props) {
-    var _this;
-    _classCallCheck(this, NavLeafScroll);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "initFloorValues", function () {
-      var _this$props = _this.props,
-        baseItemHeight = _this$props.baseItemHeight,
-        baseItemWidth = _this$props.baseItemWidth,
-        activeKey = _this$props.activeKey,
-        navList = _this$props.navList,
-        _this$props$optionNam = _this$props.optionName,
-        optionName = _this$props$optionNam === void 0 ? {
-          key: 'id',
-          title: 'title',
-          count: 'count'
-        } : _this$props$optionNam,
-        type = _this$props.type; // 元素个数占用的高度是否不超过内容区域
-      var isInsideEnough = navList.length * baseItemHeight <= _this.mainWrap.current.clientHeight;
-      var wrapHeight = _this.mainWrap.current.clientHeight - (isInsideEnough ? 0 : 32 * 2); // 每次需要移动的偏移量 32是上下切换角占用的高度
-      var floorHeight = _this.leafNav.current.clientHeight; // 所有楼层占用的高度
-      // const isEnough = wrapHeight % baseItemHeight === 0; // 剩余的是否足够容纳一个单元格
-      var isInsideEnoughWidth = navList.length * baseItemWidth <= _this.mainWrap.current.clientWidth;
-      var wrapWidth = _this.mainWrap.current.clientWidth - (isInsideEnoughWidth ? 0 : 30 * 2);
-      var floorWidth = _this.leafNav.current.clientWidth; // 所有楼层占用的宽度
-      if (type === 'horizontal') {
-        // 判断有效区域与单元格高度：若小于，则直接使用单元格高度，否则将内容区高度去除不足一个单元格高度
-        if (_this.mainWrap.current.clientWidth - (isInsideEnoughWidth ? 0 : 30 * 2) >= baseItemWidth) {
-          wrapWidth -= wrapWidth % baseItemWidth; // 判断是否除不尽,如果还有余数，则当前 区域有效区域要去除一个单元格的高度
-        } else {
-          wrapWidth = baseItemWidth;
-        }
-      } else {
-        // 判断有效区域与单元格高度：若小于，则直接使用单元格高度，否则将内容区高度去除不足一个单元格高度
-        if (_this.mainWrap.current.clientHeight - (isInsideEnough ? 0 : 32 * 2) >= baseItemHeight) {
-          wrapHeight -= wrapHeight % baseItemHeight; // 判断是否除不尽,如果还有余数，则当前 区域有效区域要去除一个单元格的高度
-        } else {
-          wrapHeight = baseItemHeight;
-        }
-      }
-      var stepSize = type === 'horizontal' ? wrapWidth / baseItemWidth : wrapHeight / baseItemHeight; // - (isEnough ? 0 : 1) // 当前一页可容纳的单元格数量
-      _this.setState({
-        floorRelatedSize: {
-          wrapHeight: wrapHeight,
-          // 有效内容区域的
-          floorHeight: floorHeight,
-          // 楼层列表占用的高度
-          wrapWidth: wrapWidth,
-          floorWidth: floorWidth
-        },
-        stepSize: stepSize,
-        showArrow: type === 'horizontal' ? isInsideEnoughWidth ? false : floorWidth > wrapWidth : isInsideEnough ? false : floorHeight > wrapHeight
-      });
-      if (activeKey && navList.length > 0) {
-        var matchIndex = _.findIndex(navList, function (item) {
-          return item[(optionName === null || optionName === void 0 ? void 0 : optionName.key) || 'id'] === activeKey;
-        });
-        var stepNo = type === 'horizontal' ? wrapWidth === 0 ? 0 : Math.floor(matchIndex / (wrapWidth / baseItemWidth)) : wrapHeight === 0 ? 0 : Math.floor(matchIndex / (wrapHeight / baseItemHeight)); // 当前所在的切换页数，从0开始
-        var stepTotalSize = Math.ceil(navList.length / stepSize) || 0; // 当前所有单元格占用的页总数
-        _this.setState({
-          leafNavScrollX: matchIndex !== -1 && stepNo !== 0 ? -wrapWidth * stepNo : 0,
-          leafNavScrollY: matchIndex !== -1 && stepNo !== 0 ? -wrapHeight * stepNo : 0,
-          // 如果当前默认传值有楼层节点，则需要判断其所在的位置
-          arrowPermit: {
-            prev: matchIndex !== -1 && stepNo !== 0,
-            left: matchIndex !== -1 && stepNo !== 0,
-            next: floorHeight > wrapHeight && stepNo + 1 !== stepTotalSize,
-            right: floorWidth > wrapWidth && stepNo + 1 !== stepTotalSize
-          }
-        });
-      } else {
-        _this.setState({
-          leafNavScrollX: 0,
-          leafNavScrollY: 0,
-          arrowPermit: {
-            prev: false,
-            left: false,
-            next: floorHeight > wrapHeight,
-            right: floorWidth > wrapWidth
-          }
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleLeafControl", function (method) {
-      var type = _this.props.type;
-      var _this$state = _this.state,
-        floorRelatedSize = _this$state.floorRelatedSize,
-        leafNavScrollY = _this$state.leafNavScrollY,
-        leafNavScrollX = _this$state.leafNavScrollX;
-      var wrapHeight = floorRelatedSize.wrapHeight,
-        floorHeight = floorRelatedSize.floorHeight,
-        wrapWidth = floorRelatedSize.wrapWidth,
-        floorWidth = floorRelatedSize.floorWidth;
-      if (type === 'horizontal') {
-        var maxNextPosition = -(wrapWidth * (Math.ceil(floorWidth / wrapWidth) - 1)); // 向右滚动的最大值
-        var scrollX = method === 'right' ? leafNavScrollX - wrapWidth : leafNavScrollX + wrapWidth;
-        _this.setState({
-          arrowPermit: {
-            left: method === 'left' ? scrollX !== 0 : true,
-            right: method === 'left' ? true : scrollX !== maxNextPosition // 滚动大小与最大滚动值一致时，向右滚动禁用,
-          },
-
-          leafNavScrollX: scrollX
-        });
-      } else {
-        var _maxNextPosition = -(wrapHeight * (Math.ceil(floorHeight / wrapHeight) - 1)); // 向下滚动的最大值
-        var scrollY = method === 'next' ? leafNavScrollY - wrapHeight : leafNavScrollY + wrapHeight;
-        _this.setState({
-          arrowPermit: {
-            prev: method === 'prev' ? scrollY !== 0 : true,
-            next: method === 'prev' ? true : scrollY !== _maxNextPosition // 滚动大小与最大滚动值一致时，向下滚动禁用,
-          },
-
-          leafNavScrollY: scrollY
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemControl", function (key, data) {
-      var onClick = _this.props.onClick;
-      onClick && onClick(key, data);
-    });
-    _defineProperty(_assertThisInitialized(_this), "mouseEnter", function (e) {
-      var onMouseEnter = _this.props.onMouseEnter;
-      _this.setState({
-        isMouseEnter: true
-      });
-      onMouseEnter && onMouseEnter(e);
-    });
-    _defineProperty(_assertThisInitialized(_this), "mouseLeave", function (e) {
-      var onMouseLeave = _this.props.onMouseLeave;
-      _this.setState({
-        isMouseEnter: false
-      });
-      onMouseLeave && onMouseLeave(e);
-    });
-    _defineProperty(_assertThisInitialized(_this), "mouseWheel", function (e) {
-      var type = _this.props.type;
-      var _this$state2 = _this.state,
-        isMouseEnter = _this$state2.isMouseEnter,
-        arrowPermit = _this$state2.arrowPermit;
-      if (!isMouseEnter) return; // 鼠标没有经过内容区域，则不会滚轮监听
-      e.preventDefault();
-      if (e.deltaY <= 0) {
-        // 向上滚动(向左滚动）
-        type === 'horizontal' ? arrowPermit.left && _this.handleLeafControl('left') : arrowPermit.prev && _this.handleLeafControl('prev');
-      } else {
-        type === 'horizontal' ? arrowPermit.right && _this.handleLeafControl('right') : arrowPermit.next && _this.handleLeafControl('next'); // 向下滚动(向右滚动)
-      }
-    });
-    _this.state = {
-      isMouseEnter: false,
-      leafNavScrollX: 0,
-      // 水平滚动区域
-      leafNavScrollY: 0,
-      // 垂直滚动区域
-      showArrow: false,
-      arrowPermit: {
-        prev: false,
-        next: false
-      },
-      floorRelatedSize: {
-        wrapHeight: 0,
-        // 有效内容区域的
-        floorHeight: 0 // 楼层列表占用的高度
-      },
-
-      stepSize: 0 // 当前一页可容纳的单元格数量
-    };
-
-    _this.mainWrap = /*#__PURE__*/React.createRef();
-    _this.leafWrap = /*#__PURE__*/React.createRef();
-    _this.leafNav = /*#__PURE__*/React.createRef();
-    _this.initFloorValues = _this.initFloorValues.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-  _createClass(NavLeafScroll, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var forbidScroll = this.props.forbidScroll;
-      window.addEventListener('resize', this.initFloorValues);
-      if (!forbidScroll) {
-        // 禁用时，不启动滚动监听
-        this.mainWrap.current.addEventListener('wheel', this.mouseWheel, {
-          passive: false
-        });
-      }
-      this.initFloorValues();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var forbidScroll = this.props.forbidScroll;
-      window.removeEventListener('resize', this.initFloorValues);
-      if (!forbidScroll) {
-        // 禁用时，不启动滚动监听
-        this.mainWrap.current.addEventListener('wheel', this.mouseWheel, {
-          passive: false
-        });
-      }
-      this.mainWrap.current.removeEventListener('wheel', this.mouseWheel);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props2 = this.props,
-        baseItemHeight = _this$props2.baseItemHeight,
-        baseItemWidth = _this$props2.baseItemWidth,
-        type = _this$props2.type,
-        navList = _this$props2.navList,
-        activeKey = _this$props2.activeKey,
-        _this$props2$optionNa = _this$props2.optionName,
-        optionName = _this$props2$optionNa === void 0 ? {
-          key: 'id',
-          title: 'title',
-          count: 'count'
-        } : _this$props2$optionNa,
-        forbidScroll = _this$props2.forbidScroll;
-      var _this$state3 = this.state,
-        _this$state3$floorRel = _this$state3.floorRelatedSize,
-        wrapHeight = _this$state3$floorRel.wrapHeight,
-        floorHeight = _this$state3$floorRel.floorHeight,
-        wrapWidth = _this$state3$floorRel.wrapWidth,
-        floorWidth = _this$state3$floorRel.floorWidth,
-        stepSize = _this$state3.stepSize;
-      if (type === 'horizontal') {}
-      if (JSON.stringify(navList) !== JSON.stringify(prevProps.navList) || (type === 'horizontal' ? baseItemWidth !== prevProps.baseItemWidth : baseItemHeight !== prevProps.baseItemHeight)) {
-        this.initFloorValues();
-      }
-      if (forbidScroll !== prevProps.forbidScroll) {
-        // 禁用时，不启动滚动监听
-        if (!forbidScroll) {
-          // 禁用时，不启动滚动监听
-          this.mainWrap.current.addEventListener('wheel', this.mouseWheel, {
-            passive: false
-          });
-        } else {
-          this.mainWrap.current.removeEventListener('wheel', this.mouseWheel);
-        }
-      }
-      if (activeKey !== prevProps.activeKey) {
-        var matchIndex = _.findIndex(navList, function (item) {
-          return item[optionName.key] === activeKey;
-        });
-        var stepNo = Math.floor(matchIndex / (type === 'horizontal' ? wrapWidth / baseItemWidth : wrapHeight / baseItemHeight)); // 当前所在的切换页数，从0开始
-        var stepTotalSize = Array.isArray(navList) && Math.ceil(navList.length / stepSize) || 0; // 当前所有单元格占用的页总数
-        console.log('stepTotalSize', stepTotalSize);
-        this.setState({
-          leafNavScrollX: matchIndex !== -1 && stepNo !== 0 ? -wrapWidth * stepNo : 0,
-          leafNavScrollY: matchIndex !== -1 && stepNo !== 0 ? -wrapHeight * stepNo : 0,
-          // 如果当前默认传值有楼层节点，则需要判断其所在的位置
-          arrowPermit: {
-            prev: matchIndex !== -1 && stepNo !== 0,
-            next: floorHeight > wrapHeight && stepNo + 1 !== stepTotalSize,
-            left: matchIndex !== -1 && stepNo !== 0,
-            right: floorWidth > wrapWidth && stepNo + 1 !== stepTotalSize
-          },
-          isMouseEnter: true
-        });
-      }
-    } // 初始化楼层相关的值，如：是否允许触发滚动,默认滚动区间高度等
-    // 点击节点事件
-    // 鼠标滚轮监听
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        className = _this$props3.className,
-        width = _this$props3.width,
-        activeKey = _this$props3.activeKey,
-        customLeafNode = _this$props3.customLeafNode,
-        noArrowPadding = _this$props3.noArrowPadding,
-        navList = _this$props3.navList,
-        _this$props3$optionNa = _this$props3.optionName,
-        optionName = _this$props3$optionNa === void 0 ? {
-          key: 'id',
-          title: 'title',
-          count: 'count'
-        } : _this$props3$optionNa,
-        _this$props3$emptyNod = _this$props3.emptyNode,
-        emptyNode = _this$props3$emptyNod === void 0 ? null : _this$props3$emptyNod,
-        type = _this$props3.type,
-        height = _this$props3.height;
-      var _this$state4 = this.state,
-        showArrow = _this$state4.showArrow,
-        arrowPermit = _this$state4.arrowPermit,
-        leafNavScrollY = _this$state4.leafNavScrollY,
-        leafNavScrollX = _this$state4.leafNavScrollX;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(className, "nav-leaf", type === 'horizontal' ? 'nav-leaf-horizontal' : ''),
-        style: {
-          width: width ? "".concat(width, "px") : '',
-          height: height ? "".concat(height, "px") : ''
-        },
-        ref: this.mainWrap
-        // onWheel={this.mouseWheel}
-        ,
-        onMouseEnter: this.mouseEnter,
-        onMouseLeave: this.mouseLeave
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "nav-leaf-container nav-leaf-container-scroll",
-        style: !showArrow || noArrowPadding ? {
-          padding: 0
-        } : {},
-        "data-prev": showArrow
-      }, type === 'horizontal' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: classNames("nav-leaf-arrow nav-leaf-btn-left", showArrow ? '' : 'is-hide', arrowPermit.left ? '' : 'is-disabled'),
-        onClick: function onClick() {
-          return arrowPermit.left ? _this2.handleLeafControl('left') : '';
-        }
-      }, /*#__PURE__*/React.createElement(SpecIcon, {
-        name: "caret-left"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: classNames("nav-leaf-arrow nav-leaf-btn-right", showArrow ? '' : 'is-hide', arrowPermit.right ? '' : 'is-disabled'),
-        onClick: function onClick() {
-          return arrowPermit.right ? _this2.handleLeafControl('right') : '';
-        }
-      }, /*#__PURE__*/React.createElement(SpecIcon, {
-        name: "caret-right"
-      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: classNames("nav-leaf-arrow nav-leaf-btn-prev", showArrow ? '' : 'is-hide', arrowPermit.prev ? '' : 'is-disabled'),
-        onClick: function onClick() {
-          return arrowPermit.prev ? _this2.handleLeafControl('prev') : '';
-        }
-      }, /*#__PURE__*/React.createElement(SpecIcon, {
-        name: "caret-up"
-      })), /*#__PURE__*/React.createElement("span", {
-        className: classNames("nav-leaf-arrow nav-leaf-btn-next", showArrow ? '' : 'is-hide', arrowPermit.next ? '' : 'is-disabled'),
-        onClick: function onClick() {
-          return arrowPermit.next ? _this2.handleLeafControl('next') : '';
-        }
-      }, /*#__PURE__*/React.createElement(SpecIcon, {
-        name: "caret-down"
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "nav-leaf-wrap",
-        ref: this.leafWrap
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "nav-leaf-scroll"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "nav-leaf-nav",
-        ref: this.leafNav,
-        style: {
-          transform: "translate3d(".concat(type === 'horizontal' ? leafNavScrollX : 0, "px, ").concat(type === 'horizontal' ? 0 : leafNavScrollY, "px, 0px)")
-        }
-      }, navList && navList.length > 0 ? navList.map(function (item, i) {
-        var _this2$props, _this2$props2;
-        return /*#__PURE__*/React.createElement("div", {
-          key: item[optionName.key],
-          className: classNames('nav-leaf-item', activeKey && activeKey === item[optionName.key] ? 'is-active' : ''),
-          style: type === 'horizontal' ? {
-            width: "".concat(((_this2$props = _this2.props) === null || _this2$props === void 0 ? void 0 : _this2$props.baseItemWidth) || 60, "px")
-          } : {
-            height: "".concat(((_this2$props2 = _this2.props) === null || _this2$props2 === void 0 ? void 0 : _this2$props2.baseItemHeight) || 40, "px")
-          },
-          onClick: function onClick() {
-            return _this2.handleItemControl(item[optionName.key], item);
-          }
-        }, customLeafNode ? customLeafNode(item) : /*#__PURE__*/React.createElement(React.Fragment, null, item[optionName.title] && /*#__PURE__*/React.createElement("span", {
-          className: "leaf-title"
-        }, "".concat(item[optionName.title]), " "), item[optionName.count] ? /*#__PURE__*/React.createElement("span", {
-          className: "leaf-extra"
-        }, " ", /*#__PURE__*/React.createElement(SpecIcon, {
-          name: "warn-fill"
-        }), /*#__PURE__*/React.createElement(_Badge, {
-          className: "warning-count",
-          count: item[optionName.count]
-        })) : null));
-      }) : emptyNode)))));
-    }
-  }]);
-  return NavLeafScroll;
-}(Component);
-export default NavLeafScroll;
+var Index = function Index(props) {
+  var componentName = 'spec-nav-leaf';
+  var _useStyle = useStyle(componentName),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  return wrapSSR( /*#__PURE__*/React.createElement(NavLeafScroll, _extends({}, props, {
+    className: classNames(componentName, hashId, props === null || props === void 0 ? void 0 : props.className)
+  })));
+};
+export default Index;

package/es/NavLeafScroll/style/index.d.ts

@@ -0,0 +1,6 @@
+import { GlobalToken } from "antd";
+export interface NavLeafScrollTokenType extends GlobalToken {
+    [k: string]: any;
+}
+declare const NavLeafScrollStyleFunc: (prefix: string) => any;
+export default NavLeafScrollStyleFunc;

package/es/NavLeafScroll/style/index.js

@@ -0,0 +1,56 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createStyleHook } from "../../theme/utils/genStyleHook";
+var NavLeafScrollStyleFunc = function NavLeafScrollStyleFunc(prefix) {
+  var prepareComponentToken = function prepareComponentToken(token) {
+    return {
+      fontWeight: 400
+    };
+  };
+  return createStyleHook(prefix, function (token) {
+    var prefixCls = ".".concat(prefix);
+    return [_defineProperty({}, prefixCls, {
+      '&.nav-leaf': {
+        '.nav-leaf-arrow': {
+          color: token.colorText,
+          '&:hover': {
+            color: token.colorPrimary
+          },
+          '&.is-disabled': {
+            color: "".concat(token.colorPrimaryBg, " !important"),
+            '.spec-icon': {
+              color: "".concat(token.colorPrimaryBg, " !important")
+            }
+          }
+        },
+        '.nav-leaf-item': {
+          color: token.colorTextSecondary,
+          '&:hover': {
+            color: token.colorPrimary
+          },
+          '&.is-active': {
+            color: token.colorPrimary,
+            background: token.colorBgLayout,
+            // '@background-color-base',
+            borderColor: token.colorPrimary
+          },
+          '.leaf-extra': {
+            color: token.colorError,
+            'i': {
+              color: token.colorError
+            },
+            '.warning-count': {
+              '.ant-badge-multiple-words': {
+                boxShadow: "0 1px 4px ".concat(token.colorPrimaryBorderHover)
+              }
+            }
+          }
+        }
+      }
+    })];
+  }, prepareComponentToken // 当前组件扩展的变量
+  );
+};
+export default NavLeafScrollStyleFunc;

package/es/NavLeafScroll/style/index.less

@@ -1,9 +1,9 @@
-@root-entry-name: default;
-@import (reference) '~antd/es/style/themes/index';
-
 .nav-leaf {
   width: 110px;
   height:  100%;
+  & * {
+    box-sizing: border-box;
+  }
   &.nav-leaf-horizontal {
     width: 100%;
     .nav-leaf-container.nav-leaf-container-scroll {
@@ -61,17 +61,17 @@
     position: absolute;
     width: 100%;
     height: 32px;
-    color: @text-color;
+    //color: @text-color;
     text-align: center;
     cursor: pointer;
-    &:hover {
-      color: @primary-color;
-    }
+    //&:hover {
+    //  color: @primary-color;
+    //}
     &.is-hide {
       display: none;
     }
     &.is-disabled {
-      color: fade(@primary-color, 30%) !important;
+      //color: fade(@primary-color, 30%) !important;
       cursor: not-allowed !important;
     }
     &.nav-leaf-btn-left {
@@ -100,19 +100,19 @@
   .nav-leaf-item {
     height: 40px;
     padding: 5px 10px 5px 10px;
-    color: @text-color-secondary;
+    //color: @text-color-secondary;
     line-height: 30px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
     cursor: pointer;
-    &:hover {
-      color: @primary-color;
-    }
-    &.is-active {
-      color: @primary-color;
-      background: @background-color-base;
-      border-color: @primary-color;
-    }
+    //&:hover {
+    //  color: @primary-color;
+    //}
+    //&.is-active {
+    //  color: @primary-color;
+    //  background: @background-color-base;
+    //  border-color: @primary-color;
+    //}
     .leaf-title {
       display: inline-block;
       min-width: 30px;
@@ -122,17 +122,17 @@
       display: inline-block;
       width: 18px;
       margin-left: 4px;
-      color: @error-color;
+      //color: @error-color;
       text-align: center;
-      i {
-        color: @error-color;
-      }
+      //i {
+      //  color: @error-color;
+      //}
       .warning-count {
         position: absolute;
         top: -1px;
         left: 20px;
         .ant-badge-multiple-words {
-          box-shadow: 0 1px 4px fade(@primary-color, 45%)
+          //box-shadow: 0 1px 4px fade(@primary-color, 45%)
         }
       }
     }

package/es/RefactorTree/index.d.ts

@@ -36,5 +36,5 @@ interface RefactorTreeProps extends TreeProps {
         value: any;
     }[];
 }
-declare const RefactorTree: (props: RefactorTreeProps) => JSX.Element;
+declare const RefactorTree: (props: RefactorTreeProps) => React.JSX.Element;
 export default RefactorTree;