fan-standard-comp 3.1.12 → 3.1.13

package/lib/NavLeafScroll/index.js

@@ -38,6 +38,7 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
     _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,
@@ -45,68 +46,106 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
           key: 'id',
           title: 'title',
           count: 'count'
-        } : _this$props$optionNam; // 元素个数占用的高度是否不超过内容区域
+        } : _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; // 所有楼层占用的高度
-      var isEnough = wrapHeight % baseItemHeight === 0; // 剩余的是否足够容纳一个单元格
-      // 判断有效区域与单元格高度：若小于，则直接使用单元格高度，否则将内容区高度去除不足一个单元格高度
-      if (_this.mainWrap.current.clientHeight - (isInsideEnough ? 0 : 32 * 2) >= baseItemHeight) {
-        wrapHeight -= wrapHeight % baseItemHeight; // 判断是否除不尽,如果还有余数，则当前 区域有效区域要去除一个单元格的高度
+      // 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 {
-        wrapHeight = baseItemHeight;
+        // 判断有效区域与单元格高度：若小于，则直接使用单元格高度，否则将内容区高度去除不足一个单元格高度
+        if (_this.mainWrap.current.clientHeight - (isInsideEnough ? 0 : 32 * 2) >= baseItemHeight) {
+          wrapHeight -= wrapHeight % baseItemHeight; // 判断是否除不尽,如果还有余数，则当前 区域有效区域要去除一个单元格的高度
+        } else {
+          wrapHeight = baseItemHeight;
+        }
       }
-      var stepSize = wrapHeight / baseItemHeight; // - (isEnough ? 0 : 1) // 当前一页可容纳的单元格数量
+      var stepSize = type === 'horizontal' ? wrapWidth / baseItemWidth : wrapHeight / baseItemHeight; // - (isEnough ? 0 : 1) // 当前一页可容纳的单元格数量
       _this.setState({
         floorRelatedSize: {
           wrapHeight: wrapHeight,
           // 有效内容区域的
-          floorHeight: floorHeight // 楼层列表占用的高度
+          floorHeight: floorHeight,
+          // 楼层列表占用的高度
+          wrapWidth: wrapWidth,
+          floorWidth: floorWidth
         },
-
         stepSize: stepSize,
-        showArrow: floorHeight > wrapHeight
+        showArrow: type === 'horizontal' ? isInsideEnoughWidth ? false : floorWidth > wrapWidth : isInsideEnough ? false : floorHeight > wrapHeight
       });
       if (activeKey && navList.length > 0) {
         var matchIndex = _lodash.default.findIndex(navList, function (item) {
           return item[(optionName === null || optionName === void 0 ? void 0 : optionName.key) || 'id'] === activeKey;
         });
-        var stepNo = wrapHeight === 0 ? 0 : Math.floor(matchIndex / (wrapHeight / baseItemHeight)); // 当前所在的切换页数，从0开始
+        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,
-            next: floorHeight > wrapHeight && stepNo + 1 !== stepTotalSize
+            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,
-            next: floorHeight > wrapHeight
+            left: false,
+            next: floorHeight > wrapHeight,
+            right: floorWidth > wrapWidth
           }
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleLeafControl", function (type) {
+    _defineProperty(_assertThisInitialized(_this), "handleLeafControl", function (method) {
+      var type = _this.props.type;
       var _this$state = _this.state,
         floorRelatedSize = _this$state.floorRelatedSize,
-        leafNavScrollY = _this$state.leafNavScrollY;
+        leafNavScrollY = _this$state.leafNavScrollY,
+        leafNavScrollX = _this$state.leafNavScrollX;
       var wrapHeight = floorRelatedSize.wrapHeight,
-        floorHeight = floorRelatedSize.floorHeight;
-      var maxNextPosition = -(wrapHeight * (Math.ceil(floorHeight / wrapHeight) - 1)); // 向下滚动的最大值
-      var scrollY = type === 'next' ? leafNavScrollY - wrapHeight : leafNavScrollY + wrapHeight;
-      _this.setState({
-        arrowPermit: {
-          prev: type === 'prev' ? scrollY !== 0 : true,
-          next: type === 'prev' ? true : scrollY !== maxNextPosition // 滚动大小与最大滚动值一致时，向下滚动禁用,
-        },
+        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 // 滚动大小与最大滚动值一致时，向右滚动禁用,
+          },
 
-        leafNavScrollY: scrollY
-      });
+          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;
@@ -127,21 +166,25 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
       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) {
-        arrowPermit.prev && _this.handleLeafControl('prev'); // 向上滚动
+        // 向上滚动(向左滚动）
+        type === 'horizontal' ? arrowPermit.left && _this.handleLeafControl('left') : arrowPermit.prev && _this.handleLeafControl('prev');
       } else {
-        arrowPermit.next && _this.handleLeafControl('next'); // 向下滚动
+        type === 'horizontal' ? arrowPermit.right && _this.handleLeafControl('right') : arrowPermit.next && _this.handleLeafControl('next'); // 向下滚动(向右滚动)
       }
-      // onWheel && onWheel(e)
     });
     _this.state = {
       isMouseEnter: false,
+      leafNavScrollX: 0,
+      // 水平滚动区域
       leafNavScrollY: 0,
+      // 垂直滚动区域
       showArrow: false,
       arrowPermit: {
         prev: false,
@@ -193,6 +236,8 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
     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,
@@ -206,8 +251,11 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
         _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 (JSON.stringify(navList) !== JSON.stringify(prevProps.navList) || baseItemHeight !== prevProps.baseItemHeight) {
+      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) {
@@ -225,14 +273,18 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
         var matchIndex = _lodash.default.findIndex(navList, function (item) {
           return item[optionName.key] === activeKey;
         });
-        var stepNo = Math.floor(matchIndex / (wrapHeight / baseItemHeight)); // 当前所在的切换页数，从0开始
+        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
+            next: floorHeight > wrapHeight && stepNo + 1 !== stepTotalSize,
+            left: matchIndex !== -1 && stepNo !== 0,
+            right: floorWidth > wrapWidth && stepNo + 1 !== stepTotalSize
           },
           isMouseEnter: true
         });
@@ -258,16 +310,20 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
           count: 'count'
         } : _this$props3$optionNa,
         _this$props3$emptyNod = _this$props3.emptyNode,
-        emptyNode = _this$props3$emptyNod === void 0 ? null : _this$props3$emptyNod;
+        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;
+        leafNavScrollY = _this$state4.leafNavScrollY,
+        leafNavScrollX = _this$state4.leafNavScrollX;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(className, "nav-leaf"),
-        style: width ? {
-          width: "".concat(width, "px")
-        } : {},
+        className: (0, _classnames.default)(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}
         ,
@@ -279,7 +335,21 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
           padding: 0
         } : {},
         "data-prev": showArrow
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, type === 'horizontal' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)("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.default.createElement(_index.default, {
+        name: "caret-left"
+      })), /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)("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.default.createElement(_index.default, {
+        name: "caret-right"
+      }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)("nav-leaf-arrow nav-leaf-btn-prev", showArrow ? '' : 'is-hide', arrowPermit.prev ? '' : 'is-disabled'),
         onClick: function onClick() {
           return arrowPermit.prev ? _this2.handleLeafControl('prev') : '';
@@ -293,7 +363,7 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
         }
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
         name: "caret-down"
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      }))), /*#__PURE__*/_react.default.createElement("div", {
         className: "nav-leaf-wrap",
         ref: this.leafWrap
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -302,15 +372,17 @@ var NavLeafScroll = /*#__PURE__*/function (_Component) {
         className: "nav-leaf-nav",
         ref: this.leafNav,
         style: {
-          transform: "translate3d(0px, ".concat(leafNavScrollY, "px, 0px)")
+          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;
+        var _this2$props, _this2$props2;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: item[optionName.key],
           className: (0, _classnames.default)('nav-leaf-item', activeKey && activeKey === item[optionName.key] ? 'is-active' : ''),
-          style: {
-            height: "".concat(((_this2$props = _this2.props) === null || _this2$props === void 0 ? void 0 : _this2$props.baseItemHeight) || 40, "px")
+          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);

package/lib/NavLeafScroll/style/index.less

@@ -4,6 +4,12 @@
 .nav-leaf {
   width: 110px;
   height:  100%;
+  &.nav-leaf-horizontal {
+    width: 100%;
+    .nav-leaf-container.nav-leaf-container-scroll {
+        padding: 0 30px;
+    }
+  }
   //.nav-leaf-container {
   //  height: ~'calc(100vh - @{nav-header-height})';
   //}
@@ -31,6 +37,17 @@
     height: 100%;
     overflow: hidden;
   }
+  &.nav-leaf-horizontal {
+    .nav-leaf-item {
+      display: inline-block;
+      text-align: center;
+      border-top-right-radius: 20px;
+      border-bottom-right-radius: 20px;
+    }
+    .nav-leaf-nav {
+      width: inherit;
+    }
+  }
   .nav-leaf-nav {
     position: relative;
     display: inline-block;
@@ -42,7 +59,6 @@
   }
   .nav-leaf-arrow {
     position: absolute;
-    left: 0;
     width: 100%;
     height: 32px;
     color: @text-color;
@@ -58,11 +74,27 @@
       color: fade(@primary-color, 30%) !important;
       cursor: not-allowed !important;
     }
+    &.nav-leaf-btn-left {
+      width: 30px;
+      height: auto;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+    &.nav-leaf-btn-right{
+      width: 30px;
+      height: auto;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
     &.nav-leaf-btn-prev {
       top: 0;
+      left:0;
     }
     &.nav-leaf-btn-next {
       bottom: 0;
+      left:0;
     }
   }
   .nav-leaf-item {

package/lib/StandardForm/StepForm.js

@@ -214,8 +214,10 @@ var StepForm = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onFinishFailed: function onFinishFailed() {
       // setFieldFailed(true)
     }
-  }, /*#__PURE__*/_react.default.createElement(_steps.default, Object.assign({}, stepsConfig), formItemGroup.map(function (item, index) {
-    return !item.hideStep ? /*#__PURE__*/_react.default.createElement(Step, {
+  }, /*#__PURE__*/_react.default.createElement(_steps.default, Object.assign({}, stepsConfig), formItemGroup.filter(function (fItem) {
+    return !fItem.hideStep;
+  }).map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(Step, {
       key: "".concat(item.title).concat(index),
       description: item.description,
       icon: item.icon,
@@ -223,8 +225,12 @@ var StepForm = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       title: item.title,
       subTitle: item.subTitle,
       disabled: item.disabled
-    }) : null;
-  })), formItemGroup.map(function (item, index) {
+    });
+  })),
+  // 过滤隐藏掉的步骤表单
+  formItemGroup.filter(function (fItem) {
+    return !fItem.hideStep;
+  }).map(function (item, index) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: "stepForm-content ".concat(layout === 'inline' ? 'stepForm-content-inline' : ''),

package/lib/StandardModal/index.js

@@ -93,7 +93,9 @@ var StandardModal = function StandardModal(props) {
         return ((_b = activeTabInfo === null || activeTabInfo === void 0 ? void 0 : activeTabInfo.actions) === null || _b === void 0 ? void 0 : _b.length) > 0;
       }
       if (type === 'stepForm') {
-        var currentStepInfo = formItemGroup[stepsConfig.current];
+        var currentStepInfo = formItemGroup.filter(function (fItem) {
+          return !fItem.hideStep;
+        })[stepsConfig.current];
         openLog && console.log('rule 0-2', ((_c = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _c === void 0 ? void 0 : _c.length) > 0);
         return ((_d = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _d === void 0 ? void 0 : _d.length) > 0;
       }
@@ -379,7 +381,10 @@ var StandardModal = function StandardModal(props) {
   var renderFooter = function renderFooter() {
     var _a, _b;
     if (type === 'stepForm') {
-      var currentStepInfo = formItemGroup[stepsConfig.current];
+      // 过滤隐藏掉的步骤表单
+      var currentStepInfo = formItemGroup.filter(function (fItem) {
+        return !fItem.hideStep;
+      })[stepsConfig.current];
       return ((_a = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ActionList.default, {
         list: currentStepInfo.actions || [],
         onStep: handleStepType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fan-standard-comp",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "FZ standard-comp,basic of antd4.0 and custom component.",
   "main": "lib/index.js",
   "module": "es/index.js",