vcc-ui/es/components/arrow/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import PropTypes from 'prop-types';
import React from 'react';
import { useFela } from 'react-fela';
import { Inline } from '../inline';
import { getThemeStyle } from '../../get-theme-style';

var ArrowDown = function ArrowDown(_ref) {
  var extend = _ref.extend,
      themeName = _ref.themeName;
  return themeName === 'polestar' ? React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, React.createElement("path", {
    d: "M7.778 13.214L14 6.93l-.778-.785-5.672 5.728V0h-1.1v11.873L.778 6.145 0 6.93 7 14z"
  })) : React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 13 6"
  }, React.createElement("path", {
    d: "M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z"
  }));
};

var ArrowUp = function ArrowUp(_ref2) {
  var extend = _ref2.extend,
      themeName = _ref2.themeName;
  return themeName === 'polestar' ? React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, React.createElement("path", {
    d: "M7.222 1.786L1 8.07l.778.785L7.45 3.127V15h1.1V3.127l5.672 5.728L15 8.07 8 1l-.778.786z"
  })) : React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 13 6"
  }, React.createElement("path", {
    d: "M6.50012725 1.86602559L1.21516521 5.5.5 4.62573225 6.50013536.5 12.5 4.6256396l-.7151756.87426061z"
  }));
};

var ArrowLeft = function ArrowLeft(_ref3) {
  var extend = _ref3.extend,
      themeName = _ref3.themeName;
  return themeName === 'polestar' ? React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, React.createElement("path", {
    d: "M1.354 9.046L8.308 16l.861-.862L2.831 8.8H16V7.57H2.83l6.34-6.34-.862-.922L.492 8.185z"
  })) : React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 5 12"
  }, React.createElement("path", {
    d: "M1.36602559 5.99987275L5 11.28483479 4.12573225 12 0 5.99986464 4.1256396 0l.87426061.7151756z"
  }));
};

var ArrowRight = function ArrowRight(_ref4) {
  var extend = _ref4.extend,
      themeName = _ref4.themeName;
  return themeName === 'polestar' ? React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 25.2 25.5"
  }, React.createElement("path", {
    d: "M23.8 11.3L12.5 0l-1.4 1.4 10.3 10.3H0v2h21.4L11.1 24l1.4 1.5 12.7-12.8z"
  })) : React.createElement(Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 5 12"
  }, React.createElement("path", {
    d: "M3.63397441 6.00012725L0 .71516521.87426775 0 5 6.00013536.87436041 12l-.87426062-.7151756z"
  }));
};

var directionResolver = function directionResolver(direction, isRtl) {
  if (direction === 'right' && isRtl) {
    return 'left';
  }

  if (direction === 'left' && isRtl) {
    return 'right';
  }

  return direction;
};

var ArrowResolver = function ArrowResolver(_ref5) {
  var direction = _ref5.direction,
      extend = _ref5.extend,
      themeName = _ref5.themeName;

  switch (direction) {
    case 'right':
      return React.createElement(ArrowRight, {
        extend: extend,
        themeName: themeName
      });

    case 'left':
      return React.createElement(ArrowLeft, {
        extend: extend,
        themeName: themeName
      });

    case 'up':
      return React.createElement(ArrowUp, {
        extend: extend,
        themeName: themeName
      });

    case 'down':
      return React.createElement(ArrowDown, {
        extend: extend,
        themeName: themeName
      });
  }
};

var arrowStyle = function arrowStyle(_ref6) {
  var size = _ref6.size,
      color = _ref6.color;
  return {
    fill: color,
    height: size,
    width: size,
    stroke: 'transparent',
    transition: 'all 0.3s ease-out',
    transitionProperty: 'transform'
  };
};

export function Arrow(_ref7) {
  var _ref7$direction = _ref7.direction,
      direction = _ref7$direction === void 0 ? 'right' : _ref7$direction,
      _ref7$size = _ref7.size,
      size = _ref7$size === void 0 ? 10 : _ref7$size,
      color = _ref7.color;

  var _useFela = useFela(),
      theme = _useFela.theme;

  var styleProps = {
    size: size,
    color: color
  };
  return React.createElement(ArrowResolver, {
    direction: directionResolver(direction, theme.direction === 'rtl'),
    themeName: theme.name,
    extend: [arrowStyle(styleProps), getThemeStyle('arrow', theme, styleProps)]
  });
}
Arrow.propTypes = {
  /** Any valid CSS color value */
  color: PropTypes.string,
  size: PropTypes.number,
  direction: PropTypes.oneOf(['up', 'down', 'right', 'left'])
};