import React, { useMemo, useEffect } from 'react';
import { Container, Modal, Input, Button, Table } from 'semantic-ui-react';
import styled from 'styled-components';
import {
useTable,
useFilters,
useGlobalFilter,
useAsyncDebounce,
} from 'react-table';
// A great library for fuzzy filtering/sorting items
import matchSorter from 'match-sorter';
import moment from 'moment';
import { Link } from 'react-router-dom';
import PDFViews from '../../PDFViews/PDFViews';
import ContentStatusHistory from '../../ContentStatusHistory/ContentStatusHistory';
import History from '../../History/History';
import { useSelector, useDispatch } from 'react-redux';
import { searchContent } from '../../../actions/search/search';
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`;
// Define a default UI for filtering
const GlobalFilter = ({
preGlobalFilteredRows,
globalFilter,
setGlobalFilter,
}) => {
const count = preGlobalFilteredRows.length;
const [value, setValue] = React.useState(globalFilter);
const onChange = useAsyncDebounce((value) => {
setGlobalFilter(value || undefined);
}, 200);
return (
<span>
Search:{' '}
<Input
value={value || ''}
onChange={(e) => {
setValue(e.target.value);
onChange(e.target.value);
}}
placeholder={`${count} records...`}
style={{
fontSize: '1.1rem',
border: '0',
}}
/>
</span>
);
};
// Define a default UI for filtering
const DefaultColumnFilter = ({
column: { filterValue, preFilteredRows, setFilter },
}) => {
const count = preFilteredRows.length;
return (
<Input
value={filterValue || ''}
onChange={(e) => {
setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
}}
placeholder={`Search ${count} records...`}
/>
);
};
// This is a custom filter UI for selecting
// a unique option from a list
const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
// Calculate the options for filtering
// using the preFilteredRows
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
// Render a multi-select box
return (
<select
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option value="">All</option>
{options.map((option, i) => (
<option key={i} value={option}>
{option}
</option>
))}
</select>
);
};
// This is a custom filter UI that uses a
// slider to set the filter value between a column's
// min and max values
const SliderColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id },
}) => {
// Calculate the min and max
// using the preFilteredRows
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
preFilteredRows.forEach((row) => {
min = Math.min(row.values[id], min);
max = Math.max(row.values[id], max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<>
<Input
type="range"
min={min}
max={max}
value={filterValue || min}
onChange={(e) => {
setFilter(parseInt(e.target.value, 10));
}}
/>
<Button onClick={() => setFilter(undefined)}>Off</Button>
</>
);
};
// This is a custom UI for our 'between' or number range
// filter. It uses two number boxes and filters rows to
// ones that have values between the two
const NumberRangeColumnFilter = ({
column: { filterValue = [], preFilteredRows, setFilter, id },
}) => {
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
preFilteredRows.forEach((row) => {
min = Math.min(row.values[id], min);
max = Math.max(row.values[id], max);
});
return [min, max];
}, [id, preFilteredRows]);
return (
<div
style={{
display: 'flex',
}}
>
<Input
value={filterValue[0] || ''}
type="number"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [
val ? parseInt(val, 10) : undefined,
old[1],
]);
}}
placeholder={`Min (${min})`}
style={{
width: '70px',
marginRight: '0.5rem',
}}
/>
to
<Input
value={filterValue[1] || ''}
type="number"
onChange={(e) => {
const val = e.target.value;
setFilter((old = []) => [
old[0],
val ? parseInt(val, 10) : undefined,
]);
}}
placeholder={`Max (${max})`}
style={{
width: '70px',
marginLeft: '0.5rem',
}}
/>
</div>
);
};
const fuzzyTextFilterFn = (rows, id, filterValue) =>
matchSorter(rows, filterValue, { keys: [(row) => row.values[id]] });
// Let the table remove the filter if the string is empty
fuzzyTextFilterFn.autoRemove = (val) => !val;
// const ReactTable = "code goes here";
// Define a custom filter filter function!
function filterGreaterThan(rows, id, filterValue) {
return rows.filter((row) => {
const rowValue = row.values[id];
return rowValue >= filterValue;
});
}
// This is an autoRemove method on the filter function that
// when given the new filter value and returns true, the filter
// will be automatically removed. Normally this is just an undefined
// check, but here, we want to remove the filter if it's not a number
filterGreaterThan.autoRemove = (val) => typeof val !== 'number';
// const SearchYCDocsRT = "code goes here"
export default SearchYCDocsRT;