react-icons/md#MdFileUpload JavaScript Examples
The following examples show how to use
react-icons/md#MdFileUpload.
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: ShelleyHaskellStakingCalculator.js From testnets-cardano-org with MIT License | 4 votes |
|
Calculator = ({
currencies,
content,
initialValues,
initialCalculator,
origin,
pathname,
}) => {
const [allCurrencies, setAllCurrencies] = useState(
JSON.parse(JSON.stringify(currencies))
)
const [values, setValues] = useState(
getDefaultValues(allCurrencies[0], initialValues)
)
const [type, setType] = useState(initialCalculator)
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false)
const [shareModalVisible, setShareModalVisible] = useState(false)
const [copied, setCopied] = useState(false)
const containerRef = useRef(null)
const copiedTimeout = useRef(null)
const modalContent = useRef(null)
function getInitialCurrency(key) {
return currencies.filter((currency) => currency.key === key).shift() || {}
}
function getTotalADAInCirculation(epoch, startingTotalADAInCirculation) {
let i = 1
let totalADAInCirculation =
startingTotalADAInCirculation || values.totalADAInCirculation
while (i < epoch) {
const reserve = values.totalADA - totalADAInCirculation
totalADAInCirculation += reserve * values.expansionRate
i++
}
return totalADAInCirculation
}
function getEpochDistributableRewards(
totalADAInCirculation,
transactionFeesPerEpoch
) {
const reserve = values.totalADA - totalADAInCirculation
return (
(reserve * values.expansionRate + transactionFeesPerEpoch) *
(1 - values.treasuryRate)
)
}
function getDistributableRewards(epoch) {
let transactionFeesPerEpoch = parseFloat(values.transactionFeesPerEpoch)
if (
!transactionFeesPerEpoch ||
isNaN(transactionFeesPerEpoch) ||
transactionFeesPerEpoch < 0
)
transactionFeesPerEpoch = 0
const totalADAInCirculation = getTotalADAInCirculation(epoch)
const epochDistribution = getEpochDistributableRewards(
totalADAInCirculation,
transactionFeesPerEpoch
)
return epochDistribution
}
const setValue = (key, value) => {
const newValues = { ...values, [key]: value }
if (
key === 'currency' &&
value.exchangeRate !== values.currency.exchangeRate
) {
const stakePoolFixedFeeInADA = toADA(parseFloat(values.stakePoolFixedFee))
newValues.stakePoolFixedFee = `${fromADA(
stakePoolFixedFeeInADA,
value.exchangeRate
)}`
}
setValues(newValues)
}
const updateType = (type) => (e) => {
e.preventDefault()
setType(type)
}
const fromADA = (amount, exchangeRate = null) => {
let exchangeRateUsed = parseFloat(
exchangeRate === null ? values.currency.exchangeRate : exchangeRate
)
if (isNaN(exchangeRateUsed) || exchangeRateUsed <= 0)
exchangeRateUsed =
getInitialCurrency(values.currency.key).exchangeRate || 1
return amount * exchangeRateUsed
}
const toADA = (amount, exchangeRate = null) => {
let exchangeRateUsed = parseFloat(
exchangeRate === null ? values.currency.exchangeRate : exchangeRate
)
if (isNaN(exchangeRateUsed) || exchangeRateUsed <= 0)
exchangeRateUsed =
getInitialCurrency(values.currency.key).exchangeRate || 1
return amount / exchangeRateUsed
}
const toggleShowAdvancedOptions = (e) => {
e.preventDefault()
setShowAdvancedOptions(!showAdvancedOptions)
}
const reset = () => {
const currency = currencies
.filter((currency) => currency.key === values.currency.key)
.shift()
setAllCurrencies(JSON.parse(JSON.stringify(currencies)))
setValues(getDefaultValues(currency, initialValues))
}
const onReset = (e) => {
e.preventDefault()
reset()
}
const getCurrencySymbol = (key) =>
(currencies.filter((currency) => currency.key === key).shift() || {})
.symbol || null
const normalizeLargeNumber = (number, dp = 0, preserveDP = false) => {
let negative = number < 0
const normalizedNumber = Math.abs((number || 0).toFixed(dp))
if (normalizedNumber === 0) negative = false
const asStringArray = `${normalizedNumber}`.split('.')
const n = asStringArray[0].split('').reverse()
let i = 3
while (i < n.length) {
n.splice(i, 0, ',')
i += 4
}
let finalNumber = n
.reverse()
.join('')
.concat(asStringArray[1] ? `.${asStringArray[1]}` : '')
if (!preserveDP && finalNumber.indexOf('.') > -1) {
while (finalNumber[finalNumber.length - 1] === '0') {
finalNumber = finalNumber.substring(0, finalNumber.length - 1)
}
}
return `${negative ? '-' : ''}${finalNumber.replace(/\.$/, '')}`
}
const getShareableLink = () => {
const params = new URLSearchParams()
const keys = [
'ada',
'stakePoolControl',
'operatorsStake',
'stakePoolMargin',
'stakePoolPerformance',
'totalStakePools',
'influenceFactor',
'transactionFeesPerEpoch',
'stakePoolFixedFee',
'treasuryRate',
'expansionRate',
'epochDurationInDays',
'currentEpoch',
]
keys.forEach((key) => params.set(key, values[key]))
params.set('calculator', type)
return `${origin}${pathname}?${params.toString()}`
}
const copyShareableLink = (e) => {
e.preventDefault()
const el = document.createElement('textarea')
const link = getShareableLink()
el.value = link
el.setAttribute('readonly', 'true')
el.setAttribute('aria-hidden', 'true')
el.setAttribute('tab-index', '-1')
el.style.position = 'absolute'
el.style.left = '-999999px'
modalContent.current.appendChild(el)
el.select()
document.execCommand('copy')
modalContent.current.removeChild(el)
clearTimeout(copiedTimeout.current)
setCopied(true)
copiedTimeout.current = setTimeout(() => setCopied(false), 500)
}
const CalculatorComponent = type === 'delegator' ? Delegator : Operator
return (
<Container ref={containerRef}>
<Introduction paddingBottom={1} textAlign="center">
<p>{content.staking_calculator.select_a_calculator}</p>
<p>{content.staking_calculator.i_want_to}</p>
</Introduction>
<CalculatorPicker>
<div>
<Button
variant={type === 'delegator' ? 'contained' : 'outlined'}
onClick={updateType('delegator')}
color="primary"
fullWidth
>
<DelegatorIcon active={type === 'delegator'} />
<span>{content.staking_calculator.delegate_my_stake}</span>
</Button>
<CardanoLogo active={type === 'delegator'} />
</div>
<div>
<Button
variant={type === 'operator' ? 'contained' : 'outlined'}
onClick={updateType('operator')}
color="primary"
fullWidth
>
<OperatorIcon active={type === 'operator'} />
<span>{content.staking_calculator.run_a_stake_pool}</span>
</Button>
<CardanoLogo active={type === 'operator'} />
</div>
</CalculatorPicker>
<Actions>
<div>
<div>
<Button
color="primary"
variant={showAdvancedOptions ? 'contained' : 'outlined'}
onClick={toggleShowAdvancedOptions}
fullWidth
>
{content.staking_calculator.show_advanced_options}
<Box component="span" marginLeft={0.8}>
{showAdvancedOptions ? <MdVisibilityOff /> : <MdVisibility />}
</Box>
</Button>
</div>
<div>
<Button
color="primary"
variant="outlined"
onClick={onReset}
fullWidth
>
{content.staking_calculator.reset}
<Box component="span" marginLeft={0.8}>
<MdRotateLeft />
</Box>
</Button>
</div>
</div>
<div>
<div>
<Button
color="primary"
variant="outlined"
onClick={(e) => {
e.preventDefault()
setShareModalVisible(true)
}}
fullWidth
>
{content.staking_calculator.share}
<Box component="span" marginLeft={0.8}>
<MdFileUpload />
</Box>
</Button>
{shareModalVisible && (
<Modal
open={shareModalVisible}
onClose={(e) => {
e.preventDefault()
setShareModalVisible(false)
}}
disableScrollLock
>
<ModalContent ref={modalContent}>
<CloseModal
href="#"
onClick={(e) => {
e.preventDefault()
setShareModalVisible(false)
}}
>
<MdClose />
</CloseModal>
<ModalContentInner>
<Box textAlign="center">
<ShareLinks>
<div>
<TwitterLink
href={`https://twitter.com/intent/tweet?text=${getShareableLink()}`}
>
<FaTwitter />{' '}
<span>{content.staking_calculator.tweet}</span>
</TwitterLink>
</div>
<div>
<FacebookLink
href={`https://www.facebook.com/dialog/share?href=${getShareableLink()}&display=popup&app_id=282617186477949&redirect_uri=https://facebook.com/`}
>
<FaFacebookF />{' '}
<span>{content.staking_calculator.share}</span>
</FacebookLink>
</div>
</ShareLinks>
<p>
<CopyToClipboardLink
href="#copy-to-clipboard"
onClick={copyShareableLink}
>
<FaClipboard />{' '}
<span className="text">
{content.staking_calculator.copy_to_clipboard}
</span>
{copied && (
<AnimatedClipboard>
<FaClipboard />
</AnimatedClipboard>
)}
</CopyToClipboardLink>
</p>
</Box>
</ModalContentInner>
</ModalContent>
</Modal>
)}
</div>
<div />
</div>
</Actions>
<Inputs>
<CalculatorComponent
values={values}
setValue={setValue}
content={content}
toADA={toADA}
fromADA={fromADA}
showAdvancedOptions={showAdvancedOptions}
HalfWidthGroup={HalfWidthGroup}
FullWidthGroup={FullWidthGroup}
getCurrencySymbol={getCurrencySymbol}
currencies={currencies}
normalizeLargeNumber={normalizeLargeNumber}
getDistributableRewards={getDistributableRewards}
getTotalADAInCirculation={getTotalADAInCirculation}
containerRef={containerRef}
/>
</Inputs>
</Container>
)
}
Example #2
| Source File: Badge.jsx From konsta with MIT License | 4 votes |
|
export default function BadgePage() {
const isPreview = document.location.href.includes('examplePreview');
return (
<Page>
<Navbar
title="Badge"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
right={
<Link navbar iconOnly>
<Icon
ios={<PersonCircleFill className="w-7 h-7" />}
material={<MdPerson className="w-6 h-6" />}
badge="5"
badgeColors={{ bg: 'bg-red-500' }}
/>
</Link>
}
/>
<Tabbar labels className="left-0 bottom-0 fixed">
<TabbarLink
active
icon={
<Icon
ios={<EnvelopeFill className="w-7 h-7" />}
material={<MdEmail className="w-6 h-6" />}
badge="5"
badgeColors={{ bg: 'bg-green-500' }}
/>
}
label="Inbox"
/>
<TabbarLink
icon={
<Icon
ios={<Calendar className="w-7 h-7" />}
material={<MdToday className="w-6 h-6" />}
badge="7"
badgeColors={{ bg: 'bg-red-500' }}
/>
}
label="Calendar"
/>
<TabbarLink
icon={
<Icon
ios={<CloudUploadFill className="w-7 h-7" />}
material={<MdFileUpload className="w-6 h-6" />}
badge="1"
badgeColors={{ bg: 'bg-red-500' }}
/>
}
label="Upload"
/>
</Tabbar>
<List>
<ListItem
media={<DemoIcon />}
title="Foo Bar"
after={<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="Ivan Petrov"
after={<Badge>CEO</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="John Doe"
after={<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>}
/>
<ListItem
media={<DemoIcon />}
title="Jane Doe"
after={<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>}
/>
</List>
</Page>
);
}
Example #3
| Source File: Tabbar.jsx From konsta with MIT License | 4 votes |
|
export default function TabbarPage() {
const isPreview = document.location.href.includes('examplePreview');
const [activeTab, setActiveTab] = useState('tab-1');
const [isTabbarLabels, setIsTabbarLabels] = useState(false);
return (
<Page>
<Navbar
title="Tabbar"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
/>
<Tabbar labels={isTabbarLabels} className="left-0 bottom-0 fixed">
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => setActiveTab('tab-1')}
icon={
isTabbarLabels && (
<Icon
ios={<EnvelopeFill className="w-7 h-7" />}
material={<MdEmail className="w-6 h-6" />}
/>
)
}
label="Tab 1"
/>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => setActiveTab('tab-2')}
icon={
isTabbarLabels && (
<Icon
ios={<Calendar className="w-7 h-7" />}
material={<MdToday className="w-6 h-6" />}
/>
)
}
label="Tab 2"
/>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => setActiveTab('tab-3')}
icon={
isTabbarLabels && (
<Icon
ios={<CloudUploadFill className="w-7 h-7" />}
material={<MdFileUpload className="w-6 h-6" />}
/>
)
}
label="Tab 3"
/>
</Tabbar>
<List>
<ListItem
title="Tabbar Labels"
after={
<Toggle
checked={isTabbarLabels}
onChange={() => setIsTabbarLabels(!isTabbarLabels)}
/>
}
/>
</List>
{activeTab === 'tab-1' && (
<Block strong className="space-y-4">
<p>
<b>Tab 1</b>
</p>
<p>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
accusantium necessitatibus, nihil quas praesentium at quibusdam
cupiditate possimus et repudiandae dolorum delectus quo, similique
voluptatem magni explicabo adipisci magnam ratione!
</span>
<span>
Quod praesentium consequatur autem veritatis, magni alias
consectetur ut quo, voluptatum earum in repellat! Id, autem! Minus
suscipit, ad possimus non voluptatem aliquam praesentium earum
corrupti optio velit tenetur numquam?
</span>
<span>
Illo id ipsa natus quidem dignissimos odio dolore veniam,
accusamus vel assumenda nulla aliquam amet distinctio! Debitis
deserunt, et, cum voluptate similique culpa assumenda inventore,
facilis eveniet iure optio velit.
</span>
<span>
Maiores minus laborum placeat harum impedit, saepe veniam iusto
voluptates delectus omnis consectetur tenetur ex ipsa error
debitis aspernatur amet et alias! Sit odit cum voluptas quae? Est,
omnis eos?
</span>
</p>
</Block>
)}
{activeTab === 'tab-2' && (
<Block strong className="space-y-4">
<p>
<b>Tab 2</b>
</p>
<p>
<span>
Dicta beatae repudiandae ab pariatur mollitia praesentium fuga
ipsum adipisci, quia nam expedita, est dolore eveniet, dolorum
obcaecati? Veniam repellendus mollitia sapiente minus saepe
voluptatibus necessitatibus laboriosam incidunt nihil autem.
</span>
<span>
Officia pariatur qui, deleniti eum, et minus nisi aliquam nobis
hic provident quisquam quidem voluptatem eveniet ducimus. Commodi
ea dolorem, impedit eaque dolor, sint blanditiis magni accusantium
natus reprehenderit minima?
</span>
<span>
Dicta reiciendis ut vitae laborum aut repellendus quasi beatae
nulla sapiente et. Quod distinctio velit, modi ipsam
exercitationem iste quia eaque blanditiis neque rerum optio, nulla
tenetur pariatur ex officiis.
</span>
<span>
Consectetur accusamus delectus sit voluptatem at esse! Aperiam
unde maxime est nemo dicta minus autem esse nobis quibusdam iusto,
reprehenderit harum, perferendis quae. Ipsum sit fugit similique
recusandae quas inventore?
</span>
</p>
</Block>
)}
{activeTab === 'tab-3' && (
<Block strong className="space-y-4">
<p>
<b>Tab 3</b>
</p>
<p>
<span>
Vero esse ab natus neque commodi aut quidem nobis. Unde, quam
asperiores. A labore quod commodi autem explicabo distinctio saepe
ex amet iste recusandae porro consectetur, sed dolorum sapiente
voluptatibus?
</span>
<span>
Commodi ipsum, voluptatem obcaecati voluptatibus illum hic aliquam
veritatis modi natus unde, assumenda expedita, esse eum fugit?
Saepe aliquam ipsam illum nihil facilis, laborum quia, eius ea
dolores molestias dicta.
</span>
<span>
Consequatur quam laudantium, magnam facere ducimus tempora
temporibus omnis cupiditate obcaecati tempore? Odit qui a,
voluptas eveniet similique, doloribus eum dolorum ad, enim ea
itaque voluptates porro minima. Omnis, magnam.
</span>
<span>
Debitis, delectus! Eligendi excepturi rem veritatis, ad
exercitationem tempore eveniet voluptates aut labore harum dolorem
nemo repellendus accusantium quibusdam neque? Itaque iusto
quisquam reprehenderit aperiam maiores dicta iure necessitatibus
est.
</span>
</p>
</Block>
)}
</Page>
);
}
