List Filters

This package contains the components needed to build Additive Filters for list views.

List Filters

We can use ListFilters component to build out additive filters.

AccountsListFilters.tsx

import React from 'react'
import { ListFilters } from '@shared/list-filters'

export const AccountsListFilters: React.FC<AccountsListFiltersProps> = () => {
  const filters = [
    {
      icon: ArchiveIcon,
      getStaticData: () => [
        {
          name: 'Include Archived',
          displayName: 'Include',
          value: 'include_archived',
          id: 0,
        },
        {
          name: 'Only Archived',
          displayName: 'Only',
          value: 'archived_only',
          id: 1,
        },
      ],
      name: 'Archived',
      filterName: 'include_archived',
      filterValue: 'value',
      searchEnabled: false,
      type: 'single',
    },
    {
      icon: IndustryIcon,
      name: 'Industry',
      filterName: 'industry',
      type: 'partial',
    },
    {
      icon: CalendarIcon,
      name: 'Last Contacted',
      filterName: 'last_contacted',
      type: 'date',
      specialFilterProps: {
        options: [
          { label: 'Today', key: 'today' },
          { label: 'This Week', key: 'this_week' },
          { label: 'This Month', key: 'this_month' },
          { label: 'More Than 7 Days Ago', key: 'more_than_7_days' },
          { label: 'More Than 14 Days Ago', key: 'more_than_14_days' },
          { label: 'More Than 30 Days Ago', key: 'more_than_30_days' },
          { label: 'Never Contacted', key: 'never_contacted' },
          {
            label: 'Custom Dates',
            key: 'custom_dates',
            isCustomDatesOption: true,
            customDateStartKey: 'custom_start',
            customDateEndKey: 'custom_end',
          },
        ],
      },
    },
    {
      emptySelectionEnabled: true,
      icon: FlagIcon,
      getData: getStages,
      name: 'Stage',
      filterName: 'stage',
      filterValue: 'id',
      type: 'single',
    },
    {
      icon: TagIcon,
      getData: () => {
        fetchTags.clearCache()
        return fetchTags()
      },
      name: 'Tag',
      filterName: 'filter_tag_ids',
      type: 'multi',
    },
    {
      icon: FilterIcon,
      getData: fetchTiers,
      name: 'Tier',
      filterName: 'account_tier_id',
      filterValue: 'id',
      type: 'single',
    },
  ]

  export const getOptions = (id) =>
    melodyApi.get('custom_field_options', {
      searchParams: { custom_field_id: id },
    })

  return (
    <>
      <ListFilters
        filters={filters}
        getOptions={getOptions}
        pageType="company"
        searchLabel="Search Account Fields"
      />
    </>
  )
}

Props

Prop	Type	Required	Default	Description
pageType	string	Yes		The type of list page the user is on.
getOptions	function	No		Callback for retrieving picklist values
filters	array	Yes		The list of standard filters to be shown in the dropdown menu.
searchLabel	string	No	Search Fields	The search label used as the input placeholder.

Owner Filter

AccountOwnerFilter.tsx

The OwnerFilter component will render the Owner filter.

import React from 'react'
import { OwnerFilter } from '@shared/list-filters'

export const AccountOwnerFilter: React.FC<AccountOwnerFilterProps> = ({
  currentUser,
}) => {
  const staticFilterValues = [
    {
      name: 'All Users',
      filterValue: 'all_including_inactive',
    },
    {
      name: 'Active Users',
      filterValue: 'all',
    },
    {
      name: 'Inactive Users',
      filterValue: 'inactive',
    },
    {
      name: 'No Owner',
      filterValue: 'unowned',
    },
    {
      name: 'You',
      filterValue: 'you',
    },
  ]
  return (
    <OwnerFilter
      owners={currentUser.team.accounts}
      staticOptions={staticFilterValues}
      pageType="company"
      ownerFilterKey="owner_id"
      staticFilterKey="owner"
    />
  )
}

Props

Prop	Type	Required	Default	Description
owners	array	Yes		List of accounts for the current team a user is a part of.
ownerFilterKey	string	Yes		Owner filter key specific to a particular list view
pageType	string	Yes		The type of list page the user is on.
staticFilterKey	string	Yes		Static filter key specific to a particular list view
staticOptions	StaticOptionType[]	Yes		List of generic static filter options.

Filter Button Dropdown

The FilterButtonDropdown component can be used to create a new filter type. It will render a toggle button with a dropdown menu using our @rhythm/menu components.

CustomFilter.tsx

import React from 'react'
import { FilterButtonDropdown } from '@shared/list-filters'

export const CustomFilter: React.FC<CustomFilterProps> = () => {
  return (
    <FilterButtonDropdown
      buttonText={buttonText}
      icon={icon}
      isApplied={isFilterApplied(filterName, history)}
      onRemove={() => onRemove({ [filterName]: null })}
      openOnMount={!isFilterApplied(filterName, history)}
    >
      <MenuItem
        autoClose
        icon={isFilterApplied(filterName, history) ? CheckmarkIcon : null}
        onClick={toggleItem}
      >
        Include {name}
      </MenuItem>
    </FilterButtonDropdown>
  )
}

Props

Prop	Type	Required	Default	Description
buttonText	string	Yes		Text for the button
titleText	string	No		Adds html title tags to button. Usefull if text gets truncated
children	object	Yes		Children will rendered in menu body
icon	object	No		Icon node from our SVGs package
isApplied	boolean	Yes		Determines theme color variant if filter is applied
maxHeight	string	No	360px	Menu body maximum height
horizontalMenuPosition	string	No	left	The horizontal position of the menu dropdown in relation to the trigger
onClose	function	No		Callback function that is fired when the menu is closed
onClickCallback	function	No		Callback fired when filter button is clicked
onRemove	function	No		Callback fired when filter is cleared
openOnMount	boolean	Yes		Opens menu when component is initially rendered
searchEnabled	boolean	No		Renders a search input in the dropdown menu
searchProps	object	No		Props for search input. To set the placeholder include searchLabel as part of these props