@hi-ui/hiui 3.9.0-rc → 3.9.0-rc.1

package/CHANGELOG.md

@@ -3,7 +3,8 @@
 # 3.8.0-rc
 
 - 新增 `Table` 组件 `hiddenColKeys` 和 `onHiddenColKeysChange` 受控控制列显隐  [#1994](https://github.com/XiaoMi/hiui/issues/1994)
-- 新增 `Input` 组件的支持 placeholder 受控动态更新  [#1982](https://github.com/XiaoMi/hiui/issues/1982)
+- 新增 `Input` 组件支持 placeholder 受控动态更新  [#1982](https://github.com/XiaoMi/hiui/issues/1982)
+- 新增 `Table` 组件支持 checkAll 复选框右侧自定义操作按钮  [#2007](https://github.com/XiaoMi/hiui/issues/2007)
 - 修复 `Select` 组件高亮词搜索存在正则注入  [#1972](https://github.com/XiaoMi/hiui/issues/1972)
 - 修复 `Table` 组件 resizable 调节列宽功能失效  [#1970](https://github.com/XiaoMi/hiui/issues/1970)
 - 修复 `Input` 组件的 placeholder 没法动态更新  [#1970](https://github.com/XiaoMi/hiui/issues/1982)

package/es/table/BodyTable.js

@@ -32,6 +32,7 @@ var BodyTable = function BodyTable(_ref) {
       emptyContent = _ref.emptyContent;
 
   var _useContext = (0, _react.useContext)(_context["default"]),
+      checkboxColWidth = _useContext.checkboxColWidth,
       bordered = _useContext.bordered,
       _useContext$data = _useContext.data,
       data = _useContext$data === void 0 ? [] : _useContext$data,
@@ -238,7 +239,7 @@ var BodyTable = function BodyTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("table", {
     ref: tableRef
   }, /*#__PURE__*/_react["default"].createElement("colgroup", null, columnsgroup.map(function (c, index) {
-    var width = c === 'checkbox' ? 50 : c.width;
+    var width = c === 'checkbox' ? checkboxColWidth : c.width;
     return /*#__PURE__*/_react["default"].createElement("col", {
       key: index,
       className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefix, "__col__hover--highlight"), showColHighlight && hoverColIndex === c.dataKey)),

package/es/table/HeaderTable.js

@@ -39,6 +39,7 @@ var HeaderTable = function HeaderTable(_ref) {
   var rightFixedIndex = _ref.rightFixedIndex;
 
   var _useContext = (0, _react.useContext)(_context["default"]),
+      checkboxColWidth = _useContext.checkboxColWidth,
       rowSelection = _useContext.rowSelection,
       propsData = _useContext.data,
       columns = _useContext.columns,
@@ -189,7 +190,9 @@ var HeaderTable = function HeaderTable(_ref) {
     return col.sorter;
   }).map(function (sorterCol) {
     return sorterCol.dataKey;
-  }); // ******************** 行渲染 ***********************
+  }); // 自定义 checkboxAll 侧边 icon
+
+  var checkboxFilterIcon = rowSelection && rowSelection.checkAllOptions && rowSelection.checkAllOptions.filterIcon || null; // ******************** 行渲染 ***********************
 
   var renderBaseRow = function renderBaseRow(cols, index, isSticky) {
     var _colums = [rowSelection && index === 0 && 'checkbox', expandedRender && index === 0 && 'expandedButton'].concat(cols).filter(function (column) {
@@ -214,7 +217,7 @@ var HeaderTable = function HeaderTable(_ref) {
           }),
           style: {
             boxSizing: 'border-box',
-            width: 50,
+            width: checkboxColWidth,
             height: 'auto',
             backgroundColor: '#fbfbfb'
           }
@@ -232,7 +235,7 @@ var HeaderTable = function HeaderTable(_ref) {
               rowSelection.onChange(selectedIds, targetItems, !isAllChecked);
             }
           }
-        }));
+        }), checkboxFilterIcon);
       } else if (c === 'expandedButton') {
         cell = /*#__PURE__*/_react["default"].createElement("th", {
           key: "expandedButton",
@@ -343,7 +346,7 @@ var HeaderTable = function HeaderTable(_ref) {
     return /*#__PURE__*/_react["default"].createElement("col", {
       key: index,
       style: {
-        width: c === 'checkbox' ? 50 : width,
+        width: c === 'checkbox' ? checkboxColWidth : width,
         minWidth: width
       }
     });

package/es/table/Row.js

@@ -76,6 +76,7 @@ var Row = function Row(_ref) {
   }, [propsExpanded]);
 
   var _useContext = (0, _react.useContext)(_context["default"]),
+      checkboxColWidth = _useContext.checkboxColWidth,
       errorRowKeys = _useContext.errorRowKeys,
       rowSelection = _useContext.rowSelection,
       highlightedRowKeys = _useContext.highlightedRowKeys,
@@ -177,7 +178,7 @@ var Row = function Row(_ref) {
     }
   }, rowSelection && isFixed !== 'right' && !isSumRow && !isAvgRow && /*#__PURE__*/_react["default"].createElement("td", {
     style: {
-      width: 50
+      width: checkboxColWidth
     },
     className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefix, "__col--sticky"), isSticky))
   }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {

package/es/table/Table.js

@@ -445,9 +445,12 @@ var Table = function Table(_ref) {
     } else {
       onDropCallback && updateData();
     }
-  }, [data, draggable]);
+  }, [data, draggable]); // 自定义设置 checkbox 列宽度
+
+  var checkboxColWidth = rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth : 50;
   return /*#__PURE__*/_react["default"].createElement(_context["default"].Provider, {
     value: {
+      checkboxColWidth: checkboxColWidth,
       disabledData: disabledData,
       rowExpandable: rowExpandable,
       setting: setting,

package/es/table/index.d.ts

@@ -38,10 +38,17 @@ export type TableFixedOption = {
   left?: string
   right?: string
 }
+
+export type TableCheckAllOptions = {
+  filterIcon?: React.ReactNode
+}
+
 export type TableRowSelection = {
   selectedRowKeys?: string[] | number[]
   getCheckboxConfig?: (rowData: object) => object
   onChange?: (selectedRowKeys: string | number, targetRow?: object | object[], shouldChecked?: boolean) => void
+  checkboxColWidth?: number
+  checkAllOptions?: TableCheckAllOptions
 }
 
 export type TableHeaderRowReturn = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "3.9.0-rc",
+  "version": "3.9.0-rc.1",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",