changed ref filter from select to autocomplete

unfoldingWord · Jan 10, 2023 · 8df67b0 · 8df67b0
1 parent 3b837a7
commit 8df67b0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 33 deletions.
diff --git a/public/build_number b/public/build_number
@@ -1 +1 @@
-211-463611d
+212-3b837a7
diff --git a/src/components/translatable/ChapterVerseFilters.js b/src/components/translatable/ChapterVerseFilters.js
@@ -1,25 +1,20 @@
-import { FormControl, InputLabel, ListItemText, MenuItem, Select, Box } from "@material-ui/core";
+import { Box, TextField } from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
 import React, { useState } from "react";
 import { useDeepCompareCallback } from "use-deep-compare";
 
 const SelectSimple = ({options,onChange,label,value,...props}) => {
   return (
-    <FormControl {...props}>
-      <InputLabel htmlFor='select-multiple-chip'>
-        {label}
-      </InputLabel>
-      <Select
-        value={value}
-        renderValue={selected => selected}
-        onChange={onChange}
-      >
-        {options.map(item => (
-          <MenuItem key={item} value={item}>
-            <ListItemText primary={item} />
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
+    <Autocomplete
+      value={value}
+      style={{overflow: 'visible'}}
+      options={options}
+      getOptionLabel={(option) => `${option}`}
+      onChange={onChange}
+      handleHomeEndKeys
+      renderInput={(params) => <TextField {...params} label={label}
+      />}
+    />
   )
 }
 
@@ -29,42 +24,52 @@ const ChapterVerseFilters = ({ cvData, filters, onChange, index }) => {
   const [chapter, setChapter] = useState("All");
   const [verse, setVerse] = useState("All");
 
-  const handleChapterChange = useDeepCompareCallback((event) => {
+  const chapterOptions = ["All", ...Object.keys(cvData)];
+  const verseOptions = ["All", ...(cvData[chapter] || [])];
+
+  const getVersesInChapter = useDeepCompareCallback((chapter) => cvData[chapter]?.map((verse) => `${chapter}:${verse}`), [cvData]);
+
+  const handleChapterChange = useDeepCompareCallback((event, newValue) => {
     event.preventDefault();
-    const chapter = event.target.value;
+    const chapter = newValue;
     const verse = "All";
     setChapter(chapter);
     setVerse(verse);
-    if (chapter === "All") {
+    if (chapter === "All" || chapter === null) {
       onChange([], index, column);
       return;
     }
-    filters[index] = cvData[chapter].map((verse) => `${chapter}:${verse}`)
+    filters[index] = getVersesInChapter(chapter)
     onChange(filters[index], index, column)
-  }, [onChange,index,filters,cvData])
+  }, [onChange,index,filters,getVersesInChapter])
 
-  const handleVerseChange = useDeepCompareCallback((event) => {
+  const handleVerseChange = useDeepCompareCallback((event,newValue) => {
     event.preventDefault()
     if (chapter === "All") return;
-    const verse = event.target.value;
-    filters[index] = [`${chapter}:${verse}`]
-    onChange(filters[index], index, column)
+    const verse = newValue;
     setVerse(verse);
-  }, [onChange,index,filters,chapter])
+    if (verse === "All") {
+      filters[index] = getVersesInChapter(chapter);
+      onChange([], index, column);
+      return;
+    }
+    filters[index] = verse ? [`${chapter}:${verse}`] : [];
+    onChange(filters[index], index, column)
+  }, [onChange,index,filters,chapter,getVersesInChapter])
 
   return (
     <Box sx={{display:"grid", gridTemplateColumns: "1fr 1fr", gap: "17px"}}>
       <SelectSimple
         value={chapter}
         label={"Chapter"}
         onChange={handleChapterChange}
-        options={["All", ...Object.keys(cvData)]}
+        options={chapterOptions}
       />
       <SelectSimple
         value={verse}
         label={"Verse"}
         onChange={handleVerseChange}
-        options={["All", ...(cvData[chapter] || [])]}
+        options={verseOptions}
       />
     </Box>
   )

diff --git a/src/components/translatable/TranslatableTSV.js b/src/components/translatable/TranslatableTSV.js
@@ -143,14 +143,13 @@ export default function TranslatableTSV({
       display: "excluded",
       filterType: "custom",
       filterOptions: {
-        //TODO: modify logic to allow search strings like `1:5-6`, etc.
         logic: (location, filters, row) => {
           if (filters.length) return !filters.includes(row[0]);
           return false;
         },
         display: (filterList, onChange, _index, column, filterData) => {
           const filterValues = filterData[REF_FILTER_INDEX].reduce(
-            (cv, reference, i) => {
+            (cv, reference) => {
               const [chapter, verse] = reference.match(/(?:\\t)*([\d\w]+):([\d\w]+)/)?.[0].split(":");
               if(!cv[chapter]) cv[chapter] = [];
               cv[chapter].push(verse)
@@ -159,7 +158,6 @@ export default function TranslatableTSV({
             {}
           );
           const index = REF_FILTER_INDEX;
-          console.log({ filterList, onChange, index, column, filterData });
           const optionValues = filterValues;
           return <ChapterVerseFilters onChange={onChange} cvData={optionValues} filters={filterList} index={index}/>
         },