67 lines
2.3 KiB
TypeScript

import React, { Children } from 'react'
import { execute } from '../../../../../electron/core/plugin-manager/execution/extension-manager'
type Props = {
pluginName: string
preferenceValues: any
preferenceItems: any
}
import { formatPluginsName } from '@utils/converter'
import { PluginService, preferences } from '@janhq/core'
const PreferencePlugins = (props: Props) => {
const { pluginName, preferenceValues, preferenceItems } = props
/**
* Notifies plugins of a preference update by executing the `PluginService.OnPreferencesUpdate` event.
* If a timeout is already set, it is cleared before setting a new timeout to execute the event.
*/
let timeout: any | undefined = undefined
function notifyPreferenceUpdate() {
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(() => execute(PluginService.OnPreferencesUpdate), 100)
}
return (
<div>
<h6 className="mb-6 text-sm font-semibold capitalize">
{formatPluginsName(pluginName)}
</h6>
{preferenceItems
.filter((x: any) => x.pluginName === pluginName)
?.map((e: any) => (
<div key={e.preferenceKey} className="mb-4 flex flex-col">
<div className="space-y-2">
<span className="">Setting:</span>
<span className="">{e.preferenceName}</span>
</div>
<span className="mt-1 text-muted-foreground">
{e.preferenceDescription}
</span>
<div className="mt-2 flex flex-row items-center space-x-4">
<input
className="block w-full rounded-md border-0 bg-background/80 py-1.5 text-xs shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50 sm:leading-6"
defaultValue={
preferenceValues.filter(
(v: any) => v.key === e.preferenceKey
)[0]?.value
}
onChange={(event) => {
preferences
.set(e.pluginName, e.preferenceKey, event.target.value)
.then(() => notifyPreferenceUpdate())
}}
></input>
</div>
</div>
))}
</div>
)
}
export default PreferencePlugins