fleet/frontend/hooks/useCheckboxListStateManagement.tsx
Jacob Shandling 5137fe380c
17445 calendar events modal (#17717)
Addresses #17445 

Follow-up iteration:
- Finalize styling of dropdown tooltips
- All `//TODO`s

<img width="1393" alt="Screenshot 2024-03-20 at 1 43 54 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9b792cf0-058a-4ae6-8f5f-a49eb936ebef">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 01 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/86195dcf-ec28-4cf0-ab8b-d785d12372ed">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 21 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/01effdec-ca20-49ec-a442-5fe754a5e12b">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 26 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b6de6891-6eae-426e-bbff-b01184094ac9">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 33 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/96e167dd-752c-4b49-a1a7-69fe9b4f42ac">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 43 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/feedbda5-e915-4e5e-84ee-2316db49434a">
<img width="1393" alt="Screenshot 2024-03-20 at 1 44 47 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/c4b5ac47-3357-43ef-95ca-dd0953994f6f">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 02 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/17838415-5bf4-46f0-9bde-522deb0f0886">
<img width="1393" alt="Screenshot 2024-03-20 at 1 45 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b7228484-bb9f-4119-9fbf-a60ce990ba0e">

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-03-26 13:39:37 -05:00

36 lines
834 B
TypeScript

import { useState } from "react";
import { IPolicy } from "interfaces/policy";
interface ICheckedPolicy {
name?: string;
id: number;
isChecked: boolean;
}
const useCheckboxListStateManagement = (
allPolicies: IPolicy[],
automatedPolicies: number[] | undefined
) => {
const [policyItems, setPolicyItems] = useState<ICheckedPolicy[]>(() => {
return allPolicies.map(({ name, id }) => ({
name,
id,
isChecked: !!automatedPolicies?.includes(id),
}));
});
const updatePolicyItems = (policyId: number) => {
setPolicyItems((prevItems) =>
prevItems.map((policy) =>
policy.id !== policyId
? policy
: { ...policy, isChecked: !policy.isChecked }
)
);
};
return { policyItems, updatePolicyItems };
};
export default useCheckboxListStateManagement;