react-intl#FormattedNumber JavaScript Examples
The following examples show how to use
react-intl#FormattedNumber.
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: LeaseRow.js From akashlytics-deploy with GNU General Public License v3.0 | 6 votes |
LeaseRow = React.memo(
function MemoLeaseRow({ lease }) {
const classes = useStyles();
return (
<TableRow>
<TableCell component="th" scope="row">
<StatusPill state={lease.state} size="small" />
</TableCell>
<TableCell>
<Link to={UrlService.deploymentDetails(lease.dseq)}>{lease.dseq}</Link>
</TableCell>
<TableCell>
<div className={classes.flexCenter}>
<PricePerMonth perBlockValue={uaktToAKT(lease.price.amount, 6)} />
<PriceEstimateTooltip value={uaktToAKT(lease.price.amount, 6)} />
<span className={classes.monthlyCost}>
<FormattedNumber value={lease.price.amount} maximumSignificantDigits={18} />
uakt ({`~${getAvgCostPerMonth(lease.price.amount)}akt/month`})
</span>
</div>
</TableCell>
</TableRow>
);
},
(prevProps, nextProps) => {
return isEqual(prevProps, nextProps);
}
)
Example #2
Source File: PriceValue.js From akashlytics-deploy with GNU General Public License v3.0 | 6 votes |
PriceValue = ({ value, showLt }) => {
const { priceData, isLoadingPriceData } = usePrice();
const _value = parseFloat(value) * priceData?.price;
const computedValue = _value > 0 ? ceilDecimal(_value) : 0;
return (
<>
{isLoadingPriceData && !priceData?.price && <CircularProgress size=".8rem" />}
{showLt && priceData?.price && _value !== computedValue && "< "}
{priceData?.price && (
<FormattedNumber
value={computedValue}
// eslint-disable-next-line react/style-prop-object
style="currency"
currency="USD"
/>
)}
</>
);
}
Example #3
Source File: FormFieldColumn.story.js From rainbow-modules with MIT License | 5 votes |
Basic = () => {
return (
<RainbowFirebaseApp app={firebase}>
<UniversalForm
initialValues={initialValues}
onSubmit={(value) => {
// eslint-disable-next-line no-alert
alert(JSON.stringify(value));
}}
>
<Table data={data} keyField="title" variant="listview">
<Column
header="title"
field="title"
name={({ index }) => `data[${index}].title`}
isEditable={isEditableColumn}
component={FormFieldColumn}
/>
<Column
header="cost"
field="cost"
name={({ index }) => `data[${index}].cost[0].amount`}
type="number"
isEditable={isEditableColumn}
component={FormFieldColumn}
cellAlignment="right"
cellComponent={({ value }) => {
return (
// eslint-disable-next-line react/style-prop-object
<FormattedNumber value={value} style="currency" currency="usd" />
);
}}
format={(value) => value / 100}
parse={(value) => value * 100}
/>
<Column
header="Five Stars"
field="fiveStarsPercent"
name={({ index }) => `data[${index}].fiveStarsPercent`}
type="number"
isEditable={isEditableColumn}
component={FormFieldColumn}
cellAlignment="right"
cellComponent={({ value }) => {
// eslint-disable-next-line react/style-prop-object
return <FormattedNumber value={value / 100} style="percent" />;
}}
format={(value) => value * 100}
parse={(value) => value / 100}
/>
</Table>
<Button className="rainbow-m-top_medium" type="submit" label="Submit" />
</UniversalForm>
</RainbowFirebaseApp>
);
}
Example #4
Source File: BidRow.js From akashlytics-deploy with GNU General Public License v3.0 | 4 votes |
export function BidRow({ bid, selectedBid, handleBidSelected, disabled, provider }) {
const classes = useStyles();
const [isViewingDetail, setIsViewingDetail] = useState(false);
const { favoriteProviders, updateFavoriteProviders } = useLocalNotes();
const isFavorite = favoriteProviders.some((x) => provider.owner === x);
const {
data: providerStatus,
isLoading: isLoadingStatus,
refetch: fetchProviderStatus,
error
} = useProviderStatus(provider?.host_uri, {
enabled: false,
retry: false
});
const onStarClick = () => {
const newFavorites = isFavorite ? favoriteProviders.filter((x) => x !== provider.owner) : favoriteProviders.concat([provider.owner]);
updateFavoriteProviders(newFavorites);
};
useEffect(() => {
if (provider) {
fetchProviderStatus();
}
}, [provider, fetchProviderStatus]);
return (
<ListItem disabled={bid.state !== "open" || disabled} dense>
<ListItemIcon>
<Radio
checked={selectedBid?.id === bid.id}
onChange={() => handleBidSelected(bid)}
value={bid.id}
name="radio-button-demo"
disabled={bid.state !== "open" || disabled}
size="medium"
/>
</ListItemIcon>
<ListItemText
id={`checkbox-list-label-${bid.id}`}
classes={{ secondary: classes.secondaryText }}
primaryTypographyProps={{
component: "div"
}}
secondaryTypographyProps={{
component: "div"
}}
primary={
<>
<PricePerMonth perBlockValue={uaktToAKT(bid.price.amount, 6)} className={classes.pricePerMonth} />
<div className={clsx(classes.flexCenter, classes.bidState)}>
<Chip
label={bid.state}
size="small"
color={bid.state === "open" ? "primary" : bid.state === "active" ? "primary" : "secondary"}
classes={{ root: classes.chip }}
/>
<Box component="span" marginLeft=".5rem">
<FormattedNumber value={bid.price.amount} maximumFractionDigits={18} /> uakt / block
</Box>
<Box className={classes.priceTooltip}>
<PriceEstimateTooltip value={uaktToAKT(bid.price.amount, 6)} />
</Box>
</div>
</>
}
secondary={
<div>
{isLoadingStatus && <CircularProgress size="1rem" />}
{providerStatus && (
<Typography variant="body2" color="textSecondary">
{providerStatus?.name}
</Typography>
)}
{error && (
<div className={clsx(classes.flexCenter, classes.providerOffline)}>
<CloudOffIcon className={clsx(classes.stateIcon, classes.stateInactive)} fontSize="small" />
<strong>OFFLINE</strong>
</div>
)}
{providerStatus && (
<div className={classes.flexCenter}>
<FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />
{provider.isAudited && (
<Box marginLeft=".5rem">
<AuditorButton provider={provider} />
</Box>
)}
<Box marginLeft=".5rem" display="flex">
<LinkTo onClick={() => setIsViewingDetail(true)}>View details</LinkTo>
</Box>
</div>
)}
</div>
}
/>
{provider && <ProviderAttributes provider={provider} />}
{isViewingDetail && provider && providerStatus && (
<ProviderDetailModal provider={{ ...provider, ...providerStatus }} address={bid.provider} onClose={() => setIsViewingDetail(false)} />
)}
</ListItem>
);
}
Example #5
Source File: LeaseRow.js From akashlytics-deploy with GNU General Public License v3.0 | 4 votes |
LeaseRow = React.forwardRef(({ lease, setActiveTab, deploymentManifest, dseq, providers, loadDeploymentDetail }, ref) => {
const { enqueueSnackbar } = useSnackbar();
const providerInfo = providers?.find((p) => p.owner === lease?.provider);
const { localCert } = useCertificate();
const isLeaseActive = lease.state === "active";
const [isServicesAvailable, setIsServicesAvailable] = useState(false);
const { favoriteProviders, updateFavoriteProviders } = useLocalNotes();
const [isViewingProviderDetail, setIsViewingProviderDetail] = useState(false);
const isFavorite = favoriteProviders.some((x) => lease?.provider === x);
const {
data: leaseStatus,
error,
refetch: getLeaseStatus,
isLoading: isLoadingLeaseStatus
} = useLeaseStatus(providerInfo?.host_uri, lease, {
enabled: isLeaseActive && !isServicesAvailable && !!providerInfo?.host_uri && !!localCert,
refetchInterval: 10_000,
onSuccess: (leaseStatus) => {
if (leaseStatus) {
checkIfServicesAreAvailable(leaseStatus);
}
}
});
const {
data: providerStatus,
isLoading: isLoadingProviderStatus,
refetch: getProviderStatus
} = useProviderStatus(providerInfo?.host_uri, {
enabled: false,
retry: false
});
const isLeaseNotFound = error && error.includes && error.includes("lease not found") && isLeaseActive;
const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : [];
const classes = useStyles();
const [isSendingManifest, setIsSendingManifest] = useState(false);
React.useImperativeHandle(ref, () => ({
getLeaseStatus: loadLeaseStatus
}));
const loadLeaseStatus = useCallback(() => {
if (isLeaseActive && providerInfo && localCert) {
getLeaseStatus();
getProviderStatus();
}
}, [isLeaseActive, providerInfo, localCert, getLeaseStatus, getProviderStatus]);
const checkIfServicesAreAvailable = (leaseStatus) => {
const servicesNames = leaseStatus ? Object.keys(leaseStatus.services) : [];
const isServicesAvailable =
servicesNames.length > 0
? servicesNames
.map((n) => leaseStatus.services[n])
.every((service, i) => {
return service.available > 0;
})
: false;
setIsServicesAvailable(isServicesAvailable);
};
useEffect(() => {
loadLeaseStatus();
}, [lease, providerInfo, localCert, loadLeaseStatus]);
function handleExternalUrlClick(ev, externalUrl) {
ev.preventDefault();
window.electron.openUrl("http://" + externalUrl);
}
function handleEditManifestClick(ev) {
ev.preventDefault();
setActiveTab("EDIT");
}
async function sendManifest() {
setIsSendingManifest(true);
try {
const doc = yaml.load(deploymentManifest);
const manifest = deploymentData.Manifest(doc);
await sendManifestToProvider(providerInfo, manifest, dseq, localCert);
enqueueSnackbar(<Snackbar title="Manifest sent!" iconVariant="success" />, { variant: "success", autoHideDuration: 10_000 });
loadDeploymentDetail();
} catch (err) {
enqueueSnackbar(<ManifestErrorSnackbar err={err} iconVariant="error" />, { variant: "error", autoHideDuration: null });
}
setIsSendingManifest(false);
}
const onStarClick = (event) => {
event.preventDefault();
event.stopPropagation();
const newFavorites = isFavorite ? favoriteProviders.filter((x) => x !== lease.provider) : favoriteProviders.concat([lease.provider]);
updateFavoriteProviders(newFavorites);
};
return (
<>
{isViewingProviderDetail && (
<ProviderDetailModal provider={{ ...providerStatus, ...providerInfo }} onClose={() => setIsViewingProviderDetail(false)} address={lease.provider} />
)}
<Card className={classes.root} elevation={4}>
<CardHeader
classes={{ title: classes.cardHeaderTitle, root: classes.cardHeader }}
title={
<Box display="flex">
<LabelValue
label="Status:"
value={
<>
<div>{lease.state}</div>
<StatusPill state={lease.state} size="small" />
</>
}
/>
<LabelValue label="GSEQ:" value={lease.gseq} marginLeft="1rem" fontSize="1rem" />
<LabelValue label="OSEQ:" value={lease.oseq} marginLeft="1rem" fontSize="1rem" />
{isLeaseActive && (
<Box marginLeft="1rem" display="inline-flex">
<LinkTo onClick={() => setActiveTab("LOGS")}>View logs</LinkTo>
</Box>
)}
</Box>
}
/>
<CardContent>
<Box display="flex">
<Box>
<Box paddingBottom="1rem">
<SpecDetail
cpuAmount={lease.cpuAmount}
memoryAmount={lease.memoryAmount}
storageAmount={lease.storageAmount}
color={isLeaseActive ? "primary" : "default"}
/>
</Box>
<LabelValue
label="Price:"
value={
<>
<PricePerMonth perBlockValue={uaktToAKT(lease.price.amount, 6)} />
<PriceEstimateTooltip value={uaktToAKT(lease.price.amount, 6)} />
<Box component="span" marginLeft=".5rem">
<FormattedNumber value={lease.price.amount} maximumSignificantDigits={18} />
uakt ({`~${getAvgCostPerMonth(lease.price.amount)}akt/month`})
</Box>
</>
}
/>
{isLeaseActive && (
<LabelValue
label="Provider:"
value={
<>
{isLoadingProviderStatus && <CircularProgress size="1rem" />}
{providerStatus && (
<>
<Link to={UrlService.providerDetail(lease.provider)}>{providerStatus.name}</Link>
<Box display="flex" alignItems="center" marginLeft={1}>
<FavoriteButton isFavorite={isFavorite} onClick={onStarClick} />
{providerInfo.isAudited && (
<Box marginLeft=".5rem">
<AuditorButton provider={providerInfo} />
</Box>
)}
<Box marginLeft=".5rem" display="flex">
<LinkTo onClick={() => setIsViewingProviderDetail(true)}>View details</LinkTo>
</Box>
</Box>
</>
)}
</>
}
marginTop="5px"
marginBottom=".5rem"
/>
)}
</Box>
{providerInfo && (
<Box paddingLeft="1rem" flexGrow={1}>
<ProviderAttributes provider={providerInfo} />
</Box>
)}
</Box>
{isLeaseNotFound && (
<Alert severity="warning">
The lease was not found on this provider. This can happen if no manifest was sent to the provider. To send one you can update your deployment in
the <LinkTo onClick={handleEditManifestClick}>VIEW / EDIT MANIFEST</LinkTo> tab.
{deploymentManifest && (
<>
<Box margin="1rem 0">
<strong>OR</strong>
</Box>
<Button variant="contained" color="primary" disabled={isSendingManifest} onClick={sendManifest} size="small">
{isSendingManifest ? <CircularProgress size="1.5rem" /> : <span>Send manifest manually</span>}
</Button>
</>
)}
</Alert>
)}
{!leaseStatus && isLoadingLeaseStatus && <CircularProgress size="1rem" />}
{isLeaseActive &&
leaseStatus &&
leaseStatus.services &&
servicesNames
.map((n) => leaseStatus.services[n])
.map((service, i) => (
<Box mb={1} key={`${service.name}_${i}`}>
<Box display="flex" alignItems="center">
<LabelValue label="Group:" value={service.name} fontSize="1rem" />
{isLoadingLeaseStatus || !isServicesAvailable ? (
<Box display="inline-flex" marginLeft="1rem">
<CircularProgress size="1rem" />
</Box>
) : (
<Box display="inline-flex" marginLeft=".5rem">
<Tooltip
classes={{ tooltip: classes.tooltip }}
arrow
interactive
title={
<>
Workloads can take some time to spin up. If you see an error when browsing the uri, it is recommended to refresh and wait a bit.
Check the{" "}
<LinkTo onClick={() => setActiveTab("LOGS")} className={classes.whiteLink}>
logs
</LinkTo>{" "}
for more information.
</>
}
>
<InfoIcon className={classes.tooltipIcon} fontSize="small" />
</Tooltip>
</Box>
)}
</Box>
<Box display="flex" alignItems="center" marginTop="2px">
<Box display="flex" alignItems="center">
<Typography variant="caption">Available: </Typography>
<Chip label={service.available} size="small" color={service.available > 0 ? "primary" : "default"} className={classes.serviceChip} />
</Box>
<Box display="flex" alignItems="center">
<Typography variant="caption" className={classes.marginLeft}>
Ready Replicas:
</Typography>
<Chip
label={service.ready_replicas}
size="small"
color={service.ready_replicas > 0 ? "primary" : "default"}
className={classes.serviceChip}
/>
</Box>
<Box display="flex" alignItems="center">
<Typography variant="caption" className={classes.marginLeft}>
Total:
</Typography>
<Chip label={service.total} size="small" color="primary" className={classes.serviceChip} />
</Box>
</Box>
{leaseStatus.forwarded_ports && leaseStatus.forwarded_ports[service.name]?.length > 0 && (
<Box marginTop="4px">
<LabelValue
label="Forwarded Ports:"
value={leaseStatus.forwarded_ports[service.name].map((p) => (
<Box key={"port_" + p.externalPort} display="inline" mr={0.5}>
<LinkTo label={``} disabled={p.available < 1} onClick={(ev) => handleExternalUrlClick(ev, `${p.host}:${p.externalPort}`)}>
{p.externalPort}:{p.port}
</LinkTo>
</Box>
))}
/>
</Box>
)}
{service.uris?.length > 0 && (
<>
<Box marginTop=".5rem">
<LabelValue label="Uris:" />
<List dense>
{service.uris.map((uri) => {
return (
<ListItem key={uri} className={classes.listItem}>
<ListItemText
primary={
<LinkTo className={classes.link} onClick={(ev) => handleExternalUrlClick(ev, uri)}>
{uri} <LaunchIcon fontSize="small" />
</LinkTo>
}
/>
<ListItemSecondaryAction>
<IconButton
edge="end"
aria-label="uri"
size="small"
onClick={(ev) => {
copyTextToClipboard(uri);
enqueueSnackbar(<Snackbar title="Uri copied to clipboard!" iconVariant="success" />, {
variant: "success",
autoHideDuration: 2000
});
}}
>
<FileCopyIcon fontSize="small" />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
</Box>
</>
)}
</Box>
))}
</CardContent>
</Card>
</>
);
})
Example #6
Source File: ContractClaimsPage.js From IBM-db2-blockchain-insurance-application with Apache License 2.0 | 4 votes |
render() {
const { contracts, intl, user } = this.props;
const { contractUuid } = this.props.match.params;
const { claims } = Array.isArray(contracts) ?
contracts.find(c => c.uuid == contractUuid) || {} : {};
if (!user) {
return (
<Redirect to='/self-service' />
);
}
function formatStatus(claim) {
if (!claim) {
return null;
}
let message, messageId, reimbursable;
switch (claim.status) {
case 'N':
messageId = claim.isTheft ? 'Expecting confirmation from police'
: 'Being Processed';
break;
case 'R':
messageId = claim.repaired ? 'Repaired' : 'To be repaired';
break;
case 'F':
messageId = 'Reimbursement';
reimbursable = <span>
, <FormattedNumber style='currency'
currency={intl.formatMessage({ id: 'currency code' })}
value={claim.reimbursable} minimumFractionDigits={2} />
</span>;
break;
case 'P':
messageId = 'Theft confirmed by police';
break;
case 'J':
messageId = 'Rejected';
break;
default:
messageId = 'Unknown';
}
if (messageId) {
message = <FormattedMessage id={messageId} />;
}
let fileReference;
if (claim.isTheft && claim.fileReference) {
fileReference = (
<span>
, <FormattedMessage id='File Reference' />: {claim.fileReference}
</span>
);
}
return (
<span>{message}{fileReference}{reimbursable}</span>
);
}
const cards = Array.isArray(claims) ? claims.map((claim, index) => (
<div key={index} className='ibm-col-5-2 ibm-col-medium-6-2'>
<div className='ibm-card ibm-border-gray-50'>
<div className='ibm-card__content'>
<h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
<div style={{ wordWrap: 'break-word' }}>
<FormattedMessage id='Creation Date' />:
<FormattedDate value={claim.date} /> <br />
<FormattedMessage id='Theft' />:
<input type='checkbox' ref='theftField'
className='ibm-styled-checkbox' checked={claim.isTheft} />
<label className='ibm-field-label' htmlFor='theftField' /><br />
<FormattedMessage id='Description' />: {claim.description}<br />
<FormattedMessage id='Status' />: {formatStatus(claim)}
</div>
<br />
</div>
</div>
</div>
)) : (
<div className='ibm-col-5-5 ibm-col-medium-6-6'>
<FormattedMessage id={`You haven't filed any claims yet.`} />
</div>
);
return (
<div style={{ minHeight: '30vh' }}>
<div className='ibm-columns'>
<div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
<h3 className='ibm-h3'>
<FormattedMessage id='Claims to Selected Contract' />
</h3>
</div>
</div>
<div className='ibm-columns ibm-cards' data-widget='masonry'
data-items='.ibm-col-5-1'>
{cards}
</div>
</div>
);
}
Example #7
Source File: PaymentPage.js From IBM-db2-blockchain-insurance-application with Apache License 2.0 | 4 votes |
render() {
let paymentStatus;
const { intl, productInfo, contractInfo } = this.props;
const { redirectToNext } = this.state;
const startDate = moment(new Date(contractInfo.startDate));
const endDate = moment(new Date(contractInfo.endDate));
const dateDiff = moment.duration(endDate.diff(startDate)).asDays();
const insurancePrice = dateDiff * (
contractInfo.formulaPerDay(productInfo.price));
const total = productInfo.price + insurancePrice;
if (redirectToNext) {
return (
<Redirect to='/summary' />
);
}
if (!productInfo) {
return (
<Redirect to='/' />
);
}
return (
<Loading hidden={!this.state.loading} text={intl.formatMessage({
id: 'Processing Transaction...'
})}>
<div>
<div className='ibm-columns'>
<div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
<h3 className='ibm-h3'>
<FormattedMessage id='Payment' />
</h3>
</div>
</div>
<div className='ibm-columns'>
<div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
<table cols='2' style={{ width: '100%' }}>
<tbody>
<tr>
<td style={{ padding: '.3em' }} colSpan='2'
className='ibm-background-blue-20'>
<h4 className='ibm-h4'>
<FormattedMessage id='Product' />
</h4>
</td>
</tr>
<tr>
<td>
{productInfo.brand}
<br />
{productInfo.model}
<br />
<FormattedMessage id='Serial No.' />: {productInfo.serialNo}
</td>
<td className='ibm-right'>
<FormattedNumber style='currency'
currency={intl.formatMessage({ id: 'currency code' })}
value={productInfo.price} minimumFractionDigits={2} />
</td>
</tr>
<tr>
<td style={{ padding: '.3em' }} colSpan='2'
className='ibm-background-blue-20'>
<h4 className='ibm-h4'>
<FormattedMessage id='Services' />
</h4>
</td>
</tr>
<tr>
<td>
<FormattedMessage id='Insurance' />
</td>
<td className='ibm-right'>
<FormattedNumber style='currency'
currency={intl.formatMessage({ id: 'currency code' })}
value={insurancePrice} minimumFractionDigits={2} />
</td>
</tr>
<tr>
<td className='ibm-background-gray-10'
style={{ padding: '.3em' }}>
<h3 className='ibm-h3'>
<FormattedMessage id='Total' />
</h3>
</td>
<td className='ibm-background-gray-10 ibm-right'>
<h3 className='ibm-h3'>
<FormattedNumber style='currency'
currency={intl.formatMessage({ id: 'currency code' })}
value={total} minimumFractionDigits={2} />
</h3>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className='ibm-columns'>
<div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1 ibm-right'>
<button type='button' className='ibm-btn-pri ibm-btn-blue-50'
onClick={this.order}><FormattedMessage id='Order' /></button>
</div>
</div>
</div>
</Loading>
);
}