From 8378f307b7c975a2c5b07c28886fb7211cbd8c4a Mon Sep 17 00:00:00 2001 From: Jerry_wu <409187100@qq.com> Date: Fri, 1 Sep 2023 21:02:18 +0800 Subject: [PATCH] add checkbox (#2494) Co-authored-by: wuls Co-authored-by: wuls <> --- .../toolpad/reference/components/checkbox.md | 23 +++ .../toolpad/reference/components/index.md | 1 + .../reference/components/manifest.json | 4 + .../toolpad/reference/components/checkbox.js | 9 ++ .../src/runtime/toolpadComponents/index.tsx | 1 + .../ComponentCatalog/ComponentCatalog.tsx | 1 - packages/toolpad-components/src/Checkbox.tsx | 134 ++++++++++++++++++ packages/toolpad-components/src/index.tsx | 2 + .../fixture/toolpad/pages/components/page.yml | 5 +- 9 files changed, 178 insertions(+), 2 deletions(-) create mode 100644 docs/data/toolpad/reference/components/checkbox.md create mode 100644 docs/pages/toolpad/reference/components/checkbox.js create mode 100644 packages/toolpad-components/src/Checkbox.tsx diff --git a/docs/data/toolpad/reference/components/checkbox.md b/docs/data/toolpad/reference/components/checkbox.md new file mode 100644 index 00000000000..10320304fd1 --- /dev/null +++ b/docs/data/toolpad/reference/components/checkbox.md @@ -0,0 +1,23 @@ + + +# Checkbox + +

API docs for the Toolpad Checkbox component.

+ +## Properties + +| Name | Type | Default | Description | +| :--------------------------------------------- | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| label | string | "Checkbox" | A text or an element to be used in an enclosing label element. | +| checked | boolean | | If true, the component is checked. | +| color | string | "primary" | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. | +| defaultChecked | boolean | | The default checked state. Use when the component is not controlled. | +| disabled | boolean | false | If true, the component is disabled. | +| size | string | "medium" | The size of the component. small is equivalent to the dense checkbox styling. | +| sx | object | | 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. | +| fullWidth | boolean | | Whether the select should occupy all available horizontal space. | +| componentsProps | object | | The props used for each slot inside. | +| labelPlacement | string | "end" | The position of the label. | +| name | string | | Name of this input. Used as a reference in form data. | +| isRequired | boolean | false | Whether the input is required to have a value. | +| isInvalid | boolean | false | Whether the input value is invalid. | diff --git a/docs/data/toolpad/reference/components/index.md b/docs/data/toolpad/reference/components/index.md index 64212d32461..43b864aea74 100644 --- a/docs/data/toolpad/reference/components/index.md +++ b/docs/data/toolpad/reference/components/index.md @@ -7,6 +7,7 @@ - [Autocomplete](/toolpad/reference/components/autocomplete/) - [Button](/toolpad/reference/components/button/) - [Chart](/toolpad/reference/components/chart/) +- [Checkbox](/toolpad/reference/components/checkbox/) - [Container](/toolpad/reference/components/container/) - [DataGrid](/toolpad/reference/components/data-grid/) - [DatePicker](/toolpad/reference/components/date-picker/) diff --git a/docs/data/toolpad/reference/components/manifest.json b/docs/data/toolpad/reference/components/manifest.json index ba397916771..6a48d487c20 100644 --- a/docs/data/toolpad/reference/components/manifest.json +++ b/docs/data/toolpad/reference/components/manifest.json @@ -21,6 +21,10 @@ "title": "Chart", "pathname": "/toolpad/reference/components/chart" }, + { + "title": "Checkbox", + "pathname": "/toolpad/reference/components/checkbox" + }, { "title": "Container", "pathname": "/toolpad/reference/components/container" diff --git a/docs/pages/toolpad/reference/components/checkbox.js b/docs/pages/toolpad/reference/components/checkbox.js new file mode 100644 index 00000000000..7939f69e3ad --- /dev/null +++ b/docs/pages/toolpad/reference/components/checkbox.js @@ -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 ; +} diff --git a/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx b/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx index 475384139a1..dc192d84707 100644 --- a/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx +++ b/packages/toolpad-app/src/runtime/toolpadComponents/index.tsx @@ -50,6 +50,7 @@ export const INTERNAL_COMPONENTS = new Map([ ['Tabs', { displayName: 'Tabs', builtIn: 'Tabs' }], ['Container', { displayName: 'Container', builtIn: 'Container' }], ['Metric', { displayName: 'Metric', builtIn: 'Metric' }], + ['Checkbox', { displayName: 'Checkbox', builtIn: 'Checkbox' }], [FORM_COMPONENT_ID, { displayName: 'Form', builtIn: 'Form' }], ]); diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx index 7b21866a160..3dba75318f2 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx @@ -27,7 +27,6 @@ const FUTURE_COMPONENTS = new Map([ ['Slider', { url: 'https://github.com/mui/mui-toolpad/issues/746', displayName: 'Slider' }], ['Switch', { url: 'https://github.com/mui/mui-toolpad/issues/745', displayName: 'Switch' }], ['Radio', { url: 'https://github.com/mui/mui-toolpad/issues/744', displayName: 'Radio' }], - ['Checkbox', { url: 'https://github.com/mui/mui-toolpad/issues/742', displayName: 'Checkbox' }], ]); const WIDTH_COLLAPSED = 40; diff --git a/packages/toolpad-components/src/Checkbox.tsx b/packages/toolpad-components/src/Checkbox.tsx new file mode 100644 index 00000000000..03e32354ff0 --- /dev/null +++ b/packages/toolpad-components/src/Checkbox.tsx @@ -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 & + Omit & + Pick; + +function Checkbox({ ...rest }: FormControlLabelOptions) { + rest.checked = rest.checked ?? false; + const { onFormInputChange, renderFormInput, formInputError } = useFormInput({ + 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) => { + const newValue = event.target.checked; + onFormInputChange(newValue); + }, + [onFormInputChange], + ); + + const renderedOptions = React.useMemo( + () => ( + + + + } + /> + + {formInputError?.message || ''} + + ), + [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, + }, +}); diff --git a/packages/toolpad-components/src/index.tsx b/packages/toolpad-components/src/index.tsx index 5e1dddf8b95..d0f112ad58c 100644 --- a/packages/toolpad-components/src/index.tsx +++ b/packages/toolpad-components/src/index.tsx @@ -32,6 +32,8 @@ export { default as Tabs } from './Tabs'; export { default as Container } from './Container'; +export { default as Checkbox } from './Checkbox'; + export { default as Form } from './Form'; export { default as Metric } from './Metric'; diff --git a/test/visual/components/fixture/toolpad/pages/components/page.yml b/test/visual/components/fixture/toolpad/pages/components/page.yml index b44b16513a6..f735adeb918 100644 --- a/test/visual/components/fixture/toolpad/pages/components/page.yml +++ b/test/visual/components/fixture/toolpad/pages/components/page.yml @@ -24,7 +24,7 @@ spec: layout: columnSize: 1 props: - msg: "1" + msg: '1' - component: DataGrid name: dataGrid children: [] @@ -77,3 +77,6 @@ spec: content: $$jsExpression: | `List Button ${i + 1}` + - component: Checkbox + name: checkbox + children: []