baseui/helper/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledBody = exports.StyledArrow = void 0;
var _styles = require("../styles");
var _popover = require("../popover");
var _styledComponents = require("../popover/styled-components");
var _utils = require("../popover/utils");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const CLAMP_ARROW_SIZE = 16;

// @ts-ignore
function dimensions(placement) {
  switch (placement) {
    case _popover.PLACEMENT.left:
    case _popover.PLACEMENT.right:
      return [CLAMP_ARROW_SIZE, CLAMP_ARROW_SIZE * 2];
    case _popover.PLACEMENT.top:
    case _popover.PLACEMENT.bottom:
      return [CLAMP_ARROW_SIZE * 2, CLAMP_ARROW_SIZE];
    default:
      return [CLAMP_ARROW_SIZE, CLAMP_ARROW_SIZE];
  }
}

// @ts-ignore
function linearGradientDirection(placement) {
  return ['to', ...(0, _utils.splitPlacement)(placement)].join(' ');
}

// @ts-ignore
function conicGradientOrigin(placement) {
  switch (placement) {
    case _popover.PLACEMENT.right:
      return [0, 50];
    case _popover.PLACEMENT.bottom:
      return [50, 0];
    case _popover.PLACEMENT.left:
      return [100, 50];
    case _popover.PLACEMENT.top:
      return [50, 100];
    default:
      return [0, 0];
  }
}

// @ts-ignore
function conicGradientDegStart(placement) {
  switch (placement) {
    case _popover.PLACEMENT.right:
      return 45;
    case _popover.PLACEMENT.bottom:
      return 135;
    case _popover.PLACEMENT.left:
      return 225;
    case _popover.PLACEMENT.top:
      return 315;
    default:
      return 0;
  }
}

// @ts-ignore
function position(offsets, placement, width, height) {
  if (placement === _popover.PLACEMENT.top) {
    return {
      bottom: `-${height}px`,
      left: `${offsets.left}px`
    };
  } else if (placement === _popover.PLACEMENT.bottom) {
    return {
      top: `-${height}px`,
      left: `${offsets.left}px`
    };
  } else if (placement === _popover.PLACEMENT.left) {
    return {
      top: `${offsets.top}px`,
      right: `-${width}px`
    };
  } else if (placement === _popover.PLACEMENT.right) {
    return {
      top: `${offsets.top}px`,
      left: `-${width}px`
    };
  } else if (placement === _popover.PLACEMENT.topLeft) {
    return {
      bottom: `-${height}px`
    };
  } else if (placement === _popover.PLACEMENT.topRight) {
    return {
      bottom: `-${height}px`,
      right: '0px'
    };
  } else if (placement === _popover.PLACEMENT.rightTop) {
    return {
      left: `-${width}px`
    };
  } else if (placement === _popover.PLACEMENT.rightBottom) {
    return {
      bottom: '0px',
      left: `-${width}px`
    };
  } else if (placement === _popover.PLACEMENT.bottomRight) {
    return {
      top: `-${height}px`,
      right: '0px'
    };
  } else if (placement === _popover.PLACEMENT.bottomLeft) {
    return {
      top: `-${height}px`
    };
  } else if (placement === _popover.PLACEMENT.leftBottom) {
    return {
      right: `-${width}px`,
      bottom: '0px'
    };
  } else if (placement === _popover.PLACEMENT.leftTop) {
    return {
      right: `-${width}px`
    };
  }
  return {};
}
function clampArrowStyle(offsets, placement, color) {
  if (placement === _popover.PLACEMENT.auto) {
    return {};
  } else if (placement === _popover.PLACEMENT.top || placement === _popover.PLACEMENT.bottom || placement === _popover.PLACEMENT.left || placement === _popover.PLACEMENT.right) {
    const [w, h] = dimensions(placement);
    const [x, y] = conicGradientOrigin(placement);
    return {
      position: 'absolute',
      width: `${w}px`,
      height: `${h}px`,
      background: `conic-gradient(from ${conicGradientDegStart(placement)}deg at ${x}% ${y}%, ${color} 0%, ${color} 25%, transparent 25%, transparent 100%)`,
      ...position(offsets, placement, w, h)
    };
  } else {
    const [w, h] = dimensions(placement);
    return {
      position: 'absolute',
      width: `${w}px`,
      height: `${h}px`,
      background: `linear-gradient(${linearGradientDirection(placement)}, transparent 0%, transparent 50%, ${color} 50%, ${color} 100%)`,
      ...position(offsets, placement, w, h)
    };
  }
}
const StyledBody = exports.StyledBody = (0, _styles.styled)('div', props => {
  return {
    ...(0, _styledComponents.getBodyStyles)(props),
    ...(0, _utils.getPopoverMarginStyles)(props.$showArrow ? CLAMP_ARROW_SIZE : 0, props.$placement, props.$popoverMargin),
    backgroundColor: props.$theme.colors.backgroundPrimary
  };
});
StyledBody.displayName = "StyledBody";
StyledBody.displayName = 'StyledBody';
const StyledArrow = exports.StyledArrow = (0, _styles.styled)('div', props => {
  return {
    ...clampArrowStyle(props.$arrowOffset, props.$placement, props.$theme.colors.backgroundPrimary)
  };
});
StyledArrow.displayName = "StyledArrow";
StyledArrow.displayName = 'StyledArrow';