{"size": 1361, "ext": "js", "max_stars_repo_path": "src/components/HintedAddressInput/HintedAddressInputView/index.js", "max_stars_repo_name": "crptteam/react-dadata", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/HintedAddressInput/HintedAddressInputView/index.js", "max_issues_repo_name": "crptteam/react-dadata", "max_issues_repo_issues_event_min_datetime": "2020-09-04T21:51:08.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-01T05:30:28.000Z", "max_forks_repo_path": "src/components/HintedAddressInput/HintedAddressInputView/index.js", "max_forks_repo_name": "crptteam/react-dadata", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 24.3035714286, "max_line_length": 85, "alphanum_fraction": 0.608376194}
import React, { Component } from 'react';
import { SingleSelect } from '@crpt/react-select';
import PropTypes from 'prop-types';

import OptionTitle from './OptionTitle';

export default class HintedAddressInputView extends Component {
  static propTypes = {
    hints: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.number,
        title: PropTypes.string,
      }),
    ).isRequired,
  };

  highlightOverlap = ({ str, base }) => {
    const splittedArray = str.split(base);
    const mergedArray = splittedArray.map((item, position, srcArray) => (
      ( position !== (srcArray.length - 1) )
        ? <OptionTitle key={position} boldedText={base} normalText={item} />
        : <OptionTitle key={position} normalText={item} />
    ));
    return mergedArray;
  }
  
  updateHintsForShow = (hints) => {
    if (hints.length === 0) { return []; }
    const inputText = hints[0].title;

    const copiedHints = [...hints];
    copiedHints.forEach(item => {
      item.titleOption = this.highlightOverlap({ str: item.title, base: inputText });
    });

    return copiedHints;
  }

  render() {
    const {
      hints,
      ...othersProps
    } = this.props;

    const hintList = this.updateHintsForShow(hints);

    return (
      <SingleSelect
        withoutIcon
        values={hintList}
        {...othersProps}
      />
    );
  }
}
