@ant-design/icons#StarOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#StarOutlined.
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: SideMenu.tsx From foodie with MIT License | 6 votes |
|
SideMenu: React.FC<IProps> = ({ username, profilePicture }) => {
return (
<ul className="overflow-hidden">
<li className="px-4 py-3 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-900">
<Link to={`/user/${username}`} className="flex items-center text-black">
<Avatar url={profilePicture} className="mr-4" />
<h6 className="text-sm dark:text-white">My Profile</h6>
</Link>
</li>
<li className="px-4 py-3 cursor-pointer mt-4 hover:bg-indigo-100 dark:hover:bg-indigo-900">
<Link to={`/user/${username}/following`} className="flex items-center text-black">
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm dark:text-white">Following</h6>
</Link>
</li>
<li className="px-4 py-3 cursor-pointer mt-4 hover:bg-indigo-100 dark:hover:bg-indigo-900">
<Link to={`/user/${username}/followers`} className="flex items-center text-black">
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm dark:text-white">Followers</h6>
</Link>
</li>
<li className="px-4 py-3 cursor-pointer mt-4 hover:bg-indigo-100 dark:hover:bg-indigo-900">
<Link to={`/user/${username}/bookmarks`} className="flex items-center text-black">
<StarOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm dark:text-white">Bookmarks</h6>
</Link>
</li>
</ul>
)
}
Example #2
| Source File: BrickRate.tsx From next-basics with GNU General Public License v3.0 | 5 votes |
|
export function BrickRate(props: BrickRateProps): React.ReactElement {
const { rateStyle, ...resProps } = props;
const rateRef = useRef();
const [value, setValue] = useState<number>();
const defaultIcon = <>{props.type ? props.type : <StarOutlined />}</>;
const icon = (
<>{props.rateIcon ? <GeneralIcon icon={props.rateIcon} /> : defaultIcon}</>
);
const handleChange = (value: number): void => {
setValue(value);
props.onChange?.(value);
};
useEffect(() => {
if (props.colors && props.colors.length > 0) {
const colors = props.colors;
const parentNodes = rateRef.current.rate;
if (parentNodes) {
const childNodes = parentNodes.childNodes;
childNodes.forEach((child: any, index: number) => {
if (index <= props.colors.length - 1) {
child.style.color = colors[index];
}
});
}
}
}, [props.colors]);
useEffect(() => {
setValue(props.value);
}, [props.value]);
return (
<Rate
{...resProps}
ref={rateRef}
onChange={handleChange}
character={icon}
style={rateStyle}
value={value}
/>
);
}
Example #3
| Source File: Tabs.tsx From foodie with MIT License | 5 votes |
|
Tabs: React.FC<IProps> = ({ username, isOwnProfile, followersCount, followingCount }) => {
const { pathname } = useLocation();
const [activeNav, setActiveNav] = useState('');
useEffect(() => {
const splitPath = pathname.split('/');
const currentNav = splitPath[splitPath.length - 1];
setActiveNav(currentNav);
}, [pathname]);
return (
<ul className="flex items-center justify-between tablet:justify-evenly flex-wrap laptop:justify-start space-x-1 laptop:space-x-4 px-4 bg-indigo-100 dark:bg-indigo-1000 laptop:dark:bg-transparent laptop:bg-transparent laptop:p-0">
<li>
<Link
to={`/user/${username}/`}
className={`${linkStyleName} ${(activeNav === username || activeNav === '') && 'border-indigo-700 dark:border-indigo-400 border-b-4 text-gray-800 dark:text-white '}`}
>
<span className="hidden laptop:inline-block">Posts</span>
<FormOutlined className="laptop:hidden text-2xl" />
</Link>
</li>
<li>
<Link
to={`/user/${username}/info`}
className={`${linkStyleName} ${activeNav === 'info' && 'border-indigo-700 dark:border-indigo-400 border-b-4'}`}
>
<span className="hidden laptop:inline-block">Info</span>
<InfoCircleOutlined className="laptop:hidden text-2xl" />
</Link>
</li>
<li>
<Link
to={`/user/${username}/followers`}
className={`${linkStyleName} ${activeNav === 'followers' && 'border-indigo-700 dark:border-indigo-400 border-b-4'}`}
>
<span className="laptop:text-lg text-indigo-700 dark:text-indigo-400">{followersCount}</span>
<span className="hidden laptop:inline-block">{followersCount > 1 ? 'Followers' : 'Follower'}</span>
<TeamOutlined className="laptop:hidden text-2xl" />
</Link>
</li>
<li>
<Link
to={`/user/${username}/following`}
className={`${linkStyleName} ${activeNav === 'following' && 'border-indigo-700 dark:border-indigo-400 border-b-4'}`}
>
<span className="laptop:text-lg text-indigo-700 dark:text-indigo-400">{followingCount}</span>
<span className="hidden laptop:inline-block">Following</span>
<UserAddOutlined className="laptop:hidden text-2xl" />
</Link>
</li>
{isOwnProfile && (
<li>
<Link
to={`/user/${username}/bookmarks`}
className={`${linkStyleName} ${activeNav === 'bookmarks' && 'border-indigo-700 dark:border-indigo-400 border-b-4'}`}
>
<span className="hidden laptop:inline-block">Bookmarks</span>
<StarOutlined className="laptop:hidden text-2xl" />
</Link>
</li>
)}
</ul>
);
}
Example #4
| Source File: AppsPage.tsx From disco-cube-admin with MIT License | 5 votes |
|
apps: Record<
AppNames,
{
path: string;
render: () => React.ReactNode;
label: string;
icon: React.ForwardRefExoticComponent<AntdIconProps & React.RefAttributes<HTMLSpanElement>>;
}
> = {
rpiDemos: {
path: `/rpi-demos`,
label: "RPI Demos",
icon: BuildOutlined,
render: () => <ConnectedRpiDemos />,
},
video: {
path: `/video`,
label: "Video",
icon: VideoCameraOutlined,
render: () => <ConnectedVideoApp />,
},
cubemap: {
path: `/cubemap`,
label: "Cubemap",
icon: PictureOutlined,
render: () => <ConnectedCubemapApp />,
},
paint: {
path: `/paint`,
label: "Paint",
icon: HighlightOutlined,
render: () => <ConnectedPaintApp />,
},
debug: {
path: `/debug`,
label: "Debug",
icon: BugOutlined,
render: () => <ConnectedCommonApp appName={`debug`} />,
},
sparkle: {
path: `/sparkle`,
label: "Sparkle",
icon: StarOutlined,
render: () => <ConnectedCommonApp appName={`sparkle`} />,
},
sprinkles: {
path: `/sprinkles`,
label: "Sprinkles",
icon: SmallDashOutlined,
render: () => <ConnectedCommonApp appName={`sprinkles`} />,
},
particles: {
path: `/particles`,
label: "Particles",
icon: MoreOutlined,
render: () => <ConnectedCommonApp appName={`particles`} />,
},
particleFlow: {
path: `/particleFlow`,
label: "Particle Flow",
icon: DeploymentUnitOutlined,
render: () => <ConnectedCommonApp appName={`particleFlow`} />,
},
tilt: {
path: `/tilt`,
label: "Tilt",
icon: RotateRightOutlined,
render: () => <ConnectedCommonApp appName={`tilt`} />,
},
maze: {
path: `/maze`,
label: "Maze",
icon: TableOutlined,
render: () => <ConnectedCommonApp appName={`maze`} />,
},
}
Example #5
| Source File: DemoWarnings.tsx From posthog-foss with MIT License | 4 votes |
|
export function DemoWarnings(): JSX.Element | null {
const { user } = useValues(userLogic)
const { demoWarning } = useValues(navigationLogic)
const { reportDemoWarningDismissed } = useActions(eventUsageLogic)
const WARNINGS: WarningsInterface = {
welcome: {
message: `Welcome ${user?.first_name}! Ready to explore?`,
description: (
<span>
We want you to try all the power of PostHog right away. Explore everything in this full-fledged demo
environment. When you're ready, head over to setup to use some real data.
</span>
),
action: (
<LinkButton to="/setup" data-attr="demo-warning-cta" data-message="welcome-setup">
<SettingOutlined /> Go to setup
</LinkButton>
),
type: 'info',
},
incomplete_setup_on_demo_project: {
message: `Get started using Posthog, ${user?.first_name}!`,
description: (
<span>
You're currently viewing <b>demo data</b>. Go to <Link to="/setup">setup</Link> to start sending
your own data
</span>
),
action: (
<LinkButton
to="/setup"
data-attr="demo-warning-cta"
data-message="incomplete_setup_on_demo_project-setup"
>
<SettingOutlined /> Go to setup
</LinkButton>
),
},
incomplete_setup_on_real_project: {
message: `Finish setting up Posthog, ${user?.first_name}!`,
description: (
<span>
You're very close. Go to <Link to="/setup">setup</Link> to finish up configuring PostHog.
</span>
),
action: (
<LinkButton
to="/setup"
data-attr="demo-warning-cta"
data-message="incomplete_setup_on_real_project-setup"
>
<SettingOutlined /> Go to setup
</LinkButton>
),
},
demo_project: {
message: "You're viewing demo data.",
description: <span>This is a demo project with dummy data.</span>,
},
real_project_with_no_events: {
message: 'This project has no events yet.',
description: (
<>
We haven't received any events on this project. Go to the{' '}
<Link to="/ingestion" data-attr="real_project_with_no_events-ingestion_link">
ingestion wizard
</Link>{' '}
or grab your snippet or API key directly on{' '}
<Link to="/project/settings" data-attr="real_project_with_no_events-settings">
settings
</Link>{' '}
to get things moving.
</>
),
action: (
<LinkButton
to="/ingestion"
data-attr="demo-warning-cta"
data-message="real_project_with_no_events-ingestion"
>
<SettingOutlined /> Go to wizard
</LinkButton>
),
},
}
if (!demoWarning) {
return null
}
return (
<>
<Alert
type={WARNINGS[demoWarning].type || 'warning'}
message={WARNINGS[demoWarning].message}
className="demo-warning"
description={WARNINGS[demoWarning].description}
icon={<StarOutlined />}
showIcon
action={WARNINGS[demoWarning].action}
closable
style={{ marginTop: 32 }}
onClose={() => reportDemoWarningDismissed(demoWarning)}
/>
</>
)
}
Example #6
| 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 #7
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #8
| Source File: Home.tsx From react-ts-antd with MIT License | 4 votes |
|
constructor(props: any) {
super(props);
this.state = {
total: 0,
pageNo: 1,
pageSize: 10,
loading: false,
textBtn: '提交',
title: '添加任务',
currentRowData: {
id: -1,
title: '',
date: '',
content: ''
},
visible: false,
dataSource: [],
status: null, // 0：待办 1：完成 2：删除
columns: [
{
title: '序号',
key: 'id',
align: 'center',
render: (text: any, record: any, index: number) => {
let num = (this.state.pageNo - 1) * 10 + index + 1;
return num;
}
},
{
title: '任务名称',
dataIndex: 'title',
key: 'title',
render: (text: any, record: any, index: number) => {
const fav = this.state.dataSource[index].is_major;
const style = {
cursor: 'pointer',
fontSize: '16px'
}
const icon = fav === 0 ? <StarOutlined style={ style } /> : <StarTwoTone style={ style } twoToneColor="#f50" />;
return <div><span onClick={ () => this.toggleFav(record, index) }>{ icon }</span> { record.title }</div>;
}
},
{
title: '任务内容',
dataIndex: 'content',
key: 'content'
},
{
title: '截止日期',
dataIndex: 'gmt_expire',
key: 'gmt_expire',
render: (text: any, record: any) => formatDate(record.gmt_expire)
},
{
title: '任务状态',
dataIndex: 'status',
key: 'status',
width: 120,
render: (text: any, record: any) => {
const txt = record.status === 0 ? '待办' : record.status === 1 ? '完成' : '删除';
return txt;
}
},
{
title: '操作',
key: 'action',
width: 300,
align: 'center',
render: (text: any, record: any, index: number) => (
<Space size="middle">
<Button style={{marginRight: '10px', display: record.status !== 2 ? '' : 'none' }} onClick={ () => this.editTask(record, index) }>编辑</Button>
<Button type="primary" ghost style={{marginRight: '10px', display: record.status !== 2 ? '' : 'none' }} onClick={ () => this.completeTask(record) }>
{ record.status === 0 ? '完成' : record.status === 1 ? '待办' : null }
</Button>
<Button danger style={{ display: record.status !== 2 ? '' : 'none' }} onClick={ () => this.removeTask(record.id) }>删除</Button>
</Space>
)
}
]
}
}
Example #9
| 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 #10
| Source File: NavBarMobile.tsx From foodie with MIT License | 4 votes |
|
NavBarMobile: React.FC<IProps> = ({ theme, isAuth, auth, openModal }) => {
const [isOpenSearch, setOpenSearch] = useState(false);
const [isOpenMenu, setOpenMenu] = useState(false);
const { pathname } = useLocation();
const history = useHistory();
const onClickMenuItem = () => {
setOpenMenu(false);
}
const clickSearchItemCallback = (user: IUser) => {
setOpenSearch(false);
history.push(`/user/${user.username}`);
}
return isOpenSearch ? (
<div className="fixed top-0 left-0 flex w-full items-center bg-indigo-700 z-9999 py-2 pr-2 shadow-xl">
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-indigo-500"
onClick={() => setOpenSearch(false)}
>
<ArrowLeftOutlined className="text-white" style={{ fontSize: '18px' }} />
</div>
<SearchInput
clickItemCallback={clickSearchItemCallback}
inputClassName="w-full"
/>
</div>
) : (
<nav className="contain flex justify-between z-9999 align-center w-100 border-b border-transparent bg-white dark:bg-indigo-1000 text-gray-700 h-60px py-2 fixed top-0 left-0 w-full shadow-md laptop:shadow-sm dark:border-gray-800">
<div className="flex items-center space-x-8">
{/* ---- LOGO -------- */}
<Link
to={{
pathname: '/',
state: { from: pathname }
}}
>
<img
src={logo}
alt=""
className="w-24"
style={{ filter: `brightness(${theme === 'dark' ? 3.5 : 1})` }}
/>
</Link>
</div>
{/* ---- NAVICONS FOR MOBILE ---- */}
<div className="flex items-center space-x-4 laptop:hidden">
{isAuth && (
<>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
>
<Messages isAuth={isAuth} />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
>
<Notification isAuth={isAuth} />
</div>
</>
)}
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenSearch(true)}
>
<SearchOutlined style={{ fontSize: '20px' }} />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenMenu(true)}
>
<MenuOutlined style={{ fontSize: '20px' }} />
</div>
</div>
{/* ---- NAV DRAWER FOR MOBILE --- */}
<div className={`flex flex-col w-full h-screen fixed top-0 right-0 transition-transform transform ${isOpenMenu ? 'translate-x-0' : 'translate-x-full'} bg-white dark:bg-indigo-1000 laptop:hidden`}>
<div className="flex items-center justify-between px-4">
<div className="flex items-center space-x-4">
<h1 className="dark:text-white">Menu</h1>
<ThemeToggler />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenMenu(false)}
>
<CloseOutlined style={{ fontSize: '20px' }} />
</div>
</div>
{isAuth ? (
<ul className="divide-y divide-gray-100 dark:divide-gray-800">
<li className="px-4 py-3 pb-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex font-medium dark:text-indigo-400"
onClick={onClickMenuItem}
to={`/user/${auth.username}`}
>
<Avatar url={auth.profilePicture?.url} size="lg" className="mr-2" />
<div className="flex flex-col">
<span>{auth.username}</span>
<span className="text-gray-400 text-xs">View Profile</span>
</div>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/following`}
>
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Following</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/followers`}
>
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Followers</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/bookmarks`}
>
<StarOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Bookmarks</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={SUGGESTED_PEOPLE}
>
<UsergroupAddOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Suggested People</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<div
className="flex items-center text-black dark:text-white"
onClick={() => {
openModal();
setOpenMenu(false);
}}
>
<LogoutOutlined className="text-red-500" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm text-red-500">Logout</h6>
</div>
</li>
</ul>
) : (
<ul className="divide-y divide-gray-100 dark:divide-gray-800">
<li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
<ArrowRightOutlined className="dark:text-white" />
<Link
className="p-4 font-medium dark:text-indigo-400 flex-grow"
to={LOGIN}
>
Login
</Link>
</li>
<li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
<ArrowRightOutlined className="dark:text-white" />
<Link
className="p-4 font-medium dark:text-indigo-400 flex-grow"
to={REGISTER}
>
Register
</Link>
</li>
</ul>
)}
{/* --- COPYRIGHT -- */}
<span className="text-gray-400 text-xs absolute bottom-8 left-0 right-0 mx-auto text-center">
©Copyright {new Date().getFullYear()} Foodie
</span>
</div>
</nav>
)
}
Example #11
| 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 #12
| 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 #13
| 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>
);
}
