mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 09:05:45 -06:00
0fceca5f73
* Search: Use Card component for search items * Search: Set min height of search item * Search: Adjust item height * Search: Move tags to the right * Search: Center item content * Search: Align tags * Search: Adjust Card spacing * Search: Adjust dimensions
35 lines
709 B
TypeScript
35 lines
709 B
TypeScript
import React, { FC, memo } from 'react';
|
|
import { css } from 'emotion';
|
|
import { Checkbox, stylesFactory } from '@grafana/ui';
|
|
|
|
interface Props {
|
|
checked?: boolean;
|
|
onClick: any;
|
|
editable?: boolean;
|
|
}
|
|
|
|
export const SearchCheckbox: FC<Props> = memo(({ onClick, checked = false, editable = false }) => {
|
|
const styles = getStyles();
|
|
|
|
return editable ? (
|
|
<div onClick={onClick} className={styles.wrapper}>
|
|
<Checkbox value={checked} />
|
|
</div>
|
|
) : null;
|
|
});
|
|
|
|
const getStyles = stylesFactory(() => ({
|
|
wrapper: css`
|
|
height: 21px;
|
|
& > label {
|
|
height: 100%;
|
|
|
|
& > input {
|
|
position: relative;
|
|
}
|
|
}
|
|
`,
|
|
}));
|
|
|
|
SearchCheckbox.displayName = 'SearchCheckbox';
|