Make our List widget more like the mui one.

master
Tom Hacohen 7 years ago
parent 3bb6d92be7
commit fdaef3a9f7

@ -1,14 +1,77 @@
.List {
list-style: none;
padding: 0;
margin: 0;
}
.ListItem {
padding: 10px;
padding: 0 10px;
display: flex;
align-items: center;
height: 60px;
}
.ListItem:hover {
.ListItem-href {
display: flex;
align-items: center;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
border: none;
}
.ListItem-href:visited, .ListItem-href:active, .ListItem-href:focus {
color: inherit;
outline: 0;
}
.ListItem .ListIcon {
margin-left: 5px;
margin-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
}
.ListItem-Item:hover {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.ListItem-inset {
margin-left: 49px;
}
.ListItem-nested-holder {
margin-left: 20px;
}
.ListItem-text-holder {
display: flex;
flex-direction: column;
}
.ListItem-primary-text {
}
.ListItem-secondary-text {
margin-top: 1px;
font-size: 85%;
color: rgba(0, 0, 0, 0.54);
}
.ListSubheader {
font-size: 90%;
color: rgba(0, 0, 0, 0.54);
}
.ListDivider {
height: 1px;
border: medium none;
background-color: rgb(224, 224, 224);
}
.ListDivider.ListDivider-inset {
margin-left: 59px;
}

@ -3,15 +3,95 @@ import { pure } from 'recompose';
import './List.css';
export const ListItem = pure((props: any) => (
export const ListItemRaw = pure((_props: any) => {
const {
href,
children,
nestedItems,
insetChildren,
...props
} = _props;
const inner = href ?
(
<a href={href} className="ListItem-href">
{children}
</a>
) :
children
;
const nestedContent = nestedItems ?
(
<List>
{nestedItems}
</List>
) :
undefined
;
return (
<React.Fragment>
<li
{...props}
className={'ListItem ListItem-Item ' + ((insetChildren) ? 'ListItem-inset' : '')}
>
{inner}
</li>
<li className="ListItem-nested-holder">
{nestedContent}
</li>
</React.Fragment>
);
});
export const ListSubheader = pure((props: any) => (
<li
{...props}
className="ListItem"
className="ListItem ListSubheader"
>
{props.children}
</li>
));
export const ListDivider = pure((props: any) => (
<hr className={'ListDivider ' + (props.inset ? 'ListDivider-inset' : '')} {...props} />
));
export const ListItem = pure((_props: any) => {
const {
leftIcon,
primaryText,
secondaryText,
children,
...props
} = _props;
const leftIconHolder = (leftIcon) ? (
<div className="ListIcon">{leftIcon}</div>
) : undefined;
let textHolder = primaryText;
if (secondaryText) {
textHolder = (
<div className="ListItem-text-holder">
<span className="ListItem-primary-text">{primaryText}</span>
<span className="ListItem-secondary-text">{secondaryText}</span>
</div>
);
}
return (
<ListItemRaw
{...props}
>
{leftIconHolder}
{textHolder}
{children}
</ListItemRaw>
);
});
export const List = pure((props: { children: React.ReactNode[] | React.ReactNode }) => (
<ul className="List">
{props.children}

Loading…
Cancel
Save