react-icons/fi#FiLoader JavaScript Examples
The following examples show how to use
react-icons/fi#FiLoader.
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: LoadingRightBlock.js From sailplane-web with GNU General Public License v3.0 | 6 votes |
export function LoadingRightBlock({ipfsError, message, loading}) {
if (!message) {
message = 'Loading...';
}
const loader = (
<FiLoader
color={primary4}
size={16}
style={styles.icon}
className={'rotating'}
/>
);
const networkFail = <>
Sailplane failed to start network. Try refreshing. <br/>
If the problem persists you can try <a target="blank" href="https://intercom.help/scoutpad/en/articles/3478364-how-to-clear-local-storage-of-web-browser">clearing browser cache</a>.
</>
const failMessage = isWebRTCSupported()
? networkFail
: 'This browser does not support WebRTC, iOS users please try Safari.'
return (
<div style={styles.container}>
{isWebRTCSupported() && !ipfsError ? (
<div>
{loading && loader}
{message}
</div>
) : (
<div>
{failMessage}
</div>
)}
</div>
);
}
Example #2
Source File: StatusBar.js From sailplane-web with GNU General Public License v3.0 | 5 votes |
export function StatusBar() {
const status = useSelector((state) => state.tempData.status);
const {message, isError, isInfo} = status;
const styles = {
container: {
position: 'fixed',
bottom: 10,
backgroundColor: isError ? errorColor : primary3,
padding: 8,
borderRadius: 4,
fontFamily: 'Open Sans',
color: '#FFF',
fontSize: 14,
lineHeight: 14,
display: 'flex',
alignItems: 'center',
height: 18,
opacity: message ? 1 : 0,
},
icon: {
marginRight: 4,
},
};
let iconComponent = FiLoader;
if (isError) {
iconComponent = FiAlertTriangle;
}
const IconComponent = iconComponent;
return (
<div style={styles.container}>
{!isInfo ? (
<IconComponent
color={'#FFF'}
size={16}
style={styles.icon}
className={!isError ? 'rotating' : ''}
/>
) : null}
<span style={styles.message}>{message}</span>
</div>
);
}
Example #3
Source File: ImportDriveDialog.js From sailplane-web with GNU General Public License v3.0 | 4 votes |
export default function ImportDriveDialog({
onClose,
isVisible,
instances,
sailplane,
}) {
const dispatch = useDispatch();
const [isAddressSet, setIsAddressSet] = useState(false);
const [error, setError] = useState(null);
const [nickname, setNickname] = useState('');
const [driveData, setDriveData] = useState(null);
const styles = {
addressInput: {
display: 'flex',
alignItems: 'center',
},
title: {
fontSize: 16,
color: primary45,
marginBottom: 8,
},
loading: {
display: 'flex',
alignItems: 'center',
color: primary45,
},
icon: {
marginLeft: 4,
},
confirmBlock: {
marginTop: 14,
display: 'flex',
justifyContent: 'flex-end',
},
cancel: {
marginRight: 8,
},
labelTitle: {
marginTop: 12,
marginBottom: 4,
},
optional: {
position: 'relative',
top: -8,
left: 4,
fontSize: 13,
},
input: {
border: `1px solid ${primary3}`,
borderRadius: 4,
color: primary,
fontSize: 14,
fontWeight: 200,
padding: 4,
marginRight: 4,
display: 'inline-flex',
width: '100%',
boxSizing: 'border-box',
},
};
const ImportInstanceInput = useTextInput(
!isAddressSet,
(instanceAddress) => getManifest(instanceAddress),
null,
'',
{
placeholder: 'drive address',
confirmTitle: 'Import drive',
},
);
if (!isVisible) {
return null;
}
const importInstance = async () => {
const {address, manifest} = driveData;
const driveName = sailplaneUtil.driveName(address);
dispatch(
addInstance(
driveName,
address,
true,
manifest.meta.enc === true,
nickname,
),
);
onClose();
};
const getManifest = async (address) => {
const handleInvalidAddress = () => {
setError('Invalid address!');
};
if (OrbitDBAddress.isValid(address)) {
setIsAddressSet(true);
if (instances.map((s) => s.address).includes(address)) {
const driveName = sailplaneUtil.driveName(address);
setError(`Drive '${driveName}' already exists!`);
setIsAddressSet(false);
return;
}
const manifest = await addressManifest(sailplane, address);
setDriveData({address, manifest});
} else {
handleInvalidAddress();
}
};
return (
<Dialog
backgroundColor={primary15}
isVisible={true}
title={`Import drive`}
body={
<div style={styles.body}>
{!isAddressSet ? (
<div>
<div style={styles.title}>
Paste a drive address below to import it into your drives
</div>
{error ? <Well isError={true}>{error}</Well> : null}
<div style={styles.addressInput}>
{!isAddressSet ? ImportInstanceInput : null}
</div>
</div>
) : !driveData ? (
<div style={styles.loading}>
Looking for drive
<FiLoader
color={primary45}
size={16}
style={styles.icon}
className={'rotating'}
/>
</div>
) : (
<div>
<div style={styles.title}>Drive has been located!</div>
<div style={styles.loadedDrive}>
<Instance
displayOnly={true}
selected={true}
data={{
address: driveData.address,
isEncrypted: driveData.manifest.meta?.enc,
}}
/>
</div>
<div style={{...styles.title, ...styles.labelTitle}}>
Nickname
<span style={styles.optional}>(optional)</span>
</div>
<input
type={'text'}
onChange={(event) => setNickname(event.target.value)}
autoCorrect={'off'}
style={styles.input}
placeholder={`(ex: Work sketches)`}
className={'textInput'}
/>
<div style={styles.confirmBlock}>
<BigButton
title={'Cancel'}
inverted={false}
noHover={true}
customWhiteColor={primary15}
style={styles.cancel}
onClick={onClose}
/>
<BigButton
title={'Confirm'}
onClick={importInstance}
inverted={true}
customWhiteColor={primary15}
/>
</div>
</div>
)}
</div>
}
onClose={onClose}
/>
);
}
Example #4
Source File: ShareDialog.js From sailplane-web with GNU General Public License v3.0 | 4 votes |
export function ShareDialog({sharedFs}) {
const dispatch = useDispatch();
const shareData = useSelector((state) => state.tempData.shareData);
const inputRef = useRef(null);
const {CID, path, name, pathType} = shareData;
const [shareTypeIndex, setShareTypeIndex] = useState(0);
const [loadedCID, setLoadedCID] = useState(CID);
const [keys, setKeys] = useState(null);
useEffect(() => {
if (!name) {
setLoadedCID(null);
setShareTypeIndex(0);
} else {
setLoadedCID(CID);
}
}, [name, CID]);
useEffect(() => {
const getCID = async () => {
const cid = await sharedFs.current.read(path);
if (sharedFs.current.encrypted && pathType !== 'dir') {
const {key, iv} = sharedFs.current.fs.read(path);
setKeys({key, iv});
}
setLoadedCID(cid);
if (pathType === 'dir') {
const dirContents = sharedFs.current.fs.ls(path).map((tmpPath) => {
const type = sharedFs.current.fs.content(tmpPath);
const pathSplit = path.split('/');
const tmpName = pathSplit[pathSplit.length - 1];
return {path: tmpPath, name: tmpName, type};
});
const shareType = getShareTypeFromFolderFiles(dirContents);
const shareTypeIndexToSwitchTo = shareTypes.findIndex(
(curShareType) => curShareType.name === shareType,
);
setShareTypeIndex(shareTypeIndexToSwitchTo);
}
};
if (!loadedCID && path) {
getCID();
} else {
if (inputRef.current) {
inputRef.current.select();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loadedCID, path]);
if (!path) {
return null;
}
let url = `${
window.location.origin + window.location.pathname
}#/download/${encodeURIComponent(loadedCID)}/${encodeURIComponent(path)}/${
shareTypes[shareTypeIndex].name
}`;
if (keys?.key) {
url = `${
window.location.origin + window.location.pathname
}#/download/${encodeURIComponent(loadedCID)}/${encodeURIComponent(
keys.iv,
)}/${encodeURIComponent(keys.key)}/${encodeURIComponent(path)}/${
shareTypes[shareTypeIndex].name
}`;
}
const handleCopy = async () => {
await copyToClipboard(url);
notify('Share link copied to clipboard', dispatch);
};
return (
<Dialog
title={'Share options'}
onClose={() => dispatch(setShareData({}))}
isVisible={path}
body={
<>
<div style={styles.nameHolder}>
<div style={styles.filename}>{name}</div>
<div>
{/*{pathType === 'dir' ? (*/}
{/* <SegmentedControl*/}
{/* currentIndex={shareTypeIndex}*/}
{/* items={shareTypes}*/}
{/* onSelect={(index) => setShareTypeIndex(index)}*/}
{/* />*/}
{/*) : null}*/}
</div>
</div>
{loadedCID ? (
<div>
<div style={styles.flex}>
<input
ref={inputRef}
style={styles.input}
type={'text'}
value={url}
readOnly={true}
/>
</div>
<div style={styles.link}>
<a href={'#'} className={'link'} onClick={handleCopy}>
Copy link
</a>
</div>
</div>
) : (
<div style={styles.loading}>
<FiLoader
color={primary45}
size={16}
style={styles.icon}
className={'rotating'}
/>
Loading share link...
</div>
)}
</>
}
/>
);
}