vcc-ui/lib/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Arrow = Arrow;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireDefault(require("react"));

var _reactFela = require("react-fela");

var _inline = require("../inline");

var _getThemeStyle = require("../../get-theme-style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ArrowDown = function ArrowDown(_ref) {
  var extend = _ref.extend,
      themeName = _ref.themeName;
  return themeName === "polestar" ? _react.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 13 6"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 13 6"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 16 16"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 5 12"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 25.2 25.5"
  }, _react.default.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.default.createElement(_inline.Inline, {
    extend: extend,
    as: "svg",
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 5 12"
  }, _react.default.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.default.createElement(ArrowRight, {
        extend: extend,
        themeName: themeName
      });

    case "left":
      return _react.default.createElement(ArrowLeft, {
        extend: extend,
        themeName: themeName
      });

    case "up":
      return _react.default.createElement(ArrowUp, {
        extend: extend,
        themeName: themeName
      });

    case "down":
      return _react.default.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"
  };
};

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 = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  var styleProps = {
    size: size,
    color: color
  };
  return _react.default.createElement(ArrowResolver, {
    direction: directionResolver(direction, theme.direction === "rtl"),
    themeName: theme.name,
    extend: [arrowStyle(styleProps), (0, _getThemeStyle.getThemeStyle)("arrow", theme, styleProps)]
  });
}

Arrow.propTypes = {
  /** Any valid CSS color value */
  color: _propTypes.default.string,
  size: _propTypes.default.number,
  direction: _propTypes.default.oneOf(["up", "down", "right", "left"])
};