IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

changed from RFC to PureComponent

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-10-02 09:27:02 +02:00
parent 7ae4076ddd
commit 8fd1d8a057
2 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/features/datasources/DataSourcesList.tsx
View File

@ -1,4 +1,4 @@
import React, { SFC } from 'react';
import React, { PureComponent } from 'react';
import classNames from 'classnames/bind';
import DataSourcesListItem from './DataSourcesListItem';
import { DataSource } from 'app/types';
@ -9,24 +9,26 @@ export interface Props {
layoutMode: LayoutMode;
}
const DataSourcesList: SFC<Props> = props => {
const { dataSources, layoutMode } = props;
export class DataSourcesList extends PureComponent<Props> {
render() {
const { dataSources, layoutMode } = this.props;
const listStyle = classNames({
'card-section': true,
'card-list-layout-grid': layoutMode === LayoutModes.Grid,
'card-list-layout-list': layoutMode === LayoutModes.List,
});
const listStyle = classNames({
'card-section': true,
'card-list-layout-grid': layoutMode === LayoutModes.Grid,
'card-list-layout-list': layoutMode === LayoutModes.List,
});
return (
<section className={listStyle}>
<ol className="card-list">
{dataSources.map((dataSource, index) => {
return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />;
})}
</ol>
</section>
);
};
return (
<section className={listStyle}>
<ol className="card-list">
{dataSources.map((dataSource, index) => {
return <DataSourcesListItem dataSource={dataSource} key={`${dataSource.id}-${index}`} />;
})}
</ol>
</section>
);
}
}
export default DataSourcesList;

51
public/app/features/datasources/DataSourcesListItem.tsx
View File

@ -1,34 +1,35 @@
import React, { SFC } from 'react';
import React, { PureComponent } from 'react';
import { DataSource } from 'app/types';
export interface Props {
dataSource: DataSource;
}
const DataSourcesListItem: SFC<Props> = props => {
const { dataSource } = props;
return (
<li className="card-item-wrapper">
<a className="card-item" href={`datasources/edit/${dataSource.id}`}>
<div className="card-item-header">
<div className="card-item-type">{dataSource.type}</div>
</div>
<div className="card-item-body">
<figure className="card-item-figure">
<img src={dataSource.typeLogoUrl} />
</figure>
<div className="card-item-details">
<div className="card-item-name">
{dataSource.name}
{dataSource.isDefault && <span className="btn btn-secondary btn-mini">default</span>}
</div>
<div className="card-item-sub-name">{dataSource.url}</div>
export class DataSourcesListItem extends PureComponent<Props> {
render() {
const { dataSource } = this.props;
return (
<li className="card-item-wrapper">
<a className="card-item" href={`datasources/edit/${dataSource.id}`}>
<div className="card-item-header">
<div className="card-item-type">{dataSource.type}</div>
</div>
</div>
</a>
</li>
);
};
<div className="card-item-body">
<figure className="card-item-figure">
<img src={dataSource.typeLogoUrl} />
</figure>
<div className="card-item-details">
<div className="card-item-name">
{dataSource.name}
{dataSource.isDefault && <span className="btn btn-secondary btn-mini">default</span>}
</div>
<div className="card-item-sub-name">{dataSource.url}</div>
</div>
</div>
</a>
</li>
);
}
}
export default DataSourcesListItem;