[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          _n,
  29      },
  30      apiFetch,
  31      url: {
  32          addQueryArgs,
  33      },
  34  } = wp;
  35  
  36  /**
  37   * BuddyPress dependencies.
  38   */
  39  const {
  40      blockComponents: {
  41          AutoCompleter,
  42      },
  43      blockData: {
  44          isActive,
  45      }
  46  } = bp;
  47  
  48  /**
  49   * Internal dependencies.
  50   */
  51  import { AVATAR_SIZES, EXTRA_INFO, GROUP_STATI } from './constants';
  52  
  53  /**
  54   * External dependencies.
  55   */
  56  const {
  57      reject,
  58      remove,
  59      sortBy,
  60  } = lodash;
  61  
  62  const getSlugValue = ( item ) => {
  63      if ( item && item.status && GROUP_STATI[ item.status ] ) {
  64          return GROUP_STATI[ item.status ];
  65      }
  66  
  67      return null;
  68  }
  69  
  70  const editGroupsBlock = ( { attributes, setAttributes, isSelected } ) => {
  71      const isAvatarEnabled = isActive( 'groups', 'avatar' );
  72      const {
  73          itemIDs,
  74          avatarSize,
  75          displayGroupName,
  76          extraInfo,
  77          layoutPreference,
  78          columns,
  79      } = attributes;
  80      const hasGroups = 0 !== itemIDs.length;
  81      const [ groups, setGroups ] = useState( [] );
  82      const layoutControls = [
  83          {
  84              icon: 'text',
  85              title: __( 'List view', 'buddypress' ),
  86              onClick: () => setAttributes( { layoutPreference: 'list' } ),
  87              isActive: layoutPreference === 'list',
  88          },
  89          {
  90              icon: 'screenoptions',
  91              title: __( 'Grid view', 'buddypress' ),
  92              onClick: () => setAttributes( { layoutPreference: 'grid' } ),
  93              isActive: layoutPreference === 'grid',
  94          },
  95      ];
  96      let groupsList;
  97      let containerClasses = 'bp-block-groups avatar-' + avatarSize;
  98      let extraInfoOptions = EXTRA_INFO;
  99  
 100      if ( layoutPreference === 'grid' ) {
 101          containerClasses += ' is-grid columns-' + columns;
 102          extraInfoOptions = EXTRA_INFO.filter( ( extra ) => {
 103              return 'description' !== extra.value;
 104          } );
 105      }
 106  
 107      const onSelectedGroup = ( { itemID } ) => {
 108          if ( itemID && -1 === itemIDs.indexOf( itemID ) ) {
 109              setAttributes( {
 110                  itemIDs: [...itemIDs, parseInt( itemID, 10 ) ]
 111              } );
 112          }
 113      };
 114  
 115      const onRemoveGroup = ( ( itemID ) => {
 116          if ( itemID && -1 !== itemIDs.indexOf( itemID ) ) {
 117              setGroups( reject( groups, ['id', itemID ] ) );
 118              setAttributes( {
 119                  itemIDs: remove( itemIDs, ( value ) => { return value !== itemID } )
 120              } );
 121          }
 122      } );
 123  
 124      if ( hasGroups && itemIDs.length !== groups.length ) {
 125          apiFetch( {
 126              path: addQueryArgs( `/buddypress/v1/groups`, { populate_extras: true, include: itemIDs } ),
 127          } ).then( items => {
 128              setGroups(
 129                  sortBy( items, [ ( item ) => {
 130                      return itemIDs.indexOf( item.id );
 131                  } ] )
 132              );
 133          } )
 134      }
 135  
 136      if ( groups.length ) {
 137          groupsList = groups.map( ( group ) => {
 138              let hasDescription = false;
 139              let groupItemClasses = 'group-content';
 140  
 141              if ( layoutPreference === 'list' && 'description' === extraInfo && group.description && group.description.rendered ) {
 142                  hasDescription = true;
 143                  groupItemClasses = 'group-content has-description';
 144              }
 145  
 146              return (
 147                  <div key={ 'bp-group-' + group.id } className={ groupItemClasses }>
 148                      { isSelected && (
 149                          <Tooltip text={ __( 'Remove group', 'buddypress' ) }>
 150                              <Button
 151                                  className="is-right"
 152                                  onClick={ () => onRemoveGroup( group.id ) }
 153                                  label={ __( 'Remove group', 'buddypress' ) }
 154                              >
 155                                  <Dashicon icon="no"/>
 156                              </Button>
 157                          </Tooltip>
 158                      ) }
 159                      { isAvatarEnabled && 'none' !== avatarSize && (
 160                          <div className="item-header-avatar">
 161                              <a href={ group.link } target="_blank">
 162                                  <img
 163                                      key={ 'avatar-' + group.id }
 164                                      className="avatar"
 165                                      alt={ sprintf( __( 'Profile photo of %s', 'buddypress' ), group.name ) }
 166                                      src={ group.avatar_urls[ avatarSize ] }
 167                                  />
 168                              </a>
 169                          </div>
 170                      ) }
 171                      <div className="group-description">
 172                          { displayGroupName && (
 173                              <strong>
 174                                  <a href={ group.link } target="_blank">
 175                                      { group.name }
 176                                  </a>
 177                              </strong>
 178                          ) }
 179  
 180                          { hasDescription && (
 181                              <div className="group-description-content" dangerouslySetInnerHTML={ { __html: group.description.rendered } } />
 182                          ) }
 183  
 184                          { 'active' === extraInfo && group.last_activity && group.last_activity_diff && (
 185                              <time dateTime={ group.last_activity }>
 186                                  { sprintf( __( 'Active %s', 'buddypress' ), group.last_activity_diff ) }
 187                              </time>
 188                          ) }
 189  
 190                          { 'popular' === extraInfo && group.total_member_count && (
 191                              <div className="group-meta">
 192                                  {  sprintf(
 193                                      /* translators: 1: number of group memberss. */
 194                                      _n(
 195                                          '%1$d member',
 196                                          '%1$d members',
 197                                          group.total_member_count,
 198                                          'buddypress'
 199                                      ),
 200                                      group.total_member_count
 201                                  ) }
 202                              </div>
 203                          ) }
 204                      </div>
 205                  </div>
 206              );
 207          } );
 208      }
 209  
 210      return (
 211          <Fragment>
 212              <InspectorControls>
 213                  <PanelBody title={ __( 'Settings', 'buddypress' ) } initialOpen={ true }>
 214                      <ToggleControl
 215                          label={ __( 'Display the group\'s name', 'buddypress' ) }
 216                          checked={ !! displayGroupName }
 217                          onChange={ () => {
 218                              setAttributes( { displayGroupName: ! displayGroupName } );
 219                          } }
 220                          help={
 221                              displayGroupName
 222                                  ? __( 'Include the group\'s name.', 'buddypress' )
 223                                  : __( 'Toggle to include group\'s name.', 'buddypress' )
 224                          }
 225                      />
 226  
 227                      { isAvatarEnabled && (
 228                          <SelectControl
 229                              label={ __( 'Avatar size', 'buddypress' ) }
 230                              value={ avatarSize }
 231                              options={ AVATAR_SIZES }
 232                              help={ __( 'Select "None" to disable the avatar.', 'buddypress' ) }
 233                              onChange={ ( option ) => {
 234                                  setAttributes( { avatarSize: option } );
 235                              } }
 236                          />
 237                      ) }
 238  
 239                      <SelectControl
 240                          label={ __( 'Group extra information', 'buddypress' ) }
 241                          value={ extraInfo }
 242                          options={ extraInfoOptions }
 243                          help={ __( 'Select "None" to show no extra information.', 'buddypress' ) }
 244                          onChange={ ( option ) => {
 245                              setAttributes( { extraInfo: option } );
 246                          } }
 247                      />
 248  
 249                      { layoutPreference === 'grid' && (
 250                          <RangeControl
 251                              label={ __( 'Columns', 'buddypress' ) }
 252                              value={ columns }
 253                              onChange={ ( value ) =>
 254                                  setAttributes( { columns: value } )
 255                              }
 256                              min={ 2 }
 257                              max={ 4 }
 258                              required
 259                          />
 260                      ) }
 261                  </PanelBody>
 262              </InspectorControls>
 263  
 264              <BlockControls>
 265                  <ToolbarGroup controls={ layoutControls } />
 266              </BlockControls>
 267  
 268              { hasGroups && (
 269                  <div className={ containerClasses }>
 270                      { groupsList }
 271                  </div>
 272              ) }
 273  
 274              { ( isSelected || 0 === itemIDs.length ) && (
 275                  <Placeholder
 276                      icon={ hasGroups ? '' : 'groups' }
 277                      label={ hasGroups ? '' : __( 'BuddyPress Groups', 'buddypress' ) }
 278                      instructions={ __( 'Start typing the name of the group you want to add to the groups list.', 'buddypress' ) }
 279                      className={ 0 !== itemIDs.length ? 'is-appender' : 'is-large' }
 280                  >
 281                      <AutoCompleter
 282                          component="groups"
 283                          objectQueryArgs={ { 'show_hidden': false, exclude: itemIDs } }
 284                          slugValue={ getSlugValue }
 285                          ariaLabel={ __( 'Group\'s name', 'buddypress' ) }
 286                          placeholder={ __( 'Enter Group\'s name here…', 'buddypress' ) }
 287                          onSelectItem={ onSelectedGroup }
 288                          useAvatar={ isAvatarEnabled }
 289                      />
 290                  </Placeholder>
 291              ) }
 292          </Fragment>
 293      );
 294  };
 295  
 296  export default editGroupsBlock;