@material-ui/icons#PinDrop TypeScript Examples
The following examples show how to use
@material-ui/icons#PinDrop.
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-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
getIcon = (icon: string): JSX.Element | undefined => {
switch (icon) {
case '<Add />':
return <Add />;
case '<PinDrop />':
return <PinDrop />;
case '<Remove />':
return <Remove />;
case '<AddAPhoto />':
return <AddAPhoto />;
case '<Menu />':
return <Menu />;
case '<FitnessCenter />':
return <FitnessCenter />;
case '<Dashboard />':
return <Dashboard />;
case 'undefined':
default:
return undefined;
}
}
Example #2
| Source File: with-nested-list-items.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
getIcon = (icon: string): JSX.Element | undefined => {
switch (icon) {
case '<Add />':
return <Add />;
case '<PinDrop />':
return <PinDrop />;
case '<Remove />':
return <Remove />;
case '<AddAPhoto />':
return <AddAPhoto />;
case 'undefined':
default:
return undefined;
}
}
Example #3
| Source File: with-full-config.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
withFullConfig = (): StoryFnReactReturnType => {
const [selected, setSelected] = useState('');
const isDarkMode = useDarkMode();
// storybook tab names
const drawerGroupId = 'Drawer';
const headerGroupId = 'Header';
const bodyGroupId = 'Body';
const navGroupId = 'NavGroup';
const navItemId = 'NavItem';
const footerGroupId = 'Footer';
const drawerKnobs: DrawerComponentProps = {
activeItemBackgroundColor: color('activeItemBackgroundColor', Colors.blue[50], drawerGroupId),
activeItemFontColor: color('activeItemFontColor', Colors.blue[500], drawerGroupId),
activeItemIconColor: color('activeItemIconColor', Colors.blue[500], drawerGroupId),
activeItemBackgroundShape: select('activeItemBackgroundShape', ['round', 'square'], 'square', drawerGroupId),
chevron: boolean('chevron', false, drawerGroupId),
chevronColor: color('chevronColor', Colors.gray[500], drawerGroupId),
collapseIcon: getIcon(
select('collapseIcon', ['undefined', '<Remove />', '<AddAPhoto />'], 'undefined', drawerGroupId)
),
disableActiveItemParentStyles: boolean('disableActiveItemParentStyles', true, drawerGroupId),
divider: boolean('divider', true, drawerGroupId),
expandIcon: getIcon(select('expandIcon', ['undefined', '<Add />', '<PinDrop />'], 'undefined', drawerGroupId)),
hidePadding: boolean('hidePadding', false, drawerGroupId),
itemFontColor: color('itemFontColor', Colors.black[500], drawerGroupId),
itemIconColor: color('itemIconColor', Colors.black[500], drawerGroupId),
nestedBackgroundColor: color('nestedBackgroundColor', Colors.white[200], drawerGroupId),
nestedDivider: boolean('nestedDivider', false, drawerGroupId),
open: boolean('open', true, drawerGroupId),
openOnHover: boolean('openOnHover (persistent only)', true, drawerGroupId),
openOnHoverDelay: number(
'openOnHoverDelay (persistent only)',
500,
{
range: true,
min: 100,
max: 1000,
step: 100,
},
drawerGroupId
),
ripple: boolean('ripple', true, drawerGroupId),
sideBorder: boolean('sideBorder', true, drawerGroupId),
variant: select('variant', ['permanent', 'persistent', 'temporary', 'rail'], 'persistent', drawerGroupId),
condensed: boolean('condensed (rail only)', false, drawerGroupId),
width: number(
'width',
350,
{
range: true,
min: 200,
max: 700,
step: 50,
},
drawerGroupId
),
};
const headerKnobs: DrawerHeaderProps = {
backgroundColor: color('backgroundColor', Colors.blue[500], headerGroupId),
backgroundImage:
headerBackgroundImageOptions[
select('backgroundImage', ['undefined', 'Pattern', 'Farm'], 'Pattern', headerGroupId)
],
divider: boolean('divider', false, headerGroupId),
backgroundOpacity: number('backgroundOpacity', 0.4, { range: true, min: 0, max: 1, step: 0.1 }, headerGroupId),
fontColor: color('fontColor', Colors.white[50], headerGroupId),
icon: getIcon(select('icon', ['<Menu />', '<FitnessCenter />', 'undefined'], '<Menu />', headerGroupId)),
subtitle: text('subtitle', 'Organize your menu items here', headerGroupId),
title: text('title', 'Brightlayer UI Drawer', headerGroupId),
};
const bodyKnobs: DrawerBodyProps = {
backgroundColor: color('backgroundColor', 'transparent', bodyGroupId),
};
const navGroupKnobs: Partial<DrawerNavGroupProps> = {
title: text('drawerNavGroup[0].title', 'NavGroup 1', navGroupId),
titleColor: color('titleColor', Colors.black[500], navGroupId),
titleDivider: boolean('titleDivider', true, navGroupId),
};
const navItemKnobs: Partial<NavItem> = {
hidden: boolean('hidden', false, navItemId),
icon: getIcon(select('icon', ['<Dashboard />', '<FitnessCenter />', 'undefined'], '<Dashboard />', navItemId)),
statusColor: color('statusColor', Colors.green[300], navItemId),
subtitle: text('subtitle', 'Learn more about us', navItemId),
title: text('title', overview, navItemId),
disableRailTooltip: boolean('disableRailTooltip', false, navItemId),
};
const footerKnobs: Partial<DrawerFooterProps> = {
hideContentOnCollapse: boolean('hideContentOnCollapse', true, footerGroupId),
divider: boolean('divider', true, footerGroupId),
};
// DrawerNavGroup.items
const links1 = [
{
hidden: navItemKnobs.hidden,
icon: navItemKnobs.icon,
statusColor: navItemKnobs.statusColor,
subtitle: navItemKnobs.subtitle,
// title is a required prop, using a placeholder in case the knob is empty
title: navItemKnobs.title || 'title',
disableRailTooltip: navItemKnobs.disableRailTooltip,
itemID: '0',
items: [
{
title: monthlyReport,
itemID: monthlyReport,
onClick: (): void => {
setSelected(monthlyReport);
},
},
{
title: annualReport,
itemID: annualReport,
onClick: (): void => {
setSelected(annualReport);
},
},
],
},
{
title: timeline,
itemID: timeline,
onClick: (): void => {
setSelected(timeline);
},
icon: <Toc />,
},
{
title: locations,
itemID: locations,
onClick: (): void => {
setSelected(locations);
},
icon: <PinDrop />,
},
{
title: devices,
itemID: devices,
subtitle: '5 new warnings',
statusColor: Colors.yellow[500],
onClick: (): void => {
setSelected(devices);
},
icon: <Devices />,
},
{
title: photos,
itemID: photos,
onClick: (): void => {
setSelected(photos);
},
icon: <AddAPhoto />,
},
{
title: schedule,
itemID: schedule,
onClick: (): void => {
setSelected(schedule);
},
icon: <Event style={getLeftToRightIconTransform()} />,
},
];
const links2 = [
{
title: userGuide,
itemID: userGuide,
onClick: (): void => {
setSelected(userGuide);
},
icon: <MoveToInboxIcon />,
},
{
title: agreement,
itemID: agreement,
subtitle: 'For Eaton employees only',
onClick: (): void => {
setSelected(agreement);
},
icon: <SendIcon style={getLeftToRightIconTransform()} />,
},
{
title: accessibility,
itemID: accessibility,
icon: <Accessibility />,
items: [
{
title: colorContrastGuide,
itemID: colorContrastGuide,
onClick: (): void => {
setSelected(colorContrastGuide);
},
},
{
title: screenReader,
itemID: screenReader,
onClick: (): void => {
setSelected(screenReader);
},
},
],
},
{
title: notifications,
itemID: notifications,
onClick: (): void => {
setSelected(notifications);
},
icon: <NotificationsActive />,
},
];
// Footer props
const showFooter = boolean('Show footer', true, footerGroupId);
const footerBackgroundColor = color('backgroundColor', Colors.white[50], footerGroupId);
// You can replace the knob props with your own values
return (
<Drawer
key={'drawer'}
activeItem={selected}
activeItemBackgroundColor={drawerKnobs.activeItemBackgroundColor}
activeItemFontColor={drawerKnobs.activeItemFontColor}
activeItemIconColor={drawerKnobs.activeItemIconColor}
activeItemBackgroundShape={drawerKnobs.activeItemBackgroundShape}
chevron={drawerKnobs.chevron}
chevronColor={drawerKnobs.chevronColor}
collapseIcon={drawerKnobs.collapseIcon}
condensed={drawerKnobs.condensed}
divider={drawerKnobs.divider}
expandIcon={drawerKnobs.expandIcon}
hidePadding={drawerKnobs.hidePadding}
itemFontColor={drawerKnobs.itemFontColor}
itemIconColor={drawerKnobs.itemIconColor}
nestedBackgroundColor={drawerKnobs.nestedBackgroundColor}
nestedDivider={drawerKnobs.nestedDivider}
open={drawerKnobs.open}
openOnHover={drawerKnobs.openOnHover}
openOnHoverDelay={drawerKnobs.openOnHoverDelay}
ripple={drawerKnobs.ripple}
sideBorder={drawerKnobs.sideBorder}
variant={drawerKnobs.variant}
width={drawerKnobs.width}
ModalProps={{
disableEnforceFocus: true,
}}
>
<DrawerHeader
backgroundColor={headerKnobs.backgroundColor}
backgroundImage={headerKnobs.backgroundImage}
backgroundOpacity={headerKnobs.backgroundOpacity}
divider={headerKnobs.divider}
fontColor={headerKnobs.fontColor}
icon={headerKnobs.icon}
subtitle={headerKnobs.subtitle}
title={headerKnobs.title}
/>
<DrawerBody backgroundColor={bodyKnobs.backgroundColor}>
<DrawerNavGroup
items={links1}
title={navGroupKnobs.title}
titleColor={navGroupKnobs.titleColor}
titleDivider={navGroupKnobs.titleDivider}
/>
<DrawerNavGroup
items={links2}
titleContent={
<div
style={{
display: 'flex',
justifyContent: 'space-between',
fontWeight: 600,
}}
>
<Typography variant={'overline'} style={{ lineHeight: 'unset' }}>
NavGroup 2
</Typography>
<div>Software Version v1.0.3</div>
</div>
}
titleColor={navGroupKnobs.titleColor}
titleDivider={navGroupKnobs.titleDivider}
/>
</DrawerBody>
{showFooter && (
<DrawerFooter backgroundColor={footerBackgroundColor} {...footerKnobs}>
<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>
);
}
