mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Forms migration: LayoutSelector (#23790)
This commit is contained in:
parent
83608baf2f
commit
78a6d39ebb
@ -3,6 +3,7 @@ import { css } from 'emotion';
|
||||
import uniqueId from 'lodash/uniqueId';
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { RadioButtonSize, RadioButton } from './RadioButton';
|
||||
import { Icon } from '../../Icon/Icon';
|
||||
|
||||
const getRadioButtonGroupStyles = () => {
|
||||
return {
|
||||
@ -67,19 +68,20 @@ export function RadioButtonGroup<T>({
|
||||
|
||||
return (
|
||||
<div className={styles.radioGroup}>
|
||||
{options.map(o => {
|
||||
{options.map((o, i) => {
|
||||
const isItemDisabled = disabledOptions && o.value && disabledOptions.includes(o.value);
|
||||
return (
|
||||
<RadioButton
|
||||
size={size}
|
||||
disabled={isItemDisabled || disabled}
|
||||
active={value === o.value}
|
||||
key={o.label}
|
||||
key={`o.label-${i}`}
|
||||
onChange={handleOnChange(o)}
|
||||
id={`option-${o.value}-${id}`}
|
||||
name={groupName.current}
|
||||
fullWidth={fullWidth}
|
||||
>
|
||||
{o.icon && <Icon name={o.icon} />}
|
||||
{o.label}
|
||||
</RadioButton>
|
||||
);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { FC } from 'react';
|
||||
import { Icon } from '@grafana/ui';
|
||||
import { RadioButtonGroup } from '@grafana/ui';
|
||||
|
||||
export type LayoutMode = LayoutModes.Grid | LayoutModes.List;
|
||||
|
||||
@ -13,28 +13,15 @@ interface Props {
|
||||
onLayoutModeChanged: (mode: LayoutMode) => {};
|
||||
}
|
||||
|
||||
const LayoutSelector: FC<Props> = props => {
|
||||
const { mode, onLayoutModeChanged } = props;
|
||||
return (
|
||||
<div className="layout-selector">
|
||||
<button
|
||||
onClick={() => {
|
||||
onLayoutModeChanged(LayoutModes.List);
|
||||
}}
|
||||
className={mode === LayoutModes.List ? 'active' : ''}
|
||||
>
|
||||
<Icon name="list-ul" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
onLayoutModeChanged(LayoutModes.Grid);
|
||||
}}
|
||||
className={mode === LayoutModes.Grid ? 'active' : ''}
|
||||
>
|
||||
<Icon name="table" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const options = [
|
||||
{ icon: 'table', value: LayoutModes.Grid },
|
||||
{ icon: 'list-ul', value: LayoutModes.List },
|
||||
];
|
||||
|
||||
const LayoutSelector: FC<Props> = ({ mode, onLayoutModeChanged }) => (
|
||||
<div className="layout-selector">
|
||||
<RadioButtonGroup value={mode} options={options} onChange={onLayoutModeChanged} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default LayoutSelector;
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
|
||||
import { FilterInput } from '../FilterInput/FilterInput';
|
||||
import { LinkButton } from '@grafana/ui';
|
||||
|
||||
export interface Props {
|
||||
searchQuery: string;
|
||||
@ -33,9 +34,7 @@ export default class OrgActionBar extends PureComponent<Props> {
|
||||
<LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
|
||||
</div>
|
||||
<div className="page-action-bar__spacer" />
|
||||
<a className="btn btn-primary" {...linkProps}>
|
||||
{linkButton.title}
|
||||
</a>
|
||||
<LinkButton {...linkProps}>{linkButton.title}</LinkButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -21,12 +21,11 @@ exports[`Render should render component 1`] = `
|
||||
<div
|
||||
className="page-action-bar__spacer"
|
||||
/>
|
||||
<a
|
||||
className="btn btn-primary"
|
||||
<LinkButton
|
||||
href="some/url"
|
||||
target="_blank"
|
||||
>
|
||||
test
|
||||
</a>
|
||||
</LinkButton>
|
||||
</div>
|
||||
`;
|
||||
|
@ -1,74 +0,0 @@
|
||||
import store from 'app/core/store';
|
||||
import coreModule from 'app/core/core_module';
|
||||
import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
|
||||
import { CoreEvents } from 'app/types';
|
||||
|
||||
const template = `
|
||||
<div class="layout-selector">
|
||||
<button ng-click="ctrl.listView()" ng-class="{active: ctrl.mode === 'list'}">
|
||||
<i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button ng-click="ctrl.gridView()" ng-class="{active: ctrl.mode === 'grid'}">
|
||||
<icon name="table"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export class LayoutSelectorCtrl {
|
||||
mode: string;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $rootScope: GrafanaRootScope) {
|
||||
this.mode = store.get('grafana.list.layout.mode') || 'grid';
|
||||
}
|
||||
|
||||
listView() {
|
||||
this.mode = 'list';
|
||||
store.set('grafana.list.layout.mode', 'list');
|
||||
this.$rootScope.appEvent(CoreEvents.layoutModeChanged, 'list');
|
||||
}
|
||||
|
||||
gridView() {
|
||||
this.mode = 'grid';
|
||||
store.set('grafana.list.layout.mode', 'grid');
|
||||
this.$rootScope.appEvent(CoreEvents.layoutModeChanged, 'grid');
|
||||
}
|
||||
}
|
||||
|
||||
/** @ngInject */
|
||||
export function layoutSelector() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: LayoutSelectorCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {},
|
||||
template: template,
|
||||
};
|
||||
}
|
||||
|
||||
/** @ngInject */
|
||||
export function layoutMode($rootScope: GrafanaRootScope) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope: {},
|
||||
link: (scope: any, elem: any) => {
|
||||
const layout = store.get('grafana.list.layout.mode') || 'grid';
|
||||
let className = 'card-list-layout-' + layout;
|
||||
elem.addClass(className);
|
||||
|
||||
$rootScope.onAppEvent(
|
||||
CoreEvents.layoutModeChanged,
|
||||
(evt: any, newLayout: any) => {
|
||||
elem.removeClass(className);
|
||||
className = 'card-list-layout-' + newLayout;
|
||||
elem.addClass(className);
|
||||
},
|
||||
scope
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('layoutSelector', layoutSelector);
|
||||
coreModule.directive('layoutMode', layoutMode);
|
@ -23,7 +23,6 @@ import { infoPopover } from './components/info_popover';
|
||||
import { arrayJoin } from './directives/array_join';
|
||||
import { liveSrv } from './live/live_srv';
|
||||
import { Emitter } from './utils/emitter';
|
||||
import { layoutSelector } from './components/layout_selector/layout_selector';
|
||||
import { switchDirective } from './components/switch';
|
||||
import { dashboardSelector } from './components/dashboard_selector';
|
||||
import { queryPartEditorDirective } from './components/query_part/query_part_editor';
|
||||
@ -54,7 +53,6 @@ export {
|
||||
coreModule,
|
||||
searchDirective,
|
||||
liveSrv,
|
||||
layoutSelector,
|
||||
switchDirective,
|
||||
infoPopover,
|
||||
Emitter,
|
||||
|
Loading…
Reference in New Issue
Block a user