mirror of
https://github.com/grafana/grafana.git
synced 2026-08-10 05:08:16 -05:00
Canvas: Chore clean up more betterer warnings (#88010)
This commit is contained in:
Nathan Marrs
@@ -4506,45 +4506,6 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"],
|
||||
[0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/components/CanvasTooltip.tsx:5381": [
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/element/elementEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "1"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "2"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
|
||||
[0, 0, 0, "Do not use any type assertions.", "2"],
|
||||
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/editor/panZoomHelp.tsx:5381": [
|
||||
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
|
||||
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
|
||||
],
|
||||
"public/app/plugins/panel/canvas/globalStyles.ts:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/dashlist/styles.ts:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useOverlay } from '@react-aria/overlays';
|
||||
import React, { createRef } from 'react';
|
||||
|
||||
import { GrafanaTheme2, LinkModel } from '@grafana/data/src';
|
||||
import { LinkButton, Portal, useStyles2, VerticalGroup, VizTooltipContainer } from '@grafana/ui';
|
||||
import { LinkButton, Portal, Stack, useStyles2, VizTooltipContainer } from '@grafana/ui';
|
||||
import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
|
||||
import { Scene } from 'app/features/canvas/runtime/scene';
|
||||
|
||||
@@ -34,7 +34,7 @@ export const CanvasTooltip = ({ scene }: Props) => {
|
||||
element.data?.links &&
|
||||
element.data?.links.length > 0 && (
|
||||
<div>
|
||||
<VerticalGroup>
|
||||
<Stack direction={'column'}>
|
||||
{element.data?.links?.map((link: LinkModel, i: number) => (
|
||||
<LinkButton
|
||||
key={i}
|
||||
@@ -48,7 +48,7 @@ export const CanvasTooltip = ({ scene }: Props) => {
|
||||
{link.title}
|
||||
</LinkButton>
|
||||
))}
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -24,9 +24,13 @@ export interface APIEditorConfig {
|
||||
headerParams?: Array<[string, string]>;
|
||||
}
|
||||
|
||||
const dummyStringSettings = {
|
||||
const dummyStringSettings: StandardEditorsRegistryItem<string, StringFieldConfigSettings> = {
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
editor: StringValueEditor,
|
||||
settings: {},
|
||||
} as StandardEditorsRegistryItem<string, StringFieldConfigSettings>;
|
||||
};
|
||||
|
||||
type Props = StandardEditorProps<APIEditorConfig>;
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { HorizontalGroup, IconButton, Input, VerticalGroup } from '@grafana/ui';
|
||||
import { IconButton, Input, Stack } from '@grafana/ui';
|
||||
|
||||
interface Props {
|
||||
onChange: (v: Array<[string, string]>) => void;
|
||||
@@ -44,20 +44,20 @@ export const ParamsEditor = ({ value, onChange }: Props) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HorizontalGroup>
|
||||
<Stack direction="row">
|
||||
<Input placeholder="Key" value={paramName} onChange={changeParamName} />
|
||||
<Input placeholder="Value" value={paramValue} onChange={changeParamValue} />
|
||||
<IconButton aria-label="add" name="plus-circle" onClick={addParam} disabled={isAddParamsDisabled} />
|
||||
</HorizontalGroup>
|
||||
<VerticalGroup>
|
||||
</Stack>
|
||||
<Stack direction="column">
|
||||
{Array.from(value || []).map((entry) => (
|
||||
<HorizontalGroup key={entry[0]}>
|
||||
<Stack key={entry[0]} direction="row">
|
||||
<Input disabled value={entry[0]} />
|
||||
<Input disabled value={entry[1]} />
|
||||
<IconButton aria-label="delete" onClick={removeParam(entry[0])} name="trash-alt" />
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
))}
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useObservable } from 'react-use';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
import { SelectableValue, StandardEditorProps } from '@grafana/data';
|
||||
import { Field, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, VerticalGroup } from '@grafana/ui';
|
||||
import { Field, Icon, InlineField, InlineFieldRow, Select, Stack } from '@grafana/ui';
|
||||
import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
|
||||
import { HorizontalConstraint, Placement, VerticalConstraint } from 'app/features/canvas';
|
||||
|
||||
@@ -94,27 +94,27 @@ export function PlacementEditor({ item }: Props) {
|
||||
<QuickPositioning onPositionChange={onPositionChange} settings={settings} element={element} />
|
||||
<br />
|
||||
<Field label="Constraints">
|
||||
<HorizontalGroup>
|
||||
<Stack direction="row">
|
||||
<ConstraintSelectionBox
|
||||
onVerticalConstraintChange={onVerticalConstraintChange}
|
||||
onHorizontalConstraintChange={onHorizontalConstraintChange}
|
||||
currentConstraints={constraint}
|
||||
/>
|
||||
<VerticalGroup>
|
||||
<HorizontalGroup>
|
||||
<Stack direction="column">
|
||||
<Stack direction="row">
|
||||
<Icon name="arrows-h" />
|
||||
<Select
|
||||
options={horizontalOptions}
|
||||
onChange={onHorizontalConstraintSelect}
|
||||
value={constraint.horizontal}
|
||||
/>
|
||||
</HorizontalGroup>
|
||||
<HorizontalGroup>
|
||||
</Stack>
|
||||
<Stack direction="row">
|
||||
<Icon name="arrows-v" />
|
||||
<Select options={verticalOptions} onChange={onVerticalConstraintSelect} value={constraint.vertical} />
|
||||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Field>
|
||||
|
||||
<br />
|
||||
|
||||
@@ -71,6 +71,7 @@ export function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions<
|
||||
|
||||
builder.addSelect({
|
||||
path: 'type',
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
|
||||
name: undefined as any, // required, but hide space
|
||||
settings: {
|
||||
options: layerTypes,
|
||||
|
||||
@@ -131,7 +131,7 @@ interface EditorProps<T> {
|
||||
data?: DataFrame[];
|
||||
}
|
||||
|
||||
function getOptionsPaneCategoryDescriptor<T = any>(
|
||||
function getOptionsPaneCategoryDescriptor<T extends object>(
|
||||
props: EditorProps<T>,
|
||||
supplier: PanelOptionsSupplier<T>
|
||||
): OptionsPaneCategoryDescriptor {
|
||||
@@ -157,7 +157,7 @@ function getOptionsPaneCategoryDescriptor<T = any>(
|
||||
const access: NestedValueAccess = {
|
||||
getValue: (path) => lodashGet(props.options, path),
|
||||
onChange: (path, value) => {
|
||||
props.onChange(setOptionImmutably(props.options as any, path, value));
|
||||
props.onChange(setOptionImmutably<T>(props.options, path, value));
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import React, { Key, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
|
||||
import { config } from '@grafana/runtime';
|
||||
import { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';
|
||||
import { Button, Icon, Stack, useStyles2, useTheme2 } from '@grafana/ui';
|
||||
import { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';
|
||||
import { ElementState } from 'app/features/canvas/runtime/element';
|
||||
|
||||
@@ -147,7 +147,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<unknown, Tree
|
||||
multiple={true}
|
||||
/>
|
||||
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Stack justifyContent="space-between" direction="row">
|
||||
<div className={styles.addLayerButton}>
|
||||
<AddLayerButton onChange={(sel) => onAddItem(sel, layer)} options={typeOptions} label={'Add item'} />
|
||||
</div>
|
||||
@@ -161,7 +161,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<unknown, Tree
|
||||
Frame selection
|
||||
</Button>
|
||||
)}
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -77,7 +77,9 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions<LayerEdi
|
||||
});
|
||||
|
||||
const ctx = { ...context, options };
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
|
||||
optionBuilder.addBackground(builder as any, ctx);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
|
||||
optionBuilder.addBorder(builder as any, ctx);
|
||||
|
||||
if (currentLayer && !currentLayer.isRoot()) {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { StandardEditorProps, GrafanaTheme2 } from '@grafana/data';
|
||||
import { Alert, HorizontalGroup, Icon, VerticalGroup, useStyles2 } from '@grafana/ui';
|
||||
import { Alert, Icon, Stack, useStyles2 } from '@grafana/ui';
|
||||
|
||||
const helpUrl = 'https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/';
|
||||
|
||||
@@ -11,7 +11,7 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
|
||||
|
||||
return (
|
||||
<>
|
||||
<HorizontalGroup className={styles.hGroup}>
|
||||
<Stack direction="row">
|
||||
<Alert
|
||||
title="Pan and zoom controls"
|
||||
severity="info"
|
||||
@@ -24,7 +24,7 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
|
||||
}
|
||||
}}
|
||||
>
|
||||
<VerticalGroup>
|
||||
<Stack direction="column">
|
||||
<ul>
|
||||
<li>
|
||||
Pan:
|
||||
@@ -36,9 +36,9 @@ export const PanZoomHelp = ({}: StandardEditorProps<string, unknown, unknown, un
|
||||
<li>Zoom: Scroll wheel</li>
|
||||
<li>Reset: Double click</li>
|
||||
</ul>
|
||||
</VerticalGroup>
|
||||
</Stack>
|
||||
</Alert>
|
||||
</HorizontalGroup>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -51,7 +51,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
||||
padding: '2px',
|
||||
'ul > li': { marginLeft: '10px' },
|
||||
}),
|
||||
hGroup: css({
|
||||
'& div': { width: '100%' },
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -3,276 +3,253 @@ import { css } from '@emotion/react';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
export function getGlobalStyles(theme: GrafanaTheme2) {
|
||||
return css`
|
||||
.moveable-control-box {
|
||||
z-index: 999;
|
||||
}
|
||||
,
|
||||
.rc-tree {
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&-focused:not(&-active-focused) {
|
||||
border-color: cyan;
|
||||
}
|
||||
|
||||
.rc-tree-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rc-tree-treenode {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
outline: 0;
|
||||
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
.draggable {
|
||||
color: #333;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* Required to make elements draggable in old WebKit */
|
||||
// -khtml-user-drag: element;
|
||||
// -webkit-user-drag: element;
|
||||
}
|
||||
|
||||
&.drop-container {
|
||||
> .draggable::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: inset 0 0 0 2px blue;
|
||||
content: '';
|
||||
}
|
||||
& ~ .rc-tree-treenode {
|
||||
border-left: 2px solid ${theme.components.input.borderColor};
|
||||
}
|
||||
}
|
||||
&.drop-target {
|
||||
& ~ .rc-tree-treenode {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
&.filter-node {
|
||||
> .rc-tree-node-content-wrapper {
|
||||
color: #a60000 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0 0 0 18px;
|
||||
}
|
||||
.rc-tree-node-content-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
cursor: grab;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
||||
border: 1px solid ${theme.components.input.borderColor};
|
||||
border-radius: ${theme.shape.radius.default};
|
||||
background: ${theme.colors.background.secondary};
|
||||
min-height: ${theme.spacing.gridSize * 4}px;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid ${theme.components.input.borderHover};
|
||||
}
|
||||
|
||||
&.rc-tree-node-selected {
|
||||
border: 1px solid ${theme.colors.primary.border};
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
&.rc-tree-checkbox,
|
||||
&.rc-tree-iconEle {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
line-height: 16px;
|
||||
vertical-align: -0.125em;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.rc-tree-icon__customize {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&.rc-tree-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.rc-tree-icon__customize {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&.rc-tree-icon_loading {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
background: url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7')
|
||||
no-repeat scroll 0 0 transparent;
|
||||
}
|
||||
&.rc-tree-switcher {
|
||||
&.rc-tree-switcher-noop {
|
||||
cursor: auto;
|
||||
}
|
||||
&.rc-tree-switcher_open {
|
||||
background-position: -93px -56px;
|
||||
}
|
||||
&.rc-tree-switcher_close {
|
||||
background-position: -75px -56px;
|
||||
}
|
||||
}
|
||||
&.rc-tree-checkbox {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin: 0 3px;
|
||||
background-position: 0 0;
|
||||
&-checked {
|
||||
background-position: -14px 0;
|
||||
}
|
||||
&-indeterminate {
|
||||
background-position: -14px -28px;
|
||||
}
|
||||
&-disabled {
|
||||
background-position: 0 -56px;
|
||||
}
|
||||
&.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {
|
||||
background-position: -14px -56px;
|
||||
}
|
||||
&.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {
|
||||
position: relative;
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 3px;
|
||||
width: 5px;
|
||||
height: 0;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.rc-tree-show-line) {
|
||||
.rc-tree-treenode {
|
||||
.rc-tree-switcher-noop {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.rc-tree-show-line {
|
||||
.rc-tree-treenode:not(:last-child) {
|
||||
> ul {
|
||||
background: url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0
|
||||
repeat-y;
|
||||
}
|
||||
> .rc-tree-switcher-noop {
|
||||
background-position: -56px -18px;
|
||||
}
|
||||
}
|
||||
.rc-tree-treenode:last-child {
|
||||
> .rc-tree-switcher-noop {
|
||||
background-position: -56px -36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-child-tree {
|
||||
display: none;
|
||||
&-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-treenode-disabled {
|
||||
> span:not(.rc-tree-switcher),
|
||||
> a,
|
||||
> a span {
|
||||
color: #767676;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&-treenode-active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
&-node-selected {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&-icon__open {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
background-position: -110px -16px;
|
||||
}
|
||||
&-icon__close {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
background-position: -110px 0;
|
||||
}
|
||||
&-icon__docu {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
background-position: -110px -32px;
|
||||
}
|
||||
&-icon__customize {
|
||||
margin-right: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
&-title {
|
||||
display: inline-block;
|
||||
}
|
||||
&-indent {
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
&-indent-unit {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&-draggable-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
return css({
|
||||
'.moveable-control-box': {
|
||||
zIndex: 999,
|
||||
},
|
||||
'.rc-tree': {
|
||||
margin: 0,
|
||||
marginBottom: '15px',
|
||||
border: '1px solid transparent',
|
||||
'&-focused:not(&-active-focused)': {
|
||||
borderColor: 'cyan',
|
||||
},
|
||||
'.rc-tree-title': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
},
|
||||
'.rc-tree-treenode': {
|
||||
margin: 0,
|
||||
padding: '1px',
|
||||
lineHeight: '24px',
|
||||
whiteSpace: 'nowrap',
|
||||
listStyle: 'none',
|
||||
outline: 0,
|
||||
display: 'flex',
|
||||
marginBottom: '3px',
|
||||
cursor: 'pointer',
|
||||
'.draggable': {
|
||||
color: '#333',
|
||||
MozUserSelect: 'none',
|
||||
KhtmlUserSelect: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
'&.drop-container': {
|
||||
'> .draggable::after': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
boxShadow: 'inset 0 0 0 2px blue',
|
||||
content: '',
|
||||
},
|
||||
'& ~ .rc-tree-treenode': {
|
||||
borderLeft: `2px solid ${theme.components.input.borderColor}`,
|
||||
},
|
||||
},
|
||||
'&.drop-target': {
|
||||
'& ~ .rc-tree-treenode': {
|
||||
borderLeft: 'none',
|
||||
},
|
||||
},
|
||||
'&.filter-node': {
|
||||
'> .rc-tree-node-content-wrapper': {
|
||||
color: '#a60000 !important',
|
||||
fontWeight: 'bold !important',
|
||||
},
|
||||
},
|
||||
ul: {
|
||||
margin: 0,
|
||||
padding: '0 0 0 18px',
|
||||
},
|
||||
'.rc-tree-node-content-wrapper': {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
height: '24px',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textDecoration: 'none',
|
||||
verticalAlign: 'top',
|
||||
cursor: 'grab',
|
||||
flexGrow: 1,
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
borderRadius: `${theme.shape.radius.default}`,
|
||||
background: `${theme.colors.background.secondary}`,
|
||||
minHeight: `${theme.spacing.gridSize * 4}px`,
|
||||
'&:hover': {
|
||||
border: `1px solid ${theme.components.input.borderHover}`,
|
||||
},
|
||||
'&.rc-tree-node-selected': {
|
||||
border: `1px solid ${theme.colors.primary.border}`,
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
span: {
|
||||
'&.rc-tree-checkbox, &.rc-tree-iconEle': {
|
||||
display: 'inline-block',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
marginRight: '2px',
|
||||
lineHeight: '16px',
|
||||
verticalAlign: '-0.125em',
|
||||
backgroundColor: 'transparent',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'scroll',
|
||||
border: '0 none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
'&.rc-tree-icon__customize': {
|
||||
backgroundImage: 'none',
|
||||
},
|
||||
},
|
||||
'&.rc-tree-switcher': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '16px',
|
||||
backgroundColor: 'transparent',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'scroll',
|
||||
border: '0 none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
'&.rc-tree-icon__customize': {
|
||||
backgroundImage: 'none',
|
||||
},
|
||||
'&.rc-tree-switcher-noop': {
|
||||
cursor: 'auto',
|
||||
},
|
||||
'&.rc-tree-switcher_open': {
|
||||
backgroundPosition: '-93px -56px',
|
||||
},
|
||||
'&.rc-tree-switcher_close': {
|
||||
backgroundPosition: '-75px -56px',
|
||||
},
|
||||
},
|
||||
'&.rc-tree-icon_loading': {
|
||||
marginRight: '2px',
|
||||
verticalAlign: 'top',
|
||||
background:
|
||||
"url('data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7') no-repeat scroll 0 0 transparent",
|
||||
},
|
||||
'&.rc-tree-checkbox': {
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
margin: '0 3px',
|
||||
backgroundPosition: '0 0',
|
||||
'&-checked': {
|
||||
backgroundPosition: '-14px 0',
|
||||
},
|
||||
'&-indeterminate': {
|
||||
backgroundPosition: '-14px -28px',
|
||||
},
|
||||
'&-disabled': {
|
||||
backgroundPosition: '0 -56px',
|
||||
},
|
||||
'&.rc-tree-checkbox-checked.rc-tree-checkbox-disabled': {
|
||||
backgroundPosition: '-14px -56px',
|
||||
},
|
||||
'&.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled': {
|
||||
position: 'relative',
|
||||
background: '#ccc',
|
||||
borderRadius: '3px',
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '5px',
|
||||
left: '3px',
|
||||
width: '5px',
|
||||
height: 0,
|
||||
border: '2px solid #fff',
|
||||
borderTop: 0,
|
||||
borderLeft: 0,
|
||||
WebkitTransform: 'scale(1)',
|
||||
transform: 'scale(1)',
|
||||
content: ' ',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'&:not(.rc-tree-show-line)': {
|
||||
'.rc-tree-treenode': {
|
||||
'.rc-tree-switcher-noop': {
|
||||
background: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
'&.rc-tree-show-line': {
|
||||
'.rc-tree-treenode:not(:last-child)': {
|
||||
'> ul': {
|
||||
background:
|
||||
"url('data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7') 0 0 repeat-y",
|
||||
},
|
||||
'> .rc-tree-switcher-noop': {
|
||||
backgroundPosition: '-56px -18px',
|
||||
},
|
||||
},
|
||||
'.rc-tree-treenode:last-child': {
|
||||
'> .rc-tree-switcher-noop': {
|
||||
backgroundPosition: '-56px -36px',
|
||||
},
|
||||
},
|
||||
},
|
||||
'&-child-tree': {
|
||||
display: 'none',
|
||||
'&-open': {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
'&-treenode-disabled': {
|
||||
'> span:not(.rc-tree-switcher), > a, > a span': {
|
||||
color: '#767676',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
'&-treenode-active': {
|
||||
background: 'rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
'&-node-selected': {
|
||||
opacity: 0.8,
|
||||
},
|
||||
'&-icon__open': {
|
||||
marginRight: '2px',
|
||||
verticalAlign: 'top',
|
||||
backgroundPosition: '-110px -16px',
|
||||
},
|
||||
'&-icon__close': {
|
||||
marginRight: '2px',
|
||||
verticalAlign: 'top',
|
||||
backgroundPosition: '-110px 0',
|
||||
},
|
||||
'&-icon__docu': {
|
||||
marginRight: '2px',
|
||||
verticalAlign: 'top',
|
||||
backgroundPosition: '-110px -32px',
|
||||
},
|
||||
'&-icon__customize': {
|
||||
marginRight: '2px',
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
'&-title': {
|
||||
display: 'inline-block',
|
||||
},
|
||||
'&-indent': {
|
||||
display: 'inline-block',
|
||||
height: 0,
|
||||
verticalAlign: 'bottom',
|
||||
},
|
||||
'&-indent-unit': {
|
||||
display: 'inline-block',
|
||||
width: '16px',
|
||||
},
|
||||
'&-draggable-icon': {
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
width: '16px',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user