@material-ui/icons#Schedule TypeScript Examples
The following examples show how to use
@material-ui/icons#Schedule.
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: with-channelValue-children.tsx From react-component-library with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
withChannelValueChildren = (): StoryFnReactReturnType => (
<Hero label={'Duration'} icon={<Schedule fontSize={'inherit'} />}>
<ChannelValue
fontSize={20}
value={number('ChannelValue.hours', 1)}
units={'h'}
unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
/>
<ChannelValue
fontSize={20}
value={number('ChannelValue.minutes', 27)}
units={'m'}
unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
/>
</Hero>
)
Example #2
| Source File: Grid.tsx From anchor-web-app with Apache License 2.0 | 5 votes |
|
function GridBase({
className,
isLast,
polls,
govANCBalance,
govState,
govConfig,
onClick,
onLoadMore,
}: GridProps) {
const { data: lastSyncedHeight = 0 } = useLastSyncedHeightQuery();
const pollDetails = useMemo(() => {
return govANCBalance && govState && govConfig && lastSyncedHeight
? polls.map((poll) => {
return extractPollDetail(
poll,
govANCBalance,
govState,
govConfig,
lastSyncedHeight,
);
})
: [];
}, [govANCBalance, govConfig, govState, lastSyncedHeight, polls]);
return (
<div className={className}>
<div className="grid">
{pollDetails.map(({ poll, vote, type, baseline, endsIn }) => (
<Section key={'grid' + poll.id} onClick={() => onClick(poll)}>
<div className="poll-id">
<span>ID: {poll.id}</span>
<span>{type}</span>
</div>
<div className="poll-status">
<PollStatusSpan status={poll.status} endsIn={endsIn}>
{pollStatusLabels[poll.status]}
</PollStatusSpan>
</div>
<h2>{poll.title}</h2>
<PollGraph
total={vote.total}
yes={vote.yes}
no={vote.no}
baseline={baseline.value}
baselineLabel={baseline.label}
/>
<div className="poll-ends-in">
<IconSpan>
<b>Estimated end time</b>{' '}
<time>
{endsIn.toLocaleDateString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
})}
{', '}
{endsIn.toLocaleTimeString('en-US')}
</time>{' '}
<Schedule /> <TimeEnd endTime={endsIn} />
</IconSpan>
</div>
</Section>
))}
</div>
{!isLast && (
<BorderButton className="more" onClick={onLoadMore}>
More
</BorderButton>
)}
</div>
);
}
Example #3
| Source File: poll.detail.tsx From anchor-web-app with Apache License 2.0 | 4 votes |
|
function PollDetailBase({ className }: UIElementProps) {
const {
target: { isNative },
} = useDeploymentTarget();
const { contractAddress } = useAnchorWebapp();
const { id = '0' } = useParams();
const { data: { poll } = {} } = useGovPollQuery(+id);
if (poll?.id === 11) {
poll.link =
'https://forum.anchorprotocol.com/t/proposal-redirect-remaining-anc-lp-incentives-anc-buybacks-to-astroport/1971';
}
const { data: { ancBalance: govANCBalance } = {} } = useAncBalanceQuery(
contractAddress.anchorToken.gov,
);
const { data: { govState, govConfig } = {} } = useGovStateQuery();
const canIVote = useGovVoteAvailableQuery(poll?.id);
const [openVoteDialog, voteDialogElement] = usePollVoteDialog();
const { data: lastSyncedHeight = 0 } = useLastSyncedHeightQuery();
const { voters, isLast, loadMore } = useGovVotersQuery(poll?.id);
const [openCodeViewer, codeViewerElement] = useCodeViewerDialog();
const pollDetail = useMemo(() => {
return poll && govANCBalance && govState && govConfig && lastSyncedHeight
? extractPollDetail(
poll,
govANCBalance,
govState,
govConfig,
lastSyncedHeight,
)
: undefined;
}, [govANCBalance, govConfig, govState, lastSyncedHeight, poll]);
if (!pollDetail) {
return null;
}
return (
<PaddedLayout className={className}>
<Section className="content">
<div className="content-id">
<span>ID: {pollDetail.poll.id}</span>
<span>{pollDetail.type}</span>
</div>
<div className="content-title">
<div>
<p>
<PollStatusSpan
status={pollDetail.poll.status}
endsIn={pollDetail.endsIn}
>
{pollStatusLabels[pollDetail.poll.status]}
</PollStatusSpan>
</p>
<h2>{pollDetail.poll.title}</h2>
</div>
{isNative && (
<ActionButton
disabled={
!canIVote ||
!poll ||
!lastSyncedHeight ||
poll.status !== 'in_progress' ||
poll.end_height < lastSyncedHeight
}
onClick={() => openVoteDialog({ pollId: +id })}
>
Vote
</ActionButton>
)}
</div>
<HorizontalHeavyRuler />
<DescriptionGrid className="content-detail">
<article>
<h4>Creator</h4>
<p>
<AccountLink address={pollDetail.poll.creator} />
</p>
</article>
<article>
<h4>Amount</h4>
<p>
{formatANCWithPostfixUnits(
demicrofy(pollDetail.poll.deposit_amount),
)}{' '}
ANC
</p>
</article>
<article>
<h4>End Time</h4>
<p>
<IconSpan>
{pollDetail.endsIn.toLocaleDateString('en-US', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
})}
{', '}
{pollDetail.endsIn.toLocaleTimeString(
'en-US',
)} <Schedule /> <TimeEnd endTime={pollDetail.endsIn} />
</IconSpan>
</p>
</article>
<article>
<h4>Link</h4>
<p>
{isLinkHttp(pollDetail.poll.link) ? (
<a href={pollDetail.poll.link} target="_blank" rel="noreferrer">
{pollDetail.poll.link}
</a>
) : (
'-'
)}
</p>
</article>
</DescriptionGrid>
<Description>
<article>
<h4>Description</h4>
<p>{pollDetail.poll.description}</p>
</article>
</Description>
{Array.isArray(pollDetail.msgs) &&
pollDetail.msgs.filter((msg) => !!msg).length > 0 && (
<>
<HorizontalRuler style={{ margin: '40px 0' }} />
<DescriptionGrid>
{pollDetail.msgs.map((msg, i) => (
<PollMsgRenderer key={'msg' + i} msg={msg} />
))}
</DescriptionGrid>
<BorderButton
style={{
marginTop: 40,
width: '100%',
height: 30,
opacity: 0.3,
}}
onClick={() =>
openCodeViewer({
title: 'Raw Msgs',
source: JSON.stringify(pollDetail.msgs, null, 2),
})
}
>
See Raw Msgs
</BorderButton>
</>
)}
</Section>
<Section className="detail">
<h2>VOTE DETAILS</h2>
<PollGraph
total={pollDetail.vote.total}
yes={pollDetail.vote.yes}
no={pollDetail.vote.no}
baseline={pollDetail.baseline.value}
baselineLabel={pollDetail.baseline.label}
displaySpans={false}
/>
<section className="detail-voted">
<article>
<h4>VOTED</h4>
<p>
{formatRate(
((pollDetail.vote.yes + pollDetail.vote.no) /
pollDetail.vote.total) as Rate<number>,
)}
%
</p>
<span>Quorum {govConfig ? formatRate(govConfig.quorum) : 0}%</span>
</article>
<article data-vote="yes">
<h4>YES</h4>
<p>
{formatRate(
(pollDetail.vote.yes / pollDetail.vote.total) as Rate<number>,
)}
%
</p>
<span>
{poll ? formatANCWithPostfixUnits(demicrofy(poll.yes_votes)) : 0}{' '}
ANC
</span>
</article>
<article data-vote="no">
<h4>NO</h4>
<p>
{formatRate(
(pollDetail.vote.no / pollDetail.vote.total) as Rate<number>,
)}
%
</p>
<span>
{poll ? formatANCWithPostfixUnits(demicrofy(poll.no_votes)) : 0}{' '}
ANC
</span>
</article>
</section>
{!!poll &&
poll.status === 'in_progress' &&
poll.end_height > lastSyncedHeight && (
<PollVoters voters={voters} isLast={isLast} loadMore={loadMore} />
)}
</Section>
{voteDialogElement}
{codeViewerElement}
</PaddedLayout>
);
}
