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 |
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 |
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 |
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 |
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 |
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 |
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 |
render() {
return (
<div>
{this.props.desc && (
<div className="component-label">
{!this.state.inputShow ? (
<div>
<p>
{this.props.desc}
<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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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>
);
}