# All files / src/FileSelect/FileExplorer FileExplorer.tsx

87.87% Statements 29/33
64% Branches 16/25
50% Functions 3/6
87.09% Lines 27/31

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    1284x
    4x
    4x
    4x
    4x
    4x
    4x
    4x

    4x

    4x

    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x

    36x
    36x
    30x

    36x

    36x

    1x

     import React from 'react'
    import { Button } from '../../Button/Button'
    import { Modal } from '../../Modal/Modal'
    import { Tooltip } from '../../Tooltip/Tooltip'
    import { Typography } from '../../Typography/Typography'
    import { useI18nContext } from '../../_hooks/I18n'
    import { FileExplorerSidebar } from '../FileExplorer/FileExplorerSidebar'
    import {
      StyledAttachButton,
      StyledModalBody,
      StyledModalContent,
      StyledModalHeader,
      StyledModalInnerBody,
      StyledSource,
    } from './FileExplorer.styles'
    import { FileExplorerProps } from './FileExplorer.types'
    import { FileExplorerModal } from './FileExplorerModal'

    export const FileExplorer = React.forwardRef<HTMLDivElement, FileExplorerProps>(
      function FileExplorer(
        {
          maxFileNumber = Infinity,
          children,
          onSubmit,
          sources,
          isOpen,
          currentSource,
          onCurrentSourceChange,
          onCancel,
          unsubmittedValueCount,
          qa,
          ...props
        },
        ref
      ) {
        const I18n = useI18nContext()
        const hasPendingUploadSources = sources.some(
          ({ isUploading }) => isUploading
        )

        const isAttachButtonDisabled =
          hasPendingUploadSources || unsubmittedValueCount === 0

        return (
          <FileExplorerModal
            {...props}
            ref={ref}
            open={isOpen}
            onKeyDown={(e) => {
              Iif (e.key === 'Esc' || e.key === 'Escape') {
                onCancel()
              }
            }}
          >
            <StyledModalHeader
              onClose={() => {
                onCancel()
              }}
            >
              {I18n.t('core.fileExplorer.modalTitle')}
            </StyledModalHeader>
            <StyledModalBody>
              <StyledModalInnerBody>
                <FileExplorerSidebar
                  value={currentSource}
                  onChange={onCurrentSourceChange}
                  sources={sources}
                  isOpen={isOpen}
                />
                {/* prevent <div /> from being focused in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=616594 */}
                <StyledModalContent tabIndex={-1}>
                  <StyledSource>{children}</StyledSource>
                </StyledModalContent>
              </StyledModalInnerBody>
            </StyledModalBody>
            <Modal.Footer>
              <Modal.FooterNotation>
                <Typography color="gray45" italic>
                  {maxFileNumber === Infinity
                    ? I18n.t('core.fileExplorer.filesSelected', {
                        count: unsubmittedValueCount,
                      })
                    : I18n.t('core.fileExplorer.filesSelectedWithLimit', {
                        count: unsubmittedValueCount,
                        maxFileNumber: maxFileNumber,
                      })}
                </Typography>
              </Modal.FooterNotation>
              <Modal.FooterButtons>
                <Button
                  data-qa={qa?.cancelButton}
                  variant="tertiary"
                  onClick={() => {
                    onCancel()
                  }}
                >
                  {I18n.t('core.fileExplorer.cancelAction')}
                </Button>
                <Tooltip
                  showKeys={[]}
                  trigger={isAttachButtonDisabled ? 'hover' : 'none'}
                  overlay={
                    hasPendingUploadSources
                      ? I18n.t('core.fileExplorer.filesPendingUpload')
                      : I18n.t('core.fileExplorer.noSelectedItems')
                  }
                >
                  {/* this wrapper is required for the tooltip to work with disabled button */}
                  <StyledAttachButton>
                    <Button
                      data-qa={qa?.attachButton}
                      variant="primary"
                      disabled={isAttachButtonDisabled}
                      onClick={() => {
                        onSubmit?.()
                      }}
                    >
                      {I18n.t('core.fileExplorer.attachAction')}
                    </Button>
                  </StyledAttachButton>
                </Tooltip>
              </Modal.FooterButtons>
            </Modal.Footer>
          </FileExplorerModal>
        )
      }
    )