60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Dropdown, Form } from 'semantic-ui-react';
|
|
|
|
import { fetchMembersList } from '../../../store/actions';
|
|
|
|
class MemberSelector extends Component {
|
|
componentDidMount() {
|
|
const { fetchMembersList } = this.props;
|
|
|
|
fetchMembersList();
|
|
}
|
|
|
|
onMemberSelectionChange(event, data){
|
|
const { onMemberSelect } = this.props;
|
|
|
|
const { value } = data;
|
|
|
|
if (onMemberSelect && value){
|
|
onMemberSelect(value);
|
|
}
|
|
}
|
|
|
|
render(){
|
|
const { members, defaultMemberId } = this.props;
|
|
|
|
const dropdownOptions = members && Array.isArray(members) ? members.map(member => ({
|
|
key: member.memberId,
|
|
value: member.memberId,
|
|
text: member.name
|
|
})
|
|
) : null;
|
|
|
|
return (
|
|
<Form>
|
|
<label>{'\u00A0'}</label>
|
|
<Dropdown
|
|
options={dropdownOptions}
|
|
placeholder="Select Member"
|
|
selection
|
|
search
|
|
fluid
|
|
onChange={this.onMemberSelectionChange.bind(this)}
|
|
value={defaultMemberId ? defaultMemberId : null}
|
|
/>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
members: state.membersList.result,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
fetchMembersList: () => fetchMembersList(dispatch),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MemberSelector);
|