-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
86080cf
commit 23147c0
Showing
39 changed files
with
1,166 additions
and
213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
-12.2 KB
(91%)
frontend/__snapshots__/scenes-app-insights--trends-line-edit--dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
156 changes: 156 additions & 0 deletions
156
frontend/src/scenes/pipeline/hogfunctions/HogFunctionIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import { LemonButton, LemonFileInput, LemonInput, LemonSkeleton, lemonToast, Popover, Spinner } from '@posthog/lemon-ui' | ||
| import clsx from 'clsx' | ||
| import { useActions, useValues } from 'kea' | ||
| import { IconUploadFile } from 'lib/lemon-ui/icons' | ||
|
|
||
| import { hogFunctionIconLogic, HogFunctionIconLogicProps } from './hogFunctionIconLogic' | ||
|
|
||
| const fileToBase64 = (file?: File): Promise<string> => { | ||
| return new Promise((resolve) => { | ||
| if (!file) { | ||
| return | ||
| } | ||
|
|
||
| const reader = new FileReader() | ||
|
|
||
| reader.onload = (e) => { | ||
| const img = new Image() | ||
| img.onload = () => { | ||
| const canvas = document.createElement('canvas') | ||
| const ctx = canvas.getContext('2d') | ||
|
|
||
| // Set the dimensions at the wanted size. | ||
| const wantedWidth = 128 | ||
| const wantedHeight = 128 | ||
| canvas.width = wantedWidth | ||
| canvas.height = wantedHeight | ||
|
|
||
| // Resize the image with the canvas method drawImage(); | ||
| ctx!.drawImage(img, 0, 0, wantedWidth, wantedHeight) | ||
|
|
||
| const dataURI = canvas.toDataURL() | ||
|
|
||
| resolve(dataURI) | ||
| } | ||
| img.src = e.target?.result as string | ||
| } | ||
|
|
||
| reader.readAsDataURL(file) | ||
| }) | ||
| } | ||
|
|
||
| export function HogFunctionIconEditable({ | ||
| size = 'medium', | ||
| ...props | ||
| }: HogFunctionIconLogicProps & { size?: 'small' | 'medium' | 'large' }): JSX.Element { | ||
| const { possibleIconsLoading, showPopover, possibleIcons, searchTerm } = useValues(hogFunctionIconLogic(props)) | ||
| const { setShowPopover, setSearchTerm } = useActions(hogFunctionIconLogic(props)) | ||
|
|
||
| const content = ( | ||
| <span | ||
| className={clsx('relative cursor-pointer', { | ||
| 'w-8 h-8': size === 'small', | ||
| 'w-10 h-10': size === 'medium', | ||
| 'w-12 h-12': size === 'large', | ||
| })} | ||
| onClick={() => setShowPopover(!showPopover)} | ||
| > | ||
| {possibleIconsLoading ? <Spinner className="absolute -top-1 -right-1" /> : null} | ||
| <HogFunctionIcon size={size} src={props.src} /> | ||
| </span> | ||
| ) | ||
|
|
||
| return props.onChange ? ( | ||
| <Popover | ||
| showArrow | ||
| visible={showPopover} | ||
| onClickOutside={() => setShowPopover(false)} | ||
| overlay={ | ||
| <div className="p-1 w-100 space-y-2"> | ||
| <div className="flex items-center gap-2 justify-between"> | ||
| <h2 className="m-0">Choose an icon</h2> | ||
|
|
||
| <LemonFileInput | ||
| multiple={false} | ||
| accept={'image/*'} | ||
| showUploadedFiles={false} | ||
| onChange={(files) => { | ||
| void fileToBase64(files[0]) | ||
| .then((dataURI) => { | ||
| props.onChange?.(dataURI) | ||
| }) | ||
| .catch(() => { | ||
| lemonToast.error('Error uploading image') | ||
| }) | ||
| }} | ||
| callToAction={ | ||
| <LemonButton size="small" type="secondary" icon={<IconUploadFile />}> | ||
| Upload image | ||
| </LemonButton> | ||
| } | ||
| /> | ||
| </div> | ||
|
|
||
| <LemonInput | ||
| size="small" | ||
| type="search" | ||
| placeholder="Search for company logos" | ||
| fullWidth | ||
| value={searchTerm ?? ''} | ||
| onChange={setSearchTerm} | ||
| prefix={possibleIconsLoading ? <Spinner /> : undefined} | ||
| /> | ||
|
|
||
| <div className="flex flex-wrap gap-2"> | ||
| {possibleIcons?.map((icon) => ( | ||
| <span | ||
| key={icon.id} | ||
| className="w-14 h-14 cursor-pointer" | ||
| onClick={() => { | ||
| const nonTempUrl = icon.url.replace('&temp=true', '') | ||
| props.onChange?.(nonTempUrl) | ||
| setShowPopover(false) | ||
| }} | ||
| > | ||
| <img | ||
| src={icon.url} | ||
| title={icon.name} | ||
| className="w-full h-full rounded overflow-hidden" | ||
| /> | ||
| </span> | ||
| )) ?? | ||
| (possibleIconsLoading ? ( | ||
| <LemonSkeleton className="w-14 h-14" repeat={4} /> | ||
| ) : ( | ||
| 'No icons found' | ||
| ))} | ||
| </div> | ||
| </div> | ||
| } | ||
| > | ||
| {content} | ||
| </Popover> | ||
| ) : ( | ||
| content | ||
| ) | ||
| } | ||
|
|
||
| export function HogFunctionIcon({ | ||
| src, | ||
| size = 'medium', | ||
| }: { | ||
| src?: string | ||
| size?: 'small' | 'medium' | 'large' | ||
| }): JSX.Element { | ||
| return ( | ||
| <span | ||
| className={clsx('flex items-center justify-center', { | ||
| 'w-8 h-8 text-2xl': size === 'small', | ||
| 'w-10 h-10 text-4xl': size === 'medium', | ||
| 'w-12 h-12 text-6xl': size === 'large', | ||
| })} | ||
| > | ||
| {src ? <img className="w-full h-full rounded overflow-hidden" src={src} /> : <span>🦔</span>} | ||
| </span> | ||
| ) | ||
| } |
Oops, something went wrong.