@ant-design/icons#FilterFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#FilterFilled.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Filters.tsx From condo with MIT License | 5 votes |
|
getFilterIcon: FilterIconType = (filtered) => <FilterFilled style={{ color: filtered ? colors.sberPrimary[5] : undefined }} />
Example #2
| Source File: TableFilter.tsx From condo with MIT License | 5 votes |
|
getFilterIcon = filtered => <FilterFilled style={filtered ? STYLE_FILTERED : STYLE_NO_COLOR} />
Example #3
| Source File: PaymentsTable.tsx From condo with MIT License | 4 votes |
|
PaymentsTable: React.FC<IPaymentsTableProps> = ({ billingContext, contextsLoading }): JSX.Element => {
const intl = useIntl()
const searchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const filtersButtonLabel = intl.formatMessage({ id: 'FiltersLabel' })
const startDateMessage = intl.formatMessage({ id: 'pages.condo.meter.StartDate' })
const endDateMessage = intl.formatMessage({ id: 'pages.condo.meter.EndDate' })
const { isSmall } = useLayoutContext()
const router = useRouter()
const userOrganization = useOrganization()
const { filters, sorters, offset } = parseQuery(router.query)
const hasFilters = !isEmpty(filters)
if (hasFilters) {
shouldApplyDefaultFilter = false
isDefaultFilterApplied = true
}
if (shouldApplyDefaultFilter) {
filters.advancedAt = DEFAULT_DATE_RANGE_STR
}
const appliedFiltersCount = Object.keys(filters).length
const currencyCode = get(billingContext, ['integration', 'currencyCode'], 'RUB')
const tableColumns = usePaymentsTableColumns(currencyCode)
const organizationId = get(userOrganization, ['organization', 'id'], '')
const queryMetas = usePaymentsTableFilters(billingContext, organizationId)
const {
MultipleFiltersModal,
ResetFiltersModalButton,
setIsMultipleFiltersModalVisible,
} = useMultipleFiltersModal(queryMetas, PaymentsFilterTemplate)
const currentPageIndex = getPageIndexFromOffset(offset, DEFAULT_PAGE_SIZE)
const { filtersToWhere, sortersToSortBy } = useQueryMappers(queryMetas, SORTABLE_PROPERTIES)
const searchPaymentsQuery: Record<string, unknown> = {
...filtersToWhere(filters),
organization: { id: organizationId },
deletedAt: null,
status_in: [PAYMENT_WITHDRAWN_STATUS, PAYMENT_DONE_STATUS],
}
const sortBy = sortersToSortBy(sorters, PAYMENTS_DEFAULT_SORT_BY)
const {
loading,
count,
objs,
error,
} = Payment.useObjects({
where: searchPaymentsQuery,
sortBy: sortBy as SortPaymentsBy[],
first: DEFAULT_PAGE_SIZE,
skip: (currentPageIndex - 1) * DEFAULT_PAGE_SIZE,
}, {
fetchPolicy: 'network-only',
})
const [search, handleSearchChange] = useSearch<IFilters>(loading)
const [dateRange, setDateRange] = useDateRangeSearch('advancedAt', loading)
/**
* We need to check if default filters should be applied only at first render
*/
useEffect(() => {
if (!hasFilters && shouldApplyDefaultFilter && !isDefaultFilterApplied) {
isDefaultFilterApplied = true
setDateRange(DEFAULT_DATE_RANGE)
} else {
shouldApplyDefaultFilter = false
}
return () => {
isDefaultFilterApplied = false
shouldApplyDefaultFilter = true
}
}, [])
return (
<>
<Row gutter={ROW_GUTTER} align="middle" justify="center">
<Col span={24}>
<TableFiltersContainer>
<Row justify="end" gutter={TAP_BAR_ROW_GUTTER}>
<Col flex="auto">
<Row gutter={TAP_BAR_ROW_GUTTER}>
<Col xs={24} sm={12} lg={8}>
<Input
placeholder={searchPlaceholder}
value={search}
onChange={(e) => {
handleSearchChange(e.target.value)
}}
allowClear
/>
</Col>
<Col xs={24} sm={DATE_PICKER_COL_LAYOUT} lg={DATE_PICKER_COL_LAYOUT}>
<DateRangePicker
value={dateRange}
onChange={setDateRange}
placeholder={[startDateMessage, endDateMessage]}
/>
</Col>
</Row>
</Col>
<Col offset={1}>
<Row justify="end" align="middle">
{
appliedFiltersCount > 0 && (
<Col>
<ResetFiltersModalButton/>
</Col>
)
}
<Col>
<Button
secondary
type="sberPrimary"
onClick={() => setIsMultipleFiltersModalVisible(true)}
>
<FilterFilled/>
{filtersButtonLabel}
{appliedFiltersCount > 0 && ` (${appliedFiltersCount})`}
</Button>
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
loading={loading || contextsLoading}
dataSource={objs}
totalRows={count}
columns={tableColumns}
scroll={getTableScrollConfig(isSmall)}
/>
</Col>
<ExportToExcelActionBar
hidden={isSmall}
searchObjectsQuery={searchPaymentsQuery}
sortBy={sortBy}
exportToExcelQuery={EXPORT_PAYMENTS_TO_EXCEL}
disabled={count < 1}
/>
</Row>
<MultipleFiltersModal/>
</>
)
}
Example #4
| Source File: index.tsx From condo with MIT License | 4 votes |
|
MetersPageContent = ({
searchMeterReadingsQuery,
tableColumns,
sortBy,
filterMetas,
role,
}) => {
const intl = useIntl()
const PageTitleMessage = intl.formatMessage({ id: 'pages.condo.meter.index.PageTitle' })
const EmptyListLabel = intl.formatMessage({ id: 'pages.condo.meter.index.EmptyList.header' })
const CreateMeter = intl.formatMessage({ id: 'pages.condo.meter.index.CreateMeterButtonLabel' })
const SearchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const FiltersButtonLabel = intl.formatMessage({ id: 'FiltersLabel' })
const MeterReadingImportObjectsName = intl.formatMessage({ id: 'meter.import.MeterReading.objectsName.many' })
const MeterReadingImportObjectsNameManyGenitive = intl.formatMessage({ id: 'meter.import.MeterReading.objectsName.many.genitive' })
const MeterAccountNumberExistInOtherUnitMessage = intl.formatMessage({ id: 'meter.import.error.MeterAccountNumberExistInOtherUnit' })
const MeterNumberExistInOrganizationMessage = intl.formatMessage({ id: 'meter.import.error.MeterNumberExistInOrganization' })
const router = useRouter()
const { filters, offset } = parseQuery(router.query)
const currentPageIndex = getPageIndexFromOffset(offset, DEFAULT_PAGE_SIZE)
const canManageMeterReadings = get(role, 'canManageMeterReadings', false)
const {
loading,
count: total,
objs: meterReadings,
refetch,
} = MeterReading.useObjects({
sortBy,
where: searchMeterReadingsQuery,
first: DEFAULT_PAGE_SIZE,
skip: (currentPageIndex - 1) * DEFAULT_PAGE_SIZE,
}, {
fetchPolicy: 'network-only',
})
const { shouldTableScroll, isSmall } = useLayoutContext()
const [ search, handleSearchChange ] = useSearch(loading)
const { UpdateMeterModal, setSelectedMeter } = useUpdateMeterModal(refetch)
const { MultipleFiltersModal, setIsMultipleFiltersModalVisible } = useMultipleFiltersModal(filterMetas, MeterReadingFilterTemplate)
const [columns, meterReadingNormalizer, meterReadingValidator, meterReadingCreator] = useImporterFunctions()
const isNoMeterData = isEmpty(meterReadings) && isEmpty(filters) && !loading
const handleRowAction = useCallback((record) => {
return {
onClick: () => {
const meter = get(record, 'meter')
setSelectedMeter(meter)
},
}
}, [setSelectedMeter])
const handleSearch = useCallback((e) => {handleSearchChange(e.target.value)}, [handleSearchChange])
const handleMultipleFiltersButtonClick = useCallback(() => setIsMultipleFiltersModalVisible(true),
[setIsMultipleFiltersModalVisible])
const mutationErrorsToMessages = useMemo(() => ({
[EXISTING_METER_ACCOUNT_NUMBER_IN_OTHER_UNIT]: MeterAccountNumberExistInOtherUnitMessage,
[EXISTING_METER_NUMBER_IN_SAME_ORGANIZATION]: MeterNumberExistInOrganizationMessage,
}), [MeterAccountNumberExistInOtherUnitMessage, MeterNumberExistInOrganizationMessage])
return (
<>
<Head>
<title>{PageTitleMessage}</title>
</Head>
<PageWrapper>
<PageHeader title={<Typography.Title>{PageTitleMessage}</Typography.Title>}/>
<TablePageContent>
<EmptyListView
label={EmptyListLabel}
message={''}
button={(
<ImportWrapper
objectsName={MeterReadingImportObjectsName}
accessCheck={canManageMeterReadings}
onFinish={refetch}
columns={columns}
maxTableLength={
hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={meterReadingNormalizer}
rowValidator={meterReadingValidator}
objectCreator={meterReadingCreator}
domainTranslate={MeterReadingImportObjectsNameManyGenitive}
exampleTemplateLink={'/meter-import-example.xlsx'}
mutationErrorsToMessages={mutationErrorsToMessages}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined />}
block
secondary
/>
</ImportWrapper>
)}
createRoute='/meter/create'
createLabel={CreateMeter}
containerStyle={{ display: isNoMeterData ? 'flex' : 'none' }}
/>
<Row
gutter={METERS_PAGE_CONTENT_ROW_GUTTERS}
align={'middle'}
justify={'center'}
hidden={isNoMeterData}
>
<Col span={24}>
<TableFiltersContainer>
<Row justify={'space-between'} gutter={METERS_PAGE_CONTENT_ROW_GUTTERS}>
<Col xs={24} lg={7}>
<Input
placeholder={SearchPlaceholder}
onChange={handleSearch}
value={search}
allowClear
/>
</Col>
<Col>
<Row gutter={[10, 0]} align={'middle'} justify={'center'}>
{
canManageMeterReadings && (
<Col>
<ImportWrapper
objectsName={MeterReadingImportObjectsName}
accessCheck={canManageMeterReadings}
onFinish={refetch}
columns={columns}
maxTableLength={hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={meterReadingNormalizer}
rowValidator={meterReadingValidator}
objectCreator={meterReadingCreator}
domainTranslate={MeterReadingImportObjectsNameManyGenitive}
exampleTemplateLink={'/meter-import-example.xlsx'}
mutationErrorsToMessages={mutationErrorsToMessages}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined />}
block
secondary
/>
</ImportWrapper>
</Col>
)
}
<Col>
<Button
secondary
type={'sberPrimary'}
onClick={handleMultipleFiltersButtonClick}
>
<FilterFilled/>
{FiltersButtonLabel}
</Button>
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
scroll={getTableScrollConfig(shouldTableScroll)}
totalRows={total}
loading={loading}
dataSource={meterReadings}
columns={tableColumns}
onRow={handleRowAction}
/>
</Col>
<ExportToExcelActionBar
hidden={isSmall}
searchObjectsQuery={searchMeterReadingsQuery}
exportToExcelQuery={EXPORT_METER_READINGS_QUERY}
sortBy={sortBy}
/>
</Row>
<UpdateMeterModal />
<MultipleFiltersModal />
</TablePageContent>
</PageWrapper>
</>
)
}
Example #5
| Source File: index.tsx From condo with MIT License | 4 votes |
|
TicketsPageContent = ({
tableColumns,
searchTicketsQuery,
sortBy,
filterMetas,
isTicketsFetching,
total,
tickets,
}): JSX.Element => {
const intl = useIntl()
const PageTitleMessage = intl.formatMessage({ id: 'pages.condo.ticket.index.PageTitle' })
const SearchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const EmptyListLabel = intl.formatMessage({ id: 'ticket.EmptyList.header' })
const EmptyListMessage = intl.formatMessage({ id: 'ticket.EmptyList.title' })
const CreateTicket = intl.formatMessage({ id: 'CreateTicket' })
const FiltersButtonLabel = intl.formatMessage({ id: 'FiltersLabel' })
const EmergenciesLabel = intl.formatMessage({ id: 'pages.condo.ticket.index.EmergenciesLabel' })
const WarrantiesLabel = intl.formatMessage({ id: 'pages.condo.ticket.index.WarrantiesLabel' })
const PaidLabel = intl.formatMessage({ id: 'pages.condo.ticket.index.PaidLabel' })
const { isSmall, shouldTableScroll } = useLayoutContext()
const router = useRouter()
const { filters } = parseQuery(router.query)
const reduceNonEmpty = (cnt, filter) => cnt + Number(Array.isArray(filters[filter]) && filters[filter].length > 0)
const appliedFiltersCount = Object.keys(filters).reduce(reduceNonEmpty, 0)
const { MultipleFiltersModal, ResetFiltersModalButton, setIsMultipleFiltersModalVisible } = useMultipleFiltersModal(filterMetas, TicketFilterTemplate)
searchTicketsQuery = { ...searchTicketsQuery, ...{ deletedAt: null } }
const loading = isTicketsFetching
const [hoveredTicket, setHoveredTicket] = useState()
const handleRowAction = useCallback((record) => {
return {
onClick: async () => {
await router.push(`/ticket/${record.id}/`)
},
onMouseEnter: () => {
setHoveredTicket(record)
},
onMouseLeave: () => {
setHoveredTicket(null)
},
}
}, [router])
const [search, handleSearchChange] = useSearch<IFilters>(loading)
const [emergency, handleEmergencyChange] = useEmergencySearch<IFilters>(loading)
const [warranty, handleWarrantyChange] = useWarrantySearch<IFilters>(loading)
const [paid, handlePaidChange] = usePaidSearch<IFilters>(loading)
const isNoTicketsData = !tickets.length && isEmpty(filters) && !loading
const tooltipData = useFiltersTooltipData()
const tableComponents = useMemo(() => ({
body: {
row: (props) => (
<FiltersTooltip
filters={filters}
tooltipData={tooltipData}
rowObject={hoveredTicket}
total={total}
{...props}
/>
),
},
}), [tooltipData, filters, hoveredTicket, tickets, total])
return (
<>
<Head>
<title>{PageTitleMessage}</title>
</Head>
<PageWrapper>
<PageHeader title={
<Typography.Title style={PAGE_HEADER_TITLE_STYLES}>{PageTitleMessage}</Typography.Title>
}/>
<TablePageContent>
{
isNoTicketsData
? <EmptyListView
label={EmptyListLabel}
message={EmptyListMessage}
createRoute="/ticket/create"
createLabel={CreateTicket}/>
: (
<Row gutter={ROW_GUTTER} align={'middle'} justify={'center'}>
<Col span={24}>
<TableFiltersContainer>
<Row justify={'end'} gutter={TAP_BAR_ROW_GUTTER}>
<Col flex={'auto'}>
<Row
gutter={TOP_BAR_FIRST_COLUMN_GUTTER}
align={'middle'}
justify={'start'}
>
<Col xs={24} md={8}>
<Input
placeholder={SearchPlaceholder}
onChange={(e) => {
handleSearchChange(e.target.value)
}}
value={search}
allowClear={true}
/>
</Col>
<Col xs={24} md={16}>
<Row gutter={[8, 16]}>
<Col>
<Checkbox
onChange={handleEmergencyChange}
checked={emergency}
style={CHECKBOX_STYLE}
eventName={'TicketFilterCheckboxEmergency'}
data-cy={'ticket__filter-isEmergency'}
>
{EmergenciesLabel}
</Checkbox>
</Col>
<Col>
<Checkbox
onChange={handlePaidChange}
checked={paid}
style={CHECKBOX_STYLE}
eventName={'TicketFilterCheckboxPaid'}
data-cy={'ticket__filter-isPaid'}
>
{PaidLabel}
</Checkbox>
</Col>
<Col>
<Checkbox
onChange={handleWarrantyChange}
checked={warranty}
style={CHECKBOX_STYLE}
eventName={'TicketFilterCheckboxWarranty'}
data-cy={'ticket__filter-isWarranty'}
>
{WarrantiesLabel}
</Checkbox>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col>
<Row justify={'end'} align={'middle'}>
{
appliedFiltersCount > 0 ? (
<Col>
<ResetFiltersModalButton/>
</Col>
) : null
}
<Col>
<Button
secondary
type={'sberPrimary'}
onClick={() => setIsMultipleFiltersModalVisible(true)}
data-cy={'ticket__filters-button'}
eventName={'TicketClickOpenFiltersButton'}
>
<FilterFilled/>
{FiltersButtonLabel}
{appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : null}
</Button>
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
scroll={getTableScrollConfig(shouldTableScroll)}
totalRows={total}
loading={loading}
dataSource={tickets}
columns={tableColumns}
onRow={handleRowAction}
components={tableComponents}
data-cy={'ticket__table'}
/>
</Col>
<ExportToExcelActionBar
hidden={isSmall}
searchObjectsQuery={searchTicketsQuery}
sortBy={sortBy}
exportToExcelQuery={EXPORT_TICKETS_TO_EXCEL}
/>
</Row>
)
}
<MultipleFiltersModal/>
</TablePageContent>
</PageWrapper>
</>
)
}
