@kdcloudjs/kdesign 1.8.48 → 1.8.49

package/es/tabs/tabs.d.ts

@@ -14,6 +14,7 @@ export interface ITabsProps {
     size?: TabsSize;
     style?: Record<string, unknown>;
     className?: string;
+    tabsDropdownClassName?: string;
     disabled?: boolean;
     noContainer?: boolean;
     showScrollArrow?: boolean;
@@ -25,6 +26,7 @@ export interface ITabsProps {
     onChange?: TabChangeEventHandler;
     getActiveLinePosition?: (left: number, width: number) => void;
     getTriggerKey?: (key: any) => void;
+    paneItemOperation?: boolean;
 }
 declare const Tabs: React.FC<ITabsProps>;
 export default Tabs;

package/es/tabs/tabs.js

@@ -50,8 +50,10 @@ var Tabs = function Tabs(props) {
     showScrollArrow = tabsProps.showScrollArrow,
     _tabsProps$effect = tabsProps.effect,
     effect = _tabsProps$effect === void 0 ? 'none' : _tabsProps$effect,
+    tabsDropdownClassName = tabsProps.tabsDropdownClassName,
     children = tabsProps.children,
-    onChange = tabsProps.onChange;
+    onChange = tabsProps.onChange,
+    needPanelOpration = tabsProps.needPanelOpration;
   var tabsPrefixCls = getPrefixCls(prefixCls, 'tabs', customPrefixcls);
   var rtlCls = direction === 'rtl' ? "".concat(tabsPrefixCls, "-rtl") : null;
   var activeKey;
@@ -94,6 +96,13 @@ var Tabs = function Tabs(props) {
   var tabRef = useRef(null);
   var tabListRef = useRef(null);
   var carouselRef = useRef(null);
+  var touchStartX = useRef(0);
+  var lastListPosition = useRef(0);
+  var isDragging = useRef(false);
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    triggerState = _useState16[0],
+    setTriggerState = _useState16[1];
   var handleActive = function handleActive(id, e) {
     setCurActiveKey(id);
     onChange && onChange(id, e);
@@ -105,6 +114,30 @@ var Tabs = function Tabs(props) {
   var getTriggerKey = function getTriggerKey(key) {
     setTriggerKey(key);
   };
+  var handleTouchStart = function handleTouchStart(e) {
+    if (ListWidth <= boxWidth) return;
+    touchStartX.current = e.touches[0].clientX;
+    lastListPosition.current = ListPostion;
+    isDragging.current = true;
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging.current || ListWidth <= boxWidth) return;
+    var currentX = e.touches[0].clientX;
+    var deltaX = currentX - touchStartX.current;
+    var newPosition = lastListPosition.current + deltaX;
+    var maxLeft = 0;
+    var maxRight = boxWidth - ListWidth;
+    if (newPosition > maxLeft) newPosition = maxLeft;
+    if (newPosition < maxRight) newPosition = maxRight;
+    setListPosition(newPosition);
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    if (ListWidth <= boxWidth) return;
+    isDragging.current = false;
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setTriggerState(visible);
+  };
   useEffect(function () {
     setCurActiveKey(activeKey);
   }, [activeKey]);
@@ -204,20 +237,18 @@ var Tabs = function Tabs(props) {
     }));
   };
   var renderRightArrows = function renderRightArrows(nodes) {
-    var _context6, _context7, _classNames4;
+    var _context6, _context7, _classNames4, _context8;
     if (ListWidth < boxWidth || !ListWidth || !boxWidth || _includesInstanceProperty(_context6 = ['left', 'right']).call(_context6, position)) return null;
     var rightClasses = classNames("".concat(tabsPrefixCls, "-right-arrows"), (_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context7 = "".concat(tabsPrefixCls, "-right-arrows-")).call(_context7, type), type), _defineProperty(_classNames4, "".concat(tabsPrefixCls, "-right-arrows-noshadow"), ListWidth + ListPostion === boxWidth), _classNames4));
-    var menu = _mapInstanceProperty(nodes).call(nodes, function (node) {
-      var tmp = {
-        label: '',
-        key: 0,
-        disabled: false
-      };
-      tmp.label = node.props.tab;
-      tmp.key = node.props.id;
-      tmp.disabled = node.props.disabled;
-      return tmp;
-    });
+    var menu = React.createElement(Dropdown.Menu, {
+      className: classNames(tabsDropdownClassName, _defineProperty({}, "".concat(tabsPrefixCls, "-right-arrows-menu"), needPanelOpration))
+    }, _mapInstanceProperty(nodes).call(nodes, function (node) {
+      return React.createElement(Dropdown.Item, {
+        key: node.props.id,
+        disabled: node.props.disabled,
+        className: node.props.id === curActiveKey ? "".concat(tabsPrefixCls, "-right-arrows-menu-active") : undefined
+      }, React.createElement("span", null, node.props.tab));
+    }));
     var handleRight = function handleRight() {
       if (ListPostion === boxWidth - ListWidth) return;
       var offset = ListPostion - boxWidth > boxWidth - ListWidth ? ListPostion - boxWidth : boxWidth - ListWidth;
@@ -248,9 +279,10 @@ var Tabs = function Tabs(props) {
     }) : null, React.createElement(Dropdown, {
       menu: menu,
       trigger: ['click'],
-      onItemClick: handleSelectItem
+      onItemClick: handleSelectItem,
+      onVisibleChange: handleVisibleChange
     }, React.createElement("span", {
-      className: "".concat(tabsPrefixCls, "-more-btn")
+      className: classNames("".concat(tabsPrefixCls, "-more-btn"), _concatInstanceProperty(_context8 = "".concat(tabsPrefixCls, "-trigger-")).call(_context8, triggerState))
     }, React.createElement(Icon, {
       type: "arrow-down"
     }))));
@@ -341,7 +373,13 @@ var Tabs = function Tabs(props) {
       }, renderWrap);
     };
     return React.createElement("div", _extends({}, omit(tabsProps, ['activeKey', 'defaultActiveKey', 'showScrollArrow', 'noContainer']), {
-      className: tabNavsClasses
+      className: tabNavsClasses,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      style: {
+        touchAction: 'pan-y'
+      }
     }), renderLeftOperations(), renderLeftArrow(), React.createElement("div", {
       ref: tabRef,
       className: "".concat(tabsPrefixCls, "-tab-wrap")

package/lib/tabs/tabs.d.ts

@@ -14,6 +14,7 @@ export interface ITabsProps {
     size?: TabsSize;
     style?: Record<string, unknown>;
     className?: string;
+    tabsDropdownClassName?: string;
     disabled?: boolean;
     noContainer?: boolean;
     showScrollArrow?: boolean;
@@ -25,6 +26,7 @@ export interface ITabsProps {
     onChange?: TabChangeEventHandler;
     getActiveLinePosition?: (left: number, width: number) => void;
     getTriggerKey?: (key: any) => void;
+    paneItemOperation?: boolean;
 }
 declare const Tabs: React.FC<ITabsProps>;
 export default Tabs;

package/lib/tabs/tabs.js

@@ -18,7 +18,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
-var _context8 = require("./context");
+var _context9 = require("./context");
 var _utils = require("../_utils");
 var _omit = require("../_utils/omit");
 var _type = require("../_utils/type");
@@ -66,8 +66,10 @@ var Tabs = function Tabs(props) {
     showScrollArrow = tabsProps.showScrollArrow,
     _tabsProps$effect = tabsProps.effect,
     effect = _tabsProps$effect === void 0 ? 'none' : _tabsProps$effect,
+    tabsDropdownClassName = tabsProps.tabsDropdownClassName,
     children = tabsProps.children,
-    onChange = tabsProps.onChange;
+    onChange = tabsProps.onChange,
+    needPanelOpration = tabsProps.needPanelOpration;
   var tabsPrefixCls = getPrefixCls(prefixCls, 'tabs', customPrefixcls);
   var rtlCls = direction === 'rtl' ? "".concat(tabsPrefixCls, "-rtl") : null;
   var activeKey;
@@ -110,6 +112,13 @@ var Tabs = function Tabs(props) {
   var tabRef = (0, _react.useRef)(null);
   var tabListRef = (0, _react.useRef)(null);
   var carouselRef = (0, _react.useRef)(null);
+  var touchStartX = (0, _react.useRef)(0);
+  var lastListPosition = (0, _react.useRef)(0);
+  var isDragging = (0, _react.useRef)(false);
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+    triggerState = _useState16[0],
+    setTriggerState = _useState16[1];
   var handleActive = function handleActive(id, e) {
     setCurActiveKey(id);
     onChange && onChange(id, e);
@@ -121,6 +130,30 @@ var Tabs = function Tabs(props) {
   var getTriggerKey = function getTriggerKey(key) {
     setTriggerKey(key);
   };
+  var handleTouchStart = function handleTouchStart(e) {
+    if (ListWidth <= boxWidth) return;
+    touchStartX.current = e.touches[0].clientX;
+    lastListPosition.current = ListPostion;
+    isDragging.current = true;
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging.current || ListWidth <= boxWidth) return;
+    var currentX = e.touches[0].clientX;
+    var deltaX = currentX - touchStartX.current;
+    var newPosition = lastListPosition.current + deltaX;
+    var maxLeft = 0;
+    var maxRight = boxWidth - ListWidth;
+    if (newPosition > maxLeft) newPosition = maxLeft;
+    if (newPosition < maxRight) newPosition = maxRight;
+    setListPosition(newPosition);
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    if (ListWidth <= boxWidth) return;
+    isDragging.current = false;
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setTriggerState(visible);
+  };
   (0, _react.useEffect)(function () {
     setCurActiveKey(activeKey);
   }, [activeKey]);
@@ -220,20 +253,18 @@ var Tabs = function Tabs(props) {
     }));
   };
   var renderRightArrows = function renderRightArrows(nodes) {
-    var _context6, _context7, _classNames4;
+    var _context6, _context7, _classNames4, _context8;
     if (ListWidth < boxWidth || !ListWidth || !boxWidth || (0, _includes.default)(_context6 = ['left', 'right']).call(_context6, position)) return null;
     var rightClasses = (0, _classnames.default)("".concat(tabsPrefixCls, "-right-arrows"), (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context7 = "".concat(tabsPrefixCls, "-right-arrows-")).call(_context7, type), type), (0, _defineProperty2.default)(_classNames4, "".concat(tabsPrefixCls, "-right-arrows-noshadow"), ListWidth + ListPostion === boxWidth), _classNames4));
-    var menu = (0, _map.default)(nodes).call(nodes, function (node) {
-      var tmp = {
-        label: '',
-        key: 0,
-        disabled: false
-      };
-      tmp.label = node.props.tab;
-      tmp.key = node.props.id;
-      tmp.disabled = node.props.disabled;
-      return tmp;
-    });
+    var menu = _react.default.createElement(_dropdown.default.Menu, {
+      className: (0, _classnames.default)(tabsDropdownClassName, (0, _defineProperty2.default)({}, "".concat(tabsPrefixCls, "-right-arrows-menu"), needPanelOpration))
+    }, (0, _map.default)(nodes).call(nodes, function (node) {
+      return _react.default.createElement(_dropdown.default.Item, {
+        key: node.props.id,
+        disabled: node.props.disabled,
+        className: node.props.id === curActiveKey ? "".concat(tabsPrefixCls, "-right-arrows-menu-active") : undefined
+      }, _react.default.createElement("span", null, node.props.tab));
+    }));
     var handleRight = function handleRight() {
       if (ListPostion === boxWidth - ListWidth) return;
       var offset = ListPostion - boxWidth > boxWidth - ListWidth ? ListPostion - boxWidth : boxWidth - ListWidth;
@@ -264,9 +295,10 @@ var Tabs = function Tabs(props) {
     }) : null, _react.default.createElement(_dropdown.default, {
       menu: menu,
       trigger: ['click'],
-      onItemClick: handleSelectItem
+      onItemClick: handleSelectItem,
+      onVisibleChange: handleVisibleChange
     }, _react.default.createElement("span", {
-      className: "".concat(tabsPrefixCls, "-more-btn")
+      className: (0, _classnames.default)("".concat(tabsPrefixCls, "-more-btn"), (0, _concat.default)(_context8 = "".concat(tabsPrefixCls, "-trigger-")).call(_context8, triggerState))
     }, _react.default.createElement(_icon.default, {
       type: "arrow-down"
     }))));
@@ -357,7 +389,13 @@ var Tabs = function Tabs(props) {
       }, renderWrap);
     };
     return _react.default.createElement("div", (0, _extends2.default)({}, (0, _omit.omit)(tabsProps, ['activeKey', 'defaultActiveKey', 'showScrollArrow', 'noContainer']), {
-      className: tabNavsClasses
+      className: tabNavsClasses,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      style: {
+        touchAction: 'pan-y'
+      }
     }), renderLeftOperations(), renderLeftArrow(), _react.default.createElement("div", {
       ref: tabRef,
       className: "".concat(tabsPrefixCls, "-tab-wrap")
@@ -390,7 +428,7 @@ var Tabs = function Tabs(props) {
       }, item.content);
     }));
   };
-  return _react.default.createElement(_context8.TabsContextProvider, {
+  return _react.default.createElement(_context9.TabsContextProvider, {
     value: {
       type: type,
       size: size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.8.48",
+  "version": "1.8.49",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [