fix key prop for lint

* Change MultiSelect onSolo to onSelectSingle
This commit is contained in:
spacebares 2022-12-17 06:15:54 -08:00
parent 0f7a78876b
commit 0356e33fe0
2 changed files with 8 additions and 10 deletions

View File

@ -5,14 +5,13 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
import Heading from './Heading'; import Heading from './Heading';
import Button from './Button'; import Button from './Button';
export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSolo }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
const popupRef = useRef(null); const popupRef = useRef(null);
const [state, setState] = useState({ const [state, setState] = useState({
showMenu: false, showMenu: false,
}); });
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div <div
@ -31,10 +30,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
</Button> </Button>
</div> </div>
{options.map((item) => ( {options.map((item) => (
<div className='flex grow'> <div className="flex grow" key={item}>
<label <label
className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`} className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}>
key={item}>
<input <input
className="mx-4 m-0 align-middle" className="mx-4 m-0 align-middle"
type="checkbox" type="checkbox"
@ -43,7 +41,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
{item.replaceAll("_", " ")} {item.replaceAll("_", " ")}
</label> </label>
<div className=' justify-right'> <div className=' justify-right'>
<Button className="mx-2" onClick={() => onSolo(item)}> <Button className="mx-2" onClick={() => onSelectSingle(item)}>
👀 👀
</Button> </Button>
</div> </div>

View File

@ -302,7 +302,7 @@ export default function Events({ path, ...props }) {
selection={searchParams.cameras} selection={searchParams.cameras}
onToggle={(item) => onToggleNamedFilter("cameras", item)} onToggle={(item) => onToggleNamedFilter("cameras", item)}
onShowAll={() => onFilter("cameras", ["all"])} onShowAll={() => onFilter("cameras", ["all"])}
onSolo={(item) => onFilter("cameras", item)} onSelectSingle={(item) => onFilter("cameras", item)}
/> />
<MultiSelect <MultiSelect
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800" className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@ -311,7 +311,7 @@ export default function Events({ path, ...props }) {
selection={searchParams.labels} selection={searchParams.labels}
onToggle={(item) => onToggleNamedFilter("labels", item) } onToggle={(item) => onToggleNamedFilter("labels", item) }
onShowAll={() => onFilter("labels", ["all"])} onShowAll={() => onFilter("labels", ["all"])}
onSolo={(item) => onFilter("labels", item)} onSelectSingle={(item) => onFilter("labels", item)}
/> />
<MultiSelect <MultiSelect
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800" className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@ -320,7 +320,7 @@ export default function Events({ path, ...props }) {
selection={searchParams.zones} selection={searchParams.zones}
onToggle={(item) => onToggleNamedFilter("zones", item) } onToggle={(item) => onToggleNamedFilter("zones", item) }
onShowAll={() => onFilter("zones", ["all"])} onShowAll={() => onFilter("zones", ["all"])}
onSolo={(item) => onFilter("zones", item)} onSelectSingle={(item) => onFilter("zones", item)}
/> />
{ {
filterValues.sub_labels.length > 0 && ( filterValues.sub_labels.length > 0 && (
@ -331,7 +331,7 @@ export default function Events({ path, ...props }) {
selection={searchParams.sub_labels} selection={searchParams.sub_labels}
onToggle={(item) => onToggleNamedFilter("sub_labels", item) } onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
onShowAll={() => onFilter("sub_labels", ["all"])} onShowAll={() => onFilter("sub_labels", ["all"])}
onSolo={(item) => onFilter("sub_labels", item)} onSelectSingle={(item) => onFilter("sub_labels", item)}
/> />
)} )}
<div ref={datePicker} className="ml-auto"> <div ref={datePicker} className="ml-auto">