constructor()

in dashboards-notifications/public/pages/Emails/components/tables/RecipientGroupsTable.tsx [52:122]


  constructor(props: RecipientGroupsTableProps) {
    super(props);

    this.state = {
      total: 0,
      from: 0,
      size: 5,
      search: '',
      sortField: 'name',
      sortDirection: SortDirection.ASC,
      items: [],
      selectedItems: [],
      loading: true,
    };

    this.columns = [
      {
        field: 'name',
        name: 'Name',
        sortable: true,
        truncateText: true,
        width: '150px',
      },
      {
        field: 'email_group.recipient_list',
        name: 'Email addresses',
        sortable: true,
        truncateText: true,
        width: '450px',
        render: (
          recipient_list: RecipientGroupItemType['email_group']['recipient_list']
        ) => {
          const emails = recipient_list.map((recipient) => recipient.recipient);
          return (
            <div>
              {emails.slice(0, 5).join(', ')}
              {emails.length > 5 && (
                <span>
                  {' '}
                  <ModalConsumer>
                    {({ onShow }) => (
                      <EuiLink
                        onClick={() =>
                          onShow(DetailsListModal, {
                            header: `Email addresses (${emails.length})`,
                            title: 'Email addresses',
                            items: emails,
                          })
                        }
                      >
                        {emails.length - 5} more
                      </EuiLink>
                    )}
                  </ModalConsumer>
                </span>
              )}
            </div>
          );
        },
      },
      {
        field: 'description',
        name: 'Description',
        sortable: true,
        truncateText: true,
        width: '300px',
        render: (description: string) => description || '-',
      },
    ];
    this.refresh = this.refresh.bind(this);
  }