Skip to content

Commit

Permalink
fix(CascaderSelect): support value not in data
Browse files Browse the repository at this point in the history
fixed #407
  • Loading branch information
myronliu347 committed Mar 13, 2019
1 parent 7bff860 commit 93e4227
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 5 deletions.
2 changes: 1 addition & 1 deletion docs/cascader-select/demo/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 无障碍

- order: 8
- order: 9

请参考`ARIA and KeyBoard`

Expand Down
41 changes: 41 additions & 0 deletions docs/cascader-select/demo/custom.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# 渲染 DataSource 中不存在的 value

- order: 8

---

```jsx
import { CascaderSelect } from '@alifd/next';
import 'whatwg-fetch';

class Demo extends React.Component {
constructor(props) {
super(props);

this.state = {
data: []
};

this.handleChange = this.handleChange.bind(this);
}

componentDidMount() {
fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
.then(response => response.json())
.then(data => {
data[1].disabled = true;
this.setState({ data });
})
.catch(e => console.log(e));
}

handleChange(value, data, extra) {
console.log(value, data, extra);
}

render() {
return <CascaderSelect multiple valueRender={(item) => item.label ? item.label : item.value === '4326' ? '哈哈哈哈' : item.value} defaultValue="4326" style={{ width: '302px' }} dataSource={this.state.data} onChange={this.handleChange} />;
}
}
ReactDOM.render(<Demo />, mountNode)
```
23 changes: 19 additions & 4 deletions src/cascader-select/cascader-select.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,9 @@ export default class CascaderSelect extends Component {

const data = this._v2n[value];
if (!data) {
return null;
return {
value,
};
}

const labelPath = this.getLabelPath(data);
Expand All @@ -408,12 +410,25 @@ export default class CascaderSelect extends Component {
}

getMultipleData(value) {
if (!value.length) {
return null;
}

const { checkStrictly, canOnlyCheckLeaf, displayRender } = this.props;
let data = this.getData(
checkStrictly || canOnlyCheckLeaf ? value : this.flatValue(value)
);
let data = (checkStrictly || canOnlyCheckLeaf
? value
: this.flatValue(value)
)
.map(v => this._v2n[v] || v)
.filter(v => v !== null && v !== undefined);

if (displayRender) {
data = data.map(item => {
if (!item.pos) {
return {
value: item,
};
}
const labelPath = this.getLabelPath(item);

return {
Expand Down

0 comments on commit 93e4227

Please sign in to comment.