[Summary view] [Print] [Text view]

   1  /**
   2   * WordPress dependencies.
   3   */
   4  const {
   5      blockEditor: {
   6          InspectorControls,
   7          BlockControls,
   8      },
   9      components: {
  10          Placeholder,
  11          PanelBody,
  12          SelectControl,
  13          ToggleControl,
  14          Button,
  15          Dashicon,
  16          Tooltip,
  17          ToolbarGroup,
  18          RangeControl,
  19      },
  20      element: {
  21          createElement,
  22          Fragment,
  23          useState,
  24      },
  25      i18n: {
  26          __,
  27          sprintf,
  28      },
  29      apiFetch,
  30      url: {
  31          addQueryArgs,
  32      },
  33  } = wp;
  34  
  35  /**
  36   * BuddyPress dependencies.
  37   */
  38  const {
  39      blockComponents: {
  40          AutoCompleter,
  41      },
  42      blockData: {
  43          isActive,
  44      }
  45  } = bp;
  46  
  47  /**
  48   * Internal dependencies.
  49   */
  50  import { AVATAR_SIZES, EXTRA_DATA } from './constants';
  51  
  52  /**
  53   * External dependencies.
  54   */
  55  const {
  56      reject,
  57      remove,
  58      sortBy,
  59  } = lodash;
  60  
  61  const getSlugValue = ( item ) => {
  62      if ( item && item.mention_name ) {
  63          return item.mention_name;
  64      }
  65  
  66      return null;
  67  }
  68  
  69  const editMembersBlock = ( { attributes, setAttributes, isSelected } ) => {
  70      const isAvatarEnabled = isActive( 'members', 'avatar' );
  71      const isMentionEnabled = isActive( 'activity', 'mentions' );
  72      const {
  73          itemIDs,
  74          avatarSize,
  75          displayMentionSlug,
  76          displayUserName,
  77          extraData,
  78          layoutPreference,
  79          columns,
  80      } = attributes;
  81      const hasMembers = 0 !== itemIDs.length;
  82      const [ members, setMembers ] = useState( [] );
  83      const layoutControls = [
  84          {
  85              icon: 'text',
  86              title: __( 'List view', 'buddypress' ),
  87              onClick: () => setAttributes( { layoutPreference: 'list' } ),
  88              isActive: layoutPreference === 'list',
  89          },
  90          {
  91              icon: 'screenoptions',
  92              title: __( 'Grid view', 'buddypress' ),
  93              onClick: () => setAttributes( { layoutPreference: 'grid' } ),
  94              isActive: layoutPreference === 'grid',
  95          },
  96      ];
  97      let membersList;
  98      let containerClasses = 'bp-block-members avatar-' + avatarSize;
  99      let extraDataOptions = EXTRA_DATA;
 100  
 101      if ( layoutPreference === 'grid' ) {
 102          containerClasses += ' is-grid columns-' + columns;
 103          extraDataOptions = EXTRA_DATA.filter( ( extra ) => {
 104              return 'latest_update' !== extra.value;
 105          } );
 106      }
 107  
 108      const onSelectedMember = ( { itemID } ) => {
 109          if ( itemID && -1 === itemIDs.indexOf( itemID ) ) {
 110              setAttributes( {
 111                  itemIDs: [...itemIDs, parseInt( itemID, 10 ) ]
 112              } );
 113          }
 114      };
 115  
 116      const onRemoveMember = ( ( itemID ) => {
 117          if ( itemID && -1 !== itemIDs.indexOf( itemID ) ) {
 118              setMembers( reject( members, ['id', itemID ] ) );
 119              setAttributes( {
 120                  itemIDs: remove( itemIDs, ( value ) => { return value !== itemID } )
 121              } );
 122          }
 123      } );
 124  
 125      if ( hasMembers && itemIDs.length !== members.length ) {
 126          apiFetch( {
 127              path: addQueryArgs( `/buddypress/v1/members`, { populate_extras: true, include: itemIDs } ),
 128          } ).then( items => {
 129              setMembers(
 130                  sortBy( items, [ ( item ) => {
 131                      return itemIDs.indexOf( item.id );
 132                  } ] )
 133              );
 134          } )
 135      }
 136  
 137      if ( members.length ) {
 138          membersList = members.map( ( member ) => {
 139              let hasActivity = false;
 140              let memberItemClasses = 'member-content';
 141  
 142              if ( layoutPreference === 'list' && 'latest_update' === extraData && member.latest_update && member.latest_update.rendered ) {
 143                  hasActivity = true;
 144                  memberItemClasses = 'member-content has-activity';
 145              }
 146  
 147              return (
 148                  <div key={ 'bp-member-' + member.id } className={ memberItemClasses }>
 149                      { isSelected && (
 150                          <Tooltip text={ __( 'Remove member', 'buddypress' ) }>
 151                              <Button
 152                                  className="is-right"
 153                                  onClick={ () => onRemoveMember( member.id ) }
 154                                  label={ __( 'Remove member', 'buddypress' ) }
 155                              >
 156                                  <Dashicon icon="no"/>
 157                              </Button>
 158                          </Tooltip>
 159                      ) }
 160                      { isAvatarEnabled && 'none' !== avatarSize && (
 161                          <div className="item-header-avatar">
 162                              <a href={ member.link } target="_blank">
 163                                  <img
 164                                      key={ 'avatar-' + member.id }
 165                                      className="avatar"
 166                                      alt={ sprintf( __( 'Profile photo of %s', 'buddypress' ), member.name ) }
 167                                      src={ member.avatar_urls[ avatarSize ] }
 168                                  />
 169                              </a>
 170                          </div>
 171                      ) }
 172                      <div className="member-description">
 173                          { hasActivity && (
 174                              <blockquote className="wp-block-quote">
 175                                  <div dangerouslySetInnerHTML={ { __html: member.latest_update.rendered } } />
 176                                  <cite>
 177                                      { displayUserName && (
 178                                          <span>
 179                                              { member.name }
 180                                          </span>
 181                                      ) }
 182                                      &nbsp;
 183                                      { isMentionEnabled && displayMentionSlug && (
 184                                          <a href={ member.link } target="_blank">
 185                                              (@{ member.mention_name })
 186                                          </a>
 187                                      ) }
 188                                  </cite>
 189                              </blockquote>
 190                          ) }
 191                          { ! hasActivity && displayUserName && (
 192                              <strong>
 193                                  <a href={ member.link } target="_blank">
 194                                      { member.name }
 195                                  </a>
 196                              </strong>
 197                          ) }
 198  
 199                          { ! hasActivity && isMentionEnabled && displayMentionSlug && (
 200                              <span className="user-nicename">@{ member.mention_name }</span>
 201                          ) }
 202  
 203                          { 'last_activity' === extraData && member.last_activity && member.last_activity.date && (
 204                              <time dateTime={ member.last_activity.date }>
 205                                  { sprintf( __( 'Active %s', 'buddypress' ), member.last_activity.timediff ) }
 206                              </time>
 207                          ) }
 208                      </div>
 209                  </div>
 210              );
 211          } );
 212      }
 213  
 214      return (
 215          <Fragment>
 216              <InspectorControls>
 217                  <PanelBody title={ __( 'Settings', 'buddypress' ) } initialOpen={ true }>
 218                      <ToggleControl
 219                          label={ __( 'Display the user name', 'buddypress' ) }
 220                          checked={ !! displayUserName }
 221                          onChange={ () => {
 222                              setAttributes( { displayUserName: ! displayUserName } );
 223                          } }
 224                          help={
 225                              displayUserName
 226                                  ? __( 'Include the user\'s display name.', 'buddypress' )
 227                                  : __( 'Toggle to include user\'s display name.', 'buddypress' )
 228                          }
 229                      />
 230  
 231                      { isMentionEnabled && (
 232                          <ToggleControl
 233                              label={ __( 'Display Mention slug', 'buddypress' ) }
 234                              checked={ !! displayMentionSlug }
 235                              onChange={ () => {
 236                                  setAttributes( { displayMentionSlug: ! displayMentionSlug } );
 237                              } }
 238                              help={
 239                                  displayMentionSlug
 240                                      ? __( 'Include the user\'s mention name under their display name.', 'buddypress' )
 241                                      : __( 'Toggle to display the user\'s mention name under their display name.', 'buddypress' )
 242                              }
 243                          />
 244                      ) }
 245  
 246                      { isAvatarEnabled && (
 247                          <SelectControl
 248                              label={ __( 'Avatar size', 'buddypress' ) }
 249                              value={ avatarSize }
 250                              options={ AVATAR_SIZES }
 251                              help={ __( 'Select "None" to disable the avatar.', 'buddypress' ) }
 252                              onChange={ ( option ) => {
 253                                  setAttributes( { avatarSize: option } );
 254                              } }
 255                          />
 256                      ) }
 257  
 258                      <SelectControl
 259                          label={ __( 'BuddyPress extra information', 'buddypress' ) }
 260                          value={ extraData }
 261                          options={ extraDataOptions }
 262                          help={ __( 'Select "None" to show no extra information.', 'buddypress' ) }
 263                          onChange={ ( option ) => {
 264                              setAttributes( { extraData: option } );
 265                          } }
 266                      />
 267  
 268                      { layoutPreference === 'grid' && (
 269                          <RangeControl
 270                              label={ __( 'Columns', 'buddypress' ) }
 271                              value={ columns }
 272                              onChange={ ( value ) =>
 273                                  setAttributes( { columns: value } )
 274                              }
 275                              min={ 2 }
 276                              max={ 4 }
 277                              required
 278                          />
 279                      ) }
 280                  </PanelBody>
 281              </InspectorControls>
 282  
 283              <BlockControls>
 284                  <ToolbarGroup controls={ layoutControls } />
 285              </BlockControls>
 286  
 287              { hasMembers && (
 288                  <div className={ containerClasses }>
 289                      { membersList }
 290                  </div>
 291              ) }
 292  
 293              { ( isSelected || 0 === itemIDs.length ) && (
 294                  <Placeholder
 295                      icon={ hasMembers ? '' : 'groups' }
 296                      label={ hasMembers ? '' : __( 'BuddyPress Members', 'buddypress' ) }
 297                      instructions={ __( 'Start typing the name of the member you want to add to the members list.', 'buddypress' ) }
 298                      className={ 0 !== itemIDs.length ? 'is-appender' : 'is-large' }
 299                  >
 300                      <AutoCompleter
 301                          component="members"
 302                          objectQueryArgs={ { exclude: itemIDs } }
 303                          slugValue={ getSlugValue }
 304                          ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
 305                          placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
 306                          onSelectItem={ onSelectedMember }
 307                          useAvatar={ isAvatarEnabled }
 308                      />
 309                  </Placeholder>
 310              ) }
 311          </Fragment>
 312      );
 313  };
 314  
 315  export default editMembersBlock;