-
-
Notifications
You must be signed in to change notification settings - Fork 271
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: wuls <[email protected]> Co-authored-by: wuls <>
- Loading branch information
1 parent
9f8ad7b
commit 8378f30
Showing
9 changed files
with
178 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!-- This file has been auto-generated using `yarn docs:build:api`. --> | ||
|
|
||
| # Checkbox | ||
|
|
||
| <p class="description">API docs for the Toolpad Checkbox component.</p> | ||
|
|
||
| ## Properties | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | :--------------------------------------------- | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | <span class="prop-name">label</span> | <span class="prop-type">string</span> | <span class="prop-default">"Checkbox"</span> | A text or an element to be used in an enclosing label element. | | ||
| | <span class="prop-name">checked</span> | <span class="prop-type">boolean</span> | | If true, the component is checked. | | ||
| | <span class="prop-name">color</span> | <span class="prop-type">string</span> | <span class="prop-default">"primary"</span> | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. | | ||
| | <span class="prop-name">defaultChecked</span> | <span class="prop-type">boolean</span> | | The default checked state. Use when the component is not controlled. | | ||
| | <span class="prop-name">disabled</span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If true, the component is disabled. | | ||
| | <span class="prop-name">size</span> | <span class="prop-type">string</span> | <span class="prop-default">"medium"</span> | The size of the component. small is equivalent to the dense checkbox styling. | | ||
| | <span class="prop-name">sx</span> | <span class="prop-type">object</span> | | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. | | ||
| | <span class="prop-name">fullWidth</span> | <span class="prop-type">boolean</span> | | Whether the select should occupy all available horizontal space. | | ||
| | <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | | The props used for each slot inside. | | ||
| | <span class="prop-name">labelPlacement</span> | <span class="prop-type">string</span> | <span class="prop-default">"end"</span> | The position of the label. | | ||
| | <span class="prop-name">name</span> | <span class="prop-type">string</span> | | Name of this input. Used as a reference in form data. | | ||
| | <span class="prop-name">isRequired</span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | Whether the input is required to have a value. | | ||
| | <span class="prop-name">isInvalid</span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | Whether the input value is invalid. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /* This file has been auto-generated using `yarn docs:build:api`. */ | ||
|
|
||
| import * as React from 'react'; | ||
| import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs'; | ||
| import * as pageProps from '../../../../data/toolpad/reference/components/checkbox.md?@mui/markdown'; | ||
|
|
||
| export default function Page() { | ||
| return <MarkdownDocs {...pageProps} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| import { createComponent } from '@mui/toolpad-core'; | ||
| import * as React from 'react'; | ||
| import { | ||
| FormControlLabel, | ||
| FormGroup, | ||
| Checkbox as MuiCheckbox, | ||
| FormHelperText, | ||
| FormControl, | ||
| } from '@mui/material'; | ||
| import type { CheckboxProps } from '@mui/material/Checkbox'; | ||
| import type { FormControlLabelProps } from '@mui/material/FormControlLabel'; | ||
| import { SX_PROP_HELPER_TEXT } from './constants'; | ||
| import { | ||
| FormInputComponentProps, | ||
| useFormInput, | ||
| withComponentForm, | ||
| FORM_INPUT_ARG_TYPES, | ||
| } from './Form'; | ||
|
|
||
| export type FormControlLabelOptions = { | ||
| onChange: (newValue: boolean) => void; | ||
| defaultValue: string; | ||
| fullWidth: boolean; | ||
| } & Omit<FormControlLabelProps, 'control' | 'onChange'> & | ||
| Omit<CheckboxProps, 'onChange'> & | ||
| Pick<FormInputComponentProps, 'name' | 'isRequired' | 'isInvalid'>; | ||
|
|
||
| function Checkbox({ ...rest }: FormControlLabelOptions) { | ||
| rest.checked = rest.checked ?? false; | ||
| const { onFormInputChange, renderFormInput, formInputError } = useFormInput<boolean>({ | ||
| name: rest.name, | ||
| label: rest.label as string, | ||
| onChange: rest.onChange, | ||
| validationProps: { isRequired: rest.isRequired, isInvalid: rest.isInvalid }, | ||
| }); | ||
|
|
||
| const handleChange = React.useCallback( | ||
| (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const newValue = event.target.checked; | ||
| onFormInputChange(newValue); | ||
| }, | ||
| [onFormInputChange], | ||
| ); | ||
|
|
||
| const renderedOptions = React.useMemo( | ||
| () => ( | ||
| <FormControl error={Boolean(formInputError)} fullWidth={rest.fullWidth}> | ||
| <FormGroup> | ||
| <FormControlLabel | ||
| label={rest.label} | ||
| checked={rest.checked} | ||
| labelPlacement={rest.labelPlacement} | ||
| componentsProps={rest.componentsProps} | ||
| control={ | ||
| <MuiCheckbox | ||
| required={rest.isRequired} | ||
| size={rest.size} | ||
| onChange={handleChange} | ||
| defaultChecked={rest.defaultChecked} | ||
| disabled={rest.disabled} | ||
| color={rest.color} | ||
| sx={rest.sx} | ||
| /> | ||
| } | ||
| /> | ||
| </FormGroup> | ||
| <FormHelperText>{formInputError?.message || ''}</FormHelperText> | ||
| </FormControl> | ||
| ), | ||
| [rest, handleChange, formInputError], | ||
| ); | ||
|
|
||
| return renderFormInput(renderedOptions); | ||
| } | ||
|
|
||
| const FormWrappedCheckbox = withComponentForm(Checkbox); | ||
| export default createComponent(FormWrappedCheckbox, { | ||
| layoutDirection: 'both', | ||
| loadingProp: 'checked', | ||
| argTypes: { | ||
| label: { | ||
| helperText: 'A text or an element to be used in an enclosing label element.', | ||
| type: 'string', | ||
| default: 'Checkbox', | ||
| }, | ||
| checked: { | ||
| helperText: 'If true, the component is checked.', | ||
| onChangeProp: 'onChange', | ||
| type: 'boolean', | ||
| defaultValueProp: 'defaultChecked', | ||
| }, | ||
| color: { | ||
| helperText: | ||
| 'The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.', | ||
| type: 'string', | ||
| enum: ['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning'], | ||
| default: 'primary', | ||
| }, | ||
| defaultChecked: { | ||
| helperText: 'The default checked state. Use when the component is not controlled.', | ||
| type: 'boolean', | ||
| }, | ||
| disabled: { | ||
| helperText: 'If true, the component is disabled.', | ||
| type: 'boolean', | ||
| default: false, | ||
| }, | ||
| size: { | ||
| helperText: 'The size of the component. small is equivalent to the dense checkbox styling.', | ||
| type: 'string', | ||
| enum: ['medium', 'small', 'string'], | ||
| default: 'medium', | ||
| }, | ||
| sx: { | ||
| helperText: SX_PROP_HELPER_TEXT, | ||
| type: 'object', | ||
| }, | ||
| fullWidth: { | ||
| helperText: 'Whether the select should occupy all available horizontal space.', | ||
| type: 'boolean', | ||
| }, | ||
| componentsProps: { | ||
| helperText: 'The props used for each slot inside.', | ||
| type: 'object', | ||
| }, | ||
| labelPlacement: { | ||
| helperText: 'The position of the label.', | ||
| type: 'string', | ||
| enum: ['bottom', 'end', 'start', 'top'], | ||
| default: 'end', | ||
| }, | ||
| ...FORM_INPUT_ARG_TYPES, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters