packages/tree/src/styles.ts - develop - bearury/ui-kit-ce

packages/tree/src/styles.ts
376 строк12 KB
Pavel Uryadyshev
feat(tree-dnd): реализован новый компонент Tree с поддержкой drag-and-drop
09 июл 2025, 13:07
09 июл 2025, 13:07a06fe68
import {
  TreeSpacingVertical,
  DEFAULT_SPACING,
  TREE_CONTROL_ELEMENT_SIZE,
} from './common'
import { createUseStyles } from '@v-uik/theme'

export const useStyles = createUseStyles(
  (theme) => {
    return {
      //#region Классы стилей основного дерева
      root: {
        paddingLeft: 0,
        display: 'flex',
        margin: 0,
        width: '100%',
        flexDirection: 'column',
        outline: 'none',
        fontFamily: theme.comp.tree.typographyFontFamily,
        fontWeight: theme.comp.tree.typographyFontWeight,
        letterSpacing: theme.comp.tree.typographyLetterSpacing,
      },
      rootExtraSmall: {
        fontSize: theme.comp.tree.typographyFontSizeXs,
        lineHeight: theme.comp.tree.typographyLineHeightXs,
      },
      rootSmall: {
        fontSize: theme.comp.tree.typographyFontSizeSm,
        lineHeight: theme.comp.tree.typographyLineHeightSm,
      },
      rootMedium: {
        fontSize: theme.comp.tree.typographyFontSizeMd,
        lineHeight: theme.comp.tree.typographyLineHeightMd,
      },
      //#endregion

      //#region Классы стилей узлов дерева
      item: {
        minWidth: 288,
        display: 'flex',
        flexDirection: 'column',

        '& > $node:hover': {
          backgroundColor: theme.comp.tree.colorBackgroundHover,
          color: theme.comp.tree.colorTextHover || theme.comp.tree.colorText,

          '& $nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorHover ||
              theme.comp.tree.expandIconColor,
          },

          '& $nodeIcon': {
            color: theme.comp.tree.iconColorHover || theme.comp.tree.iconColor,
          },

          '& $selectedIndicator': {
            backgroundColor:
              theme.comp.tree.selectedIndicatorColorBackgroundHover,
          },
        },

        '& > $node:active': {
          backgroundColor: theme.comp.tree.colorBackgroundActive,
          color: theme.comp.tree.colorTextActive || theme.comp.tree.colorText,

          '& button$nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorActive ||
              theme.comp.tree.expandIconColor,
          },

          '& span$nodeIcon': {
            color: theme.comp.tree.iconColorActive || theme.comp.tree.iconColor,
          },

          '& $selectedIndicator': {
            backgroundColor:
              theme.comp.tree.selectedIndicatorColorBackgroundActive,
          },
        },
      },
      itemFocused: {
        '& > $node::before': {
          content: "''",
          position: 'absolute',
          height: `calc(100% - ${theme.comp.tree.widthShadowFocus * 2}px)`,
          width: `calc(100% - ${theme.comp.tree.widthShadowFocus * 2}px)`,
          borderRadius: 'inherit',
          boxShadow: `0 0 0 ${theme.comp.tree.widthShadowFocus}px ${theme.comp.tree.colorShadowFocus}`,
          left: theme.comp.tree.widthShadowFocus,
          top: theme.comp.tree.widthShadowFocus,
        },
      },
      node: {
        position: 'relative',
        display: 'flex',
        alignItems: 'start',
        flexDirection: 'row',
        paddingLeft: 16,
        paddingRight: 16,
        backgroundColor: theme.comp.tree.colorBackground,
        color: theme.comp.tree.colorText,
      },
      itemGroup: {
        paddingLeft: 0,
        margin: 0,
      },
      itemExtraSmall: {
        '& $node': {
          borderTopLeftRadius: theme.comp.tree.shapeBorderRadiusTopLeftXs,
          borderTopRightRadius: theme.comp.tree.shapeBorderRadiusTopRightXs,
          borderBottomLeftRadius: theme.comp.tree.shapeBorderRadiusBottomLeftXs,
          borderBottomRightRadius:
            theme.comp.tree.shapeBorderRadiusBottomRightXs,
        },

        '& $nodeControlContainer': {
          paddingTop: TreeSpacingVertical.xs,
          paddingBottom: TreeSpacingVertical.xs,
        },
        '& $nodeContentContainer': {
          paddingTop: TreeSpacingVertical.xs,
          paddingBottom: TreeSpacingVertical.xs,
        },
      },
      itemSmall: {
        '& $node': {
          borderTopLeftRadius: theme.comp.tree.shapeBorderRadiusTopLeftSm,
          borderTopRightRadius: theme.comp.tree.shapeBorderRadiusTopRightSm,
          borderBottomLeftRadius: theme.comp.tree.shapeBorderRadiusBottomLeftSm,
          borderBottomRightRadius:
            theme.comp.tree.shapeBorderRadiusBottomRightSm,
        },

        '& $nodeControlContainer': {
          paddingTop: TreeSpacingVertical.sm,
          paddingBottom: TreeSpacingVertical.sm,
        },
        '& $nodeContentContainer': {
          paddingTop: TreeSpacingVertical.sm,
          paddingBottom: TreeSpacingVertical.sm,
        },
      },
      itemMedium: {
        '& $node': {
          borderTopLeftRadius: theme.comp.tree.shapeBorderRadiusTopLeftMd,
          borderTopRightRadius: theme.comp.tree.shapeBorderRadiusTopRightMd,
          borderBottomLeftRadius: theme.comp.tree.shapeBorderRadiusBottomLeftMd,
          borderBottomRightRadius:
            theme.comp.tree.shapeBorderRadiusBottomRightMd,
        },

        '& $nodeControlContainer': {
          paddingTop: TreeSpacingVertical.md,
          paddingBottom: TreeSpacingVertical.md,
        },
        '& $nodeContentContainer': {
          paddingTop: TreeSpacingVertical.md,
          paddingBottom: TreeSpacingVertical.md,
        },
      },
      itemDisabled: {
        '& > $node': {
          pointerEvents: 'none',
          backgroundColor: theme.comp.tree.colorBackgroundDisabled,
          color: theme.comp.tree.colorTextDisabled,

          '& $nodeExpandButton': {
            color: theme.comp.tree.expandIconColorDisabled,
          },

          '& $nodeIcon': {
            color: theme.comp.tree.iconColorDisabled,
          },

          '& $selectedIndicator': {
            backgroundColor:
              theme.comp.tree.selectedIndicatorColorBackgroundDisabled,
          },
        },
      },
      itemLoading: {},
      itemCheckDisabled: {},
      itemSelectDisabled: {},
      //#endregion

      //#region Классы стилей узлов управления
      nodeControlContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex',
        position: 'relative',
        '&:focus-visible': {
          outline: 'none',
        },
        paddingLeft: DEFAULT_SPACING,
        paddingRight: DEFAULT_SPACING,
        minHeight: TREE_CONTROL_ELEMENT_SIZE,
        minWidth: TREE_CONTROL_ELEMENT_SIZE,
        boxSizing: 'content-box',
      },
      nodeControlContainerLabel: {
        cursor: 'pointer',
      },
      nodeControl: {
        justifyContent: 'center',
        alignItems: 'center',
        display: 'flex',
      },
      nodeContentContainer: {
        alignSelf: 'center',
        display: 'flex',
        paddingLeft: DEFAULT_SPACING,
        paddingRight: DEFAULT_SPACING,
      },
      nodeContent: {
        display: '-webkit-box',
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
      },
      nodeIcon: {
        color: theme.comp.tree.iconColor,
      },
      //#endregion

      //#region Классы стилей узла для скрытия/раскрытия
      itemExpandable: {
        '& > $node': {
          cursor: 'pointer',
        },
      },
      itemExpanded: {},
      nodeExpandButton: {
        color: theme.comp.tree.expandIconColor,
        cursor: 'pointer',
      },
      //#endregion

      //#region Классы стилей для путей у узлов дерева
      trailContainer: {
        position: 'absolute',
        height: '100%',
        width: '100%',
      },
      trailVertical: {
        position: 'absolute',
        borderLeftStyle: 'solid',
        borderLeftWidth: 1,
        borderLeftColor: theme.comp.tree.trailsColor,
      },
      trailHorizohtal: {
        borderLeftStyle: 'solid',
        borderLeftWidth: 1,
        borderBottomStyle: 'solid',
        borderBottomWidth: 1,
        position: 'absolute',
        borderBottomLeftRadius: theme.comp.tree.trailsBorderRadius,
        borderLeftColor: theme.comp.tree.trailsColor,
        borderBottomColor: theme.comp.tree.trailsColor,
      },
      //#endregion

      //#region Классы для узла с функциональностью выбора
      itemSelectable: {
        '& $node': {
          cursor: 'pointer',
        },
      },
      itemSelected: {
        '& > $node': {
          color: theme.comp.tree.colorTextSelected || theme.comp.tree.colorText,
          backgroundColor:
            theme.comp.tree.colorBackgroundSelected ||
            theme.comp.tree.colorBackground,

          '& $nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorSelected ||
              theme.comp.tree.expandIconColor,
          },

          '& $nodeIcon': {
            color:
              theme.comp.tree.iconColorSelected || theme.comp.tree.iconColor,
          },
        },
        '& > $node:hover': {
          color:
            theme.comp.tree.colorTextSelectedHover ||
            theme.comp.tree.colorTextSelected ||
            theme.comp.tree.colorText,
          backgroundColor:
            theme.comp.tree.colorBackgroundSelectedHover ||
            theme.comp.tree.colorBackgroundHover,

          '& $nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorSelectedHover ||
              theme.comp.tree.expandIconColorSelected ||
              theme.comp.tree.expandIconColor,
          },

          '& $nodeIcon': {
            color:
              theme.comp.tree.iconColorSelectedHover ||
              theme.comp.tree.iconColorSelected ||
              theme.comp.tree.iconColor,
          },
        },
        '& > $node:active': {
          color:
            theme.comp.tree.colorTextSelectedActive ||
            theme.comp.tree.colorTextSelected ||
            theme.comp.tree.colorText,
          backgroundColor:
            theme.comp.tree.colorBackgroundSelectedActive ||
            theme.comp.tree.colorBackgroundActive,

          '& button$nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorSelectedActive ||
              theme.comp.tree.expandIconColorSelected ||
              theme.comp.tree.expandIconColor,
          },

          '& span$nodeIcon ': {
            color:
              theme.comp.tree.iconColorSelectedActive ||
              theme.comp.tree.iconColorSelected ||
              theme.comp.tree.iconColor,
          },
        },
        '&$itemDisabled > $node': {
          color:
            theme.comp.tree.colorTextSelectedDisabled ||
            theme.comp.tree.colorTextDisabled,
          backgroundColor:
            theme.comp.tree.colorBackgroundSelectedDisabled ||
            theme.comp.tree.colorBackgroundSelected,

          '& $nodeExpandButton': {
            color:
              theme.comp.tree.expandIconColorSelectedDisabled ||
              theme.comp.tree.expandIconColorDisabled,
          },

          '& $nodeIcon': {
            color:
              theme.comp.tree.iconColorSelectedDisabled ||
              theme.comp.tree.iconColorDisabled,
          },
        },
      },
      selectedIndicator: {
        position: 'absolute',
        display: 'block',
        height: '100%',
        width: 4,
        top: 0,
        left: 0,
        backgroundColor: theme.comp.tree.selectedIndicatorColorBackground,
        borderTopLeftRadius:
          theme.comp.tree.selectedIndicatorShapeBorderRadiusTopLeft,
        borderTopRightRadius:
          theme.comp.tree.selectedIndicatorShapeBorderRadiusTopRight,
        borderBottomLeftRadius:
          theme.comp.tree.selectedIndicatorShapeBorderRadiusBottomLeft,
        borderBottomRightRadius:
          theme.comp.tree.selectedIndicatorShapeBorderRadiusBottomRight,
      },
      //#endregion
    }
  },
  { name: 'tree' }
)