Moved ImageAdder to its own file

To make merging easier and such
This commit is contained in:
Joe Ludwig 2021-02-09 09:02:08 -08:00
parent d18012b58d
commit 4ba64cc93f
2 changed files with 60 additions and 56 deletions

59
src/imageadder.tsx Normal file
View file

@ -0,0 +1,59 @@
import bind from 'bind-decorator';
import * as React from 'react';
interface ImageAddedProps
{
addImageCallback: ( url: string ) => void;
validateUrlCallback: ( url: string ) => boolean;
}
interface ImageAdderState
{
url: string;
}
export class ImageAdder extends React.Component< ImageAddedProps, ImageAdderState >
{
constructor( props: any )
{
super( props );
this.state = { url: "" };
}
@bind
private handleChange( event: React.ChangeEvent<HTMLInputElement> )
{
this.setState( { url: event.target.value });
}
@bind
private handleSubmit(event: React.FormEvent< HTMLFormElement > )
{
if (this.props.validateUrlCallback(this.state.url))
{
this.props.addImageCallback( this.state.url );
event.preventDefault();
}
else
{
alert("given image is invalid"); //could eventually replace this with something on the render
event.preventDefault();
}
}
render()
{
return (
<form onSubmit={ this.handleSubmit }>
<label>
Image URL to add:
<input type="text" value={this.state.url } onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form> );
}
}

View file

@ -3,6 +3,7 @@ import { EAction, EHand, g_builtinModelBox, InitialInterfaceLock, Av } from '@aa
import bind from 'bind-decorator'; import bind from 'bind-decorator';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { ImageAdder } from './imageadder';
class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for items on the menu, basically just a button class MenuItem extends React.Component< {displayImage, onClick}, {}> //class for items on the menu, basically just a button
{ {
@ -126,62 +127,6 @@ class ImageMenu extends React.Component< {}, ImageMenuState> //class for the who
} }
interface ImageAddedProps
{
addImageCallback: ( url: string ) => void;
validateUrlCallback: ( url: string ) => boolean;
}
interface ImageAdderState
{
url: string;
}
class ImageAdder extends React.Component< ImageAddedProps, ImageAdderState >
{
constructor( props: any )
{
super( props );
this.state = { url: "" };
}
@bind
private handleChange( event: React.ChangeEvent<HTMLInputElement> )
{
this.setState( { url: event.target.value });
}
@bind
private handleSubmit(event: React.FormEvent< HTMLFormElement > )
{
if (this.props.validateUrlCallback(this.state.url))
{
this.props.addImageCallback( this.state.url );
event.preventDefault();
}
else
{
alert("given image is invalid"); //could eventually replace this with something on the render
event.preventDefault();
}
}
render()
{
return (
<form onSubmit={ this.handleSubmit }>
<label>
Image URL to add:
<input type="text" value={this.state.url } onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form> );
}
}
const k_popupHtml = const k_popupHtml =
` `
<!DOCTYPE html> <!DOCTYPE html>