@hi-ui/check-select 5.0.0-experimental.2 → 5.0.0-experimental.4

package/lib/cjs/CheckSelect.js

@@ -107,7 +107,8 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     renderExtraHeader = _a.renderExtraHeader,
     classNamesProp = _a.classNames,
     stylesProp = _a.styles,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles"]);
+    innerRef = _a.innerRef,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles", "innerRef"]);
   var _useGlobalContext = core.useGlobalContext(),
     globalSize = _useGlobalContext.size,
     checkSelectConfig = _useGlobalContext.checkSelect;
@@ -332,12 +333,19 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     setFocusedIndex(defaultIndex);
   }, [defaultIndex, menuVisible]);
   var renderDefaultFooter = function renderDefaultFooter() {
-    var extra = renderExtraFooter ? renderExtraFooter() : null;
+    var CheckAllNode = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+      indeterminate: showIndeterminate,
+      checked: showAllChecked,
+      onChange: toggleCheckAll,
+      disabled: !(dropdownItems === null || dropdownItems === void 0 ? void 0 : dropdownItems.length)
+    }, i18n.get('checkSelect.checkAll'));
+    var extra = renderExtraFooter ? renderExtraFooter(CheckAllNode) : null;
     if (showCheckAll) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
         indeterminate: showIndeterminate,
         checked: showAllChecked,
-        onChange: toggleCheckAll
+        onChange: toggleCheckAll,
+        disabled: !(dropdownItems === null || dropdownItems === void 0 ? void 0 : dropdownItems.length)
       }, i18n.get('checkSelect.checkAll')), extra);
     }
     return extra;
@@ -380,6 +388,40 @@ var CheckSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }
     return acc;
   }, {});
+  React.useImperativeHandle(innerRef, function () {
+    return {
+      checkAll: function checkAll(checked) {
+        if (checked === void 0) {
+          checked = true;
+        }
+        if (checked) {
+          if (!showAllChecked) toggleCheckAll();
+        } else {
+          if (showAllChecked) toggleCheckAll();
+        }
+      },
+      showOnlyChecked: function showOnlyChecked(onlyChecked) {
+        if (onlyChecked === void 0) {
+          onlyChecked = true;
+        }
+        if (!showOnlyShowChecked) return;
+        if (disabled) return;
+        if (onlyChecked) {
+          setFilterItems(function () {
+            return mergedData.filter(function (item) {
+              return value.includes(item.id);
+            });
+          });
+          menuVisibleAction.on();
+          expandedViewRef.current = 'onlyChecked';
+        } else {
+          if (filterItems) setFilterItems(null);
+          menuVisibleAction.on();
+          expandedViewRef.current = 'normal';
+        }
+      }
+    };
+  });
   return /*#__PURE__*/React__default["default"].createElement(context.CheckSelectProvider, {
     value: Object.assign(Object.assign({}, context$1), {
       classNames: classNames,

package/lib/esm/CheckSelect.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useRef, useCallback, useMemo, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useCallback, useMemo, useState, useEffect, useImperativeHandle } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useCheckSelect } from './use-check-select.js';
@@ -93,7 +93,8 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     renderExtraHeader = _a.renderExtraHeader,
     classNamesProp = _a.classNames,
     stylesProp = _a.styles,
-    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles"]);
+    innerRef = _a.innerRef,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "disabled", "clearable", "showCheckAll", "showOnlyShowChecked", "placeholder", "displayRender", "onSelect", "height", "itemHeight", "virtual", "visible", "onOpen", "onClose", "onClear", "appearance", "invalid", "dataSource", "searchOnInit", "filterOption", "searchable", "render", "renderExtraFooter", "onSearch", "onItemCreate", "creatableInSearch", "fieldNames", "checkedOnEntered", "customRender", "tagInputProps", "size", "prefix", "suffix", "onKeyDown", "keyword", "clearSearchOnClosed", "label", "showIndicator", "renderExtraHeader", "classNames", "styles", "innerRef"]);
   var _useGlobalContext = useGlobalContext(),
     globalSize = _useGlobalContext.size,
     checkSelectConfig = _useGlobalContext.checkSelect;
@@ -318,12 +319,19 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     setFocusedIndex(defaultIndex);
   }, [defaultIndex, menuVisible]);
   var renderDefaultFooter = function renderDefaultFooter() {
-    var extra = renderExtraFooter ? renderExtraFooter() : null;
+    var CheckAllNode = /*#__PURE__*/React.createElement(Checkbox, {
+      indeterminate: showIndeterminate,
+      checked: showAllChecked,
+      onChange: toggleCheckAll,
+      disabled: !(dropdownItems === null || dropdownItems === void 0 ? void 0 : dropdownItems.length)
+    }, i18n.get('checkSelect.checkAll'));
+    var extra = renderExtraFooter ? renderExtraFooter(CheckAllNode) : null;
     if (showCheckAll) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
         indeterminate: showIndeterminate,
         checked: showAllChecked,
-        onChange: toggleCheckAll
+        onChange: toggleCheckAll,
+        disabled: !(dropdownItems === null || dropdownItems === void 0 ? void 0 : dropdownItems.length)
       }, i18n.get('checkSelect.checkAll')), extra);
     }
     return extra;
@@ -366,6 +374,40 @@ var CheckSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return acc;
   }, {});
+  useImperativeHandle(innerRef, function () {
+    return {
+      checkAll: function checkAll(checked) {
+        if (checked === void 0) {
+          checked = true;
+        }
+        if (checked) {
+          if (!showAllChecked) toggleCheckAll();
+        } else {
+          if (showAllChecked) toggleCheckAll();
+        }
+      },
+      showOnlyChecked: function showOnlyChecked(onlyChecked) {
+        if (onlyChecked === void 0) {
+          onlyChecked = true;
+        }
+        if (!showOnlyShowChecked) return;
+        if (disabled) return;
+        if (onlyChecked) {
+          setFilterItems(function () {
+            return mergedData.filter(function (item) {
+              return value.includes(item.id);
+            });
+          });
+          menuVisibleAction.on();
+          expandedViewRef.current = 'onlyChecked';
+        } else {
+          if (filterItems) setFilterItems(null);
+          menuVisibleAction.on();
+          expandedViewRef.current = 'normal';
+        }
+      }
+    };
+  });
   return /*#__PURE__*/React.createElement(CheckSelectProvider, {
     value: Object.assign(Object.assign({}, context), {
       classNames: classNames,

package/lib/types/CheckSelect.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { UseCheckSelectProps } from './use-check-select';
 import type { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
-import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem } from './types';
+import { CheckSelectAppearanceEnum, CheckSelectDataItem, CheckSelectItemEventData, CheckSelectMergedItem, CheckSelectHelper } from './types';
 import { TagInputMockProps } from '@hi-ui/tag-input';
 import { PickerProps, PickerSemanticName } from '@hi-ui/picker';
 import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
@@ -14,7 +14,7 @@ export type CheckSelectSemanticName = PickerSemanticName | 'option' | 'optionGro
 export type CheckSelectSemanticClassNames = SemanticClassNamesType<CheckSelectProps, CheckSelectSemanticName>;
 export type CheckSelectSemanticStyles = SemanticStylesType<CheckSelectProps, CheckSelectSemanticName>;
 export type CheckSelectSemantic = ComponentSemantic<CheckSelectSemanticClassNames, CheckSelectSemanticStyles>;
-export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable' | 'header' | 'footer' | 'classNames' | 'styles'>, UseCheckSelectProps, CheckSelectSemantic {
+export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrollable' | 'header' | 'footer' | 'classNames' | 'styles' | 'innerRef'>, UseCheckSelectProps, CheckSelectSemantic {
     /**
      * 设置虚拟滚动容器的可视高度。暂不对外暴露
      * @private
@@ -86,7 +86,7 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
     /**
      * 自定义下拉菜单底部渲染
      */
-    renderExtraFooter?: () => React.ReactNode;
+    renderExtraFooter?: (CheckAllNode?: React.ReactNode) => React.ReactNode;
     /**
      * 自定义下拉菜单顶部渲染
      */
@@ -143,6 +143,10 @@ export interface CheckSelectProps extends Omit<PickerProps, 'trigger' | 'scrolla
      * 是否展示箭头
      */
     showIndicator?: boolean;
+    /**
+     * 提供辅助方法的内部引用
+     */
+    innerRef?: React.Ref<CheckSelectHelper>;
 }
 export declare const CheckSelectOption: React.ForwardRefExoticComponent<Pick<CheckSelectOptionProps, keyof CheckSelectOptionProps> & React.RefAttributes<HTMLDivElement | null>>;
 export interface CheckSelectOptionProps extends HiBaseHTMLProps {

package/lib/types/types.d.ts

@@ -50,3 +50,18 @@ export interface FlattedCheckSelectDataItem extends CheckSelectDataItem {
 export interface CheckSelectItemEventData extends FlattedCheckSelectDataItem, CheckSelectRequiredProps {
 }
 export type CheckSelectAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;
+/**
+ * CheckSelect 通过 innerRef 暴露的辅助方法
+ */
+export interface CheckSelectHelper {
+    /**
+     * 全选/取消全选当前列表中的可选项
+     * @param checked 默认 true：全选 (非全选状态下)；传 false 时取消全选 (全选状态下)
+     */
+    checkAll: (checked?: boolean) => void;
+    /**
+     * 仅显示已选 / 显示全部
+     * @param onlyChecked 默认 true：仅显示已选项并打开下拉；传 false 时显示全部并打开下拉
+     */
+    showOnlyChecked: (onlyChecked?: boolean) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/check-select",
-  "version": "5.0.0-experimental.2",
+  "version": "5.0.0-experimental.4",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",