|
- import * as React from 'react'
- import { DropdownInput } from '../DropdownInput'
- import { Config } from '../../../../common/config'
-
- export interface SettingsFormProps extends React.HTMLProps<HTMLElementTagNameMap['form']> {
- defaultValues?: Config
- ranges: Record<string, string>
- scaleFactors: Record<string, string>
- midiAccess?: MIDIAccess
- lastStateChangeTimestamp?: number
- naturalKeyWidths: number[]
- }
-
- export const SettingsForm: React.FC<SettingsFormProps> = ({
- disabled,
- midiAccess,
- ranges,
- defaultValues = {},
- scaleFactors,
- lastStateChangeTimestamp,
- naturalKeyWidths,
- ...etcProps
- }) => {
- const inputs = typeof midiAccess !== 'undefined' ? Array.from(midiAccess.inputs) : undefined
-
- return (
- <form {...etcProps}>
- <fieldset disabled={disabled} className="contents">
- <legend className="sr-only">Settings</legend>
- <div className="flex flex-col gap-4">
- <div>
- <DropdownInput
- label="Input device"
- name="queryDeviceKey"
- defaultValue={defaultValues?.['queryDeviceKey']}
- key={lastStateChangeTimestamp}
- >
- {inputs?.map(([name, device]) => (
- <option key={name} value={name}>
- {device.name}
- </option>
- ))}
- </DropdownInput>
- </div>
- <div className="flex-auto">
- <DropdownInput
- name="range"
- label="Keyboard range"
- defaultValue={defaultValues?.['range']}
- >
- {Object.entries(ranges).map(([name, range]) => (
- <option key={name} value={range}>
- {name}
- </option>
- ))}
- </DropdownInput>
- </div>
- <div className="flex justify-between items-center gap-8 h-10">
- <div>Scale factor</div>
- <div className="flex items-center gap-8">
- {Object.entries(scaleFactors).map(([label, value]) => (
- <div key={value}>
- <label>
- <input
- name="scaleFactor"
- type="radio"
- value={value}
- defaultChecked={
- defaultValues?.['scaleFactor']?.toString() === value.toString()
- }
- />{' '}
- {label}
- </label>
- </div>
- ))}
- </div>
- </div>
- <div className="flex-auto">
- <DropdownInput
- name="naturalKeyWidth"
- label="Natural key width"
- defaultValue={defaultValues?.['naturalKeyWidth']}
- >
- {naturalKeyWidths.map((n) => (
- <option key={n} value={n}>
- {n}
- </option>
- ))}
- </DropdownInput>
- </div>
- <div className="flex justify-between items-center gap-8">
- <div>Natural key color</div>
- <div>
- <input
- name="naturalKeyColor"
- type="color"
- className="h-10"
- defaultValue={defaultValues?.['naturalKeyColor']}
- />
- </div>
- </div>
- <div className="flex justify-between items-center gap-8">
- <div>Accidental key color</div>
- <div>
- <input
- name="accidentalKeyColor"
- type="color"
- className="h-10"
- defaultValue={defaultValues?.['accidentalKeyColor']}
- />
- </div>
- </div>
- <div className="mt-12 flex gap-4">
- <div className="w-0 flex-auto">
- <button
- className="w-full h-10 rounded border overflow-hidden"
- type="submit"
- name="action"
- value="cancelSaveConfig"
- >
- Cancel
- </button>
- </div>
- <div className="w-0 flex-auto">
- <button
- className="w-full h-10 rounded border overflow-hidden"
- type="submit"
- name="action"
- value="resetConfig"
- >
- Reset to Defaults
- </button>
- </div>
- </div>
- <div>
- <button
- className="w-full h-10 rounded border bg-white text-black overflow-hidden"
- type="submit"
- name="action"
- value="saveConfig"
- >
- Save
- </button>
- </div>
- </div>
- </fieldset>
- </form>
- )
- }
|