@spaced-out/ui-design-system/lib/components/TokenListInput/TokenValueChips.js.flow

Sense UI components library

// @flow strict
import * as React from 'react';

import {elevationMenu} from '../../styles/variables/_elevation';
import {Chip} from '../Chip';
import {Tooltip} from '../Tooltip';


type Props<T> = {
  values: Array<T>,
  disabled?: boolean,
  locked?: boolean,
  onDismiss: (T) => mixed,
  resolveTokenValue?: (ResolveTokenValueProps<T>) => React.Node,
};

export type ResolveTokenValueProps<T> = {
  token: T,
  disabled?: boolean,
  onDismiss?: (T) => mixed,
  locked?: boolean,
};

function defaultResolveTokenValue<T>({
  token,
  disabled,
  onDismiss,
}: ResolveTokenValueProps<T>): React.Node {
  // $FlowFixMe[prop-missing] - assumes token has label and key

  return (
    // $FlowFixMe - assumes token has label and key
    <Tooltip body={token?.label} elevation={elevationMenu}>
      <Chip
        // $FlowFixMe - assumes token has key
        key={token?.key}
        onDismiss={(_) => onDismiss?.(token)}
        dismissable={true}
        semantic={'primary'}
        disabled={disabled}
      >
        {/* $FlowFixMe - assumes token has label */}
        {token?.label}
      </Chip>
    </Tooltip>
  );
}

export function TokenValueChips<T>(props: Props<T>): React.Node {
  const {
    values,
    disabled,
    locked,
    onDismiss,
    resolveTokenValue = defaultResolveTokenValue,
  } = props;

  return values.map((token) => {
    const resolvedTokenValue = resolveTokenValue({
      token,
      onDismiss,
      disabled,
      locked,
    });
    return resolvedTokenValue;
  });
}

TokenValueChips.displayName = 'TokenValueChips';