Renames in Frontend

frontend/src/InteractiveImport/Author/SelectAuthorModalContent.js

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { scrollDirections } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Scroller from 'Components/Scroller/Scroller';
+import TextInput from 'Components/Form/TextInput';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import SelectAuthorRow from './SelectAuthorRow';
+import styles from './SelectAuthorModalContent.css';
+
+class SelectAuthorModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      filter: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value.toLowerCase() });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      onAuthorSelect,
+      onModalClose
+    } = this.props;
+
+    const filter = this.state.filter;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Select Author
+        </ModalHeader>
+
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <TextInput
+            className={styles.filterInput}
+            placeholder="Filter author"
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
+          />
+
+          <Scroller className={styles.scroller}>
+            {
+              items.map((item) => {
+                return item.authorName.toLowerCase().includes(filter) ?
+                  (
+                    <SelectAuthorRow
+                      key={item.id}
+                      id={item.id}
+                      authorName={item.authorName}
+                      onAuthorSelect={onAuthorSelect}
+                    />
+                  ) :
+                  null;
+              })
+            }
+          </Scroller>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectAuthorModalContent.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onAuthorSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectAuthorModalContent;