@fortawesome/free-solid-svg-icons#faAngleLeft TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faAngleLeft.
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: PaginationButtons.tsx From advocacy-maps with MIT License | 6 votes |
|
PaginationButtons = ({
pagination: {
currentPage,
nextPage,
hasNextPage,
previousPage,
hasPreviousPage
}
}: {
pagination: Pagination
}) => (
<div className="d-flex justify-content-center mb-3">
<Button
variant="primary"
style={{ marginRight: 15 }}
onClick={previousPage}
disabled={!hasPreviousPage}
>
<FontAwesomeIcon icon={faAngleLeft} />
</Button>
<span>Page {currentPage}</span>
<Button
variant="primary"
style={{ marginLeft: 15 }}
onClick={nextPage}
disabled={!hasNextPage}
>
<FontAwesomeIcon icon={faAngleRight} />
</Button>
</div>
)
Example #2
| Source File: form-stepper.tsx From example with MIT License | 5 votes |
|
export function FormStepper({ steps, onComplete }: IFormStepperProps) {
const [state, setFormResponse] = useReducer((prevState: any, action: {
type: "next"
response: any
} | {
type: "prev"
}) => {
const state = cloneDeep(prevState)
switch (action.type) {
case "next":
state.responses[state.currentStep] = action.response
state.currentStep = Math.min(state.currentStep + 1, steps.length - 1)
return state
case "prev":
state.currentStep = Math.max(state.currentStep - 1, 0)
return state
}
}, {
currentStep: 0,
responses: []
})
console.log(state)
return (
<>
<Stepper activeStep={state.currentStep}>
{
steps.map((step, index) => {
const last = index === steps.length - 1
const lastCompleted = last && state.currentStep === steps.length - 1
return <Step
key={index}
index={index}
sx={{
".Mui-completed": {
color: lastCompleted ? "green" : "primary"
}
}}
completed={lastCompleted ? true : undefined}
>
<StepLabel>{step.label}</StepLabel>
</Step>
})
}
</Stepper>
<Box sx={{ mt: 4 }}>
{steps[state.currentStep].render(
(formResponse) => {
setFormResponse({ type: "next", response: formResponse })
if (state.currentStep === steps.length - 1) {
onComplete?.(formResponse)
}
},
state.responses[state.currentStep - 1]
)}
</Box>
{
state.currentStep > 0 &&
<Box sx={{ mt: 2 }}>
<Button
startIcon={<Icon icon={faAngleLeft}/>}
color={"inherit"}
variant="text"
onClick={() => setFormResponse({ type: "prev" })}
>
Back
</Button>
</Box>
}
</>
)
}
Example #3
| Source File: DSBlockDetailsPage.tsx From devex with GNU General Public License v3.0 | 4 votes |
|
DSBlockDetailsPage: React.FC = () => {
const { blockNum } = useParams()
const networkContext = useContext(NetworkContext)
const { dataService } = networkContext!
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [data, setData] = useState<DsBlockObj | null>(null)
const [latestDSBlockNum, setLatestDSBlockNum] = useState<number | null>(null)
const [minerInfo, setMinerInfo] = useState<MinerInfo | null>(null)
const [currShardIdx, setCurrShardIdx] = useState<number>(0)
const [showMore, setShowMore] = useState<boolean>(false)
// Fetch data
useEffect(() => {
setIsLoading(true)
if (!dataService) return
let latestDSBlockNum: number
let receivedData: DsBlockObj
let minerInfo: MinerInfo
const getData = async () => {
try {
if (isNaN(blockNum))
throw new Error('Not a valid block number')
receivedData = await dataService.getDSBlockDetails(blockNum)
latestDSBlockNum = await dataService.getNumDSBlocks()
try { // wrapped in another try catch because it is optional
minerInfo = await dataService.getMinerInfo(blockNum)
} catch (e) { console.log(e) }
if (receivedData)
setData(receivedData)
if (latestDSBlockNum)
setLatestDSBlockNum(latestDSBlockNum)
if (minerInfo)
setMinerInfo(minerInfo)
} catch (e) {
console.log(e)
setError(e)
} finally {
setIsLoading(false)
}
}
getData()
return () => {
setData(null)
setLatestDSBlockNum(null)
setMinerInfo(null)
setError(null)
setCurrShardIdx(0)
setShowMore(false)
}
}, [blockNum, dataService])
return <>
{isLoading ? <div className='center-spinner'><Spinner animation="border" /></div> : null}
{error
? <NotFoundPage />
: data && (
<>
<div className='dsblock-header'>
<h3 className='mb-1'>
<span className='mr-1'>
<FontAwesomeIcon className='fa-icon' icon={faCubes} />
</span>
<span className='ml-2'>
DS Block
</span>
{' '}
<span className='subtext'>#{data.header.BlockNum}</span>
<LabelStar type='DS Block' />
</h3>
<span>
<QueryPreservingLink
className={parseInt(data.header.BlockNum) === 0
? 'disabled mr-3' : 'mr-3'}
to={`/dsbk/${parseInt(data.header.BlockNum) - 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareLeft} />
</QueryPreservingLink>
<QueryPreservingLink
className={latestDSBlockNum && parseInt(data.header.BlockNum) === latestDSBlockNum - 1 ? 'disabled' : ''}
to={`/dsbk/${parseInt(data.header.BlockNum) + 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareRight} />
</QueryPreservingLink>
</span>
</div>
<Card className='dsblock-details-card'>
<Card.Body>
<Container>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Date:</span>
<span>
{timestampToDisplay(data.header.Timestamp)}
{' '}
({timestampToTimeago(data.header.Timestamp)})
</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Difficulty:</span>
<span>{data.header.Difficulty}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Difficulty:</span>
<span>{data.header.DifficultyDS}</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Gas Price:</span>
<span>{qaToZil(data.header.GasPrice)}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Leader:</span>
<span>
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(data.header.LeaderPubKey)}`}>
{pubKeyToZilAddr(data.header.LeaderPubKey)}
</QueryPreservingLink>
</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Signature:</span>
<span className='dsblock-signature'>{data.signature}</span>
</div>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
{data.header.PoWWinners.length > 0 && (
<Card className='dsblock-details-card'>
<Card.Body>
<Container className='mono'>
<h6 className='mb-2'>PoW Winners</h6>
{data.header.PoWWinners.map((x, index) => <div key={index}>[{index}]
{' '}
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(x)}`}>{pubKeyToZilAddr(x)}</QueryPreservingLink></div>)}
</Container>
</Card.Body>
</Card>
)}
{minerInfo &&
<>
<Collapse in={showMore}>
<Row>
<Col>
<Card className='miner-card'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<span>DS Committee</span>
<span>Total: <strong>{minerInfo.dscommittee.length}</strong></span>
</Row>
<Row className='justify-content-center'>
{minerInfo.dscommittee.length > 0
? <MinerTable addresses={minerInfo.dscommittee} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
<Col>
<Card className='miner-card ml-auto'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<Col>
<span>Shard {currShardIdx + 1} of {minerInfo.shards.length}</span>
</Col>
<Col className='text-center shard-toggle'>
<span>
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === 0 ? undefined : () => (setCurrShardIdx(currShardIdx - 1))}
className={currShardIdx === 0 ? 'disabled' : ''} icon={faAngleLeft} />
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === minerInfo.shards.length - 1 ? undefined : () => (setCurrShardIdx(currShardIdx + 1))}
className={currShardIdx === minerInfo.shards.length - 1 ? 'disabled ml-3' : 'ml-3'} icon={faAngleRight} />
</span>
</Col>
<Col className='text-right'>
<span>
Total:
{' '}
<strong>{minerInfo.shards[currShardIdx].nodes.length}</strong>
</span>
</Col>
</Row>
<Row className='justify-content-center'>
{minerInfo.shards[currShardIdx].nodes.length > 0
? <MinerTable addresses={minerInfo.shards[currShardIdx].nodes} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
</Row>
</Collapse>
</>
}
<Container className='showmore-container' onClick={() => setShowMore(!showMore)}>
<Row>
<FontAwesomeIcon icon={showMore ? faAngleUp : faAngleDown} size='2x' className='fa-icon' />
</Row>
</Container>
</>
)}
</>
}
Example #4
| Source File: MemberDialog.tsx From knboard with MIT License | 4 votes |
|
MemberDialog = ({ board }: Props) => {
const theme = useTheme();
const dispatch = useDispatch();
const memberId = useSelector((state: RootState) => state.member.dialogMember);
const members = useSelector(selectMembersEntities);
const boardOwner = useSelector((state: RootState) =>
currentBoardOwner(state)
);
const xsDown = useMediaQuery(theme.breakpoints.down("xs"));
const [confirmDelete, setConfirmDelete] = useState(false);
const member = memberId === null ? null : members[memberId];
const memberIsOwner = member?.id === board.owner;
const open = member !== null;
if (!member) {
return null;
}
const handleClose = () => {
dispatch(setDialogMember(null));
setConfirmDelete(false);
};
const handleRemoveMember = async () => {
try {
const response = await api.post(
`${API_BOARDS}${board.id}/remove_member/`,
{ username: member.username }
);
const removedMember = response.data as BoardMember;
dispatch(removeBoardMember(removedMember.id));
dispatch(createSuccessToast(`Removed ${removedMember.username}`));
handleClose();
} catch (err) {
dispatch(createErrorToast(err.toString()));
}
};
return (
<Dialog
open={open}
onClose={handleClose}
maxWidth="xs"
fullWidth
fullScreen={xsDown}
>
<Close onClose={handleClose} />
<DialogTitle id="member-detail">Member</DialogTitle>
<Container theme={theme}>
{confirmDelete ? (
<div>
<Alert
severity="error"
css={css`
margin-bottom: 2rem;
`}
>
Are you sure you want to remove this member? This member will be
removed from all cards.
</Alert>
<ConfirmAction>
<Fab
size="small"
onClick={() => setConfirmDelete(false)}
css={css`
box-shadow: none;
&.MuiFab-sizeSmall {
width: 32px;
height: 32px;
}
`}
>
<FontAwesomeIcon icon={faAngleLeft} color="#555" />
</Fab>
<Button
size="small"
color="secondary"
variant="contained"
onClick={handleRemoveMember}
css={css`
font-size: 0.625rem;
`}
>
Remove member
</Button>
</ConfirmAction>
</div>
) : (
<>
<Avatar
css={css`
height: 6rem;
width: 6rem;
font-size: 36px;
margin-bottom: 1rem;
`}
src={member?.avatar?.photo}
alt={member?.avatar?.name}
>
{member.username.charAt(0)}
</Avatar>
<Main>
<PrimaryText>
{member.first_name} {member.last_name}
</PrimaryText>
<SecondaryText>
username: <b>{member.username}</b>
</SecondaryText>
<SecondaryText
css={css`
margin-bottom: 1.5rem;
`}
>
email: <b>{member?.email || "-"}</b>
</SecondaryText>
{memberIsOwner && (
<Alert severity="info">Owner of this board</Alert>
)}
{boardOwner && !memberIsOwner && (
<Button
size="small"
css={css`
color: #333;
font-size: 0.625rem;
`}
variant="outlined"
onClick={() => setConfirmDelete(true)}
>
Remove from board
</Button>
)}
</Main>
</>
)}
</Container>
</Dialog>
);
}
