77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors'
|
|
import { NoteType } from '@standardnotes/snjs'
|
|
import { useApplication } from '../ApplicationProvider'
|
|
import { PredicateKeypath, PredicateKeypathTypes } from './PredicateKeypaths'
|
|
|
|
type Props = {
|
|
keypath: PredicateKeypath
|
|
value: string
|
|
setValue: (value: string) => void
|
|
}
|
|
|
|
const PredicateValue = ({ keypath, value, setValue }: Props) => {
|
|
const application = useApplication()
|
|
const type = PredicateKeypathTypes[keypath]
|
|
const editorItems = getDropdownItemsForAllEditors(application)
|
|
|
|
return type === 'noteType' ? (
|
|
<select
|
|
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value)
|
|
}}
|
|
>
|
|
{Object.entries(NoteType).map(([key, value]) => (
|
|
<option key={key} value={value}>
|
|
{key}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : type === 'editorIdentifier' ? (
|
|
<select
|
|
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value)
|
|
}}
|
|
>
|
|
{editorItems.map((editor) => (
|
|
<option key={editor.value} value={editor.value}>
|
|
{editor.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : type === 'string' || type === 'date' ? (
|
|
<input
|
|
className="flex-grow rounded border border-border bg-default px-2 py-1.5"
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value)
|
|
}}
|
|
/>
|
|
) : type === 'boolean' ? (
|
|
<select
|
|
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value)
|
|
}}
|
|
>
|
|
<option value="true">True</option>
|
|
<option value="false">False</option>
|
|
</select>
|
|
) : type === 'number' ? (
|
|
<input
|
|
type="number"
|
|
className="flex-grow rounded border border-border bg-default px-2 py-1.5"
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value)
|
|
}}
|
|
/>
|
|
) : null
|
|
}
|
|
|
|
export default PredicateValue
|