-
Notifications
You must be signed in to change notification settings - Fork 68
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
Showing
56 changed files
with
1,326 additions
and
290 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
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
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
46 changes: 46 additions & 0 deletions
46
apps/desktop/src/components/CommandPalette/CommandApp/FormApp/FormApp.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,46 @@ | ||
| import { memo } from 'react' | ||
| import { Box } from '@fower/react' | ||
| import { FormJSON } from '@penxio/preset-ui' | ||
| import { Form, useForm } from 'fomir' | ||
|
|
||
| interface FormAppProps { | ||
| component: FormJSON | ||
| } | ||
|
|
||
| export const FormApp = memo(function FormApp({ component }: FormAppProps) { | ||
| console.log('=========component:', component) | ||
|
|
||
| const form = useForm({ | ||
| onSubmit(values) { | ||
| alert(JSON.stringify(values, null, 2)) | ||
| console.log('values', values) | ||
| }, | ||
| children: [ | ||
| ...component.fields, | ||
| // { | ||
| // label: 'First Name', | ||
| // name: 'firstName', | ||
| // component: 'Input', | ||
| // value: '', | ||
| // validators: { | ||
| // required: 'First Name is requiredFirst Name is required', | ||
| // }, | ||
| // }, | ||
| // { | ||
| // label: 'Last Name', | ||
| // name: 'lastName', | ||
| // component: 'Input', | ||
| // value: '', | ||
| // validators: { | ||
| // required: 'First Name is required', | ||
| // }, | ||
| // }, | ||
| ], | ||
| }) | ||
|
|
||
| return ( | ||
| <Box py4> | ||
| <Form form={form} /> | ||
| </Box> | ||
| ) | ||
| }) |
39 changes: 39 additions & 0 deletions
39
apps/desktop/src/components/CommandPalette/CommandApp/ListApp/Accessory.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,39 @@ | ||
| import { ReactNode, useMemo } from 'react' | ||
| import { Box } from '@fower/react' | ||
| import { IAccessory, isAccessoryObjectText } from '@penxio/preset-ui' | ||
| import { useCurrentCommand } from '~/hooks/useCurrentCommand' | ||
| import { ListItemIcon } from '../../ListItemIcon' | ||
|
|
||
| interface AccessoryProps { | ||
| item: IAccessory | ||
| } | ||
|
|
||
| export function Accessory({ item }: AccessoryProps) { | ||
| const { currentCommand } = useCurrentCommand() | ||
| const assets = currentCommand?.extension?.assets || {} | ||
|
|
||
| let text: ReactNode = useMemo(() => { | ||
| if (typeof item.text === 'string' || typeof item.text === 'number') { | ||
| return <Box>{item.text}</Box> | ||
| } | ||
| if (isAccessoryObjectText(item.text)) { | ||
| return <Box color={item.text.color || 'gray600'}>{item.text?.value || ''}</Box> | ||
| } | ||
| return null | ||
| }, [item.text]) | ||
| let tag: ReactNode = item.tag ? ( | ||
| <Box bgAmber500 white h-24 rounded px2 toCenterY> | ||
| {item.tag.value} | ||
| </Box> | ||
| ) : null | ||
|
|
||
| let icon: ReactNode = item.icon ? <ListItemIcon roundedFull icon={assets[item.icon]} /> : null | ||
|
|
||
| return ( | ||
| <Box toCenterY gap1> | ||
| {icon} | ||
| {text} | ||
| {tag} | ||
| </Box> | ||
| ) | ||
| } |
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
76 changes: 76 additions & 0 deletions
76
apps/desktop/src/components/CommandPalette/CommandApp/ListApp/ListItemUI.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,76 @@ | ||
| import { Box, FowerHTMLProps } from '@fower/react' | ||
| import { useCurrentCommand } from '~/hooks/useCurrentCommand' | ||
| import { StyledCommandItem } from '../../CommandComponents' | ||
| import { ListItemIcon } from '../../ListItemIcon' | ||
| import { Accessory } from './Accessory' | ||
| import { ListItem } from './domains/ListItem.domain' | ||
|
|
||
| interface ListItemUIProps extends Omit<FowerHTMLProps<'div'>, 'onSelect'> { | ||
| index: number | ||
| item: ListItem | ||
| titleLayout?: 'column' | 'row' | ||
| onSelect?: () => Promise<void> | ||
| } | ||
|
|
||
| export const ListItemUI = ({ | ||
| item, | ||
| index, | ||
| titleLayout = 'row', | ||
| onSelect, | ||
| ...rest | ||
| }: ListItemUIProps) => { | ||
| const { currentCommand } = useCurrentCommand() | ||
|
|
||
| // if (item.type === 'list-heading') { | ||
| // return ( | ||
| // <Box textXS gray400 pl-10 mb-2 mt2={index > 0}> | ||
| // {title} | ||
| // </Box> | ||
| // ) | ||
| // } | ||
|
|
||
| function select() { | ||
| if (onSelect) { | ||
| onSelect() | ||
| } else { | ||
| // TODO:... | ||
| // commandService.handleSelect() | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <StyledCommandItem | ||
| cursorPointer | ||
| toCenterY | ||
| toBetween | ||
| px2 | ||
| py2 | ||
| gap4 | ||
| roundedLG | ||
| black | ||
| bgNeutral100--hover | ||
| value={item.value} | ||
| keywords={item.keywords} | ||
| onSelect={select} | ||
| onClick={select} | ||
| {...rest} | ||
| > | ||
| <Box toCenterY gap2> | ||
| <ListItemIcon icon={item.icon} /> | ||
| <Box flexDirection={titleLayout} gapY1 toCenterY gapX2> | ||
| <Box text-14>{item.title}</Box> | ||
| <Box text-12 zinc400> | ||
| {item.subtitle} | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| {item?.extra && ( | ||
| <Box toCenterY gap2 textXS gray600> | ||
| {item.extra.map((extra, index) => ( | ||
| <Accessory key={index} item={extra} /> | ||
| ))} | ||
| </Box> | ||
| )} | ||
| </StyledCommandItem> | ||
| ) | ||
| } |
44 changes: 44 additions & 0 deletions
44
apps/desktop/src/components/CommandPalette/CommandApp/ListApp/domains/ListItem.domain.ts
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,44 @@ | ||
| import { IListItem, isTooltipValue } from '@penxio/preset-ui' | ||
|
|
||
| export class ListItem { | ||
| constructor( | ||
| public raw: IListItem, | ||
| public index: number, | ||
| ) {} | ||
|
|
||
| get title() { | ||
| if (isTooltipValue(this.raw.title)) { | ||
| return this.raw.title.value | ||
| } | ||
| if (typeof this.raw.title === 'string') { | ||
| return this.raw.title | ||
| } | ||
| return '' | ||
| } | ||
|
|
||
| get subtitle() { | ||
| if (isTooltipValue(this.raw.subtitle)) { | ||
| return this.raw.subtitle.value | ||
| } | ||
| if (typeof this.raw.subtitle === 'string') { | ||
| return this.raw.subtitle | ||
| } | ||
| return '' | ||
| } | ||
|
|
||
| get value() { | ||
| return this.index.toString() | ||
| } | ||
|
|
||
| get icon() { | ||
| return this.raw.icon | ||
| } | ||
|
|
||
| get keywords() { | ||
| return [this.title, this.subtitle] | ||
| } | ||
|
|
||
| get extra() { | ||
| return this.raw.extra | ||
| } | ||
| } |
Oops, something went wrong.