fix(SearchSelect): 操作优化 (#650)

uiwjs · Mar 10, 2022 · e3f4651 · e3f4651
1 parent 1e73f3d
commit e3f4651
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -65,6 +65,7 @@ export default function SearchSelect(props: SearchSelectProps) {
   const [selectedValue, setSelectedValue] = useState<Array<SearchSelectOptionData>>([]);
   const [selectedLabel, setSelectedLabel] = useState<string>('');
   const [selectIconType, setSelectIconType] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
   const omitTagCount = useMemo(
     () => (maxTagCount && selectedValue.length > maxTagCount ? selectedValue.length - maxTagCount : 0),
     [selectedValue.length],
@@ -149,28 +150,27 @@ export default function SearchSelect(props: SearchSelectProps) {
   // 渲染icon
   function renderSelectIcon(type: string) {
     let selectIconType;
-    if (type === 'enter' && allowClear && selectedValue) {
+    if (type === 'enter' && allowClear && (selectedValue.length > 0 || selectedLabel)) {
       selectIconType = 'close';
     } else {
       selectIconType = '';
     }
     setSelectIconType(selectIconType);
   }
   // handle change
-  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const value = e.target.value;
+  function handleInputChange(value: string) {
     setInnerIsOpen(true);
     setSelectedLabel(value);
     setSelectIconType(showSearch && value ? 'loading' : '');
     showSearch && onSearch && onSearch(value);
-    // handleSelectChange(value);
   }
   // 清除选中的值
-  function resetSelectedValue() {
-    setInnerIsOpen(false);
+  function resetSelectedValue(e: React.MouseEvent<any, MouseEvent>) {
+    e.stopPropagation();
+    inputRef.current?.focus();
     setSelectedValue([]);
-    setSelectedLabel('');
-    setSelectIconType('');
+    handleInputChange('');
+    setInnerIsOpen(false);
     handleSelectChange('', []);
   }
   function handleSelectChange(value: ValueType | Array<ValueType>, options: Array<SearchSelectOptionData>) {
@@ -186,11 +186,11 @@ export default function SearchSelect(props: SearchSelectProps) {
   }
 
   function onVisibleChange(open: boolean) {
+    setInnerIsOpen(open);
     if (!open) setSelectedLabel('');
     if (!isMultiple && selectedValue.length > 0) {
       setSelectedLabel(selectedValue[0].label);
     }
-    setInnerIsOpen(open);
   }
 
   return (
@@ -250,7 +250,10 @@ export default function SearchSelect(props: SearchSelectProps) {
                       color="#393E48"
                       {...tagProps}
                       closable
-                      onClose={() => handleItemsClick(index, item)}
+                      onClose={(e) => {
+                        e.stopPropagation();
+                        handleItemsClick(index, item);
+                      }}
                     >
                       {item.label}
                     </Tag>
@@ -266,9 +269,10 @@ export default function SearchSelect(props: SearchSelectProps) {
                 className={`${prefixCls}-input-contents`}
                 readOnly={!showSearch}
                 size={size}
+                ref={inputRef}
                 disabled={disabled}
                 onKeyDown={inputKeyDown}
-                onChange={handleInputChange}
+                onChange={(e) => handleInputChange(e.target.value)}
                 value={selectedLabel}
                 placeholder={selectedValue.length ? '' : placeholder}
               />
@@ -281,8 +285,9 @@ export default function SearchSelect(props: SearchSelectProps) {
           <Input
             readOnly={!showSearch}
             size={size}
+            ref={inputRef}
             disabled={disabled}
-            onChange={handleInputChange}
+            onChange={(e) => handleInputChange(e.target.value)}
             value={selectedLabel}
             placeholder={placeholder}
             addonAfter={

diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -61,7 +61,12 @@ const data = [
 
 const datas =[
   { label: '上海市',  key: 0 },
-  { label: '北京市',  key: 1 },
+  {
+    label: '北京市',  key: 1,
+    children:[
+      { label: '东城区', key: 10 },
+   ]
+  },
   { label: '成都市',  key: 2 },
 ]
 
@@ -92,7 +97,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
       <Col >
         <label>多选</label>
         <SearchTree
-          style={{ width:400 }}
+          style={{ width:300 }}
           allowClear={true}
           onSearch={(searchValue)=>console.log('multiple',searchValue)}
           onChange={onChange}
@@ -104,9 +109,9 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
     </Row>
     <label>单选</label>
     <Row>
-      <Col>
         <SearchTree
-          style={{width:400}}
+          style={{width:300}}
+          loading={true}
           multiple={false}
           allowClear={true}
           onSearch={(searchValue)=>console.log('singe',searchValue)}
@@ -115,10 +120,9 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
           options={datas}
           placeholder="请输入选择"
         />
-      </Col>
-      <Col>
+        <Col style={{marginLeft:20}}>
         <SearchTree
-          style={{width:400}}
+          style={{width:300}}
           multiple={false}
           allowClear={true}
           onSearch={(searchValue)=>console.log('singe',searchValue)}
@@ -127,7 +131,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
           options={data}
           placeholder="请输入选择"
         />
-      </Col>
+        </Col>
     </Row>
   </>
   )
@@ -145,7 +149,10 @@ import {  SearchTree } from 'uiw';
 const Demo = () => {
   return(
     <>
-      <SearchTree style={{ width:200 }} />
+      <SearchTree
+        style={{ width:200 }}
+        placeholder="请输入选择"
+      />
       <SearchTree
         style={{ width:200,marginTop:5 }}
         emptyOption={<span>暂无数据..</span>}
@@ -247,7 +254,7 @@ const form=useRef()
         }}
         fields={{
           searchTree: {
-            initialValue:[{ label: '东花市街道', key: '2-3-1' },{ label: '前门街道', key: '2-3-3' }],
+            initialValue:[ { label: '黄浦区', key: '1-0-1' }, { label: '卢湾区', key: '1-0-2' }],
             children: (
                 <SearchTree
                   allowClear={true}
@@ -276,11 +283,13 @@ const form=useRef()
         {({ fields, state, canSubmit }) => {
           return (
             <div>
-              <Row>
-                <Col fixed>{fields.searchTree}</Col>
+              <Row style={{display:'flex',flexDirection:'column'}}>
+                <div>多选</div>
+                <Col >{fields.searchTree}</Col>
               </Row>
-              <Row>
-                <Col fixed>{fields.searchTreeSinge}</Col>
+              <Row style={{display:'flex',flexDirection:'column'}}>
+                <label>单选</label>
+                <Col >{fields.searchTreeSinge}</Col>
               </Row>
               <Row>
                 <Col fixed>

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -25,7 +25,6 @@ export interface SearchTagInputProps<V> extends IProps, DropdownProps, DropConte
   size?: 'large' | 'default' | 'small';
   onChange: (selectedAll: Array<V>, selectd: V, isChecked: boolean) => void;
   onSearch?: (seachValue: string) => void;
-  // mode?: 'single' | 'multiple';
   loading?: boolean;
   placeholder?: string;
   emptyOption?: boolean | React.ReactNode;
@@ -35,7 +34,6 @@ export interface SearchTagInputProps<V> extends IProps, DropdownProps, DropConte
 function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputProps<V>) {
   const {
     prefixCls = 'w-search-tree',
-    mode = 'single',
     size = 'default',
     disabled = false,
     allowClear = false,
@@ -51,11 +49,10 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
     onChange,
     onSearch,
     emptyOption,
-    ...others
+    // ...others
   } = props;
 
   const cls = [prefixCls, className].filter(Boolean).join(' ').trim();
-  // const isMultiple = useMemo(() => mode === 'multiple', [mode]);
   const [innerIsOpen, setInnerIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState<Array<V>>(values);
   const optionRef = useRef<Array<V>>();
@@ -101,9 +98,10 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
   // 清除选中的值
   function resetSelectedValue(e: any) {
     e.stopPropagation();
+    inputRef.current?.focus();
+    handleInputChange('');
     setInnerIsOpen(false);
     setSelectedOption([]);
-    handleInputChange('');
     handleSelectChange([]);
   }
 

diff --git a/packages/react-search-tree/src/index.tsx b/packages/react-search-tree/src/index.tsx
@@ -155,7 +155,7 @@ function SearchTree<V extends SearchTagInputOption>(props: SearchTreeProps<V>) {
 
     let isEmpt = true;
     options.forEach((opt) => (isEmpt = isEmpt && !!opt.hideNode));
-    isEmptySet(isEmpt);
+    isEmptySet(typeof emptyOption === 'boolean' && isEmpt ? isEmpt : emptyOption);
   };
 
   return (