MultipleSelectionPanel.js

import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import i18n from 'browser/lib/i18n'
import styles from './MultipleSelectionPanel.styl'

const TITLE_PREVIEW_LIMIT = 5

const MultipleSelectionPanel = ({
  selectedNotes,
  isTrashedView,
  onDelete,
  onPin,
  onRestore,
  onStar,
  onUnpin,
  onUnstar
}) => {
  if (selectedNotes.length < 2) {
    return null
  }

  const titlePreview = selectedNotes.slice(0, TITLE_PREVIEW_LIMIT)
  const remainingCount = selectedNotes.length - titlePreview.length

  return (
    <div styleName='panel'>
      <div styleName='summary'>
        <div styleName='count'>
          {`${selectedNotes.length} ${i18n.__('notes selected')}`}
        </div>
        <div styleName='subtitle'>
          {i18n.__('Choose an action to apply to every selected note.')}
        </div>
      </div>
      <ul styleName='note-list'>
        {titlePreview.map(note => (
          <li key={note.key} styleName='note-title' title={note.title}>
            {note.title}
          </li>
        ))}
        {remainingCount > 0 && (
          <li styleName='note-title'>
            + {remainingCount} {i18n.__('more')}
          </li>
        )}
      </ul>
      <div styleName='actions'>
        {isTrashedView ? (
          <button styleName='action-button' onClick={onRestore}>
            <i className='fa fa-undo' />
            {i18n.__('Restore')}
          </button>
        ) : (
          <React.Fragment>
            <button styleName='action-button' onClick={onStar}>
              <i className='fa fa-star' />
              {i18n.__('Star')}
            </button>
            <button styleName='action-button' onClick={onUnstar}>
              <i className='fa fa-star-o' />
              {i18n.__('Unstar')}
            </button>
            <button styleName='action-button' onClick={onPin}>
              <i className='fa fa-thumb-tack' />
              {i18n.__('Pin')}
            </button>
            <button styleName='action-button' onClick={onUnpin}>
              <i className='fa fa-minus-circle' />
              {i18n.__('Unpin')}
            </button>
          </React.Fragment>
        )}
        <button styleName='action-button--danger' onClick={onDelete}>
          <i className='fa fa-trash' />
          {isTrashedView ? i18n.__('Delete forever') : i18n.__('Move to Trash')}
        </button>
      </div>
    </div>
  )
}

MultipleSelectionPanel.propTypes = {
  selectedNotes: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired
    })
  ).isRequired,
  isTrashedView: PropTypes.bool.isRequired,
  onDelete: PropTypes.func.isRequired,
  onPin: PropTypes.func.isRequired,
  onRestore: PropTypes.func.isRequired,
  onStar: PropTypes.func.isRequired,
  onUnpin: PropTypes.func.isRequired,
  onUnstar: PropTypes.func.isRequired
}

export { MultipleSelectionPanel }
export default CSSModules(MultipleSelectionPanel, styles)