@ant-design/icons#StarFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#StarFilled.
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>
)
}
Example #2
| Source File: PostOptions.tsx From foodie with MIT License | 4 votes |
|
PostOptions: React.FC<IProps> = (props) => {
const [isOpenOption, setIsOpenOption] = useState(false);
const isOpenOptionRef = useRef(isOpenOption);
const dispatch = useDispatch();
useEffect(() => {
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
isOpenOptionRef.current = isOpenOption;
}, [isOpenOption]);
const handleClickOutside = (e: Event) => {
const option = (e.target as HTMLDivElement).closest(`#post_${props.post.id}`);
if (!option && isOpenOptionRef.current) {
setIsOpenOption(false);
}
}
const handleClickDelete = () => {
dispatch(showModal(EModalType.DELETE_POST));
dispatch(setTargetPost(props.post));
}
const handleClickEdit = () => {
dispatch(showModal(EModalType.EDIT_POST));
dispatch(setTargetPost(props.post));
}
return (
<div className="relative z-10" id={`post_${props.post.id}`}>
<div
className="post-option-toggle p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setIsOpenOption(!isOpenOption)}
>
<EllipsisOutlined style={{ fontSize: '20px' }} />
</div>
{isOpenOption && (
<div className="w-60 flex flex-col bg-white dark:bg-indigo-1000 rounded-md shadow-lg overflow-hidden absolute top-8 right-3 border border-gray-200 dark:border-gray-800 divide-y divide-gray-100 dark:divide-gray-800">
{props.post.isOwnPost ? (
<>
<h4
className="p-4 flex items-center hover:bg-indigo-700 hover:text-white cursor-pointer dark:text-white"
onClick={handleClickEdit}
>
<EditOutlined className="mr-4" />
Edit Post
</h4>
<h4
className="p-4 flex items-center hover:bg-indigo-700 hover:text-white cursor-pointer dark:text-white"
onClick={handleClickDelete}
>
<DeleteOutlined className="mr-4" />
Delete Post
</h4>
</>
) : (
<BookmarkButton postID={props.post.id} initBookmarkState={props.post.isBookmarked}>
{({ dispatchBookmark, isBookmarked, isLoading }) => (
<h4
className="group p-4 flex items-center cursor-pointer dark:text-white hover:bg-indigo-500 hover:text-white"
onClick={dispatchBookmark}
>
{isLoading
? <LoadingOutlined className="text-gray-600 text-2xl p-2 dark:text-white group-hover:text-white" />
: isBookmarked ? (
<StarFilled className="text-red-600 group-hover:text-white text-2xl p-2 flex justify-center items-center rounded-full" />
) : (
<StarOutlined className="text-red-600 group-hover:text-white text-2xl p-2 flex justify-center items-center rounded-full" />
)}
<span className={`${isLoading && 'opacity-50'}`}>{isBookmarked ? 'Unbookmark Post' : 'Bookmark Post'} </span>
</h4>
)}
</BookmarkButton>
)}
</div>
)}
</div>
);
}
Example #3
| Source File: Bookmarks.tsx From foodie with MIT License | 4 votes |
|
Bookmarks: React.FC<IProps> = ({ username, isOwnProfile }) => {
const [bookmarks, setBookmarks] = useState<IBookmark[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<IError | null>(null);
const [offset, setOffset] = useState(0);
const didMount = useDidMount(true);
useDocumentTitle(`Bookmarks - ${username} | Foodie`);
useEffect(() => {
fetchBookmarks();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchBookmarks = async () => {
try {
setIsLoading(true);
const data = await getBookmarks({ offset });
if (didMount) {
setBookmarks(data);
setOffset(offset + 1);
setIsLoading(false);
}
} catch (e) {
console.log(e);
if (didMount) {
setIsLoading(false);
setError(e);
}
}
};
const infiniteRef = useInfiniteScroll({
loading: isLoading,
hasNextPage: !error && bookmarks.length >= 10,
onLoadMore: fetchBookmarks,
scrollContainer: 'window',
threshold: 200
});
return (!isOwnProfile && username) ? <Redirect to={`/user/${username}`} /> : (
<div className="flex flex-col items-start justify-start w-full min-h-10rem">
{(isLoading && bookmarks.length === 0) && (
<div className="flex w-full items-center justify-center min-h-10rem">
<Loader />
</div>
)}
{(bookmarks.length === 0 && error && !isLoading) && (
<div className="w-full p-4 flex min-h-10rem items-center justify-center">
<span className="text-gray-400 text-lg italic">
{error?.error?.message || "Something went wrong :("}
</span>
</div>
)}
{(bookmarks.length !== 0 && !error) && (
<div className="w-full space-y-4" ref={infiniteRef as React.RefObject<HTMLDivElement>}>
<h4 className="text-gray-700 dark:text-white mb-4 ml-4 mt-4 laptop:mt-0">Bookmarks</h4>
<TransitionGroup component={null}>
{bookmarks.map(item => (
<CSSTransition
timeout={500}
classNames="fade"
key={item.id}
>
<div key={item.id} className="h-24 flex justify-between bg-white dark:bg-indigo-1000 rounded-md shadow-lg overflow-hidden">
<div className="flex justify-center items-center">
<BookmarkButton postID={item.post.id} initBookmarkState={item.isBookmarked}>
{({ dispatchBookmark, isBookmarked, isLoading }) => (
<h4
className="p-4 flex items-center cursor-pointer"
onClick={dispatchBookmark}
>
{isLoading
? <LoadingOutlined className="text-gray-600 text-2xl p-2 dark:text-white" />
: isBookmarked ? (
<StarFilled className="text-red-600 text-2xl p-2 rounded-full hover:bg-red-100" />
) : (
<StarOutlined className="text-red-600 text-2xl p-2 rounded-full hover:bg-red-100" />
)}
</h4>
)}
</BookmarkButton>
</div>
<Link
className="flex flex-grow justify-between hover:bg-indigo-100 border border-transparent dark:hover:bg-indigo-1000 dark:hover:border-gray-800"
key={item.id}
to={`/post/${item.post.id}`}
>
<div className="flex-grow p-2 pb-4 max-w-sm">
<h4 className="break-all overflow-hidden overflow-ellipsis h-8 laptop:h-12 dark:text-indigo-400">
{item.post.description}
</h4>
<span className="text-xs text-gray-400 self-end">Bookmarked {dayjs(item.createdAt).fromNow()}</span>
</div>
<div
className="w-32 h-full !bg-cover !bg-no-repeat !bg-center"
style={{
background: `#f7f7f7 url(${item.post.photos[0]?.url || thumbnail})`
}}
/>
</Link>
</div>
</CSSTransition>
))}
</TransitionGroup>
{(bookmarks.length !== 0 && !error && isLoading) && (
<div className="flex justify-center py-6">
<Loader />
</div>
)}
</div>
)}
</div>
);
}
Example #4
| Source File: AddSourceDialog.tsx From jitsu with MIT License | 4 votes |
|
AddSourceDialogComponent = () => {
const history = useHistory()
const [filterParam, setFilterParam] = useState<string>()
const services = useServices()
const [showDeprecatedSources, setShowDeprecatedSources] = useState(false)
const handleClick = (src: SourceConnector) => (e: React.MouseEvent) => {
if (src.expertMode) {
e.stopPropagation()
e.preventDefault()
services.analyticsService.track("singer_connector_attempt", {
app: services.features.appName,
connector_id: src.id,
})
Modal.confirm({
title: (
<>
<b>{src.displayName}</b> - alpha version notice!
</>
),
icon: <ExclamationCircleOutlined />,
content: (
<>
<b>{src.displayName}</b> connector is available as alpha version only, it requires an understanding of{" "}
<a href="https://github.com/singer-io/getting-started/blob/master/docs/SPEC.md">Singer Protocol</a>
<br />
<br />
Do you want to continue?
</>
),
okText: "Add",
cancelText: "Cancel",
onOk: () => {
services.analyticsService.track("singer_connector_added", {
app: services.features.appName,
connector_id: src.id,
})
history.push(projectRoute(sourcesPageRoutes.addExact, { source: src.id }))
},
})
}
if (isAirbyteSourceOnHeroku(src)) {
e.stopPropagation()
e.preventDefault()
Modal.info({
title: (
<>
<b>{src.displayName}</b> connector is not availabale for Heroku-based applications.
</>
),
icon: <ExclamationCircleOutlined />,
content: (
<>
Currently, we do not support Airbyte sources for the applications deployed on Heroku due to its limited
support for running docker containers inside docker container. To learn more, refer to{" "}
<a href="https://devcenter.heroku.com/articles/container-registry-and-runtime#unsupported-dockerfile-commands">
Heroku documentation
</a>
</>
),
})
}
}
const handleChange = debounce(
useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setFilterParam(e.target.value)
}, []),
500
)
const filteredSourcesList = useMemo<SourceConnector[]>(
() =>
filterParam
? allAvailableSources.filter(
(src: SourceConnector) =>
src.displayName.toLowerCase().includes(filterParam.toLowerCase()) ||
src.id.toLowerCase().includes(filterParam.toLowerCase())
)
: allAvailableSources,
[filterParam]
)
useEffect(() => {
document.body.classList.add("custom-scroll-body")
return () => document.body.classList.remove("custom-scroll-body")
}, [])
return (
<div className={styles.dialog}>
<div className={styles.filter}>
<div className="flex-grow">
<Input
autoFocus
placeholder="Filter by source name or id"
onChange={handleChange}
className={styles.filterInput}
/>
</div>
<div className="pl-3 pt-2 flex items-center justify-end">
<Switch size="small" onChange={checked => setShowDeprecatedSources(checked)} />
<div className="px-3 font-sm text-secondaryText">Show deprecated sources</div>
</div>
</div>
<div className={styles.list}>
{filteredSourcesList
.filter(src => showDeprecatedSources || !src.deprecated)
.map((src: SourceConnector) => (
<Link
to={generatePath(sourcesPageRoutes.addExact, { projectId: services.activeProject.id, source: src.id })}
key={src.id}
className={`${styles.item} ${isAirbyteSourceOnHeroku(src) ? styles.item__disabled : ""}`}
onClick={handleClick(src)}
>
<span className={styles.pic}>{src.pic}</span>
<span className={styles.title}>{src.displayName}</span>
{src.protoType === "airbyte" && <span className={styles.airbyteLabel}>{"powered by Airbyte"}</span>}
{src.protoType === "singer" && <span className={styles.airbyteLabel}>{"powered by Singer"}</span>}
{src.expertMode ? (
<Badge.Ribbon text="Expert mode" className={styles.expertLabel} />
) : src.protoType !== "airbyte" ? (
<span className={styles.star}>
<StarOutlined className={cn(styles.starIcon, styles.strokeStar)} />
<StarFilled className={cn(styles.starIcon, styles.fillStar)} />
</span>
) : (
<></>
)}
</Link>
))}
</div>
</div>
)
}
Example #5
| Source File: index.tsx From nanolooker with MIT License | 4 votes |
|
Bookmark: React.FC<Props> = ({ type, bookmark, placement = "top" }) => {
const { t } = useTranslation();
const { theme } = React.useContext(PreferencesContext);
const { bookmarks, addBookmark, removeBookmark } = React.useContext(
BookmarksContext,
);
const [isOpened, setIsOpened] = React.useState(false);
const [isBookmarked, setIsBookmarked] = React.useState(false);
const [alias, setAlias] = React.useState(bookmarks?.[type]?.[bookmark]);
const inputRef = React.createRef<InputRef>();
const onChange = (e: React.ChangeEventHandler<HTMLInputElement>) => {
// @ts-ignore
const { value } = e.currentTarget;
setAlias(value);
};
React.useEffect(() => {
const isBookmarked = typeof bookmarks?.[type]?.[bookmark] !== "undefined";
setIsBookmarked(isBookmarked);
if (isBookmarked && isOpened) {
setAlias(bookmarks[type][bookmark]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [bookmark, bookmarks]);
const onVisibleChange = (isVisible: boolean) => {
setIsOpened(isVisible);
};
React.useEffect(() => {
if (isOpened) return;
if (!alias) {
removeBookmark({
type,
bookmark,
});
} else {
addBookmark({
type,
bookmark,
value: alias,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpened]);
return (
<Popover
placement={placement}
content={
<div style={{ margin: "0 12px" }}>
<Space>
<Input
ref={inputRef}
value={alias}
// @ts-ignore
onChange={onChange}
placeholder="Alias"
maxLength={100}
autoFocus
allowClear
/>
</Space>
</div>
}
title={
<>
{t("common.bookmark")}
<Tooltip
placement="right"
title={
<>
<div style={{ marginBottom: "6px" }}>
{t("tooltips.bookmarks", { type })}
</div>
<Link to={"/bookmarks"}>{t("pages.bookmarks.viewAll")}</Link>
</>
}
>
<QuestionCircle />
</Tooltip>
</>
}
trigger="click"
visible={isOpened}
onVisibleChange={onVisibleChange}
>
<Button
shape="circle"
size="small"
style={{ border: isBookmarked ? "solid 1px gold" : undefined }}
>
{theme === Theme.DARK || isBookmarked ? (
<StarFilled style={{ color: isBookmarked ? "gold" : undefined }} />
) : (
<StarOutlined />
)}
</Button>
</Popover>
);
}
