react-icons/fi#FiDownload TypeScript Examples
The following examples show how to use
react-icons/fi#FiDownload.
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: icons.tsx From documentation with MIT License | 6 votes |
|
iconKeyMap = {
star: (props) => <FiStar {...props} />,
zap: (props) => <FiZap {...props} />,
repeat: (props) => <FiRepeat {...props} />,
users: (props) => <FiUsers {...props} />,
server: (props) => <FiServer {...props} />,
edit: (props) => <FiEdit {...props} />,
gitMerge: (props) => <FiGitMerge {...props} />,
download: (props) => <FiDownload {...props} />,
}
Example #2
| Source File: Cache.tsx From dxvote with GNU Affero General Public License v3.0 | 4 votes |
|
CachePage = observer(() => {
// Set html title to cache to differentiate from dxvote dapp
document.title = 'Cache';
const {
context: { cacheService, configStore, notificationStore, ipfsService },
} = useContext();
const [updateProposalTitles, setUpdateProposalTitles] = React.useState(false);
const [buildingCacheState, setBuildingCacheState] = React.useState(0);
const [updatedCacheHash, setUpdatedCacheHash] = React.useState({
proposalTitles: {},
configHashes: {},
configs: {},
caches: {},
});
const [resetCache, setResetCache] = React.useState({
mainnet: false,
rinkeby: false,
xdai: false,
arbitrum: false,
arbitrumTestnet: false,
});
const [localConfig, setLocalConfig] = React.useState(
configStore.getLocalConfig()
);
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
async function resetCacheOptions() {
configStore.resetLocalConfig();
setLocalConfig(configStore.getLocalConfig());
setBuildingCacheState(0);
setResetCache({
mainnet: false,
rinkeby: false,
xdai: false,
arbitrum: false,
arbitrumTestnet: false,
});
setUpdatedCacheHash({
proposalTitles: {},
configHashes: {},
configs: {},
caches: {},
});
setUpdateProposalTitles(false);
}
async function uploadToIPFS(content) {
ipfsService.upload(content);
}
async function runCacheScript() {
setBuildingCacheState(1);
const updatedCache = await cacheService.getUpdatedCacheConfig(
{
1: {
rpcUrl: localConfig.mainnet_rpcURL,
toBlock: localConfig.mainnet_toBlock,
reset: resetCache.mainnet,
},
4: {
rpcUrl: localConfig.rinkeby_rpcURL,
toBlock: localConfig.rinkeby_toBlock,
reset: resetCache.rinkeby,
},
100: {
rpcUrl: localConfig.xdai_rpcURL,
toBlock: localConfig.xdai_toBlock,
reset: resetCache.xdai,
},
42161: {
rpcUrl: localConfig.arbitrum_rpcURL,
toBlock: localConfig.arbitrum_toBlock,
reset: resetCache.arbitrum,
},
421611: {
rpcUrl: localConfig.arbitrumTestnet_rpcURL,
toBlock: localConfig.arbitrumTestnet_toBlock,
reset: resetCache.arbitrumTestnet,
},
},
updateProposalTitles
);
console.log('[Updated Cache]', updatedCache);
setUpdatedCacheHash(updatedCache);
setBuildingCacheState(2);
forceUpdate();
}
function onApiKeyValueChange(value, key) {
localConfig[key] = value;
setLocalConfig(localConfig);
configStore.setLocalConfig(localConfig);
forceUpdate();
}
function downloadAll() {
var zip = new JSZip();
var cache = zip.folder('cache');
var configs = zip.folder('configs');
zip.file(
'default.json',
JSON.stringify(
{
mainnet: updatedCacheHash.configHashes['mainnet'],
xdai: updatedCacheHash.configHashes['xdai'],
arbitrum: updatedCacheHash.configHashes['arbitrum'],
rinkeby: updatedCacheHash.configHashes['rinkeby'],
arbitrumTestnet: updatedCacheHash.configHashes['arbitrumTestnet'],
},
null,
2
)
);
zip.file(
'proposalTitles.json',
JSON.stringify(updatedCacheHash.proposalTitles, null, 2)
);
NETWORKS.map((network, i) => {
cache.file(
network.name + '.json',
JSON.stringify(updatedCacheHash.caches[network.name], null, 2)
);
const configFolder = configs.folder(network.name);
configFolder.file(
'config.json',
JSON.stringify(updatedCacheHash.configs[network.name], null, 2)
);
});
zip.generateAsync({ type: 'blob' }).then(function (content) {
saveAs(content, 'dxvote-cache.zip');
});
}
if (window.location.hash.length > 7) {
const searchParams = new URLSearchParams(window.location.hash.substring(7));
setUpdateProposalTitles(searchParams.get('proposalTitles') ? true : false);
NETWORKS.map((network, i) => {
const networkName = network.name;
if (searchParams.get(networkName + '_toBlock'))
localConfig[networkName + '_toBlock'] = searchParams.get(
networkName + '_toBlock'
);
if (searchParams.get(networkName + '_targetHash'))
localConfig[networkName + '_targetHash'] = searchParams.get(
networkName + '_targetHash'
);
if (searchParams.get(networkName + '_reset')) {
resetCache[networkName] = true;
}
});
setLocalConfig(localConfig);
setResetCache(resetCache);
configStore.setLocalConfig(localConfig);
window.location.assign(window.location.origin + '/#cache');
forceUpdate();
}
function getOptionsLink(): string {
let optionsLinkUrl =
window.location.origin + '/' + window.location.hash + '?';
if (updateProposalTitles)
optionsLinkUrl = optionsLinkUrl = 'proposalTitles=1&';
NETWORKS.map((network, i) => {
const networkName = network.name;
if (localConfig[networkName + '_toBlock'])
optionsLinkUrl =
optionsLinkUrl +
networkName +
'_toBlock=' +
localConfig[networkName + '_toBlock'] +
'&';
if (localConfig[networkName + '_targetHash'])
optionsLinkUrl =
optionsLinkUrl +
networkName +
'_targetHash=' +
localConfig[networkName + '_targetHash'] +
'&';
if (resetCache[networkName])
optionsLinkUrl = optionsLinkUrl + networkName + '_reset=1&';
});
optionsLinkUrl = optionsLinkUrl.slice(0, -1);
return optionsLinkUrl;
}
return buildingCacheState === 1 ? (
<LoadingBox>
<div className="loader">
{' '}
<PulsingIcon size={80} inactive={false} />
<LoadingProgressText>
{notificationStore.globalMessage}
</LoadingProgressText>
</div>
</LoadingBox>
) : (
<Box>
<FormContainer>
{NETWORKS.map((network, i) => {
const networkName = network.name;
return (
networkName !== 'localhost' && (
<div key={`networkOptions${i}`}>
<RowAlignedLeft>
{' '}
<strong>{toCamelCaseString(networkName)}</strong>{' '}
</RowAlignedLeft>
<RowAlignedLeft>
<FormLabel>Block:</FormLabel>
<InputBox
type="text"
onChange={event =>
onApiKeyValueChange(
event.target.value,
networkName + '_toBlock'
)
}
value={localConfig[networkName + '_toBlock']}
style={{ width: '100px' }}
></InputBox>
<FormLabel>RPC:</FormLabel>
<InputBox
type="text"
onChange={event =>
onApiKeyValueChange(
event.target.value,
networkName + '_rpcURL'
)
}
value={localConfig[networkName + '_rpcURL']}
style={{ width: '100%' }}
></InputBox>
<FormLabel>Reset</FormLabel>
<InputBox
type="checkbox"
checked={resetCache[networkName]}
onChange={() => {
resetCache[networkName] = !resetCache[networkName];
setResetCache(resetCache);
forceUpdate();
}}
></InputBox>
</RowAlignedLeft>
<RowAlignedLeft>
<FormLabel>Target Config Hash:</FormLabel>
<InputBox
type="text"
onChange={event =>
onApiKeyValueChange(
event.target.value,
networkName + '_targetHash'
)
}
value={localConfig[networkName + '_targetHash']}
style={{ width: '400px' }}
></InputBox>
{updatedCacheHash.configs[networkName] && (
<div>
<Button
onClick={() =>
uploadToIPFS(
JSON.stringify(
updatedCacheHash.configs[networkName],
null,
2
)
)
}
>
<FiUpload></FiUpload> Config
</Button>
<Button
onClick={() =>
uploadToIPFS(
JSON.stringify(
updatedCacheHash.caches[networkName],
null,
2
)
)
}
>
<FiUpload></FiUpload> Cache
</Button>
</div>
)}
</RowAlignedLeft>
{updatedCacheHash.configs[networkName] && (
<RowAlignedLeft>
Received Config Hash:{' '}
{updatedCacheHash.configHashes[networkName]}
{' '}
<FormLabel>
{updatedCacheHash.configHashes[networkName] ==
localConfig[networkName + '_targetHash'] ? (
<FiCheckCircle />
) : (
<FiX />
)}
</FormLabel>
</RowAlignedLeft>
)}
</div>
)
);
})}
</FormContainer>
<Row style={{ justifyContent: 'left' }}>
<FormLabel>Update Proposal Titles</FormLabel>
<InputBox
type="checkbox"
checked={updateProposalTitles}
onChange={() => setUpdateProposalTitles(!updateProposalTitles)}
></InputBox>
</Row>
{buildingCacheState === 2 && (
<Row>
<Button onClick={downloadAll}>
{' '}
<FiDownload></FiDownload> Download All
</Button>
</Row>
)}
<Row>
<Button onClick={runCacheScript}>Build Cache</Button>
<Button onClick={resetCacheOptions}>Reset Options</Button>
<CopyButton>
<Copy toCopy={getOptionsLink()}>Build Link</Copy>
</CopyButton>
</Row>
</Box>
);
})
Example #3
| Source File: Modal.tsx From hub with Apache License 2.0 | 4 votes |
|
InstallationModal = (props: Props) => {
const history = useHistory();
const [openStatus, setOpenStatus] = useState<boolean>(false);
const [installMethods, setInstallMethods] = useState<InstallMethodOutput | null>(null); // undefined ???
const isDisabled = !isNull(installMethods) && !isUndefined(installMethods.errorMessage);
const onOpenModal = () => {
if (!isNull(installMethods) && installMethods.methods.length > 0) {
setOpenStatus(true);
history.replace({
search: '?modal=install',
state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
});
} else {
onCloseModal();
}
};
const onCloseModal = () => {
setOpenStatus(false);
history.replace({
search: '',
state: { searchUrlReferer: props.searchUrlReferer, fromStarredPage: props.fromStarredPage },
});
};
useEffect(() => {
if (openStatus) {
setOpenStatus(false);
} else {
setInstallMethods(
getInstallMethods({
pkg: props.package,
})
);
}
}, [props.package]); /* eslint-disable-line react-hooks/exhaustive-deps */
useEffect(() => {
if (props.visibleInstallationModal && !openStatus && installMethods && installMethods.methods.length > 0) {
onOpenModal();
}
if (props.visibleInstallationModal && installMethods && installMethods.methods.length === 0) {
onCloseModal();
}
}, [installMethods]); /* eslint-disable-line react-hooks/exhaustive-deps */
if (isNull(installMethods) || (installMethods.methods.length === 0 && isUndefined(installMethods.errorMessage)))
return null;
return (
<>
<ElementWithTooltip
element={
<button
type="button"
className={classnames(
'btn fw-bold text-uppercase position-relative btn-outline-secondary btn-sm text-nowrap w-100',
{ disabled: isDisabled }
)}
onClick={onOpenModal}
aria-label="Open installation modal"
aria-disabled={isDisabled}
>
<div className="d-flex align-items-center justify-content-center">
<FiDownload className="me-2" />
<span>Install</span>
</div>
</button>
}
visibleTooltip={isDisabled}
tooltipMessage={installMethods.errorMessage || ''}
active
/>
<Modal
header={
<ModalHeader
displayName={props.package!.displayName}
name={props.package!.name}
logoImageId={props.package!.logoImageId}
repoKind={props.package!.repository.kind}
/>
}
onClose={onCloseModal}
open={openStatus}
>
<>
{installMethods.methods.length > 0 && (
<>
{props.package && props.package.prerelease && (
<div className="alert alert-warning mt-1 mb-4" role="alert">
This package version is a <span className="fw-bold">pre-release</span> and it is not ready for
production use.
</div>
)}
<Tabs
tabs={installMethods.methods.map((method: InstallMethod) => ({
name: method.label,
title: method.title,
shortTitle: method.shortTitle,
content: (
<>
{(() => {
switch (method.kind) {
case InstallMethodKind.PublisherInstructions:
return <PublisherInstructionsInstall install={method.props.install!} />;
case InstallMethodKind.Helm:
return (
<HelmInstall
name={method.props.name!}
version={method.props.version}
repository={method.props.repository!}
contentUrl={method.props.contentUrl}
label={method.label}
/>
);
case InstallMethodKind.HelmOCI:
return (
<HelmOCIInstall
name={method.props.name!}
version={method.props.version}
repository={method.props.repository!}
/>
);
case InstallMethodKind.OLM:
return (
<OLMInstall
name={method.props.name!}
defaultChannel={method.props.defaultChannel}
channels={method.props.channels}
isGlobalOperator={method.props.isGlobalOperator}
isPrivate={method.props.isPrivate}
/>
);
case InstallMethodKind.OLMOCI:
return (
<OLMOCIInstall
name={method.props.name!}
repository={method.props.repository!}
defaultChannel={method.props.defaultChannel}
channels={method.props.channels}
/>
);
case InstallMethodKind.Falco:
return (
<FalcoInstall
normalizedName={method.props.normalizedName!}
isPrivate={method.props.isPrivate}
/>
);
case InstallMethodKind.Krew:
return <KrewInstall name={method.props.name!} repository={method.props.repository!} />;
case InstallMethodKind.HelmPlugin:
return <HelmPluginInstall repository={method.props.repository!} />;
case InstallMethodKind.Tekton:
return (
<TektonInstall
contentUrl={method.props.contentUrl!}
isPrivate={method.props.isPrivate}
repository={method.props.repository!}
/>
);
default:
return null;
}
})()}
</>
),
}))}
active={installMethods.methods[0].label}
noDataContent="Sorry, the information for installation is missing."
/>
</>
)}
</>
</Modal>
</>
);
}
