@ant-design/icons#AimOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#AimOutlined.
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: ActionFilterDropdown.tsx From posthog-foss with MIT License | 6 votes |
|
export function ActionInfo({ item }: RenderInfoProps): JSX.Element {
if (item.renderInfo) {
return item.renderInfo({ item })
}
return (
<>
<AimOutlined /> Actions
{item.id && (
<Link to={urls.action(item.id)} style={{ float: 'right' }} tabIndex={-1}>
edit
</Link>
)}
<br />
<h3>
<PropertyKeyInfo value={item.name} />
</h3>
{item.action && <ActionSelectInfo entity={item.action} />}
</>
)
}
Example #2
| Source File: InfiniteList.tsx From posthog-foss with MIT License | 5 votes |
|
renderItemPopup = (
item: PropertyDefinition | CohortType | ActionType,
listGroupType: TaxonomicFilterGroupType,
group: TaxonomicFilterGroup
): JSX.Element | string => {
const width = 265
let data: KeyMapping | null = null
const value = group.getValue(item)
if (value) {
if (listGroupType === TaxonomicFilterGroupType.Actions && 'id' in item) {
return (
<div style={{ width, overflowWrap: 'break-word' }}>
<AimOutlined /> Actions
<Link to={urls.action(item.id)} style={{ float: 'right' }} tabIndex={-1}>
edit
</Link>
<br />
<h3>
<PropertyKeyInfo value={item.name ?? ''} />
</h3>
{item && <ActionSelectInfo entity={item as ActionType} />}
</div>
)
}
if (
// NB: also update "selectedItemHasPopup" below
listGroupType === TaxonomicFilterGroupType.Events ||
listGroupType === TaxonomicFilterGroupType.EventProperties ||
listGroupType === TaxonomicFilterGroupType.PersonProperties
) {
data = getKeyMapping(value.toString(), 'event')
} else if (listGroupType === TaxonomicFilterGroupType.Elements) {
data = getKeyMapping(value.toString(), 'element')
}
if (data) {
return (
<div style={{ width, overflowWrap: 'break-word' }}>
<PropertyKeyTitle data={data} />
{data.description ? <hr /> : null}
<PropertyKeyDescription data={data} value={value.toString()} />
{'volume_30_day' in item && (item.volume_30_day || 0) > 0 ? (
<p>
Seen <strong>{item.volume_30_day}</strong> times.{' '}
</p>
) : null}
{'query_usage_30_day' in item && (item.query_usage_30_day || 0) > 0 ? (
<p>
Used in <strong>{item.query_usage_30_day}</strong> queries.
</p>
) : null}
</div>
)
}
}
return item.name ?? ''
}
Example #3
| Source File: CohortEntityFilterBox.tsx From posthog-foss with MIT License | 5 votes |
|
export function CohortEntityFilterBox({
open = false,
onSelect,
}: {
open: boolean
onSelect: (type: any, id: string | number, name: string) => void
}): JSX.Element | null {
const { eventDefinitions } = useValues(eventDefinitionsModel)
const { actions } = useValues(actionsModel)
if (!open) {
return null
}
const groups: Array<SelectBoxItem> = [
{
key: 'actions',
name: 'Actions',
header: function actionHeader(label) {
return (
<>
<AimOutlined /> {label}
</>
)
},
dataSource: actions.map((action: ActionType) => ({
key: EntityTypes.ACTIONS + action.id,
name: action.name,
volume: action.count,
id: action.id,
action,
})),
renderInfo: ActionInfo,
type: 'action_type',
getValue: (item: SelectedItem) => item.action?.id || '',
getLabel: (item: SelectedItem) => item.action?.name || '',
},
{
key: 'events',
name: 'Events',
header: function eventHeader(label) {
return (
<>
<ContainerOutlined /> {label}
</>
)
},
dataSource:
eventDefinitions.map((definition) => ({
key: EntityTypes.EVENTS + definition.name,
...definition,
})) || [],
renderInfo: function events({ item }) {
return (
<>
<ContainerOutlined /> Events
<br />
<h3>{item.name}</h3>
{item?.volume_30_day && (
<>
Seen <strong>{item.volume_30_day}</strong> times.{' '}
</>
)}
{item?.query_usage_30_day && (
<>
Used in <strong>{item.query_usage_30_day}</strong> queries.
</>
)}
</>
)
},
type: 'event_type',
getValue: (item: SelectedItem) => item.name,
getLabel: (item: SelectedItem) => item.name,
},
]
return <SelectBox selectedItemKey={undefined} onDismiss={() => {}} onSelect={onSelect} items={groups} />
}
Example #4
| Source File: routeSpec.tsx From yakit with GNU Affero General Public License v3.0 | 5 votes |
|
RouteMenuData: MenuDataProps[] = [
// {key: Route.MITM, label: "HTTP(S) 中间人劫持", icon: <FireOutlined/>},
{
key: Route.PenTest, label: "手工渗透测试", icon: <AimOutlined/>,
subMenuData: [
{key: Route.HTTPHacker, label: "MITM", icon: <FireOutlined/>},
{key: Route.HTTPFuzzer, label: "Web Fuzzer", icon: <AimOutlined/>},
],
},
{
key: Route.GeneralModule, label: "基础安全工具", icon: <RocketOutlined/>,
subMenuData: [
{key: Route.Mod_ScanPort, label: "扫描端口/指纹", icon: <EllipsisOutlined/>},
{key: Route.Mod_Brute, label: "爆破与未授权", icon: <EllipsisOutlined/>, disabled: false},
// {key: Route.Mod_Subdomain, label: "子域名发现", icon: <EllipsisOutlined/>, disabled: true},
// {key: Route.Mod_Crawler, label: "基础爬虫", icon: <EllipsisOutlined/>, disabled: true},
// {key: Route.Mod_SpaceEngine, label: "空间引擎", icon: <EllipsisOutlined/>, disabled: true},
],
},
{
key: Route.PoC, label: "专项漏洞检测",
icon: <FunctionOutlined/>,
},
{
key: Route.ModManagerDetail, label: "插件管理", icon: <AppstoreOutlined/>,
subMenuData: [
{key: Route.ModManager, label: "插件仓库", icon: <AppstoreOutlined/>},
{key: Route.BatchExecutorPage, label: "插件批量执行", icon: <AppstoreOutlined/>},
]
},
{key: Route.PayloadManager, label: "Payload 管理", icon: <AuditOutlined/>},
{key: Route.YakScript, label: "Yak Runner", icon: <CodeOutlined/>},
{
key: Route.ReverseManager, label: "反连管理", icon: <AppstoreOutlined/>,
subMenuData: [
{key: Route.ShellReceiver, label: "端口监听器", icon: <OneToOneOutlined/>},
{key: Route.ReverseServer, label: "反连服务器", icon: <OneToOneOutlined/>},
{key: Route.DNSLog, label: "DNSLog", icon: <OneToOneOutlined/>},
{key: Route.ICMPSizeLog, label: "ICMP-SizeLog", icon: <OneToOneOutlined/>},
{key: Route.TCPPortLog, label: "TCP-PortLog", icon: <OneToOneOutlined/>},
]
},
{
key: Route.DataHandler, label: "数据处理",
icon: <FunctionOutlined/>,
subMenuData: [
{key: Route.Codec, label: "Codec", icon: <FireOutlined/>},
{key: Route.DataCompare, label: "数据对比", icon: <OneToOneOutlined/>},
],
},
{
key: Route.Database, label: "数据库",
icon: <FunctionOutlined/>,
subMenuData: [
{key: Route.DB_HTTPHistory, label: "HTTP History", icon: <OneToOneOutlined/>},
{key: Route.DB_Ports, label: "端口资产", icon: <OneToOneOutlined/>},
{key: Route.DB_Domain, label: "域名资产", icon: <FireOutlined/>},
{key: Route.DB_ExecResults, label: "插件执行结果", icon: <FireOutlined/>},
{key: Route.DB_Risk, label: "漏洞与风险", icon: <BugOutlined/>},
{key: Route.DB_Report, label: "报告(Beta*)", icon: <FireOutlined/>},
],
},
// {
// key: Route.IGNORE, label: "常用工具包", icon: <FireOutlined/>,
// subMenuData: [
// {key: Route.Codec, label: "编码与解码", icon: <EllipsisOutlined/>},
// {key: Route.ShellReceiver, label: "端口开放助手", icon: <FireOutlined/>},
// ],
// },
]
Example #5
| Source File: commandPaletteLogic.ts From posthog-foss with MIT License | 4 votes |
|
commandPaletteLogic = kea<
commandPaletteLogicType<
Command,
CommandFlow,
CommandRegistrations,
CommandResult,
CommandResultDisplayable,
RegExpCommandPairs
>
>({
path: ['lib', 'components', 'CommandPalette', 'commandPaletteLogic'],
connect: {
actions: [personalAPIKeysLogic, ['createKey']],
values: [teamLogic, ['currentTeam'], userLogic, ['user']],
logic: [preflightLogic], // used in afterMount, which does not auto-connect
},
actions: {
hidePalette: true,
showPalette: true,
togglePalette: true,
setInput: (input: string) => ({ input }),
onArrowUp: true,
onArrowDown: (maxIndex: number) => ({ maxIndex }),
onMouseEnterResult: (index: number) => ({ index }),
onMouseLeaveResult: true,
executeResult: (result: CommandResult) => ({ result }),
activateFlow: (flow: CommandFlow | null) => ({ flow }),
backFlow: true,
registerCommand: (command: Command) => ({ command }),
deregisterCommand: (commandKey: string) => ({ commandKey }),
setCustomCommand: (commandKey: string) => ({ commandKey }),
deregisterScope: (scope: string) => ({ scope }),
},
reducers: {
isPaletteShown: [
false,
{
hidePalette: () => false,
showPalette: () => true,
togglePalette: (previousState) => !previousState,
},
],
keyboardResultIndex: [
0,
{
setInput: () => 0,
executeResult: () => 0,
activateFlow: () => 0,
backFlow: () => 0,
onArrowUp: (previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0),
onArrowDown: (previousIndex, { maxIndex }) => (previousIndex < maxIndex ? previousIndex + 1 : maxIndex),
},
],
hoverResultIndex: [
null as number | null,
{
activateFlow: () => null,
backFlow: () => null,
onMouseEnterResult: (_, { index }) => index,
onMouseLeaveResult: () => null,
onArrowUp: () => null,
onArrowDown: () => null,
},
],
input: [
'',
{
setInput: (_, { input }) => input,
activateFlow: () => '',
backFlow: () => '',
executeResult: () => '',
},
],
activeFlow: [
null as CommandFlow | null,
{
activateFlow: (currentFlow, { flow }) =>
flow ? { ...flow, scope: flow.scope ?? currentFlow?.scope, previousFlow: currentFlow } : null,
backFlow: (currentFlow) => currentFlow?.previousFlow ?? null,
},
],
rawCommandRegistrations: [
{} as CommandRegistrations,
{
registerCommand: (commands, { command }) => {
return { ...commands, [command.key]: command }
},
deregisterCommand: (commands, { commandKey }) => {
const { [commandKey]: _, ...cleanedCommands } = commands // eslint-disable-line
return cleanedCommands
},
},
],
},
listeners: ({ actions, values }) => ({
showPalette: () => {
posthog.capture('palette shown', { isMobile: isMobile() })
},
togglePalette: () => {
if (values.isPaletteShown) {
posthog.capture('palette shown', { isMobile: isMobile() })
}
},
executeResult: ({ result }: { result: CommandResult }) => {
if (result.executor === true) {
actions.activateFlow(null)
actions.hidePalette()
} else {
const possibleFlow = result.executor?.() || null
actions.activateFlow(possibleFlow)
if (!possibleFlow) {
actions.hidePalette()
}
}
// Capture command execution, without useless data
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { icon, index, ...cleanedResult }: Record<string, any> = result
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { resolver, ...cleanedCommand } = cleanedResult.source
cleanedResult.source = cleanedCommand
cleanedResult.isMobile = isMobile()
posthog.capture('palette command executed', cleanedResult)
},
deregisterScope: ({ scope }) => {
for (const command of Object.values(values.commandRegistrations)) {
if (command.scope === scope) {
actions.deregisterCommand(command.key)
}
}
},
setInput: async ({ input }, breakpoint) => {
await breakpoint(300)
if (input.length > 8) {
const response = await api.get('api/person/?key_identifier=' + encodeURIComponent(input))
const person = response.results[0]
if (person) {
actions.registerCommand({
key: `person-${person.distinct_ids[0]}`,
resolver: [
{
icon: UserOutlined,
display: `View person ${input}`,
executor: () => {
const { push } = router.actions
push(urls.person(person.distinct_ids[0]))
},
},
],
scope: GLOBAL_COMMAND_SCOPE,
})
}
}
},
}),
selectors: {
isSqueak: [
(selectors) => [selectors.input],
(input: string) => {
return input.trim().toLowerCase() === 'squeak'
},
],
activeResultIndex: [
(selectors) => [selectors.keyboardResultIndex, selectors.hoverResultIndex],
(keyboardResultIndex: number, hoverResultIndex: number | null) => {
return hoverResultIndex ?? keyboardResultIndex
},
],
commandRegistrations: [
(selectors) => [
selectors.rawCommandRegistrations,
dashboardsModel.selectors.nameSortedDashboards,
teamLogic.selectors.currentTeam,
],
(rawCommandRegistrations: CommandRegistrations, dashboards: DashboardType[]): CommandRegistrations => ({
...rawCommandRegistrations,
custom_dashboards: {
key: 'custom_dashboards',
resolver: dashboards.map((dashboard: DashboardType) => ({
key: `dashboard_${dashboard.id}`,
icon: LineChartOutlined,
display: `Go to Dashboard: ${dashboard.name}`,
executor: () => {
const { push } = router.actions
push(urls.dashboard(dashboard.id))
},
})),
scope: GLOBAL_COMMAND_SCOPE,
},
}),
],
regexpCommandPairs: [
(selectors) => [selectors.commandRegistrations],
(commandRegistrations: CommandRegistrations) => {
const array: RegExpCommandPairs = []
for (const command of Object.values(commandRegistrations)) {
if (command.prefixes) {
array.push([new RegExp(`^\\s*(${command.prefixes.join('|')})(?:\\s+(.*)|$)`, 'i'), command])
} else {
array.push([null, command])
}
}
return array
},
],
commandSearchResults: [
(selectors) => [
selectors.isPaletteShown,
selectors.regexpCommandPairs,
selectors.input,
selectors.activeFlow,
selectors.isSqueak,
],
(
isPaletteShown: boolean,
regexpCommandPairs: RegExpCommandPairs,
argument: string,
activeFlow: CommandFlow | null,
isSqueak: boolean
) => {
if (!isPaletteShown || isSqueak) {
return []
}
if (activeFlow) {
return resolveCommand(activeFlow, argument)
}
let directResults: CommandResult[] = []
let prefixedResults: CommandResult[] = []
for (const [regexp, command] of regexpCommandPairs) {
if (regexp) {
const match = argument.match(regexp)
if (match && match[1]) {
prefixedResults = [...prefixedResults, ...resolveCommand(command, match[2], match[1])]
}
}
directResults = [...directResults, ...resolveCommand(command, argument)]
}
const allResults = directResults.concat(prefixedResults)
let fusableResults: CommandResult[] = []
let guaranteedResults: CommandResult[] = []
for (const result of allResults) {
if (result.guarantee) {
guaranteedResults.push(result)
} else {
fusableResults.push(result)
}
}
fusableResults = uniqueBy(fusableResults, (result) => result.display)
guaranteedResults = uniqueBy(guaranteedResults, (result) => result.display)
const fusedResults = argument
? new Fuse(fusableResults, {
keys: ['display', 'synonyms'],
})
.search(argument)
.slice(0, RESULTS_MAX)
.map((result) => result.item)
: sample(fusableResults, RESULTS_MAX - guaranteedResults.length)
return guaranteedResults.concat(fusedResults)
},
],
commandSearchResultsGrouped: [
(selectors) => [selectors.commandSearchResults, selectors.activeFlow],
(commandSearchResults: CommandResult[], activeFlow: CommandFlow | null) => {
const resultsGrouped: {
[scope: string]: CommandResult[]
} = {}
if (activeFlow) {
resultsGrouped[activeFlow.scope ?? '?'] = []
}
for (const result of commandSearchResults) {
const scope: string = result.source.scope ?? '?'
if (!(scope in resultsGrouped)) {
resultsGrouped[scope] = []
} // Ensure there's an array to push to
resultsGrouped[scope].push({ ...result })
}
let rollingGroupIndex = 0
let rollingResultIndex = 0
const resultsGroupedInOrder: [string, CommandResultDisplayable[]][] = []
for (const [group, results] of Object.entries(resultsGrouped)) {
resultsGroupedInOrder.push([group, []])
for (const result of results) {
resultsGroupedInOrder[rollingGroupIndex][1].push({ ...result, index: rollingResultIndex++ })
}
rollingGroupIndex++
}
return resultsGroupedInOrder
},
],
},
events: ({ actions }) => ({
afterMount: () => {
const { push } = router.actions
const goTo: Command = {
key: 'go-to',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: [
{
icon: FundOutlined,
display: 'Go to Dashboards',
executor: () => {
push(urls.dashboards())
},
},
{
icon: RiseOutlined,
display: 'Go to Insights',
executor: () => {
push(urls.savedInsights())
},
},
{
icon: RiseOutlined,
display: 'Go to Trends',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.TRENDS }))
},
},
{
icon: FunnelPlotOutlined,
display: 'Go to Funnels',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.FUNNELS }))
},
},
{
icon: GatewayOutlined,
display: 'Go to Retention',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.RETENTION }))
},
},
{
icon: InteractionOutlined,
display: 'Go to Paths',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.PATHS }))
},
},
{
icon: ContainerOutlined,
display: 'Go to Events',
executor: () => {
push(urls.events())
},
},
{
icon: AimOutlined,
display: 'Go to Actions',
executor: () => {
push(urls.actions())
},
},
{
icon: UserOutlined,
display: 'Go to Persons',
synonyms: ['people'],
executor: () => {
push(urls.persons())
},
},
{
icon: UsergroupAddOutlined,
display: 'Go to Cohorts',
executor: () => {
push(urls.cohorts())
},
},
{
icon: FlagOutlined,
display: 'Go to Feature Flags',
synonyms: ['feature flags', 'a/b tests'],
executor: () => {
push(urls.featureFlags())
},
},
{
icon: MessageOutlined,
display: 'Go to Annotations',
executor: () => {
push(urls.annotations())
},
},
{
icon: TeamOutlined,
display: 'Go to Team members',
synonyms: ['organization', 'members', 'invites', 'teammates'],
executor: () => {
push(urls.organizationSettings())
},
},
{
icon: ProjectOutlined,
display: 'Go to Project settings',
executor: () => {
push(urls.projectSettings())
},
},
{
icon: SmileOutlined,
display: 'Go to My settings',
synonyms: ['account'],
executor: () => {
push(urls.mySettings())
},
},
{
icon: ApiOutlined,
display: 'Go to Plugins',
synonyms: ['integrations'],
executor: () => {
push(urls.plugins())
},
},
{
icon: DatabaseOutlined,
display: 'Go to System status page',
synonyms: ['redis', 'celery', 'django', 'postgres', 'backend', 'service', 'online'],
executor: () => {
push(urls.systemStatus())
},
},
{
icon: PlusOutlined,
display: 'Create action',
executor: () => {
push(urls.createAction())
},
},
{
icon: LogoutOutlined,
display: 'Log out',
executor: () => {
userLogic.actions.logout()
},
},
],
}
const debugClickhouseQueries: Command = {
key: 'debug-clickhouse-queries',
scope: GLOBAL_COMMAND_SCOPE,
resolver:
userLogic.values.user?.is_staff ||
userLogic.values.user?.is_impersonated ||
preflightLogic.values.preflight?.is_debug ||
preflightLogic.values.preflight?.instance_preferences?.debug_queries
? {
icon: PlusOutlined,
display: 'Debug queries (ClickHouse)',
executor: () => {
debugCHQueries()
},
}
: [],
}
const calculator: Command = {
key: 'calculator',
scope: GLOBAL_COMMAND_SCOPE,
resolver: (argument) => {
// don't try evaluating if there's no argument or if it's a plain number already
if (!argument || !isNaN(+argument)) {
return null
}
try {
const result = +Parser.evaluate(argument)
return isNaN(result)
? null
: {
icon: CalculatorOutlined,
display: `= ${result}`,
guarantee: true,
executor: () => {
copyToClipboard(result.toString(), 'calculation result')
},
}
} catch {
return null
}
},
}
const openUrls: Command = {
key: 'open-urls',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: (argument) => {
const results: CommandResultTemplate[] = (teamLogic.values.currentTeam?.app_urls ?? []).map(
(url: string) => ({
icon: LinkOutlined,
display: `Open ${url}`,
synonyms: [`Visit ${url}`],
executor: () => {
open(url)
},
})
)
if (argument && isURL(argument)) {
results.push({
icon: LinkOutlined,
display: `Open ${argument}`,
synonyms: [`Visit ${argument}`],
executor: () => {
open(argument)
},
})
}
results.push({
icon: LinkOutlined,
display: 'Open PostHog Docs',
synonyms: ['technical documentation'],
executor: () => {
open('https://posthog.com/docs')
},
})
return results
},
}
const createPersonalApiKey: Command = {
key: 'create-personal-api-key',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: KeyOutlined,
display: 'Create Personal API Key',
executor: () => ({
instruction: 'Give your key a label',
icon: TagOutlined,
scope: 'Creating Personal API Key',
resolver: (argument) => {
if (argument?.length) {
return {
icon: KeyOutlined,
display: `Create Key "${argument}"`,
executor: () => {
personalAPIKeysLogic.actions.createKey(argument)
push(urls.mySettings(), {}, 'personal-api-keys')
},
}
}
return null
},
}),
},
}
const createDashboard: Command = {
key: 'create-dashboard',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: FundOutlined,
display: 'Create Dashboard',
executor: () => ({
instruction: 'Name your new dashboard',
icon: TagOutlined,
scope: 'Creating Dashboard',
resolver: (argument) => {
if (argument?.length) {
return {
icon: FundOutlined,
display: `Create Dashboard "${argument}"`,
executor: () => {
dashboardsModel.actions.addDashboard({ name: argument, show: true })
},
}
}
return null
},
}),
},
}
const shareFeedback: Command = {
key: 'share-feedback',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: CommentOutlined,
display: 'Share Feedback',
synonyms: ['send opinion', 'ask question', 'message posthog', 'github issue'],
executor: () => ({
scope: 'Sharing Feedback',
resolver: [
{
display: 'Send Message Directly to PostHog',
icon: CommentOutlined,
executor: () => ({
instruction: "What's on your mind?",
icon: CommentOutlined,
resolver: (argument) => ({
icon: SendOutlined,
display: 'Send',
executor: !argument?.length
? undefined
: () => {
posthog.capture('palette feedback', { message: argument })
return {
resolver: {
icon: CheckOutlined,
display: 'Message Sent!',
executor: true,
},
}
},
}),
}),
},
{
icon: VideoCameraOutlined,
display: 'Schedule Quick Call',
executor: () => {
open('https://calendly.com/posthog-feedback')
},
},
{
icon: ExclamationCircleOutlined,
display: 'Create GitHub Issue',
executor: () => {
open('https://github.com/PostHog/posthog/issues/new/choose')
},
},
],
}),
},
}
actions.registerCommand(goTo)
actions.registerCommand(openUrls)
actions.registerCommand(debugClickhouseQueries)
actions.registerCommand(calculator)
actions.registerCommand(createPersonalApiKey)
actions.registerCommand(createDashboard)
actions.registerCommand(shareFeedback)
},
beforeUnmount: () => {
actions.deregisterCommand('go-to')
actions.deregisterCommand('open-urls')
actions.deregisterCommand('debug-clickhouse-queries')
actions.deregisterCommand('calculator')
actions.deregisterCommand('create-personal-api-key')
actions.deregisterCommand('create-dashboard')
actions.deregisterCommand('share-feedback')
},
}),
})
Example #6
| Source File: ToolbarButton.tsx From posthog-foss with MIT License | 4 votes |
|
export function ToolbarButton(): JSX.Element {
const {
extensionPercentage,
heatmapInfoVisible,
toolbarListVerticalPadding,
helpButtonOnTop,
side,
closeDistance,
closeRotation,
inspectExtensionPercentage,
heatmapExtensionPercentage,
actionsExtensionPercentage,
actionsInfoVisible,
featureFlagsExtensionPercentage,
flagsVisible,
} = useValues(toolbarButtonLogic)
const {
setExtensionPercentage,
showHeatmapInfo,
hideHeatmapInfo,
showActionsInfo,
hideActionsInfo,
showFlags,
hideFlags,
} = useActions(toolbarButtonLogic)
const { buttonActionsVisible, showActionsTooltip } = useValues(actionsTabLogic)
const { hideButtonActions, showButtonActions } = useActions(actionsTabLogic)
const { actionCount, allActionsLoading } = useValues(actionsLogic)
const { enableInspect, disableInspect } = useActions(elementsLogic)
const { inspectEnabled, selectedElement } = useValues(elementsLogic)
const { enableHeatmap, disableHeatmap } = useActions(heatmapLogic)
const { heatmapEnabled, heatmapLoading, elementCount, showHeatmapTooltip } = useValues(heatmapLogic)
const { isAuthenticated } = useValues(toolbarLogic)
const { authenticate, logout } = useActions(toolbarLogic)
const globalMouseMove = useRef((e: MouseEvent) => {
e
})
useEffect(() => {
globalMouseMove.current = function (e: MouseEvent): void {
const buttonDiv = getShadowRoot()?.getElementById('button-toolbar')
if (buttonDiv) {
const rect = buttonDiv.getBoundingClientRect()
const x = rect.left + rect.width / 2
const y = rect.top + rect.height / 2
const distance = Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y))
const maxDistance = isAuthenticated ? 300 : 100
if (distance >= maxDistance && toolbarButtonLogic.values.extensionPercentage !== 0) {
setExtensionPercentage(0)
}
}
}
window.addEventListener('mousemove', globalMouseMove.current)
return () => window.removeEventListener('mousemove', globalMouseMove.current)
}, [isAuthenticated])
// using useLongPress for short presses (clicks) since it detects if the element was dragged (no click) or not (click)
const clickEvents = useLongPress(
(clicked) => {
if (clicked) {
if (isAuthenticated) {
setExtensionPercentage(extensionPercentage === 1 ? 0 : 1)
} else {
authenticate()
}
}
},
{
ms: undefined,
clickMs: 1,
touch: true,
click: true,
}
)
const borderRadius = 14
const buttonWidth = 42
let n = 0
return (
<Circle
rootNode
width={62}
className="floating-toolbar-button"
content={<HogLogo style={{ width: 45, cursor: 'pointer' }} />}
{...clickEvents}
onMouseOver={isAuthenticated ? undefined : () => setExtensionPercentage(1)}
style={{ borderRadius: 10, height: 46, marginTop: -23 }}
zIndex={3}
>
<Circle
width={26}
extensionPercentage={extensionPercentage}
distance={closeDistance}
rotation={closeRotation}
content={<Close style={{ width: 14, height: 14 }} />}
zIndex={extensionPercentage > 0.95 ? 5 : 2}
onClick={logout}
style={{
cursor: 'pointer',
background: '#393939',
borderRadius: 6,
color: 'white',
transform: `scale(${0.2 + 0.8 * extensionPercentage})`,
}}
/>
{isAuthenticated ? (
<>
<Circle
width={32}
extensionPercentage={extensionPercentage}
distance={helpButtonOnTop ? 75 : 55}
rotation={helpButtonOnTop ? (side === 'left' ? -95 + 360 : -95) : 90}
content={<QuestionOutlined style={{ fontSize: 22 }} />}
label="Help"
zIndex={2}
onClick={() => window.open(HELP_URL, '_blank')?.focus()}
labelStyle={{ opacity: extensionPercentage > 0.8 ? (extensionPercentage - 0.8) / 0.2 : 0 }}
style={{
cursor: 'pointer',
background: '#777',
color: 'white',
borderRadius: 10,
transform: `scale(${0.2 + 0.8 * extensionPercentage})`,
}}
/>
<Circle
width={buttonWidth}
x={side === 'left' ? 80 : -80}
y={toolbarListVerticalPadding + n++ * 60}
extensionPercentage={inspectExtensionPercentage}
rotationFixer={(r) => (side === 'right' && r < 0 ? 360 : 0)}
label="Inspect"
labelPosition={side === 'left' ? 'right' : 'left'}
labelStyle={{
opacity: inspectExtensionPercentage > 0.8 ? (inspectExtensionPercentage - 0.8) / 0.2 : 0,
}}
content={
<div style={{ position: 'relative' }}>
<Magnifier style={{ height: 34, paddingTop: 2 }} engaged={inspectEnabled} />
{inspectEnabled && selectedElement ? (
<div
style={{
position: 'absolute',
top: 8,
left: 9,
fontSize: 13,
color: 'white',
}}
>
<Close style={{ width: 10, height: 10 }} />
</div>
) : null}
</div>
}
zIndex={1}
onClick={inspectEnabled ? disableInspect : enableInspect}
style={{
cursor: 'pointer',
background: inspectEnabled ? '#8F98FF' : '#E7EAFD',
transition: 'transform 0.2s, color 0.2s, background: 0.2s',
transform: `scale(${0.2 + 0.8 * inspectExtensionPercentage})`,
borderRadius,
}}
/>
<Circle
width={buttonWidth}
x={side === 'left' ? 80 : -80}
y={toolbarListVerticalPadding + n++ * 60}
extensionPercentage={heatmapExtensionPercentage}
rotationFixer={(r) => (side === 'right' && r < 0 ? 360 : 0)}
label={heatmapEnabled && !heatmapLoading ? null : 'Heatmap'}
labelPosition={side === 'left' ? 'right' : 'left'}
labelStyle={{
opacity:
heatmapEnabled && !heatmapLoading
? 0
: heatmapExtensionPercentage > 0.8
? (heatmapExtensionPercentage - 0.8) / 0.2
: 0,
}}
content={<Fire style={{ height: 26 }} engaged={heatmapEnabled} animated={heatmapLoading} />}
zIndex={2}
onClick={heatmapEnabled ? disableHeatmap : enableHeatmap}
style={{
cursor: 'pointer',
background: heatmapEnabled ? '#FF9870' : '#FEE3DA',
transform: `scale(${0.2 + 0.8 * heatmapExtensionPercentage})`,
borderRadius,
}}
>
{heatmapEnabled && !heatmapLoading ? (
<Circle
width={26}
x={
(side === 'left' ? 50 : -50) *
heatmapExtensionPercentage *
heatmapExtensionPercentage
}
y={0}
content={
<Tooltip
visible={showHeatmapTooltip}
title="Click for details"
placement={side === 'left' ? 'right' : 'left'}
getPopupContainer={getShadowRootPopupContainer}
>
<div style={{ whiteSpace: 'nowrap', textAlign: 'center' }}>{elementCount}</div>
</Tooltip>
}
zIndex={4}
onClick={heatmapInfoVisible ? hideHeatmapInfo : showHeatmapInfo}
style={{
cursor: 'pointer',
background: heatmapInfoVisible ? 'hsla(17, 100%, 47%, 1)' : 'hsla(17, 84%, 95%, 1)',
color: heatmapInfoVisible ? '#FFEB3B' : 'hsl(17, 64%, 32%)',
width: 'auto',
minWidth: 26,
fontSize: '20px',
lineHeight: '26px',
padding: '0 4px',
transform: `scale(${0.2 + 0.8 * heatmapExtensionPercentage})`,
borderRadius: 7,
}}
/>
) : null}
</Circle>
<Circle
width={buttonWidth}
x={side === 'left' ? 80 : -80}
y={toolbarListVerticalPadding + n++ * 60}
extensionPercentage={actionsExtensionPercentage}
rotationFixer={(r) => (side === 'right' && r < 0 ? 360 : 0)}
label={buttonActionsVisible && (!allActionsLoading || actionCount > 0) ? null : 'Actions'}
labelPosition={side === 'left' ? 'right' : 'left'}
labelStyle={{
opacity: actionsExtensionPercentage > 0.8 ? (actionsExtensionPercentage - 0.8) / 0.2 : 0,
}}
content={
<AimOutlined
style={{ fontSize: '28px', color: buttonActionsVisible ? '#fef5e2' : '#f1aa04' }}
/>
}
zIndex={1}
onClick={buttonActionsVisible ? hideButtonActions : showButtonActions}
style={{
cursor: 'pointer',
transform: `scale(${0.2 + 0.8 * actionsExtensionPercentage})`,
background: buttonActionsVisible ? '#f1aa04' : '#fef5e2',
borderRadius,
}}
>
{buttonActionsVisible && (!allActionsLoading || actionCount > 0) ? (
<Circle
width={26}
x={
(side === 'left' ? 50 : -50) *
actionsExtensionPercentage *
actionsExtensionPercentage
}
y={0}
content={
<Tooltip
visible={showActionsTooltip}
title="Click for details"
placement={side === 'left' ? 'right' : 'left'}
getPopupContainer={getShadowRootPopupContainer}
>
<div style={{ whiteSpace: 'nowrap', textAlign: 'center' }}>{actionCount}</div>
</Tooltip>
}
zIndex={4}
onClick={actionsInfoVisible ? hideActionsInfo : showActionsInfo}
style={{
cursor: 'pointer',
background: actionsInfoVisible ? '#f1aa04' : '#fef5e2',
color: actionsInfoVisible ? '#fef5e2' : '#f1aa04',
width: 'auto',
minWidth: 26,
fontSize: '20px',
lineHeight: '26px',
padding: '0 4px',
transform: `scale(${0.2 + 0.8 * actionsExtensionPercentage})`,
borderRadius: 7,
}}
/>
) : null}
</Circle>
<Circle
width={buttonWidth}
x={side === 'left' ? 80 : -80}
y={toolbarListVerticalPadding + n++ * 60}
extensionPercentage={featureFlagsExtensionPercentage}
rotationFixer={(r) => (side === 'right' && r < 0 ? 360 : 0)}
label="Feature Flags"
labelPosition={side === 'left' ? 'right' : 'left'}
labelStyle={{
opacity:
featureFlagsExtensionPercentage > 0.8
? (featureFlagsExtensionPercentage - 0.8) / 0.2
: 0,
}}
content={<Flag style={{ height: 29 }} engaged={flagsVisible} />}
zIndex={1}
onClick={flagsVisible ? hideFlags : showFlags}
style={{
cursor: 'pointer',
transform: `scale(${0.2 + 0.8 * featureFlagsExtensionPercentage})`,
background: flagsVisible ? '#94D674' : '#D6EBCC',
borderRadius,
}}
/>
</>
) : null}
</Circle>
)
}
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>
);
}
