@shopgate/engage/locations/components/StoreList/StoreListSearchRadius.js

Shopgate's ENGAGE library.

import React, { useState, useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';
import { option } from "./StoreListSearchRadius.style";
import { selectContainer, select } from "./StoreListSearch.style";
import connector from "./StoreListSearchRadius.connector";

/**
 * @param {Object} props The component props
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const StoreListSearchRadius = ({
  radius,
  unitSystem,
  setRadius
}) => {
  const [searchRadius, setSearchRadius] = useState(radius);
  const handleRadiusChange = useCallback(event => {
    const value = parseInt(event.target.value, 10) || null;
    setSearchRadius(value);
    setRadius(value);
  }, [setRadius]);
  const options = useMemo(() => {
    let values;
    let placeholder;
    if (unitSystem === 'metric') {
      values = [5, 10, 25, 50, 100];
      placeholder = 'locations.radius_km';
    } else {
      values = [10, 25, 50, 100];
      placeholder = 'locations.radius_mi';
    }
    const result = values.map(value => ({
      value,
      label: i18n.text(placeholder, {
        radius: value
      })
    }));
    return [{
      value: '',
      label: i18n.text('locations.radius')
    }].concat(result);
  }, [unitSystem]);
  return /*#__PURE__*/_jsx("div", {
    className: selectContainer,
    children: /*#__PURE__*/_jsx("select", {
      name: "store_list_search_radius",
      value: searchRadius || '',
      className: select,
      onChange: handleRadiusChange,
      children: options.map(({
        value,
        label
      }) => /*#__PURE__*/_jsx("option", {
        className: option,
        value: value,
        children: label
      }, label))
    })
  });
};
StoreListSearchRadius.defaultProps = {
  radius: null,
  unitSystem: null
};
export default connector(StoreListSearchRadius);