# All files / composer/components BoardSelectorBoardItem.jsx

0% Statements 0/17
0% Branches 0/18
0% Functions 0/5
0% Lines 0/17

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

     import React from 'react';
    import PropTypes from 'prop-types';
    import AppActionCreators from '../action-creators/AppActionCreators';
    import Button from '../components/Button';
    import styles from './css/BoardSelectorBoardItem.css';

    class BoardSelectorBoardItem extends React.Component {
      static propTypes = {
        profile: PropTypes.object.isRequired,
        board: PropTypes.object.isRequired,
        canUnselectSubprofiles: PropTypes.bool.isRequired,
        onChange: PropTypes.func.isRequired,
      };

      onClick = () => (
        this.isBoardSelected() ? this.onSelectedBoardClick() : this.onUnselectedBoardClick()
      );

      onSelectedBoardClick = () => {
        if (this.props.canUnselectSubprofiles) {
          AppActionCreators.unselectSubprofile(this.props.profile.id, this.props.board.id);
          AppActionCreators.trackUserAction(['composer', 'deselected_profile']);
          this.props.onChange();
        }
      };

      onUnselectedBoardClick = () => {
        AppActionCreators.selectSubprofile(this.props.profile.id, this.props.board.id);
        AppActionCreators.trackUserAction(['composer', 'selected_profile']);
        this.props.onChange();
      };

      isBoardSelected = () => this.props.profile.selectedSubprofileId === this.props.board.id;

      render() {
        const { board, canUnselectSubprofiles } = this.props;

        const boardClassName =
          !this.isBoardSelected() ? styles.board :
          canUnselectSubprofiles ? styles.selectedBoard : styles.nonUnselectableSelectedBoard;

        const defaultAvatarToOverride = 'https://static.bufferapp.com/images/app/pin_2x.png';
        const defaultAvatar = 'https://static.bufferapp.com/images/app/img_pin@2x.png';
        const avatar = (board.avatar !== defaultAvatarToOverride) ? board.avatar : defaultAvatar;

        const sharedBoardIconClassName = [
          styles.sharedBoardIcon,
          'bi bi-persons',
        ].join(' ');

        const selectionStateIconClassName = [
          this.isBoardSelected() ? styles.selectedBoardIcon : styles.unselectedBoardIcon,
          this.isBoardSelected() && canUnselectSubprofiles ?
            'bi bi-circle-x' : 'bi bi-circle-checkmark',
        ].join(' ');

        return (
          <Button
            className={boardClassName} onClick={this.onClick}
            title={board.name}
            aria-selected={this.isBoardSelected()}
          >
            <img className={styles.boardThumbnail} src={avatar} alt="" />

            <span className={styles.iconsContainer}>
              {board.isShared &&
                <div className={sharedBoardIconClassName}></div>}

              <span className={selectionStateIconClassName} />
            </span>

            <span className={styles.boardName}>{board.name}</span>
          </Button>
        );
      }
    }

    export default BoardSelectorBoardItem;