openreplay/frontend/app/components/ui/SegmentSelection/SegmentSelection.tsx

import React from 'react';
import { Icon, Tooltip } from 'UI';
import cn from 'classnames';
import { IconNames } from 'UI/SVG';
import styles from './segmentSelection.module.css';

type Entry = {
  value: string;
  name: string;
  disabled?: boolean;
  icon?: IconNames;
};

interface Props<T extends Entry> {
  className?: string;
  name: string;
  value: T;
  list: T[];
  onSelect: (_: null, data: { name: string; value: T['value'] }) => void;
  small?: boolean;
  extraSmall?: boolean;
  primary?: boolean;
  size?: 'normal' | 'small' | 'extraSmall';
  icons?: boolean;
  disabled?: boolean;
  disabledMessage?: string;
  outline?: boolean;
}

class SegmentSelection<T extends Entry> extends React.Component<Props<T>> {
  setActiveItem = (item: T) => {
    this.props.onSelect(null, { name: this.props.name, value: item.value });
  };

  render() {
    const {
      className,
      list,
      small = false,
      extraSmall = false,
      primary = false,
      size = 'normal',
      icons = false,
      disabled = false,
      disabledMessage = 'Not Allowed',
      outline,
    } = this.props;

    return (
      <Tooltip title={disabledMessage} disabled={!disabled}>
        <div
          className={cn(
            styles.wrapper,
            {
              [styles.primary]: primary,
              [styles.small]: size === 'small' || small,
              [styles.extraSmall]: size === 'extraSmall' || extraSmall,
              [styles.icons]: icons === true,
              [styles.disabled]: disabled,
              [styles.outline]: outline,
            },
            className,
          )}
        >
          {list.map((item, i) => (
            <div
              key={`${item.name}-${i}`}
              className={cn(styles.item, 'w-full', {
                'opacity-25 cursor-default': item.disabled,
              })}
              data-active={
                this.props.value && this.props.value.value === item.value
              }
              onClick={() => !item.disabled && this.setActiveItem(item)}
            >
              {item.icon && (
                <Icon
                  name={item.icon}
                  size={
                    size === 'extraSmall' || size === 'small' || icons ? 14 : 20
                  }
                  marginRight={item.name ? 6 : undefined}
                />
              )}
              <div className="leading-none">{item.name}</div>
            </div>
          ))}
        </div>
      </Tooltip>
    );
  }
}

export default SegmentSelection;