style(SearchSelect): 组件样式优化 #611 (#614)

uiwjs · Mar 4, 2022 · f4325a0 · f4325a0
1 parent 92a1bea
commit f4325a0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -233,7 +233,7 @@ export default function SearchSelect(props: SearchSelectProps) {
       >
         {isMultiple ? (
           <div className={`${prefixCls}-inner`}>
-            <div style={{ display: 'flex', flexFlow: 'wrap' }}>
+            <div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
               {isMultiple &&
                 selectedValue.slice(0, maxTagCount).map((item, index) => {
                   return (

diff --git a/packages/react-search-select/src/style/index.less b/packages/react-search-select/src/style/index.less
@@ -5,7 +5,8 @@
     input {
       box-shadow: none;
       padding: 0px;
-      height: 20px;
+      min-width: 50px;
+      height: 22px;
     }
 
     .w-input-inner {

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -134,7 +134,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
         style={{ minWidth: 200, maxWidth: 'none', ...style }}
       >
         <div className={`${prefixCls}-inner`}>
-          <div style={{ display: 'flex', flexFlow: 'wrap' }}>
+          <div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
             {selectedOption.map((item, index) => {
               return (
                 <Tag
@@ -164,7 +164,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
               placeholder={selectedOption.length ? '' : placeholder}
             />
           </div>
-          <span style={{ height: 25 }} className={`${prefixCls}-close-tag-contents`}>
+          <span style={{ height: 25, width: 14 }} className={`${prefixCls}-close-tag-contents`}>
             {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
               <Icon type={selectIconType} spin={loading && selectIconType === 'loading'} onClick={resetSelectedValue} />
             )}

diff --git a/packages/react-search-tree/src/style/index.less b/packages/react-search-tree/src/style/index.less
@@ -6,6 +6,7 @@
       box-shadow: none;
       padding: 0px;
       height: 20px;
+      min-width: 50px;
     }
 
     .w-input-inner {