@zykj2024/much-library 1.2.0-beta.1 → 1.2.0

package/dist/McListSelect/comps/ListSelectPanel.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import '../index.less';
 export type BaseValueType = string | number;
 export interface Option {
@@ -108,6 +108,10 @@ export interface McListSelectPanelProps {
      * - 'sortable': 每项独占一行且可排序
      */
     selectedLayout?: 'block' | 'inline' | 'sortable';
+    /**
+     * 已选数量自定义渲染
+     */
+    selectedNumRender?: (selectedNum: number) => ReactNode;
     /**
      * 当前选中的值
      */

package/dist/McListSelect/comps/ListSelectPanel.js

@@ -44,6 +44,7 @@ var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
     _props$selectedLayout = props.selectedLayout,
     selectedLayout = _props$selectedLayout === void 0 ? 'block' : _props$selectedLayout,
+    selectedNumRender = props.selectedNumRender,
     value = props.value,
     onChange = props.onChange,
     style = props.style,
@@ -74,6 +75,9 @@ var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     setInexistentValueMap = _useState8[1];
   var optionsRef = useRef();
   var initFlag = useRef(false);
+  var selectedNum = useMemo(function () {
+    return selected.length;
+  }, [selected]);
 
   /* 备选列表搜索方法 */
   var _useAsync = useAsync( /*#__PURE__*/function () {
@@ -389,15 +393,15 @@ var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
         className: "mc-list-select-panel__card mc-list-select-panel__card__right",
         children: [/*#__PURE__*/_jsxs("div", {
           className: "mc-list-select-panel__card__header",
-          children: [/*#__PURE__*/_jsxs("span", {
-            children: ["\u5DF2\u9009", selected.length, "\u9879"]
+          children: [selectedNumRender ? selectedNumRender(selectedNum) : /*#__PURE__*/_jsxs("span", {
+            children: ["\u5DF2\u9009", selectedNum, "\u9879"]
           }), allowClear && /*#__PURE__*/_jsx(Button, {
             style: {
               height: 'auto',
               padding: 0
             },
             type: "link",
-            disabled: disabled || !selected.length,
+            disabled: disabled || !selectedNum,
             onClick: function onClick() {
               return changeHandle(reserved ? selected.filter(function (i) {
                 return !valueMap[i];
@@ -405,7 +409,7 @@ var ListSelectPanel = /*#__PURE__*/forwardRef(function (props, ref) {
             },
             children: "\u6E05\u7A7A"
           })]
-        }), !!selected.length ? /*#__PURE__*/_jsx(DndContext, {
+        }), !!selectedNum ? /*#__PURE__*/_jsx(DndContext, {
           onDragEnd: dragEnd,
           children: /*#__PURE__*/_jsx(SortableContext, {
             items: selected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zykj2024/much-library",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0",
   "description": "react library",
   "license": "MIT",
   "module": "dist/index.js",