@material-ui/icons#Person TypeScript Examples
The following examples show how to use
@material-ui/icons#Person.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: with-basic-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withBasicConfig = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={text('title', 'Simple Drawer')} />
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #2
| Source File: with-custom-header.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withCustomHeader = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader
backgroundImage={farmBgImage}
backgroundOpacity={0.5}
icon={<Menu />}
titleContent={
<div
style={{
display: 'flex',
justifyContent: 'space-between',
zIndex: 1,
padding: '0 16px',
alignItems: 'center',
width: '100%',
height: '100%',
}}
>
<div>
<Typography variant="subtitle2">Customizable</Typography>
<Typography variant="h6" style={{ marginTop: '-10px' }}>
Header Content
</Typography>
</div>
<ListItemTag style={{ marginBottom: 16 }} label={'v1.0.3'} />
</div>
}
/>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #3
| Source File: with-multiple-DrawerNavGroups.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withMultipleNavGroups = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const navGroupItems1: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
const navGroupItems2: NavItem[] = [
{
title: 'Settings',
itemID: '2-1',
icon: <Settings />,
onClick: (): void => setSelected('2-1'),
},
{
title: 'Legal',
itemID: '2-2',
icon: <Gavel />,
onClick: (): void => setSelected('2-2'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader
icon={<Menu />}
title={'Brightlayer UI Drawer'}
subtitle={'with multiple navigation groups'}
/>
<DrawerBody>
<DrawerNavGroup
title={text('navGroup[0].title', 'First DrawerNavGroup')}
titleDivider={boolean('titleDivider', true)}
items={navGroupItems1}
/>
{boolean('Add Spacer', true) && <Spacer />}
<DrawerNavGroup
title={text('navGroup[1].title', 'Second DrawerNavGroup')}
titleDivider={boolean('titleDivider', true)}
items={navGroupItems2}
/>
</DrawerBody>
</Drawer>
);
}
Example #4
| Source File: with-subheader.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
withSubheader = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const valuesObj = {
filter: 'Filter',
accordion: 'Accordion',
};
const optionsObj = {
display: 'inline-radio' as OptionsKnobOptionsDisplay,
};
const subheaderContent = optionsKnob('Subheader Content', valuesObj, 'Filter', optionsObj);
const navGroupItems: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
return (
<Drawer open={boolean('open', true)} activeItem={selected}>
<DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />
<DrawerSubheader
hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
divider={boolean('divider', true)}
>
<div
style={{
display: 'flex',
justifyContent: 'center',
padding: '1rem 16px',
}}
>
{subheaderContent === 'Filter' ? filter : accordion}
</div>
</DrawerSubheader>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
</Drawer>
);
}
Example #5
| Source File: SpouseAndDependent.tsx From UsTaxes with GNU Affero General Public License v3.0 | 5 votes |
|
AddDependentForm = (): ReactElement => {
const dependents = useSelector(
(state: TaxesState) => state.information.taxPayer.dependents
)
const defaultValues = blankUserDependentForm
const dispatch = useDispatch()
const methods = useForm<UserDependentForm>({
defaultValues
})
const onSubmitAdd = (formData: UserDependentForm): void => {
dispatch(addDependent(toDependent(formData)))
}
const onSubmitEdit =
(index: number) =>
(formData: UserDependentForm): void => {
dispatch(
editDependent({
index,
value: toDependent(formData)
})
)
}
const page = (
<FormListContainer<UserDependentForm>
defaultValues={defaultValues}
onSubmitAdd={onSubmitAdd}
onSubmitEdit={onSubmitEdit}
items={dependents.map((a) => toDependentForm(a))}
primary={(a) => `${a.firstName} ${a.lastName}`}
secondary={(a) => formatSSID(a.ssid)}
icon={() => <Person />}
removeItem={(i) => dispatch(removeDependent(i))}
>
<Grid container spacing={2}>
<PersonFields />
<LabeledInput
label="Relationship to Taxpayer"
name="relationship"
patternConfig={Patterns.name}
/>
<LabeledInput
label="How many months did you live together this year?"
patternConfig={Patterns.numMonths}
name="numberOfMonths"
/>
<LabeledCheckbox
label="Is this person a full-time student?"
name="isStudent"
/>
</Grid>
</FormListContainer>
)
return <FormProvider {...methods}>{page}</FormProvider>
}
Example #6
| Source File: SpouseAndDependent.tsx From UsTaxes with GNU Affero General Public License v3.0 | 5 votes |
|
SpouseInfo = (): ReactElement => {
const defaultValues = blankUserSpouseForm
const methods = useForm<UserSpouseForm>({
defaultValues
})
const { getValues } = methods
const dispatch = useDispatch()
const spouse: Spouse | undefined = useSelector((state: TaxesState) => {
return state.information.taxPayer.spouse
})
const onSubmit = (): void => {
dispatch(addSpouse(toSpouse(getValues())))
}
const onSubmitEdit = (): (() => void) => onSubmit
const page = (
<FormListContainer
defaultValues={defaultValues}
items={spouse !== undefined ? [toSpouseForm(spouse)] : []}
primary={(s) => `${s.firstName} ${s.lastName}`}
secondary={(s) => formatSSID(s.ssid)}
icon={() => <Person />}
onSubmitAdd={onSubmit}
onSubmitEdit={onSubmitEdit}
max={1}
removeItem={() => dispatch(removeSpouse)}
>
<Grid container spacing={2}>
<PersonFields autofocus={true}>
<LabeledCheckbox
label="Check if your spouse is a dependent"
name="isTaxpayerDependent"
/>
</PersonFields>
</Grid>
</FormListContainer>
)
return <FormProvider {...methods}>{page}</FormProvider>
}
Example #7
| Source File: within-a-DrawerLayout.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
inDrawerLayout = (): StoryFnReactReturnType => {
const variant = select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent');
const [selected, setSelected] = useState('');
const isDarkMode = useDarkMode();
const navGroupItems: NavItem[] = [
{
title: 'Identity Management',
itemID: '1',
icon: <Person />,
onClick: (): void => setSelected('1'),
},
{
title: 'Calendar',
itemID: '2',
icon: <Today />,
onClick: (): void => setSelected('2'),
},
{
title: 'Accessibility',
itemID: '3',
icon: <Accessibility />,
onClick: (): void => setSelected('3'),
},
{
title: 'Notifications',
itemID: '4',
icon: <NotificationsActive />,
onClick: (): void => setSelected('4'),
},
];
return (
<DrawerLayout
drawer={
<Drawer
open={boolean('open', true)}
width={number('width', 350, {
range: true,
min: 200,
max: 700,
step: 50,
})}
variant={variant}
condensed={boolean('condensed (rail only)', false)}
ModalProps={{
disableEnforceFocus: true,
}}
activeItem={selected}
>
<DrawerHeader
icon={<MenuIcon />}
titleContent={
<div
style={{
paddingLeft: 16,
paddingRight: 16,
display: 'flex',
height: '100%',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Typography variant={'subtitle2'} style={{ fontWeight: 100 }}>
Brightlayer UI
</Typography>
<Typography variant={'h6'} style={{ marginTop: -8 }}>
DrawerLayout
</Typography>
</div>
}
/>
<DrawerBody>
<DrawerNavGroup items={navGroupItems} />
</DrawerBody>
{variant !== 'rail' && (
<DrawerFooter>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
padding: 16,
}}
>
<img
src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
alt="Eaton Logo"
height={28}
width={'auto'}
/>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography
variant={'caption'}
>{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
<Typography variant={'caption'}>All Rights Reserved</Typography>
</div>
</div>
</DrawerFooter>
)}
</Drawer>
}
>
<div
style={{
backgroundColor: '#777',
color: 'white',
height: '100%',
padding: '30px',
boxSizing: 'border-box',
}}
>
<Typography variant={'h2'}>Body content goes here.</Typography>
</div>
</DrawerLayout>
);
}
