@material-ui/icons#ChevronLeft TypeScript Examples
The following examples show how to use
@material-ui/icons#ChevronLeft.
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.tsx From prism-frontend with MIT License | 4 votes |
|
function DateSelector({ availableDates = [], classes }: DateSelectorProps) {
const { startDate: stateStartDate } = useSelector(dateRangeSelector);
const { t, i18n } = useSafeTranslation();
const [dateRange, setDateRange] = useState<DateRangeType[]>([
{
value: 0,
label: '',
month: '',
isFirstDay: false,
},
]);
const [timelinePosition, setTimelinePosition] = useState<Point>({
x: 0,
y: 0,
});
const [pointerPosition, setPointerPosition] = useState<Point>({ x: 0, y: 0 });
const dateRef = useRef(availableDates);
const timeLine = useRef(null);
const timeLineWidth = get(timeLine.current, 'offsetWidth', 0);
const { updateHistory } = useUrlHistory();
// Move the slider automatically so that the pointer always visible
useEffect(() => {
let x = 0;
if (
pointerPosition.x >=
dateRange.length * TIMELINE_ITEM_WIDTH - timeLineWidth
) {
// eslint-disable-next-line fp/no-mutation
x = timeLineWidth - dateRange.length * TIMELINE_ITEM_WIDTH;
} else if (pointerPosition.x > timeLineWidth) {
// eslint-disable-next-line fp/no-mutation
x = -pointerPosition.x + timeLineWidth / 2;
}
if (
-timelinePosition.x > pointerPosition.x ||
-timelinePosition.x + timeLineWidth < pointerPosition.x
) {
setTimelinePosition({ x, y: 0 });
}
}, [dateRange.length, pointerPosition, timeLineWidth, timelinePosition.x]);
// Create timeline range and set pointer position
useEffect(() => {
const locale = t('date_locale') ? t('date_locale') : 'en';
const range = Array.from(
moment()
.range(
moment(stateStartDate).startOf('year'),
moment(stateStartDate).endOf('year'),
)
.by('days'),
).map(date => {
date.locale(locale);
return {
value: date.valueOf(),
label: date.format(MONTH_FIRST_DATE_FORMAT),
month: date.format(MONTH_ONLY_DATE_FORMAT),
isFirstDay: date.date() === date.startOf('month').date(),
};
});
setDateRange(range);
const dateIndex = findIndex(range, date => {
return (
date.label ===
moment(stateStartDate).locale(locale).format(MONTH_FIRST_DATE_FORMAT)
);
});
setPointerPosition({
x: dateIndex * TIMELINE_ITEM_WIDTH,
y: 0,
});
}, [stateStartDate, t, i18n]);
function updateStartDate(date: Date) {
const time = date.getTime();
// This updates state because a useEffect in MapView updates the redux state
// TODO this is convoluted coupling, we should update state here if feasible.
updateHistory('date', moment(time).format(DEFAULT_DATE_FORMAT));
}
function setDatePosition(date: number | undefined, increment: number) {
const dates = availableDates.map(d => {
return d + USER_DATE_OFFSET;
});
const selectedIndex = findDateIndex(dates, date);
if (dates[selectedIndex + increment]) {
updateStartDate(new Date(dates[selectedIndex + increment]));
}
}
// move pointer to closest date when change map layer
useEffect(() => {
if (!isEqual(dateRef.current, availableDates)) {
setDatePosition(stateStartDate, 0);
dateRef.current = availableDates;
}
});
function incrementDate() {
setDatePosition(stateStartDate, 1);
}
function decrementDate() {
setDatePosition(stateStartDate, -1);
}
// Click on available date to move the pointer
const clickDate = (index: number) => {
const dates = availableDates.map(date => {
return date + USER_DATE_OFFSET;
});
const selectedIndex = findDateIndex(dates, dateRange[index].value);
if (selectedIndex >= 0 && dates[selectedIndex] !== stateStartDate) {
setPointerPosition({ x: index * TIMELINE_ITEM_WIDTH, y: 0 });
updateStartDate(new Date(dates[selectedIndex]));
}
};
// Set timeline position after being dragged
const onTimelineStop = (e: DraggableEvent, position: Point) => {
setTimelinePosition(position);
};
// Set pointer position after being dragged
const onPointerStop = (e: DraggableEvent, position: Point) => {
const exactX = Math.round(position.x / TIMELINE_ITEM_WIDTH);
if (exactX >= dateRange.length) {
return;
}
const dates = availableDates.map(date => {
return date + USER_DATE_OFFSET;
});
const selectedIndex = findDateIndex(dates, dateRange[exactX].value);
if (selectedIndex >= 0 && dates[selectedIndex] !== stateStartDate) {
setPointerPosition({ x: exactX * TIMELINE_ITEM_WIDTH, y: position.y });
updateStartDate(new Date(dates[selectedIndex]));
}
};
return (
<div className={classes.container}>
<Grid
container
alignItems="center"
justify="center"
className={classes.datePickerContainer}
>
<Grid item xs={12} sm={1} className={classes.datePickerGrid}>
<Hidden smUp>
<Button onClick={decrementDate}>
<ChevronLeft />
</Button>
</Hidden>
<DatePicker
locale={t('date_locale')}
dateFormat="PP"
className={classes.datePickerInput}
selected={moment(stateStartDate).toDate()}
onChange={updateStartDate}
maxDate={new Date()}
todayButton={t('Today')}
peekNextMonth
showMonthDropdown
showYearDropdown
dropdownMode="select"
customInput={<Input />}
includeDates={availableDates.map(
d => new Date(d + USER_DATE_OFFSET),
)}
/>
<Hidden smUp>
<Button onClick={incrementDate}>
<ChevronRight />
</Button>
</Hidden>
</Grid>
<Grid item xs={12} sm className={classes.slider}>
<Hidden xsDown>
<Button onClick={decrementDate}>
<ChevronLeft />
</Button>
</Hidden>
<Grid className={classes.dateContainer} ref={timeLine}>
<Draggable
axis="x"
handle={`#${TIMELINE_ID}`}
bounds={{
top: 0,
bottom: 0,
right: 0,
left: timeLineWidth - dateRange.length * TIMELINE_ITEM_WIDTH,
}}
position={timelinePosition}
onStop={onTimelineStop}
>
<div className={classes.timeline} id={TIMELINE_ID}>
<Grid
container
alignItems="stretch"
className={classes.dateLabelContainer}
>
<TimelineItems
dateRange={dateRange}
availableDates={availableDates}
clickDate={clickDate}
/>
</Grid>
<Draggable
axis="x"
handle={`#${POINTER_ID}`}
bounds={{
top: 0,
bottom: 0,
left: 0,
right: dateRange.length * TIMELINE_ITEM_WIDTH,
}}
grid={[TIMELINE_ITEM_WIDTH, 1]}
position={pointerPosition}
onStart={(e: DraggableEvent) => e.stopPropagation()}
onStop={onPointerStop}
>
<div className={classes.pointer} id={POINTER_ID}>
<FontAwesomeIcon
icon={faCaretUp}
style={{ fontSize: 40 }}
color="white"
/>
</div>
</Draggable>
</div>
</Draggable>
</Grid>
<Hidden xsDown>
<Button onClick={incrementDate}>
<ChevronRight />
</Button>
</Hidden>
</Grid>
</Grid>
</div>
);
}
Example #2
| Source File: Vulnerability.tsx From crossfeed with Creative Commons Zero v1.0 Universal | 4 votes |
|
Vulnerability: React.FC = () => {
const { vulnerabilityId } = useParams();
const { apiGet, apiPut } = useAuthContext();
const [vulnerability, setVulnerability] = useState<VulnerabilityType>();
const [comment, setComment] = useState<string>('');
const [showCommentForm, setShowCommentForm] = useState<boolean>(false);
const [menuAnchor, setMenuAnchor] = React.useState<null | HTMLElement>(null);
const classes = useStyles();
const history = useHistory();
const formatDate = (date: string) => {
return format(parseISO(date), 'MM-dd-yyyy');
};
const fetchVulnerability = useCallback(async () => {
try {
const result = await apiGet<VulnerabilityType>(
`/vulnerabilities/${vulnerabilityId}`
);
setVulnerability(result);
} catch (e) {
console.error(e);
}
}, [vulnerabilityId, apiGet]);
const updateVulnerability = async (body: { [key: string]: string }) => {
try {
if (!vulnerability) return;
const res = await apiPut<VulnerabilityType>(
'/vulnerabilities/' + vulnerability.id,
{
body: body
}
);
setVulnerability({
...vulnerability,
state: res.state,
substate: res.substate,
actions: res.actions
});
} catch (e) {
console.error(e);
}
};
useEffect(() => {
fetchVulnerability();
}, [fetchVulnerability]);
if (!vulnerability) return <></>;
const references = vulnerability.references.map((ref) => ref);
if (vulnerability.cve)
references.unshift({
name: 'NIST National Vulnerability Database',
url: `https://nvd.nist.gov/vuln/detail/${vulnerability.cve}`,
source: '',
tags: []
});
const states = [
'unconfirmed',
'exploitable',
'false-positive',
'accepted-risk',
'remediated'
];
interface dnstwist {
'domain-name': string;
fuzzer: string;
'dns-a'?: string;
'dns-aaas'?: string;
'dns-mx'?: string;
'dns-ns'?: string;
'date-first-observed'?: string;
}
return (
<>
{/* <Alert severity="info">
This vulnerability is found on 17 domains you have access to.
</Alert> */}
<div className={classes.root}>
<p>
<Link
to="# "
onClick={() => history.goBack()}
className={classes.backLink}
>
<ChevronLeft
style={{
height: '100%',
verticalAlign: 'middle',
marginTop: '-2px'
}}
></ChevronLeft>
Go back
</Link>
</p>
<div className={classes.contentWrapper}>
<div className={classes.content}>
<div
className={classes.panel}
style={{
flex: '0 0 45%'
}}
>
<Paper classes={{ root: classes.cardRoot }}>
<div className={classes.title}>
<h4>{vulnerability.title}</h4>
<Button
aria-haspopup="true"
onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
setMenuAnchor(event.currentTarget)
}
>
<Flag
style={{
fontSize: '14px',
color: '#A9AEB1',
marginRight: '5px'
}}
></Flag>
Mark Item <ArrowDropDown />
</Button>
<Menu
anchorEl={menuAnchor}
keepMounted
open={Boolean(menuAnchor)}
getContentAnchorEl={null}
onClose={() => setMenuAnchor(null)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
{states.map((state) => (
<MenuItem
key={state}
onClick={() => {
updateVulnerability({
substate: state
});
setMenuAnchor(null);
}}
style={{ outline: 'none' }}
>
{stateMap[state]}
</MenuItem>
))}
</Menu>
</div>
<Chip
style={{
marginLeft: '1.5rem'
}}
// icon={<Check></Check>}
label={`${vulnerability.state[0].toUpperCase()}${vulnerability.state.slice(
1
)} (${stateMap[vulnerability.substate]})`}
color={
vulnerability.state === 'open' ? 'secondary' : 'default'
}
/>
<div className={classes.inner}>
<div className={classes.section}>
<h4 className={classes.subtitle}>Description</h4>
{vulnerability.description}
</div>
<div className={classes.section}>
<h4 className={classes.subtitle}>References</h4>
{references &&
references.map((ref, index) => (
<p key={index}>
<a
href={ref.url}
target="_blank"
rel="noopener noreferrer"
>
{ref.name ? ref.name : ref.url}
</a>
{ref.tags.length > 0
? ' - ' + ref.tags.join(',')
: ''}
</p>
))}
</div>
{vulnerability.source === 'hibp' && (
<div className={classes.section}>
<h4 className={classes.subtitle}>Data</h4>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Exposed Emails</TableCell>
<TableCell align="right">Breaches</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.keys(
vulnerability.structuredData['emails']
).map((keyName, keyIndex) => (
<TableRow key={keyName}>
<TableCell component="th" scope="row">
{keyName}
</TableCell>
<TableCell align="right">
{vulnerability.structuredData['emails'][
keyName
].join(', ')}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
{vulnerability.source === 'lookingGlass' && (
<div className={classes.section}>
<h4 className={classes.subtitle}>Data</h4>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>First Seen</TableCell>
<TableCell align="right">Last Seen</TableCell>
<TableCell align="right">Vuln Name</TableCell>
<TableCell align="right">Type</TableCell>
</TableRow>
</TableHead>
<TableBody>
{vulnerability.structuredData['lookingGlassData'].map(
(col: any) => (
<TableRow key={col.right_name}>
<TableCell component="th" scope="row">
{formatDistanceToNow(
parseISO(col.firstSeen)
) + ' ago'}
</TableCell>
<TableCell align="right">
{formatDistanceToNow(parseISO(col.lastSeen)) +
' ago'}
</TableCell>
<TableCell align="right">
{col.right_name}
</TableCell>
<TableCell align="right">
{col.vulnOrMal}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</div>
)}
{vulnerability.source === 'dnstwist' && (
<div className={classes.section}>
<h4 className={classes.subtitle}>Data</h4>
<TableContainer>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Domain Name</TableCell>
<TableCell>IP Address / A Record</TableCell>
<TableCell>MX Record</TableCell>
<TableCell>NS Record</TableCell>
<TableCell>Date Observed</TableCell>
<TableCell>Fuzzer</TableCell>
</TableRow>
</TableHead>
<TableBody>
{vulnerability.structuredData['domains'].map(
(dom: dnstwist) => (
<TableRow key={dom['domain-name']}>
<TableCell component="th" scope="row">
{dom['domain-name']}
</TableCell>
<TableCell>{dom['dns-a']}</TableCell>
<TableCell>{dom['dns-mx']}</TableCell>
<TableCell>{dom['dns-ns']}</TableCell>
<TableCell>
{dom['date-first-observed']}
</TableCell>
<TableCell>{dom['fuzzer']}</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</TableContainer>
</div>
)}
</div>
</Paper>
</div>
<div
className={classes.panel}
style={{
flex: '0 0 30%'
}}
>
<Paper className={classes.cardRoot}>
<div className={classes.inner}>
<div className={classes.section}>
<h2 className={classes.subtitle}>Team notes</h2>
<button
onClick={() => {
setShowCommentForm(!showCommentForm);
}}
className={classes.linkSmall}
>
Add new note
</button>
</div>
{showCommentForm && (
<div>
<TextareaAutosize
style={{
width: '100%',
padding: 10,
marginBottom: '20px'
}}
rowsMin={4}
placeholder="Leave a Note"
onChange={(e) => setComment(e.target.value)}
/>
<Button
onClick={() => {
updateVulnerability({
comment
});
setComment('');
setShowCommentForm(false);
}}
style={{
width: 150,
marginBottom: '20px'
}}
variant="contained"
color="secondary"
>
Save
</Button>
</div>
)}
{vulnerability.actions &&
vulnerability.actions
.filter((action) => action.type === 'comment')
.map((action, index) => (
<div className={classes.section} key={index}>
<h4
className={classes.subtitle}
style={{ fontSize: '16px', display: 'inline' }}
>
{action.userName}
</h4>
<span style={{ float: 'right', display: 'inline' }}>
{formatDistanceToNow(parseISO(action.date))} ago
</span>
<ReactMarkdown linkTarget="_blank">
{action.value || ''}
</ReactMarkdown>
</div>
))}
</div>
</Paper>
<Paper className={classes.cardRoot}>
<div className={classes.inner}>
<div className={classes.section}>
<h2 className={classes.subtitle}>Vulnerability History</h2>
</div>
<Timeline
style={{
position: 'relative',
marginLeft: '-90%'
}}
align="left"
>
{vulnerability.actions &&
vulnerability.actions
.filter(
(action) =>
action.type === 'state-change' && action.substate
)
.map((action, index) => (
<TimelineItem key={index}>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>{' '}
<TimelineContent>
State {action.automatic ? 'automatically ' : ''}
changed to {action.state} (
{stateMap[action.substate!].toLowerCase()})
{action.userName ? ' by ' + action.userName : ''}{' '}
<br></br>
<span
style={{
color: '#A9AEB1'
}}
>
{formatDate(action.date)}
</span>
</TimelineContent>
</TimelineItem>
))}
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
</TimelineSeparator>
<TimelineContent>
Vulnerability opened<br></br>
<span
style={{
color: '#A9AEB1'
}}
>
{formatDate(vulnerability.createdAt)}
</span>
</TimelineContent>
</TimelineItem>
</Timeline>
</div>
</Paper>
<Paper className={classes.cardRoot}>
<div className={classes.inner}>
<div className={classes.section}>
<h2 className={classes.subtitle}>Provenance</h2>
<p>
<strong>Root Domain: </strong>
{vulnerability.domain.fromRootDomain}
</p>
<p>
<strong>Subdomain: </strong>
{vulnerability.domain.name} (
{vulnerability.domain.subdomainSource})
</p>
{vulnerability.service && (
<p>
<strong>Service/Port: </strong>
{vulnerability.service.service
? vulnerability.service.service
: vulnerability.service.port}{' '}
({vulnerability.service.serviceSource})
</p>
)}
{vulnerability.cpe && (
<>
<p>
<strong>Product: </strong>
{vulnerability.cpe}
</p>
</>
)}
<p>
<strong>Vulnerability: </strong>
{vulnerability.title} ({vulnerability.source})
</p>
</div>
</div>
</Paper>
{vulnerability.source === 'hibp' && (
<Paper className={classes.cardRoot}>
<div className={classes.inner}>
<div className={classes.section}>
<h2 className={classes.subtitle}>Breaches</h2>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Breach Name</TableCell>
<TableCell align="right">Date Added</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.keys(vulnerability.structuredData['breaches'])
.sort(
(a, b) =>
parseISO(
vulnerability.structuredData['breaches'][b][
'AddedDate'
]
).getTime() -
parseISO(
vulnerability.structuredData['breaches'][a][
'AddedDate'
]
).getTime()
)
.map((keyName, keyIndex) => (
<TableRow key={keyName}>
<TableCell component="th" scope="row">
{keyName}
</TableCell>
<TableCell align="right">
{formatDistanceToNow(
parseISO(
vulnerability.structuredData['breaches'][
keyName
]['AddedDate']
)
) + ' ago'}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
</Paper>
)}
</div>
</div>
</div>
</div>
</>
);
}
