Add form to ProxyEditor

This commit is contained in:
Ilya Ig. Petrov 2017-05-22 18:21:17 -07:00
parent fc50dba847
commit 190bb1fd08
2 changed files with 72 additions and 59 deletions

View File

@ -11,16 +11,16 @@ export default function getModList(theState) {
<ol onChange={props.onChange}> <ol onChange={props.onChange}>
{ {
props.orderedConfigs.map((conf, index) => ( props.orderedConfigs.map((conf, index) => (
<InfoLi (<InfoLi
conf={conf} conf={conf}
type='checkbox' type='checkbox'
checked={conf.value} checked={conf.value}
key={index} key={index}
onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})} onClick={() => props.onClick({targetConf: conf, targetIndex: index, targetChildren: props.childrenOfMod})}
> >
{props.childrenOfMod && props.childrenOfMod[conf.key]} {Boolean(conf.value) && props.childrenOfMod && props.childrenOfMod[conf.key]}
</InfoLi>) </InfoLi>)
) ))
} }
</ol> </ol>
); );

View File

@ -41,6 +41,7 @@ export default function getProxyEditor(theState) {
width: 100%; width: 100%;
} }
table.editor input[type="submit"],
table.editor button { table.editor button {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
@ -48,7 +49,7 @@ export default function getProxyEditor(theState) {
padding: 0; padding: 0;
border: none; border: none;
} }
table.editor button.add { table.editor .add {
font-weight: 800; font-weight: 800;
} }
table.editor button.export { table.editor button.export {
@ -92,29 +93,38 @@ export default function getProxyEditor(theState) {
super(props); super(props);
this.state = { this.state = {
proxyStringRaw: localStorage.getItem(uiRaw) || '', proxyStringRaw: localStorage.getItem(uiRaw) || '',
ifExportView: false, ifExportMode: false,
}; };
props.funs.setStatusTo('Hello from editor!'); // props.funs.setStatusTo('Hello from editor!');
this.switchBtn = ( this.switchBtn = (
<button <button
class={'emoji' + ' ' + scopedCss.export} class={'emoji' + ' ' + scopedCss.export}
title="импорт/экспорт" title="импорт/экспорт"
onClick={linkEvent(this, this.handleViewSwitch)} onClick={linkEvent(this, this.handleModeSwitch)}
></button> ></button>
); );
} }
handleViewSwitch(that) { handleModeSwitch(that) {
that.setState({ ifExportMode: !that.state.ifExportMode });
}
handleAdd(that) {
that.setState({ ifExportView: !that.state.ifExportView });
} }
render(props) { render(props) {
return !this.state.ifExportView ? ( return (
<form action="https://ya.ru">
{
!this.state.ifExportMode
? ((
<table class={scopedCss.editor}> <table class={scopedCss.editor}>
<thead> <thead>
<tr> <tr>
@ -133,20 +143,20 @@ export default function getProxyEditor(theState) {
</select> </select>
</td> </td>
<td class={scopedCss.leftPadded}> <td class={scopedCss.leftPadded}>
<input type="url" placeholder="89.140.125.17" class={scopedCss.noPad}/> <input required type="url" placeholder="89.140.125.17" pattern="https://[a]+\.ru" class={scopedCss.noPad}/>
</td> </td>
<td class={scopedCss.leftPadded}> <td class={scopedCss.leftPadded}>
<input type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/> <input required type="number" placeholder="9150" min="0" step="1" max="65535" class={scopedCss.noPad} style="min-width: 4em"/>
</td> </td>
<td> <td>
<button class={''} title="Повысить приоритет"></button> <button title="Повысить приоритет"></button>
<br/> <br/>
<button class={scopedCss.add} title="Добавить прокси">+</button> <input type="submit" class={scopedCss.add} title="Добавить прокси" onClick={linkEvent(this, this.handleAdd)} value="+"/>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
) : ( )) : ((
<table class={scopedCss.editor}> <table class={scopedCss.editor}>
<thead> <thead>
<tr> <tr>
@ -163,11 +173,14 @@ SOCKS5 localhost:9050; # Tor Expert
SOCKS5 localhost:9150; # Tor Browser SOCKS5 localhost:9150; # Tor Browser
HTTPS 11.22.33.44:3143; HTTPS 11.22.33.44:3143;
PROXY foobar.com:8080; # Not HTTP!`.trim()} PROXY foobar.com:8080; # Not HTTP!`.trim()}
value={props.value || localStorage.getItem(uiRaw) || ''} value={this.state.proxyStringRaw}
/></td> /></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
))
}
</form>
); );
}; };