Skip to content

N
nexpie-grafana-theme
Commit 1e2c0608 by Peter Holmberg
Options

rewrote to use react.sfc

parent 70c3e1f3
Showing with 66 additions and 26 deletions
public/app/core/components/LayoutSelector/LayoutSelector.tsx
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 ( return (
<div className="layout-selector"> <div className="layout-selector">
<button <button
onClick={() => { onClick={() => {
onLayoutModeChanged('list'); onLayoutModeChanged(LayoutModes.List);
}} }}
className={mode === 'list' ? 'active' : ''} className={mode === LayoutModes.List ? 'active' : ''}
> >
<i className="fa fa-list" /> <i className="fa fa-list" />
</button> </button>
<button <button
onClick={() => { onClick={() => {
onLayoutModeChanged('grid'); onLayoutModeChanged(LayoutModes.Grid);
}} }}
className={mode === 'grid' ? 'active' : ''} className={mode === LayoutModes.Grid ? 'active' : ''}
> >
<i className="fa fa-th" /> <i className="fa fa-th" />
</button> </button>
</div> </div>
); );
} };
export default LayoutSelector;
public/app/features/plugins/PluginActionBar.test.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { PluginActionBar, Props } from './PluginActionBar'; import { PluginActionBar, Props } from './PluginActionBar';
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
searchQuery: '', searchQuery: '',
layoutMode: 'grid', layoutMode: LayoutModes.Grid,
setLayoutMode: jest.fn(), setLayoutMode: jest.fn(),
setPluginsSearchQuery: jest.fn(), setPluginsSearchQuery: jest.fn(),
}; };
......
public/app/features/plugins/PluginActionBar.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; 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 { setLayoutMode, setPluginsSearchQuery } from './state/actions';
import { getPluginsSearchQuery, getLayoutMode } from './state/selectors'; import { getPluginsSearchQuery, getLayoutMode } from './state/selectors';
export interface Props { export interface Props {
searchQuery: string; searchQuery: string;
layoutMode: string; layoutMode: LayoutMode;
setLayoutMode: typeof setLayoutMode; setLayoutMode: typeof setLayoutMode;
setPluginsSearchQuery: typeof setPluginsSearchQuery; setPluginsSearchQuery: typeof setPluginsSearchQuery;
} }
...@@ -32,7 +32,7 @@ export class PluginActionBar extends PureComponent<Props> { ...@@ -32,7 +32,7 @@ export class PluginActionBar extends PureComponent<Props> {
/> />
<i className="gf-form-input-icon fa fa-search" /> <i className="gf-form-input-icon fa fa-search" />
</label> </label>
<LayoutSelector mode={layoutMode} onLayoutModeChanged={mode => setLayoutMode(mode)} /> <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => setLayoutMode(mode)} />
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<a <a
......
public/app/features/plugins/PluginList.test.tsx
...@@ -2,12 +2,13 @@ import React from 'react'; ...@@ -2,12 +2,13 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import PluginList from './PluginList'; import PluginList from './PluginList';
import { getMockPlugins } from './__mocks__/pluginMocks'; import { getMockPlugins } from './__mocks__/pluginMocks';
import { LayoutModes } from '../../core/components/LayoutSelector/LayoutSelector';
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props = Object.assign( const props = Object.assign(
{ {
plugins: getMockPlugins(5), plugins: getMockPlugins(5),
layout: 'grid', layoutMode: LayoutModes.Grid,
}, },
propOverrides propOverrides
); );
......
public/app/features/plugins/PluginList.tsx
import React from 'react'; import React, { SFC } from 'react';
import classNames from 'classnames/bind'; import classNames from 'classnames/bind';
import PluginListItem from './PluginListItem'; 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({ const listStyle = classNames({
'card-section': true, 'card-section': true,
'card-list-layout-grid': layout === 'grid', 'card-list-layout-grid': layoutMode === LayoutModes.Grid,
'card-list-layout-list': layout === 'list', 'card-list-layout-list': layoutMode === LayoutModes.List,
}); });
return ( return (
...@@ -18,4 +27,6 @@ export default function PluginList({ plugins, layout }) { ...@@ -18,4 +27,6 @@ export default function PluginList({ plugins, layout }) {
</ol> </ol>
</section> </section>
); );
} };
export default PluginList;
public/app/features/plugins/PluginListItem.tsx
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 ( return (
<li className="card-item-wrapper"> <li className="card-item-wrapper">
<a className="card-item" href={`plugins/${plugin.id}/edit`}> <a className="card-item" href={`plugins/${plugin.id}/edit`}>
...@@ -27,4 +34,6 @@ export default function PluginListItem({ plugin }) { ...@@ -27,4 +34,6 @@ export default function PluginListItem({ plugin }) {
</a> </a>
</li> </li>
); );
} };
export default PluginListItem;
public/app/features/plugins/PluginListPage.tsx
...@@ -8,11 +8,12 @@ import { NavModel, Plugin } from '../../types'; ...@@ -8,11 +8,12 @@ import { NavModel, Plugin } from '../../types';
import { loadPlugins } from './state/actions'; import { loadPlugins } from './state/actions';
import { getNavModel } from '../../core/selectors/navModel'; import { getNavModel } from '../../core/selectors/navModel';
import { getLayoutMode, getPlugins } from './state/selectors'; import { getLayoutMode, getPlugins } from './state/selectors';
import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
plugins: Plugin[]; plugins: Plugin[];
layoutMode: string; layoutMode: LayoutMode;
loadPlugins: typeof loadPlugins; loadPlugins: typeof loadPlugins;
} }
...@@ -33,7 +34,7 @@ export class PluginListPage extends PureComponent<Props> { ...@@ -33,7 +34,7 @@ export class PluginListPage extends PureComponent<Props> {
<PageHeader model={navModel} /> <PageHeader model={navModel} />
<div className="page-container page-body"> <div className="page-container page-body">
<PluginActionBar /> <PluginActionBar />
{plugins && <PluginList plugins={plugins} layout={layoutMode} />} {plugins && <PluginList plugins={plugins} layoutMode={layoutMode} />}
</div> </div>
</div> </div>
); );
......
public/app/features/plugins/__snapshots__/PluginListPage.test.tsx.snap
...@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = ` ...@@ -10,7 +10,7 @@ exports[`Render should render component 1`] = `
> >
<Connect(PluginActionBar) /> <Connect(PluginActionBar) />
<PluginList <PluginList
layout="grid" layoutMode="grid"
plugins={Array []} plugins={Array []}
/> />
</div> </div>
......
public/app/features/plugins/state/actions.ts
import { Plugin, StoreState } from 'app/types'; import { Plugin, StoreState } from 'app/types';
import { ThunkAction } from 'redux-thunk'; import { ThunkAction } from 'redux-thunk';
import { getBackendSrv } from '../../../core/services/backend_srv'; import { getBackendSrv } from '../../../core/services/backend_srv';
import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
export enum ActionTypes { export enum ActionTypes {
LoadPlugins = 'LOAD_PLUGINS', LoadPlugins = 'LOAD_PLUGINS',
...@@ -20,10 +21,10 @@ export interface SetPluginsSearchQueryAction { ...@@ -20,10 +21,10 @@ export interface SetPluginsSearchQueryAction {
export interface SetLayoutModeAction { export interface SetLayoutModeAction {
type: ActionTypes.SetLayoutMode; type: ActionTypes.SetLayoutMode;
payload: string; payload: LayoutMode;
} }
export const setLayoutMode = (mode: string): SetLayoutModeAction => ({ export const setLayoutMode = (mode: LayoutMode): SetLayoutModeAction => ({
type: ActionTypes.SetLayoutMode, type: ActionTypes.SetLayoutMode,
payload: mode, payload: mode,
}); });
......
public/app/features/plugins/state/reducers.ts
import { Action, ActionTypes } from './actions'; import { Action, ActionTypes } from './actions';
import { Plugin, PluginsState } from 'app/types'; 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 => { export const pluginsReducer = (state = initialState, action: Action): PluginsState => {
switch (action.type) { switch (action.type) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment