@ntragas/pouncejstest/dist/cjs/components/IconButton/useIconButtonStyles.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.getSolidButtonStyles = exports.getGhostButtonStyles = exports.getUnstyledButtonStyles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

var _helpers = require("../../utils/helpers");

var _useButtonStyles = require("../Button/useButtonStyles");

var _useTheme = _interopRequireDefault(require("../../utils/useTheme"));

var getUnstyledButtonStyles = function getUnstyledButtonStyles(theme) {
  return {
    _focus: {
      backgroundColor: (0, _helpers.addOpacity)(theme.colors.white, 0.1)
    }
  };
};

exports.getUnstyledButtonStyles = getUnstyledButtonStyles;

var getOutlineButtonStyles = function getOutlineButtonStyles(theme, variantColor) {
  var themeColorKey = (0, _useButtonStyles.getThemeColor)(variantColor);
  var themeColor = theme.colors[themeColorKey];
  var hoverColor = (0, _helpers.lightenDarkenColor)(themeColor, 8);
  var activeColor = (0, _helpers.lightenDarkenColor)(themeColor, -25);
  var focusBorderColor = (0, _helpers.lightenDarkenColor)(themeColor, 85);
  return {
    transition: 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    // prettier-ignore
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: 'transparent',
    _hover: {
      backgroundColor: hoverColor,
      borderColor: hoverColor
    },
    _focus: {
      backgroundColor: hoverColor,
      borderColor: focusBorderColor
    },
    _active: {
      backgroundColor: activeColor,
      borderColor: activeColor
    }
  };
};

var getGhostButtonStyles = function getGhostButtonStyles(theme, variantColor) {
  var themeColorKey = (0, _useButtonStyles.getThemeColor)(variantColor);
  var themeColor = theme.colors[themeColorKey];
  return {
    transition: 'background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    border: '1px solid',
    borderColor: 'transparent',
    backgroundColor: 'transparent',
    _hover: {
      backgroundColor: (0, _helpers.addOpacity)(themeColor, 0.3)
    },
    _focus: {
      backgroundColor: (0, _helpers.addOpacity)(themeColor, 0.3)
    },
    _active: {
      backgroundColor: themeColor
    }
  };
};

exports.getGhostButtonStyles = getGhostButtonStyles;

var getSolidButtonStyles = function getSolidButtonStyles(theme, variantColor) {
  var themeColorKey = (0, _useButtonStyles.getThemeColor)(variantColor);
  var themeColor = theme.colors[themeColorKey];
  var hoverColor = (0, _helpers.lightenDarkenColor)(themeColor, 10);
  var activeColor = (0, _helpers.lightenDarkenColor)(themeColor, -10);
  var focusBorderColor = (0, _helpers.lightenDarkenColor)(themeColor, 85);
  return {
    transition: 'border-color 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, background-color 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    // prettier-ignore
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: themeColor,
    _hover: {
      backgroundColor: hoverColor,
      borderColor: hoverColor
    },
    _focus: {
      backgroundColor: hoverColor,
      borderColor: focusBorderColor
    },
    _active: {
      backgroundColor: activeColor,
      borderColor: activeColor
    }
  };
};

exports.getSolidButtonStyles = getSolidButtonStyles;

var getSizeButtonStyles = function getSizeButtonStyles(size) {
  switch (size) {
    case 'small':
      return {
        height: 24,
        width: 24
      };

    case 'medium':
      return {
        height: 32,
        width: 32
      };

    case 'large':
    default:
      return {
        height: 46,
        width: 46
      };
  }
};

var getBorderStyles = function getBorderStyles(variantBorderStyle) {
  switch (variantBorderStyle) {
    case 'circle':
      return {
        borderRadius: 'circle'
      };

    case 'square':
    default:
      {
        return {
          borderRadius: 'medium'
        };
      }
  }
};

var useIconButtonStyles = function useIconButtonStyles(_ref) {
  var variantColor = _ref.variantColor,
      variantBorderStyle = _ref.variantBorderStyle,
      variant = _ref.variant,
      size = _ref.size;
  var theme = (0, _useTheme.default)();

  var variantStyles = _react.default.useMemo(function () {
    switch (variant) {
      case 'ghost':
        return getGhostButtonStyles(theme, variantColor);

      case 'unstyled':
        return getUnstyledButtonStyles(theme);

      case 'outline':
        return getOutlineButtonStyles(theme, variantColor);

      case 'solid':
      default:
        return getSolidButtonStyles(theme, variantColor);
    }
  }, [variantColor, variant]);

  var sizeStyles = getSizeButtonStyles(size);
  var borderStyles = getBorderStyles(variantBorderStyle);
  return (0, _extends2.default)({
    outline: 'none',
    lineHeight: 'none'
  }, borderStyles, sizeStyles, variantStyles);
};

var _default = useIconButtonStyles;
exports.default = _default;