@ant-design/icons#CheckCircleFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#CheckCircleFilled.
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: hoverPanel.tsx From LogicFlow with Apache License 2.0 | 6 votes |
|
export default function hoverPanel(hoverStyle: React.CSSProperties | undefined, nodeData: any) {
const getList = (data: any) => {
if (!data) {
return
}
const properties = nodeData.properties;
// @ts-ignore
return <Card title={nodeType[nodeData.type]} style={{ width: 300 }}>
<p>{properties.usernameZh}{properties.username ? <span>({properties.username})</span> : ''}</p>
<p>{properties.time}</p>
{properties.result ? <p>
{properties.result === '通过' ? <CheckCircleFilled style={{color: 'green'}} /> : <CloseCircleFilled style={{color: 'red'}}/>}
<span style={{marginLeft: '10px'}}>{properties.result}</span>
</p> : ''}
{properties.desc ? <p>说明: {properties.desc}</p> : ''}
</Card>
}
return <div className="hover-panel" style={{ ...hoverStyle }}>
{getList(nodeData)}
</div>
}
Example #2
| Source File: index.tsx From nanolooker with MIT License | 5 votes |
|
Copy = ({ text }: { text: string }) => {
const { t } = useTranslation();
const { theme } = React.useContext(PreferencesContext);
const [isCopied, setIsCopied] = React.useState<boolean>(false);
return (
<Tooltip title={isCopied ? `${t("common.copied")}!` : t("common.copy")}>
<CopyToClipboard
text={text}
onCopy={() => {
setIsCopied(true);
clearTimeout(copiedTimeout);
copiedTimeout = window.setTimeout(() => {
setIsCopied(false);
}, 2000);
}}
>
{isCopied ? (
theme === Theme.DARK ? (
<CheckCircleFilled
style={{ fontSize: "24px", color: Colors.PENDING_DARK as string }}
/>
) : (
<CheckCircleFilled
style={{ fontSize: "24px", color: Colors.PENDING as string }}
/>
)
) : (
<Button
shape="circle"
size="small"
disabled={isCopied}
style={{
borderColor: isCopied ? (Colors.RECEIVE as string) : undefined,
}}
>
{theme === Theme.DARK ? <CopyFilled /> : <CopyOutlined />}
</Button>
)}
</CopyToClipboard>
</Tooltip>
);
}
Example #3
| Source File: CorrelationMatrix.tsx From posthog-foss with MIT License | 4 votes |
|
export function CorrelationMatrix(): JSX.Element {
const { insightProps } = useValues(insightLogic)
const logic = funnelLogic(insightProps)
const { correlationsLoading, funnelCorrelationDetails, parseDisplayNameForCorrelation, correlationMatrixAndScore } =
useValues(logic)
const { setFunnelCorrelationDetails, openCorrelationPersonsModal } = useActions(logic)
const actor = funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events ? 'event' : 'property'
const action =
funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events
? 'performed event'
: 'have property'
let displayName = <></>
if (funnelCorrelationDetails) {
const { first_value, second_value } = parseDisplayNameForCorrelation(funnelCorrelationDetails)
displayName = (
<>
<PropertyKeyInfo value={first_value} />
{second_value !== undefined && (
<>
{' :: '}
<PropertyKeyInfo value={second_value} disablePopover />
</>
)}
</>
)
}
const { correlationScore, truePositive, falsePositive, trueNegative, falseNegative, correlationScoreStrength } =
correlationMatrixAndScore
const scoreIcon =
correlationScoreStrength === 'strong' ? (
<CheckCircleFilled style={{ color: 'var(--success)' }} />
) : correlationScoreStrength === 'moderate' ? (
<MinusCircleOutlined style={{ color: 'var(--warning)' }} />
) : (
<CloseCircleOutlined style={{ color: 'var(--danger)' }} />
)
const dismiss = (): void => setFunnelCorrelationDetails(null)
return (
<Modal
className="correlation-matrix"
visible={!!funnelCorrelationDetails}
onCancel={dismiss}
destroyOnClose
footer={<Button onClick={dismiss}>Dismiss</Button>}
width={600}
title="Correlation details"
>
<div className="correlation-table-wrapper">
{correlationsLoading ? (
<div className="mt text-center">
<Spinner size="lg" />
</div>
) : funnelCorrelationDetails ? (
<>
<p className="text-muted-alt mb">
The table below displays the correlation details for users who {action} <b>{displayName}</b>
.
</p>
<table>
<thead>
<tr className="table-title">
<td colSpan={3}>Results matrix</td>
</tr>
<tr>
<td>
{funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events
? 'Performed event'
: 'Has property'}
</td>
<td>Success</td>
<td>Dropped off</td>
</tr>
</thead>
<tbody>
<tr>
<td className="horizontal-header">Yes</td>
<td>
<Tooltip
title={`True positive (TP) - Percentage of users who ${action} and completed the funnel.`}
>
<div className="percentage">
{truePositive
? percentage(truePositive / (truePositive + falsePositive))
: '0.00%'}
</div>
</Tooltip>
{truePositive === 0 ? (
'0 users'
) : (
<Link
onClick={() => {
openCorrelationPersonsModal(funnelCorrelationDetails, true)
}}
>
{pluralize(truePositive, 'user', undefined, true, true)}
</Link>
)}
</td>
<td>
<div className="percentage">
<Tooltip
title={`False negative (FN) - Percentage of users who ${action} and did not complete the funnel.`}
>
{falseNegative
? percentage(falseNegative / (falseNegative + trueNegative))
: '0.00%'}
</Tooltip>
</div>
{falseNegative === 0 ? (
'0 users'
) : (
<Link
onClick={() => {
openCorrelationPersonsModal(funnelCorrelationDetails, false)
}}
>
{pluralize(falseNegative, 'user', undefined, true, true)}
</Link>
)}
</td>
</tr>
<tr>
<td className="horizontal-header">No</td>
<td>
<div className="percentage">
<Tooltip
title={`False positive (FP) - Percentage of users who did not ${action} and completed the funnel.`}
>
{falsePositive
? percentage(falsePositive / (truePositive + falsePositive))
: '0.00%'}
</Tooltip>
</div>
{pluralize(falsePositive, 'user', undefined, true, true)}
</td>
<td>
<div className="percentage">
<Tooltip
title={`True negative (TN) - Percentage of users who did not ${action} and did not complete the funnel.`}
>
{trueNegative
? percentage(trueNegative / (falseNegative + trueNegative))
: '0.00%'}
</Tooltip>
</div>
{pluralize(trueNegative, 'user', undefined, true, true)}
</td>
</tr>
<tr>
<td className="horizontal-header" />
<td>
<b>100%</b>
</td>
<td>
<b>100%</b>
</td>
</tr>
</tbody>
</table>
<div className="mt text-center">
{capitalizeFirstLetter(funnelCorrelationDetails?.result_type || '')} <b>{displayName}</b>{' '}
has a{' '}
{funnelCorrelationDetails?.correlation_type === FunnelCorrelationType.Success ? (
<b className="text-success">
positive{' '}
<Tooltip
title={`Positive correlation means this ${actor} is correlated with a successful conversion.`}
>
<InfoCircleOutlined className="cursor-pointer" />
</Tooltip>
</b>
) : (
<b className="text-danger">
negative{' '}
<Tooltip
title={`Negative correlation means this ${actor} is correlated with an unsuccessful conversion (user dropped off).`}
>
<InfoCircleOutlined className="cursor-pointer" />
</Tooltip>
</b>
)}{' '}
correlation score of{' '}
<b
style={{
color:
correlationScoreStrength === 'strong'
? 'var(--success)'
: correlationScoreStrength === 'moderate'
? 'var(--warning)'
: 'var(--danger)',
}}
>
<Tooltip title={`This ${actor} has ${correlationScoreStrength} correlation.`}>
<span style={{ cursor: 'pointer' }}>
{scoreIcon} {correlationScore.toFixed(3)}
</span>
</Tooltip>
</b>
</div>
</>
) : (
<div>
<InlineMessage type="danger">
We could not load the details for this correlation value. Please recreate your funnel and
try again.
</InlineMessage>
</div>
)}
</div>
</Modal>
)
}
Example #4
| Source File: AuthorizedUrlsTable.tsx From posthog-foss with MIT License | 4 votes |
|
export function AuthorizedUrlsTable({ pageKey, actionId }: AuthorizedUrlsTableInterface): JSX.Element {
const logic = authorizedUrlsLogic({ actionId })
const { appUrlsKeyed, suggestionsLoading, searchTerm, launchUrl, appUrls, editUrlIndex } = useValues(logic)
const { addUrl, removeUrl, setSearchTerm, updateUrl, newUrl, setEditUrlIndex } = useActions(logic)
const columns: LemonTableColumns<KeyedAppUrl> = [
{
title: 'URLs',
dataIndex: 'url',
key: 'url',
render: function Render(url, record) {
const [urlUpdatingState, setUrlUpdatingState] = useState(record.url)
const [errorState, setErrorState] = useState('')
useEffect(() => setUrlUpdatingState(record.url), [record])
const save = (): void => {
setErrorState('')
if (urlUpdatingState === NEW_URL) {
removeUrl(record.originalIndex)
}
// See https://regex101.com/r/UMBc9g/1 for tests
if (
urlUpdatingState.indexOf('*') > -1 &&
!urlUpdatingState.match(/^(.*)\*[^\*]*\.[^\*]+\.[^\*]+$/)
) {
setErrorState(
'You can only wildcard subdomains. If you wildcard the domain or TLD, people might be able to gain access to your PostHog data.'
)
return
}
if (!isURL(urlUpdatingState)) {
setErrorState('Please type a valid URL or domain.')
return
}
if (
appUrls.indexOf(urlUpdatingState) > -1 &&
appUrls.indexOf(urlUpdatingState, record.originalIndex) !== record.originalIndex &&
appUrls.indexOf(urlUpdatingState, record.originalIndex + 1) !== record.originalIndex
) {
setErrorState('This URL is already registered.')
return
}
updateUrl(record.originalIndex, urlUpdatingState)
}
return record.type === 'suggestion' || (url !== NEW_URL && editUrlIndex !== record.originalIndex) ? (
<div className={clsx('authorized-url-col', record.type)}>
{record.type === 'authorized' && <CheckCircleFilled style={{ marginRight: 4 }} />}
{url}
{record.type === 'suggestion' && <LemonTag>Suggestion</LemonTag>}
</div>
) : (
<div>
<div style={{ display: 'flex' }}>
<Input
value={urlUpdatingState}
onChange={(e) => setUrlUpdatingState(e.target.value)}
onPressEnter={save}
autoFocus
placeholder="Enter a URL or wildcard subdomain (e.g. https://*.posthog.com)"
/>
<Button type="primary" onClick={save}>
Save
</Button>
</div>
{errorState && <span className="text-small text-danger">{errorState}</span>}
</div>
)
},
},
{
title: '',
key: 'actions',
render: function Render(_, record, index) {
return (
<div className="actions-col">
{record.type === 'suggestion' ? (
<LemonButton type="default" onClick={() => addUrl(record.url)}>
<PlusOutlined /> Add as authorized
</LemonButton>
) : (
<>
<a href={launchUrl(record.url)} style={{ marginRight: 4 }}>
<LemonButton type="highlighted">Launch toolbar</LemonButton>
</a>
<More
overlay={
<>
<LemonButton
fullWidth
type="stealth"
onClick={() => setEditUrlIndex(record.originalIndex)}
>
<EditOutlined style={{ marginRight: 4 }} />
Edit authorized URL
</LemonButton>
<LemonButton
fullWidth
style={{ color: 'var(--danger)' }}
type="stealth"
onClick={() => removeUrl(index)}
>
<DeleteOutlined style={{ marginRight: 4 }} />
Remove authorized URL
</LemonButton>
</>
}
/>
</>
)}
</div>
)
},
},
]
return (
<div>
<div className="flex-center mb">
<div style={{ flexGrow: 1 }}>
<Input.Search
allowClear
enterButton
placeholder="Search for authorized URLs"
style={{ maxWidth: 480 }}
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value)
}}
autoFocus={pageKey === 'toolbar-launch' && !isMobile()}
/>
</div>
<Button type="primary" icon={<PlusOutlined />} onClick={newUrl}>
Add{pageKey === 'toolbar-launch' && ' authorized domain'}
</Button>
</div>
<LemonTable
className="authorized-urls-table"
columns={columns}
dataSource={appUrlsKeyed}
emptyState={
searchTerm
? 'There are no authorized URLs that match your search.'
: 'There are no authorized URLs or domains. Add one to get started.'
}
loading={suggestionsLoading}
/>
</div>
)
}
Example #5
| Source File: BrickAlert.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
|
export function BrickAlert(props: BrickAlertProps): React.ReactElement {
const [show, setShow] = React.useState<boolean>(false);
const theme = useCurrentTheme();
const onClose = () => {
props.onClose?.();
};
// istanbul ignore next
const message = props.enableMessageSlot ? (
<>
{props.foldDesc ? (
<>
<span style={{ ...props.messageStyle }}>
<slot name="message"></slot>
</span>
<span
onClick={() => {
setShow(!show);
}}
style={{
marginLeft: "5px",
color: "var(--bg-color-button-link)",
cursor: "pointer",
}}
>
<span style={{ ...props.messageStyle }}>
{props.foldDescLabel ?? "故障排查"}
</span>
<UpOutlined
rotate={show ? 0 : 180}
style={{ marginLeft: "4px", lineHeight: "0px", fontSize: "12px" }}
/>
</span>
</>
) : (
<div>
<slot name="message"></slot>
</div>
)}
</>
) : (
<span style={{ ...props.messageStyle }}>{props.message}</span>
);
const action = props.enableActionSlot ? (
<div>
<slot name="action"></slot>
</div>
) : null;
let desc = props.enableDescSlot ? (
<div>
<slot name="description"></slot>
</div>
) : (
props.description
);
if (props.foldDesc) {
desc = <div style={{ display: show ? "block" : "none" }}>{desc}</div>;
}
const text =
props.closeOnce && props.closable ? (
<span style={{ color: "var(--text-color-link)" }}>
不再提示 <CloseOutlined style={{ color: "var(--text-color-link)" }} />
</span>
) : (
""
);
// istanbul ignore next
const getThemeIcon = useCallback(
(
lightIcon: React.ReactElement,
darkIcon: React.ReactElement
): React.ReactElement => {
return theme == "dark-v2" ? darkIcon : lightIcon;
},
[theme]
);
const customIcon = () => {
let icon: React.ReactNode;
let iconRender: any;
if (props.iconSize === "big") {
switch (props.type) {
case "info":
iconRender = getThemeIcon(
<BigInfoCircleOutlined />,
<BigInfoCircleOutlinedDark />
);
break;
case "success":
iconRender = getThemeIcon(
<BigSuccessCircleOutlined />,
<BigSuccessCircleOutlinedDark />
);
break;
case "warning":
iconRender = getThemeIcon(
<BigWarningCircleOutlined />,
<BigWarningCircleOutlinedDark />
);
break;
case "error":
iconRender = getThemeIcon(
<BigErrorCircleOutlined />,
<BigErrorCircleOutlinedDark />
);
break;
}
icon = <Icon component={() => iconRender} />;
}
if (props.iconSize === "small") {
const iconStyle: CSSProperties = { position: "relative", top: "5px" };
const componentStyrle: CSSProperties = { fontSize: "14px" };
switch (props.type) {
case "info":
iconRender = <InfoCircleFilled style={componentStyrle} />;
break;
case "success":
iconRender = <CheckCircleFilled style={componentStyrle} />;
break;
case "warning":
iconRender = <ExclamationCircleFilled style={componentStyrle} />;
break;
case "error":
iconRender = <CloseCircleFilled style={componentStyrle} />;
break;
}
icon = <Icon style={iconStyle} component={() => iconRender} />;
}
return icon;
};
return (
<Alert
className={classnames(
{
[cssStyle.closeOnce]: props.closeOnce && props.closable,
},
props.noBorderRadio ? cssStyle.noBorderRadio : null
)}
type={props.type}
message={message}
showIcon={props.showIcon}
closable={props.closable}
onClose={onClose}
description={desc}
closeText={text}
action={action}
{...(customIcon() ? { icon: customIcon() } : {})}
/>
);
}
Example #6
| Source File: index.tsx From nebula-studio with Apache License 2.0 | 4 votes |
|
TaskItem = (props: IProps) => {
const {
data: {
space,
id,
name,
stats: { totalImportedBytes, totalBytes, numFailed, numReadFailed },
status,
message,
updateTime,
createTime
},
showConfigDownload,
onViewLog,
onConfigDownload,
onTaskStop,
onTaskDelete } = props;
const [progressStatus, setStatus] = useState<'success' | 'active' | 'normal' | 'exception' | undefined>(undefined);
const [extraMsg, setExtraMsg] = useState('');
const addMsg = () => {
const info: string[] = [];
if(numFailed > 0) {
info.push(intl.get('import.notImported', { total: numFailed }));
}
if(numReadFailed > 0) {
info.push(intl.get('import.readFailed', { total: numReadFailed }));
}
info.length > 0 && setExtraMsg(info.join(', '));
};
useEffect(() => {
if(status === ITaskStatus.StatusFinished) {
setStatus('success');
addMsg();
} else if(status === ITaskStatus.StatusProcessing) {
setStatus('active');
addMsg();
} else {
setStatus('exception');
if(message) {
setExtraMsg(message);
}
}
}, [status]);
return (
<div className={styles.taskItem}>
<div className={styles.row}>
<span>{intl.get('common.space')}: {space}</span>
{showConfigDownload && <Button type="link" size="small" onClick={() => onConfigDownload(id)}>
<Icon type="icon-studio-btn-download" />
{intl.get('import.downloadConfig')}
</Button>}
</div>
<div className={styles.row}>
<div className={styles.progress}>
<div className={styles.progressInfo}>
<span className={styles.taskName}>
{name}
{status === ITaskStatus.StatusFinished && <span className={styles.completeInfo}>
<CheckCircleFilled />
{intl.get('import.importCompleted')}
<span className={styles.red}>{extraMsg && ` (${extraMsg})`}</span>
</span>}
{status === ITaskStatus.StatusAborted && <span className={styles.errInfo}>
{intl.get('import.importFailed')}
{extraMsg && ` (${extraMsg})`}
</span>}
{status === ITaskStatus.StatusStoped && <span className={styles.errInfo}>
{intl.get('import.importStopped')}
</span>}
</span>
<div className={styles.moreInfo}>
<span>
{status !== ITaskStatus.StatusFinished && `${getFileSize(totalImportedBytes)} / `}
{getFileSize(totalBytes)}{' '}
</span>
<span>{dayjs.duration(dayjs.unix(updateTime).diff(dayjs.unix(createTime))).format('HH:mm:ss')}</span>
</div>
</div>
<Progress
format={percent => `${percent}%`}
status={progressStatus}
percent={status !== ITaskStatus.StatusFinished ? floor(totalImportedBytes / totalBytes * 100, 2) : 100}
strokeColor={progressStatus && COLOR_MAP[progressStatus]} />
</div>
<div className={styles.operations}>
<Button className="primaryBtn" onClick={() => onViewLog(id, space, status)}>{intl.get('import.viewLogs')}</Button>
{status === ITaskStatus.StatusProcessing &&
<Popconfirm
placement="left"
title={intl.get('import.endImport')}
onConfirm={() => onTaskStop(id)}
okText={intl.get('common.confirm')}
cancelText={intl.get('common.cancel')}
>
<Button className="cancelBtn">{intl.get('import.endImport')}</Button>
</Popconfirm>}
{status !== ITaskStatus.StatusProcessing &&
<Popconfirm
placement="left"
title={intl.get('common.ask')}
onConfirm={() => onTaskDelete(id)}
okText={intl.get('common.confirm')}
cancelText={intl.get('common.cancel')}
>
<Button danger={true}>{intl.get('common.delete')}</Button>
</Popconfirm>}
</div>
</div>
</div>
);
}
