@hi-ui/tabs 4.0.0-beta.16 → 4.0.0-beta.17

package/lib/cjs/TabList.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
+var tslib = require('tslib');
+
 var React = require('react');
 
 var env = require('@hi-ui/env');
@@ -45,33 +47,34 @@ var _role = 'tabs';
 
 var _prefix = classname.getPrefixCls(_role);
 
-var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _cx;
 
-  var data = _ref.data,
-      className = _ref.className,
-      style = _ref.style,
-      activeId = _ref.activeId,
-      defaultActiveId = _ref.defaultActiveId,
-      onChange = _ref.onChange,
-      onTabClick = _ref.onTabClick,
-      _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-      editable = _ref.editable,
-      onAdd = _ref.onAdd,
-      onDelete = _ref.onDelete,
-      draggable = _ref.draggable,
-      onDragStart = _ref.onDragStart,
-      onDragOver = _ref.onDragOver,
-      onDrop = _ref.onDrop,
-      onDragEnd = _ref.onDragEnd,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'line' : _ref$type,
-      extra = _ref.extra;
-
-  var _a;
+  var _b;
+
+  var data = _a.data,
+      className = _a.className,
+      style = _a.style,
+      activeId = _a.activeId,
+      defaultActiveId = _a.defaultActiveId,
+      onChange = _a.onChange,
+      onTabClick = _a.onTabClick,
+      _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      editable = _a.editable,
+      onAdd = _a.onAdd,
+      onDelete = _a.onDelete,
+      draggable = _a.draggable,
+      onDragStart = _a.onDragStart,
+      onDragOver = _a.onDragOver,
+      onDrop = _a.onDrop,
+      onDragEnd = _a.onDragEnd,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'line' : _a$type,
+      extra = _a.extra,
+      rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
 
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
     if (typeAssertion.isUndef(defaultActiveId)) {
@@ -115,11 +118,11 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setActiveTabId(key);
     }
   }, [activeTabId, onTabClick, setActiveTabId]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
     className: classname.cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
+  }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     className: prefixCls + "__left-btn",
     effect: true,
     icon: /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null),
@@ -191,7 +194,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     prefixCls: prefixCls,
     direction: direction,
     tabListRef: innerRef,
-    itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
+    itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
   }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
     effect: true,
     className: prefixCls + "__right-btn",

package/lib/cjs/TabPane.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 
+var tslib = require('tslib');
+
 var React = require('react');
 
 function _interopDefaultLegacy(e) {
@@ -25,15 +27,17 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var TabPane = function TabPane(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      active = _ref.active;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+var TabPane = function TabPane(_a) {
+  var children = _a.children,
+      className = _a.className,
+      style = _a.style,
+      active = _a.active,
+      rest = tslib.__rest(_a, ["children", "className", "style", "active"]);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     style: style,
     className: className
-  }, active ? children : null);
+  }, rest), active ? children : null);
 };
 
 exports.TabPane = TabPane;

package/lib/esm/TabList.js

@@ -7,6 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef, useCallback } from 'react';
 import { __DEV__ } from '@hi-ui/env';
 import { TabItem } from './TabItem.js';
@@ -20,33 +21,34 @@ var _role = 'tabs';
 
 var _prefix = getPrefixCls(_role);
 
-var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _cx;
 
-  var data = _ref.data,
-      className = _ref.className,
-      style = _ref.style,
-      activeId = _ref.activeId,
-      defaultActiveId = _ref.defaultActiveId,
-      onChange = _ref.onChange,
-      onTabClick = _ref.onTabClick,
-      _ref$prefixCls = _ref.prefixCls,
-      prefixCls = _ref$prefixCls === void 0 ? _prefix : _ref$prefixCls,
-      _ref$direction = _ref.direction,
-      direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
-      editable = _ref.editable,
-      onAdd = _ref.onAdd,
-      onDelete = _ref.onDelete,
-      draggable = _ref.draggable,
-      onDragStart = _ref.onDragStart,
-      onDragOver = _ref.onDragOver,
-      onDrop = _ref.onDrop,
-      onDragEnd = _ref.onDragEnd,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'line' : _ref$type,
-      extra = _ref.extra;
-
-  var _a;
+  var _b;
+
+  var data = _a.data,
+      className = _a.className,
+      style = _a.style,
+      activeId = _a.activeId,
+      defaultActiveId = _a.defaultActiveId,
+      onChange = _a.onChange,
+      onTabClick = _a.onTabClick,
+      _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'horizontal' : _a$direction,
+      editable = _a.editable,
+      onAdd = _a.onAdd,
+      onDelete = _a.onDelete,
+      draggable = _a.draggable,
+      onDragStart = _a.onDragStart,
+      onDragOver = _a.onDragOver,
+      onDrop = _a.onDrop,
+      onDragEnd = _a.onDragEnd,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'line' : _a$type,
+      extra = _a.extra,
+      rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
 
   var _useUncontrolledState = useUncontrolledState(function () {
     if (isUndef(defaultActiveId)) {
@@ -90,11 +92,11 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setActiveTabId(key);
     }
   }, [activeTabId, onTabClick, setActiveTabId]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: cx(prefixCls + "__list", (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
     ref: ref
-  }, showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
+  }, rest), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
     className: prefixCls + "__left-btn",
     effect: true,
     icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
@@ -166,7 +168,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     prefixCls: prefixCls,
     direction: direction,
     tabListRef: innerRef,
-    itemRef: (_a = itemsRef.current) === null || _a === void 0 ? void 0 : _a[activeTabId]
+    itemRef: (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[activeTabId]
   }))), showScrollBtn && direction === 'horizontal' && /*#__PURE__*/React.createElement(IconButton, {
     effect: true,
     className: prefixCls + "__right-btn",

package/lib/esm/TabPane.js

@@ -7,17 +7,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { __rest } from 'tslib';
 import React from 'react';
 
-var TabPane = function TabPane(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      style = _ref.style,
-      active = _ref.active;
-  return /*#__PURE__*/React.createElement("div", {
+var TabPane = function TabPane(_a) {
+  var children = _a.children,
+      className = _a.className,
+      style = _a.style,
+      active = _a.active,
+      rest = __rest(_a, ["children", "className", "style", "active"]);
+
+  return /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     className: className
-  }, active ? children : null);
+  }, rest), active ? children : null);
 };
 
 export { TabPane };

package/lib/types/TabItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TabPaneProps } from './TabPane';
 export declare const TabItem: React.ForwardRefExoticComponent<TabItemProps & React.RefAttributes<HTMLDivElement | null>>;
-interface TabItemProps extends TabPaneProps {
+interface TabItemProps extends Omit<TabPaneProps, 'itemRef' | 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
     active: boolean;
     draggable?: boolean;
     onTabClick: (key: React.ReactText, event: React.MouseEvent) => void;

package/lib/types/TabList.d.ts

@@ -1,13 +1,23 @@
 import React from 'react';
 import { TabPaneProps } from './TabPane';
+import { HiBaseHTMLProps } from '@hi-ui/core';
 export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface TabListProps {
-    style?: React.CSSProperties;
-    className?: string;
-    prefixCls?: string;
+export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
+    /**
+     * tabs 面板数据
+     */
     data: TabPaneProps[];
+    /**
+     * 是否可编辑
+     */
     direction?: 'horizontal' | 'vertical';
+    /**
+     * `activeId` 改变的回调
+     */
     onChange?: (tabId: React.ReactText) => void;
+    /**
+     * 标签点击触发回调
+     */
     onTabClick?: (tabId: React.ReactText, event: React.MouseEvent) => void;
     /**
      * 默认高亮id
@@ -17,8 +27,17 @@ export interface TabListProps {
      * 高亮id
      */
     activeId?: React.ReactText;
+    /**
+     * 是否可编辑
+     */
     editable?: boolean;
+    /**
+     * 是否可拖拽
+     */
     draggable?: boolean;
+    /**
+     * 布局类型
+     */
     type?: 'desc' | 'card' | 'button' | 'line';
     /**
      * 右侧的拓展区域
@@ -32,17 +51,29 @@ export interface TabListProps {
      * 节点删除时时触发
      */
     onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    /**
+     * 节点开始拖拽时触发
+     */
     onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
     }) => void;
+    /**
+     * 节点拖拽移动时触发
+     */
     onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
         targetNode: TabPaneProps;
     }) => void;
+    /**
+     * 节点拖拽放下时触发
+     */
     onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
         dragNode: TabPaneProps;
         targetNode: TabPaneProps;
         direction: 'prev' | 'next' | null;
     }) => void;
+    /**
+     * 节点拖拽成功时触发
+     */
     onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
     }) => void;

package/lib/types/TabPane.d.ts

@@ -1,12 +1,29 @@
 import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
 export declare const TabPane: React.FC<TabPaneProps>;
-export interface TabPaneProps {
-    style?: React.CSSProperties;
-    className?: string;
+export interface TabPaneProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 标签是否禁用
+     */
     disabled?: boolean;
+    /**
+     * 每个标签的唯一标识
+     */
     tabId: React.ReactText;
+    /**
+     * 选项卡头显示文字
+     */
     tabTitle: React.ReactNode;
+    /**
+     * 选项卡头描述文字，仅对 type='desc'时生效
+     */
     tabDesc?: React.ReactNode;
+    /**
+     * 标签是否可以关闭，仅对 type='editable'时生效
+     */
     closeable?: boolean;
+    /**
+     * 标签是否激活
+     */
     active?: boolean;
 }

package/lib/types/Tabs.d.ts

@@ -1,26 +1,11 @@
 import React from 'react';
 import { TabPaneProps } from './TabPane';
+import { HiBaseHTMLProps } from '@hi-ui/core';
 /**
  * TODO: What is Tabs
  */
 export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface TabsProps {
-    /**
-     * 组件默认的选择器类
-     */
-    prefixCls?: string;
-    /**
-     * 组件的语义化 Role 属性
-     */
-    role?: string;
-    /**
-     * 组件的注入选择器类
-     */
-    className?: string;
-    /**
-     * 组件的注入样式
-     */
-    style?: React.CSSProperties;
+export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'onDragOver' | 'onDragStart' | 'onDrop'> {
     /**
      * 是否可拖拽
      */
@@ -69,17 +54,29 @@ export interface TabsProps {
      * 节点删除时时触发
      */
     onDelete?: (deletedNode: TabPaneProps, index: number) => void;
+    /**
+     * 节点开始拖拽时触发
+     */
     onDragStart?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
     }) => void;
+    /**
+     * 节点拖拽移动时触发
+     */
     onDragOver?: (e: React.DragEvent<HTMLDivElement>, { targetNode }: {
         targetNode: TabPaneProps;
     }) => void;
+    /**
+     * 节点拖拽放下时触发
+     */
     onDrop?: (e: React.DragEvent<HTMLDivElement>, { dragNode, targetNode, direction, }: {
         dragNode: TabPaneProps;
         targetNode: TabPaneProps;
         direction: 'prev' | 'next' | null;
     }) => void;
+    /**
+     * 节点拖拽成功时触发
+     */
     onDragEnd?: (e: React.DragEvent<HTMLDivElement>, { dragNode }: {
         dragNode: TabPaneProps;
     }) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/tabs",
-  "version": "4.0.0-beta.16",
+  "version": "4.0.0-beta.17",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@hi-ui/classname": "^4.0.0-beta.0",
+    "@hi-ui/core": "^4.0.0-beta.8",
     "@hi-ui/core-css": "^4.0.0-beta.5",
     "@hi-ui/env": "^4.0.0-beta.0",
     "@hi-ui/icon-button": "^4.0.0-beta.9",
@@ -60,5 +61,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "7f47840510e6dfce429eeed1591c154e321cd14f"
+  "gitHead": "64cc3305632f0d88f852f4a95cba7c27ff388a2d"
 }