diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md index 758f117fca..944b38657f 100644 --- a/packages/react-transfer/README.md +++ b/packages/react-transfer/README.md @@ -1,6 +1,10 @@ Transfer 双栏穿梭选择框控件 === +[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-transfer/file/README.md) +[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-transfer.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-transfer) +[![npm version](https://img.shields.io/npm/v/@uiw/react-transfer.svg?label=@uiw/react-transfer)](https://npmjs.com/@uiw/react-transfer) + 选择一个或以上的选项后,点击左右的方向按钮,可以把选中的选项移动到另一栏为选中。在 v4.14.0+ 添加。 ## 基础用法 diff --git a/packages/react-transfer/src/index.tsx b/packages/react-transfer/src/index.tsx index bd0a85319f..03e8d04438 100644 --- a/packages/react-transfer/src/index.tsx +++ b/packages/react-transfer/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { IProps } from '@uiw/utils'; import Card from '@uiw/react-card'; import Icon from '@uiw/react-icon'; @@ -41,6 +41,7 @@ function Transfer(props: TransferProps) { const [searchValueLeft, searchValueLeftSet] = useState(''); const [searchValueRight, searchValueRightSet] = useState(''); const [selectedOptions, selectedOptionSet] = useState>(options || []); + const selectedOptionsShowCount = useRef(0); const [selectOption, selectOptionSet] = useState>(new Map()); const [leftSelectedKeys, leftSelectedKeySet] = useState>([]); const [rightSelectedKeys, rightSelectedKeySet] = useState>([]); @@ -56,6 +57,7 @@ function Transfer(props: TransferProps) { }, [JSON.stringify(value)]); const hiddenNode = (callBackfn: (child: TreeData) => boolean) => { + selectedOptionsShowCount.current = 0; const hiddenNodeForSeach = (childrens: TreeData[]) => { childrens.forEach((child: TreeData) => { const isHide = callBackfn(child); // && parentIsHide; @@ -65,6 +67,9 @@ function Transfer(props: TransferProps) { child.hideNode = isHide && !find; } else { child.hideNode = isHide; + if (!child.hideNode) { + selectedOptionsShowCount.current++; + } } }); }; @@ -83,12 +88,7 @@ function Transfer(props: TransferProps) { selectOptionSet(selectOptionTemp); }; - const rightTreeOnSelected = ( - selectedKeys: Array, - _1: any, - _2: boolean, - evn: TreeData, - ) => { + const rightTreeOnSelected = (selectedKeys: Array) => { rightSelectedKeySet(selectedKeys); selectedKeys.forEach((key) => { selectOption.delete(key!); @@ -105,7 +105,6 @@ function Transfer(props: TransferProps) { } }; const iteratorParent = (child: TreeData) => { - // 向上迭代 if (child.parent) { const selectCount = child.parent.children.filter((child: TreeData) => !selectOption.get(child.key!)).length; addOrDel(child.parent.key, child.parent.label, selectCount === 0); @@ -161,7 +160,7 @@ function Transfer(props: TransferProps) {
{showSearch && (