@findify/react-components/lib/components/ColorFacet/content.js

Findify react UI components

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; }

/**
 * @module components/ColorFacet
 */
import { memo } from 'react';
import cx from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

/**
 * Defines if color is light or dark
 * @param hex Color Hex value
 */
var checkIfLight = function checkIfLight(hex) {
  var _hex = hex.replace('#', '');

  var str = _hex.length < 6 ? _hex + _hex : _hex;
  var number = Number.parseInt(str, 16);
  var red = number >> 16;
  var green = number >> 8 & 255;
  var blue = number & 255;
  return (red * 299 + green * 587 + blue * 114) / 1000 > 220;
};
/**
 * Used to retrieve CSS styles for each facet
 * @param item Facet value
 * @param config MJS configuration to pull mapping from
 */


var getStyles = function getStyles(value, config) {
  var background = config.getIn(['colorMapping', value], value);
  var isLight = background === 'white' || background.startsWith('#') && checkIfLight(background);
  return {
    ball: {
      background: background.startsWith('http') ? "transparent url(".concat(background, ")") : background,
      color: isLight ? 'black' : 'white'
    },
    border: {
      borderColor: isLight ? '#C6C6C6' : 'transparent'
    }
  };
};

export default /*#__PURE__*/memo(function (_ref) {
  var item = _ref.item,
      config = _ref.config,
      theme = _ref.theme,
      children = _ref.children,
      isMobile = _ref.isMobile;
  var value = item.get('value');
  var styles = getStyles(value, config);
  return /*#__PURE__*/_jsxs("a", {
    title: value,
    style: styles.ball,
    className: cx(theme.ball, _defineProperty({}, theme.ballMobile, isMobile)),
    children: [/*#__PURE__*/_jsx("span", {
      style: styles.border
    }), children]
  });
});