antd#Tooltip JavaScript Examples

The following examples show how to use antd#Tooltip. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From acy-dex-interface with MIT License 6 votes vote down vote up
Item = ({ src, size, tips, onClick = () => {} }) => {
  const cls = avatarSizeToClassName(size);

  return (
    <li className={cls} onClick={onClick}>
      {tips ? (
        <Tooltip title={tips}>
          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
        </Tooltip>
      ) : (
        <Avatar src={src} size={size} />
      )}
    </li>
  );
}
Example #2
Source File: WhyIcon.js    From dexwebapp with Apache License 2.0 6 votes vote down vote up
WhyIcon = ({ text, color, description }) => {
  const theme = useContext(ThemeContext);
  let title = (
    <div>
      <div>
        <I s={text} />
      </div>
      {description && (
        <div
          style={{
            paddingTop: '8px',
          }}
        >
          <I s={description} />
        </div>
      )}
    </div>
  );

  return (
    <Tooltip placement="bottom" title={title}>
      <FontAwesomeIcon
        style={{
          color: color ? color : theme.primary,
          marginLeft: '8px',
          height: '11px',
          width: '11px',
        }}
        icon={faQuestionCircle}
      />
    </Tooltip>
  );
}
Example #3
Source File: index.jsx    From react-antd-admin-template with MIT License 6 votes vote down vote up
FullScreen = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const change = () => {
    setIsFullscreen(screenfull.isFullscreen);
  };

  useEffect(() => {
    screenfull.isEnabled && screenfull.on("change", change);
    return () => {
      screenfull.isEnabled && screenfull.off("change", change);
    };
  }, []);

  const title = isFullscreen ? "取消全屏" : "全屏";
  const type = isFullscreen ? "fullscreen-exit" : "fullscreen";
  return (
    <div className="fullScreen-container">
      <Tooltip placement="bottom" title={title}>
        <Icon type={type} onClick={click} />
      </Tooltip>
    </div>
  );
}
Example #4
Source File: index.js    From online-test-platform with Apache License 2.0 6 votes vote down vote up
MiniProgress = ({
  targetLabel,
  target,
  color = 'rgb(19, 194, 194)',
  strokeWidth,
  percent,
}) => {
  return (
    <div className={styles.miniProgress}>
      <Tooltip title={targetLabel}>
        <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
          <span style={{ backgroundColor: color || null }} />
          <span style={{ backgroundColor: color || null }} />
        </div>
      </Tooltip>
      <div className={styles.progressWrap}>
        <div
          className={styles.progress}
          style={{
            backgroundColor: color || null,
            width: percent ? `${percent}%` : null,
            height: strokeWidth || null,
          }}
        />
      </div>
    </div>
  );
}
Example #5
Source File: Label.js    From bonded-stablecoin-ui with MIT License 6 votes vote down vote up
Label = ({
  label,
  descr,
  required = false,
  type = "attention",
}) => {
  return (
    <span style={{ display: "flex", alignItems: "center" }}>
      <span style={{ paddingRight: 5 }}>
        {label}
        {required && <span style={{ color: "red" }}>*</span>}
      </span>
      <Tooltip title={descr}>
        <InfoCircleOutlined />
      </Tooltip>
    </span>
  );
}
Example #6
Source File: PriorityGroup.js    From AgileTC with Apache License 2.0 6 votes vote down vote up
render() {
    const { minder, priority = [1, 2, 3], isLock } = this.props;
    let disabled = minder.getSelectedNodes().length === 0;
    if (isLock) disabled = true;
    return (
      <div className="nodes-actions" style={{ width: 120 }}>
        <Tooltip title="移除优先级" getPopupContainer={(triggerNode) => triggerNode.parentNode}>
          <Button
            type="link"
            size="small"
            disabled={disabled}
            style={{ padding: 4, height: 28 }}
            onClick={() => this.handleAction()}
          >
            <Icon
              type="minus-circle"
              theme="filled"
              style={{ fontSize: '18px', color: 'rgba(0, 0, 0, 0.6)' }}
            />
          </Button>
        </Tooltip>
        {priority &&
          priority.map((item) => {
            return (
              <Button
                key={item}
                type="link"
                size="small"
                disabled={disabled}
                className={`priority-btn p${item}`}
                onClick={() => this.handleAction(item)}
              >
                P{item - 1}
              </Button>
            );
          })}
      </div>
    );
  }
Example #7
Source File: Label.js    From YApi-X with MIT License 6 votes vote down vote up
render() {
    return (
      <div>
        {this.props.desc && (
          <div className="component-label">
            {!this.state.inputShow ? (
              <div>
                <p>
                  {this.props.desc} &nbsp;&nbsp;
                  <Tooltip title="编辑简介">
                    <Icon onClick={this.toggle} className="interface-delete-icon" type="edit" />
                  </Tooltip>
                </p>
              </div>
            ) : (
              <div className="label-input-wrapper">
                <Input onChange={this.handleChange} defaultValue={this.props.desc} size="small" />
                <Icon
                  className="interface-delete-icon"
                  onClick={() => {
                    this.props.onChange(this.state.inputValue);
                    this.toggle();
                  }}
                  type="check"
                />
                <Icon className="interface-delete-icon" onClick={this.toggle} type="close" />
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
Example #8
Source File: index.js    From gobench with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <div>
        <div className="row">
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Basic</strong>
            </h5>
            <div className="mb-5">
              <Tooltip placement="topLeft" title="Prompt Text">
                <Button>Align edge</Button>
              </Tooltip>
            </div>
          </div>
          <div className="col-lg-6">
            <h5 className="mb-3">
              <strong>Aligned</strong>
            </h5>
            <div className="mb-5">
              <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
                <Button>Arrow points to center</Button>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
    )
  }
Example #9
Source File: index.jsx    From egoshop with Apache License 2.0 6 votes vote down vote up
Item = ({ src, size, tips, onClick = () => {} }) => {
  const cls = avatarSizeToClassName(size);
  return (
    <li className={cls} onClick={onClick}>
      {tips ? (
        <Tooltip title={tips}>
          <Avatar
            src={src}
            size={size}
            style={{
              cursor: 'pointer',
            }}
          />
        </Tooltip>
      ) : (
        <Avatar src={src} size={size} />
      )}
    </li>
  );
}
Example #10
Source File: index.jsx    From mixbox with GNU General Public License v3.0 6 votes vote down vote up
render() {
        const {className} = this.props;
        const {fullScreen, toolTipVisible} = this.state;
        return (
            <div
                className={className}
                style={{
                    fontSize: 14,
                }}
                onClick={this.handleFullScreenClick}
                onMouseEnter={this.handleToolTipShow}
                onMouseLeave={() => this.handleToolTipHide()}
            >
                <Tooltip visible={toolTipVisible} placement="bottom" title={fullScreen ? '退出全屏' : '全屏'}>
                    {fullScreen ? (
                        <FullscreenExitOutlined/>
                    ) : (
                        <FullscreenOutlined/>
                    )}
                </Tooltip>
            </div>
        );
    }
Example #11
Source File: index.js    From camel-store-admin with Apache License 2.0 6 votes vote down vote up
Item = ({ src, size, tips, onClick = () => {} }) => {
  const cls = classNames(styles.avatarItem, {
    [styles.avatarItemLarge]: size === 'large',
    [styles.avatarItemSmall]: size === 'small',
    [styles.avatarItemMini]: size === 'mini',
  });

  return (
    <li className={cls} onClick={onClick}>
      {tips ? (
        <Tooltip title={tips}>
          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
        </Tooltip>
      ) : (
        <Avatar src={src} size={size} />
      )}
    </li>
  );
}
Example #12
Source File: Annotations.js    From label-studio-frontend with Apache License 2.0 6 votes vote down vote up
DraftPanel = observer(({ item }) => {
  if (!item.draftSaved && !item.versions.draft) return null;
  const saved = item.draft && item.draftSaved ? ` saved ${Utils.UDate.prettyDate(item.draftSaved)}` : "";

  if (!item.selected) {
    if (!item.draft) return null;
    return <div>draft{saved}</div>;
  }
  if (!item.versions.result || !item.versions.result.length) {
    return <div>{saved ? `draft${saved}` : "not submitted draft"}</div>;
  }
  return (
    <div>
      <Tooltip placement="topLeft" title={item.draftSelected ? "switch to submitted result" : "switch to current draft"}>
        <Button type="link" onClick={item.toggleDraft} className={styles.draftbtn}>
          {item.draftSelected ? "draft" : "submitted"}
        </Button>
      </Tooltip>
      {saved}
    </div>
  );
})
Example #13
Source File: FocusButton.jsx    From ui with MIT License 6 votes vote down vote up
FocusButton = (props) => {
  const { store, lookupKey, experimentId } = props;

  const dispatch = useDispatch();

  const focusData = useSelector((state) => state.cellInfo.focus);
  const buttonRef = useRef(null);

  const onClick = (e) => {
    // Prevent clicking button from clicking the component it is embedded in (i.e. table row).
    e.stopPropagation();

    // Lose focus so the button changes color from blue to black when you click on it.
    buttonRef.current.blur();

    dispatch(setCellInfoFocus(experimentId, store, lookupKey));
  };

  const focused = focusData.store === store && focusData.key === lookupKey;

  return (
    <Tooltip placement='right' title={`${(focused) ? 'Hide color on' : 'Show color on'} embedding`} destroyTooltipOnHide>
      <Button
        type='dashed'
        aria-label='Show on embedding'
        style={{ background: 'none' }}
        size='small'
        onClick={onClick}
        ref={buttonRef}
      >
        {focused
          ? (<EyeTwoTone style={{ cursor: 'pointer' }} />)
          : (<EyeOutlined style={{ cursor: 'pointer' }} />)}
      </Button>
    </Tooltip>
  );
}
Example #14
Source File: RightContent.js    From youdidao-unmanned-shop with MIT License 6 votes vote down vote up
render() {
    const { onMenuClick, theme } = this.props;
    const role = localStorage.getItem('role');
    console.log('GlobalHeaderRight render role', role);
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    let className = styles.right;
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`;
    }
    return (
      <div className={className}>
        <Tooltip title={formatMessage({ id: 'component.globalHeader.help' })}>
          <a
            target="_blank"
            href="https://pro.ant.design/docs/getting-started"
            rel="noopener noreferrer"
            className={styles.action}
          >
            <p style={{ color: '#666' }}>
              <Icon type="question-circle-o" /> 使用文档
            </p>
          </a>
        </Tooltip>
        <HeaderDropdown overlay={menu}>
          <span className={`${styles.action} ${styles.account}`}>
            <p>{role ? role.split('/')[1] : '管理员'}</p>
          </span>
        </HeaderDropdown>
      </div>
    );
  }
Example #15
Source File: index.js    From acy-dex-interface with MIT License 5 votes vote down vote up
getTooltip = ({ tooltip, overlayStyle, title, children }) => {
  if (tooltip) {
    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
    return <Tooltip {...props}>{children}</Tooltip>;
  }
  return children;
}
Example #16
Source File: adminChallengeCreate.js    From ctf_platform with MIT License 5 votes vote down vote up
render() {
        return (

            <Layout className="form-style">

                <Modal
                    title={null}
                    visible={this.state.previewModal}
                    footer={null}
                    bodyStyle={{ textAlign: "center" }}
                    onCancel={() => { this.setState({ previewModal: false }) }}
                >
                    <Tabs defaultActiveKey="challenge">
                        <TabPane
                            tab={<span><ProfileOutlined /> Challenge</span>}
                            key="challenge"
                        >
                            {this.state.challengeWriteup !== "" && (
                                <Tooltip title="View writeups for this challenge">
                                    <Button shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} onClick={() => { window.open(this.state.challengeWriteup) }} />
                                </Tooltip>
                            )}
                            {this.state.challengeWriteup === "" && (
                                <Tooltip title="Writeups are not available for this challenge">
                                    <Button disabled shape="circle" size="large" style={{ position: "absolute", right: "2ch" }} type="primary" icon={<SolutionOutlined />} />
                                </Tooltip>
                            )}
                            <h1 style={{ fontSize: "150%" }}>{this.state.previewChallenge.name}</h1>
                            <div>
                                {this.state.challengeTags}
                            </div>
                            <h2 style={{ color: "#1765ad", marginTop: "2vh", marginBottom: "6vh", fontSize: "200%" }}>{this.state.previewChallenge.points}</h2>

                            <div className="challengeModal">
                                <MarkdownRender>{this.state.previewChallenge.description}</MarkdownRender>
                            </div>

                            <div style={{ marginTop: "6vh", display: "flex", flexDirection: "column" }}>
                                {this.state.challengeHints}
                            </div>
                            <div style={{ display: "flex", justifyContent: "center" }}>
                                <Input style={{ width: "45ch" }} defaultValue="" placeholder={"Enter a flag"} />
                                <Button type="primary" icon={<FlagOutlined />}>Submit</Button>
                            </div>
                            <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", marginTop: "2vh" }}>
                                <p>Challenge Author: <em>You</em></p>
                                <p style={{ color: "#d87a16", fontWeight: 500 }}>Attempts Remaining: {this.state.previewChallenge.max_attempts}</p>
                            </div>
                        </TabPane>
                    </Tabs>


                </Modal>
                <div style={{ display: "flex", alignItems: "center", alignContent: "center" }}>
                    <Button type="primary" onClick={this.props.handleBack} icon={<LeftOutlined />} style={{ maxWidth: "20ch", marginBottom: "3vh", marginRight: "2vw" }}>Back</Button>
                    <h1 style={{ fontSize: "180%" }}> <FlagTwoTone /> Create New Challenge</h1>

                </div>
                <CreateChallengeForm allCat={this.props.allCat} challenges={this.props.challenges} handleCreateBack={this.props.handleCreateBack.bind(this)} previewChallenge={this.previewChallenge.bind(this)} state={this.state} loadingStatus={this.state.loading} setState={this.setState.bind(this)}></CreateChallengeForm>
            </Layout>
        );
    }
Example #17
Source File: SiteLogo.js    From dexwebapp with Apache License 2.0 5 votes vote down vote up
SiteLogo = ({ pushToTradePage }) => {
  const theme = useContext(ThemeContext);

  // TODO: need to disable the img click
  const onMaintenancePage = window.location.pathname.includes('/maintenance');

  return (
    <div
      style={{
        paddingLeft: '4px',
        fontWeight: 700,
        fontSize: '0.9rem',
        color: theme.textWhite,
        height: AppLayout.topNavBarHeight,
        lineHeight: AppLayout.topNavBarHeight,
        userSelect: 'none',
      }}
    >
      <div>
        <img
          src="/assets/images/logo.svg"
          alt="Loopring"
          draggable="false"
          style={{
            width: '100px',
            height: 'auto',
            marginLeft: '-8px',
            paddingRight: '8px',
            paddingBottom: '4px',
            userSelect: 'none',
          }}
          onClick={() => {
            if (onMaintenancePage === false) {
              pushToTradePage();
            }
          }}
        />
        <Tooltip
          style={{
            width: '400px',
          }}
          mouseEnterDelay={1}
          title={
            <div>
              <div>LAST_COMMIT={process.env.COMMITHASH}</div>
              <div>DEPLOYED={process.env.TIME}</div>
              <div>RELAYER={config.getRelayerHost()}</div>
            </div>
          }
        >
          <span
            style={{
              fontSize: '0.8rem',
              fontWeight: 400,
              marginRight: '32px',
              minWidth: '50px',
              display: 'inline-block',
              color: theme.primary,
            }}
          >
            <I s={'Beta1'} />
          </span>
        </Tooltip>
      </div>
    </div>
  );
}
Example #18
Source File: deadlineVisualizer.js    From deadviz with MIT License 5 votes vote down vote up
DeadlineVisualizer = ({ deadline }) => {
    document.title = `${deadline.name} - ${deadline.summary}`;
    const  [currentTagBox, setCurrentTagBox] = useState(null);

    return (
        <Layout style={{ height: '100vh', width: '100vw' }}>
            <Header style={{ backgroundColor: '#fff' }}>
                <Title>{deadline.name}</Title>
            </Header>
            <Content>
                <Container>
                    <BoxContainer>
                        {deadline.boxes.map((item, index) => item.passed ?
                            <Tooltip title={item.info} color="red">
                                <PassedBox onMouseEnter={()=>{setCurrentTagBox({item, index})}}
                                            key={index} 
                                            delay={index + 1}/>
                            </Tooltip>
                            :
                            <Tooltip title={item.info}>
                                <Box key={index} 
                                     delay={index + 1}
                                     onMouseEnter={()=>{setCurrentTagBox({item, index})}}
                                />
                            </Tooltip>)}
                    </BoxContainer>
                </Container>
               <ContainerTags>
                    <BoxContainer>
                       <CustomTag 
                            deadlineTag = {deadline != null ? deadline : null}
                            tagItem = {currentTagBox}
                       ></CustomTag>
                    </BoxContainer>
               </ContainerTags>
            </Content>
            <Footer style={{ backgroundColor: '#fff' }}>
                <Divider>{deadline.summary}</Divider>
            </Footer>
        </Layout>
    );
}
Example #19
Source File: ThemeColor.js    From online-test-platform with Apache License 2.0 5 votes vote down vote up
ThemeColor = ({ colors, title, value, onChange }) => {
  let colorList = colors;
  if (!colors) {
    colorList = [
      {
        key: 'dust',
        color: '#F5222D',
      },
      {
        key: 'volcano',
        color: '#FA541C',
      },
      {
        key: 'sunset',
        color: '#FAAD14',
      },
      {
        key: 'cyan',
        color: '#13C2C2',
      },
      {
        key: 'green',
        color: '#52C41A',
      },
      {
        key: 'daybreak',
        color: '#1890FF',
      },
      {
        key: 'geekblue',
        color: '#2F54EB',
      },
      {
        key: 'purple',
        color: '#722ED1',
      },
    ];
  }
  return (
    <div className={styles.themeColor}>
      <h3 className={styles.title}>{title}</h3>
      <div className={styles.content}>
        {colorList.map(({ key, color }) => (
          <Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}>
            <Tag
              className={styles.colorBlock}
              color={color}
              check={value === color}
              onClick={() => onChange && onChange(color)}
            />
          </Tooltip>
        ))}
      </div>
    </div>
  );
}
Example #20
Source File: index.jsx    From react-visual-modeling with MIT License 5 votes vote down vote up
config = {
  // butterfly-dag 属性
  butterfly:{
    theme:{
      edge: {
        // shapeType: 'Manhattan',
      }
    },
  },

  // 网格布局
  gridMode: {
    theme: {
      shapeType: 'circle',     // 展示的类型,支持line & circle
      gap: 20,                 // 网格间隙
      circleRadiu: 1.5,        // 圆点半径
      circleColor: 'rgba(255, 255, 255, 0.08)',    // 圆点颜色
    }
  },

  // 键盘事件
  allowKeyboard: true,

  // 小地图相关
  minimap: {
    enable: true,
    config: {
      nodeColor: 'rgba(216, 216, 216, 0.13)',
      activeNodeColor: '#F66902',
      viewportStyle: {
        'background-color': 'rgba(216, 216, 216, 0.07)'
      }
    }
  },

  // 是否表格可折叠
  collapse: {
    enable: true,
    showCollapseDetail: true
  },
  titleRender: (title) => {
    return title;
  },
  titleExtIconRender: () => {
    return (
      <Tooltip title="自定义title ext icon">
        <i 
          className="table-build-icon table-build-icon-iconfontxiaogantanhao"
        />
      </Tooltip>
    );
  },
  labelRender: (label) => {
    if(!label) {
      return 'connection';
    }

    return (
      <Tooltip title="自定义label">
        {label}
      </Tooltip>
    )
  }
}
Example #21
Source File: TransactionsTable.js    From bonded-stablecoin-ui with MIT License 5 votes vote down vote up
TransactionsTable = ({ source, type }) => {
  const active = useSelector((state) => state.active);
  const { t } = useTranslation();
  const { params, bonded_state, fund_aa, address } = active;
  const { activeWallet } = useSelector((state) => state.settings);
  const actualParams = getParams(params, bonded_state);

  const getUserName = (adr) => {
    if (fund_aa && (adr === fund_aa)) {
      return "Stability fund"
    } else if (adr === address) {
      return "Curve AA"
    } else if (("decision_engine_aa" in bonded_state) && bonded_state.decision_engine_aa === adr) {
      return "Decision Engine"
    } else if (config.FACTORY_AAS.includes(adr)) {
      return "Factory AA"
    } else {
      return undefined;
    }
  }

  return <div className={styles.wrap}>
    <div className={styles.head + " " + styles.row}>
      <div className={styles.status}><Text strong>{t("trade.tabs.transactions.head.status", "Status")}</Text></div>
      <div className={styles.event}><Text strong>{t("trade.tabs.transactions.head.event", "Event")}</Text></div>
      <div className={styles.input}><Text strong>{t("trade.tabs.transactions.head.input", "Input")}</Text></div>
      <div className={styles.output}><Text strong>{t("trade.tabs.transactions.head.output", "Output")}</Text></div>
      <div className={styles.user}><Text strong>{t("trade.tabs.transactions.head.user", "User")}</Text></div>
      <div className={styles.time}><Text strong>{t("trade.tabs.transactions.head.time", "Time")}</Text></div>
    </div>

    <List dataSource={source.sort(customSort)} className={styles.list} renderItem={(item) => {
      const ts = moment.unix(item.timestamp).format("DD-MM-YYYY HH:mm");

      const [event, input, inputCurrency, output, user] = eventIdentification(type, item, actualParams, activeWallet, active);

      return <a href={`https://${config.TESTNET ? "testnet" : ""
        }explorer.obyte.org/#${item.unit}`}
        target="_blank"
        rel="noopener" className={styles.row}>
        <div className={styles.status}>
          <div className={styles.dotWrap}>
            <Dot status={item.bounced ? "error" : (item.isStable ? "stable" : "not_stable")} tooltip={item.bounced ? t("trade.tabs.transactions.error", "Error") : (item.isStable ? t("trade.tabs.transactions.stable", "Stable") : t("trade.tabs.transactions.not_stable", "Not stable"))} />
          </div>
          <div className={styles.statusInfo}><span className={styles.label}>{t("trade.tabs.transactions.head.status", "Status")}:</span><Text type="secondary">{item.bounced ? <span style={{ color: "#F4222D" }}>Error</span> : (item.isStable ? <span style={{ color: "#52C51A" }}>Stable</span> : <span style={{ color: "#FBAD13" }}>Not stable</span>)}</Text></div>
        </div>
        <div className={styles.event}><span className={styles.label}>{t("trade.tabs.transactions.head.event", "Event")}:</span><Text type="secondary">{event}</Text></div>
        <div className={styles.input}><span className={styles.label}>{t("trade.tabs.transactions.head.input", "Input")}:</span><Text type="secondary">{(!item.bounced && input) || "-"} {(!item.bounced && input && inputCurrency) || ""}</Text></div>
        <div className={styles.output}><span className={styles.label}>{t("trade.tabs.transactions.output", "Output")}:</span> <Text type="secondary">{(!item.bounced && output) || "-"}</Text></div>
        <div className={styles.user}><span className={styles.label}>{t("trade.tabs.transactions.head.user", "User")}:</span><Text type="secondary">{<Tooltip title={user || item.trigger_address}>
          {getUserName(user || item.trigger_address) || (user || item.trigger_address).slice(0, 14) + "..."}
        </Tooltip>}</Text></div>
        <div className={styles.time}><span className={styles.label}>{t("trade.tabs.transactions.head.time", "Time")}:</span><Text type="secondary">{ts}</Text></div>
      </a>
    }} />

  </div>
}
Example #22
Source File: ListTodo.js    From Peppermint with GNU General Public License v3.0 5 votes vote down vote up
ListTodo = () => {
  const { todos, getTodos, deleteTodo, allDone, markDone, markUndone } = useContext(
    GlobalContext
  );

  useEffect(() => {
    getTodos();
    // eslint-disable-next-line
  }, []);

  return (
    <div>
      <Button style={{ marginTop: 10 }} onClick={allDone}>
        Mark All Done
      </Button>
      <Divider orientation="left" style={{ width: "auto" }}></Divider>
      {todos ? (
        todos.map((todo) => {
          return (
            <div className="todo-list" key={todo._id}>
              <ul key={todo._id}>
                <li style={{ marginLeft: -35 }} key={todo._id}>
                  <span className={todo.done ? "done" : ""}>{todo.text}</span>
                  <Tooltip placement="right" title="Delete">
                    <Button
                      onClick={() => deleteTodo(todo._id)}
                      style={{ float: "right" }}
                    >
                      <DeleteTwoTone twoToneColor="#FF0000" />
                    </Button>
                  </Tooltip>
                  {todo.done ? (
                    <Tooltip placement="left" title="Unmark as done">
                      <Button
                        onClick={() => markUndone(todo._id)}
                        style={{ float: "right", marginRight: 5 }}
                      >
                        <MinusCircleTwoTone />
                      </Button>
                    </Tooltip>
                  ) : (
                    <Tooltip placement="left" title="Mark as done">
                      <Button
                        onClick={() => markDone(todo._id)}
                        style={{ float: "right", marginRight: 5 }}
                      >
                        <CheckCircleTwoTone twoToneColor="#52c41a" />
                      </Button>
                    </Tooltip>
                  )}
                </li>
              </ul>
            </div>
          );
        })
      ) : (
        <p></p>
      )}
    </div>
  );
}
Example #23
Source File: ProgressGroup.js    From AgileTC with Apache License 2.0 5 votes vote down vote up
render() {
    const { minder, isLock } = this.props;
    let disabled = minder.getSelectedNodes().length === 0;
    if (isLock) disabled = true;
    const btnProps = {
      type: 'link',
      disabled,
      style: { padding: 4, height: 28 },
    };
    const progressList = [
      {
        label: '移除结果',
        icon: (
          <Icon
            type="minus-circle"
            theme="filled"
            style={{ fontSize: '18px', color: 'rgba(0, 0, 0, 0.6)' }}
          />
        ),
      },
      {
        label: '失败',
        value: 1,
        icon: <CustomIcon type="fail" disabled={disabled} style={{ width: 18, height: 18 }} />,
      },
      {
        label: '通过',
        value: 9,
        icon: <CustomIcon type="checked" disabled={disabled} style={{ width: 18, height: 18 }} />,
      },
      {
        label: '阻塞',
        value: 5,
        icon: <CustomIcon type="block" disabled={disabled} style={{ width: 18, height: 18 }} />,
      },
      {
        label: '不执行',
        value: 4,
        icon: <CustomIcon type="skip" disabled={disabled} style={{ width: 18, height: 18 }} />,
      },
    ];
    return (
      <div className="nodes-actions" style={{ width: 140 }}>
        {progressList &&
          progressList.map((item) => (
            <Tooltip
              key={item.value || 0}
              title={item.label}
              getPopupContainer={(triggerNode) => triggerNode.parentNode}
            >
              <Button {...btnProps} onClick={() => this.handleAction(item.value)}>
                {item.icon}
              </Button>
            </Tooltip>
          ))}
      </div>
    );
  }
Example #24
Source File: Broker.js    From kafka-map with Apache License 2.0 5 votes vote down vote up
render() {

        const columns = [{
            title: 'ID',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Host',
            dataIndex: 'host',
            key: 'host',
            defaultSortOrder: 'ascend',
        }, {
            title: 'Port',
            dataIndex: 'port',
            key: 'port',
        }, {
            title: 'Partitions as Leader',
            dataIndex: 'leaderPartitions',
            key: 'leaderPartitions',
            render: (leaderPartitions, record, index) => {
                return <Tooltip title={leaderPartitions.join('、')}>
                    <Button type="link" size='small'>{leaderPartitions.length}</Button>
                </Tooltip>;
            }
        }, {
            title: 'Partitions as Follower',
            dataIndex: 'followerPartitions',
            key: 'followerPartitions',
            render: (followerPartitions, record, index) => {
                return <Tooltip title={followerPartitions.join('、')}>
                    <Button type="link" size='small'>{followerPartitions.length}</Button>
                </Tooltip>;
            }
        }];

        return (
            <div>
                <div className='kd-page-header'>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => {
                            this.props.history.goBack();
                        }}
                        title={this.state.clusterName}
                        subTitle={<FormattedMessage id="broker-management" />}
                    />
                </div>

                <div className='kd-content'>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={8} key={1}>
                                <Title level={3}>Broker</Title>
                            </Col>
                            <Col span={16} key={2} style={{textAlign: 'right'}}>

                            </Col>
                        </Row>
                    </div>
                    <Table
                        rowKey='id'
                        dataSource={this.state.items}
                        columns={columns}
                        position={'both'}
                        size={'small'}
                        loading={this.state.loading}
                        pagination={{
                            showSizeChanger: true,
                            total: this.state.items.length,
                            showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
                        }}
                    />
                </div>

            </div>
        );
    }
Example #25
Source File: index.js    From YApi-X with MIT License 5 votes vote down vote up
render() {
    return (
      <Collapse
        style={{
          margin: 0,
          marginBottom: '16px'
        }}
        onChange={this.callback}
        // activeKey={this.state.activeKey}
        activeKey={this.props.collapseKey}
      >
        <Panel
          header={
            <span>
              {' '}
              选择测试用例环境
              <Tooltip title="默认使用测试用例选择的环境">
                {' '}
                <Icon type="question-circle-o" />{' '}
              </Tooltip>
            </span>
          }
          key="1"
        >
          <div className="case-env">
            {this.props.envList.length > 0 && (
              <div>
                {this.props.envList.map(item => {
                  return (
                    <Row
                      key={item._id}
                      type="flex"
                      justify="space-around"
                      align="middle"
                      className="env-item"
                    >
                      <Col span={6} className="label">
                        <Tooltip title={item.name}>
                          <span className="label-name">{item.name}</span>
                        </Tooltip>
                      </Col>
                      <Col span={18}>
                        <Select
                          style={{
                            width: '100%'
                          }}
                          value={this.props.envValue[item._id] || ''}
                          defaultValue=""
                          onChange={val => this.props.currProjectEnvChange(val, item._id)}
                        >
                          <Option key="default" value="">
                            默认环境
                          </Option>

                          {item.env.map(key => {
                            return (
                              <Option value={key.name} key={key._id}>
                                {key.name + ': ' + key.domain}
                              </Option>
                            );
                          })}
                        </Select>
                      </Col>
                    </Row>
                  );
                })}
              </div>
            )}
          </div>
        </Panel>
      </Collapse>
    );
  }
Example #26
Source File: RightContent.jsx    From spring-boot-plus-admin-react with Apache License 2.0 5 votes vote down vote up
GlobalHeaderRight = props => {
  const { theme, layout } = props;
  let className = styles.right;

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

  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={value => {
          console.log('input', value);
        }}
        onPressEnter={value => {
          console.log('enter', value);
        }}
      />
      <Tooltip
        title={formatMessage({
          id: 'component.globalHeader.help',
        })}
      >
        <a
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <Icon type="question-circle-o" />
        </a>
      </Tooltip>
      <Avatar />
      <SelectLang className={styles.action} />
    </div>
  );
}
Example #27
Source File: tags.js    From gobench with Apache License 2.0 5 votes vote down vote up
DefaultPage = ({ tags, dispatch }) => {
  const { id } = useParams()

  const [editable, setEditable] = useState(false)
  const [newTag, setNewTag] = useState('')

  useEffect(() => {
    dispatch({
      type: 'application/TAGS',
      payload: { id }
    })
  }, [id])

  const removeTag = tagId => {
    dispatch({
      type: 'application/TAG_REMOVE',
      payload: { id, tagId }
    })
  }
  const addTag = (saved) => {
    if (newTag && tags.indexOf(newTag) === -1) {
      if (saved) {
        dispatch({
          type: 'application/TAG_ADD',
          payload: { id, name: newTag }
        })
      }
    } else {
      setEditable(false)
    }

    setNewTag('')
  }
  return (
    <>
      {tags && tags.map(({ id, name }, index) => {
        const isLongTag = name.length > 20

        const tagElem = (
          <Tag
            className='edit-tag'
            key={id}
            closable
            onClose={() => { removeTag(id) }}
            color={colorFull(index)}
          >
            <span>
              {isLongTag ? `${name.slice(0, 20)}...` : name}
            </span>
          </Tag>
        )
        return isLongTag ? (
          <Tooltip title={name} key={id}>
            {tagElem}
          </Tooltip>
        ) : (
          tagElem
        )
      })}
      {editable && (
        <Input
          autoFocus
          type='text'
          size='small'
          className='tag-input'
          value={newTag}
          onChange={(e) => setNewTag(e.target.value)}
          onBlur={() => addTag()}
          onPressEnter={() => addTag(true)}
        />
      )}
      {!editable && (
        <Tag className='site-tag-plus' onClick={() => setEditable(true)}>
          <PlusOutlined /> New Tag
        </Tag>
      )}
    </>
  )
}
Example #28
Source File: RightContent.jsx    From egoshop with Apache License 2.0 5 votes vote down vote up
GlobalHeaderRight = props => {
  const { theme, layout } = props;
  let className = styles.right;

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

  return (
    <div className={className}>
      <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder={formatMessage({
          id: 'component.globalHeader.search',
        })}
        dataSource={[
          formatMessage({
            id: 'component.globalHeader.search.example1',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example2',
          }),
          formatMessage({
            id: 'component.globalHeader.search.example3',
          }),
        ]}
        onSearch={value => {
          console.log('input', value);
        }}
        onPressEnter={value => {
          console.log('enter', value);
        }}
      />
      <Tooltip
        title={formatMessage({
          id: 'component.globalHeader.help',
        })}
      >
        <a
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <Icon type="question-circle-o" />
        </a>
      </Tooltip>
      <Avatar />
      <SelectLang className={styles.action} />
    </div>
  );
}
Example #29
Source File: ThemeColor.js    From camel-store-admin with Apache License 2.0 5 votes vote down vote up
ThemeColor = ({ colors, title, value, onChange }) => {
  let colorList = colors;
  if (!colors) {
    colorList = [
      {
        key: 'dust',
        color: '#F5222D',
      },
      {
        key: 'volcano',
        color: '#FA541C',
      },
      {
        key: 'sunset',
        color: '#FAAD14',
      },
      {
        key: 'cyan',
        color: '#13C2C2',
      },
      {
        key: 'green',
        color: '#52C41A',
      },
      {
        key: 'daybreak',
        color: '#1890FF',
      },
      {
        key: 'geekblue',
        color: '#2F54EB',
      },
      {
        key: 'purple',
        color: '#722ED1',
      },
    ];
  }
  return (
    <div className={styles.themeColor}>
      <h3 className={styles.title}>{title}</h3>
      <div className={styles.content}>
        {colorList.map(({ key, color }) => (
          <Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}>
            <Tag
              className={styles.colorBlock}
              color={color}
              check={value === color}
              onClick={() => onChange && onChange(color)}
            />
          </Tooltip>
        ))}
      </div>
    </div>
  );
}