mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
rewrote to use react.sfc
This commit is contained in:
parent
70c3e1f3bc
commit
1e2c06083a
@ -1,24 +1,39 @@
|
||||
import React from 'react';
|
||||
import React, { SFC } from 'react';
|
||||
|
||||
export default function LayoutSelector({ mode, onLayoutModeChanged }) {
|
||||
export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
|
||||
|
||||
export enum LayoutModes {
|
||||
Grid = 'grid',
|
||||
List = 'list',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
mode: LayoutMode;
|
||||
onLayoutModeChanged: (mode: LayoutMode) => {};
|
||||
}
|
||||
|
||||
const LayoutSelector: SFC<Props> = props => {
|
||||
const { mode, onLayoutModeChanged } = props;
|
||||
return (
|
||||
<div className="layout-selector">
|
||||
<button
|
||||
onClick={() => {
|
||||
onLayoutModeChanged('list');
|
||||
onLayoutModeChanged(LayoutModes.List);
|
||||
}}
|
||||
className={mode === 'list' ? 'active' : ''}
|
||||
className={mode === LayoutModes.List ? 'active' : ''}
|
||||
>
|
||||
<i className="fa fa-list" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onLayoutModeChanged('grid');
|
||||
onLayoutModeChanged(LayoutModes.Grid);
|
||||
}}
|
||||
className={mode === 'grid' ? 'active' : ''}
|
||||
className={mode === LayoutModes.Grid ? 'active' : ''}
|
||||
>
|
||||
<i className="fa fa-th" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default LayoutSelector;
|
||||
|
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { PluginActionBar, Props } from './PluginActionBar';
|
||||
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
const setup = (propOverrides?: object) => {
|
||||
const props: Props = {
|
||||
searchQuery: '',
|
||||
layoutMode: 'grid',
|
||||
layoutMode: LayoutModes.Grid,
|
||||
setLayoutMode: jest.fn(),
|
||||
setPluginsSearchQuery: jest.fn(),
|
||||
};
|
||||
|
@ -1,12 +1,12 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import LayoutSelector from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
import LayoutSelector, { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
import { setLayoutMode, setPluginsSearchQuery } from './state/actions';
|
||||
import { getPluginsSearchQuery, getLayoutMode } from './state/selectors';
|
||||
|
||||
export interface Props {
|
||||
searchQuery: string;
|
||||
layoutMode: string;
|
||||
layoutMode: LayoutMode;
|
||||
setLayoutMode: typeof setLayoutMode;
|
||||
setPluginsSearchQuery: typeof setPluginsSearchQuery;
|
||||
}
|
||||
@ -32,7 +32,7 @@ export class PluginActionBar extends PureComponent<Props> {
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<LayoutSelector mode={layoutMode} onLayoutModeChanged={mode => setLayoutMode(mode)} />
|
||||
<LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => setLayoutMode(mode)} />
|
||||
</div>
|
||||
<div className="page-action-bar__spacer" />
|
||||
<a
|
||||
|
@ -2,12 +2,13 @@ import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import PluginList from './PluginList';
|
||||
import { getMockPlugins } from './__mocks__/pluginMocks';
|
||||
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
const setup = (propOverrides?: object) => {
|
||||
const props = Object.assign(
|
||||
{
|
||||
plugins: getMockPlugins(5),
|
||||
layout: 'grid',
|
||||
layoutMode: LayoutModes.Grid,
|
||||
},
|
||||
propOverrides
|
||||
);
|
||||
|
@ -1,12 +1,21 @@
|
||||
import React from 'react';
|
||||
import React, { SFC } from 'react';
|
||||
import classNames from 'classnames/bind';
|
||||
import PluginListItem from './PluginListItem';
|
||||
import { Plugin } from 'app/types';
|
||||
import { LayoutMode, LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
interface Props {
|
||||
plugins: Plugin[];
|
||||
layoutMode: LayoutMode;
|
||||
}
|
||||
|
||||
const PluginList: SFC<Props> = props => {
|
||||
const { plugins, layoutMode } = props;
|
||||
|
||||
export default function PluginList({ plugins, layout }) {
|
||||
const listStyle = classNames({
|
||||
'card-section': true,
|
||||
'card-list-layout-grid': layout === 'grid',
|
||||
'card-list-layout-list': layout === 'list',
|
||||
'card-list-layout-grid': layoutMode === LayoutModes.Grid,
|
||||
'card-list-layout-list': layoutMode === LayoutModes.List,
|
||||
});
|
||||
|
||||
return (
|
||||
@ -18,4 +27,6 @@ export default function PluginList({ plugins, layout }) {
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default PluginList;
|
||||
|
@ -1,6 +1,13 @@
|
||||
import React from 'react';
|
||||
import React, { SFC } from 'react';
|
||||
import { Plugin } from 'app/types';
|
||||
|
||||
interface Props {
|
||||
plugin: Plugin;
|
||||
}
|
||||
|
||||
const PluginListItem: SFC<Props> = props => {
|
||||
const { plugin } = props;
|
||||
|
||||
export default function PluginListItem({ plugin }) {
|
||||
return (
|
||||
<li className="card-item-wrapper">
|
||||
<a className="card-item" href={`plugins/${plugin.id}/edit`}>
|
||||
@ -27,4 +34,6 @@ export default function PluginListItem({ plugin }) {
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default PluginListItem;
|
||||
|
@ -8,11 +8,12 @@ import { NavModel, Plugin } from '../../types';
|
||||
import { loadPlugins } from './state/actions';
|
||||
import { getNavModel } from '../../core/selectors/navModel';
|
||||
import { getLayoutMode, getPlugins } from './state/selectors';
|
||||
import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
export interface Props {
|
||||
navModel: NavModel;
|
||||
plugins: Plugin[];
|
||||
layoutMode: string;
|
||||
layoutMode: LayoutMode;
|
||||
loadPlugins: typeof loadPlugins;
|
||||
}
|
||||
|
||||
@ -33,7 +34,7 @@ export class PluginListPage extends PureComponent<Props> {
|
||||
<PageHeader model={navModel} />
|
||||
<div className="page-container page-body">
|
||||
<PluginActionBar />
|
||||
{plugins && <PluginList plugins={plugins} layout={layoutMode} />}
|
||||
{plugins && <PluginList plugins={plugins} layoutMode={layoutMode} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
|
||||
>
|
||||
<Connect(PluginActionBar) />
|
||||
<PluginList
|
||||
layout="grid"
|
||||
layoutMode="grid"
|
||||
plugins={Array []}
|
||||
/>
|
||||
</div>
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { Plugin, StoreState } from 'app/types';
|
||||
import { ThunkAction } from 'redux-thunk';
|
||||
import { getBackendSrv } from '../../../core/services/backend_srv';
|
||||
import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
export enum ActionTypes {
|
||||
LoadPlugins = 'LOAD_PLUGINS',
|
||||
@ -20,10 +21,10 @@ export interface SetPluginsSearchQueryAction {
|
||||
|
||||
export interface SetLayoutModeAction {
|
||||
type: ActionTypes.SetLayoutMode;
|
||||
payload: string;
|
||||
payload: LayoutMode;
|
||||
}
|
||||
|
||||
export const setLayoutMode = (mode: string): SetLayoutModeAction => ({
|
||||
export const setLayoutMode = (mode: LayoutMode): SetLayoutModeAction => ({
|
||||
type: ActionTypes.SetLayoutMode,
|
||||
payload: mode,
|
||||
});
|
||||
|
@ -1,7 +1,8 @@
|
||||
import { Action, ActionTypes } from './actions';
|
||||
import { Plugin, PluginsState } from 'app/types';
|
||||
import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
|
||||
|
||||
export const initialState: PluginsState = { plugins: [] as Plugin[], searchQuery: '', layoutMode: 'grid' };
|
||||
export const initialState: PluginsState = { plugins: [] as Plugin[], searchQuery: '', layoutMode: LayoutModes.Grid };
|
||||
|
||||
export const pluginsReducer = (state = initialState, action: Action): PluginsState => {
|
||||
switch (action.type) {
|
||||
|
Loading…
Reference in New Issue
Block a user