# All files / react/SelectionBar index.jsx

22.22% Statements 2/9
0% Branches 0/2
0% Functions 0/4
22.22% Lines 2/9

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

    1x

    1x

     import React from 'react'
    import PropTypes from 'prop-types'
    import { translate } from '../I18n'
    import { Button, Icon } from '../index'

    import styles from './styles.styl'

    /*

    If you want use SelectionBar component, you must have `actions` parameter, like :

    actions = {
      trash: {
        action: selections => dispatch(trashFiles(selections)))
      },
      rename: {
        action: selections => dispatch(startRenamingAsync(selected[0])),
        displayCondition: selections => selections.length === 1
      }
    }

    */

    const SelectionBar = ({ t, actions, selected, hideSelectionBar }) => {
      const selectedCount = selected.length
      const actionNames = Object.keys(actions).filter(actionName => {
        const action = actions[actionName]
        return (
          action.displayCondition === undefined || action.displayCondition(selected)
        )
      })
      return (
        <div className={styles['coz-selectionbar']} role="toolbar">
          <span className={styles['coz-selectionbar-count']}>
            {selectedCount}
            <span>
              {' '}
              {t('SelectionBar.selected_count', { smart_count: selectedCount })}
            </span>
          </span>
          <span className={styles['coz-selectionbar-separator']} />
          {actionNames.map((actionName, index) => (
            <button
              key={index}
              disabled={selectedCount < 1}
              onClick={() => actions[actionName].action(selected)}
            >
              <Icon icon={actionName.toLowerCase()} />
              <span className={styles['coz-selectionbar-label']}>
                {t('SelectionBar.' + actionName)}
              </span>
            </button>
          ))}
          <Button
            theme="close"
            className={styles['coz-action-close']}
            onClick={hideSelectionBar}
            extension="narrow"
          >
            <Icon icon="cross" />
          </Button>
        </div>
      )
    }

    SelectionBar.propTypes = {
      t: PropTypes.func.isRequired, // translate action name.
      actions: PropTypes.object.isRequired, // An object with actions
      selected: PropTypes.array.isRequired, // selected items id.
      hideSelectionBar: PropTypes.func.isRequired // function to close SelectionBar.
    }

    export default translate()(SelectionBar)