Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add tabs and container components #1549

Merged
merged 2 commits into from
Jan 16, 2023
Merged

Add tabs and container components #1549

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13a1d81
Add tabs and container components
bytasv Jan 12, 2023
eae7102
Add sx prop to container
bytasv Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ interface FutureComponentSpec {
const FUTURE_COMPONENTS = new Map<string, FutureComponentSpec>([
['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' }],
Expand Down
3 changes: 3 additions & 0 deletions ...es/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, React.ComponentType<SvgIconProps>>([
Expand All @@ -38,6 +39,8 @@ const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
['Checkbox', CheckBoxIcon],
['CodeComponent', DashboardCustomizeSharpIcon],
['CreateNew', AddIcon],
['Tabs', TabIcon],
['Container', AutoAwesomeMosaicIcon],
]);

type ComponentItemKind = 'future' | 'builtIn' | 'create' | 'custom';
Expand Down
2 changes: 2 additions & 0 deletions packages/toolpad-app/src/toolpadComponents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
['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 {
Expand Down
30 changes: 30 additions & 0 deletions packages/toolpad-components/src/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import { Container as MUIContainer } from '@mui/material';
import { createComponent } from '@mui/toolpad-core';

interface Props {
children: React.ReactNode;
visible: boolean;
}

function Container({ children, visible, ...props }: Props) {
return visible ? (
<MUIContainer disableGutters sx={{ padding: 1 }} {...props}>
bytasv marked this conversation as resolved.
Show resolved Hide resolved
{children}
</MUIContainer>
) : null;
}

export default createComponent(Container, {
argTypes: {
children: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another thing: there is a bug I've found so if this prop is not called children it doesn't work, but it should. I'm including the fix in #1527

typeDef: { type: 'element' },
control: { type: 'layoutSlot' },
},
visible: {
typeDef: { type: 'boolean' },
defaultValue: true,
helperText: 'Control whether container element is visible.',
},
},
});
60 changes: 60 additions & 0 deletions packages/toolpad-components/src/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<MUITabs
value={active || defaultValue}
onChange={(event, value) => {
onChange(value);
}}
>
{tabs.map(({ title, name }) => (
<Tab label={title} value={name} key={name} />
))}
</MUITabs>
);
}

export default createComponent(Tabs, {
layoutDirection: 'horizontal',
argTypes: {
active: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be value

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you clarify what you mean? the name of prop? if yes, why?

Copy link
Member

@Janpot Janpot Jan 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the name of prop? if yes, why?

yes, because:

  1. Conventions: we generally use the combination value/onChange to denote the main controlled prop of a component (yes, there are specific situations where we deviate from this, e.g. DataGrid.)
  2. The MUI Tabs component uses value
  3. This component as it currently is, is in essence a Select, and the MUI Select uses value
  4. The word "active" is an adjective, and "a tab" is "a thing", so we should use a noun for naming it in our code.

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',
bytasv marked this conversation as resolved.
Show resolved Hide resolved
name: 'tab-one',
},
{ title: 'Tab two', name: 'tab-two' },
{ title: 'Tab three', name: 'tab-three' },
],
helperText: 'Tabs configuration object.',
},
},
});
4 changes: 4 additions & 0 deletions packages/toolpad-components/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';