react-icons/fi#FiPlusCircle JavaScript Examples

The following examples show how to use react-icons/fi#FiPlusCircle. 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: AccessDialogPanel.js From sailplane-web with GNU General Public License v3.0

5 votes

export default function AccessDialogPanel({
  type,
  admins,
  addUser,
  users,
  myID,
  message,
}) {
  const [addMode, setAddMode] = useState(false);
  const [isContactModalVisible, setIsContactModalVisible] = useState(false);

  return (
    <div style={styles.panel}>
      <div style={styles.panelTitle}>
        {!addMode ? (
          <>
            <div style={styles.third} />
            <div style={styles.third}>{capitalize(type)}s</div>
          </>
        ) : null}
        <div
          style={{
            ...styles.adminTools,
            ...styles.third,
            justifyContent: 'flex-end',
            width: addMode ? '100%' : '30%',
          }}>
          {admins.includes(myID) && addUser ? (
            <>
              <ToolItem
                iconComponent={FiPlusCircle}
                title={`Add ${type}`}
                changeColor={primary4}
                defaultColor={primary4}
                onClick={() => setIsContactModalVisible(true)}
              />
            </>
          ) : null}
        </div>
      </div>
      <div style={styles.panelBody}>
        <div style={styles.users}>
          {users?.length === 0 ? (
            <div style={styles.messageText}>{message}</div>
          ) : users === null ? (
            <div style={styles.messageText}>Loading...</div>
          ) : (
            <div>
              {users.map((user) => (
                <UserItem key={user} pubKey={user} myID={myID} />
              ))}
            </div>
          )}
        </div>
      </div>
      <ContactModal
        isVisible={isContactModalVisible}
        onClose={() => setIsContactModalVisible(false)}
        onSelected={async (userID) => {
          await addUser(userID);
          setAddMode(false);
        }}
      />
    </div>
  );
}

Example #2

Source File: Contacts.js From sailplane-web with GNU General Public License v3.0

5 votes

export function Contacts({sailplane, sharedFS}) {
  const contacts = useSelector((state) => state.main.contacts);

  const myID = sharedFS.current?.running
    ? compressKey(sharedFS.current.identity.publicKey)
    : null;

  const [isAddContactDialogVisible, setIsAddContactDialogVisible] = useState(
    false,
  );

  return (
    <div style={styles.container}>
      <UserHeader
        sailplane={sailplane}
        title={'Contacts'}
        iconComponent={FaAddressBook}
      />

      <div style={styles.toolsContainer}>
        <div style={styles.tools}>
          <>
            <ToolItem
              className={'addContact'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiPlusCircle}
              title={'Add contact'}
              onClick={() => setIsAddContactDialogVisible(true)}
            />
          </>
        </div>
      </div>

      <div style={styles.contacts}>
        <Contact pubKey={myID} myID={myID} key={'myid'} />
        {contacts
          ? contacts.map((contact, index) => (
              <Contact
                key={index}
                pubKey={contact.pubKey}
                label={contact.label}
              />
            ))
          : null}
      </div>

      <AddContactDialog
        isVisible={isAddContactDialogVisible}
        onClose={() => setIsAddContactDialogVisible(false)}
        contacts={contacts}
        myID={myID}
      />

      <StatusBar />
    </div>
  );
}

Example #3

Source File: PackAppsList.js From winstall with GNU General Public License v3.0

4 votes

function PackAppsList({ notLoggedIn = false, providedApps, reorderEnabled, onListUpdate, allApps}){

    const [apps, setApps] = useState([]);
    const [, updateState] = useState();
    const forceUpdate = useCallback(() => updateState({}), []);
    const [showAdd, setShowAdd] = useState(false);

    useEffect(() => {
        setApps(providedApps)
    }, [])
    
    if(!reorderEnabled){
        return (
          <ul className={`${styles.appsList} ${styles.noDragList}`}> 
            {apps.map((app) => (
              <div className={styles.appCard} key={app._id}>
                <SingleApp app={app} pack={true} displaySelect={true}/>
              </div>
            ))}
          </ul>
        );
    }

    const onDragEnd = (result) => {
      if (!result.destination) {
        return;
      }

      if (result.destination.index === result.source.index) {
        return;
      }

      const updatedApps = reorder(
        apps,
        result.source.index,
        result.destination.index
      );


      onListUpdate(updatedApps)

      setApps(updatedApps);
    }

    const manageUpdates = (id) => {
      const updatedApps = apps.filter(i => i._id !== id);
      setApps(updatedApps);
      onListUpdate(updatedApps);
    }

    const handleSelect = (app, isSelected) => {
      let existingApps = apps;

      if (isSelected) {
        existingApps.push(app);
      } else {
        existingApps = existingApps.filter(a => a._id !== app._id);
      }

      setApps(existingApps);
      onListUpdate(existingApps);
      
      forceUpdate();
    }

    const closeModal = () => {
      setShowAdd(false);
    }

    return (
      <>
        <h2>Apps in this pack</h2>
        {!notLoggedIn && <p>Tip! Drag and drop any app to re-order how they appear in your pack.</p>}

        <button className={`button center ${apps.length === 0 ? '' : 'subtle'}`} onClick={() => setShowAdd(!showAdd)}><FiPlusCircle/> {`Add ${apps.length != 0 ? "More" : ""} Apps`}</button><br/>

        <Modal
          isOpen={showAdd}
          onRequestClose={closeModal}
          className={styles.addModal}
          overlayClassName={styles.modalOverlay}
          contentLabel="Example Modal"
        >
          <div className={styles.modalHeader}>
            <h2>Add Apps</h2>
            <FiXCircle onClick={closeModal}/>
          </div>
          <Search apps={allApps} preventGlobalSelect={handleSelect} isPackView={true} alreadySelected={apps} limit={4}/>
        </Modal>
   
        {notLoggedIn ? <p>You need to login first before you can view the apps in this pack.</p> : (
          <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="list">
              {(provided) => (
                <ul
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className={styles.appsList}
                >
                  <AppsList apps={apps} onListUpdate={manageUpdates} />
                  {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </DragDropContext>
        ) }
      </>
    );

}

Example #4

Source File: ContactModal.js From sailplane-web with GNU General Public License v3.0

4 votes

export default function ContactModal({isVisible, onClose, onSelected}) {
  const contacts = useSelector((state) => state.main.contacts);
  const [isAddContactDialogVisible, setIsAddContactDialogVisible] = useState(
    false,
  );

  const styles = {
    container: {
      maxHeight: 400,
    },
    title: {
      fontSize: 18,
      fontWeight: 600,
    },
    toolsContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 2,
      marginBottom: 4,
      color: primary45,
      fontSize: 12,
    },
    tools: {
      width: '100%',
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center',
      color: primary45,
      fontSize: 12,
      backgroundColor: primary15,
      borderRadius: 2,
      padding: 2,
      border: `1px solid ${lightBorder}`,
    },
    noContacts: {
      marginTop: 8,
    },
  };

  return (
    <Dialog
      positionTop={1}
      onClose={onClose}
      isVisible={isVisible}
      title={'Contacts'}
      body={
        <div style={styles.container}>
          <div style={styles.toolsContainer}>
            <div style={styles.tools}>
              <>
                <ToolItem
                  className={'addContact'}
                  defaultColor={primary45}
                  changeColor={primary4}
                  iconComponent={FiPlusCircle}
                  title={'Add contact'}
                  onClick={() => setIsAddContactDialogVisible(true)}
                />
              </>
            </div>
          </div>

          {contacts?.length ? (
            contacts.map((contact, i) => (
              <Contact
                key={i}
                onClick={() => {
                  onSelected(contact.pubKey);
                  onClose();
                }}
                label={contact.label}
                pubKey={contact.pubKey}
                hideTools={true}
              />
            ))
          ) : (
            <div style={styles.noContacts}>No existing contacts</div>
          )}

          <AddContactDialog
            isVisible={isAddContactDialogVisible}
            onClose={() => setIsAddContactDialogVisible(false)}
            contacts={contacts}
          />
        </div>
      }
    />
  );
}

Example #5

Source File: Instances.js From sailplane-web with GNU General Public License v3.0

4 votes

export function Instances({sailplane, sharedFS}) {
  const [isImportDialogVisible, setIsImportDialogVisible] = useState(false);
  const [isCreateDialogVisible, setIsCreateDialogVisible] = useState(false);
  const [instanceToModifyAccess, setInstanceToModifyAccess] = useState(null);
  const dispatch = useDispatch();
  const main = useSelector((state) => state.main);
  const {instances, instanceIndex} = main;
  const prevInstanceLength = usePrevious(instances.length);

  useEffect(() => {
    if (prevInstanceLength && prevInstanceLength < instances.length) {
      dispatch(setInstanceIndex(instances.length - 1));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [instances.length, prevInstanceLength]);

  const createInstance = async (isEncrypted) => {
    setIsCreateDialogVisible(false);

    const address = await sailplaneUtil.determineAddress(sailplane, {
      enc: isEncrypted,
    });
    const driveName = sailplaneUtil.driveName(address);

    dispatch(addInstance(driveName, address.toString(), false, isEncrypted));
  };

  return (
    <div style={styles.container}>
      <UserHeader
        sailplane={sailplane}
        title={'Drives'}
        iconComponent={FaServer}
      />

      <div style={styles.toolsContainer}>
        <div style={styles.tools}>
          <>
            <ToolItem
              className={'importInstance'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiUpload}
              title={'Import drive'}
              onClick={() => setIsImportDialogVisible(true)}
            />

            <ToolItem
              className={'addInstance'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiPlusCircle}
              title={'Create drive'}
              onClick={() => setIsCreateDialogVisible(true)}
            />
          </>
        </div>
      </div>

      <div style={styles.instances}>
        {instances.map((instance, index) => (
          <Instance
            instanceIndex={index}
            key={instance.address.toString()}
            data={instance}
            selected={instance === instances[instanceIndex]}
            onClick={() => {
              dispatch(setInstanceIndex(index));
            }}
            onDelete={() => {
              dispatch(removeInstance(index));
            }}
            onAccess={() => {
              dispatch(setInstanceIndex(index));
              setTimeout(() => setInstanceToModifyAccess(instance), 500);
            }}
          />
        ))}
      </div>

      {instanceToModifyAccess ? (
        <InstanceAccessDialog
          onClose={() => setInstanceToModifyAccess(null)}
          instanceToModifyAccess={instanceToModifyAccess}
          sharedFS={sharedFS}
        />
      ) : null}

      <NewDriveDialog
        isVisible={isCreateDialogVisible}
        onClose={() => setIsCreateDialogVisible(false)}
        onPrivate={() => createInstance(true)}
        onPublic={() => createInstance(false)}
      />

      {isImportDialogVisible ? (
        <ImportDriveDialog
          sharedFS={sharedFS}
          onClose={() => setIsImportDialogVisible(false)}
          isVisible={isImportDialogVisible}
          sailplane={sailplane}
          instances={instances}
        />
      ) : null}

      <StatusBar />
    </div>
  );
}