@readr-media/react-election-widgets/lib/votes-comparison/react-components/selector.js

"use strict";

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

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

var _breakpoint = _interopRequireDefault(require("./breakpoint"));

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

var _icons = require("./icons");

var _useClickOutside = _interopRequireDefault(require("./hooks/use-click-outside"));

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// eslint-disable-line
const Container = _styledComponents.default.div.withConfig({
  displayName: "selector__Container",
  componentId: "sc-dkj2vr-0"
})(["", ""], props => {
  var _props$theme;

  const baseCss = `
      > div:first-child {
        display: inline-block;
        background-color: ${props.theme.selector.leftBlock.backgroundColor};
        color: ${props.theme.selector.leftBlock.color};
      }
      > div {
        padding: 12px 8px;
        border: 2px solid black;
      }

      > div:last-child {
        cursor: pointer;
        border-left: none;
        width: 210px;
        background-color: white;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
      }
    `;
  const mobileCss = `
      > div:last-child {
        width: 184px;
      }
    `;

  switch ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.device) {
    case 'mobile':
      {
        return `
          ${baseCss}
          ${mobileCss}
        `;
      }

    case 'rwd':
    default:
      {
        return `
          ${baseCss}
          @media ${_breakpoint.default.devices.tabletBelow} {
            ${mobileCss}
          }
        `;
      }
  }
});

const Triangle = _styledComponents.default.div.withConfig({
  displayName: "selector__Triangle",
  componentId: "sc-dkj2vr-1"
})(["border-style:solid;border-width:15px 9px 0 9px;border-color:black transparent transparent transparent;"]);
/**
 *  @callback OnSelect
 *  @param {string|undefined} districtName
 */

/**
 *  @callback RenderFullOption
 *  @param {string} option
 *  @returns {string}
 */

/**
 *  @param {Object} props
 *  @param {string} [props.className]
 *  @param {string[]} [props.options=[]]
 *  @param {string} props.defaultValue
 *  @param {OnSelect} [props.onSelect]
 *  @param {RenderFullOption} [props.renderFullOption]
 */


function Selector({
  className,
  options = [],
  defaultValue,
  onSelect,
  renderFullOption
}) {
  const [toOpenLightBox, setToOpenLightBox] = (0, _react.useState)(false);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
      className: className,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "\u79FB\u52D5\u81F3"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        onClick: () => setToOpenLightBox(true),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: renderFullOption ? renderFullOption(defaultValue) : defaultValue
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Triangle, {})]
      })]
    }), toOpenLightBox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Picker, {
      options: options,
      onSelect: selected => {
        if (typeof selected === 'string') {
          onSelect(selected);
        }

        setToOpenLightBox(false);
      }
    }) : null]
  });
}

const LightBoxContainer = _styledComponents.default.div.withConfig({
  displayName: "selector__LightBoxContainer",
  componentId: "sc-dkj2vr-2"
})(["position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:1;background-color:rgba(0,0,0,0.66);display:flex;"]);

const LightBoxBody = _styledComponents.default.div.withConfig({
  displayName: "selector__LightBoxBody",
  componentId: "sc-dkj2vr-3"
})(["margin:auto;background-color:white;border-radius:4px;min-width:200px;> div:first-child{display:flex;justify-content:space-between;align-items:center;svg{cursor:pointer;}}> div:last-child{display:flex;flex-wrap:wrap;margin-top:25px;}", ""], props => {
  var _props$theme2;

  switch ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.device) {
    case 'mobile':
      {
        return `
          padding: 16px 16px 20px 16px;
          gap: 12px 15px;
          width: 288px;
          > div:last-child {
            gap: 12px 15px;
          }
        `;
      }

    case 'rwd':
    default:
      {
        return `
          @media ${_breakpoint.default.devices.laptopBelow} and ${_breakpoint.default.devices.tablet} {
            padding: 25px 40px 40px 40px;
            width: 688px;
            > div:last-child {
              gap: 12px 18px;
            }
          }
          @media ${_breakpoint.default.devices.tabletBelow} {
            padding: 16px 16px 20px 16px;
            width: 288px;
            > div:last-child {
              gap: 12px 15px;
            }
          }
        `;
      }
  }
});

const StyledOption = _styledComponents.default.div.withConfig({
  displayName: "selector__StyledOption",
  componentId: "sc-dkj2vr-4"
})(["", ""], props => {
  var _props$theme3;

  const baseCss = `
      cursor: pointer;
      border: 1px solid ${props.theme.selector.picker.option.borderColor};
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      line-height: 150%;
      color: ${props.theme.selector.picker.option.color};
      border-radius: 32px;
      &:hover {
        background-color: ${props.theme.selector.picker.option.backgroundColor};
      }
    `;

  switch ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.device) {
    case 'mobile':
      {
        return `
          ${baseCss}
          padding: 4px 12px;
        `;
      }

    case 'rwd':
    default:
      {
        return `
          ${baseCss}
          @media ${_breakpoint.default.devices.laptopBelow} and ${_breakpoint.default.devices.tablet} {
            padding: 4px 16px;
            min-width: 59px;
          }
          @media ${_breakpoint.default.devices.tabletBelow} {
            padding: 4px 12px;
            min-width: 51px;
          }
        `;
      }
  }
});
/**
 *  @param {Object} props
 *  @param {string[]} props.options
 *  @param {OnSelect} props.onSelect
 */


function Picker({
  options,
  onSelect
}) {
  (0, _react.useEffect)(() => {
    const lightbox = containerRef.current;

    const preventDefault = e => {
      e.preventDefault();
    };

    if (lightbox) {
      // lock scroll
      lightbox.addEventListener('wheel', preventDefault, {
        passive: false
      });
      lightbox.addEventListener('touchmove', preventDefault, {
        passive: false
      });
    } // clear event listeners


    return () => {
      lightbox.removeEventListener('wheel', preventDefault);
      lightbox.removeEventListener('touchmove', preventDefault);
    };
  }, []);
  const containerRef = (0, _react.useRef)(null);
  const bodyRef = (0, _react.useRef)(null);
  (0, _useClickOutside.default)(bodyRef, () => {
    onSelect(undefined);
  });
  const optionsJsx = options.map((o, idx) => {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOption, {
      onClick: () => onSelect(o),
      children: o
    }, idx);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LightBoxContainer, {
    ref: containerRef,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LightBoxBody, {
      ref: bodyRef,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          children: "\u8ACB\u9078\u64C7\u9078\u5340"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          onClick: () => onSelect(undefined),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: optionsJsx
      })]
    })
  });
}