Skip to content

Commit 6981a04

Browse files
sperry94eps1lon
sperry94
authored and
eps1lon
committed
[Chip] Enable generic props
* [docs] Add TS examples for Chips and OutlinedChips * enabling generic component props for chip
1 parent 77806af commit 6981a04

File tree

3 files changed

+284
-14
lines changed

3 files changed

+284
-14
lines changed

‎docs/src/pages/demos/chips/Chips.tsx

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import Avatar from '@material-ui/core/Avatar';
5+
import Chip from '@material-ui/core/Chip';
6+
import FaceIcon from '@material-ui/icons/Face';
7+
import DoneIcon from '@material-ui/icons/Done';
8+
9+
const styles = (theme: Theme) =>
10+
createStyles({
11+
root: {
12+
display: 'flex',
13+
justifyContent: 'center',
14+
flexWrap: 'wrap',
15+
},
16+
chip: {
17+
margin: theme.spacing(1),
18+
},
19+
});
20+
21+
function handleDelete() {
22+
alert('You clicked the delete icon.'); // eslint-disable-line no-alert
23+
}
24+
25+
function handleClick() {
26+
alert('You clicked the Chip.'); // eslint-disable-line no-alert
27+
}
28+
29+
function Chips(props: WithStyles<typeof styles>) {
30+
const { classes } = props;
31+
return (
32+
<div className={classes.root}>
33+
<Chip label="Basic Chip" className={classes.chip} />
34+
<Chip
35+
avatar={<Avatar>MB</Avatar>}
36+
label="Clickable Chip"
37+
onClick={handleClick}
38+
className={classes.chip}
39+
/>
40+
<Chip
41+
avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
42+
label="Deletable Chip"
43+
onDelete={handleDelete}
44+
className={classes.chip}
45+
/>
46+
<Chip
47+
avatar={
48+
<Avatar>
49+
<FaceIcon />
50+
</Avatar>
51+
}
52+
label="Clickable Deletable Chip"
53+
onClick={handleClick}
54+
onDelete={handleDelete}
55+
className={classes.chip}
56+
/>
57+
<Chip
58+
icon={<FaceIcon />}
59+
label="Clickable Deletable Chip"
60+
onClick={handleClick}
61+
onDelete={handleDelete}
62+
className={classes.chip}
63+
/>
64+
<Chip
65+
label="Custom delete icon Chip"
66+
onClick={handleClick}
67+
onDelete={handleDelete}
68+
className={classes.chip}
69+
deleteIcon={<DoneIcon />}
70+
/>
71+
<Chip
72+
label="Clickable Link Chip"
73+
className={classes.chip}
74+
component="a"
75+
href="#chip"
76+
clickable
77+
/>
78+
<Chip
79+
avatar={<Avatar>MB</Avatar>}
80+
label="Primary Clickable Chip"
81+
clickable
82+
className={classes.chip}
83+
color="primary"
84+
onDelete={handleDelete}
85+
deleteIcon={<DoneIcon />}
86+
/>
87+
<Chip
88+
icon={<FaceIcon />}
89+
label="Primary Clickable Chip"
90+
clickable
91+
className={classes.chip}
92+
color="primary"
93+
onDelete={handleDelete}
94+
deleteIcon={<DoneIcon />}
95+
/>
96+
<Chip
97+
label="Deletable Primary Chip"
98+
onDelete={handleDelete}
99+
className={classes.chip}
100+
color="primary"
101+
/>
102+
<Chip
103+
avatar={
104+
<Avatar>
105+
<FaceIcon />
106+
</Avatar>
107+
}
108+
label="Deletable Secondary Chip"
109+
onDelete={handleDelete}
110+
className={classes.chip}
111+
color="secondary"
112+
/>
113+
<Chip
114+
icon={<FaceIcon />}
115+
label="Deletable Secondary Chip"
116+
onDelete={handleDelete}
117+
className={classes.chip}
118+
color="secondary"
119+
/>
120+
</div>
121+
);
122+
}
123+
124+
Chips.propTypes = {
125+
classes: PropTypes.object.isRequired,
126+
} as any;
127+
128+
export default withStyles(styles)(Chips);

‎docs/src/pages/demos/chips/OutlinedChips.tsx

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
4+
import Avatar from '@material-ui/core/Avatar';
5+
import Chip from '@material-ui/core/Chip';
6+
import FaceIcon from '@material-ui/icons/Face';
7+
import DoneIcon from '@material-ui/icons/Done';
8+
9+
const styles = (theme: Theme) =>
10+
createStyles({
11+
root: {
12+
display: 'flex',
13+
justifyContent: 'center',
14+
flexWrap: 'wrap',
15+
},
16+
chip: {
17+
margin: theme.spacing(1),
18+
},
19+
});
20+
21+
function handleDelete() {
22+
alert('You clicked the delete icon.'); // eslint-disable-line no-alert
23+
}
24+
25+
function handleClick() {
26+
alert('You clicked the Chip.'); // eslint-disable-line no-alert
27+
}
28+
29+
function OutlinedChips(props: WithStyles<typeof styles>) {
30+
const { classes } = props;
31+
return (
32+
<div className={classes.root}>
33+
<Chip label="Basic Chip" className={classes.chip} variant="outlined" />
34+
<Chip
35+
avatar={<Avatar>MB</Avatar>}
36+
label="Clickable Chip"
37+
onClick={handleClick}
38+
className={classes.chip}
39+
variant="outlined"
40+
/>
41+
<Chip
42+
avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
43+
label="Deletable Chip"
44+
onDelete={handleDelete}
45+
className={classes.chip}
46+
variant="outlined"
47+
/>
48+
<Chip
49+
avatar={
50+
<Avatar>
51+
<FaceIcon />
52+
</Avatar>
53+
}
54+
label="Clickable Deletable Chip"
55+
onClick={handleClick}
56+
onDelete={handleDelete}
57+
className={classes.chip}
58+
variant="outlined"
59+
/>
60+
<Chip
61+
icon={<FaceIcon />}
62+
label="Clickable Deletable Chip"
63+
onClick={handleClick}
64+
onDelete={handleDelete}
65+
className={classes.chip}
66+
variant="outlined"
67+
/>
68+
<Chip
69+
label="Custom delete icon Chip"
70+
onClick={handleClick}
71+
onDelete={handleDelete}
72+
className={classes.chip}
73+
deleteIcon={<DoneIcon />}
74+
variant="outlined"
75+
/>
76+
<Chip
77+
label="Clickable Link Chip"
78+
className={classes.chip}
79+
component="a"
80+
href="#chip"
81+
clickable
82+
variant="outlined"
83+
/>
84+
<Chip
85+
avatar={<Avatar>MB</Avatar>}
86+
label="Primary Clickable Chip"
87+
clickable
88+
className={classes.chip}
89+
color="primary"
90+
onDelete={handleDelete}
91+
deleteIcon={<DoneIcon />}
92+
variant="outlined"
93+
/>
94+
<Chip
95+
icon={<FaceIcon />}
96+
label="Primary Clickable Chip"
97+
clickable
98+
className={classes.chip}
99+
color="primary"
100+
onDelete={handleDelete}
101+
deleteIcon={<DoneIcon />}
102+
variant="outlined"
103+
/>
104+
<Chip
105+
label="Deletable Primary Chip"
106+
onDelete={handleDelete}
107+
className={classes.chip}
108+
color="primary"
109+
variant="outlined"
110+
/>
111+
<Chip
112+
avatar={
113+
<Avatar>
114+
<FaceIcon />
115+
</Avatar>
116+
}
117+
label="Deletable Secondary Chip"
118+
onDelete={handleDelete}
119+
className={classes.chip}
120+
color="secondary"
121+
variant="outlined"
122+
/>
123+
<Chip
124+
icon={<FaceIcon />}
125+
label="Deletable Secondary Chip"
126+
onDelete={handleDelete}
127+
className={classes.chip}
128+
color="secondary"
129+
variant="outlined"
130+
/>
131+
</div>
132+
);
133+
}
134+
135+
OutlinedChips.propTypes = {
136+
classes: PropTypes.object.isRequired,
137+
} as any;
138+
139+
export default withStyles(styles)(OutlinedChips);

‎packages/material-ui/src/Chip/Chip.d.ts

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import * as React from 'react';
2-
import { StandardProps, PropTypes } from '..';
2+
import { PropTypes } from '..';
3+
import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
34

4-
export interface ChipProps
5-
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
6-
avatar?: React.ReactElement;
7-
clickable?: boolean;
8-
color?: PropTypes.Color;
9-
component?: React.ElementType<ChipProps>;
10-
deleteIcon?: React.ReactElement;
11-
icon?: React.ReactElement;
12-
label?: React.ReactNode;
13-
onDelete?: React.EventHandler<any>;
14-
variant?: 'default' | 'outlined';
15-
}
5+
declare const Chip: OverridableComponent<{
6+
props: {
7+
avatar?: React.ReactElement;
8+
clickable?: boolean;
9+
color?: PropTypes.Color;
10+
deleteIcon?: React.ReactElement;
11+
icon?: React.ReactElement;
12+
label?: React.ReactNode;
13+
onDelete?: React.EventHandler<any>;
14+
variant?: 'default' | 'outlined';
15+
};
16+
defaultComponent: 'div';
17+
classKey: ChipClassKey;
18+
}>;
1619

1720
export type ChipClassKey =
1821
| 'root'
@@ -41,6 +44,6 @@ export type ChipClassKey =
4144
| 'deleteIconOutlinedColorPrimary'
4245
| 'deleteIconOutlinedColorSecondary';
4346

44-
declare const Chip: React.ComponentType<ChipProps>;
47+
export type ChipProps = SimplifiedPropsOf<typeof Chip>;
4548

4649
export default Chip;

0 commit comments

Comments
 (0)