-
-
Notifications
You must be signed in to change notification settings - Fork 241
/
SelectArtistModalContent.js
103 lines (88 loc) · 2.61 KB
/
SelectArtistModalContent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TextInput from 'Components/Form/TextInput';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import Scroller from 'Components/Scroller/Scroller';
import { scrollDirections } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import SelectArtistRow from './SelectArtistRow';
import styles from './SelectArtistModalContent.css';
class SelectArtistModalContent extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
filter: ''
};
}
//
// Listeners
onFilterChange = ({ value }) => {
this.setState({ filter: value.toLowerCase() });
};
//
// Render
render() {
const {
items,
onArtistSelect,
onModalClose
} = this.props;
const filter = this.state.filter;
return (
<ModalContent onModalClose={onModalClose}>
<ModalHeader>
{translate('ManualImport')} - {translate('SelectArtist')}
</ModalHeader>
<ModalBody
className={styles.modalBody}
scrollDirection={scrollDirections.NONE}
>
<TextInput
className={styles.filterInput}
placeholder={translate('FilterArtistPlaceholder')}
name="filter"
value={filter}
autoFocus={true}
onChange={this.onFilterChange}
/>
<Scroller
className={styles.scroller}
autoFocus={false}
>
{
items.map((item) => {
return item.artistName.toLowerCase().includes(filter) ?
(
<SelectArtistRow
key={item.id}
id={item.id}
artistName={item.artistName}
onArtistSelect={onArtistSelect}
/>
) :
null;
})
}
</Scroller>
</ModalBody>
<ModalFooter>
<Button onPress={onModalClose}>
{translate('Cancel')}
</Button>
</ModalFooter>
</ModalContent>
);
}
}
SelectArtistModalContent.propTypes = {
items: PropTypes.arrayOf(PropTypes.object).isRequired,
onArtistSelect: PropTypes.func.isRequired,
onModalClose: PropTypes.func.isRequired
};
export default SelectArtistModalContent;