Skip to content

Commit

Permalink
fix(Select): support innerAfter. Close #859
Browse files Browse the repository at this point in the history
  • Loading branch information
@bindoon
bindoon committed Jul 9, 2019
1 parent f032128 commit b49a35e
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 72 deletions.
58 changes: 58 additions & 0 deletions docs/select/demo/max-count.md
View file
@@ -0,0 +1,58 @@
# 最大数量

- order: 3

多选模式

:::lang=en-us
# max count

- order: 3

multiple select

:::
---

````jsx
import { Select, Balloon } from '@alifd/next';

const { Tooltip } = Balloon;

const dataSource = [
{value: '10001', label: 'Lucy King'},
{value: 10002, label: 'Lily King'},
{value: 10003, label: 'Tom Cat', disabled: true},
{label: 'Special Group', children: [
{value: -1, label: 'FALSE'},
{value: 0, label: 'ZERO'}
]}
];

function handleChange(value) {
console.log(value);
}

const maxTagPlaceholder = (selectedValues, totalValues) => {
const trigger = <span>{`${selectedValues.length}/${totalValues.length}`}</span>;
const labels = selectedValues.map(obj => obj.label);

return <Tooltip trigger={trigger}>{ labels.join(', ') }</Tooltip>;
};

ReactDOM.render(
<div>
hasSelectAll:<br/>
<Select hasSelectAll mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
<br /><br />
maxTagCount=2<br />
<Select maxTagCount={2} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /> <br /><br />
maxTagPlaceholder<br />
<Select maxTagCount={2} maxTagPlaceholder={maxTagPlaceholder} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
tagInline <br />
<Select maxTagCount={2} tagInline mode="multiple" defaultValue={['10001', '10002', '-1']} onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
maxTagPlaceholder<br />
<Select maxTagCount={2} tagInline maxTagPlaceholder={maxTagPlaceholder} defaultValue={['10001', '10002', '-1']} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
</div>
, mountNode);
````
51 changes: 6 additions & 45 deletions docs/select/demo/multiple.md
View file
Expand Up @@ -2,30 +2,27 @@

- order: 2

多选模式
多选模式, 通过 `showSearch` 可以开启搜索, 但搜索值不可用作选项


:::lang=en-us
# Multiple

- order: 2

multiple select

multiple select, use `showSearch` to search, search value can not to be a option (different with mode=tag);
:::
---

````jsx
import { Select, Balloon } from '@alifd/next';

const { Tooltip } = Balloon;
import { Select } from '@alifd/next';

const dataSource = [
{value: '10001', label: 'Lucy King'},
{value: 10002, label: 'Lily King'},
{value: 10003, label: 'Tom Cat', disabled: true},
{label: 'Special Group', children: [
{value: new Date(), label: 'new Date()'},
{value: 'false', label: 'FALSE'},
{value: -1, label: 'FALSE'},
{value: 0, label: 'ZERO'}
]}
];
Expand All @@ -34,45 +31,9 @@ function handleChange(value) {
console.log(value);
}


class Demo extends React.Component{
constructor(props) {
super(props);
this.state = {
value: []
};
}

handleChange = (value) => {
this.setState({value});
}

render() {
return (
<Select hasSelectAll value={this.state.value} mode="multiple" onChange={this.handleChange} dataSource={dataSource} style={{width: 200}} />);
}
}

const maxTagPlaceholder = (selectedValues, totalValues) => {
const trigger = <span>{`已选择 ${selectedValues.length}/${totalValues.length} 项`}</span>;
const labels = selectedValues.map(obj => obj.label);

return <Tooltip trigger={trigger}>{ labels.join(', ') }</Tooltip>;
};

ReactDOM.render(
<div>
<Select mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
受控写法 <Demo /><br /><br />
设置最大显示Tag数 (maxTagCount) <br />
<Select maxTagCount={2} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /> <br /><br />
设置最大显示Tag数，并自定义超出显示内容 (maxTagCount + maxTagPlaceholder) <br />
<Select maxTagCount={2} maxTagPlaceholder={maxTagPlaceholder} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
设置一行展示 (tagInline) <br />
<Select maxTagCount={2} tagInline mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
设置一行展示，并自定义超出显示内容 (tagInline + maxTagPlaceholder) <br />
<Select maxTagCount={2} tagInline maxTagPlaceholder={maxTagPlaceholder} mode="multiple" onChange={handleChange} dataSource={dataSource} style={{width: 200}} /><br /><br />
<Select mode="multiple" showSearch defaultValue={['10001']} onChange={handleChange} dataSource={dataSource} style={{width: 300}} />
</div>
, mountNode);
````
7 changes: 3 additions & 4 deletions docs/select/demo/select-basic.md
View file
@@ -1,13 +1,13 @@
# 选择器

- order: 3
- order: 4

演示了 Select 的多种形态.

:::lang=en-us
# Select

- order: 3
- order: 4

api usage of select
:::
Expand All @@ -21,8 +21,7 @@ const dataSource = [
{value: 10002, label: 'Lily King'},
{value: 10003, label: 'Tom Cat', disabled: true},
{label: 'Special Group', children: [
{value: new Date(), label: 'new Date()'},
{value: false, label: 'FALSE'},
{value: -1, label: 'FALSE'},
{value: 0, label: 'ZERO'}
]}
];
Expand Down
18 changes: 1 addition & 17 deletions docs/select/demo/select-custom-value.md
View file
Expand Up @@ -31,22 +31,6 @@ const valueRender = v => {
return `${v.value} / ${v.gender} / ${v.age}`;
};

ReactDOM.render(
<div className="demo-container">
<Select
mode="multiple"
placeholder="custom value"
valueRender={valueRender}
dataSource={dataSource}
onChange={handleChange} />
</div>,
mountNode
);
ReactDOM.render(<Select mode="multiple" placeholder="custom value" valueRender={valueRender} dataSource={dataSource} onChange={handleChange} />, mountNode);
````

````css
.demo-container {
padding: 16px;
background-color: #F8F8F8;
}
````
32 changes: 32 additions & 0 deletions docs/select/demo/select-label.md
View file
@@ -0,0 +1,32 @@
# 前后缀

- order: 7

Select 增加前后缀

:::lang=en-us
# prefix and suffix

- order: 7

add prefix or suffix to select
:::
---

````jsx
import { Select } from '@alifd/next';

const dataSource = [
{label: '1', value: 1},
{label: '10', value: 10},
{label: '50', value: 50},
{label: '100', value: 100}
];

const handleChange = value => {
console.log('handleChange: ', value);
};

ReactDOM.render(<Select label="size:" innerAfter={<span style={{color: '#999', marginRight: 4}}>GB</span>} dataSource={dataSource} onChange={handleChange} />, mountNode);
````

4 changes: 2 additions & 2 deletions src/input/input.jsx
View file
Expand Up @@ -323,11 +323,11 @@ export default class Input extends Base {
className={cls}
style={hasAddon ? undefined : style}
>
{this.renderInner(innerBefore, innerBeforeCls)}
{this.renderLabel()}
{this.renderInner(innerBefore, innerBeforeCls)}
{inputRender(inputEl)}
{this.renderControl()}
{this.renderInner(innerAfter, innerAfterCls)}
{this.renderControl()}
</span>
);

Expand Down
8 changes: 4 additions & 4 deletions src/select/main.scss
View file
Expand Up @@ -89,6 +89,10 @@
padding-left: $select-tag-padding-lr;
padding-right: $select-tag-padding-lr;
}

.#{$css-prefix}input-inner {
width: auto;
}
}

&-trigger-search {
Expand Down Expand Up @@ -171,10 +175,6 @@
}

&-multiple {
.#{$css-prefix}input {
height: auto;
align-items: start;
}
#{$select-prefix}-compact {
position: relative;
white-space: nowrap;
Expand Down

0 comments on commit b49a35e

Please sign in to comment.