mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-04-26 02:48:54 -05:00
Update jsdocs
This commit is contained in:
@@ -3,31 +3,47 @@ import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
|
||||
import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
/**
|
||||
* @param {Object} props
|
||||
* @param {string} props.id - The id attribute for the checkbox input.
|
||||
* @param {string} props.label - The label to display next to the checkbox.
|
||||
* @param {('small' | 'medium' | 'large')} - The size of the checkbox.
|
||||
* @param {boolean} props.isChecked - Whether the checkbox is checked or not.
|
||||
* @param {string} [props.value] - The value of the checkbox input.
|
||||
* @param {function} [props.onChange] - The function to call when the checkbox value changes.
|
||||
* @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not.
|
||||
* Checkbox Component
|
||||
*
|
||||
* @returns {JSX.Element}
|
||||
* A customized checkbox component using Material-UI that supports custom sizing,
|
||||
* disabled states, and custom icons.
|
||||
*
|
||||
* @component
|
||||
* @param {Object} props - Component properties
|
||||
* @param {string} props.id - Unique identifier for the checkbox input
|
||||
* @param {string} [props.name] - Optional name attribute for the checkbox
|
||||
* @param {(string|React.ReactNode)} props.label - Label text or node for the checkbox
|
||||
* @param {('small'|'medium'|'large')} [props.size='medium'] - Size of the checkbox icon
|
||||
* @param {boolean} props.isChecked - Current checked state of the checkbox
|
||||
* @param {string} [props.value] - Optional value associated with the checkbox
|
||||
* @param {Function} [props.onChange] - Callback function triggered when checkbox state changes
|
||||
* @param {boolean} [props.isDisabled] - Determines if the checkbox is disabled
|
||||
*
|
||||
* @returns {React.ReactElement} Rendered Checkbox component
|
||||
*
|
||||
* @example
|
||||
* // Basic usage
|
||||
* <Checkbox
|
||||
* id="checkbox-id"
|
||||
* label="Ping monitoring"
|
||||
* isChecked={checks.type === "ping"}
|
||||
* value="ping"
|
||||
* onChange={handleChange}
|
||||
* id="terms-checkbox"
|
||||
* label="I agree to terms"
|
||||
* isChecked={agreed}
|
||||
* onChange={handleAgree}
|
||||
* />
|
||||
*
|
||||
* @example
|
||||
* // With custom size and disabled state
|
||||
* <Checkbox
|
||||
* id="advanced-checkbox"
|
||||
* label="Advanced Option"
|
||||
* size="large"
|
||||
* isChecked={isAdvanced}
|
||||
* isDisabled={!canModify}
|
||||
* onChange={handleAdvancedToggle}
|
||||
* />
|
||||
*/
|
||||
|
||||
const Checkbox = ({
|
||||
id,
|
||||
name,
|
||||
|
||||
@@ -13,15 +13,17 @@ import PropTypes from "prop-types";
|
||||
* @component
|
||||
* @param {Object} props - Component properties
|
||||
* @param {string} [props.checkboxId] - Optional unique identifier for the checkbox
|
||||
* @param {string} [props.checkboxName] - Optional name attribute for the checkbox
|
||||
* @param {string} props.checkboxLabel - Label text for the checkbox
|
||||
* @param {boolean} props.isChecked - Current checked state of the checkbox
|
||||
* @param {Function} props.onCheckboxChange - Callback function when checkbox is toggled
|
||||
* @param {string} props.fieldId - Unique identifier for the input field
|
||||
* @param {string} [props.fieldName] - Optional name attribute for the input field
|
||||
* @param {string} props.fieldValue - Current value of the input field
|
||||
* @param {Function} props.onFieldChange - Callback function when input field value changes
|
||||
* @param {Function} props.onFieldBlur - Callback function when input field loses focus
|
||||
* @param {string} props.alertUnit - Unit label displayed next to the input field
|
||||
* @param {Object} props.errors - Object containing validation errors
|
||||
* @param {Object} props.errors - Object containing validation errors for the field
|
||||
* @param {Object} props.infrastructureMonitor - Infrastructure monitor configuration object
|
||||
*
|
||||
* @returns {React.ReactElement} Rendered CustomThreshold component
|
||||
@@ -29,10 +31,12 @@ import PropTypes from "prop-types";
|
||||
* @example
|
||||
* <CustomThreshold
|
||||
* checkboxId="cpu-threshold"
|
||||
* checkboxName="cpu_threshold"
|
||||
* checkboxLabel="Enable CPU Threshold"
|
||||
* isChecked={true}
|
||||
* onCheckboxChange={handleCheckboxToggle}
|
||||
* fieldId="cpu-threshold-value"
|
||||
* fieldName="cpu_threshold_value"
|
||||
* fieldValue="80"
|
||||
* onFieldChange={handleFieldChange}
|
||||
* onFieldBlur={handleFieldBlur}
|
||||
|
||||
Reference in New Issue
Block a user