Moved ImageAdder to its own file
To make merging easier and such
This commit is contained in:
parent
d18012b58d
commit
4ba64cc93f
2 changed files with 60 additions and 56 deletions
59
src/imageadder.tsx
Normal file
59
src/imageadder.tsx
Normal 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> );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
57
src/main.tsx
57
src/main.tsx
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue