Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate ListView from patternfly-react
- Loading branch information
Showing
16 changed files
with
359 additions
and
28 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
frontend/public/components/overview/list-view/ListView.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import classNames from 'classnames'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import ListViewAdditionalInfo from './ListViewAdditionalInfo'; | ||
import ListViewBody from './ListViewBody'; | ||
import ListViewDescription from './ListViewDescription'; | ||
import ListViewDescriptionHeading from './ListViewDescriptionHeading'; | ||
import ListViewGroupItem from './ListViewGroupItem'; | ||
import ListViewItem from './ListViewItem'; | ||
import ListViewMainInfo from './ListViewMainInfo'; | ||
import ListViewRow from './ListViewRow'; | ||
|
||
/** | ||
* Components in this module are used as building blocks for ListViewItem and | ||
* ListViewRow. If needed, components can be used to create custom ListViewItem | ||
* | ||
* Custom ListView example: | ||
* | ||
* <ListView> | ||
* <ListViewItem> | ||
* <ListViewGroupItem> | ||
* <ListViewRow> | ||
* <ListViewMainInfo> | ||
* <ListViewBody> | ||
* <ListViewDescription> | ||
* <ListViewDescriptionHeading> | ||
* {name} | ||
* </ListViewDescriptionHeading> | ||
* </ListViewDescription> | ||
* <ListViewAdditionalInfo /> | ||
* </ListViewBody> | ||
* </ListViewMainInfo> | ||
* </ListViewRow> | ||
* </ListViewGroupItem> | ||
* </ListViewItem> | ||
* ... | ||
* </ListView> | ||
*/ | ||
|
||
/** | ||
* ListView component wraps ListViewItems | ||
*/ | ||
const ListView = ({ children, className, ...props }) => { | ||
const classes = classNames('list-group list-view-pf list-view-pf-view', className); | ||
return ( | ||
<div className={classes} {...props}> | ||
{children} | ||
</div> | ||
); | ||
}; | ||
ListView.propTypes = { | ||
/** Additional css classes */ | ||
className: PropTypes.string, | ||
/** Children nodes - ListViewGroupItem or ListViewItem instances */ | ||
children: PropTypes.node, | ||
}; | ||
ListView.defaultProps = { | ||
className: '', | ||
children: null, | ||
}; | ||
|
||
ListView.AdditionalInfo = ListViewAdditionalInfo; | ||
ListView.Body = ListViewBody; | ||
ListView.Description = ListViewDescription; | ||
ListView.DescriptionHeading = ListViewDescriptionHeading; | ||
ListView.GroupItem = ListViewGroupItem; | ||
ListView.Item = ListViewItem; | ||
ListView.MainInfo = ListViewMainInfo; | ||
ListView.Row = ListViewRow; | ||
|
||
export default ListView; |
18 changes: 18 additions & 0 deletions
18
frontend/public/components/overview/list-view/ListViewAdditionalInfo.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewAdditionalInfo defines additional info section | ||
*/ | ||
const ListViewAdditionalInfo = ({ children }) => ( | ||
<div className="list-view-pf-additional-info">{children}</div> | ||
); | ||
ListViewAdditionalInfo.propTypes = { | ||
/** Child nodes - an array of ListViewInfoItem instances */ | ||
children: PropTypes.arrayOf(PropTypes.node), | ||
}; | ||
ListViewAdditionalInfo.defaultProps = { | ||
children: null, | ||
}; | ||
|
||
export default ListViewAdditionalInfo; |
15 changes: 15 additions & 0 deletions
15
frontend/public/components/overview/list-view/ListViewBody.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewBody wraps the central section of ListViewItem | ||
*/ | ||
const ListViewBody = ({ children }) => <div className="list-view-pf-body">{children}</div>; | ||
ListViewBody.propTypes = { | ||
/** Child nodes - ListViewDescription or ListViewAdditionalInfo instances */ | ||
children: PropTypes.node, | ||
}; | ||
ListViewBody.defaultProps = { | ||
children: null, | ||
}; | ||
export default ListViewBody; |
17 changes: 17 additions & 0 deletions
17
frontend/public/components/overview/list-view/ListViewDescription.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewDescription wraps Heading | ||
*/ | ||
const ListViewDescription = ({ children }) => ( | ||
<div className="list-view-pf-description">{children}</div> | ||
); | ||
ListViewDescription.propTypes = { | ||
/** Child nodes - ListViewDescriptionHeading instances */ | ||
children: PropTypes.node, | ||
}; | ||
ListViewDescription.defaultProps = { | ||
children: null, | ||
}; | ||
export default ListViewDescription; |
17 changes: 17 additions & 0 deletions
17
frontend/public/components/overview/list-view/ListViewDescriptionHeading.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewDescriptionHeading renders ListViewItem heading | ||
*/ | ||
const ListViewDescriptionHeading = ({ children }) => ( | ||
<div className="list-group-item-heading">{children}</div> | ||
); | ||
ListViewDescriptionHeading.propTypes = { | ||
/** Child node - content rendered as heading */ | ||
children: PropTypes.node, | ||
}; | ||
ListViewDescriptionHeading.defaultProps = { | ||
children: null, | ||
}; | ||
export default ListViewDescriptionHeading; |
26 changes: 26 additions & 0 deletions
26
frontend/public/components/overview/list-view/ListViewGroupItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import classNames from 'classnames'; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewGroupItem is a root node of each ListViewItem | ||
*/ | ||
const ListViewGroupItem = ({ children, className, ...props }) => { | ||
const classes = classNames('list-group-item', className); | ||
return ( | ||
<div className={classes} {...props}> | ||
{children} | ||
</div> | ||
); | ||
}; | ||
ListViewGroupItem.propTypes = { | ||
/** Children nodes */ | ||
children: PropTypes.node, | ||
/** Additional css classes */ | ||
className: PropTypes.string, | ||
}; | ||
ListViewGroupItem.defaultProps = { | ||
children: null, | ||
className: '', | ||
}; | ||
export default ListViewGroupItem; |
27 changes: 27 additions & 0 deletions
27
frontend/public/components/overview/list-view/ListViewItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import ListViewGroupItem from './ListViewGroupItem'; | ||
import ListViewRow from './ListViewRow'; | ||
|
||
/** | ||
* ListViewItem - main ListViewItem component. | ||
*/ | ||
|
||
const ListViewItem = ({ additionalInfo, heading, ...other }) => ( | ||
<ListViewGroupItem {...other}> | ||
<ListViewRow heading={heading} additionalInfo={additionalInfo} /> | ||
</ListViewGroupItem> | ||
); | ||
|
||
ListViewItem.propTypes = { | ||
/** An array of children to render additional info items */ | ||
additionalInfo: PropTypes.arrayOf(PropTypes.node), | ||
/** Contents of ListViewItem heading */ | ||
heading: PropTypes.node, | ||
}; | ||
ListViewItem.defaultProps = { | ||
additionalInfo: null, | ||
heading: null, | ||
}; | ||
export default ListViewItem; |
15 changes: 15 additions & 0 deletions
15
frontend/public/components/overview/list-view/ListViewMainInfo.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/** | ||
* ListViewMainInfo wraps the informational content of the ListViewItem | ||
*/ | ||
const ListViewMainInfo = ({ children }) => <div className="list-view-pf-main-info">{children}</div>; | ||
ListViewMainInfo.propTypes = { | ||
/** Child nodes - instances of ListViewBody */ | ||
children: PropTypes.node, | ||
}; | ||
ListViewMainInfo.defaultProps = { | ||
children: null, | ||
}; | ||
export default ListViewMainInfo; |
39 changes: 39 additions & 0 deletions
39
frontend/public/components/overview/list-view/ListViewRow.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import ListViewAdditionalInfo from './ListViewAdditionalInfo'; | ||
import ListViewBody from './ListViewBody'; | ||
import ListViewDescription from './ListViewDescription'; | ||
import ListViewDescriptionHeading from './ListViewDescriptionHeading'; | ||
import ListViewMainInfo from './ListViewMainInfo'; | ||
|
||
/** | ||
* ListViewRow wraps the ListViewItem row, conditionally renders sections | ||
* based on availability of individual props, maintains the ListItem row structure | ||
*/ | ||
const ListViewRow = ({ additionalInfo, heading }) => { | ||
const items = []; | ||
|
||
items.push( | ||
<ListViewMainInfo key="main_info"> | ||
<ListViewBody> | ||
{heading && ( | ||
<ListViewDescription> | ||
{heading && <ListViewDescriptionHeading>{heading}</ListViewDescriptionHeading>} | ||
</ListViewDescription> | ||
)} | ||
{additionalInfo && <ListViewAdditionalInfo>{additionalInfo}</ListViewAdditionalInfo>} | ||
</ListViewBody> | ||
</ListViewMainInfo>, | ||
); | ||
|
||
return items; | ||
}; | ||
|
||
ListViewRow.propTypes = { | ||
/** An array of ListViewInfoItem instances to render additional info items */ | ||
additionalInfo: PropTypes.arrayOf(PropTypes.node), | ||
/** Contents of ListViewItem heading */ | ||
heading: PropTypes.node, | ||
}; | ||
export default ListViewRow; |
91 changes: 91 additions & 0 deletions
91
frontend/public/components/overview/list-view/_list-view.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
.list-view-pf { | ||
.list-group-item { | ||
align-items: flex-start; | ||
border: 1px solid $color-pf-black-200; | ||
border-left: 0; | ||
border-right: 0; | ||
@include clearfix(); //IE9 fallback | ||
cursor: pointer; | ||
display: flex; | ||
flex-wrap: wrap; | ||
padding-bottom: 0; | ||
padding-top: 0; | ||
position: relative; | ||
&:hover { | ||
background-color: $list-view-hover-bg; | ||
} | ||
@media (min-width: $screen-md-min) { | ||
align-items: center; | ||
} | ||
} | ||
.list-group-item-heading { | ||
font-size: $font-size-h3; | ||
small { | ||
display: block; | ||
font-size: ($font-size-base * .8); | ||
font-weight: 400; | ||
} | ||
@media (min-width: $screen-md-min) { | ||
flex: 1 0 unquote("calc(25% - 20px)"); | ||
float: left; // IE9 fallback | ||
font-size: $font-size-base; | ||
margin: 0 ($grid-gutter-width/2) 0 0; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
width: unquote("calc(25% - 20px)"); // IE9 fallback | ||
} | ||
} | ||
} | ||
.list-view-pf-additional-info { | ||
align-items: center; | ||
display: flex; | ||
flex-wrap: wrap; | ||
@media (min-width: $screen-md-min) { | ||
flex: 1 0 auto; // it covers whats left from summary | ||
float: left; // IE9 fallback | ||
width: 62%; // IE9 fallback | ||
} | ||
} | ||
.list-view-pf-body { | ||
align-items: center; | ||
display: table-cell; //IE9 fallback | ||
flex: 1; | ||
min-width: 0; | ||
vertical-align: top; //IE9 fallback | ||
width: 100%; // IE9 fallback, it extends the cell to size of the container | ||
@media (min-width: $screen-md-min) { | ||
align-items: center; | ||
display: flex; | ||
flex-direction: row; | ||
} | ||
} | ||
.list-view-pf-description { | ||
flex: 1 0 50%; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
@media (min-width: $screen-md-min) { | ||
align-items: center; | ||
display: flex; | ||
flex-basis: 38%; | ||
float: left; //IE9 fallback | ||
width: 38%; //IE9 fallback | ||
} | ||
} | ||
.list-view-pf-main-info { | ||
align-items: flex-start; | ||
display: flex; | ||
flex: 1; | ||
min-width: 0; | ||
padding-bottom: ($grid-gutter-width/2); | ||
padding-top: ($grid-gutter-width/2); | ||
@media (min-width: $screen-md-min) { | ||
align-items: center; | ||
.list-view-pf-top-align & { | ||
align-items: flex-start; | ||
} | ||
} | ||
} | ||
.list-view-pf-view { | ||
margin-top: 30px; | ||
} |
Oops, something went wrong.