style(SearchSelect): 样式和文档优化 (#744)

uiwjs · Apr 6, 2022 · f988af3 · f988af3
1 parent c7bc486
commit f988af3
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 44 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -39,7 +39,7 @@ const Demo = () => {
        <SearchSelect
          mode="single"
          style={{ width: 200 }}
-         placeholder="请输入选择"
+         placeholder="请选择选项"
          option={option}
        />
      </Row>
@@ -48,7 +48,8 @@ const Demo = () => {
        <SearchSelect
          mode="multiple"
          style={{ width: 200 }}
-         placeholder="请输入选择"
+         allowClear={true}
+         placeholder="请选择选项"
          option={option}
        />
      </Row>
@@ -57,7 +58,8 @@ const Demo = () => {
        <SearchSelect
          mode="single"
          style={{ width: 200 }}
-         placeholder="请输入选择"
+         allowClear={true}
+         placeholder="请选择选项"
          option={option}
          disabled={true}
        />
@@ -93,8 +95,8 @@ const Demo = () => {
             style={{ width: 150 }}
             option={option}
             value={[1]}
-            showSearch={true}
-            placeholder="请输入选择"
+            allowClear={true}
+            placeholder="请选择选项"
             size={'small'}
           />
         </Row>
@@ -106,8 +108,8 @@ const Demo = () => {
             style={{ width: 175 }}
             option={option}
             value={[2]}
-            showSearch={true}
-            placeholder="请输入选择"
+            allowClear={true}
+            placeholder="请选择选项"
           />
         </Row>
       </Col>
@@ -118,8 +120,8 @@ const Demo = () => {
             style={{ width: 200 }}
             option={option}
             value={[3]}
-            showSearch={true}
-            placeholder="请输入选择"
+            allowClear={true}
+            placeholder="请选择选项"
             size={'large'}
           />
         </Row>
@@ -168,7 +170,7 @@ const Demo = () => {
            console.log('value', value)
            setValue(value)
          }}
-         placeholder="请输入选择"
+         placeholder="请选择选项"
        />
      </Row>
      <Row>
@@ -183,7 +185,7 @@ const Demo = () => {
            setLabelValue(value)
          }}
          plac
-         placeholder="请输入选择"
+         placeholder="请选择选项"
        />
      </Row>
     </Row>
@@ -235,7 +237,7 @@ const Demo = () => {
           valueAmount={valueAmount}
           allowClear
           value={values}
-          placeholder="请输入选择"
+          placeholder="请选择选项"
           onSearch={handleSearch}
           // onSelect={(value)=>console.log('onSelect',value)}
           loading={loading}
@@ -300,7 +302,7 @@ const Demo = () => {
           maxTagCount={maxTagCount}
           allowClear
           value={values}
-          placeholder="请输入选择"
+          placeholder="请选择选项"
           onSearch={handleSearch}
           loading={loading}
           option={option}
@@ -335,6 +337,7 @@ const Demo = () => {
     { label: 'a8', value: 8 },
   ]
 
+  const [value, setValue] = React.useState([1,7]);
   const [values, setValues] = React.useState([1,7]);
   const [option, setOption] = React.useState(selectOption);
   const [loading, setLoading] = React.useState(false);
@@ -350,19 +353,36 @@ const Demo = () => {
 
   return(
     <Row style={{ marginLeft: 10 }}>
-      <SearchSelect
-        mode="multiple"
-        showSearch={true}
-        value={values}
-        option={option}
-        loading={loading}
-        onSearch={handleSearch}
-        placeholder="请输入选择"
-        style={{ width: 200 }}
-        onChange={(value) => {
-          setValues(value)
-        }}
-      />
+      <Col fixed style={{width:200}}>
+        <SearchSelect
+          mode="singe"
+          showSearch={true}
+          value={value}
+          option={option}
+          loading={loading}
+          onSearch={handleSearch}
+          placeholder="请选择选项"
+          style={{ width: 200 }}
+          onChange={(value) => {
+            setValue(value)
+          }}
+        />
+      </Col>
+      <Col fixed style={{width:200, marginLeft: 20}}>
+        <SearchSelect
+          mode="multiple"
+          showSearch={true}
+          value={values}
+          option={option}
+          loading={loading}
+          onSearch={handleSearch}
+          placeholder="请选择选项"
+          style={{ width: 200 }}
+          onChange={(value) => {
+            setValues(value)
+          }}
+        />
+      </Col>
     </Row>
   );
 };
@@ -436,7 +456,7 @@ const Demo = () => {
                 showSearch={true}
                 mode="multiple"
                 disabled={false}
-                placeholder="请输入选择"
+                placeholder="请选择选项"
                 onSearch={handleSearch}
                 onChange={(v)=>{
                   console.log('onChange',v)
@@ -455,7 +475,7 @@ const Demo = () => {
                 showSearch={true}
                 allowClear
                 disabled={false}
-                placeholder="请输入选择"
+                placeholder="请选择选项"
                 onSearch={handleSearch}
                 onChange={(v)=>{
                   console.log('onChange',v)

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -55,7 +55,7 @@ export default function SearchSelect(props: SearchSelectProps) {
     isOpen,
     value,
     defaultValue,
-    showSearch,
+    showSearch = false,
     tagProps = {},
     placeholder,
     onSearch,
@@ -265,8 +265,13 @@ export default function SearchSelect(props: SearchSelectProps) {
         style={{ width: '100%', maxWidth: 'none', ...style }}
       >
         {isMultiple ? (
-          <div className={[`${prefixCls}-inner`, `${prefixCls}-${size}`].filter(Boolean).join(' ').trim()}>
-            <div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
+          <div
+            className={[`${prefixCls}-inner`, `${prefixCls}-search-${showSearch}`, `${prefixCls}-${size}`]
+              .filter(Boolean)
+              .join(' ')
+              .trim()}
+          >
+            <div className={`${prefixCls}-tag-content`} style={{}}>
               {isMultiple &&
                 selectedValue.slice(0, maxTagCount).map((item, index) => {
                   return (
@@ -298,7 +303,7 @@ export default function SearchSelect(props: SearchSelectProps) {
                 </Tag>
               )}
               <Input
-                style={{ flex: 1 }}
+                style={{ flex: 1, width: showSearch ? 0 : 50 }}
                 className={`${prefixCls}-input-contents`}
                 readOnly={!showSearch}
                 size={size}
@@ -321,6 +326,7 @@ export default function SearchSelect(props: SearchSelectProps) {
           </div>
         ) : (
           <Input
+            className={`${prefixCls}-search-${showSearch}`}
             readOnly={!showSearch}
             size={size}
             ref={inputRef}

diff --git a/packages/react-search-select/src/style/index.less b/packages/react-search-select/src/style/index.less
@@ -5,8 +5,8 @@
     input {
       box-shadow: none;
       padding: 0px;
-      min-width: 50px;
-      height: 22px;
+      // min-width: 50px;
+      height: 28px;
     }
 
     .w-input-inner {
@@ -41,9 +41,10 @@
     box-sizing: border-box;
     background: #fff;
     margin: 0 !important;
-    padding: 3px 10px 3px 10px;
+    padding: 1px 10px;
     vertical-align: middle;
     line-height: 30px;
+    align-items: center;
     color: #393e48;
     font-weight: 400;
     font-size: inherit;
@@ -91,6 +92,17 @@
     }
   }
 
+  &-tag-content {
+    display: flex;
+    align-items: center;
+    flex-flow: wrap;
+    width: 100%;
+  }
+
+  &-search-false {
+    cursor: pointer;
+  }
+
   &-multiple-colse {
     left: 7px;
     font-size: 15px;

diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -86,7 +86,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
         onChange={onChangeSinge}
         value={valueSinge}
         options={data}
-        placeholder="请输入选择"
+        placeholder="请选择选项"
       />
     </Row>
     <label>多选</label>
@@ -98,7 +98,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
         onChange={onChange}
         value={value}
         options={data}
-        placeholder="请输入选择"
+        placeholder="请选择选项"
       />
     </Row>
     <label>禁用</label>
@@ -109,7 +109,7 @@ const onChangeSinge=(selectd, selectedAll,  isChecked)=>{
         allowClear={true}
         value={[{ label: '东城区', key: 10 },{ label: '成都市',  key: 2 }]}
         options={data}
-        placeholder="请输入选择"
+        placeholder="请选择选项"
       />
     </Row>
   </Row>
@@ -171,12 +171,12 @@ const Demo = () => {
     <>
       <SearchTree
         style={{ width:200 }}
-        placeholder="请输入选择"
+        placeholder="请选择选项"
       />
       <SearchTree
         style={{ width:200,marginTop:5 }}
         emptyOption={<span>暂无数据..</span>}
-        placeholder="请输入选择"
+        placeholder="请选择选项"
       />
     </>
   )
@@ -282,7 +282,7 @@ const form=useRef()
                   onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
                   onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
                   options={data}
-                  placeholder="请输入选择"
+                  placeholder="请选择选项"
                 />
             )
           },
@@ -296,7 +296,7 @@ const form=useRef()
                   onSearch={(searchValue)=>console.log('SearchTree-> SearchTreeOption',searchValue)}
                   onChange={(selectd, selectedAll,  isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
                   options={data}
-                  placeholder="请输入选择"
+                  placeholder="请选择选项"
                 />
             )
           },

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -173,7 +173,6 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
             })}
             <Input
               ref={inputRef}
-              style={{}}
               className={`${prefixCls}-input-contents`}
               size={size}
               disabled={disabled}

diff --git a/packages/react-search-tree/src/style/index.less b/packages/react-search-tree/src/style/index.less
@@ -3,7 +3,6 @@
 .@{w-search-tree} {
   &-input-contents {
     flex: 1;
-    min-width: 30px;
     top: 1px;
 
     input {