From 3541ecb16036ad5a7ad1301ddc57e52599f1f4f1 Mon Sep 17 00:00:00 2001 From: Vytautas Butkus Date: Mon, 16 Jan 2023 21:58:58 +0200 Subject: [PATCH] Add tabs and container components (#1549) --- .../ComponentCatalog/ComponentCatalog.tsx | 1 - .../ComponentCatalog/ComponentCatalogItem.tsx | 3 + .../src/toolpadComponents/index.tsx | 2 + packages/toolpad-components/src/Container.tsx | 35 +++++++++++ packages/toolpad-components/src/Tabs.tsx | 60 +++++++++++++++++++ packages/toolpad-components/src/index.tsx | 4 ++ 6 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 packages/toolpad-components/src/Container.tsx create mode 100644 packages/toolpad-components/src/Tabs.tsx 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 093d05899b2..ab65cb9ba3c 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx @@ -20,7 +20,6 @@ interface FutureComponentSpec { const FUTURE_COMPONENTS = new Map([ ['Form', { url: 'https://github.com/mui/mui-toolpad/issues/749', displayName: 'Form' }], ['Card', { url: 'https://github.com/mui/mui-toolpad/issues/748', displayName: 'Card' }], - ['Tabs', { url: 'https://github.com/mui/mui-toolpad/issues/747', displayName: 'Tabs' }], ['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' }], diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx index 344e6447203..b8a5a8dc106 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx @@ -18,6 +18,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox'; import DashboardCustomizeSharpIcon from '@mui/icons-material/DashboardCustomizeSharp'; import AddIcon from '@mui/icons-material/Add'; import NotesIcon from '@mui/icons-material/Notes'; +import AutoAwesomeMosaicIcon from '@mui/icons-material/AutoAwesomeMosaic'; import { SvgIconProps } from '@mui/material/SvgIcon'; const iconMap = new Map>([ @@ -38,6 +39,8 @@ const iconMap = new Map>([ ['Checkbox', CheckBoxIcon], ['CodeComponent', DashboardCustomizeSharpIcon], ['CreateNew', AddIcon], + ['Tabs', TabIcon], + ['Container', AutoAwesomeMosaicIcon], ]); type ComponentItemKind = 'future' | 'builtIn' | 'create' | 'custom'; diff --git a/packages/toolpad-app/src/toolpadComponents/index.tsx b/packages/toolpad-app/src/toolpadComponents/index.tsx index 146fe98c2b4..970815d81eb 100644 --- a/packages/toolpad-app/src/toolpadComponents/index.tsx +++ b/packages/toolpad-app/src/toolpadComponents/index.tsx @@ -36,6 +36,8 @@ const INTERNAL_COMPONENTS = new Map([ ['Text', { displayName: 'Text', builtIn: 'Text' }], ['Select', { displayName: 'Select', builtIn: 'Select' }], ['Paper', { displayName: 'Paper', builtIn: 'Paper' }], + ['Tabs', { displayName: 'Tabs', builtIn: 'Tabs' }], + ['Container', { displayName: 'Container', builtIn: 'Container' }], ]); function createCodeComponent(domNode: appDom.CodeComponentNode): ToolpadComponentDefinition { diff --git a/packages/toolpad-components/src/Container.tsx b/packages/toolpad-components/src/Container.tsx new file mode 100644 index 00000000000..2668dd0b21c --- /dev/null +++ b/packages/toolpad-components/src/Container.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { Container as MUIContainer, ContainerProps } from '@mui/material'; +import { createComponent } from '@mui/toolpad-core'; +import { SX_PROP_HELPER_TEXT } from './constants'; + +interface Props extends ContainerProps { + visible: boolean; +} + +function Container({ children, visible, sx, ...props }: Props) { + return visible ? ( + + {children} + + ) : null; +} + +export default createComponent(Container, { + argTypes: { + children: { + typeDef: { type: 'element' }, + control: { type: 'layoutSlot' }, + }, + visible: { + typeDef: { type: 'boolean' }, + defaultValue: true, + helperText: 'Control whether container element is visible.', + }, + sx: { + helperText: SX_PROP_HELPER_TEXT, + typeDef: { type: 'object' }, + defaultValue: { padding: 1, border: 'solid 1px' }, + }, + }, +}); diff --git a/packages/toolpad-components/src/Tabs.tsx b/packages/toolpad-components/src/Tabs.tsx new file mode 100644 index 00000000000..625c57fecde --- /dev/null +++ b/packages/toolpad-components/src/Tabs.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { Tabs as MUITabs, Tab } from '@mui/material'; +import { createComponent } from '@mui/toolpad-core'; + +interface TabProps { + title: string; + name: string; +} + +interface Props { + active: string; + onChange: (value: number) => void; + tabs: TabProps[]; + defaultValue: string; +} + +function Tabs({ active, onChange, tabs, defaultValue }: Props) { + return ( + { + onChange(value); + }} + > + {tabs.map(({ title, name }) => ( + + ))} + + ); +} + +export default createComponent(Tabs, { + layoutDirection: 'horizontal', + argTypes: { + active: { + typeDef: { type: 'string' }, + onChangeProp: 'onChange', + defaultValueProp: 'defaultValue', + helperText: 'Currently active tab.', + }, + defaultValue: { + label: 'Default active tab', + typeDef: { type: 'string' }, + defaultValue: 'tab-one', + helperText: 'The tab which will be active by default.', + }, + tabs: { + typeDef: { type: 'array' }, + defaultValue: [ + { + title: 'Tab one', + name: 'tab-one', + }, + { title: 'Tab two', name: 'tab-two' }, + { title: 'Tab three', name: 'tab-three' }, + ], + helperText: 'Tabs configuration object.', + }, + }, +}); diff --git a/packages/toolpad-components/src/index.tsx b/packages/toolpad-components/src/index.tsx index b9577f742f4..8cc774c55c8 100644 --- a/packages/toolpad-components/src/index.tsx +++ b/packages/toolpad-components/src/index.tsx @@ -20,5 +20,9 @@ export { default as Image } from './Image.js'; export { default as DatePicker } from './DatePicker.js'; +export { default as Tabs } from './Tabs.js'; + +export { default as Container } from './Container.js'; + export { CUSTOM_COLUMN_TYPES, NUMBER_FORMAT_PRESETS, inferColumns, parseColumns } from './DataGrid'; export type { SerializableGridColumn, SerializableGridColumns, NumberFormat } from './DataGrid';