maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-29 05:00:43 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor items into one internal component

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-01-23 16:19:04 +02:00
parent f25fa879b4
commit c5c9050c02
2 changed files with 10 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/PropertyGroup/PropertyGroup.css
View file

@ -20,18 +20,9 @@
}
.item {
display: flex;
padding: 2px 0;
@media (--viewportMedium) {
padding: 4px 0;
}
}
.itemSelected {
padding: 2px 0;
display: flex;
align-items: center;
padding: 2px 0;
/* Fix broken multi-column layout in Chrome */
page-break-inside: avoid;
@ -55,7 +46,7 @@
.iconWrapper {
display: inline-flex;
align-content: center;
align-items: center;
}
.textWrapper {

34
src/components/PropertyGroup/PropertyGroup.js
View file

@ -36,29 +36,16 @@ const IconCheck = props => {
);
};
const SelectedItem = props => {
const { text } = props;
return (
<li className={css.itemSelected}>
<div className={css.iconWrapper}>
<IconCheck isVisible={true} />
</div>
<div className={css.textWrapper}>
<span className={css.selectedText}>{text}</span>
</div>
</li>
);
};
const NotSelectedItem = props => {
const { text } = props;
const Item = props => {
const { text, isSelected } = props;
const textClass = isSelected ? css.selectedText : css.notSelectedText;
return (
<li className={css.item}>
<div className={css.iconWrapper}>
<IconCheck isVisible={false} />
<IconCheck isVisible={isSelected} />
</div>
<div className={css.textWrapper}>
<span className={css.notSelectedText}>{text}</span>
<span className={textClass}>{text}</span>
</div>
</li>
);
@ -73,14 +60,9 @@ const PropertyGroup = props => {
return (
<ul className={listClasses}>
{checked.map(
option =>
option.isSelected ? (
<SelectedItem key={`${id}.${option.value}`} text={option.text} />
) : (
<NotSelectedItem key={`${id}.${option.value}`} text={option.text} />
)
)}
{checked.map(option => (
<Item key={`${id}.${option.value}`} text={option.text} isSelected={option.isSelected} />
))}
</ul>
);
};