Skip to content

[docs] Add ToggleButton demo for not accepting null value #19582

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

Merged
merged 3 commits into from
Feb 6, 2020
Merged

[docs] Add ToggleButton demo for not accepting null value #19582

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
267a1b8
Add toggle button enforce value documentation
Feb 6, 2020
444190b
Explicitly add null as allowed value to handler
Feb 6, 2020
4c6cf36
Sync demo component name with filename
Feb 6, 2020
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
80 changes: 80 additions & 0 deletions docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
import LaptopIcon from '@material-ui/icons/Laptop';
import TvIcon from '@material-ui/icons/Tv';
import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
import Grid from '@material-ui/core/Grid';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

const useStyles = makeStyles(theme => ({
toggleContainer: {
margin: theme.spacing(2, 0),
},
}));

export default function ToggleButtons() {
const [alignment, setAlignment] = React.useState('left');
const [formats, setFormats] = React.useState(() => ['phone']);

const handleFormat = (event, newFormats) => {
if (newFormats.length) {
setFormats(newFormats);
}
};

const handleAlignment = (event, newAlignment) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};

const classes = useStyles();

return (
<Grid container spacing={2}>
<Grid item sm={12} md={6}>
<div className={classes.toggleContainer}>
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
</div>
</Grid>
<Grid item sm={12} md={6}>
<div className={classes.toggleContainer}>
<ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="device">
<ToggleButton value="laptop" aria-label="laptop">
<LaptopIcon />
</ToggleButton>
<ToggleButton value="tv" aria-label="tv">
<TvIcon />
</ToggleButton>
<ToggleButton value="phone" aria-label="phone">
<PhoneAndroidIcon />
</ToggleButton>
</ToggleButtonGroup>
</div>
</Grid>
</Grid>
);
}
80 changes: 80 additions & 0 deletions docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
import LaptopIcon from '@material-ui/icons/Laptop';
import TvIcon from '@material-ui/icons/Tv';
import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
import Grid from '@material-ui/core/Grid';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';

const useStyles = makeStyles(theme => ({
toggleContainer: {
margin: theme.spacing(2, 0),
},
}));

export default function ToggleButtons() {
const [alignment, setAlignment] = React.useState('left');
const [formats, setFormats] = React.useState(() => ['phone']);

const handleFormat = (event: React.MouseEvent<HTMLElement>, newFormats: string[]) => {
if (newFormats.length) {
setFormats(newFormats);
}
};

const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};

const classes = useStyles();

return (
<Grid container spacing={2}>
<Grid item sm={12} md={6}>
<div className={classes.toggleContainer}>
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
</div>
</Grid>
<Grid item sm={12} md={6}>
<div className={classes.toggleContainer}>
<ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="device">
<ToggleButton value="laptop" aria-label="laptop">
<LaptopIcon />
</ToggleButton>
<ToggleButton value="tv" aria-label="tv">
<TvIcon />
</ToggleButton>
<ToggleButton value="phone" aria-label="phone">
<PhoneAndroidIcon />
</ToggleButton>
</ToggleButtonGroup>
</div>
</Grid>
</Grid>
);
}
4 changes: 2 additions & 2 deletions docs/src/pages/components/toggle-button/ToggleButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ const useStyles = makeStyles(theme => ({
}));

export default function ToggleButtons() {
const [alignment, setAlignment] = React.useState('left');
const [alignment, setAlignment] = React.useState<string | null>('left');
const [formats, setFormats] = React.useState(() => ['bold']);

const handleFormat = (event: React.MouseEvent<HTMLElement>, newFormats: string[]) => {
setFormats(newFormats);
};

const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string) => {
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
setAlignment(newAlignment);
};

Expand Down
21 changes: 21 additions & 0 deletions docs/src/pages/components/toggle-button/toggle-button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,27 @@ Fancy larger or smaller buttons? Use the `size` property.

{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}

## Enforce value set

If you want to enforce at least one button to be active, you can adapt your handleChange
function.

```jsx
const handleFormat = (event, newFormats) => {
if (newFormats.length) {
setFormats(newFormats);
}
};

const handleAlignment = (event, newAlignment) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};
```

{{"demo": "pages/components/toggle-button/ToggleButtonNotEmpty.js"}}

## Standalone toggle button

{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
Expand Down