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 = void 0;

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

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

var _block = require("../block");

var _configContext = require("../../config-context");

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

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var ArrowDown = function ArrowDown(_ref) {
  var extend = _ref.extend;
  return _react.default.createElement(_block.Block, {
    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;
  return _react.default.createElement(_block.Block, {
    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;
  return _react.default.createElement(_block.Block, {
    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;
  return _react.default.createElement(_block.Block, {
    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;

  switch (direction) {
    case "right":
      return _react.default.createElement(ArrowRight, {
        extend: extend
      });

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

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

    case "down":
      return _react.default.createElement(ArrowDown, {
        extend: extend
      });
  }
};

var ArrowComponent = function ArrowComponent(_ref6) {
  var direction = _ref6.direction,
      size = _ref6.size,
      color = _ref6.color,
      theme = _ref6.theme;
  var extend = {
    fill: color,
    height: size,
    width: size,
    stroke: "transparent",
    transition: "all 0.3s ease-out",
    transitionProperty: "transform"
  };
  return _react.default.createElement(_configContext.ConfigContext.Consumer, null, function (config) {
    return _react.default.createElement(ArrowResolver, {
      direction: directionResolver(direction, config.isRtl),
      extend: _objectSpread({}, extend, theme.nav)
    });
  });
};

ArrowComponent.propTypes = {
  /** Any valid CSS color value */
  color: _propTypes.default.string,

  /** Any valid CSS height/width value */
  size: _propTypes.default.string,
  direction: _propTypes.default.oneOf(["up", "down", "right", "left"])
};
ArrowComponent.defaultProps = {
  direction: "right",
  size: "10px"
};
ArrowComponent.displayName = "Arrow";
var Arrow = (0, _block.withTheme)(ArrowComponent);
exports.Arrow = Arrow;