react-icons/io#IoMdClose TypeScript Examples

The following examples show how to use react-icons/io#IoMdClose. 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: UploadTypeChoiceModal.tsx From bada-frame with GNU General Public License v3.0

5 votes

export default function UploadTypeChoiceModal({
    onHide,
    show,
    uploadFiles,
    uploadFolders,
    uploadGoogleTakeoutZips,
}) {
    return (
        <Modal
            show={show}
            aria-labelledby="contained-modal-title-vcenter"
            centered
            dialogClassName="file-type-choice-modal">
            <Modal.Header
                onHide={onHide}
                style={{
                    borderBottom: 'none',
                    height: '4em',
                }}>
                <Modal.Title
                    id="contained-modal-title-vcenter"
                    style={{
                        fontSize: '1.8em',
                        marginLeft: '5%',
                        color: 'white',
                    }}>
                    <b>{constants.CHOOSE_UPLOAD_TYPE}</b>
                </Modal.Title>
                <IoMdClose
                    size={30}
                    onClick={onHide}
                    style={{ cursor: 'pointer' }}
                />
            </Modal.Header>
            <Modal.Body>
                <Container>
                    <UploadTypeRow
                        uploadFunc={uploadFiles}
                        Icon={FileUploadIcon}
                        uploadName={constants.UPLOAD_FILES}
                    />
                    <UploadTypeRow
                        uploadFunc={uploadFolders}
                        Icon={FolderUploadIcon}
                        uploadName={constants.UPLOAD_DIRS}
                    />
                    <UploadTypeRow
                        uploadFunc={uploadGoogleTakeoutZips}
                        Icon={GoogleIcon}
                        uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
                    />
                </Container>
            </Modal.Body>
        </Modal>
    );
}

Example #2

Source File: UploadProgress.tsx From bada-frame with GNU General Public License v3.0

4 votes

export default function UploadProgress(props: Props) {
    const appContext = useContext(AppContext);

    const fileProgressStatuses = [] as FileProgresses[];
    const fileUploadResultMap = new Map<FileUploadResults, number[]>();
    let filesNotUploaded = false;
    let sectionInfo = null;
    if (props.fileProgress) {
        for (const [localID, progress] of props.fileProgress) {
            fileProgressStatuses.push({
                fileID: localID,
                progress,
            });
        }
    }
    if (props.uploadResult) {
        for (const [localID, progress] of props.uploadResult) {
            if (!fileUploadResultMap.has(progress)) {
                fileUploadResultMap.set(progress, []);
            }
            if (
                progress !== FileUploadResults.UPLOADED &&
                progress !== FileUploadResults.UPLOADED_WITH_STATIC_THUMBNAIL
            ) {
                filesNotUploaded = true;
            }
            const fileList = fileUploadResultMap.get(progress);

            fileUploadResultMap.set(progress, [...fileList, localID]);
        }
    }
    if (props.hasLivePhotos) {
        sectionInfo = constants.LIVE_PHOTOS_DETECTED();
    }

    function handleHideModal(): () => void {
        return props.uploadStage !== UPLOAD_STAGES.FINISH
            ? () => {
                  appContext.setDialogMessage({
                      title: constants.STOP_UPLOADS_HEADER,
                      content: constants.STOP_ALL_UPLOADS_MESSAGE,
                      proceed: {
                          text: constants.YES_STOP_UPLOADS,
                          variant: 'danger',
                          action: props.cancelUploads,
                      },
                      close: {
                          text: constants.NO,
                          variant: 'secondary',
                          action: () => {},
                      },
                  });
              }
            : props.closeModal;
    }

    return (
        <>
            <Modal
                show={props.show}
                aria-labelledby="contained-modal-title-vcenter"
                centered
                backdrop={fileProgressStatuses?.length !== 0 ? 'static' : true}>
                <Modal.Header
                    style={{
                        display: 'flex',
                        justifyContent: 'center',
                        textAlign: 'center',
                        borderBottom: 'none',
                        paddingTop: '30px',
                        paddingBottom: '0px',
                    }}>
                    <h4 style={{ width: '100%' }}>
                        {props.uploadStage === UPLOAD_STAGES.UPLOADING
                            ? constants.UPLOAD[props.uploadStage](
                                  props.fileCounter
                              )
                            : constants.UPLOAD[props.uploadStage]}
                    </h4>
                    <IoMdClose
                        size={30}
                        onClick={handleHideModal()}
                        style={{ cursor: 'pointer' }}
                    />
                </Modal.Header>
                <Modal.Body>
                    {(props.uploadStage ===
                        UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
                        props.uploadStage ===
                            UPLOAD_STAGES.EXTRACTING_METADATA ||
                        props.uploadStage === UPLOAD_STAGES.UPLOADING) && (
                        <ProgressBar
                            now={props.now}
                            animated
                            variant="upload-progress-bar"
                        />
                    )}
                    {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
                        <InProgressSection
                            filenames={props.filenames}
                            fileProgressStatuses={fileProgressStatuses}
                            sectionTitle={constants.INPROGRESS_UPLOADS}
                            sectionInfo={sectionInfo}
                        />
                    )}

                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.UPLOADED}
                        sectionTitle={constants.SUCCESSFUL_UPLOADS}
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={
                            FileUploadResults.UPLOADED_WITH_STATIC_THUMBNAIL
                        }
                        sectionTitle={
                            constants.THUMBNAIL_GENERATION_FAILED_UPLOADS
                        }
                        sectionInfo={constants.THUMBNAIL_GENERATION_FAILED_INFO}
                    />

                    {props.uploadStage === UPLOAD_STAGES.FINISH &&
                        filesNotUploaded && (
                            <NotUploadSectionHeader>
                                {constants.FILE_NOT_UPLOADED_LIST}
                            </NotUploadSectionHeader>
                        )}

                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.BLOCKED}
                        sectionTitle={constants.BLOCKED_UPLOADS}
                        sectionInfo={constants.ETAGS_BLOCKED(
                            getOSSpecificDesktopAppDownloadLink()
                        )}
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.FAILED}
                        sectionTitle={constants.FAILED_UPLOADS}
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
                        sectionTitle={constants.SKIPPED_FILES}
                        sectionInfo={constants.SKIPPED_INFO}
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={
                            FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
                        }
                        sectionTitle={
                            constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
                        }
                        sectionInfo={
                            constants.LARGER_THAN_AVAILABLE_STORAGE_INFO
                        }
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.UNSUPPORTED}
                        sectionTitle={constants.UNSUPPORTED_FILES}
                        sectionInfo={constants.UNSUPPORTED_INFO}
                    />
                    <ResultSection
                        filenames={props.filenames}
                        fileUploadResultMap={fileUploadResultMap}
                        fileUploadResult={FileUploadResults.TOO_LARGE}
                        sectionTitle={constants.TOO_LARGE_UPLOADS}
                        sectionInfo={constants.TOO_LARGE_INFO}
                    />
                </Modal.Body>
                {props.uploadStage === UPLOAD_STAGES.FINISH && (
                    <Modal.Footer style={{ border: 'none' }}>
                        {props.uploadStage === UPLOAD_STAGES.FINISH &&
                            (fileUploadResultMap?.get(FileUploadResults.FAILED)
                                ?.length > 0 ||
                            fileUploadResultMap?.get(FileUploadResults.BLOCKED)
                                ?.length > 0 ? (
                                <Button
                                    variant="outline-success"
                                    style={{ width: '100%' }}
                                    onClick={props.retryFailed}>
                                    {constants.RETRY_FAILED}
                                </Button>
                            ) : (
                                <Button
                                    variant="outline-secondary"
                                    style={{ width: '100%' }}
                                    onClick={props.closeModal}>
                                    {constants.CLOSE}
                                </Button>
                            ))}
                    </Modal.Footer>
                )}
            </Modal>
        </>
    );
}