@grafana/ui/dist/esm/components/DragHandle/DragHandle.mjs.map

Grafana Components Library

{"version":3,"file":"DragHandle.mjs","sources":["../../../../src/components/DragHandle/DragHandle.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport type DragHandlePosition = 'middle' | 'start' | 'end';\n\nexport const getDragStyles = (theme: GrafanaTheme2, handlePosition?: DragHandlePosition) => {\n  const position = handlePosition || 'middle';\n  const baseColor = theme.colors.emphasize(theme.colors.background.secondary, 0.15);\n  const hoverColor = theme.colors.primary.border;\n  const clickTargetSize = theme.spacing(2);\n  const handlebarThickness = 4;\n  const handlebarWidth = 200;\n  let verticalOffset = '50%';\n  let horizontalOffset = '50%';\n\n  switch (position) {\n    case 'start': {\n      verticalOffset = '0%';\n      horizontalOffset = '0%';\n      break;\n    }\n    case 'end': {\n      verticalOffset = '100%';\n      horizontalOffset = '100%';\n      break;\n    }\n  }\n\n  const dragHandleBase = css({\n    position: 'relative',\n\n    '&:before': {\n      content: '\"\"',\n      position: 'absolute',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create('border-color'),\n      },\n      zIndex: 1,\n    },\n\n    '&:after': {\n      background: baseColor,\n      content: '\"\"',\n      position: 'absolute',\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create('background'),\n      },\n      transform: 'translate(-50%, -50%)',\n      borderRadius: theme.shape.radius.pill,\n      zIndex: 1,\n    },\n\n    '&:hover': {\n      '&:before': {\n        borderColor: hoverColor,\n      },\n\n      '&:after': {\n        background: hoverColor,\n      },\n    },\n  });\n\n  const beforeVertical = {\n    borderRight: '1px solid transparent',\n    height: '100%',\n    left: verticalOffset,\n    transform: 'translateX(-50%)',\n  };\n\n  const beforeHorizontal = {\n    borderTop: '1px solid transparent',\n    top: horizontalOffset,\n    transform: 'translateY(-50%)',\n  };\n\n  return {\n    dragHandleVertical: cx(\n      dragHandleBase,\n      css({\n        cursor: 'col-resize',\n        width: clickTargetSize,\n\n        '&:before': beforeVertical,\n\n        '&:after': {\n          left: verticalOffset,\n          top: '50%',\n          height: handlebarWidth,\n          width: handlebarThickness,\n        },\n      })\n    ),\n    dragHandleHorizontal: cx(\n      dragHandleBase,\n      css({\n        height: clickTargetSize,\n        cursor: 'row-resize',\n\n        '&:before': beforeHorizontal,\n\n        '&:after': {\n          left: '50%',\n          top: horizontalOffset,\n          height: handlebarThickness,\n          width: handlebarWidth,\n        },\n      })\n    ),\n    dragHandleBaseVertical: cx(\n      dragHandleBase,\n      css({\n        cursor: 'col-resize',\n        width: clickTargetSize,\n\n        '&:before': beforeVertical,\n      })\n    ),\n    dragHandleBaseHorizontal: cx(\n      dragHandleBase,\n      css({\n        cursor: 'row-resize',\n        height: clickTargetSize,\n\n        '&:before': beforeHorizontal,\n      })\n    ),\n  };\n};\n"],"names":[],"mappings":"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"}