@ucloud-fe/react-components 1.10.3 → 1.11.0

package/lib/components/Tabs/TabBar.d.ts

@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, Key } from 'react';
+import React, { KeyboardEvent, Key, ReactNode } from 'react';
 import { Panes, TabBarPosition } from './shared';
 interface TabBarProps {
     onKeyDown: (e: KeyboardEvent) => void;
@@ -8,6 +8,7 @@ interface TabBarProps {
     activeKey: Key | null;
     direction: string;
     styleType: string;
+    extra?: ReactNode;
 }
 declare const _default: React.MemoExoticComponent<(props: TabBarProps) => JSX.Element>;
 export default _default;

package/lib/components/Tabs/TabBar.js

@@ -23,7 +23,7 @@ var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames5 = _interopRequireDefault(require("classnames"));
+var _classnames8 = _interopRequireDefault(require("classnames"));
 
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 
@@ -33,6 +33,8 @@ var _RefContext = _interopRequireDefault(require("./RefContext"));
 
 var _style2 = require("./style");
 
+var _Box = _interopRequireDefault(require("../Box"));
+
 var _this = void 0;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -76,7 +78,7 @@ var TabBarTabsNode = function TabBarTabsNode(_ref) {
     if (!pane) return;
     var key = pane.key;
     var paneProps = pane.pane.props;
-    var className = (0, _classnames5.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab"), 1), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-active"), activeKey === key), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-disabled"), paneProps.disabled), _classnames));
+    var className = (0, _classnames8.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab"), 1), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-active"), activeKey === key), (0, _defineProperty2.default)(_classnames, "".concat(_style2.prefixCls, "-tab-disabled"), paneProps.disabled), _classnames));
     var gutter = tabBarGutter && index === panes.length - 1 ? 0 : tabBarGutter;
     var marginProperty = direction === 'rtl' ? 'marginLeft' : 'marginRight';
     var style = (0, _defineProperty2.default)({}, (0, _utils.isVertical)(tabBarPosition) ? 'marginBottom' : marginProperty, gutter);
@@ -124,7 +126,7 @@ var TabBarRootNode = function TabBarRootNode(_ref2) {
     return null;
   }.bind(this) : _useContext2$saveRef;
 
-  var cls = (0, _classnames5.default)("".concat(_style2.prefixCls, "-bar"), "".concat(_style2.prefixCls, "-").concat(tabBarPosition, "-bar"), "".concat(_style2.prefixCls, "-styletype-").concat(styleType, "-bar"));
+  var cls = (0, _classnames8.default)("".concat(_style2.prefixCls, "-bar"), "".concat(_style2.prefixCls, "-").concat(tabBarPosition, "-bar"), "".concat(_style2.prefixCls, "-styletype-").concat(styleType, "-bar"));
   var topOrBottom = (0, _utils.isVertical)(tabBarPosition);
   var tabBarExtraContentStyle = topOrBottom ? {
     float: 'right'
@@ -267,7 +269,7 @@ var InkTabBarNode = function InkTabBarNode(_ref3) {
     }.bind(this);
   }.bind(this), [getRef, onResize]);
   var className = "".concat(_style2.prefixCls, "-ink-bar");
-  var classes = (0, _classnames5.default)(className, inkBarAnimated ? "".concat(className, "-animated") : "".concat(className, "-no-animated"));
+  var classes = (0, _classnames8.default)(className, inkBarAnimated ? "".concat(className, "-animated") : "".concat(className, "-no-animated"));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes,
     key: "inkBar",
@@ -583,7 +585,7 @@ var ScrollableTabBarNode = function ScrollableTabBarNode(_ref5) {
   var prevButton = /*#__PURE__*/_react.default.createElement("span", {
     onClick: onPrev,
     unselectable: "on",
-    className: (0, _classnames5.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-prev"), 1), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !prev), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames2)),
+    className: (0, _classnames8.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-prev"), 1), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !prev), (0, _defineProperty2.default)(_classnames2, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames2)),
     onTransitionEnd: prevTransitionEnd
   }, prevIcon || /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_style2.prefixCls, "-tab-prev-icon")
@@ -592,15 +594,15 @@ var ScrollableTabBarNode = function ScrollableTabBarNode(_ref5) {
   var nextButton = /*#__PURE__*/_react.default.createElement("span", {
     onClick: onNext,
     unselectable: "on",
-    className: (0, _classnames5.default)((_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-next"), 1), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !next), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames3))
+    className: (0, _classnames8.default)((_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-next"), 1), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-btn-disabled"), !next), (0, _defineProperty2.default)(_classnames3, "".concat(_style2.prefixCls, "-tab-arrow-show"), showNextPrev), _classnames3))
   }, nextIcon || /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_style2.prefixCls, "-tab-next-icon")
   }));
 
   var navClassName = "".concat(_style2.prefixCls, "-nav");
-  var navClasses = (0, _classnames5.default)(navClassName, scrollAnimated ? "".concat(navClassName, "-animated") : "".concat(navClassName, "-no-animated"));
+  var navClasses = (0, _classnames8.default)(navClassName, scrollAnimated ? "".concat(navClassName, "-animated") : "".concat(navClassName, "-no-animated"));
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames5.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container"), 1), (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container-scrolling"), showNextPrev), _classnames4)),
+    className: (0, _classnames8.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container"), 1), (0, _defineProperty2.default)(_classnames4, "".concat(_style2.prefixCls, "-nav-container-scrolling"), showNextPrev), _classnames4)),
     ref: saveRef('container')
   }, prevButton, nextButton, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_style2.prefixCls, "-nav-wrap"),
@@ -624,7 +626,8 @@ ScrollableTabBarNode.propTypes = {
 };
 
 var TabBar = function TabBar(props) {
-  var _this8 = this;
+  var _this8 = this,
+      _classnames7;
 
   (0, _newArrowCheck2.default)(this, _this);
   var refs = (0, _react.useRef)({});
@@ -648,14 +651,26 @@ var TabBar = function TabBar(props) {
       getRef: getRef,
       saveRef: saveRef
     }
-  }, /*#__PURE__*/_react.default.createElement(TabBarRootNode, props, /*#__PURE__*/_react.default.createElement(ScrollableTabBarNode, props, /*#__PURE__*/_react.default.createElement(TabBarTabsNode, props), styleType === 'ink' ? /*#__PURE__*/_react.default.createElement(InkTabBarNode, props) : null)));
+  }, /*#__PURE__*/_react.default.createElement(TabBarRootNode, props, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    container: true,
+    className: (0, _classnames8.default)((0, _defineProperty2.default)({}, "".concat(_style2.prefixCls, "-srcoll-extra-warrper"), ['left', 'right'].includes(props.tabBarPosition))),
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flex: 1,
+    className: (0, _classnames8.default)((0, _defineProperty2.default)({}, "".concat(_style2.prefixCls, "-srcoll-box"), 1))
+  }, /*#__PURE__*/_react.default.createElement(ScrollableTabBarNode, props, /*#__PURE__*/_react.default.createElement(TabBarTabsNode, props), styleType === 'ink' ? /*#__PURE__*/_react.default.createElement(InkTabBarNode, props) : null)), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    justifyContent: "flex-end",
+    className: (0, _classnames8.default)((_classnames7 = {}, (0, _defineProperty2.default)(_classnames7, "".concat(_style2.prefixCls, "-extra-wapper"), 1), (0, _defineProperty2.default)(_classnames7, "".concat(_style2.prefixCls, "-extra-show"), props.extra), _classnames7))
+  }, props.extra))));
 }.bind(void 0);
 
 TabBar.propTypes = {
   onKeyDown: _propTypes.default.func.isRequired,
   onTabClick: _propTypes.default.func.isRequired,
   direction: _propTypes.default.string.isRequired,
-  styleType: _propTypes.default.string.isRequired
+  styleType: _propTypes.default.string.isRequired,
+  extra: _propTypes.default.node
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(TabBar);

package/lib/components/Tabs/Tabs.d.ts

@@ -22,6 +22,8 @@ export interface TabsProps {
     styleType?: StyleType;
     /** 尺寸 */
     size?: Size;
+    /** 头部插槽 */
+    extra?: ReactNode;
 }
-declare const _default: React.MemoExoticComponent<({ activeKey: _activeKey, defaultActiveKey, onChange: _onChange, destroyInactiveTabPane, children, className, tabBarPosition, direction, styleType, size, ...restProps }: TabsProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ activeKey: _activeKey, defaultActiveKey, onChange: _onChange, destroyInactiveTabPane, children, className, tabBarPosition, direction, styleType, size, extra, ...restProps }: TabsProps) => JSX.Element>;
 export default _default;

package/lib/components/Tabs/Tabs.js

@@ -35,7 +35,7 @@ var _TabContent = _interopRequireDefault(require("./TabContent"));
 
 var _style = require("./style");
 
-var _excluded = ["activeKey", "defaultActiveKey", "onChange", "destroyInactiveTabPane", "children", "className", "tabBarPosition", "direction", "styleType", "size"];
+var _excluded = ["activeKey", "defaultActiveKey", "onChange", "destroyInactiveTabPane", "children", "className", "tabBarPosition", "direction", "styleType", "size", "extra"];
 
 var _this2 = void 0;
 
@@ -139,6 +139,7 @@ var Tabs = function Tabs(_ref) {
       styleType = _ref$styleType === void 0 ? 'default' : _ref$styleType,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
+      extra = _ref.extra,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var panes = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this4);
@@ -192,7 +193,8 @@ var Tabs = function Tabs(_ref) {
     }),
     nextIcon: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
       type: "triangle-right"
-    })
+    }),
+    extra: extra
   });
 
   var tabContent = /*#__PURE__*/_react.default.createElement(_TabContent.default, {
@@ -230,7 +232,8 @@ Tabs.propTypes = {
   destroyInactiveTabPane: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.element), _propTypes.default.node]).isRequired,
   className: _propTypes.default.string,
-  direction: _propTypes.default.string
+  direction: _propTypes.default.string,
+  extra: _propTypes.default.node
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(Tabs);

package/lib/components/Tabs/index.d.ts

@@ -3,7 +3,7 @@ import { TabsProps } from './Tabs';
 import Pane, { TabPaneProps } from './Pane';
 import { TabBarPositions, Sizes, StyleTypes } from './shared';
 declare const ExportTabs: import("react").NamedExoticComponent<TabsProps> & {
-    readonly type: ({ activeKey: _activeKey, defaultActiveKey, onChange: _onChange, destroyInactiveTabPane, children, className, tabBarPosition, direction, styleType, size, ...restProps }: TabsProps) => JSX.Element;
+    readonly type: ({ activeKey: _activeKey, defaultActiveKey, onChange: _onChange, destroyInactiveTabPane, children, className, tabBarPosition, direction, styleType, size, extra, ...restProps }: TabsProps) => JSX.Element;
 } & {
     Pane: typeof Pane;
     /** @private 请勿使用 */