react-icons/md#MdSecurity TypeScript Examples
The following examples show how to use
react-icons/md#MdSecurity.
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: data.tsx From hub with Apache License 2.0 | 6 votes |
|
PACKAGE_SUBSCRIPTIONS_LIST: SubscriptionItem[] = [
{
kind: EventKind.NewPackageRelease,
icon: <MdNewReleases />,
name: 'newRelease',
title: 'New releases',
description: 'Receive a notification when a new version of this package is released.',
enabled: true,
},
{
kind: EventKind.SecurityAlert,
icon: <MdSecurity />,
name: 'securityAlert',
title: 'Security alerts',
description:
'Receive a notification when important security vulnerabilities are found in the latest version of this package.',
enabled: true,
},
]
Example #2
| Source File: Content.tsx From hub with Apache License 2.0 | 4 votes |
|
Content = (props: Props) => {
const history = useHistory();
const wrapper = useRef<HTMLDivElement>(null);
const versionsRef = useRef<Array<HTMLDivElement | null>>([]);
const [currentOffsets, setCurrentOffsets] = useState<number[]>([]);
const openPackagePage = (newVersion: string) => {
props.onCloseModal(false);
history.push({
pathname: buildPackageURL(props.normalizedName, props.repository, newVersion, true),
state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
});
};
useLayoutEffect(() => {
const offsets: number[] = versionsRef.current.map((el) => (el ? el.offsetTop : 0));
setCurrentOffsets(offsets);
}, []);
useEffect(() => {
const handleScroll = (e: Event) => {
const scrollYPosition = e.target ? (e.target as HTMLDivElement).scrollTop : 0;
const index = findClosestNumberIndex(currentOffsets, scrollYPosition);
if (index >= 0 && props.activeVersionIndex !== index) {
props.setActiveVersionIndex(index);
}
};
if (wrapper && wrapper.current && currentOffsets.length > 0) {
const element = wrapper.current;
element.addEventListener('scroll', handleScroll, { passive: true });
return () => element.removeEventListener('scroll', handleScroll);
}
}, [currentOffsets, props]);
return (
<>
<div className="flex-grow-1 overflow-auto h-100" ref={wrapper}>
{props.changelog.map((item: ChangeLog, index: number) => {
if (isNull(item.changes) || isUndefined(item.changes)) return null;
const hasBadge = item.changes.some(
(change: Change) =>
change.hasOwnProperty('kind') && !isUndefined(change.kind) && change.kind.toString() !== ''
);
return (
<div
key={`v_${item.version}`}
data-testid="changelogBlock"
className={classnames({
[styles.lastVersion]: index === props.changelog.length - 1,
})}
>
<div
className="d-inline-block d-md-flex flex-row align-items-baseline border-bottom w-100 mb-3 pb-2"
id={`changelog-${index}`}
ref={(el) => (versionsRef.current[index] = el)}
>
<div className={`d-flex flex-row align-items-baseline ${styles.versionWrapper}`}>
<button
className={`btn btn-link btn-sm text-dark text-truncate mb-0 p-0 fs-5 ${styles.btnTitle}`}
onClick={() => openPackagePage(item.version)}
aria-label={`Open version ${item.version}`}
>
{item.version}
</button>
<button
className={`btn btn-link btn-sm text-dark py-0 position-relative ${styles.btnLink}`}
onClick={() => props.updateVersionInQueryString(item.version, index)}
aria-label={`Update active version in querystring to ${item.version}`}
>
<FaLink />
</button>
</div>
{(item.containsSecurityUpdates || item.prerelease) && (
<div className={styles.badgesWrapper}>
{item.prerelease && (
<span className={`badge badge-sm rounded-pill me-2 position-relative border ${styles.badge}`}>
Pre-release
</span>
)}
{item.containsSecurityUpdates && (
<span className={`badge badge-sm rounded-pill me-2 position-relative border ${styles.badge}`}>
Contains security updates
</span>
)}
</div>
)}
{!isFuture(item.ts) && (
<div className="ms-auto ps-0 ps-md-2 text-nowrap">
<small className="text-muted">Released {moment.unix(item.ts).fromNow()}</small>
</div>
)}
</div>
<div className={`d-flex flex-column mb-4 ${styles.list}`}>
{item.changes.map((change: Change, idx: number) => (
<div key={`change_${item.version}_${idx}`} className="mb-1 w-100 d-flex flex-row">
<div className="d-flex align-items-start flex-row w-100">
{change.kind ? (
<div className={`position-relative ${styles.changeBadgeWrapper}`}>
<div
className={classnames(
'd-flex flex-row align-items-center justify-content-center text-uppercase badge rounded-pill me-2 fw-normal px-1 py-0',
styles.changeBadge,
styles[`${change.kind.toString()}ChangeBadge`]
)}
>
<span className={`position-relative ${styles.badgeIcon}`}>
{(() => {
switch (change.kind) {
case ChangeKind.added:
return <TiPlus />;
case ChangeKind.changed:
return <TiArrowSync />;
case ChangeKind.removed:
return <FaTrash />;
case ChangeKind.fixed:
return <FaWrench />;
case ChangeKind.security:
return <MdSecurity />;
case ChangeKind.deprecated:
return <RiTimerFill />;
default:
return <>-</>;
}
})()}
</span>
<span className="d-none d-md-block ms-1">{change.kind.toString()}</span>
</div>
</div>
) : (
<>
{hasBadge ? (
<div className={`position-relative ${styles.changeBadgeWrapper}`}>
<div
className={classnames(
'd-flex flex-row align-items-center justify-content-center text-uppercase badge rounded-pill me-2',
styles.changeBadge
)}
>
-
</div>
</div>
) : (
<div className="me-1 me-md-2">
<BsDot />
</div>
)}
</>
)}
<div className="flex-grow-1">
<div>{change.description}</div>
{!isUndefined(change.links) && (
<div className={`d-flex flex-row ${styles.linksWrapper}`}>
{change.links.map((link: PackageLink, idx: number) => {
return (
<div key={`change_${index}_link${idx}`}>
<ExternalLink
className={`text-muted text-decoration-underline ${styles.link}`}
href={link.url}
label={`Open link ${link.name}`}
>
{link.name}
</ExternalLink>
{idx !== change.links!.length - 1 && <BsDot className="text-muted" />}
</div>
);
})}
</div>
)}
</div>
</div>
</div>
))}
</div>
</div>
);
})}
</div>
</>
);
}
