joseph izang
3 years ago
parent
8f06946872
commit
a5cdacc741
@ -0,0 +1,155 @@ |
||||
import React, { FormEvent, MouseEvent, useState } from 'react' |
||||
import { FormStateProps } from '../../types' |
||||
|
||||
interface RadioSelectionformState { |
||||
pluginType: string |
||||
inputLabel: string |
||||
radioLabel: string |
||||
radioChecked?: boolean |
||||
updateProfile: (key: string, e: MouseEvent) => void |
||||
} |
||||
|
||||
interface LocalPluginFormProps { |
||||
formSubmitHandler: (event: FormEvent, formData: FormStateProps) => void |
||||
} |
||||
|
||||
const initialState: FormStateProps = { |
||||
name: '', |
||||
displayName: '', |
||||
url: '', |
||||
type: 'iframe', |
||||
hash: '', |
||||
methods: '', |
||||
location: 'sidePanel' |
||||
} |
||||
|
||||
function LocalPluginForm ({ formSubmitHandler }: LocalPluginFormProps) { |
||||
const [plugin, setPlugin] = useState(initialState) |
||||
// const [name, setName] = useState('')
|
||||
// const [displayName, setDisplayName] = useState('')
|
||||
// const [methods, setMethods] = useState('')
|
||||
// const [url, setUrl] = useState('')
|
||||
// const [type, setType] = useState()
|
||||
// const [location, setLocation] = useState()
|
||||
|
||||
function pluginChangeHandler<P extends keyof FormStateProps> (formProps: P, value: FormStateProps[P]) { |
||||
setPlugin({ ...plugin, [formProps]: value }) |
||||
} |
||||
|
||||
// function handleSubmit (e) {
|
||||
// console.log('Logging the form submit event', e)
|
||||
// console.log('state of the plugin', plugin)
|
||||
// }
|
||||
|
||||
// const onValueChange = (event: any) => {
|
||||
// const value = event.target.type === 'radio' ? event.target.checked : event.target.value
|
||||
// const name = event.target.name
|
||||
// if (name === 'name') {
|
||||
// setName(value)
|
||||
// } else if (name === 'displayName') {
|
||||
// setDisplayName(value)
|
||||
// } else if (name === 'methods') {
|
||||
// setMethods(value)
|
||||
// } else if (name === 'url') {
|
||||
// setUrl(value)
|
||||
// } else if (name === 'type') {
|
||||
// setType(value)
|
||||
// } else if (name === 'location') {
|
||||
// setLocation(value)
|
||||
// }
|
||||
// }
|
||||
return ( |
||||
<form id="local-plugin-form" onSubmit={(e) => formSubmitHandler(e, plugin)}> |
||||
<div className="form-group"> |
||||
<label htmlFor="plugin-name">Plugin Name <small>(required)</small></label> |
||||
<input className="form-control" onChange={e => pluginChangeHandler('name', e.target.value)} value={plugin.name} id="plugin-name" data-id="localPluginName" placeholder="Should be camelCase"/> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label htmlFor="plugin-displayname">Display Name</label> |
||||
<input className="form-control" onChange={e => pluginChangeHandler('displayName', e.target.value)} value={plugin.displayName} id="plugin-displayname" data-id="localPluginDisplayName" placeholder="Name in the header"/> |
||||
</div> |
||||
<div className="form-group"> |
||||
<label htmlFor="plugin-methods">Api (comma separated list of methods name)</label> |
||||
<input className="form-control" onChange={e => pluginChangeHandler('methods', e.target.value)} value={plugin.methods} id="plugin-methods" data-id="localPluginMethods" placeholder="Name in the header"/> |
||||
</div> |
||||
|
||||
<div className="form-group"> |
||||
<label htmlFor="plugin-url">Url <small>(required)</small></label> |
||||
<input className="form-control" onChange={e => pluginChangeHandler('url', e.target.value)} value={plugin.url} id="plugin-url" data-id="localPluginUrl" placeholder="ex: https://localhost:8000" /> |
||||
</div> |
||||
<h6>Type of connection <small>(required)</small></h6> |
||||
<div className="form-check form-group"> |
||||
<div className="radio"> |
||||
<input |
||||
className="form-check-input" |
||||
type="radio" |
||||
name="type" |
||||
value="iframe" |
||||
id="iframe" |
||||
data-id='localPluginRadioButtoniframe' |
||||
checked={plugin.type === 'iframe'} |
||||
onChange={(e) => pluginChangeHandler('type', e.target.value)} |
||||
/> |
||||
<label className="form-check-label" htmlFor="iframe">Iframe</label> |
||||
</div> |
||||
<div className="radio"> |
||||
<input |
||||
className="form-check-input" |
||||
type="radio" |
||||
name="type" |
||||
value="ws" |
||||
id="ws" |
||||
data-id='localPluginRadioButtonws' |
||||
checked={plugin.type === 'ws'} |
||||
onChange={(e) => pluginChangeHandler('type', e.target.value)} |
||||
/> |
||||
<label className="form-check-label" htmlFor="ws">Websocket</label> |
||||
</div> |
||||
</div> |
||||
<h6>Location in remix <small>(required)</small></h6> |
||||
<div className="form-check form-group"> |
||||
<div className="radio"> |
||||
<input |
||||
className="form-check-input" |
||||
type="radio" |
||||
name="location" |
||||
value="sidePanel" |
||||
id="sidePanel" |
||||
data-id='localPluginRadioButtonsidePanel' |
||||
checked={plugin.location === 'sidePanel'} |
||||
onChange={(e) => pluginChangeHandler('location', e.target.value)} |
||||
/> |
||||
<label className="form-check-label" htmlFor="sidePanel">Side Panel</label> |
||||
</div> |
||||
<div className="radio"> |
||||
<input |
||||
className="form-check-input" |
||||
type="radio" |
||||
name="location" |
||||
value="mainPanel" |
||||
id="mainPanel" |
||||
data-id='localPluginRadioButtonmainPanel' |
||||
checked={plugin.location === 'mainPanel'} |
||||
onChange={(e) => pluginChangeHandler('location', e.target.value)} |
||||
/> |
||||
<label className="form-check-label" htmlFor="mainPanel">Main Panel</label> |
||||
</div> |
||||
<div className="radio"> |
||||
<input |
||||
className="form-check-input" |
||||
type="radio" |
||||
name="location" |
||||
value="none" |
||||
id="none" |
||||
data-id='localPluginRadioButtonnone' |
||||
checked={plugin.location === 'none'} |
||||
onChange={(e) => pluginChangeHandler('location', e.target.value)} |
||||
/> |
||||
<label className="form-check-label" htmlFor="none">None</label> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
) |
||||
} |
||||
|
||||
export default LocalPluginForm |
||||
Loading…
Reference in new issue