@readr-media/react-feedback/lib/react-components/form/single-option-form/option.js

## Installation `yarn install`

"use strict";

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _jsxRuntime = require("react/jsx-runtime");

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

// eslint-disable-line
const Wrapper = _styledComponents.default.div.withConfig({
  displayName: "option__Wrapper",
  componentId: "sc-13dpnxr-0"
})(["display:inline-flex;flex-direction:column;align-items:center;"]);

const OptionIconWrapper = _styledComponents.default.div.withConfig({
  displayName: "option__OptionIconWrapper",
  componentId: "sc-13dpnxr-1"
})(["display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;cursor:pointer;img{width:calc(100% - 8px);height:calc(100% - 8px);}&.disabled{cursor:not-allowed;}&:not(.disabled){&.active,&:active,&:hover{border:1px solid rgba(0,0,0,0.87);}}"]);

const OptionLabel = _styledComponents.default.div.withConfig({
  displayName: "option__OptionLabel",
  componentId: "sc-13dpnxr-2"
})(["color:rgba(0,0,0,0.3);font-size:12px;font-style:normal;font-weight:400;line-height:200%;"]);

const OptionStatistic = _styledComponents.default.span.withConfig({
  displayName: "option__OptionStatistic",
  componentId: "sc-13dpnxr-3"
})(["font-size:16px;line-height:24px;color:rgba(0,9,40,30%);font-weight:400;font-size:16px;line-height:24px;@media ", "{display:none;}"], ({
  theme
}) => theme.breakpoint.tablet);
/**
 * @param {import('../../../typedef').OptionProps} props
 * @return {JSX.Element}
 */


function Option({
  onMouseUp,
  selected,
  label,
  value,
  iconSrc,
  statistic
}) {
  function mouseUpHandler() {
    if (statistic === null) return;
    onMouseUp(value);
  }

  const iconClasses = ['option-icon-wrapper', selected ? 'active' : '', statistic === null ? 'disabled' : ''].join(' ');
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
    className: "option-wrapper",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionIconWrapper, {
      className: iconClasses,
      onMouseUp: mouseUpHandler,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        src: iconSrc
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionLabel, {
      className: "option-label",
      children: label
    }), statistic !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionStatistic, {
      className: "option-statistic",
      children: statistic
    })]
  });
}