antd#Tag TypeScript Examples

render() {
    return (
      <div className={styles.filterList}>
        {
          this.items.map((item: CaptionValuePair) => {
            return item.value != null
              ? <ListItemTag item={item} onClose={this.handleClose} key={item.value}/>
              : null;
          })
        }
        {this.inputVisible && (
          <Form.Item className={classNames(
            styles.filterListInput,
            styles.filterControl
          )}>
            {this.input}
          </Form.Item>
        )}
        {!this.inputVisible && (
          <Tag onClick={this.showInput}
             color='blue'
             className={styles.filterListNew}
          >
            <PlusOutlined />
            &nbsp;
            <FormattedMessage id='jmix.dataTable.listEditor.addItem'/>
          </Tag>
        )}
      </div>
    );
  }

CouponTag: FC<PropTypes> = props => {
  const { label, color, tooltip } = props;

  return (
    <Tooltip title={tooltip} placement="bottom">
      <Tag color={color}>
        {label}
        <Icon
          type="question-circle"
          theme="twoTone"
          style={{ marginLeft: 3 }}
        />
      </Tag>
    </Tooltip>
  );
}

PropertyTag = ({ name, handleRemove }: PropertyTagProps): JSX.Element => (
    <Tag
        key={name}
        closable
        onClose={(): void => handleRemove(name)}
        style={{
            margin: '0.25rem',
            padding: '0.25rem 0.5em',
            background: '#D9D9D9',
            border: '1px solid #D9D9D9',
            borderRadius: '40px',
            fontSize: 'inherit',
        }}
    >
        {name}
    </Tag>
)

AddButton: React.FC<{ disabled: boolean }> = React.memo(({ disabled }) => {
  const { t } = useTranslation(I18nKey);
  const [open, setOpen] = useState(false);

  return (
    <Dropdown
      overlay={open ? <FilterForm onCancel={() => setOpen(false)} /> : <div />}
      trigger={["click"]}
      disabled={disabled}
      visible={open}
      overlayStyle={{ zIndex: 1010 }}
      onVisibleChange={(visible) => setOpen(visible)}
    >
      <Tag className="ant-ext-sb__addFilter">{t("label.add")}</Tag>
    </Dropdown>
  );
})

checkboxModify: YFormFieldBaseProps<CheckboxProps>['modifyProps'] = ({
  itemProps,
  componentProps,
}) => {
  const { children } = componentProps;
  return {
    itemProps: {
      valuePropName: 'checked',
      viewProps: {
        format: (value, pureValue) => {
          if (pureValue) {
            return !!value;
          }
          return value ? <Tag>{children}</Tag> : noData;
        },
      },
      ...itemProps,
    },
  };
}

defaultValueItemRender = (
  item: IOption,
  deleteValue: (item: IOption) => void,
  isMultiple?: boolean,
  list?: IOption[],
) => {
  const value =
    get(
      find(list, (cItem) => `${cItem.value}` === `${item.value}`),
      'label',
    ) ||
    item.label ||
    item.value;
  return isMultiple ? (
    <Tag key={item.value} size="small" closable onClose={() => deleteValue(item)}>
      {value}
    </Tag>
  ) : (
    value
  );
}

ConnectStatus: React.FC<IProps> = (props: IProps) => {
  const { status, confirmToSync, syncLocal, projectName } = props;

  // life
  useEffect(() => {
    confirmToSync();
    const timer = setInterval(syncLocal, PULSE_RATE);
    return () => clearInterval(timer);
  }, []);

  let tagText = '本地连接失败';
  if (status === Status.connected) {
    tagText = [projectName, '本地连接成功'].join(' ');
  }

  return (
    <div className={styles.container}>
      <Tag color={status}>{tagText}</Tag>
    </div>
  );
}

ListContent = ({ data: { members, state, createTime } }: { data: TenantItem }) => (
  <div className={styles.listContent}>
    <div className={styles.listContentItem}>
      <span>状态</span>
      <p>
        <Tag color={state.value === 'enabled' ? '#87d068' : '#F50'}>{state.text}</Tag>
      </p>
    </div>
    <div className={styles.listContentItem}>
      <span>成员数</span>
      <p>
        <Tag color="#87d068">{members}</Tag>
      </p>
    </div>
    <div className={styles.listContentItem}>
      <span>创建时间</span>
      <p>{moment(createTime).format('YYYY-MM-DD HH:mm')}</p>
    </div>
  </div>
)

TaskState: React.FC<any> = (props) => {
  let state = props.state;
  let retries = props.retries;
  let note = props.note;
  let v = note ? `${state} [${note}]` : state;
  v = retries ? `${v} (${retries})` : v;
  return (
    <Tag color={statusColorMap[state]} key={state}>
      {v}
    </Tag>
  );
}

ColorTag: React.FC<IColorTagProps> = ({ text, ...props }) => {
  const { t } = useTranslation();
  const sumCharCode: number = Array.from(text).reduce<number>(
    (prev: number, item: string) => {
      return prev + item.charCodeAt(0);
    },
    0,
  );
  return (
    <Tag color={'blue'} {...props}>
      {text}
    </Tag>
  );
}

private renderHeadView(downloader: DownloadLogic): React.ReactNode {
        const { t } = this.props
        const shouldDisplaySpaceTag = (
            typeof this.state.space === "number" &&
            typeof this.state.availableSpace === "number"
        );
        return (
            <div className="page-history-head">
                <div className="page-history-head-left">
                    <Link to={"/"}>
                        <div className="page-history-back">
                            <LeftOutlined /> <div>{t('back')}</div>
                        </div>
                    </Link>
                    {shouldDisplaySpaceTag && <Tag
                        color={"blue"}
                        style={{marginLeft: 8}}>{this.state.space}(mb) / {this.state.availableSpace}(mb)
                    </Tag>}
                </div>
                <div>
                    {this.renderAddTaskButton(downloader)}
                    {this.renderDownloadOneByOneButton(downloader)}
                    {this.renderCleanAllCacheButton(downloader)}
                </div>
            </div>
        );
    }

UserRole: React.FC<Props> = (props) => {
  let color: string
  let level = 'unknown'
  const css: CSSProperties = {}

  if (props.roles.includes('superuser')) {
    color = 'red'
    level = 'superuser'
  } else if (props.roles.includes('admin')) {
    color = 'orange'
    level = 'admin'
  } else if (props.roles.includes('user')) {
    color = '#F0F0F0'
    css.color = '#AAA'
    level = 'user'
  }

  return (
    <Tag color={color} style={css}>
      {level.toUpperCase()}
    </Tag>
  )
}

GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div className={className}>
      <Tooltip title="使用帮助">
        <a
          style={{
            color: 'inherit',
          }}
          target="_blank"
          href="https://www.openscrm.cn"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip>
      <StaffAdminAvatarDropdown menu={true} />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </div>
  );
}

AppFooter: React.FC = () => {
  const { t } = useTranslation();
  const { theme } = React.useContext(PreferencesContext);

  const donateColor =
    theme === Theme.DARK ? TwoToneColors.DONATE_DARK : TwoToneColors.DONATE;

  return (
    <Footer style={{ textAlign: "center" }}>
      <div>
        <a
          href="https://github.com/running-coder/nanolooker"
          rel="noopener noreferrer"
          target="_blank"
        >
          <GithubOutlined /> NanoLooker
        </a>{" "}
        ©{new Date().getFullYear()}{" "}
        {t("footer.createdBy", { creator: "RunningCoder" })}
      </div>

      <QRCodeModal
        account={DONATION_ACCOUNT}
        header={<Text>{t("footer.donations.title")}</Text>}
      >
        <Tag
          color={donateColor}
          icon={<HeartTwoTone twoToneColor={donateColor} />}
          style={{ cursor: "pointer", marginTop: "6px" }}
        >
          {t("footer.donations.donate")}
        </Tag>
      </QRCodeModal>
    </Footer>
  );
}

DownloadFileItem: FC<DownloadFileItemProps> = ({
  onDownloadFile,
  children,
  ...restProps
}) => {
  const { name, status } = restProps;
  const t = useI18NPrefix('main.nav.download.status');
  const { color, tagName, titleClasses } = useMemo(() => {
    const titleClasses = ['download-file-name'];
    if (status === DownloadTaskState.DOWNLOADED) {
      titleClasses.push('downloaded');
    } else if (status === DownloadTaskState.DONE) {
      titleClasses.push('finished');
    }
    return {
      color: DOWNLOAD_STATUS_COLORS[status],
      tagName: t(DownloadTaskState[status].toLowerCase()),
      titleClasses: titleClasses.join(' '),
    };
  }, [status, t]);
  return (
    <DownloadFileItemWrapper>
      <span className={titleClasses} onClick={() => onDownloadFile(restProps)}>
        {name}
      </span>
      {tagName ? <Tag color={color}>{tagName}</Tag> : null}
    </DownloadFileItemWrapper>
  );
}

StatusTag = styled(Tag)`
  width: 96px;
  text-align: center;
  float: right;
  margin-right: 0;
  border: 1px solid;
  box-sizing: border-box;
  border-radius: 4px;
`

PersonPropertySelect = ({ onChange, selectedProperties }: PersonPropertySelectProps): JSX.Element => {
    const { open, toggle, hide } = usePopup()

    const handleChange = (name: string): void => {
        onChange(Array.from(new Set(selectedProperties.concat([name]))))
    }

    const handleRemove = (name: string): void => {
        onChange(selectedProperties.filter((p) => p !== name))
    }

    return (
        <div style={{ marginBottom: 16 }}>
            {selectedProperties.length > 0 &&
                selectedProperties.map((name) => {
                    return (
                        <Tag
                            key={name}
                            closable
                            onClose={(): void => handleRemove(name)}
                            style={{
                                margin: '0.25rem',
                                padding: '0.25rem 0.5em',
                                background: '#D9D9D9',
                                border: '1px solid #D9D9D9',
                                borderRadius: '40px',
                                fontSize: 'inherit',
                            }}
                        >
                            {name}
                        </Tag>
                    )
                })}

            <Popup
                visible={open}
                onClickOutside={() => hide()}
                overlay={
                    <TaxonomicFilter
                        onChange={(_, value) => {
                            handleChange(value as string)
                            hide()
                        }}
                        taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties]}
                    />
                }
            >
                {({ setRef }) => (
                    <Button
                        ref={setRef}
                        onClick={() => toggle()}
                        type="link"
                        className="new-prop-filter"
                        icon={<PlusCircleOutlined />}
                    >
                        Add exclusion
                    </Button>
                )}
            </Popup>
        </div>
    )
}

export default function TaskStatus({ task, programId }) {
  const taskMutation = useEditTaskMutation({
    taskId: task.taskId,
    programId,
    projectId: task.projectId,
  })
  const menu = (
    <Menu>
      {Object.values(TaskStatuses).map((status) => (
        <Menu.Item
          key={status}
          style={{
            backgroundColor:
              status !== task.status ? 'transparent' : '#eee',
          }}
        >
          <Button
            type="text"
            onClick={() => {
              if (status !== task.status)
                taskMutation.mutate({ ...task, status })
            }}
          >
            <Tag color={statusMeta[status].bgColor}>
              {statusMeta[status].label}
            </Tag>
          </Button>
        </Menu.Item>
      ))}
    </Menu>
  )

  return (
    <Dropdown overlay={menu}>
      <Tag
        style={{ cursor: 'pointer' }}
        color={statusMeta[task.status].bgColor}
      >
        {taskMutation.isLoading ? (
          <LoadingOutlined />
        ) : (
          statusMeta[task.status].label
        )}
      </Tag>
    </Dropdown>
  )
}

TagPicker: React.FC<AnyObject> = ({
  value,
  onChange,
  onVisibleChange,
  readOnly,
  disabled,
  pickerEl: E
}) => {
  const {
    i18n: { language }
  } = useTranslation(I18nKey);

  const refDropdown = useRef<typeof Popover>(null);
  const [visible, setVisible] = useState(false);

  const [_value, setValue] = useState(value);

  const isDisabled = useMemo(() => disabled || readOnly, [disabled, readOnly]);

  useEffect(() => {
    setValue(value);
  }, [value]);
  const doUpdate = useCallback(
    (v: DateValue) => {
      setValue(v);
      setVisible(false);
      onChange && onChange(v);
    },
    [onChange]
  );

  const toggleVisible = useCallback(
    (v) => {
      if (!isDisabled) {
        setVisible(v);
        onVisibleChange && onVisibleChange(v);
      }
    },
    [onVisibleChange, isDisabled]
  );
  const displayLabel = useMemo(
    () => (value && !!language ? parseDateLabel(value.toString()) : ""),
    [value, language]
  );

  return (
    <I18nextProvider i18n={i18next}>
      <Tooltip overlayClassName="ant-ext-sd__tooltip" title={DateUtils.toString(_value)}>
        <Popover
          ref={refDropdown}
          visible={visible}
          destroyTooltipOnHide
          onVisibleChange={toggleVisible}
          overlayClassName="ant-ext-sd__popover"
          content={!readOnly && <E dropdown={refDropdown} value={value} onChange={doUpdate} />}
          trigger="click"
          placement="bottomLeft"
        >
          <Tag
            color="blue"
            icon={<FieldTimeOutlined />}
            className="ant-ext-sd__tag"
            data-testid="input-el"
          >
            {displayLabel}
          </Tag>
        </Popover>
      </Tooltip>
    </I18nextProvider>
  );
}

export function IllustrationCard({
  name,
  category,
  style,
  title,
  color,
}: IllustrationCardProps): React.ReactElement {
  const [loading, setLoading] = useState(true);
  const theme = useCurrentTheme();
  const image = useMemo(() => {
    const src = getIllustration({ name, category, theme });

    return (
      <>
        <img
          src={src}
          className={styles.imgCss}
          onLoad={() => setLoading(false)}
        />
      </>
    );
  }, [name, category, theme]);

  const handleCopy = (text: string) => {
    message.success(`\`${text}\` copied ?`);
  };

  const renderTag = <Tag color={color}>{category}</Tag>;
  return (
    <Clipboard
      text={`${JSON.stringify({ name, category })}`}
      onCopy={handleCopy}
    >
      <Card
        cover={image}
        hoverable
        style={style}
        loading={loading}
        className={styles.illustrationCard}
      >
        <Card.Meta title={name} description={renderTag} />
      </Card>
    </Clipboard>
  );
}

// 处理 columns 配置，有些字段需要宣传出链接
function parseColumns(columns: ColumnsType): ColumnsType<never> {
    return columns.map((item: any) => {
        if (item.title === '查看网页') {
            return {
                ...item,
                render: (id: string, row: any) => {
                    const { uuid, status } = row
                    if (status !== '2') return '' // 不是发布状态

                    const url = `${H5Host}/p/${id}-${uuid}?channel=0`
                    return (
                        <a href={url} target="_blank">
                            线上链接
                        </a>
                    )
                },
            }
        }
        if (item.title === '缩略图') {
            return {
                ...item,
                render: (src: string) => {
                    if (!src) return ''
                    return (
                        <a href={src} target="_blank">
                            查看缩略图
                        </a>
                    )
                },
            }
        }
        if (item.title === '标签') {
            return {
                ...item,
                render: (id, record: any) => (
                    <div>
                        {record.isHot && <Tag color="red">HOT</Tag>}
                        {record.isNew && <Tag color="green">NEW</Tag>}
                    </div>
                ),
            }
        }
        return item
    }) as ColumnsType<never>
}

getNoticeData = (): Record<string, NoticeItem[]> => {
    const { notices = [] } = this.props;

    if (!notices || notices.length === 0 || !Array.isArray(notices)) {
      return {};
    }

    const newNotices = notices.map((notice) => {
      const newNotice = { ...notice };

      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime as string).fromNow();
      }

      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }

      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag
            color={color}
            style={{
              marginRight: 0,
            }}
          >
            {newNotice.extra}
          </Tag>
        );
      }

      return newNotice;
    });
    return groupBy(newNotices, 'type');
  };

GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
  const { theme, layout, dispatch } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }
  const fetchData = () => {
    if (dispatch) {
      dispatch({
        type: 'global/fetchNotices',
        payload: encodeQueryParam({
          terms: { state: 'unread' }
        })
      });
    }
  }
  return (
    <div className={className}>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder={formatMessage({
          id: 'component.globalHeader.search',
        })}
        defaultValue="umi ui"
        dataSource={[
          formatMessage({
            id: 'component.globalHeader.search.example1',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example2',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example3',
          }),
        ]}
        onSearch={() => { }}
        onPressEnter={() => { }}
      /> */}
      <Tooltip title="使用文档">
        <a
          target="_blank"
          href="http://doc.jetlinks.cn/"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <Icon type="question-circle-o" />
        </a>
      </Tooltip>
      <span onClick={() => { fetchData() }}>
        <NoticeIconView />
      </span>
      <Avatar />
      {REACT_APP_ENV && <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>}
      {/* <SelectLang className={styles.action} /> */}
    </div>
  );
}

getNoticeData = (): {
    [key: string]: NoticeItem[];
  } => {
    const { notices = [] } = this.props;

    if (!notices || notices.length === 0 || !Array.isArray(notices)) {
      return {};
    }

    const newNotices = notices.map((notice) => {
      const newNotice = { ...notice };

      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime as string).fromNow();
      }

      if (newNotice.id) {
        newNotice.key = newNotice.id;
      }

      if (newNotice.extra && newNotice.status) {
        const color = {
          todo: '',
          processing: 'blue',
          urgent: 'red',
          doing: 'gold',
        }[newNotice.status];
        newNotice.extra = (
          <Tag
            color={color}
            style={{
              marginRight: 0,
            }}
          >
            {newNotice.extra}
          </Tag>
        );
      }

      return newNotice;
    });
    return groupBy(newNotices, 'type');
  };

function LastTaskStatus({ sourceId }) {
  const services = useServices()
  const {
    error,
    data: task,
    isLoading,
  } = useLoaderAsObject(async () => {
    let tasks = await services.backendApiClient.get("/tasks", {
      proxy: true,
      urlParams: {
        project_id: services.activeProject.id,
        source: `${services.activeProject.id}.${sourceId}`,
        end: new Date().toISOString(),
        start: moment().subtract(90, "days").toISOString(),
        limit: 100,
      },
    })
    const tasksSorted = tasks.tasks.sort(comparator<Task>(t => new Date(t.finished_at)))
    return tasksSorted?.[0]
  })

  if (isLoading) {
    return <Skeleton active title={false} paragraph={{ rows: 1, width: ["100%"] }} className="w-full" />
  }
  //workaround: "doesn't exist" really means no tasks
  if (!task?.status && (error?.message || "").indexOf("doesn't exist")) {
    return (
      <Tooltip overlay={<>This connector hasn't been started yet</>}>
        <Tag color="default">NO RUNS</Tag>
      </Tooltip>
    )
  }
  if (error) {
    return <Tag color="error">ERROR !</Tag>
  }
  const date = task.finished_at ? moment.utc(task.finished_at) : null
  const now = moment.utc(new Date().toISOString())

  return (
    <span>
      <NavLink
        to={projectRoute(sourcesPageRoutes.task, {
          sourceId: sourceId,
          taskId: TaskId.encode(task.id),
        })}
      >
        <Tag color={task.status === "SUCCESS" ? "success" : "error"}>{task.status.toUpperCase()}</Tag>
        <a className="text-xs text-secondaryText underline">{date?.from(now)}</a>
      </NavLink>
    </span>
  )
}

function IndicesData() {
  return [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (name) => {
        return (
          <Space direction="horizontal">
            <Text strong>{name}</Text>
          </Space>
        );
      },
    },
    {
      title: "Docs count",
      dataIndex: "docs_count",
      key: "docs_count",
      render: (docs_count) => {
        return <Tag>{docs_count}</Tag>;
      },
    },
    {
      title: "Store size",
      dataIndex: "size",
      key: "size",
      render: (size) => {
        return <Tag>{size}</Tag>;
      },
    },
    {
      title: "Total indexed",
      dataIndex: "index_total",
      key: "index_total",
      render: (index_total) => {
        return <Tag>{index_total}</Tag>;
      },
    },
    {
      title: "Index time",
      dataIndex: "index_time",
      key: "index_time",
      render: (index_time) => {
        return <Tag>{index_time}</Tag>;
      },
    },
  ];
}

export function ListingDetails({ listing }: ListingDetailProps) {
    const {
        title,
        description,
        image,
        type,
        address,
        city,
        numOfGuests,
        host,
    } = listing;

    return (
        <div className="listing-details">
            <div
                style={{ backgroundImage: `url(${image})` }}
                className="listing-details__image"
            />

            <div className="listing-details__information">
                <Paragraph
                    type="secondary"
                    ellipsis
                    className="listing-details__city-address"
                >
                    <NavLink to={`/listings/${city}`}>
                        <EnvironmentOutlined style={{ color: iconColor }} />{" "}
                        {city}
                    </NavLink>
                    <Divider type="vertical" />
                    {address}
                </Paragraph>
                <Title level={3} className="listing-details__title">
                    {title}
                </Title>
            </div>

            <Divider />

            <div className="listing-details__section">
                <NavLink to={`/user/${host.id}`}>
                    <Avatar src={host.avatar} size={64} />
                    <Title level={2} className="listing-details__host-name">
                        {host.name}
                    </Title>
                </NavLink>
            </div>

            <Divider />

            <div className="listing-details__section">
                <Title level={4}>About this space</Title>
                <div className="listing-details__about-items">
                    <Tag color="magenta">{type}</Tag>
                    <Tag color="magenta">{numOfGuests} Guests</Tag>
                </div>
                <Paragraph ellipsis={{ rows: 3, expandable: true }}>
                    {description}
                </Paragraph>
            </div>
        </div>
    );
}

render() {
    const { curComparison } = this.state;
    const handleClick = (e) => {
      const index = this.state.curComparison.findIndex(cc => cc === e.key)
      let newCurComparison
      if (index === -1) {
        newCurComparison = [
          ...this.state.curComparison,
          e.key
        ]
        this.setState({
          curComparison: newCurComparison
        })
      } else {
        let curComparisonCopy = [...this.state.curComparison]
        curComparisonCopy.splice(index, 1)
        newCurComparison = curComparisonCopy
        this.setState({
          curComparison: curComparisonCopy
        })
      }
      const { onChange, relativeTimeComparison, comparisonOptions } = this.props;
      onChange({
        ...this.refresh(),
        comparison: newCurComparison,
        relativeTimeComparison,
        comparisonOptions,
      });
    }
    const menu = (
      <Menu onClick={handleClick} selectedKeys={curComparison}>
        <Menu.Item key='1d'>1d</Menu.Item>
        <Menu.Item key='7d'>7d</Menu.Item>
      </Menu>
    )
    return (
      <div className="graph-config-inner-comparison">
        {/* <Select
          dropdownMatchSelectWidth={false}
          mode="multiple"
          style={{ minWidth: 80, width: 'auto', verticalAlign: 'middle' }}
          value={curComparison}
          onChange={this.handleComparisonChange}>
          <Option key={'1d'} value={'1d'}>1天</Option>
          <Option key={'7d'} value={'7d'}>7天</Option>
        </Select> */}
        {this.state.curComparison.map(cc =>
          <Tag key={cc} closable onClose={e => {
            handleClick({key: cc})
          }}>
            {cc}
          </Tag>
        )}
        <Dropdown overlay={menu}>
          <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            <PlusCircleOutlined />
          </a>
        </Dropdown>
      </div>
    );
  }

displayValue(raw: string): JSX.Element {
    if (this.parseValue(raw)) {
      return <Tag color={'green'}>YES</Tag>
    } else {
      return <Tag color={'red'}>NO</Tag>
    }
  }