@ant-design/icons#AppstoreFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#AppstoreFilled.
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: SavedInsights.tsx From posthog-foss with MIT License | 4 votes |
|
export function SavedInsights(): JSX.Element {
const { loadInsights, updateFavoritedInsight, renameInsight, duplicateInsight, setSavedInsightsFilters } =
useActions(savedInsightsLogic)
const { insights, count, insightsLoading, filters, sorting } = useValues(savedInsightsLogic)
const { hasDashboardCollaboration } = useValues(organizationLogic)
const { currentTeamId } = useValues(teamLogic)
const { members } = useValues(membersLogic)
const { tab, createdBy, layoutView, search, insightType, dateFrom, dateTo, page } = filters
const startCount = (page - 1) * INSIGHTS_PER_PAGE + 1
const endCount = page * INSIGHTS_PER_PAGE < count ? page * INSIGHTS_PER_PAGE : count
const columns: LemonTableColumns<InsightModel> = [
{
key: 'id',
className: 'icon-column',
width: 0,
render: function renderType(_, insight) {
const typeMetadata = INSIGHT_TYPES_METADATA[insight.filters?.insight || InsightType.TRENDS]
if (typeMetadata && typeMetadata.icon) {
return <typeMetadata.icon style={{ display: 'block', fontSize: '2rem' }} />
}
},
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: function renderName(name: string, insight) {
return (
<>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Link to={urls.insightView(insight.short_id, insight.filters)} className="row-name">
{name || <i>{UNNAMED_INSIGHT_NAME}</i>}
</Link>
<div
style={{ cursor: 'pointer', width: 'fit-content', marginLeft: 8 }}
onClick={() => updateFavoritedInsight(insight, !insight.favorited)}
>
{insight.favorited ? (
<StarFilled className="text-warning" />
) : (
<StarOutlined className="star-outlined" />
)}
</div>
</div>
{hasDashboardCollaboration && insight.description && (
<span className="row-description">{insight.description}</span>
)}
</>
)
},
},
...(hasDashboardCollaboration
? [
{
title: 'Tags',
dataIndex: 'tags' as keyof InsightModel,
key: 'tags',
render: function renderTags(tags: string[]) {
return <ObjectTags tags={tags} staticOnly />
},
},
]
: []),
...(tab === SavedInsightsTabs.Yours
? []
: [createdByColumn() as LemonTableColumn<InsightModel, keyof InsightModel | undefined>]),
createdAtColumn() as LemonTableColumn<InsightModel, keyof InsightModel | undefined>,
{
title: 'Last modified',
sorter: true,
dataIndex: 'updated_at',
render: function renderLastModified(updated_at: string) {
return <div style={{ whiteSpace: 'nowrap' }}>{updated_at && <TZLabel time={updated_at} />}</div>
},
},
{
width: 0,
render: function Render(_, insight) {
return (
<More
overlay={
<>
<LemonButton
type="stealth"
to={urls.insightView(insight.short_id, insight.filters)}
fullWidth
>
View
</LemonButton>
<LemonButton
type="stealth"
onClick={() => renameInsight(insight)}
data-attr={`insight-item-${insight.short_id}-dropdown-rename`}
fullWidth
>
Rename
</LemonButton>
<LemonButton
type="stealth"
onClick={() => duplicateInsight(insight)}
data-attr={`insight-item-${insight.short_id}-dropdown-duplicate`}
fullWidth
>
Duplicate
</LemonButton>
<LemonSpacer />
<LemonButton
type="stealth"
style={{ color: 'var(--danger)' }}
onClick={() =>
deleteWithUndo({
object: insight,
endpoint: `projects/${currentTeamId}/insights`,
callback: loadInsights,
})
}
data-attr={`insight-item-${insight.short_id}-dropdown-remove`}
fullWidth
>
Delete insight
</LemonButton>
</>
}
/>
)
},
},
]
return (
<div className="saved-insights">
<PageHeader title="Insights" buttons={<NewInsightButton />} />
<Tabs
activeKey={tab}
style={{ borderColor: '#D9D9D9' }}
onChange={(t) => setSavedInsightsFilters({ tab: t as SavedInsightsTabs })}
>
<TabPane tab="All Insights" key={SavedInsightsTabs.All} />
<TabPane tab="Your Insights" key={SavedInsightsTabs.Yours} />
<TabPane tab="Favorites" key={SavedInsightsTabs.Favorites} />
</Tabs>
<Row style={{ paddingBottom: 16, justifyContent: 'space-between', gap: '0.75rem' }}>
<Col>
<Input.Search
allowClear
enterButton
placeholder="Search for insights"
style={{ width: 240 }}
onChange={(e) => setSavedInsightsFilters({ search: e.target.value })}
value={search || ''}
onSearch={() => loadInsights()}
/>
</Col>
<Row style={{ gap: '0.75rem' }}>
<Col>
Type:
<Select
className="insight-type-icon-dropdown"
value={insightType}
style={{ paddingLeft: 8, width: 140 }}
onChange={(it) => setSavedInsightsFilters({ insightType: it })}
>
{Object.entries({
['All types']: {
name: 'All types',
inMenu: false,
} as InsightTypeMetadata,
...INSIGHT_TYPES_METADATA,
}).map(([listedInsightType, listedInsightTypeMetadata], index) => (
<Select.Option key={index} value={listedInsightType}>
<div className="insight-type-icon-wrapper">
{listedInsightTypeMetadata.icon ? (
<div className="icon-container">
<div className="icon-container-inner">
{<listedInsightTypeMetadata.icon color="#747EA2" noBackground />}
</div>
</div>
) : null}
<div>{listedInsightTypeMetadata.name}</div>
</div>
</Select.Option>
))}
</Select>
</Col>
<Col>
Last modified:
<DateFilter
style={{ paddingLeft: 8 }}
defaultValue="All time"
disabled={false}
bordered={true}
dateFrom={dateFrom}
dateTo={dateTo}
onChange={(fromDate, toDate) =>
setSavedInsightsFilters({ dateFrom: fromDate, dateTo: toDate })
}
/>
</Col>
{tab !== SavedInsightsTabs.Yours ? (
<Col>
Created by:
<Select
value={createdBy}
style={{ paddingLeft: 8, width: 140 }}
onChange={(cb) => {
setSavedInsightsFilters({ createdBy: cb })
}}
>
<Select.Option value={'All users'}>All users</Select.Option>
{members.map((member) => (
<Select.Option key={member.user.id} value={member.user.id}>
{member.user.first_name}
</Select.Option>
))}
</Select>
</Col>
) : null}
</Row>
</Row>
<Row className="list-or-card-layout">
{count
? `${startCount}${endCount - startCount > 1 ? '-' + endCount : ''} of ${count} insight${
count === 1 ? '' : 's'
}`
: 'No insights yet'}
<div>
<Radio.Group
onChange={(e) => setSavedInsightsFilters({ layoutView: e.target.value })}
value={layoutView}
buttonStyle="solid"
>
<Radio.Button value={LayoutView.List}>
<UnorderedListOutlined className="mr-05" />
List
</Radio.Button>
<Radio.Button value={LayoutView.Card}>
<AppstoreFilled className="mr-05" />
Card
</Radio.Button>
</Radio.Group>
</div>
</Row>
{!insightsLoading && insights.count < 1 ? (
<SavedInsightsEmptyState />
) : (
<>
{layoutView === LayoutView.List ? (
<LemonTable
loading={insightsLoading}
columns={columns}
dataSource={insights.results}
pagination={{
controlled: true,
pageSize: INSIGHTS_PER_PAGE,
currentPage: page,
entryCount: count,
onBackward: () =>
setSavedInsightsFilters({
page: page - 1,
}),
onForward: () =>
setSavedInsightsFilters({
page: page + 1,
}),
}}
disableSortingCancellation
sorting={sorting}
onSort={(newSorting) =>
setSavedInsightsFilters({
order: newSorting
? `${newSorting.order === -1 ? '-' : ''}${newSorting.columnKey}`
: undefined,
})
}
rowKey="id"
nouns={['insight', 'insights']}
/>
) : (
<Row gutter={[16, 16]}>
{insights &&
insights.results.map((insight: InsightModel, index: number) => (
<Col
xs={24}
sm={24}
md={24}
lg={12}
xl={12}
xxl={8}
key={insight.short_id}
style={{ height: 340 }}
>
<DashboardItem
item={{ ...insight, color: null }}
key={insight.short_id + '_user'}
loadDashboardItems={() => {
loadInsights()
}}
dashboardMode={null}
index={index}
isOnEditMode={false}
footer={
<div className="dashboard-item-footer">
{
<>
Saved {dayjs(insight.created_at).fromNow()} by{' '}
{insight.created_by?.first_name ||
insight.created_by?.email ||
'unknown'}
</>
}
</div>
}
/>
</Col>
))}
</Row>
)}
</>
)}
</div>
)
}
