diff --git a/src/imageadder.tsx b/src/imageadder.tsx new file mode 100644 index 0000000..cfb064d --- /dev/null +++ b/src/imageadder.tsx @@ -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 ) + { + 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 ( +
+ + +
); + } +} + + diff --git a/src/main.tsx b/src/main.tsx index a6e7228..afa52e7 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import { EAction, EHand, g_builtinModelBox, InitialInterfaceLock, Av } from '@aa import bind from 'bind-decorator'; import * as React from 'react'; 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 { @@ -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 ) - { - 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 ( -
- - -
); - } -} - - const k_popupHtml = `