openreplay/frontend/app/components/Alerts/DropdownChips/DropdownChips.js

import React from 'react';
import { Input, TagBadge } from 'UI';
import Select from 'Shared/Select';

function DropdownChips({
  textFiled = false,
  validate = null,
  placeholder = '',
  selected = [],
  options = [],
  badgeClassName = 'lowercase',
  onChange = () => null,
  ...props
}) {
  const onRemove = (id) => {
    onChange(selected.filter((i) => i !== id));
  };

  const onSelect = ({ value }) => {
    const newSlected = selected.concat(value.value);
    onChange(newSlected);
  };

  const onKeyPress = (e) => {
    const val = e.target.value;
    if (e.key !== 'Enter' || selected.includes(val)) return;
    e.preventDefault();
    e.stopPropagation();
    if (validate && !validate(val)) return;

    const newSlected = selected.concat(val);
    e.target.value = '';
    onChange(newSlected);
  };

  const _options = options.filter((item) => !selected.includes(item.value));

  const renderBadge = (item) => {
    const val = typeof item === 'string' ? item : item.value;
    const text = typeof item === 'string' ? item : item.label;
    return (
      <TagBadge
        className={badgeClassName}
        key={text}
        text={text}
        hashed={false}
        onRemove={() => onRemove(val)}
        outline
      />
    );
  };

  return (
    <div className="w-full">
      {textFiled ? (
        <Input type="text" onKeyPress={onKeyPress} placeholder={placeholder} />
      ) : (
        <Select
          placeholder={placeholder}
          isSearchable
          options={_options}
          name="webhookInput"
          value={null}
          onChange={onSelect}
          {...props}
        />
      )}
      <div className="flex flex-wrap mt-3">
        {textFiled
          ? selected.map(renderBadge)
          : options.filter((i) => selected.includes(i.value)).map(renderBadge)}
      </div>
    </div>
  );
}

export default DropdownChips;