70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { SettingComponentProps } from '@janhq/core'
|
|
|
|
import SettingDetailDropdownItem from './SettingDetailDropdownItem'
|
|
import SettingDetailTextInputItem from './SettingDetailTextInputItem'
|
|
import SettingDetailToggleItem from './SettingDetailToggleItem'
|
|
|
|
type Props = {
|
|
componentProps: SettingComponentProps[]
|
|
onValueUpdated: (
|
|
key: string,
|
|
value: string | number | boolean | string[]
|
|
) => void
|
|
}
|
|
|
|
const SettingDetailItem = ({ componentProps, onValueUpdated }: Props) => {
|
|
const components = componentProps.map((data) => {
|
|
switch (data.controllerType) {
|
|
case 'input': {
|
|
return (
|
|
<SettingDetailTextInputItem
|
|
key={data.key}
|
|
settingProps={data}
|
|
onValueChanged={(value) => onValueUpdated(data.key, value)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
case 'checkbox': {
|
|
return (
|
|
<SettingDetailToggleItem
|
|
key={data.key}
|
|
settingProps={data}
|
|
onValueChanged={(value) =>
|
|
onValueUpdated(data.key, value.target.checked)
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
case 'dropdown': {
|
|
return (
|
|
<SettingDetailDropdownItem
|
|
key={data.key}
|
|
settingProps={data}
|
|
onValueChanged={(value) => onValueUpdated(data.key, value)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
default:
|
|
return null
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col overflow-y-auto">
|
|
{components.map((component, index) => (
|
|
<div
|
|
className={`${index === components.length - 1 ? '' : 'border-b border-[hsla(var(--app-border))]'}`}
|
|
key={index}
|
|
>
|
|
{component}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SettingDetailItem
|