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 vote down vote up
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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
          )}
        </>
      }
    />
  );
}