Skip to content

Commit

Permalink
style(SearchSelect): 样式和文档优化 (#744)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nullptr-z
nullptr-z committed Apr 6, 2022
1 parent c7bc486 commit f988af3
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 44 deletions.
76 changes: 48 additions & 28 deletions packages/react-search-select/README.md
View file
Expand Up @@ -39,7 +39,7 @@ const Demo = () => {
<SearchSelect
mode="single"
style={{ width: 200 }}
placeholder="请输入选择"
placeholder="请选择选项"
option={option}
/>
</Row>
Expand All @@ -48,7 +48,8 @@ const Demo = () => {
<SearchSelect
mode="multiple"
style={{ width: 200 }}
placeholder="请输入选择"
allowClear={true}
placeholder="请选择选项"
option={option}
/>
</Row>
Expand All @@ -57,7 +58,8 @@ const Demo = () => {
<SearchSelect
mode="single"
style={{ width: 200 }}
placeholder="请输入选择"
allowClear={true}
placeholder="请选择选项"
option={option}
disabled={true}
/>
Expand Down Expand Up @@ -93,8 +95,8 @@ const Demo = () => {
style={{ width: 150 }}
option={option}
value={[1]}
showSearch={true}
placeholder="请输入选择"
allowClear={true}
placeholder="请选择选项"
size={'small'}
/>
</Row>
Expand All @@ -106,8 +108,8 @@ const Demo = () => {
style={{ width: 175 }}
option={option}
value={[2]}
showSearch={true}
placeholder="请输入选择"
allowClear={true}
placeholder="请选择选项"
/>
</Row>
</Col>
Expand All @@ -118,8 +120,8 @@ const Demo = () => {
style={{ width: 200 }}
option={option}
value={[3]}
showSearch={true}
placeholder="请输入选择"
allowClear={true}
placeholder="请选择选项"
size={'large'}
/>
</Row>
Expand Down Expand Up @@ -168,7 +170,7 @@ const Demo = () => {
console.log('value', value)
setValue(value)
}}
placeholder="请输入选择"
placeholder="请选择选项"
/>
</Row>
<Row>
Expand All @@ -183,7 +185,7 @@ const Demo = () => {
setLabelValue(value)
}}
plac
placeholder="请输入选择"
placeholder="请选择选项"
/>
</Row>
</Row>
Expand Down Expand Up @@ -235,7 +237,7 @@ const Demo = () => {
valueAmount={valueAmount}
allowClear
value={values}
placeholder="请输入选择"
placeholder="请选择选项"
onSearch={handleSearch}
// onSelect={(value)=>console.log('onSelect',value)}
loading={loading}
Expand Down Expand Up @@ -300,7 +302,7 @@ const Demo = () => {
maxTagCount={maxTagCount}
allowClear
value={values}
placeholder="请输入选择"
placeholder="请选择选项"
onSearch={handleSearch}
loading={loading}
option={option}
Expand Down Expand Up @@ -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);
Expand All @@ -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>
);
};
Expand Down Expand Up @@ -436,7 +456,7 @@ const Demo = () => {
showSearch={true}
mode="multiple"
disabled={false}
placeholder="请输入选择"
placeholder="请选择选项"
onSearch={handleSearch}
onChange={(v)=>{
console.log('onChange',v)
Expand All @@ -455,7 +475,7 @@ const Demo = () => {
showSearch={true}
allowClear
disabled={false}
placeholder="请输入选择"
placeholder="请选择选项"
onSearch={handleSearch}
onChange={(v)=>{
console.log('onChange',v)
Expand Down
14 changes: 10 additions & 4 deletions packages/react-search-select/src/index.tsx
View file
Expand Up @@ -55,7 +55,7 @@ export default function SearchSelect(props: SearchSelectProps) {
isOpen,
value,
defaultValue,
showSearch,
showSearch = false,
tagProps = {},
placeholder,
onSearch,
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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}
Expand All @@ -321,6 +326,7 @@ export default function SearchSelect(props: SearchSelectProps) {
</div>
) : (
<Input
className={`${prefixCls}-search-${showSearch}`}
readOnly={!showSearch}
size={size}
ref={inputRef}
Expand Down
18 changes: 15 additions & 3 deletions packages/react-search-select/src/style/index.less
View file
Expand Up @@ -5,8 +5,8 @@
input {
box-shadow: none;
padding: 0px;
min-width: 50px;
height: 22px;
// min-width: 50px;
height: 28px;
}

.w-input-inner {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
14 changes: 7 additions & 7 deletions packages/react-search-tree/README.md
View file
Expand Up @@ -86,7 +86,7 @@ const onChangeSinge=(selectd, selectedAll, isChecked)=>{
onChange={onChangeSinge}
value={valueSinge}
options={data}
placeholder="请输入选择"
placeholder="请选择选项"
/>
</Row>
<label>多选</label>
Expand All @@ -98,7 +98,7 @@ const onChangeSinge=(selectd, selectedAll, isChecked)=>{
onChange={onChange}
value={value}
options={data}
placeholder="请输入选择"
placeholder="请选择选项"
/>
</Row>
<label>禁用</label>
Expand All @@ -109,7 +109,7 @@ const onChangeSinge=(selectd, selectedAll, isChecked)=>{
allowClear={true}
value={[{ label: '东城区', key: 10 },{ label: '成都市', key: 2 }]}
options={data}
placeholder="请输入选择"
placeholder="请选择选项"
/>
</Row>
</Row>
Expand Down Expand Up @@ -171,12 +171,12 @@ const Demo = () => {
<>
<SearchTree
style={{ width:200 }}
placeholder="请输入选择"
placeholder="请选择选项"
/>
<SearchTree
style={{ width:200,marginTop:5 }}
emptyOption={<span>暂无数据..</span>}
placeholder="请输入选择"
placeholder="请选择选项"
/>
</>
)
Expand Down Expand Up @@ -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="请选择选项"
/>
)
},
Expand All @@ -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="请选择选项"
/>
)
},
Expand Down
1 change: 0 additions & 1 deletion packages/react-search-tree/src/SearchTagInput.tsx
View file
Expand Up @@ -173,7 +173,6 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
})}
<Input
ref={inputRef}
style={{}}
className={`${prefixCls}-input-contents`}
size={size}
disabled={disabled}
Expand Down
1 change: 0 additions & 1 deletion packages/react-search-tree/src/style/index.less
View file
Expand Up @@ -3,7 +3,6 @@
.@{w-search-tree} {
&-input-contents {
flex: 1;
min-width: 30px;
top: 1px;

input {
Expand Down

0 comments on commit f988af3

Please sign in to comment.