From 3d980f1d8dec42db90cf3c00239459134a0f8e5a Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Mon, 20 May 2024 21:27:27 -0600 Subject: [PATCH] Canvas: Chore clean up more betterer warnings (#88010) --- .betterer.results | 39 -- .../panel/canvas/components/CanvasTooltip.tsx | 6 +- .../panel/canvas/editor/element/APIEditor.tsx | 8 +- .../canvas/editor/element/ParamsEditor.tsx | 14 +- .../canvas/editor/element/PlacementEditor.tsx | 18 +- .../canvas/editor/element/elementEditor.tsx | 1 + .../canvas/editor/inline/InlineEditBody.tsx | 4 +- .../editor/layer/TreeNavigationEditor.tsx | 6 +- .../panel/canvas/editor/layer/layerEditor.tsx | 2 + .../panel/canvas/editor/panZoomHelp.tsx | 13 +- .../app/plugins/panel/canvas/globalStyles.ts | 521 +++++++++--------- 11 files changed, 287 insertions(+), 345 deletions(-) diff --git a/.betterer.results b/.betterer.results index d9317283aca..540406092ed 100644 --- a/.betterer.results +++ b/.betterer.results @@ -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"], diff --git a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx index da5dbbfee7e..13cd8169daa 100644 --- a/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx +++ b/public/app/plugins/panel/canvas/components/CanvasTooltip.tsx @@ -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 && (
- + {element.data?.links?.map((link: LinkModel, i: number) => ( { {link.title} ))} - +
); diff --git a/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx b/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx index dfab9004108..537122ed659 100644 --- a/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/element/APIEditor.tsx @@ -24,9 +24,13 @@ export interface APIEditorConfig { headerParams?: Array<[string, string]>; } -const dummyStringSettings = { +const dummyStringSettings: StandardEditorsRegistryItem = { + id: '', + name: '', + description: '', + editor: StringValueEditor, settings: {}, -} as StandardEditorsRegistryItem; +}; type Props = StandardEditorProps; diff --git a/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx b/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx index 7d46e7b701e..7d4bafd85b1 100644 --- a/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/element/ParamsEditor.tsx @@ -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 (
- + - - + + {Array.from(value || []).map((entry) => ( - + - + ))} - +
); }; diff --git a/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx b/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx index c1719d3abce..e9611fbab5d 100644 --- a/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx @@ -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) {
- + - - + + - - - + + +
diff --git a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx index a78e6ac0fae..407a98a0516 100644 --- a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx @@ -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, diff --git a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx index 50acbf62220..e45303e75dd 100644 --- a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx +++ b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx @@ -131,7 +131,7 @@ interface EditorProps { data?: DataFrame[]; } -function getOptionsPaneCategoryDescriptor( +function getOptionsPaneCategoryDescriptor( props: EditorProps, supplier: PanelOptionsSupplier ): OptionsPaneCategoryDescriptor { @@ -157,7 +157,7 @@ function getOptionsPaneCategoryDescriptor( const access: NestedValueAccess = { getValue: (path) => lodashGet(props.options, path), onChange: (path, value) => { - props.onChange(setOptionImmutably(props.options as any, path, value)); + props.onChange(setOptionImmutably(props.options, path, value)); }, }; diff --git a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx index acd0352795e..c6d78e7480f 100644 --- a/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx @@ -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 - +
onAddItem(sel, layer)} options={typeOptions} label={'Add item'} />
@@ -161,7 +161,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps )} - + ); }; diff --git a/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx b/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx index 5a8bc1257c2..59c9b40fd46 100644 --- a/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx @@ -77,7 +77,9 @@ export function getLayerEditor(opts: InstanceState): NestedPanelOptions - + - +
  • Pan: @@ -36,9 +36,9 @@ export const PanZoomHelp = ({}: StandardEditorPropsZoom: Scroll wheel
  • Reset: Double click
- + - + ); }; @@ -51,7 +51,4 @@ const getStyles = (theme: GrafanaTheme2) => ({ padding: '2px', 'ul > li': { marginLeft: '10px' }, }), - hGroup: css({ - '& div': { width: '100%' }, - }), }); diff --git a/public/app/plugins/panel/canvas/globalStyles.ts b/public/app/plugins/panel/canvas/globalStyles.ts index 6357ba6e897..a282d9d59d9 100644 --- a/public/app/plugins/panel/canvas/globalStyles.ts +++ b/public/app/plugins/panel/canvas/globalStyles.ts @@ -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', + }, + }, + }); }