antd#Tag JavaScript Examples

export function renderFieldTags(record, onClick = () => undefined) {
    const {isColumn, isForm, isQuery} = record;
    const labelMap = {
        isColumn: '表格 orange',
        isQuery: '条件 green',
        isForm: '表单 purple',
    };
    return Object.entries({isColumn, isQuery, isForm}).map(([key, val]) => {
        const [label, color] = labelMap[key].split(' ');

        return (
            <Tag
                key={key}
                color={val ? color : '#ccc'}
                styleName="tag"
                onClick={() => {
                    record[key] = !record[key];
                    onClick(key);
                }}
            >
                {label}
            </Tag>
        );
    });
}

GlobalHeaderRight = props => {
  const { theme, layout } = props;
  let className = styles.right;

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

  return (
    <div className={className}>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      <SelectLang className={styles.action} />
    </div>
  );
}

function InfoItem(props) {
    const handleCorrection = () => {
        if (props.handleCorrection) {
            props.handleCorrection(props.info)
        }
    }

    let link_section = null
    const showCorrection = typeof (props.hideCorrection) === 'undefined' || props.hideCorrection === false
    if (props.info.isWeibo) {
        link_section = <>
            <a className="info-item-link" href={props.info.link} target="_blank" rel="noopener noreferrer">原微博</a>
            {showCorrection ? <Button type="link" className="info-item-link" onClick={handleCorrection}>纠错</Button> : null}
        </>
    }

    return <div className={ `info-item ${!props.info.isWeibo ? 'info-sheet-item' : ''}` }>
        <div className="info-item-content">{props.info.post}</div>
        <div className="info-item-footer">
            <label className="info-item-date">{props.info.formatTime || props.info.time}</label>
            {link_section}
            <div className="info-item-tag-list">
              <Tag color={props.info.color}>{props.info.category}</Tag>
                { props.info.types.length > 0 ? props.info.types.map(type => <Tag color={props.info.color} key={type}>{type}</Tag>) : null }
            </div>
        </div>
    </div>
}

columns = [
  {
    title: "Order_No",
    dataIndex: "order_no",
    key: "order_no",
    width: 200,
  },
  {
    title: "Price",
    dataIndex: "price",
    key: "price",
    width: 195,
    render: text => (`$${text}`),
  },
  {
    title: "Status",
    key: "tag",
    dataIndex: "tag",
    width: 100,
    render: (tag) => (
      <Tag color={tag === "pending" ? "magenta" : "green"} key={tag}>
        {tag}
      </Tag>
    ),
  },
]

render() {
    // const { list } = this.state
    let { value, separator } = this.props
    // 这里重置为 undefined 不能改变input的值
    value = value || ''
    separator = separator || ','
    const list = value.split(separator).filter(item => item !== '')
    return (
      <div>
        {/* <MyContext.Provider value="dark">
          context: {this.context}
        </MyContext.Provider>
        context: {this.context} / {MyContext._currentValue} */}
        <div className="d-input-container" onClick={this.containerClick}>
          {(list.length === 0 && this.state.showPlaceholder) && (<div className="d-input-placeholder">按回车键输入</div>)}
          <ul>
            {list.map((item, index) => (<li><Tag key={item} style={{ marginRight: 5, marginBottom: 5 }} closable onClose={e => this.closeTag(e, item)}>
              {item}
            </Tag></li>))}
            <li>
              <input ref={this.refInput} type="text" onKeyDown={this.inputKeyDown} onBlur={e => this.inputBlur(e)} />
            </li>
          </ul>
        </div>
      </div>
    )
  }

function TagDisplay({ actions, tags = [] }) {
  return (
    <>
      {tags &&
        tags.map(tag => (
          <Tag
            closable={true}
            key={tag}
            color="blue"
            onClose={() => actions.removeSelectedStream(tag)}
          >
            {tag}
          </Tag>
        ))}
    </>
  );
}

columns = [
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
    render: username => <span>{username}</span>
  },
  {
    title: "角色",
    key: "roles",
    dataIndex: "roles",
    render: roles => (
      <span>
        {roles.map(role => {
          let color = role === "admin" ? "geekblue" : "green";
          return (
            <Tag color={color} key={role}>
              {role.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
  {
    title: "是否停用",
    key: "isEnabled",
    render: ({ isEnabled }) => (
      <Switch
        disabled
        checkedChildren="停用"
        unCheckedChildren="启用"
        checked={isEnabled}
      />
    )
  }
]

render() {
    const { newTags, inputVisible, inputValue } = this.state;
    const { minder, tags } = this.props;
    let resourceList = getUsedResource(minder.getAllNode());
    let oldResource = resourceList.filter(
      (item) => newTags.indexOf(item) < 0 && tags.indexOf(item) < 0 && item !== 'undefined'
    );
    return (
      <div className="nodes-actions" style={{ width: 360, padding: '0px 4px' }}>
        <Tooltip
          title="选中节点后，单击添加标签，双击移除标签。"
          getPopupContainer={(triggerNode) => triggerNode.parentNode}
        >
          <div style={{ display: 'inline-block' }}>
            {tags && this.renderTags(tags, false)}
            {oldResource && this.renderTags(oldResource, false)}
            {newTags && this.renderTags(newTags, true)}
          </div>
        </Tooltip>
        {inputVisible && (
          <Input
            ref={this.saveInputRef}
            type="text"
            size="small"
            style={{ width: 78 }}
            value={inputValue}
            onChange={this.handleInputChange}
            onBlur={this.handleInputConfirm}
            onPressEnter={this.handleInputConfirm}
          />
        )}
        {!inputVisible && (
          <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
            <Icon type="plus" /> 增加标签
          </Tag>
        )}
      </div>
    );
  }

renderUserCreateEvent() {
    const { source, operation, metadata, user_name, app_name, zone_code } = this.props.data;
    let data = JSON.parse(metadata);

    return (
      <div style={{ lineHeight: '30px' }}>
        <Tag>{user_name}</Tag> 创建用户 <Tag>{data.username}</Tag> 权限为 <Tag>{data.access}</Tag>
      </div>
    );
  }

MemberInfoCard = ({ data }) => {
	return (
		<>
			<Card style={{ marginBottom: "4px" }}>
				<Row
					style={{
						alignItems: "center"
						//justifyContent: "space-between"
						//margin: "-10px"
					}}
				>
					<Col span={4}>
						<Avatar
							src={data.image}
							style={{ marginLeft: "8px" }}
						/>
					</Col>
					<Col
						span={data.type === "head" ? 14 : 16}
						style={{ fontSize: "14px" }}
					>
						{data.name}
					</Col>
					{data.type === "head" ? (
						<Col span={2}>
							<FaCrown />
						</Col>
					) : null}

					<Col>
						<Tag color="red">{data.role}</Tag>
					</Col>
				</Row>
			</Card>
		</>
	);
}

renderTags(tags) {
        let tagDocuments = []
        let tagArr = tags.split(',');
        for (let i = 0; i < tagArr.length; i++) {
            if (tags[i] === '-') {
                continue;
            }
            tagDocuments.push(<Tag key={tagArr[i]}>{tagArr[i]}</Tag>)
        }
        return tagDocuments;
    }

tipDoc = (
  <div className="title-container">
    <h3 className="title">
      使用文档 <Tag color="orange">推荐!</Tag>
    </h3>
    <p>
      初次使用 YApi，强烈建议你阅读{' '}
      <a target="_blank" href="https://hellosean1025.github.io/yapi/" rel="noopener noreferrer">
        使用文档
      </a>
      ，我们为你提供了通俗易懂的快速入门教程，更有详细的使用说明，欢迎阅读！{' '}
    </p>
  </div>
)

export function renderTags(record, onClick = () => undefined) {
    if (!record) return;

    const configMap = {
        listPage: '列表页 orange',
        query: '查询条件 gold',
        selectable: '可选中 lime',
        pagination: '分页 green',
        serialNumber: '序号 cyan',
        add: '添加 blue',
        operatorEdit: '编辑 geekblue',
        operatorDelete: '删除 red',
        batchDelete: '批量删除 red',
        modalEdit: '弹框编辑 purple',
        pageEdit: '页面编辑 purple',
    };

    return Object.entries(configMap).map(([key, value]) => {
        const enabled = record[key];
        let [label, color] = value.split(' ');
        if (!enabled) color = '#ccc';

        return (
            <Tag
                key={label}
                color={color}
                styleName="tag"
                onClick={() => {
                    let nextEnabled = !record[key];
                    if (key === 'listPage') {
                        Object.keys(configMap).forEach(k => {
                            if (k !== 'modalEdit' && k !== 'pageEdit') {
                                record[k] = nextEnabled;
                            }
                        });

                    } else if (key === 'modalEdit' && nextEnabled) {
                        record.modalEdit = true;
                        record.pageEdit = false;
                    } else if (key === 'pageEdit' && nextEnabled) {
                        record.pageEdit = true;
                        record.modalEdit = false;
                    } else {
                        record[key] = nextEnabled;
                        if (key !== 'modalEdit' && key !== 'pageEdit' && nextEnabled) {
                            record.listPage = true;
                        }
                    }
                    onClick(key);
                }}
            >
                {label}
            </Tag>
        );

    });
}

render() {
    const { children, disabled } = this.props;

    return (
      <Fragment>
        {children
        && children.map(item =>
          <Tag key={item} color="blue" disabled={disabled} closable afterClose={() => this.closeTag(item)}>{item}</Tag>
        )}
      </Fragment>
    );
  }

columns = (id) => [
  {
    title: 'Status',
    dataIndex: 'name',
    key: 'name',
    render: function StatusCol(text) {
      return (
        <Link href={`/queue/${id}/${text}`}>
          <a>{text}</a>
        </Link>
      );
    },
  },
  {
    title: 'Count',
    dataIndex: 'value',
    key: 'value',
    render: function CountCol(count, record) {
      return (
        <span>
          <Tag color={STATUS_COL_MAP[record.name] || null}>{count}</Tag>
        </span>
      );
    },
  },
]

HtxShortcutView = inject("store")(
  observer(({ item, store }) => {
    const bg = {
      background: chroma(item.background).alpha(0.15),
      color: "#333333",
      cursor: "pointer",
      margin: "5px",
    };

    return (
      <Tag
        {... (isFF(FF_DEV_1566) ? { "data-shortcut": true } : {})}
        onClick={(e) => {
          if (isFF(FF_DEV_1564_DEV_1565)) {
            e.preventDefault();
            e.stopPropagation();
          }
          item.onClick();
          return false;
        }}
        style={bg}
      >
        {item.alias ? item.alias : item._value}
        {store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && <Hint>[{item.hotkey}]</Hint>}
      </Tag>
    );
  }),
)

getNoticeData() {
    const { notices = [] } = this.props;
    if (notices.length === 0) {
      return {};
    }
    const newNotices = notices.map(notice => {
      const newNotice = { ...notice };
      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).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');
  }

render() {

        let tag_content = ""

        if("name" in this.state.data){
            tag_content += (this.state.data["name"] + " ");
        }

        if ("like_or_where" in this.state.data){
            if (this.state.data.hasOwnProperty("like_or_where")){
                if(this.state.data["like_or_where"] === "where"){
                    if("cond" in this.state.data){
                        tag_content += (this.state.data["cond"] + " ");
                    }else{
                        tag_content += ("= ");
                    }
                }else if(this.state.data["like_or_where"] === "like"){
                    tag_content += "like ";
                }
            }
        }

        if("value" in this.state.data){
            tag_content += (this.state.data["value"])
        }

        return(
                <Tag color="blue">
                    {tag_content}
                </Tag>
        );
    }

render() {
        return (
            <div>
                <Space
                    size="small"
                    direction="vertical"
                    style={{ width: "100%" }}
                >
                    <Tag color="#1890ff">type: string</Tag>
                    <HostKeyHeader
                        ref="hostKeyHeader"
                        redisKey={this.props.redisKey}
                        node={this.props.node}
                        deleteKey={this.props.deleteKey.bind(this)}
                        refreshValue={this.refreshValue.bind(this)}
                    ></HostKeyHeader>
                    <Form initialValues={{ ...this.initValues }} ref="form">
                        <Form.Item name="value">
                            <QuickMonacoEditor
                                height="60vh"
                                language="json"
                                saveValue={this.saveValue.bind(this)}
                            />
                        </Form.Item>
                    </Form>
                    <Button onClick={this.saveValue.bind(this)}>
                        {intl.get("common.save")}
                    </Button>
                </Space>
            </div>
        );
    }

getNoticeData() {
    const { notices = [] } = this.props;
    if (notices.length === 0) {
      return {};
    }
    const newNotices = notices.map(notice => {
      const newNotice = { ...notice };
      if (newNotice.datetime) {
        newNotice.datetime = moment(notice.datetime).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');
  }

renderManyToMany = (text) => {
  const color_arr = [
    'green',
    'cyan',
    'blue',
    'geekblue',
    'purple',
    'magenta',
    'red',
    'volcano',
    'orange',
    'gold',
    'lime',
  ];
  const child = [];
  let items = [];
  console.log(text);
  for (let key in text) {
    let value = text[key];
    let one = <Descriptions.Item>
      <Tag color={'blue'}>{value.ty_options_display_txt}</Tag>
    </Descriptions.Item>;
    items.push(one);
  }
  text.forEach((value, index, arr) => {
    if (index < 15) {
      child.push(<Col xs={24} sm={12} md={12} lg={8} xl={6} style={{paddingRight: 4, paddingTop: 4}}>
        <Tag
          color={color_arr[index % 10]}>
          <Ellipsis style={{overflow: 'visible'}} tooltip
                    length={25}>{value.ty_options_display_txt}</Ellipsis>
        </Tag>
      </Col>);
    } else if (index === 15) {
      child.push(<Popover trigger="click" content={<Descriptions>
        {items}
      </Descriptions>} title="多对多数据">
        <Col span={3} style={{paddingTop: 4}}>
          <Tag
            color={color_arr[index % 10]}>...
          </Tag>
        </Col>
      </Popover>);
    }
  });
  return <Row col={12}>{child}</Row>;
}

function UseBreakpointDemo() {
  const screens = useBreakpoint();
  return (
    <>
      Current break point:{' '}
      {Object.entries(screens)
        .filter(screen => !!screen[1])
        .map(screen => (
          <Tag color="blue" key={screen[0]}>
            {screen[0]}
          </Tag>
        ))}
    </>
  );
}

StyledTag = styled(Tag)`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0 0.75rem;
  color: ${({ theme }) => theme.textColor};
  font-weight: 500;
  background: ${({ theme }) => theme.darksecondary};
  border: none;
  border-radius: ${({ theme }) => theme.borderRadius};
`

{ CheckableTag } = Tag

expandedRowRender(experiment) {
    let runs = experiment.runs.map((run, i) => {
      return {
        key: i,
        date: run.created_at,
        name: run.uuid,
        operation: run
      }
    })

    const runColumns = [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Run', dataIndex: 'name', key: 'name' },
      {
        title: 'Status',
        key: 'state',
        render: () => (
          <span>
            <Badge status="success" />
            Finished
          </span>
        ),
      },
      { title: 'Tags', dataIndex: 'tags', key: 'tags', render: () => <Tag>Qiskit</Tag> },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: (run) => (
          <Space size="middle">
            <a onClick={() => {
              this.setState({...this.state, run: run})
            }}>View</a>
            <a>Rerun</a>
          </Space>
        ),
      },
    ];
  
    return <Table 
                columns={runColumns}
                dataSource={runs} 
                pagination={false} />;
  }

render() {
    const { left, top, menuVisible } = this.state;
    const { taglist, history } = this.props;
    const currentPath = history.location.pathname;
    return (
      <>
        <Scrollbars
          autoHide
          autoHideTimeout={1000}
          autoHideDuration={200}
          hideTracksWhenNotNeeded={true}
          renderView={(props) => (
            <div {...props} className="scrollbar-container" />
          )}
          renderTrackVertical={(props) => (
            <div {...props} className="scrollbar-track-vertical" />
          )}
        >
          <ul className="tags-wrap" ref={this.tagListContainer}>
            {taglist.map((tag) => (
              <li key={tag.path}>
                <Tag
                  onClose={this.handleClose.bind(null, tag)}
                  closable={tag.path !== "/dashboard"}
                  color={currentPath === tag.path ? "geekblue" : "gold"}
                  onClick={this.handleClick.bind(null, tag.path)}
                  onContextMenu={this.openContextMenu.bind(null, tag)}
                >
                  {tag.title}
                </Tag>
              </li>
            ))}
          </ul>
        </Scrollbars>
        {menuVisible ? (
          <ul
            className="contextmenu"
            style={{ left: `${left}px`, top: `${top}px` }}
            ref={this.contextMenuContainer}
          >
            <li onClick={this.handleCloseOtherTags}>关闭其他</li>
            <li onClick={this.handleCloseAllTags}>关闭所有</li>
          </ul>
        ) : null}
      </>
    );
  }

render() {
    const { dataSource, page, labalWidth } = this.state
    const { getFieldDecorator } = this.props.form
    const columns = [
      { title: 'id', align: 'center', dataIndex: 'id', sorter: (a, b) => a.id - b.id },
      {
        title: 'Rule ID',
        align: 'center',
        dataIndex: 'rule_id',
        render: ruleId => (<Link to={`/rules?id=${ruleId}`}>{ruleId}</Link>),
      },
      { title: '报警值', align: 'center', dataIndex: 'value' },
      {
        title: '当前状态',
        align: 'center',
        dataIndex: 'status',
        render: status => (
          <span>{status === 2 ? '报警' : status === 0 ? '恢复' : '已确认'}</span>
        ),
      },
      {
        title: '异常分钟数',
        align: 'center',
        dataIndex: 'count',
        render: count => (
          <span>{count+1}</span>
        ),
      },
      { title: '标题', align: 'center', dataIndex: 'summary', width: 100 },
      {
        title: 'label',
        align: 'center',
        dataIndex: 'labels',
        width: labalWidth,
        render: (labels) => {
          if (labels && Object.prototype.toString.call(labels) === '[object Object]') {
            return Object.keys(labels).map(key => <Tag color="cyan" style={{ marginTop: '5px' }}>{key}: {labels[key]}</Tag>)
          }
          return '-'
        },
      },
      { title: '描述', align: 'center', dataIndex: 'description' },
      { title: '确认人', align: 'center', dataIndex: 'confirmed_by' },
      {
        title: '触发时间',
        align: 'center',
        dataIndex: 'fired_at',
        width: tableTimeWidth,
        render: firedAt => (
          <span>{firedAt === '0001-01-01T00:00:00Z' ? '--' : moment(firedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认时间',
        align: 'center',
        dataIndex: 'confirmed_at',
        width: tableTimeWidth,
        render: confirmedAt => (
          <span>{confirmedAt === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '确认截止时间',
        align: 'center',
        dataIndex: 'confirmed_before',
        width: tableTimeWidth,
        render: confirmedBefore => (
          <span>{confirmedBefore === '0001-01-01T00:00:00Z' ? '--' : moment(confirmedBefore).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
      {
        title: '恢复时间',
        align: 'center',
        dataIndex: 'resolved_at',
        width: tableTimeWidth,
        render: resolvedAt => (
          <span>{resolvedAt === '0001-01-01T00:00:00Z' ? '--' : moment(resolvedAt).format('YYYY.MM.DD HH:mm:ss')}</span>
        ),
      },
    ]
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="标题">
            {getFieldDecorator('summary', {})(<Input placeholder="请输入标题" />)}
          </Form.Item>
          <Form.Item label="状态">
            {getFieldDecorator('status', {
              initialValue: -1,
            })(<Select>
              <Option value={-1}>所有</Option>
              <Option value={0}>恢复</Option>
              <Option value={1}>已确认</Option>
              <Option value={2}>报警</Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="报警时间" style={{ marginBottom: 0 }}>
            <Form.Item style={{ marginRight: 0 }}>
              {getFieldDecorator('timestart', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警开始时间"
              />)}
            </Form.Item>
            <span style={{ width: '24px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>~</span>
            <Form.Item style={{ marginBottom: 0 }}>
              {getFieldDecorator('timeend', {})(<DatePicker
                format="YYYY-MM-DD HH:mm:ss"
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                placeholder="报警结束时间"
              />)}
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
        <Table dataSource={dataSource} columns={columns} pagination={false} scroll={{ x: 1300 }} rowKey="id" />
        <div style={{ display: 'flex', justifyContent: 'flex-end', paddingTop: '15px' }}>
          <Pagination onChange={this.pageChange} current={page.current} pageSize={page.size} total={page.total} />
        </div>
      </div>
    )
  }

function InfoEvent(props) {

  const { evento } = props

  const dataEvent = [ 

  	{
  		data: evento.company,
  		description: "Comunidade"
  	},
  	{
  		data: evento.startDate,
  		description: "Data de Inicio"
  	},
  	{
  		data: evento.finishDate,
  		description: "Data de Encerramento"
  	},
  	{
  		data: evento.workload,
  		description: "Carga Horária"
  	},
	  
	];

  return (
  	<>
	  	<div className="up-info">
	  		
	  	</div>
	    <div className="list-info">
		  <Divider orientation="left">{evento.course}</Divider>
		    <List
		      header={<div>Informações do evento</div>}
		      bordered
		      dataSource={dataEvent}
		      renderItem={dataEvent => (
		        <List.Item>
		          <Tag color="default">{dataEvent.description}</Tag>{dataEvent.data}
		        </List.Item>
		      )}
		    />
	    </div>
	</>
  );
}

Tags = styled(Tag)`
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 25px;
    &:hover {
      cursor: pointer;
    }
`